/* ==========================================================================
   Homistyle — Login / Sign up / Verify OTP popup
   Everything scoped under .hs-auth so nothing else on the site is touched.
   ========================================================================== */
.hs-auth{
    --a-brand:#85532f;
    --a-brand-dark:#6c4125;
    --a-ink:#1f1c1a;
    --a-text:#34302d;
    --a-muted:#6f7b89;       /* the blue-grey used for secondary text in the design */
    --a-line:#e2ddd8;
    --a-line-2:#d7dbe0;
    position:fixed; inset:0; z-index:10000;
    display:flex; align-items:center; justify-content:center;
    padding:12px;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.hs-auth[hidden]{ display:none !important; }
.hs-auth *, .hs-auth *::before, .hs-auth *::after{ box-sizing:border-box; }

.hs-auth__backdrop{ position:absolute; inset:0; background:rgba(20,14,10,.62); }

.hs-auth__box{
    position:relative; width:100%; max-width:462px;
    max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain;
    background:#fff; border-radius:2px;
    padding:30px 38px 34px;
    color:var(--a-text);
    box-shadow:0 24px 60px rgba(0,0,0,.28);
    animation:hsAuthIn .18s ease-out;
}
@keyframes hsAuthIn{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hs-auth__box{ animation:none; } }

.hs-auth__close{
    position:absolute; top:9px; right:10px; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--a-ink); cursor:pointer; border-radius:50%;
}
.hs-auth__close:hover{ background:#f4f1ee; }

.hs-auth button{ font-family:inherit; }
.hs-auth a{ text-decoration:none; }
.hs-auth :focus-visible{ outline:2px solid var(--a-brand); outline-offset:2px; }
/* Text fields show focus with a brown border instead of an extra ring (matches the design). */
.hs-auth input:focus-visible, .hs-auth select:focus-visible{ outline:none; }
.hs-auth input[type=checkbox]:focus-visible{ outline:2px solid var(--a-brand); outline-offset:2px; }

/* ---------- Tabs (Password | Phone Number) ---------- */
.hs-auth__tabs{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    margin:2px 12px 38px;
}
.hs-auth__tab{
    background:none; border:none; padding:4px 6px; cursor:pointer;
    font-size:17px; font-weight:500; color:var(--a-muted); line-height:1.3;
}
.hs-auth__tab.is-active{ color:var(--a-ink); }
.hs-auth__tab-sep{ width:1px; height:18px; background:var(--a-line-2); }

.hs-auth__title{
    font-size:17px; font-weight:600; color:var(--a-ink);
    text-align:center; margin:2px 0 32px; line-height:1.3;
}
.hs-auth__title--left{ text-align:left; margin:2px 0 14px; }

/* ---------- Inputs ---------- */
.hs-auth__field{ position:relative; margin-bottom:19px; }
.hs-auth__field--pw{ margin-bottom:0; }

.hs-auth__input{
    display:block; width:100%; height:50px;
    border:1px solid var(--a-line); border-radius:2px; background:#fff;
    padding:0 15px; font-size:14px; font-weight:500; color:var(--a-ink);
    font-family:inherit; outline:none; box-shadow:none; margin:0;
    transition:border-color .15s;
}
.hs-auth__input::placeholder{ color:#3a3632; font-weight:600; font-size:13.5px; opacity:1; }
.hs-auth__input:focus{ border-color:var(--a-brand); }
.hs-auth__input.is-invalid{ border-color:#c0392b; }
.hs-auth__field--pw .hs-auth__input{ padding-right:52px; }

.hs-auth__eye{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--a-muted); cursor:pointer;
}
.hs-auth__eye.is-on{ color:var(--a-brand); }

.hs-auth__forgot{ text-align:right; margin-top:9px; }
.hs-auth__forgot a{ font-size:14px; color:var(--a-muted); }
.hs-auth__forgot a:hover{ color:var(--a-brand); }

/* Phone row: [UK +44][ phone number ] */
.hs-auth__phone-row{ display:grid; grid-template-columns:85px minmax(0,1fr); gap:6px; }
.hs-auth__cc{ position:relative; }
.hs-auth__cc select{
    width:100%; height:50px; border:1px solid var(--a-line); border-radius:2px; background:#fff;
    padding:0 6px 0 14px; font-family:inherit; font-size:14px; font-weight:600; color:var(--a-ink);
    appearance:none; -webkit-appearance:none; cursor:pointer; outline:none; margin:0;
}
.hs-auth__cc select:focus{ border-color:var(--a-brand); }

.hs-auth__pane--phone{ padding-top:38px; }

/* ---------- Buttons ---------- */
.hs-auth__btn{
    position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; height:42px; margin-top:31px;
    border:none; border-radius:999px; background:var(--a-brand); color:#fff; cursor:pointer;
    font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.2px;
    transition:background .15s;
}
.hs-auth__btn:hover{ background:var(--a-brand-dark); }
.hs-auth__btn[disabled]{ opacity:.7; cursor:wait; }
.hs-auth__btn--login{ margin-top:30px; }

.hs-auth__wa-ico{
    position:absolute; left:9px; top:50%; transform:translateY(-50%);
    width:25px; height:25px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:16px;
}

.hs-auth__btn.is-loading span:not(.hs-auth__wa-ico), .hs-auth__btn-sq.is-loading{ opacity:.55; }

/* ---------- Links / footer text ---------- */
.hs-auth__switch{ text-align:center; font-size:14.5px; color:var(--a-muted); margin:19px 0 0; }
.hs-auth__switch button{
    background:none; border:none; padding:0; cursor:pointer;
    font-size:14.5px; font-weight:600; color:var(--a-brand);
}
.hs-auth__switch button:hover{ text-decoration:underline; }

.hs-auth__or{ text-align:center; font-size:14.5px; color:var(--a-muted); margin:44px 0 0; }
.hs-auth [data-view="login"] .hs-auth__or{ margin-top:52px; }

.hs-auth__social{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px 32px; margin-top:21px; }
.hs-auth__soc{ display:inline-flex; align-items:center; gap:9px; font-size:15.5px; color:var(--a-muted); }
.hs-auth__soc:hover span{ color:var(--a-ink); }
.hs-auth__fb{ font-size:22px; color:#1877F2; }
.hs-auth__apple{ font-size:23px; color:#000; }

/* ---------- Sign up: terms ---------- */
.hs-auth__terms{
    display:flex; align-items:flex-start; gap:8px; margin-top:12px; cursor:pointer;
    font-size:14px; line-height:1.5; color:var(--a-muted);
}
.hs-auth__terms input{
    flex:0 0 auto; width:15px; height:15px; margin:3px 0 0; accent-color:var(--a-brand); cursor:pointer;
}
.hs-auth__terms a{ color:var(--a-brand); }
.hs-auth__terms a:hover{ text-decoration:underline; }
.hs-auth [data-form="otp-signup"] .hs-auth__btn{ margin-top:20px; }

/* ---------- Verify ---------- */
.hs-auth__lead{ font-size:13.5px; color:var(--a-text); margin:0 0 6px; line-height:1.5; }
.hs-auth__phone{ color:var(--a-brand); font-weight:500; margin-right:14px; }
.hs-auth__change{
    background:none; border:none; padding:0; cursor:pointer;
    font-size:13.5px; font-weight:700; color:var(--a-brand);
}
.hs-auth__change:hover{ text-decoration:underline; }

.hs-auth__otp{ display:flex; gap:7px; margin-top:38px; }
.hs-auth__otp-box{
    width:44px; height:48px; flex:0 0 auto;
    border:1px solid var(--a-line-2); border-radius:3px; background:#fff;
    text-align:center; font-size:20px; font-weight:600; color:var(--a-ink);
    font-family:inherit; outline:none; padding:0; margin:0;
    transition:border-color .15s;
}
.hs-auth__otp-box:focus{ border-color:var(--a-brand); }
.hs-auth__otp.is-invalid .hs-auth__otp-box{ border-color:#c0392b; }

.hs-auth__resend{ font-size:14.5px; color:var(--a-muted); margin:24px 0 0; }
.hs-auth__resend b{ color:var(--a-brand); font-weight:700; }
.hs-auth__resend button{
    background:none; border:none; padding:0; cursor:pointer;
    font-size:14.5px; font-weight:700; color:var(--a-brand);
}
.hs-auth__resend button:hover{ text-decoration:underline; }

.hs-auth__testcode{
    margin:14px 0 0; padding:8px 12px; border:1px dashed #d8b98a; background:#fbf6ee;
    font-size:13px; color:#6c4125; border-radius:3px;
}

.hs-auth__actions{ display:flex; justify-content:flex-end; gap:12px; margin:92px -18px 0 0; }
.hs-auth__btn-sq{
    min-width:96px; height:40px; padding:0 18px; border-radius:6px; cursor:pointer;
    border:1px solid var(--a-brand); background:var(--a-brand); color:#fff;
    font-size:15px; font-weight:600; text-transform:uppercase;
}
.hs-auth__btn-sq:hover{ background:var(--a-brand-dark); border-color:var(--a-brand-dark); }
.hs-auth__btn-sq--ghost{ background:#fff; color:var(--a-brand); border-color:#8b6a52; }
.hs-auth__btn-sq--ghost:hover{ background:#f7f2ed; color:var(--a-brand); border-color:var(--a-brand); }
.hs-auth__btn-sq[disabled]{ opacity:.7; cursor:wait; }

/* ---------- Errors ---------- */
.hs-auth__error{
    margin:14px 0 0; font-size:13px; line-height:1.45; color:#b3261e;
    background:#fdf1f0; border-left:3px solid #c0392b; padding:8px 10px;
}
.hs-auth__error[hidden]{ display:none; }

/* Page scroll lock while the popup is open */
html.hs-auth-lock, html.hs-auth-lock body{ overflow:hidden !important; }

/* ---------- Mobile ---------- */
@media (max-width:520px){
    .hs-auth{ padding:10px; align-items:center; }
    .hs-auth__box{ padding:26px 18px 24px; max-height:calc(100dvh - 20px); }
    .hs-auth__close{ top:6px; right:6px; }

    .hs-auth__tabs{ margin:6px 22px 28px 0; }
    .hs-auth__tab{ font-size:15.5px; }
    .hs-auth__title{ margin-bottom:24px; font-size:16.5px; }

    .hs-auth__input, .hs-auth__cc select{ height:48px; font-size:16px; } /* 16px stops iOS zoom-on-focus */
    .hs-auth__input{ padding:0 12px; }
    .hs-auth__input::placeholder{ font-size:12.5px; }
    .hs-auth__phone-row{ grid-template-columns:76px minmax(0,1fr); gap:5px; }
    .hs-auth__cc select{ font-size:14px; padding-left:10px; }
    .hs-auth__pane--phone{ padding-top:20px; }

    .hs-auth__btn{ height:46px; font-size:14.5px; margin-top:24px; }
    .hs-auth__switch, .hs-auth__switch button{ font-size:14px; }
    .hs-auth__or, .hs-auth [data-view="login"] .hs-auth__or{ margin-top:32px; font-size:14px; }
    .hs-auth__social{ gap:12px 22px; margin-top:16px; }
    .hs-auth__soc{ font-size:14.5px; }

    .hs-auth__title--left{ padding-right:30px; }
    .hs-auth__otp{ gap:6px; margin-top:28px; }
    .hs-auth__otp-box{ flex:1 1 0; width:auto; min-width:0; max-width:52px; height:50px; font-size:20px; }
    .hs-auth__actions{ margin:44px 0 0; }
    .hs-auth__btn-sq{ flex:1; height:46px; }
}
@media (max-width:360px){
    .hs-auth__social{ gap:10px 16px; }
    .hs-auth__terms{ font-size:13px; }
}