/* Visual skin for the generic /1plus1 route. The markup keeps the existing
   sign-in and lottery data contract.

   SignInPage.cshtml sets ViewBag.HideMasterStyles for this route, so bootstrap,
   main, style and rtl do not load here and this file is the whole cascade
   alongside intl-tel-input's own sheet. That means it also has to supply what
   those sheets used to: the body margin reset below, and the accordion's
   show/hide near the bottom of this file. */
html:has(.landing-oneplusone),
body:has(.landing-oneplusone) {
    margin: 0;
    background: #f2f5f8;
}

.landing-oneplusone {
    --landing-navy: #002d56;
    --landing-blue: #005a9c;
    --landing-cyan: #00adef;
    --landing-red: #e30613;
    --landing-red-dark: #a8040f;
    --landing-surface: #ffffff;
    --landing-background: #f2f5f8;
    /* The mock's dial-code chip is `bg-pais-gray/60`, i.e. the page grey at 60%
       over white - a shade lighter than the page itself. */
    --landing-chip: #f7f9fb;
    --landing-border: #e1e8f0;
    --landing-muted: rgba(0, 45, 86, .7);
    background: var(--landing-background);
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    /* The master layout's body is 14px/#333; the mock's baseline is 16px/navy.
       Set it here so anything this file does not style explicitly still inherits
       the right scale. */
    font-size: 16px;
    line-height: 1.5;
    margin: 0 !important;
    padding: 0 !important;
}

.landing-oneplusone *,
.landing-oneplusone *::before,
.landing-oneplusone *::after,
.landing-oneplusone-footer *,
.landing-oneplusone-footer *::before,
.landing-oneplusone-footer *::after {
    box-sizing: border-box;
}

/* `min-h-screen flex flex-col` in the mock, with the footer as the last child and
   the hero flexing to fill - so a short page still paints white to the bottom. */
.landing-oneplusone__shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    max-width: 512px;
    margin: 0 auto;
    background: var(--landing-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* The slack goes below the last content block, not between the hero and the FAQ. */
.landing-oneplusone__faq { flex: 1 0 auto; }

.landing-oneplusone__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 12px 16px;
    background: var(--landing-surface);
    border-bottom: 1px solid var(--landing-border);
}

.landing-oneplusone__logo-link { display: inline-flex; align-items: center; min-width: 0; }
.landing-oneplusone__logo { display: block; width: auto; max-width: 136px; max-height: 36px; object-fit: contain; }
.landing-oneplusone__language { position: relative; flex: 0 0 auto; }

.landing-oneplusone__language-summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 28px 6px 12px;
    color: var(--landing-blue);
    font-family: "Assistant", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    list-style: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--landing-background);
}

.landing-oneplusone__language-summary::-webkit-details-marker { display: none; }
.landing-oneplusone__language[open] .landing-oneplusone__language-summary,
.landing-oneplusone__language-summary:hover,
.landing-oneplusone__language-summary:focus-visible { border-color: var(--landing-cyan); outline: none; }
.landing-oneplusone__language-flag,
.landing-oneplusone__language-item img { width: 21px; height: 15px; object-fit: cover; border-radius: 2px; }
.landing-oneplusone__language-chevron {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    font-size: 10px;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.landing-oneplusone__language-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 174px;
    padding: 6px;
    background: var(--landing-surface);
    border: 1px solid var(--landing-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 45, 86, .18);
}

