/* Register, and sign in with a code.
   Two more boxes under WooCommerce's Login, deliberately the same kind of thing
   - so almost everything here is spacing, and the fields themselves are left to
   the theme by reusing WooCommerce's own row and input classes. */

.fq-sms-card {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    padding: 24px 24px 8px;
    margin: 32px 0 0;
}

.fq-sms-card h2 {
    margin: 0 0 6px;
}

.fq-sms-intro {
    margin: 0 0 18px;
    font-size: .94em;
    line-height: 1.55;
    opacity: .8;
}

/* Takes no room while it has nothing to say. */
.fq-sms-msg:empty {
    display: none;
}

.fq-sms-msg {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 4px;
    background: #eef4ff;
    color: #00205b;
    font-size: .94em;
    line-height: 1.45;
}

/* Tighter rows (owner, 2026-09-20). The theme spaces its form rows for a full
   page; in a dialog that turned six short fields into a lot of scrolling. */
.fq-sms .form-row {
    margin-bottom: 12px;
}

.fq-sms .form-row:last-child {
    margin-bottom: 0;
}

.fq-sms-msg.is-error {
    background: #fdecec;
    color: #8c1c1c;
}

/* Labels sit ABOVE their field, every row the same.
   The theme leaves them inline, which happened to look right only because the
   other labels were long enough to push a full-width input onto the next line.
   Shortening one to "OTP" put the label and its box side by side while the
   rows above and below stayed stacked. */
.fq-sms .form-row label {
    display: block;
    margin-bottom: 2px;
    /* Bold, matching the OTP label above it. Mobile number was the odd one out
       (owner, 2026-09-21) and Email address was too - all three are field names
       and should read as field names. */
    font-weight: 600;
}

/* Fields fill the row. The theme sizes its inputs for a 350px panel, so in the
   wider dialog they sat in the left half with dead space beside them. The OTP
   box is the exception below - six digits do not need a full line. */
.fq-sms .form-row input[type="tel"],
.fq-sms .form-row input[type="text"],
.fq-sms .form-row input[type="email"],
.fq-sms .form-row input[type="password"] {
    width: 100%;
}

/* "(optional)" is guidance, not a label, and should not shout as loudly as
   the thing it belongs to. */
.fq-sms .fq-opt {
    font-weight: 400;
    opacity: .65;
    font-size: .9em;
}

.fq-sms-hint {
    display: block;
    margin-top: 6px;
    font-size: .86em;
    opacity: .7;
    line-height: 1.5;
}

/* Six boxes, one digit each. An OTP is read off a phone screen a digit at a
   time and this is the shape people now expect to type it into. */
.fq-otp-label {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.fq-otp {
    display: flex;
    gap: 8px;
}

.fq-sms .fq-otp-box {
    flex: 1 1 0;
    min-width: 0;           /* or six boxes will not fit a narrow phone */
    /* NO max-width. Capping each box left a ragged 44px of empty row to the
       right of the sixth one, which is what made the dialog look too wide.
       Letting them share the row means the group always ends exactly where
       every other field does, whatever size the theme's base font is. */
    padding: 10px 0;
    text-align: center;
    font-size: 1.25em;
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 4px;
    background: #fff;
}

.fq-sms .fq-otp-box:focus {
    outline: 2px solid #fa9f0f;
    outline-offset: 1px;
    border-color: #fa9f0f;
}

/* The digits are the field; the hidden input behind them carries the value. */
.fq-sms input.fq-sms-code {
    display: none;
}

/* ── the country picker ───────────────────────────────────────────────────
   Closed, it is deliberately NARROW - flag and dial code only - because it
   shares a row with the number and the Send button. The country's NAME lives
   in the open list, where there is room for it; showing it closed would eat
   the row and leave the number a slot too small to read.

   The <select> underneath is what the form actually reads. It is hidden only
   once the script has put a listbox over it - before that, and for ever if the
   script never runs, it is an ordinary visible dropdown. */
.fq-sms-cc-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
}

