/* Teklif İste Form Styles */
.quote-page-wrapper {
    max-width: 900px;
    margin: 60px auto;
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.quote-hero {
    position: relative;
    width: 100%;
    /* Increase padding to ensure the full banner is visible vertically */
    padding-top: 34%;
    overflow: hidden;
}

.quote-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/Mask Group 16.png');
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 1;
}

/* We don't add the text block because it's already burned into the image or we can just rely on the image's top part which has the dark overlay and text if the mockup is the actual image. If the mockup includes the form, background-size cover with top center will show the top banner part correctly. */

.quote-form-container {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 30px;
}

.quote-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.quote-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.quote-form-group label {
    color: var(--primary-blue);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.quote-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--primary-blue);
    outline: none;
    transition: var(--transition);
}

.quote-form-control::placeholder {
    color: var(--primary-blue);
    opacity: 0.7;
}

.quote-form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(11, 83, 161, 0.1);
}

textarea.quote-form-control {
    resize: vertical;
    min-height: 120px;
}

/* Radio & Checkbox styling */
.quote-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quote-radio-item {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--primary-blue);
    font-size: 14px;
}

.quote-radio-item input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-blue);
}

/* Specific inline numeric inputs for the list */
.quote-inline-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.quote-inline-label {
    width: 200px;
    color: var(--primary-blue);
    font-size: 14px;
}

.quote-inline-input {
    flex: 1;
    max-width: 200px;
}

.quote-submit-btn {
    background-color: var(--primary-blue);
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.quote-submit-btn:hover {
    background-color: var(--secondary-blue);
}

@media (max-width: 768px) {
    .quote-form-row {
        flex-direction: column;
        gap: 15px;
    }
    .quote-inline-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .quote-inline-label {
        width: auto;
    }
    .quote-inline-input {
        max-width: 100%;
    }
}