/* ============================================
   Privacy Consumer Request Form Styles
   ============================================ */

/* Overall layout */
.section-title-large { font-size: 22px !important; font-weight: 700; }
.section-title-blue { color: #223169 !important; }
.section-title-mb2 { margin-bottom: 2px !important; }
.section-title-mb6 { margin-bottom: 6px !important; }
.help-text-lg { font-size: 15px !important; }
.section-bg { background: #fafafa !important; }
.section-min-vh { min-height: 100vh !important; }
.select-lg { font-size: 15px !important; }

.card-section-large-mb { margin: 40px auto 32px auto !important; max-width: 900px !important; }
.card-section-border { border-radius: 24px !important; border: 1px solid #F1F2F6 !important; }
.card-section-radius { border-radius: 24px !important; }
.card-section-padded { background: #fff !important; box-shadow: 0 8px 24px rgba(18,25,38,.06) !important; padding: 32px 28px !important; }
.card-section-shadow { box-shadow: 0 8px 24px rgba(18,25,38,.06) !important; }

.button-arrow-auto-h { height: auto !important; }

/* Privacy Form Specific Styles */
.privacy-form .section-title {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 8px;
}

.privacy-form .card-section {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 22px rgba(18,25,38,.06);
    margin-bottom: 24px;
    border: 1px solid #F1F2F6;
}

.privacy-form .help-text {
    font-size: 12px;
    color: #6c757d;
    margin-top: -2px;
}

.privacy-form .required:after {
    content: " *";
    color: #dc3545;
}

.privacy-form .form-check {
    margin-bottom: 8px;
}

.privacy-form .form-check .form-check-label {
    margin-left: 10px;
    font-size: 14px;
    color: #2B2F36;
}

.privacy-form .blog_banner {
    min-height: auto;
    padding: 40px 0;
}

.privacy-form .banner_textbox h1 {
    font-size: 32px;
}

.privacy-form .banner_textbox p {
    opacity: .95;
}

/* Inputs/selects */
.privacy-form .form-control {
    min-height: 42px;
    border-radius: 10px;
    border-color: #E4E6EB;
    font-size: 14px;
}

.privacy-form .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(45,189,202,.15);
    border-color: #2DBDCA;
}

.privacy-form .select2-selection {
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid #E4E6EB;
}

.privacy-form .select2-selection__rendered {
    line-height: 40px;
    font-size: 14px;
}

.privacy-form .select2-selection__arrow {
    height: 40px;
}

/* Checkbox/radio visuals */
.privacy-form .form-check-input-custom {
    width: 18px;
    height: 18px;
    border: 1px solid #C8CDD4;
}

.privacy-form .form-check-input-custom:checked {
    background-color: #2DBDCA;
    border-color: #2DBDCA;
}

/* Section dividers */
.privacy-form .card-section + .card-section {
    margin-top: 8px;
}

/* Submit button */
.privacy-form .button-arrow {
    border-radius: 10px;
    background: #2DBDCA;
    border-color: #2DBDCA;
}

.privacy-form .button-arrow:hover {
    filter: brightness(.95);
}

/* Calendar tweaks */
.daterangepicker.dropdown-menu.show-calendar {
    min-width: unset;
}

.daterangepicker .calendar-table {
    margin: 0;
}

.daterangepicker .drp-calendar {
    padding: 8px;
}

/* Ensure labels never show borders */
.privacy-form label {
    border: none !important;
}

/* Signature block */
.agreement-signature-wrap {
    border: 1px dashed #E4E6EB;
    border-radius: 10px;
    padding: 12px 14px;
    background: #FAFAFB;
}

.agreement-signature-wrap .autorized-person-sign {
    font-family: 'Segoe Script', 'Snell Roundhand', cursive;
    font-size: 28px;
    color: #222;
    font-style: italic;
}

.agreement-signature-wrap .insurance_agreement-text {
    font-size: 14px;
    color: #2B2F36;
    margin-bottom: 0;
}

.agreement-signature-wrap .authorized-title {
    color: #2B2F36;
    font-weight: normal;
}

.agreement-signature-wrap .fw-bold {
    font-weight: 700;
    color: #223169;
}

.line-height-normal {
    line-height: 1.5;
}

/* Signature input - simple text style */
#signature_name {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 14px;
}

/* Section separators */
.section-separator {
    height: 1px;
    background-color: #E4E6EB;
    margin: 24px 0;
    width: 100%;
}

.section-title-align {
    text-align: left;
}

/* Submit bar */
.form-submit-bar {
    background: #F3F4F7;
    padding: 20px 24px;
    border-top: 1px solid #ECEFF3;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Submit button */
.button-arrow {
    background-color: #EA842A !important;
    border-color: #EA842A !important;
    color: #fff !important;
    border-radius: 12px !important;
    min-height: 44px;
    position: relative;
}

.button-arrow:hover {
    filter: brightness(0.95);
}

.button-arrow span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button-arrow span:after {
    position: absolute;
    content: "";
    background-size: 100% !important;
    opacity: 0;
    height: 20px;
    background: url(../images/arrow-right-white.svg) no-repeat;
    width: 24px;
    top: 50%;
    margin-top: -10px;
    margin-right: 0px !important;
    right: -20px;
    transition: 0.5s;
}

@media (min-width: 768px) {
    .button-arrow:hover span:after {
        opacity: 1;
        right: 0px;
    }
    
    .button-arrow:hover span {
        padding-right: 33px;
    }
}

/* Help panel below submit */
.help-panel {
    background: #FFF4EA;
    border: 1px solid #FFE4C7;
    border-radius: 18px;
    padding: 22px 24px;
}

.help-panel h3 {
    font-size: 22px;
    font-weight: 700;
    color: #223169;
    margin-bottom: 10px;
}

.help-panel ul {
    margin-bottom: 10px;
}

.help-panel ul li {
    margin-bottom: 6px;
}

/* Inputs */
.form-control, select, textarea {
    background-color: #f6f7fa !important;
    border-color: #e4e6eb !important;
}

/* Align auxiliary panels with form card width */
.align-with-form {
    max-width: 900px;
    margin: 0 auto 32px auto;
}

.autorized-person-sign {
    font-style: italic !important;
}

/* ============================================
   Desktop State Dropdown - 50% width
   ============================================ */
.privacy-form .state-select-col {
    max-width: 50% !important;
}

.privacy-form .state-select-col .js-select2-new.state,
.privacy-form .state-select-col .select2-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ============================================
   Mobile Responsiveness Fixes
   ============================================ */

/* Fix radio button and checkbox labels on mobile - prevent wrapping */
@media (max-width: 767.98px) {
    .privacy-form .form-check {
        display: flex !important;
        align-items: flex-start !important;
        margin-bottom: 12px !important;
        padding-left: 0 !important;
    }
    
    .privacy-form .form-check-input-custom {
        margin-top: 4px !important;
        margin-right: 10px !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        width: 18px !important;
        height: 18px !important;
    }
    
    .privacy-form .form-check-label {
        margin-left: 0 !important;
        padding-left: 0 !important;
        flex: 1 !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }

    /* Fix state dropdown layout on mobile */
    .privacy-form .row.align-items-center {
        flex-wrap: wrap !important;
    }
    
    .privacy-form .row.align-items-center .col-auto {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .privacy-form .row.align-items-center .col-auto .section-title {
        margin-bottom: 8px !important;
    }
    
    .privacy-form .row.align-items-center .col {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .privacy-form .row.align-items-center select {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure Select2 dropdown is full width on mobile */
    .privacy-form .select2-container {
        width: 100% !important;
    }
    
    .privacy-form .js-select2-new.state {
        width: 100% !important;
    }
    
    /* Specific fixes for state dropdown row */
    .privacy-form .state-dropdown-row {
        flex-wrap: wrap !important;
    }
    
    .privacy-form .state-label-col {
        width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .privacy-form .state-select-col {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix validation error messages on mobile */
    .privacy-form .invalid-feedback {
        display: block !important;
        width: 100% !important;
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        padding: 0 !important;
    }
    
    /* Ensure error messages don't break form-check layout */
    .privacy-form .form-check .invalid-feedback {
        flex-basis: 100% !important;
        margin-top: 6px !important;
        margin-left: 0 !important;
        order: 3 !important;
    }
    
    /* Fix input fields with errors on mobile */
    .privacy-form .form-control.is-invalid,
    .privacy-form select.is-invalid {
        margin-bottom: 0 !important;
        border-color: #dc3545 !important;
    }
    
    /* Add spacing after error message */
    .privacy-form .form-control.is-invalid + .invalid-feedback,
    .privacy-form select.is-invalid + .invalid-feedback {
        margin-bottom: 12px !important;
    }
    
    /* Fix Select2 error display on mobile */
    .privacy-form .select2-container + .invalid-feedback,
    .privacy-form .select2-container.is-invalid + .invalid-feedback {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Ensure Select2 container doesn't break on mobile */
    .privacy-form .select2-container {
        margin-bottom: 0 !important;
    }
    
    /* Add error state to Select2 container when validation fails */
    .privacy-form .select2-container.error {
        border-color: #dc3545 !important;
    }
    
    .privacy-form .select2-selection--single.error {
        border-color: #dc3545 !important;
    }
    
    /* Ensure section titles don't break layout */
    .privacy-form .section-title {
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Fix rights requested section error placement */
    .privacy-form .mb-4 .section-title + .invalid-feedback {
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }
    
    /* Improve card padding on mobile */
    .privacy-form .card-section-padded {
        padding: 24px 16px !important;
    }
    
    /* Better spacing for form groups */
    .privacy-form .mb-3 {
        margin-bottom: 16px !important;
    }
    
    .privacy-form .mb-4 {
        margin-bottom: 20px !important;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .privacy-form .form-check-label {
        font-size: 14px !important;
    }
    
    .privacy-form .section-title-large {
        font-size: 18px !important;
    }
    
    .privacy-form .help-text-lg {
        font-size: 13px !important;
    }
    
    /* Tighter spacing on very small screens */
    .privacy-form .form-check {
        margin-bottom: 10px !important;
    }
    
    .privacy-form .section-separator {
        margin: 20px 0 !important;
    }
}