.fq-sms-cc-wrap .fq-sms-cc {
    margin: 0;
    max-width: 11rem;
}

.fq-sms-cc-wrap[data-picker="on"] .fq-sms-cc {
    /* Not display:none - a hidden-but-present control keeps working for
       autofill and for anything reading the form, and it is still the value. */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ONE COUNTRY: a label, not a control.
   Deliberately flat - no border, no background, no cursor - so it does not
   read as something to press. It sits on the number's baseline and gives the
   row the same flag and dial code the picker used to, minus the invitation. */
.fq-sms-cc-fixed {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 0 0;
    line-height: 1;
    white-space: nowrap;
}

.fq-sms-cc-fixed .fq-cc-dial {
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.fq-cc-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid rgba(0, 32, 91, .22);
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 1;
    white-space: nowrap;
}

/* HOVER, FOCUS AND OPEN ALL HELD AT WHITE. The theme paints every bare
   <button> amber on hover, which is right for "Send OTP" and wrong here: this
   is a dropdown sitting next to a text box, and going solid amber made it read
   as the primary action of the row. Only the border is allowed to respond. */
.fq-cc-btn:hover,
.fq-cc-btn:focus,
.fq-cc-btn:active,
.fq-cc-btn[aria-expanded="true"] {
    background: #fff;
    color: inherit;
    border-color: rgba(0, 32, 91, .45);
}

.fq-cc-btn:focus-visible {
    outline: 2px solid #fa9f0f;
    outline-offset: 1px;
}

/* Fixed box so the row does not jump as flags of different aspect load, and a
   hairline because pale flags - Japan, Poland - vanish against a white form. */
.fq-cc-flag {
    flex: 0 0 auto;
    width: 26px;
    height: 19px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 32, 91, .18);
}

.fq-cc-dial {
    font-variant-numeric: tabular-nums;
}

.fq-cc-caret {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(0, 32, 91, .55);
}

/* The open list. Absolutely positioned so opening it does not shove the OTP
   boxes down the page, and z-index above the drawer it sits inside. */
.fq-cc-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: 20rem;
    max-width: 78vw;
    background: #fff;
    border: 1px solid rgba(0, 32, 91, .18);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 32, 91, .18);
    overflow: hidden;
}

.fq-cc-search {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(0, 32, 91, .12);
    border-radius: 0;
    font: inherit;
}

.fq-cc-search:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 #fa9f0f;
}

/* Tall enough to show most of a fifteen-country list at once, but capped
   against the viewport so it cannot run off the bottom of a phone - which is
   exactly where it would land, since the on-screen keyboard has already taken
   half the screen by the time this opens. */
.fq-cc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: min(21rem, 45vh);
    overflow-y: auto;
}

.fq-cc-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 7px 10px;
    cursor: pointer;
    line-height: 1.25;
}

/* One rule for both, so the keyboard and the mouse highlight the same way and
   there is never a second, competing highlight on screen. */
.fq-cc-row.is-active,
.fq-cc-row:hover {
    background: #fff6e4;
}

.fq-cc-row[aria-selected="true"] {
    font-weight: 600;
}

.fq-cc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fq-cc-rowdial {
    flex: 0 0 auto;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

/* The number and its Send button, side by side and the SAME HEIGHT.
   align-items: stretch is what does it - the button takes the row's height
   rather than its own padding, so the two line up however the theme chooses to
   size its inputs. The label is outside this row (see the markup) or the row
   would be label-height and the button would overshoot. */
.fq-sms-askrow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    /* Three controls now share this row. On a narrow phone they will not all
       fit, and squeezing them leaves a number box too small to read what is
       being typed into it - so the row is allowed to break instead. */
    flex-wrap: wrap;
}

/* 7rem is the basis, not the width: wide enough that the number stays legible,
   small enough that the row only breaks when it genuinely has to. */
.fq-sms-askrow .fq-sms-phone {
    flex: 1 1 7rem;
    min-width: 0;      /* a flex item will not shrink below its content without this */
    margin: 0;
}

