/* The SmartWinners sign-in card.

   Loaded only by the SmartWinners international chrome, after the shared styles, and
   every rule is scoped under #login-card, so nothing here can reach another brand or another page.
   site.css styles the shared phone picker (.iti--allow-dropdown) as a box of its own, with a
   border, a fill and a focus ring. On this face the box belongs to #unified-input-box, which also
   holds the email field, so the picker's own box is switched off here and nothing else about it
   is changed. The rest of the card is Tailwind classes in the sign-in views. */

#login-card #unified-input-box .iti--allow-dropdown,
#login-card #unified-input-box .iti--allow-dropdown:focus-within {
    height: 100%;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The phone field's frame. The picker, its search box, its list and its logic are the shared
   component's and are not touched: only what it looks like inside the box changes.

   The box is its own stacking context, so the open list sits above the Continue button, whose
   label is z-10. The card is overflow: visible (site.css), so the list is not clipped by it. */
#login-card #unified-input-box {
    z-index: 20;
}

/* site.css forces the picker to display: flex !important, so the .hidden the Email tab puts on it
   would lose. This is the same rule with the same weight, and it wins on specificity. */
#login-card #unified-input-box .iti--allow-dropdown.hidden {
    display: none !important;
}

/* The slot: flag, dial code, chevron on one 8 px rhythm, a hairline after it. site.css gives the
   container its padding, gap and border; the picker's own inner paddings and margins are
   removed so that the slot is 16 + flag + 8 + code + 8 + chevron + 12 wide, as in the prototype. */
#login-card #unified-input-box .iti__country-container {
    border-right-color: rgb(225 232 240 / 0.6);
}
#login-card #unified-input-box .iti__selected-country-primary {
    padding: 0;
    gap: 0.5rem;
}
#login-card #unified-input-box .iti__selected-dial-code,
#login-card #unified-input-box .iti__arrow {
    margin: 0;
}
/* The flag is an image of the real flag (the picker's sprite), not an emoji, and is drawn at the
   prototype's 24 px. zoom scales the sprite and its offsets together, and the layout with them. */
#login-card #unified-input-box .iti__selected-country .iti__flag {
    zoom: 1.5;
}

/* Under 768 px the slot is tighter (pl-3 pr-2.5 gap-1.5 against pl-4
   pr-3 gap-2). From 768 px up nothing here applies. The email field's envelope slot has no rule: the view
   hides it under 768 px by class (hidden md:flex). */
@media (max-width: 767px) {
    #login-card #unified-input-box .iti__country-container {
        padding-left: 0.75rem;
        padding-right: 0.625rem;
    }
    #login-card #unified-input-box .iti__selected-country-primary {
        gap: 0.375rem;
    }
}

/* The flag. It could be hidden under 768 px, but it is kept wherever
   the number fits. Measured on 2026-10-09: with the flag drawn, the widest dial code the picker offers
   (3 digits, 109.9 px slot) leaves a 12-digit number room from a 382 px viewport up, so the flag is hidden
   only below that. The field is the card less its gutters, so the threshold moves with nothing but the
   card's width. A phone number the field cannot hold scrolls inside it. */
@media (max-width: 381px) {
    #login-card #unified-input-box .iti__selected-country .iti__flag {
        display: none;
    }
}

/* The field fills what the slot leaves. It was a fixed 255 px, which made the page 423 px wide
   in a 375 px window. */
#login-card #unified-input-box #Phone {
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
    padding: 0 1rem;
}
#login-card #unified-input-box #Phone::placeholder {
    color: rgb(0 45 86 / 0.2);
}

/* site.css centres every .form-error. On this card an error is a row with an icon, read from the start
   and a server message such as the wrong-password text can wrap to several lines, which
   centring made look different from the short errors. */
#login-card .form-error {
    text-align: start;
}

/* Long addresses. The card is widened first, by a small script in the page, up to the viewport less the gutters;
   what still does not fit wraps here. A displayed address is one string with <wbr> after @ . - _ (the server puts them in),
   so a line breaks at one of those first and anywhere when none is left: overflow-wrap: anywhere breaks inside a word only
   when the line has no better place. The font never shrinks, and nothing is clipped. Copying the text gives the address:
   <wbr> is an element, not a character.

   The pill never leaves the card: it is as wide as its address wants and no wider than its box, and its text may shrink
   below its content (min-width: 0), which a flex item does not do on its own. A pill that has wrapped is not a pill:
   the script adds sw-addr-wrapped, the capsule becomes a box (rounded-2xl, 1rem) and the envelope stays on the first row.
   A one-line pill is untouched. The class names appear only in the views that draw an address, so no other page moves. */
.sw-addr {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* The one-line state. <wbr> is a break opportunity that white-space: nowrap does not remove (measured in Chrome: an address with
   <wbr> still broke into two rows under nowrap), so the <wbr> elements are switched off with it. */
.sw-addr-nowrap {
    white-space: nowrap;
}
.sw-addr-nowrap wbr {
    display: none;
}
.sw-addr-pill {
    max-width: 100%;
}
.sw-addr-pill.sw-addr-wrapped {
    align-items: flex-start;
    border-radius: 1rem;
}

/* The Phone and Email tabs share the strip in two equal halves. The card gives the
   strip 277 px at phone width and 382 px from about 520 px up, so a half is 130 to 183 px, which leaves
   70 to 120 for the word after the emoji and the padding. That is enough for "Email". It is not enough
   for "Correo electrónico" or "البريد الإلكتروني" at any width, nor for "Эл. почта" or "Ел. пошта" at
   phone width: they broke onto a second line and made the Email tab 24 to 28 px taller than the Phone tab.
   In those four languages the emoji goes above the word and the word stays on one line, so both tabs
   have the same height and the label has the whole half. English, which already fits, is not touched,
   and neither are Hebrew, French or Portuguese, whose labels fit. */
#login-card [role="tab"]:is(:lang(ar), :lang(es)) {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    padding-inline: 8px;
    white-space: nowrap;
}
@media (max-width: 520px) {
    #login-card [role="tab"]:is(:lang(ru), :lang(uk)) {
        flex: 1 1 auto;
        flex-direction: column;
        gap: 2px;
        padding-inline: 8px;
        white-space: nowrap;
    }
}