/* .suitefinder-fields{
    width: 100% !important;
}

.suitefinder-fields label {
  display: block !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #444444 !important;
}

.suitefinder-fields label span {
    color: #ef4444 !important;
}

.suitefinder-fields input {
   width: 100% !important;
    height: 42px !important;
    padding: 10px 16px !important;
    border: 1px solid #d9dddd !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    color: #444444 !important;
    font-size: 14px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}


.suitefinder-fields input::placeholder {
    color: #9ca3af !important;
}



.sf-error {
    min-height: 1em;
    margin-top: 4px;
    font-size: 12px;
    color: #ef4444;
} */

.container-box-step{
    max-width: 680px !important;
}

.suitefinder-fields input:focus {
    border-color: #287d82
 !important;
    box-shadow: 0 0 0 2px rgba(40, 125, 130, 0.15) !important;
    outline: none !important;
}
.sf-step{
    padding: 0 !important;
}
#smsConsent:checked {
    background-color: #287d82 !important;
    border-color: #287d82 !important;
}
.sf-topbar{
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--line) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}
.sf-checkbox{
    gap: 10px !important;
    align-items: center;
}
.line-bar{
    height: 2px !important;
    margin: 0 !important;
}


.search-svg{
    left: 550px !important;
}
.sf-plan-card{
    padding: 20px;
}
.plan-feature{
    width: 1200px;
    margin: auto;
    padding-top: 30px;  
}
#expiryMonth, #expiryYear{
    border: 1px solid #6b7280 !important;
    padding: 12px 10px !important;
}
.term-popup{
    margin: auto !important;
}
#sf-progress{
    padding: 20px !important;
}
#accordion-loc-edit{
    margin: auto;
    width: 850px !important;
    
}
/* .sf-input-field{
    padding: 20px 10px !important;
} */
 .page-template-new-register-location #loc-instagram,.page-template-new-register-location #loc-facebook{
  border: 1px solid #6b7280 !important;
    /* padding: 12px 10px !important;   */
 }
 #loc-instagram , #loc-facebook{
    border-bottom: 1px solid #9e9e9e !important;
 }

 .input-group-prepend{
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
 }
 .cst-selectbrand{
    margin-top: 20px !important;
 }
 .cstm-brandtxt{
    border-radius: 12px !important;
    height: 42px !important;
    border: 1px solid #6b7280 !important;
 } 
 .edit_loc__form_row input{
    height: unset !important;
 }
 #loc-address-2{
    padding: 10px 12px !important;
 }
 .sf-toggle-pass{
    right: 16px !important;
 }
 .suite-state{
    border: 1px solid #6b7280 !important;
    padding: 10px 16px !important;
}

/* -------------------------------------------------------------
   Registration flow – functional helpers (script.js driven)
   Design is unchanged; these only make the existing markup
   behave for the ported functionality.
-------------------------------------------------------------- */

/* -------------------------------------------------------------
   Terms & Conditions modal — layout only.
   This Tailwind build ships a compiled stylesheet without the
   arbitrary utilities the modal markup relies on (max-h-[90vh],
   bg-primary-dark/60), so the container never got a height cap
   and the scroll region / footer fell outside the box. These
   rules re-create that layout. No markup / JS / behaviour change.
-------------------------------------------------------------- */

/* overlay: dim backdrop, above the sticky site header (z-502), safe scroll */
#terms-modal {
    background-color: rgba(20, 33, 48, 0.6);
    overflow-y: auto;
    z-index: 10000 !important;
}
#terms-modal:not(.hidden) {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* dialog: a fixed-height flex column that never leaves the viewport */
.term-popup {
    width: 100%;
    max-width: 32rem;              /* == max-w-lg fallback */
    max-height: 90vh !important;   /* replaces the missing max-h-[90vh] */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;   /* rounded corners clip the scroll area */
}

/* header stays put */
.term-popup > div:first-child {
    flex: 0 0 auto;
}

/* the terms text is the only part that scrolls */
#terms-modal .term-popup .overflow-y-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;      /* required for overflow inside a flex column */
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* footer (checkbox + buttons) stays pinned and fully visible */
.term-popup > div:last-child {
    flex: 0 0 auto;
}
.term-popup > div:last-child > label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.term-popup > div:last-child > label > input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;             /* the global reset hides it otherwise */
    accent-color: #287d82;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.term-popup > div:last-child > div {
    display: flex;
    gap: 12px;
}
.term-popup > div:last-child > div > button {
    flex: 1 1 0;
}

