/* ============================================================
   Registration Pages — Responsive Overrides
   Covers: terms.blade.php, step2.blade.php, step3.blade.php,
           status.blade.php
   Breakpoints: ≤991px (tablet), ≤767px (mobile), ≤576px (small)
   ============================================================ */

/* ----------------------------------------------------------
   TABLET  (max-width: 991px)
   ---------------------------------------------------------- */
@media (max-width: 991px) {

    /* Progress stepper container */
    #progress-steps .mx-auto {
        max-width: 100% !important;
        padding: 0 0.5rem;
    }

    /* Sidebar — hide completely on tablet/mobile as per user request */
    aside.col-lg-3 {
        display: none !important;
    }

    /* Section title badge smaller */
    .section-title .badge-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    /* Upload card horizontal — ensure content stays readable */
    .upload-card-h {
        flex-wrap: wrap;
        gap: 0.75rem !important;
    }

    /* Step 3 section headers — remove fixed height */
    #section-education .d-flex[style*="height: 61px"],
    #section-experience .d-flex[style*="height: 61px"],
    #section-memberships .d-flex[style*="height: 61px"],
    #section-arbitration-centers .d-flex[style*="height: 61px"],
    #section-arbitration-experiences .d-flex[style*="height: 61px"],
    #section-certifications .d-flex[style*="height: 61px"] {
        height: auto !important;
        min-height: 50px;
        padding: 0.75rem 0;
    }

    /* Terms PDF modal — wider on tablet */
    .pdf-modal-content {
        max-width: 90% !important;
        max-height: 92% !important;
    }
}

/* ----------------------------------------------------------
   MOBILE  (max-width: 767px)
   ---------------------------------------------------------- */
@media (max-width: 767px) {

    /* ---- Progress Stepper ---- */
    #progress-steps .step-dot {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    #progress-steps .step-label-active,
    #progress-steps .step-label-inactive {
        font-size: 0.7rem;
        text-align: center;
    }

    #progress-steps .step-line {
        height: 3px;
        margin: 0 0.25rem;
        margin-bottom: 1.2rem;
    }

    /* Stepper container scroll fallback */
    #progress-steps>div>div {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        flex-wrap: nowrap;
    }

    /* ---- Status Page ---- */
    .status-card {
        padding: 2rem 1.25rem;
        border-radius: 1.25rem;
    }

    .icon-box-success,
    .icon-box-error {
        width: 80px;
        height: 80px;
        font-size: 2.25rem;
        margin-bottom: 1rem;
        box-shadow: 0 0 0 8px rgba(183, 144, 36, .05);
    }

    .icon-box-error {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, .05);
    }

    .status-card .h3 {
        font-size: 1.25rem !important;
    }

    .status-card .fs-5 {
        font-size: 1rem !important;
    }

    /* Status buttons full width on mobile */
    .status-card .btn-primary-custom,
    .status-card .btn-secondary-custom {
        width: 100%;
        text-align: center;
    }

    .status-card .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    /* ---- Forms Layout ---- */
    /* Ensure 2-col splits stack on mobile */
    .row.g-3>.col-md-6:not(.col-6) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ---- Upload Cards ---- */
    .upload-card-h {
        flex-wrap: wrap;
        gap: 0.75rem !important;
    }

    .upload-card-h .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .upload-card-h .d-flex.gap-2 .btn {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }

    /* Profile picture area — constrain on mobile */
    .upload-card .rounded-3[style*="width: 100px"] {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
    }



    /* ---- Cards/Sections ---- */
    .card .card-body {
        padding: 1rem !important;
    }

    .soft-card {
        border-radius: 0.85rem;
    }

    /* ---- Terms Table ---- */
    #membershipTable th,
    #membershipTable td {
        font-size: 0.82rem;
        padding: 0.5rem 0.4rem;
    }

    /* ---- Download Cards ---- */
    .download-card {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
        min-height: auto;
    }

    .download-card .left {
        flex-direction: column;
        align-items: center;
    }

    .download-title {
        white-space: normal;
        text-align: center;
        font-size: 0.9rem;
    }

    /* ---- Agreement Section ---- */
    #agreement-box .form-check {
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center;
    }

    #agreement-box .form-check-input {
        width: 1.5em;
        height: 1.5em;
        margin: 0 auto;
    }

    /* ---- OTP Modal ---- */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* Error list on status page */
    .error-list {
        padding: 1rem;
    }

    .error-list li {
        font-size: 0.85rem;
    }

    /* Segmented control (terms page) — already handled but ensure proper sizing */
    .segmented .btn {
        padding: 0.6rem 0.4rem !important;
        font-size: 0.8rem;
    }

    /* Terms page submit button area */
    #step1Form .d-flex.justify-content-end {
        justify-content: center !important;
    }

    #step1Form .d-flex.justify-content-end .btn {
        width: 100%;
    }

    /* Step3 add-item buttons */
    #btnAddEducation,
    #btnAddExperience,
    #btnAddMembership,
    #btnAddArbitrationCenter,
    #btnAddArbitrationExperience,
    #btnAddCertification {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Step 2 & 3 bottom action bar */
    .d-flex.justify-content-between.border-top {
        flex-direction: column;
        gap: 0.75rem;
    }

    .d-flex.justify-content-between.border-top .btn {
        width: 100%;
        text-align: center;
    }

    /* Terms PDF modal — full width on mobile */
    .pdf-modal-content {
        max-width: 98% !important;
        max-height: 94% !important;
        margin: 1% auto !important;
        padding: 10px;
        border-radius: 8px;
    }
}

/* ----------------------------------------------------------
   SMALL MOBILE  (max-width: 576px)
   ---------------------------------------------------------- */
@media (max-width: 576px) {

    /* Progress stepper — smaller on very small screens but keep labels */
    #progress-steps .step-label-active,
    #progress-steps .step-label-inactive {
        font-size: 0.6rem;
        text-align: center;
        word-break: keep-all;
    }

    #progress-steps .step-dot {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    #progress-steps .step-dot .fa {
        font-size: 0.65rem;
    }

    #progress-steps .step-line {
        margin: 0 0.15rem;
        margin-bottom: 1rem;
    }

    /* Container padding */
    .container.py-5 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Page header */
    .page-header__inner h2 {
        font-size: 1.35rem;
    }

    /* Cards — tighter padding */
    .card .card-body {
        padding: 0.85rem !important;
    }

    .soft-card {
        border-radius: 0.75rem;
    }

    /* Status card — minimal padding */
    .status-card {
        padding: 1.5rem 1rem;
        border-radius: 1rem;
    }

    .icon-box-success,
    .icon-box-error {
        width: 64px;
        height: 64px;
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    /* Upload card icons smaller */
    .upload-card-h .icon-badge {
        width: 40px;
        height: 40px;
    }



    /* Brand chip smaller */
    .brand-chip {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Section msg smaller */
    .section-msg {
        font-size: 0.85rem;
        padding: 0.75rem !important;
    }
}