.fq-sms-askrow .fq-sms-send {
    flex: 0 0 auto;
    white-space: nowrap;
    /* No vertical padding: the height comes from the row, and padding on top
       of that is what made the button taller than the box. */
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

/* Asking for an OTP is a step on the way, not the thing the form is for; the
   submit button further down stays the loud one. */
.fq-sms .fq-sms-send {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

/* Nothing below the number means anything until an OTP has been sent, and
   nothing below the OTP until the OTP has been confirmed. */
.fq-sms-after[hidden],
.fq-sms-verified[hidden] {
    display: none !important;
}

/* Confirmed and locked: settled, not broken. Greyed rather than disabled-
   looking, because the number and the code are still worth reading back. */
.fq-sms.is-confirmed .fq-sms-phone,
.fq-sms.is-confirmed .fq-otp-box {
    background: #f4f6f9;
    color: #55606e;
    border-color: rgba(0, 0, 0, .10);
    cursor: default;
}

.fq-sms.is-confirmed .fq-otp-box:focus {
    outline: none;
    border-color: rgba(0, 0, 0, .10);
}

.fq-sms-after {
    margin-top: 12px;
}

/* Air under the OTP boxes. Before the code is confirmed they are the last
   thing in the dialog and sat hard against its bottom edge; after it, this is
   the gap before "Your Name". */
.fq-sms .fq-otp-row {
    margin-bottom: 24px;
}

/* More still between the confirmed OTP and what is asked next.
   These two are adjacent siblings in normal flow, so their margins COLLAPSE -
   the gap is the larger of the two, not the sum. Raising this is what widens
   it; raising both would have looked like it did nothing. */
.fq-sms-verified {
    margin-top: 36px;
}

/* The thing the form is FOR, across the full width (owner, 2026-09-20). The
   Send OTP button beside the number stays small - that one is a step on the
   way, not the finish. */
.fq-sms .fq-sms-verify {
    width: 100%;
    display: block;
}

.fq-sms button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.fq-sms-off {
    margin: 24px 0 0;
    opacity: .75;
}

@media (max-width: 600px) {
    .fq-sms-card {
        padding: 18px 16px 4px;
    }
}

/* ── the popup ─────────────────────────────────────────────────────────────
   Login and Register behind two tabs, opened from the header. */

.fq-modal[hidden] {
    display: none !important;
}

.fq-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;          /* over the sticky header, which sits at 11 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 24px;
    overflow-y: auto;
}

/* A dark GREY tint, not black (owner, 2026-09-20). Black behind a white card
   is a hole in the page; grey at 55% still says "this is the only thing you
   can use" while the shop stays visible behind it.
   Both backdrops carry it: ours, and - the one actually on screen - the
   theme's, which defaults to near-solid black. */
.fq-modal-tint,
#login-drawer .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(58, 60, 68, .55) !important;
    opacity: 1 !important;
}

/* AND the panel over it. Recolouring the overlay alone changed nothing you
   could see: this theme's full-width drawer is a second full-screen layer on
   top of the overlay, painted rgba(9,12,16,.97) - all but solid black - so the
   tint underneath was never visible. Clear it and the tint does its job. */
#login-drawer .drawer-inner {
    background: transparent !important;
}

body.fq-modal-open {
    overflow: hidden;
}

.fq-modal-box {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);
    width: 100%;
    max-width: 460px;   /* matches the drawer above */
    padding: 28px 28px 20px;
}

.fq-modal-x {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: 0;
    font-size: 30px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    color: inherit;
    opacity: .5;
}

.fq-modal-x:hover {
    opacity: 1;
}

.fq-modal-title {
    margin: 0 0 18px;
    font-size: 1.4em;
}

.fq-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    margin: 0 0 22px;
}

.fq-tab {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    margin-bottom: -1px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: .6;
}

.fq-tab.is-on {
    border-bottom-color: #fa9f0f;
    opacity: 1;
}

/* New Account is hidden until a number turns out to have no account. The
   theme gives buttons a display, which beats the hidden attribute's default. */
.fq-tab[hidden] {
    display: none !important;
}