@media (max-width: 640px) {
    .term-popup {
        max-height: 92vh !important;
    }
    .term-popup > div:first-child,
    .term-popup > div:last-child,
    #terms-modal .term-popup .overflow-y-auto {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* Change Plan dropdown sits above the review card */
#change-plan-dropdown {
    z-index: 60;
}
#change-plan-dropdown.hidden {
    display: none !important;
}

/* Selected plan radio state (plan cards use hidden radios) */
.sf-plan-card .sf-plan-radio:checked + .sf-select-plan-btn,
.sf-plan-card .sf-plan-radio:checked ~ .sf-select-plan-btn {
    outline: 2px solid #287d82;
    outline-offset: 2px;
}

/* SweetAlert loading spinner fallback (used during payment) */
#loading-bar-spinner.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
#loading-bar-spinner.spinner .spinner-icon {
    width: 40px;
    height: 40px;
    border: 4px solid transparent;
    border-top-color: #287d82;
    border-left-color: #287d82;
    border-radius: 50%;
    animation: sf-spin 0.8s linear infinite;
}
@keyframes sf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* -------------------------------------------------------------
   Coupon / promo code box (now on the Review step)
   Self-contained layout - this Tailwind build has no responsive
   variants (sm:*) or several arbitrary utilities compiled.
-------------------------------------------------------------- */
#step-5 .coupon-box .sf-coupon-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
#step-5 .coupon-box .sf-coupon-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
#step-5 .coupon-box #coupon_code {
    width: 100%;
    padding-right: 34px;          /* room for the clear (x) button */
    text-transform: uppercase;
    box-sizing: border-box;
}
#step-5 .coupon-box #coupon_code::placeholder {
    text-transform: none;
}
#step-5 .coupon-box #cross_btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #6b7280;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
#step-5 .coupon-box #cross_btn.hidden { display: none; }
#step-5 .coupon-box #cross_btn:hover { color: #ef4444; }
#step-5 .coupon-box #cross_btn svg { width: 14px; height: 14px; }
#step-5 .coupon-box #coupon_code_submit {
    flex: 0 0 auto;
    white-space: nowrap;
}
#step-5 .coupon-box #coupon_code.border-red-500 {
    border-color: #ef4444 !important;
}
#step-5 #sf-coupon-msg.is-ok  { color: #287d82 !important; }
#step-5 #sf-coupon-msg.is-err { color: #ef4444 !important; }
#step-5 .coupon-box #coupon_code[readonly] {
    background-color: #f4f6f6;
    cursor: not-allowed;
}
@media (max-width: 480px) {
    #step-5 .coupon-box .sf-coupon-row { flex-direction: column; }
    #step-5 .coupon-box #coupon_code_submit { width: 100%; }
}

/* -------------------------------------------------------------
   Review step - "Your Plan" split card (info | features | action)
   Plain CSS: this build has no compiled sm:/lg: variants or
   arbitrary values.
-------------------------------------------------------------- */
#summary-plan-card.sf-review-plan {
    display: grid;
    grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.5fr) minmax(180px, 0.8fr);
    border: 1px solid #d9dddd;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    overflow: visible !important;
}

