/*
 * MOTO SERVICE RENT — Step 3: Driver Details / Billing
 * File: moto-step3.css
 * Path: /wp-content/themes/marina/css/moto-step3.css
 * v1.0
 *
 * Overrides base .crbs-form-panel dark rules with higher specificity
 */

/* ═══════════════════════════════════════════
   PANELS: white bg, no dark box
   ═══════════════════════════════════════════ */

.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 32px !important;
}

/* Section title — serif + orange underline */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel-label {
    color: #1a1a1a !important;
    background: transparent !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    padding: 0 0 10px !important;
    margin: 0 0 24px !important;
    border-bottom: 2px solid #eb7c16 !important;
    display: block !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel-label span {
    color: #1a1a1a !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel-label::after {
    display: none !important;
}

/* Panel content — always open */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════
   FORM FIELDS — Override dark panel rules
   ═══════════════════════════════════════════ */

.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field {
    background: transparent !important;
    margin-bottom: 16px !important;
}

/* Labels — black, visible */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field > label {
    color: #1a1a1a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Inputs — light gray bg, subtle border */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field input,
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field select,
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field textarea {
    background: #f7f7f7 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #1a1a1a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}

/* Textarea */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

/* Focus — orange border + glow */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field input:focus,
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field select:focus,
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field textarea:focus {
    border-color: #eb7c16 !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(235,124,22,0.08) !important;
}

/* Placeholder */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field input::placeholder {
    color: #aaa !important;
}

/* ═══════════════════════════════════════════
   SELECTMENU (jQuery UI — Country dropdown)
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .ui-selectmenu-button {
    background: #f7f7f7 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #1a1a1a !important;
    padding: 12px 14px !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .ui-selectmenu-button:hover {
    border-color: #eb7c16 !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .ui-selectmenu-text {
    color: #1a1a1a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-meta-icon-arrow-vertical {
    color: #999 !important;
    font-family: 'crbs-meta-icon' !important;
}

/* ═══════════════════════════════════════════
   PHONE INPUT (intlTelInput)
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .iti {
    width: 100% !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .iti__selected-flag {
    padding-left: 10px !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .iti__selected-dial-code {
    color: #1a1a1a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .iti__arrow {
    border-top-color: #999 !important;
}

/* ═══════════════════════════════════════════
   BILLING CHECKBOX
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-checkbox {
    border: 1.5px solid #eb7c16 !important;
    border-radius: 3px !important;
    width: 20px !important;
    height: 20px !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-checkbox .crbs-meta-icon-tick {
    font-family: 'crbs-meta-icon' !important;
    color: #eb7c16 !important;
}
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-checkbox.crbs-state-selected {
    background: rgba(235,124,22,0.08) !important;
}

/* ═══════════════════════════════════════════
   STEP HEADER
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-main-content-step-3 .crbs-main-content-step-header-title {
    color: #1a1a1a !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* Disable section overlay */
.moto-modal-body .crbs-main-content-step-3 .crbs-disable-section {
    display: none !important;
}

/* ═══════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Stack fields full width */
    .moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-field-width-50,
    .moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-field-width-33,
    .moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-field-width-100 {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Smaller section title */
    .moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel-label {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    /* Slightly smaller inputs */
    .moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field input,
    .moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field select,
    .moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field textarea {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* Hide billing checkbox square */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel-label .crbs-form-checkbox {
    display: none !important;
}

/* ═══════════════════════════════════════════
   FIX: Phone input — respect intlTelInput padding-left
   intlTelInput sets inline padding-left for flag+prefix space
   Our global padding override kills it → user types over the prefix
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .crbs-form-panel .crbs-form-field .iti input,
.moto-modal-body .crbs-main-content-step-3 .crbs-client-form .iti input#mobile_code {
    padding-left: 75px !important;
}