.fq-pane {
    display: none;
}

.fq-pane.is-on {
    display: block;
}

/* Inside the popup the card chrome would be a box within a box. */
.fq-modal .fq-sms-card,
.fq-in-drawer .fq-sms-card {
    border: 0;
    padding: 0;
    margin: 0;
}

/* ── inside the theme's own login drawer ───────────────────────────────────
   The theme opens this; we only fill it. Its drawer is full-width, so the
   content is held to a readable column and centred rather than stretched
   across the screen. */
/* Wider (owner, 2026-09-20). The theme holds its drawer panel to 350px with
   #login-drawer .drawer-content_inner.widget_login_form_inner - an id and two
   classes, exactly the specificity of the obvious override, so the two tie and
   the theme wins on being later in the cascade. Nothing about our load order
   can change that, so this one is marked important: it is a deliberate override
   of a theme rule, like the two backdrop rules above. */
#login-drawer .drawer-content_inner.fq-in-drawer {
    /* 460px: the width at which six OTP boxes and their gaps exactly fill the
       row, so the dialog ends where the last box does (owner, 2026-09-20).
       Was 504, and before that 560. */
    max-width: 460px !important;
    margin: 0 auto;
}

/* Tighter top and bottom (owner, 2026-09-20). The theme's drawer panel pads
   30px all round and this added more on top of it, so a short form sat in the
   middle of a lot of white. The sides keep the theme's padding; only the
   vertical is pulled in. */
.fq-in-drawer {
    padding: 0 0 4px;
}

/* Tighter above the tabs (owner, 2026-09-21). Marked important for the same
   reason as the width above: the theme's own .drawer-content_inner rule pads
   30px at identical specificity and simply comes later, so a plain override
   changes nothing. */
#login-drawer .drawer-content_inner.fq-in-drawer {
    padding-top: 10px !important;
    /* Balanced against the TOP of the white box, which is not the top of this
       panel: the theme's drawer-header - the close button - sits above it and
       is 53px tall, so the space above "NEW ACCOUNT" is 53 + 10. The last row
       contributes 24px of collapsed margin, so 40 here brings the bottom to
       about the same 63. */
    padding-bottom: 40px !important;
}

#login-drawer .drawer-header {
    padding-bottom: 0;
}

.fq-in-drawer .fq-tabs {
    margin-bottom: 16px;
}

.fq-modal-swap {
    margin: 14px 0 0;
    font-size: .88em;
    line-height: 1.6;
    opacity: .85;
    text-align: center;   /* owner, 2026-09-20 */
}

@media (max-width: 480px) {
    .fq-modal {
        padding: 0;
    }
    .fq-modal-box {
        border-radius: 0;
        min-height: 100%;
        max-width: none;
        padding: 24px 18px 20px;
    }
}

/* ── the password form, kept but put away ─────────────────────────────────
   On the order-received page and checkout's "returning customer" box, the
   mobile sign-in comes first because that is how nearly every customer gets
   in. The password form is still there - the PIN issued at signup is a real
   password, and someone whose phone cannot receive a text has to have a way
   in - but it is folded away so it does not read as the main event.

   A <details>, not a scripted toggle: it works with JavaScript off, it is
   keyboard-operable for free, and a browser's find-in-page can open it. */
.fq-login-pw {
    margin-top: 18px;
    border-top: 1px solid rgba(0, 32, 91, .12);
    padding-top: 14px;
}

.fq-login-pw > summary {
    cursor: pointer;
    font-size: .92em;
    opacity: .75;
    /* The default triangle sits oddly against the forms above, and the row
       reads better as a quiet link. */
    list-style: none;
}

.fq-login-pw > summary::-webkit-details-marker {
    display: none;
}

.fq-login-pw > summary::before {
    content: '+ ';
    font-weight: 700;
}

.fq-login-pw[open] > summary::before {
    content: '- ';
}

.fq-login-pw > summary:hover,
.fq-login-pw > summary:focus-visible {
    opacity: 1;
}

.fq-login-pw form {
    margin-top: 14px;
}