/* LEFT */
.sf-rp-left { position: relative; padding: 22px 20px; overflow: hidden; background: #f3f5f6; }
.sf-rp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; margin: 0 0 8px; }
.sf-rp-name  { font-size: 26px; font-weight: 800; color: #1e1e1e; line-height: 1.15; margin: 0; }
.sf-rp-price { font-size: 15px; font-weight: 600; color: #287d82; margin: 6px 0 0; }
.sf-rp-tagline { font-size: 13px; color: #6b7280; margin: 8px 0 0; max-width: 90%; line-height: normal; }
.sf-rp-emblem { position: absolute; right: 14px; bottom: 0px; width: 54px; height: 54px; opacity: .3; color: #9aa4ac; }
.sf-rp-emblem svg { width: 100%; height: 100%; }

/* MIDDLE */
.sf-rp-mid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    padding: 10px 5px; border-left: 1px solid #eef0f0; border-right: 1px solid #eef0f0;
}
.sf-rp-feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.sf-rp-feature-ic {
    width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: #eef6f6; color: #287d82; margin-bottom: 2px;
}
.sf-rp-feature-ic svg { width: 18px; height: 18px; }
.sf-rp-feature-t { font-size: 12px; font-weight: 700; color: #1e1e1e; line-height: 1.2; }
.sf-rp-feature-d { font-size: 11px; color: #6b7280; line-height: 1.25; }

/* RIGHT */
.sf-rp-right { padding: 20px 18px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.sf-rp-cta-wrap { position: relative; }
.sf-rp-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    background: #287d82; color: #fff; font-size: 13px; font-weight: 600;
    padding: 10px 14px; border: 0; border-radius: 12px; cursor: pointer; transition: background .15s ease;
}
.sf-rp-cta:hover { background: #1f6469; }
.sf-rp-cta svg { width: 15px; height: 15px; }
.sf-rp-note { font-size: 12px; color: #6b7280; text-align: center; margin: 0; line-height: normal; }
.sf-rp-badge {
    align-self: center; display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: #a9791f; background: #faf1d8; border-radius: 999px; padding: 4px 10px;
}
.sf-rp-badge[hidden] { display: none; }

/* per-plan theming */
#summary-plan-card[data-plan="standard"] .sf-rp-left { background: #e9f6f2; }
#summary-plan-card[data-plan="standard"] .sf-rp-emblem { color: #287d82; opacity: .4; }
#summary-plan-card[data-plan="fave"] .sf-rp-left { background: #287d82; }
#summary-plan-card[data-plan="fave"] .sf-rp-left .sf-rp-eyebrow,
#summary-plan-card[data-plan="fave"] .sf-rp-left .sf-rp-name,
#summary-plan-card[data-plan="fave"] .sf-rp-left .sf-rp-price,
#summary-plan-card[data-plan="fave"] .sf-rp-left .sf-rp-tagline { color: #fff; }
#summary-plan-card[data-plan="fave"] .sf-rp-left .sf-rp-price { opacity: .92; }
#summary-plan-card[data-plan="fave"] .sf-rp-emblem { color: #fff; opacity: .35; }


/* responsive */
@media (max-width: 860px) {
    #summary-plan-card.sf-review-plan { grid-template-columns: 1fr; }
    .sf-rp-mid { border-left: 0; border-right: 0; border-top: 1px solid #eef0f0; border-bottom: 1px solid #eef0f0; }
    #summary-plan-card #change-plan-dropdown {
        position: static; width: 100%; margin-top: 8px; box-shadow: none;
    }
}
@media (max-width: 520px) {
    .sf-rp-mid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sf-rp-name { font-size: 22px; }
}

/* ============================================================
   RESPONSIVE + FOCUS  —  CSS/UI only, no markup or JS changes.
   Fixes fixed-width containers that force horizontal scroll,
   makes every step usable on desktop / laptop / tablet / mobile
   / small mobile, and replaces the browser-default blue focus
   ring with the SuiteFinder green/teal (#287d82).
   ============================================================ */

/* ---- 0. Focus state: no browser-blue, use SuiteFinder teal ---- */
#sf-steps input:focus,
#sf-steps textarea:focus,
#sf-steps select:focus,
#step11 input:focus,
#step11 textarea:focus,
#step11 select:focus,
#terms-modal input:focus,
#terms-modal textarea:focus,
#terms-modal select:focus,
#sf-dashboard input:focus,
#sf-dashboard textarea:focus,
#sf-dashboard select:focus {
    outline: none !important;
    border-color: #287d82 !important;
    box-shadow: 0 0 0 2px rgba(40, 125, 130, 0.15) !important;
}
#sf-steps input:focus-visible,
#sf-steps textarea:focus-visible,
#sf-steps select:focus-visible,
#terms-modal input:focus-visible,
#terms-modal select:focus-visible,
#sf-dashboard input:focus-visible {
    outline: none !important;
}
#sf-steps input[type="checkbox"],
#sf-steps input[type="radio"],
#step11 input[type="checkbox"],
#step11 input[type="radio"],
#terms-modal input[type="checkbox"],
#sf-dashboard input[type="checkbox"] {
    accent-color: #287d82;
}
#sf-steps input[type="checkbox"]:focus,
#sf-steps input[type="radio"]:focus,
#step11 input[type="checkbox"]:focus,
#terms-modal input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(40, 125, 130, 0.22) !important;
}

/* ---- 1. Nothing wider than the viewport ---- */
#sf-steps,
#sf-topbar > div {
    max-width: 100%;
}

/* ---- 2. Progress stepper keeps its own scroll, no page scroll ---- */
#sf-progress {
    max-width: 100%;
    padding: 12px 0 !important;   /* was 20px on every side */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#sf-progress::-webkit-scrollbar { display: none; }

/* ---- 3. Choose Plan (step 4): fluid grid, single column below desktop ---- */
.plan-feature {
    width: 100% !important;
    max-width: 1200px !important;
    box-sizing: border-box;
}
@media (max-width: 1023px) {
    .plan-feature {
        grid-template-columns: 1fr !important;
        max-width: 460px !important;
        gap: 20px !important;
        margin-top: 32px !important;
    }
}
#step-4 #compare-table-wrap { max-width: 100%; }

/* ---- 4. Payment (step 6): fluid width + real 2-column on desktop ---- */
#step-6 > div {
    width: 100% !important;
    max-width: 800px !important;
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    #step-6 > div {
        max-width: 900px !important;
        grid-template-columns: 1.55fr 1fr !important;
    }
    #step-6 > div > aside {
        position: sticky;
        top: 144px;
    }
    /* billing City / State / ZIP in one row like the expiry row */
    #payment-form .grid.grid-cols-1 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 400px) {
    #payment-form .grid.grid-cols-3 { gap: 8px !important; }
    #expiryMonth, #expiryYear { padding: 12px 6px !important; }
}