.landing-oneplusone__language-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    color: var(--landing-navy);
    font-size: 14px;
    text-decoration: none;
    border-radius: 8px;
}
.landing-oneplusone__language-item:hover,
.landing-oneplusone__language-item:focus-visible { color: var(--landing-navy); background: #e6f7fd; outline: none; }

/* No bottom padding: the mock's only gap between the form and the FAQ heading is
   the capture's own `mt-12` (48px). Adding 40px here made it 88px. */
.landing-oneplusone__hero { padding: 32px 16px 0; text-align: center; }
.landing-oneplusone__offer {
    margin: 0 0 4px;
    color: var(--landing-muted);
    font-family: "Assistant", sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 24px;
    text-transform: uppercase;
}
.landing-oneplusone__offer-free,
.landing-oneplusone__offer strong { color: var(--landing-red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.landing-oneplusone__lottery-name {
    margin: 0;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1;
    text-transform: uppercase;
}
.landing-oneplusone__description {
    max-width: 460px;
    margin: 8px auto 32px;
    color: var(--landing-muted);
    font-family: "Assistant", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
/* The mock ends this line with an emoji flag, which Windows has no glyphs for -
   it renders as the bare letters "CA". Borrow intl-tel-input's sprite instead;
   its sheet is already on the page for the phone field. */
.landing-oneplusone__country-flag {
    display: inline-block;
    margin-inline-start: 3px;
    vertical-align: baseline;
    /* The sprite sits on the text baseline a shade too low at this size. */
    transform: translateY(1px);
}

.landing-oneplusone__jackpot { margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.landing-oneplusone__jackpot-label {
    margin: 0 0 4px;
    color: rgba(0, 45, 86, .5);
    font-family: "Assistant", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 16px;
    text-transform: uppercase;
}
.landing-oneplusone__jackpot-value {
    margin: 0 0 16px;
    color: var(--landing-blue);
    font-family: "Assistant", sans-serif;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
    white-space: nowrap;
    /* The amount is one LTR run. Without this the bidi algorithm reorders the
       space-separated groups in he/ar and the symbol lands in the middle. */
    direction: ltr;
    unicode-bidi: isolate;
}
.landing-oneplusone__draw {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 32px;
    color: var(--landing-muted);
    font-family: "Assistant", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.landing-oneplusone__draw--closed,
.landing-oneplusone__countdown { color: var(--landing-red); }
.landing-oneplusone__countdown { font-family: "Assistant", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.landing-oneplusone__draw-separator { color: rgba(0, 45, 86, .3); }

/* The mock puts 48px (`mt-12`) between the end of the form and the FAQ heading. */
.landing-oneplusone__capture { width: 100%; margin: 0 auto 48px; padding: 0 !important; text-align: start; }
.landing-oneplusone__phone-label {
    display: block;
    margin: 0 0 8px;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.landing-oneplusone__capture #error_hide,
.landing-oneplusone__capture #error_hide > .iti,
.landing-oneplusone__phone-input { width: 100%; }

/* The field is one flex row - chip, then input - which is the mock's
   `flex ... border-2 rounded-xl` wrapper. intl-tel-input positions its country
   container absolutely and expects the input to leave room for it in its own
   start padding; making the container a static flex child instead means the
   input is a real sibling, so the padding never has to be measured. That retires
   the --landing-phone-pad variable and the SyncPhonePadding() pass in the view. */
.landing-oneplusone .iti {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 2px solid var(--landing-border);
    border-radius: 12px;
    background: var(--landing-surface);
}
/* The mock clips the chip's outer corners with `overflow-hidden`. That is not
   available here: the country dropdown is a child of this same box and would be
   clipped with it, so the chip rounds its own leading corners to 10px (12 less
   the 2px border) instead. */
.landing-oneplusone .iti__country-container {
    position: static;
    display: flex; /* so the chip stretches to the row's full height */
    flex: 0 0 auto;
    padding: 0;
}
.landing-oneplusone .iti__selected-country {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    padding-inline: 12px;
    white-space: nowrap;
    background-color: var(--landing-chip);
    border-inline-end: 1px solid var(--landing-border);
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
}
/* The chip already takes a pointer cursor, which is signal enough that it opens;
   the caret only pushed the flag and the dial code apart. The hover wash that
   intl-tel-input paints on the primary half is dropped for the same reason - it
   lit up a box around the flag alone, not the chip, which read as a glitch. */
.landing-oneplusone .iti__arrow { display: none; }
.landing-oneplusone .iti__selected-country-primary {
    gap: 8px;
    height: auto;
    padding: 0;
    background-color: transparent !important;
}
.landing-oneplusone .iti .iti__selected-dial-code {
    margin: 0;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    /* "+972" is one LTR run. The plus is bidi-neutral, so in he/ar it takes the
       surrounding direction and the code renders "972+". Same guard as the
       jackpot value above. */
    direction: ltr;
    unicode-bidi: isolate;
}
/* The dial codes in the dropdown list need it for the same reason. */
.landing-oneplusone .iti__country .iti__dial-code { direction: ltr; unicode-bidi: isolate; }
/* Absolute, but now measured against .iti rather than the country container,
   which no longer establishes a containing block.

   The width is !important because iti.js writes `dropdownContent.style.width` from
   the tel input's offsetWidth every time the list opens. That used to match the
   field, since the input was full width with the chip overlaying its padding; now
   the input is a narrower flex sibling, so the inline value comes up short by
   exactly the width of the chip. */
.landing-oneplusone .iti--inline-dropdown .iti__dropdown-content {
    top: 100%;
    inset-inline-start: -2px;
    width: calc(100% + 4px) !important;
    margin-inline-start: 0;
    overflow: hidden;
}

/* The list is intl-tel-input's own markup, and it used to pick up the rest of its
   look from the legacy sheets. The one that showed most was `outline: 0` on the
   search box: it is autofocused, so without it the browser's default focus ring
   drew a hard dark rectangle across the top of the list. */
.landing-oneplusone .iti__dropdown-content {
    border: 1px solid var(--landing-border);
    border-radius: 12px;
    background: var(--landing-surface);
    box-shadow: 0 12px 30px rgba(0, 45, 86, .18);
}
.landing-oneplusone .iti__search-input {
    padding: 12px 16px;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
}
.landing-oneplusone .iti__search-input::placeholder { color: rgba(0, 45, 86, .45); }
.landing-oneplusone .iti__search-input + .iti__country-list { border-top: 1px solid var(--landing-border); }
.landing-oneplusone .iti__country-list {
    max-height: 232px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 45, 86, .25) transparent;
}
.landing-oneplusone .iti__country-list::-webkit-scrollbar { width: 8px; }
.landing-oneplusone .iti__country-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(0, 45, 86, .25); background-clip: content-box; }
.landing-oneplusone .iti__country {
    gap: 10px;
    padding: 10px 16px;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    font-size: 15px;
    font-weight: 600;
}
/* Base spaces these with a physical margin-right, which is the wrong side in
   he/ar; the row's gap does the same job in both directions. */
.landing-oneplusone .iti__country-list .iti__flag,
.landing-oneplusone .iti__country-name { margin: 0; }
.landing-oneplusone .iti__country .iti__dial-code { margin-inline-start: auto; color: rgba(0, 45, 86, .45); }
.landing-oneplusone .iti__country.iti__highlight,
.landing-oneplusone .iti__country:hover { background-color: #e6f7fd; }
.landing-oneplusone .landing-oneplusone__phone-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px; /* 56 + the wrapper's 2px borders = the mock's 60px */
    min-height: 56px;
    padding: 0 12px;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    border: 2px solid var(--landing-border);
    border-radius: 12px;
    background: var(--landing-surface);
    outline: none;
}
/* Once wrapped, the border belongs to .iti. The rule above still stands for the
   moment before intl-tel-input has initialised, so the field is never borderless. */
.landing-oneplusone .iti > .landing-oneplusone__phone-input {
    border: 0;
    border-radius: 0;
    background: transparent;
    /* intl-tel-input writes an inline padding of the chip's own width + 6 onto
       the input, because it expects the chip to sit absolutely on top of it. The
       chip is a static flex sibling here, so that padding is just dead space
       before the number. Inline styles need !important to overrule; the logical
       shorthand covers both sides, since iti pads the right one under RTL. */
    padding-inline: 12px !important;
}
/* The mock marks focus with the border colour alone - no ring. */
.landing-oneplusone .iti:focus-within,
.landing-oneplusone .landing-oneplusone__phone-input:focus { border-color: var(--landing-cyan); }
/* Error reads red, not the cyan focus colour it shared before. */
.landing-oneplusone .iti:has(> .landing-oneplusone__phone-input.error),
.landing-oneplusone .landing-oneplusone__phone-input.error { border-color: var(--landing-red); }
.landing-oneplusone__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    min-height: 60px;
    margin-top: 12px; /* the mock's mb-3 on the field */
    padding: 0 20px;
    color: #ffffff;
    font-family: "Assistant", sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 28px;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    background: var(--landing-red);
    box-shadow: 0 5px 0 var(--landing-red-dark);
}
/* Mock: "Pick your numbers first - pay at checkout." Rendered from the dictionary
   alias "Pick numbers first pay at checkout", falling back to English until that
   item exists. */
.landing-oneplusone__cta-hint {
    margin: 8px 0 0;
    color: rgba(0, 45, 86, .5);
    font-family: "Assistant", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}
.landing-oneplusone__cta:hover,
.landing-oneplusone__cta:focus-visible { color: #fff; background: var(--landing-red-dark); outline: none; }
.landing-oneplusone__cta:active { box-shadow: none; transform: translateY(5px); }
/*  Loader.js appends the spinner to the button and sets its inline height to the
    button's full height, which outgrows the line box. Cap it and let the flex
    centring above place it. */
.landing-oneplusone__cta .loader { width: 32px; height: 32px !important; }
.landing-oneplusone .validation_param_error {
    margin: 0 0 10px;
    color: var(--landing-red);
    font-family: "Assistant", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.landing-oneplusone__faq { width: 100%; min-width: 0; padding: 0 16px 40px; overflow: hidden; }
.landing-oneplusone__faq .picker_question,
.landing-oneplusone__faq .question_inner,
.landing-oneplusone__faq .picker_accordion { width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; }
.landing-oneplusone__faq .draw_title {
    margin: 0 0 16px !important;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
}
.landing-oneplusone__faq .picker_accordion { display: flex; flex-direction: column; gap: 8px; }
.landing-oneplusone__faq .accordion_item { width: 100%; overflow: hidden; border: 1px solid var(--landing-border) !important; border-radius: 12px; background: #fff; }
.landing-oneplusone__faq .accordion_header {
    position: relative;
    min-height: 52px;
    padding-block: 14px !important;
    /* Logical, so the chevron clearance follows ::after to the trailing side in he/ar. */
    padding-inline: 16px 42px !important;
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    cursor: pointer;
    border: 0 !important;
    transition: color .15s;
}
.landing-oneplusone__faq .accordion_header:hover { color: var(--landing-cyan); }
/* main/style.min.css give `.accordion_title` 18px/500 and a hard `width: 320px`,
   which overflows the card on a 390px viewport. */
.landing-oneplusone__faq .accordion_title {
    width: auto;
    color: inherit; /* so the header's hover colour reaches the question text */
    font-family: "Assistant", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
/* `position: absolute` and `display: block` used to come from main.min.css, which
   no longer loads on this route - without them the caret was a static inline box
   and dropped onto its own line under the question. Everything here is now stated
   outright rather than overriding the old border-triangle. */
.landing-oneplusone__faq .accordion_header::after {
    content: "▾";
    position: absolute;
    display: block;
    top: 50%;
    inset-inline-end: 18px;
    color: rgba(0, 45, 86, .4);
    font-size: 16px;
    line-height: 1;
    /* translateY carries the centring so the rotate below can compose with it. */
    transform: translateY(-50%);
    transition: transform .15s;
}
/* The mock's open <details> has no rule between the summary and the answer. */
.landing-oneplusone__faq .accordion_item.active .accordion_header { border-bottom: 0 !important; }
.landing-oneplusone__faq .accordion_item.active .accordion_header::after { transform: translateY(-50%) rotate(180deg); }
/* main/style.min.css render answers as italic 300 at 15px/#5f5f5f. */
.landing-oneplusone__faq .accordion_content,
.landing-oneplusone__faq .accordion_content p {
    color: var(--landing-muted);
    font-family: "Assistant", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.625;
}
/* The collapse itself. script.js only toggles `.active` on the item - the
   show/hide was main/style.min.css's, and those no longer load on this route, so
   without this every answer renders open. */
.landing-oneplusone__faq .accordion_content { display: none; padding: 0 16px 16px !important; }
.landing-oneplusone__faq .accordion_item.active .accordion_content { display: block; }
.landing-oneplusone__faq .accordion_content p { margin: 0 !important; line-height: inherit; }

/* The default footer has a star background and fixed heights. On /1plus1 it is
   intentionally replaced by the client mock's compact legal footer, populated
   from the generic existing dictionary values. */
.landing-oneplusone-footer {
    --landing-navy: #002d56;
    --landing-cyan: #00adef;
    --landing-border: #e1e8f0;
    --landing-muted: rgba(0, 45, 86, .55);
    width: 100% !important;
    max-width: 512px;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 32px 16px !important; /* py-8 px-4 */
    color: var(--landing-navy);
    font-family: "Assistant", sans-serif;
    background: #fff !important;
    background-image: none !important;
    border-top: 1px solid var(--landing-border);
}
.landing-oneplusone-footer__inner { width: 100%; text-align: center; }
.landing-oneplusone-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 0 0 20px; }
.landing-oneplusone-footer__links a { color: rgba(0, 45, 86, .8); font-family: "Assistant", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; text-decoration: none; }
.landing-oneplusone-footer__links a:hover,
.landing-oneplusone-footer__links a:focus-visible { color: var(--landing-cyan); outline: none; }
.landing-oneplusone-footer__legal,
.landing-oneplusone-footer__legal p { margin: 0; color: rgba(0, 45, 86, .5); font-family: "Assistant", sans-serif; font-size: 12px; font-weight: 600; line-height: 19.5px; }
.landing-oneplusone-footer__legal .footer_text,
.landing-oneplusone-footer__legal .footer_address { width: 100% !important; }
.landing-oneplusone-footer__legal b,
.landing-oneplusone-footer__legal strong { font-family: "Assistant", sans-serif; font-weight: 600; }
.landing-oneplusone-footer__legal p + p { margin-top: 8px; }

/* Everything above is the mock's mobile scale. The mock steps up at Tailwind's
   `md` (768px) via its `md:` prefixes, so this file does the same — the previous
   540px block scaled the type the wrong way at both ends. */
@media (min-width: 768px) {
    .landing-oneplusone__header { padding: 12px 32px; }
    .landing-oneplusone__logo { max-height: 44px; }
    .landing-oneplusone__offer { font-size: 18px; line-height: 28px; }
    .landing-oneplusone__lottery-name { font-size: 48px; }
    .landing-oneplusone__jackpot-value { font-size: 60px; }
}

/* The mock only floats the column away from the page on `sm:` and up. The footer
   is a sibling of the shell here rather than a child, so it carries the same
   shadow and sits above the shell's, otherwise the join shows a seam. */
@media (min-width: 640px) {
    .landing-oneplusone__shell,
    .landing-oneplusone-footer { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
    .landing-oneplusone-footer { position: relative; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-oneplusone *,
    .landing-oneplusone *::before,
    .landing-oneplusone *::after { transition-duration: .01ms !important; }
}