/* ---- 5. "My location is not here" / edit accordion: fluid ---- */
#accordion-loc-edit {
    width: 100% !important;
    max-width: 850px !important;
    box-sizing: border-box;
}

/* ---- 6. OTP inputs: fit all six on small phones ---- */
@media (max-width: 400px) {
    #register-otp-container { gap: 6px !important; }
    #register-otp-container .sf-otp-box { width: 42px !important; height: 48px !important; }
}
@media (max-width: 344px) {
    #register-otp-container .sf-otp-box { width: 36px !important; height: 44px !important; font-size: 16px !important; }
}

/* ---- 7. Card inner padding: tighter on small phones ---- */
@media (max-width: 480px) {
    #sf-steps .shadow-soft { padding: 22px 18px !important; }
}

/* ---- 8. Step action rows: allow buttons to wrap instead of overflow ---- */
@media (max-width: 480px) {
    #step-3 .flex.items-center.justify-between,
    #step-6 .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 10px;
    }
    #location-continue-btn { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---- 9. Payment card-brand logos (same behaviour as register_location_template.php) ---- */
#step-6 .cc_cards_img {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#step-6 .cc_cards_img img {
    width: 42px;
    height: 28px;
    object-fit: contain;
}

/* ============================================================
   RESPONSIVE — 3 sections: "My location is not here" (#step11),
   "Choose your plan" (#step-4), Payment (#step-6).
   CSS/UI only. The desktop layout is untouched; every rule below
   is inside a max-width media query so it only affects tablet /
   mobile widths. Existing classes / IDs only.
   ============================================================ */

/* ---- 10. "My location is not here": social-links pair ----
   The legacy stylesheet stacks the outer form rows at <=767px but
   leaves the instagram / facebook pair as a 1fr/1fr grid whose
   min-content is wider than a narrow phone, so it overflowed and
   the inputs collapsed to ~40px. Drop the inner grid, stack the
   two fields and let each input fill (and wrap under its label if
   there isn't room). */
@media (max-width: 767px) {
    #step11 #thir .edit_loc__form_group {
        display: block !important;
    }
    #step11 #thir .edit_loc__form_group__child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        min-width: 0;
        margin-bottom: 12px;
    }
    #step11 #thir .edit_loc__form_group__child > label {
        flex: 0 0 auto;
    }
    #step11 #thir .edit_loc__form_group__child > input {
        flex: 1 1 120px;
        width: auto;
        min-width: 0;
    }
}

/* ---- 11. "Choose your plan": Monthly / Annually toggle ----
   When "Annually (Save 17%)" wraps to two lines the two halves end
   up different heights and the taller pill spills past the switcher
   box. Make both halves fill the row height so they stay aligned. */
@media (max-width: 767px) {
    #step-4 #planSwitcher > div,
    #step-4 #planSwitcherSff > div {
        align-items: stretch;
    }
    #step-4 #planSwitcher > div > label,
    #step-4 #planSwitcherSff > div > label {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
        height: 100%;
    }
}

/* ============================================================
   MOBILE (<= 767px) — BOTH logged-in and logged-out flows.
   Progress stepper: the step name sits centred BELOW each circle,
   every step fits the viewport with no horizontal scroll, thin
   connector lines run between the circles. Each flow shows its own
   existing labels (logged-out: Account / Verify Email / Location /
   Plan / Review / Payment ; logged-in: Location / Plan / Review /
   Payment - the first two <li> are .hidden for logged-in). "Choose
   your plan" gets a tighter rhythm above the cards. Every rule is
   inside the max-width query, so desktop and tablet are untouched.
   Layout only: no colour / JS / markup / plan-selection changes.
   ============================================================ */
@media (max-width: 767px) {

    /* ---- 12. Progress stepper: circle on top, name centred below ---- */
    #sf-progress {
        align-items: flex-start;
        overflow-x: visible;               /* was `auto` - fit, don't scroll */
        padding: 12px 2px 4px !important;  /* was `12px 0` */
    }
    #sf-progress .sf-progress-step {
        flex: 1 1 0 !important;
        min-width: 0 !important;            /* override Tailwind min-w-fit so every step compresses to fit */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        position: relative;
        text-align: center;
    }
    /* connector from this circle to the next (same gold as .line-bar) */
    #sf-progress .sf-progress-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 13px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
        height: 2px;
        background: #d0b762;
    }
    #sf-progress .sf-progress-step .line-bar {
        display: none !important;
    }
    #sf-progress .sf-progress-label {
        display: block !important;         /* was hidden on mobile (`hidden md:inline`) */
        white-space: normal;               /* let long names wrap */
        font-size: 9.5px;
        line-height: 1.15;
        min-height: 2.2em;                 /* reserve 2 lines so 1- and 2-line names line up */
        max-width: 100%;
    }

    /* ---- 13. "Choose your plan": tighter spacing above the cards ---- */
    #step-4 .text-center.mb-9 {
        margin-bottom: 12px !important;
    }
    #step-4 .plan-feature {
        margin-top: 8px !important;
        padding-top: 0 !important;
        gap: 16px !important;
    }
}

/* ============================================================
   MOBILE (<= 767px) — "Choose your plan" as a Premium / Upgrade /
   Basic tab bar showing ONE card at a time. Applies to BOTH the
   logged-in and logged-out flows (same markup, same plan cards,
   same plan-selection JS). #sf-plan-tabs is display:none everywhere
   by default, so desktop and tablet keep the existing 3-card
   layout with no change. The tab buttons drive the EXISTING plan-
   selection JS (refreshSelectedPlanFromCard) - no new logic.
   ============================================================ */
#sf-plan-tabs { display: none; }

@media (max-width: 767px) {

    /* ---- 14. plan tab bar (logged-in AND logged-out) ---- */
    #sf-plan-tabs {
        display: flex;
        gap: 8px;
        max-width: 460px;
        margin: 2px auto 18px;
    }
    #sf-plan-tabs .sf-plan-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 6px;
        border: 1px solid #d0b762;
        border-radius: 10px;
        background: #fff;
        color: #1e1e1e;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    /* active tab: SuiteFinder green/teal (tailwind.config.js `suitegreen` = #287D82) */
    #sf-plan-tabs .sf-plan-tab.is-active {
        background: #287d82;
        border-color: #287d82;
        color: #fff;
    }

    /* ---- 15. show only the tab-selected plan card (logged-in AND logged-out) ---- */
    #step-4 .plan-feature > *:not(.sf-plan-col-active) {
        display: none !important;
    }
    #step-4 .plan-feature { margin-top: 0 !important; }
}