@charset "UTF-8"; /* NoStressBorders — Checklist CSS v3.3.3 */ /* ── Layout ── */ .nosb-checklist-page { background: #F6FAF7; min-height: 100vh; padding: var(--nosb-page-pt, 36px) 0 60px; } .nosb-checklist { max-width: 680px; margin: 0 auto; padding-left: var(--nosb-container-pad, clamp(16px, 4vw, 40px)); padding-right: var(--nosb-container-pad, clamp(16px, 4vw, 40px)); } @media (min-width: 900px) { .nosb-checklist { max-width: var(--nosb-container-max, 1100px); } } /* ⚠️ That 1100px is why the crossing stops looked stretched on desktop: a stop card is centred hero text plus a 420px illustration, floating in a ~1050px card. Preparation wants the width (compact rows); the crossing sections want a readable column. Only the BODY narrows — the header bar stays full width because it is the accordion control. */ @media (min-width: 900px) { .nosb-checklist .nosb-section--crossing > .nosb-section__body { max-width: 660px; margin-left: auto; margin-right: auto; } } /* ── Header ── */ .nosb-checklist__header { margin-bottom: var(--nosb-page-title-mb, 24px); } .nosb-checklist__title { font-family: 'Prata', serif; font-size: 26px; color: #0D141A; margin: 0 0 6px; line-height: 1.2; } @media (min-width: 900px) { .nosb-checklist__title { font-size: 32px; } } .nosb-checklist__subtitle { font-family: 'Poppins', sans-serif; font-size: 18px; color: #238470; font-weight: 500; margin-top: -0.2em; } /* ── Preparedness Score ── */ .nosb-score { background: #fff; border-radius: 12px; border: 1px solid #D8E8E2; padding: 20px 20px 16px; margin-bottom: 16px; } .nosb-score__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 8px; } .nosb-score__label { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; color: #44515C; text-transform: uppercase; letter-spacing: 0.04em; } .nosb-score__pct { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 500; color: #238470; line-height: 1; white-space: nowrap; flex-shrink: 0; } @media (max-width: 480px) { .nosb-score__label { font-size: 13px; } .nosb-score__pct { font-size: 24px; } } .nosb-score__bar-wrap { background: #D8E8E2; border-radius: 99px; height: 10px; overflow: hidden; margin-bottom: 12px; } .nosb-score__bar-fill { background: linear-gradient(90deg, #238470, #2eaa90); height: 100%; border-radius: 99px; transition: width 0.5s ease; min-width: 4px; } .nosb-score__status { font-family: 'Poppins', sans-serif; font-size: 14px; color: #7A8A94; margin-bottom: 20px; } .nosb-score__priorities { font-family: 'Poppins', sans-serif; font-size: 13px; color: #7A8A94; } .nosb-score__priorities-label { font-weight: 600; color: #44515C; } .nosb-score__priorities-items .nosb-score__priority-link { color: #238470; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.15s; } .nosb-score__priorities-items .nosb-score__priority-link:hover { text-decoration-color: #238470; } .nosb-score--complete .nosb-score__complete { font-family: 'Poppins', sans-serif; font-size: 15px; color: #238470; font-weight: 600; text-align: center; padding: 4px 0; } .nosb-score--crossing .nosb-score__label--crossing { color: #44515C; } .nosb-score--crossing .nosb-score__pct--crossing { color: #238470; } .nosb-score--crossing .nosb-score__bar-wrap--crossing { background: #D8E8E2; } .nosb-score--crossing .nosb-score__bar-fill--crossing { background: linear-gradient(90deg, #238470, #2eaa90); } /* ── Time-sensitive red banner ── */ .nosb-banner--urgent { background: #FEF2F2; border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; } .nosb-banner--info { background: #FFFBEB; border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; } /* Calm blue variant — informational nudges (not warnings), e.g. the profile-completion prompt */ .nosb-banner--calm { background: #F0F7FB; border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; } .nosb-banner--calm .nosb-banner__heading { color: #1A6FA8; } .nosb-banner--calm .nosb-banner__item { color: #44515C; } .nosb-banner--calm .nosb-banner__item::before { color: #1A6FA8; } .nosb-banner--info .nosb-banner__heading { color: #92400E; } .nosb-banner--info .nosb-banner__item { color: #78350F; } .nosb-banner--info .nosb-banner__item::before { color: #B45309; } .nosb-banner--urgent img.emoji { margin: 0 0.5em; } .nosb-banner__heading { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #CF2A2A; margin-bottom: 12px; text-transform: uppercase; } .nosb-banner__item { font-family: 'Poppins', sans-serif; font-size: 13px; color: #7F1D1D; margin: 6px 0 0; line-height: 1.5; padding-left: 16px; position: relative; } .nosb-banner__item::before { content: '›'; position: absolute; left: 4px; color: #CF2A2A; font-weight: 700; } .nosb-banner__item a { color: inherit; text-decoration: underline; font-weight: 600; } /* ── Tabs ── */ .nosb-tabs-wrap { background: #fff; border-radius: 12px; border: 1px solid #D8E8E2; margin-bottom: 16px; overflow: hidden; } .nosb-tabs { display: flex; gap: 4px; background: #F2F4F5; border-radius: 10px; padding: 4px; margin: 14px 16px 0; } .nosb-tab { flex: 1; padding: 9px 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #44515C; background: transparent; border: none; border-radius: 7px; cursor: pointer; transition: all 0.15s; } .nosb-tab:hover { color: #1B6B5A; } .nosb-tab--active, .nosb-tab--active:hover { color: #fff; background: #238470; } .nosb-tab-body { padding: 16px; } /* ── Documents tab ── */ .nosb-doc-list { display: flex; flex-direction: column; gap: 0; } .nosb-doc-item { display: flex; align-items: flex-start; gap: 10px; font-family: 'Poppins', sans-serif; font-size: 14px; color: #0D141A; padding: 4px 0; } .nosb-doc-item--checked .nosb-doc-item__title { text-decoration: line-through; color: #7A8A94; } .nosb-doc-item__cb { width: 16px; height: 16px; accent-color: #238470; cursor: pointer; flex-shrink: 0; margin-top: 2px; } .nosb-doc-item__info { display: flex; flex-direction: column; gap: 3px; } .nosb-doc-section-header { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #7A8A94; margin-top: 12px; padding-top: 12px; border-top: 1px solid #D8E8E2; } .nosb-doc-item__tag a { font-family: 'Poppins', sans-serif; font-size: 12px; color: #238470; text-decoration: none; font-weight: 500; } .nosb-doc-item__tag a:hover { text-decoration: underline; } .nosb-doc-item__toggle { font-family: 'Poppins', sans-serif; font-size: 12px; color: #1A6FA8; text-decoration: none; font-weight: 500; cursor: pointer; align-self: flex-start; } .nosb-doc-item__toggle:hover { text-decoration: underline; } .nosb-doc-note { font-family: 'Poppins', sans-serif; font-size: 12px; color: #7A8A94; margin: 6px 0 8px; line-height: 1.5; } .nosb-doc-item__free-note { font-size: 11px; color: #238470; font-style: italic; font-weight: 400; } /* ── Fees tab ── */ .nosb-fees-panel { display: flex; flex-direction: column; gap: 8px; } .nosb-fees-title { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #44515C; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; } .nosb-fees-title:first-child { margin-top: 0; } .nosb-fees-title--refundable { color: #1A6FA8; margin-top: 16px; } .nosb-fees-title--total { color: #238470; margin-top: 16px; border-top: 1px solid #D8E8E2; padding-top: 12px; } .nosb-fee-row-wrap { border-bottom: 1px solid #F0F7F4; padding: 4px 0; } /* align-items: flex-start, not center — a label that wraps to two lines used to vertically centre its amount against them, so "Free" (one line) and "$59.16 USD" (two) sat at different heights within their rows. The amount also gets nowrap: it is a single figure and should never break across lines; the label takes the wrapping instead. */ .nosb-fee-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-family: 'Poppins', sans-serif; font-size: 14px; } .nosb-fee-row__label { color: #44515C; min-width: 0; } .nosb-fee-row__value { font-weight: 600; color: #0D141A; white-space: nowrap; flex-shrink: 0; text-align: right; } .nosb-fee-row__note { font-family: 'Poppins', sans-serif; font-size: 11px; color: #7A8A94; margin: 2px 0 4px; } .nosb-fees-note { font-family: 'Poppins', sans-serif; font-size: 12px; color: #7A8A94; margin-top: 4px; } .nosb-fees-exempt { font-family: 'Poppins', sans-serif; font-size: 12px; color: #238470; margin-top: 6px; padding: 8px 10px; background: #F0FAF6; border-radius: 6px; } .nosb-fees-warn { font-family: 'Poppins', sans-serif; font-size: 12px; color: #8A5A2B; margin-top: 6px; padding: 8px 10px; background: #FFF7ED; border: 1px solid #FCE4CC; border-radius: 6px; } .nosb-step-section-head { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #238470; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #D8E8E2; } /* ── Sub-stops inside a crossing stop ──────────────────────────────────────── Only used by the TIP stop when two permits apply. One open at a time. The head carries the PLACE ("At the window" / "At your vehicles") because the change of location is the thing a traveler needs, and the fee, so money is readable while collapsed. See subStop() for why this is not two stops and not tabs. */ .nosb-step-section-head:first-child { margin-top: 4px; } .nosb-fees-rate-note { font-family: 'Poppins', sans-serif; font-size: 11px; color: #7A8A94; margin-top: 12px; font-style: italic; } .nosb-currency-toggle { display: flex; gap: 0; margin-bottom: 12px; border: 1px solid #D8E8E2; border-radius: 8px; overflow: hidden; align-self: flex-end; } .nosb-currency-btn { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 500; padding: 4px 12px; border: none; background: #fff; color: #7A8A94; cursor: pointer; transition: all 0.15s; } .nosb-currency-btn--active { background: #238470; color: #fff; } .nosb-currency-btn:not(.nosb-currency-btn--active):hover { background: #F6FAF7; color: #238470; } /* ── Responses toggle ── */ .nosb-responses { margin-bottom: 16px; } .nosb-responses__toggle { background: none; border: 1px solid #D8E8E2; border-radius: 8px; padding: 10px 16px; font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; cursor: pointer; width: 100%; text-align: left; transition: background 0.2s; display: flex; align-items: center; gap: 8px; } .nosb-responses__toggle:hover { background: #F6FAF7; } .nosb-responses__grid { background: #fff; border: 1px solid #D8E8E2; border-top: none; border-radius: 0 0 8px 8px; padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (min-width: 900px) { .nosb-responses__grid { grid-template-columns: 1fr 1fr 1fr; } } .nosb-responses__row { display: flex; flex-direction: column; gap: 2px; } .nosb-responses__label { font-family: 'Poppins', sans-serif; font-size: 11px; color: #7A8A94; text-transform: uppercase; letter-spacing: 0.04em; } .nosb-responses__value { font-family: 'Poppins', sans-serif; font-size: 13px; color: #0D141A; font-weight: 500; } /* ── Section accordion ── */ /* Sections are never dimmed — a 50% fade read as "locked out" in user testing. */ /* scroll-margin-top matches .nosb-step-card: the sticky progress bar overlays the top of the viewport, so a scrollIntoView({block:'start'}) without this tucks the section header underneath it. Applies to every section scroll — the gate-note jump links and the reorder re-point, not just one of them. */ .nosb-checklist .nosb-section { margin-bottom: 12px; border-radius: 12px; overflow: hidden; border: 1px solid #D8E8E2; scroll-margin-top: 148px; } .nosb-section__header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #44515C; color: #fff; cursor: pointer; user-select: none; } .nosb-section__header--complete { background: #238470; } .nosb-section__chevron { display: flex; align-items: center; flex-shrink: 0; } .nosb-section__title { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; flex: 1; text-transform: uppercase; letter-spacing: 0.04em; } .nosb-section__stat { font-family: 'Poppins', sans-serif; font-size: 13px; color: rgba(255,255,255,0.92); flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .nosb-section__stat { font-size: 12px; } } .nosb-section__ring { display: flex; align-items: center; flex-shrink: 0; } .nosb-section__description { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; padding: 12px 16px 0; margin: 0; line-height: 1.6; background: #fff; } .nosb-section__body { background: #fff; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; } /* ── The documents & fees readout (replaces the Documents/Fees tabs) ── Deliberately unlike the section bars beneath it: light on light, no left chevron, numerals first, one control in a right-aligned footer. */ .nosb-readout { background: #fff; border: 1px solid #D8E8E2; border-radius: 10px; margin-bottom: 16px; overflow: hidden; } .nosb-readout__top { padding: 14px 18px 12px; } .nosb-readout__kicker { font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #7A8A94; } .nosb-readout__fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 7px; } .nosb-readout__big { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 600; color: #0D141A; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .nosb-readout__big--free { font-size: 21px; color: #238470; } .nosb-readout__plus { font-family: 'Poppins', sans-serif; font-size: 13px; color: #1A6FA8; font-variant-numeric: tabular-nums; } .nosb-readout__sub { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #7A8A94; line-height: 1.45; margin: 6px 0 0; } .nosb-readout__row { display: grid; grid-template-columns: 178px 1fr; gap: 4px 16px; align-items: baseline; padding: 11px 18px; border-top: 1px solid #F0F7F4; } @media (max-width: 620px) { .nosb-readout__row { grid-template-columns: 1fr; gap: 3px; } } .nosb-readout__key { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: #7A8A94; white-space: nowrap; } .nosb-readout__val { font-family: 'Poppins', sans-serif; font-size: 13.5px; color: #0D141A; line-height: 1.5; } .nosb-readout__val strong { font-weight: 600; } .nosb-readout__sub-inline { color: #7A8A94; } .nosb-readout__foot { border-top: 1px solid #D8E8E2; padding: 0; } .nosb-readout__link { display: block; width: 100%; background: #238470; border: none; padding: 5px 18px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; cursor: pointer; text-align: center; transition: background 0.15s; letter-spacing: 0.03em; } .nosb-readout__link:hover { background: #1B6B5A; } .nosb-readout__link:focus-visible { outline: 2px solid #7DD4C4; outline-offset: -3px; } .nosb-readout__link svg { display: inline-block; vertical-align: middle; margin-left: 6px; } .nosb-readout__foot--bottom { border-top: none; border-bottom: 1px solid #D8E8E2; } .nosb-readout__open { border-top: 1px solid #D8E8E2; padding: 4px 18px 16px; } .nosb-readout__head { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: #238470; margin: 18px 0 2px; padding-bottom: 8px; border-bottom: 2px solid #238470; } /* Read-only document rows — a check and a strikethrough, never a control. */ .nosb-doc-group { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #7A8A94; margin-top: 18px; padding-top: 14px; padding-bottom: 10px; border-top: 1px solid #F0F7F4; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .nosb-doc-group:first-child { margin-top: 12px; padding-top: 0; border-top: none; } .nosb-doc-group__count { color: #238470; font-variant-numeric: tabular-nums; white-space: nowrap; } .nosb-doc-row { display: flex; align-items: flex-start; gap: 9px; font-family: 'Poppins', sans-serif; font-size: 14px; color: #0D141A; padding: 4px 0; line-height: 1.45; } .nosb-doc-row__mark { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; display: flex; align-items: center; justify-content: center; } .nosb-doc-row__bullet { width: 5px; height: 5px; border-radius: 50%; background: #A9BAB4; display: block; } .nosb-doc-row__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nosb-doc-row--done .nosb-doc-row__label { text-decoration: line-through; color: #7A8A94; } .nosb-doc-row__sub { font-size: 12px; color: #7A8A94; line-height: 1.4; } .nosb-doc-copies { margin: 9px 0 1px; padding: 9px 12px; border-radius: 6px; background: #EBF7F4; font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #1B6B5A; line-height: 1.5; } .nosb-doc-hint { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #1B6B5A; background: #EBF7F4; border-radius: 6px; padding: 9px 12px; margin-top: 14px; line-height: 1.45; display: flex; align-items: flex-start; gap: 8px; } .nosb-doc-hint strong { font-weight: 600; } /* ── Group cards — one item, N individual ticks (Gather, Declare, Entry risks) ── */ .nosb-item--group .nosb-gather__box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid #7A8A94; background: #fff; flex-shrink: 0; margin-top: 2px; position: relative; padding: 0; cursor: pointer; } .nosb-item--group .nosb-gather__box--on { background: #238470; border-color: #238470; } .nosb-item--group .nosb-gather__box--on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg); } .nosb-item--group .nosb-gather__box--some { border-color: #238470; } .nosb-item--group .nosb-gather__box--some::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: #238470; border-radius: 1px; } .nosb-item--group .nosb-gather__box:focus-visible { outline: 2px solid #238470; outline-offset: 2px; } .nosb-gather__count { background: #EBF7F4; color: #1B6B5A; cursor: default; } /* A group row's body opens on demand — eleven bodies rendered flat is the wall of text this restructure exists to remove. */ .nosb-grouprow__more { margin-left: auto; flex-shrink: 0; background: none; border: none; padding: 0 0 0 10px; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; color: #1B6B5A; cursor: pointer; text-decoration: underline; } .nosb-grouprow__more:hover { color: #238470; } .nosb-grouprow__detail { margin: 0 0 6px 24px; padding: 2px 0 8px; border-left: 2px solid #E8F0EC; } .nosb-grouprow__detail .nosb-item__body { margin-left: 12px; } .nosb-grouprow__detail .nosb-item__learn-more, .nosb-grouprow__detail .nosb-item__action { margin-left: 12px; } .nosb-completed-group__tick { color: #238470; font-weight: 700; font-size: 15px; line-height: 1; flex-shrink: 0; width: 15px; text-align: center; } .nosb-gather__rows { display: flex; flex-direction: column; gap: 1px; margin: 8px 0 0 28px; padding-top: 8px; border-top: 1px solid #F0F7F4; } /* As a section the rows are the whole body, so they don't need the card's 28px indent (which existed to line them up under a parent checkbox) or the divider under a header. */ .nosb-gather__rows--section { margin: 0; padding-top: 0; border-top: none; } .nosb-gather__row { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; } .nosb-gather__row .nosb-item__cb { width: 15px; height: 15px; margin-top: 3px; } /* The label — not just the 15px box — is the tap target, and it spans the row's full width so there is no dead zone to the right of a short document name. This is the section a traveler ticks one-handed on a phone, and it had the smallest boxes in the product. */ .nosb-gather__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .nosb-gather__label { font-family: 'Poppins', sans-serif; font-size: 13.5px; color: #0D141A; cursor: pointer; line-height: 1.4; } .nosb-gather__row--on .nosb-gather__label { text-decoration: line-through; color: #7A8A94; } .nosb-gather__sub { font-family: 'Poppins', sans-serif; font-size: 12px; color: #7A8A94; line-height: 1.4; } /* ── Leaving the United States: briefing + group labels (absorbed Before Arriving) ── */ .nosb-leave-brief { background: #EFF6FF; border-radius: 6px; padding: 12px 14px; margin: 4px 0 6px; display: flex; flex-direction: column; gap: 7px; } .nosb-leave-brief__line { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.5; margin: 0; } .nosb-leave-brief__line strong { color: #0D141A; font-weight: 600; } /* ── Recommended, not required — one collapsed group at the foot of Preparation ── */ .nosb-recgroup { margin-top: 10px; } .nosb-recgroup__toggle { background: #F6FAF7; border: 1px solid #D8E8E2; border-radius: 8px; padding: 10px 14px; font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; cursor: pointer; width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; transition: background 0.2s; } .nosb-recgroup__toggle:hover { background: #EBF7F4; } .nosb-recgroup--open .nosb-recgroup__toggle { border-radius: 8px 8px 0 0; } .nosb-recgroup__label { font-weight: 600; color: #0D141A; } .nosb-recgroup__count { color: #238470; font-weight: 600; font-variant-numeric: tabular-nums; } .nosb-recgroup__note { color: #7A8A94; font-size: 12px; margin-left: auto; } @media (max-width: 560px) { .nosb-recgroup__note { margin-left: 0; flex-basis: 100%; } } .nosb-recgroup__body .nosb-item { border-color: #E8F0EC; background: #fff; } .nosb-recgroup__body { border: 1px solid #D8E8E2; border-top: none; border-radius: 0 0 8px 8px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; background: #fff; } /* An offer card (eSIM) — no checkbox, so its title sits where the checkbox would. */ .nosb-item--offer .nosb-item__title { cursor: default; } .nosb-item__dismiss { background: none; border: none; padding: 0; margin: 10px 0 0 28px; font-family: 'Poppins', sans-serif; font-size: 12px; color: #7A8A94; text-decoration: underline; cursor: pointer; } .nosb-item__dismiss:hover { color: #44515C; } /* ── Callouts ── */ /* ⚠️ padding/border-radius/margin are re-stated for embeds at the foot of this file (a .nosb-ds page's own .nosb-callout otherwise overrides them) — change both together. */ .nosb-checklist .nosb-callout { font-family: 'Poppins', sans-serif; font-size: 13px; padding: 10px 14px; border-radius: 8px; margin: 8px 16px; line-height: 1.5; } .nosb-checklist .nosb-callout--warning { background: #FFF8EC; border: 1px solid #E0BE8A; color: #92400E; } .nosb-checklist .nosb-callout--urgent { background: #FFF0F0; border: 1px solid #E4A0A0; color: #991B1B; } /* Same info-blue family as .nosb-tbsnap--info and .nosb-gate-note--info — this was the third declaration still carrying the old indigo. */ .nosb-checklist .nosb-callout--info { background: #EFF6FF; border: 1px solid #A8C8E6; color: #2C5578; } /* ── Item cards ── */ .nosb-item { background: #fff; border: 1px solid #E8F0EC; border-radius: 10px; padding: 12px 14px; transition: opacity 0.2s; } .nosb-item--checked { opacity: 0.5; } .nosb-item--acknowledged { opacity: 0.75; } /* ── Tier palette — ONE source, five tiers ──────────────────────────────────── Every tier owns exactly one hue, and the badge, the border and the tint are drawn from the same family, so a card can never wear one tier's border under another's badge. This replaces four unrelated palettes (badge / card / callout / banner), which is why Required and Warning kept reading as the same card however the tints were tuned. Red is the consequence family: URGENT (time has run out) is the loud member — a solid badge — and ELIGIBILITY (something about you may stop you crossing) is the quiet one. Same hue on purpose: the outcome is the same, only the pressure differs. Amber = REQUIRED (go and do this). Blue = DECLARE (say this at the booth). Teal = RECOMMENDED (optional). Grey = INFO, and grey also means done — so green never has to mean both "optional" and "completed", which is what made the badges unreadable. ⚠️ Tints are deliberately deeper than the near-white set they replace: at #FFFDF2 the hue could not be seen and the 1px border carried the whole signal. */ .nosb-item--t-urgent { border-color: #E08585; background: #FDEEEE; } .nosb-item--t-eligibility { border-color: #EFB6B0; background: #FEF6F5; } .nosb-item--t-required { border-color: #EFC189; background: #FEF7EC; } .nosb-item--t-declare { border-color: #A8C8E6; background: #F2F8FD; } .nosb-item--t-recommended { border-color: #C3E3DA; background: #F4FAF8; } .nosb-item__inline-link { color: #238470; font-weight: 600; text-decoration: underline; cursor: pointer; } .nosb-item__inline-link:hover { color: #1B6B5A; } .nosb-item--normal { border-color: #D8E8E2; } /* Final Steps bonus tips — numbered cards (reuse .nosb-step-card); content aligns under the title */ .nosb-tip-card__content { padding-left: 42px; } .nosb-tip-card__body { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.6; margin: 0; } .nosb-tip-card__content .nosb-item__learn-more { margin-left: 0; display: inline-block; margin-top: 8px; } .nosb-checklist .nosb-tip-card__content .nosb-item__action { margin-left: 0; } @media (max-width: 480px) { .nosb-tip-card__content { padding-left: 0; } } /* Locked Bonus Tips — blurred, non-interactive teaser (the unlock message is the section description; the survey CTA lives on the finish card) */ /* Only TEASER_CARDS of these render behind the lock (see renderBonusBlock). The mask fades the last one out so the teaser reads as "there is more", not as a truncated list. ⚠️ The mask applies to the blurred result, so it also tidies the blur bleeding past the bottom edge. Unsupported browsers simply get a hard stop — no breakage. */ .nosb-final-blur { filter: blur(5px); pointer-events: none; user-select: none; opacity: 0.9; -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0) 100%); } /* ⚠️ Stands alone — it used to borrow .nosb-section__description (accordion-body styling: white panel, padding-bottom 0) which left it flush against the cards below. */ .nosb-final-unlock { display: flex; align-items: flex-start; gap: 9px; font-family: 'Poppins', sans-serif; font-size: 15.5px; font-weight: 500; color: #1B6B5A; line-height: 1.5; background: #fff; border-radius: 10px; padding: 16px 18px; margin: 0 0 18px; } .nosb-final-unlock i { font-size: 19px; color: #238470; flex-shrink: 0; position: relative; top: 1px; } .nosb-item__header { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } /* Badge + "crossing in N days" + Details travel together. Grouping them replaces the per-element `order` + margin-left:auto juggling, which put the badge beside a wrapped title on mobile ("Lienholder/Fin[URGENT] Letter") and had already caused one checkbox-ordering regression. */ .nosb-item__meta { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; } .nosb-item__meta .nosb-item__badge, .nosb-item__meta .nosb-item__when, .nosb-item__meta .nosb-item__more { order: 0; margin-left: 0; } @media (max-width: 700px) { /* Own line, indented to sit under the TITLE rather than under the checkbox. The indent has to clear checkbox + gap (+ icon + gap when the item has one) — 28px only cleared the checkbox, so the badge sat left of the title it belongs to. The arithmetic, measured on the real page: checkbox 22 + gap 10 = 32; with an icon, + icon 17 + gap 10 = 59. ⚠️ Measure these on the PRODUCT, not a hand-built probe — a probe with different .nosb-item padding put these 7px out. */ .nosb-item__meta { flex-basis: 100%; margin-left: 0; padding-left: 32px; } .nosb-item__header:has(.nosb-item__icon) .nosb-item__meta { padding-left: 59px; } /* The meta is on its own line here, so the title no longer has to reserve room beside it. */ .nosb-item__title { min-width: 0; } } .nosb-item__cb { width: 18px; height: 18px; accent-color: #238470; cursor: pointer; flex-shrink: 0; margin-top: 2px; } /* Pills sit to the RIGHT of the heading. Done with flex order rather than by reordering the DOM, so every badge variant moves at once and the checkbox's `for`/label relationship is untouched. */ .nosb-item__badge { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; user-select: none; order: 99; margin-left: auto; } .nosb-item__badge ~ .nosb-item__badge { margin-left: 0; } /* Badge colours come from the same five families as the card borders above — see the tier palette note. Urgent is the only SOLID badge: it is the one tier that means "act today", and solid-vs-tinted separates it from Eligibility at a glance without spending a second hue on it. */ .nosb-item__badge--t-urgent { background: #CF2A2A; color: #fff; } .nosb-item__badge--t-eligibility { background: #FBE0DE; color: #B42318; } .nosb-item__badge--t-required { background: #FBE3C3; color: #9A4A08; } .nosb-item__badge--t-declare { background: #D6E8F7; color: #155E8C; } .nosb-item__badge--t-recommended { background: #DFF1E9; color: #1B6B5A; } /* ── Urgency inside the progress card (replaces the standalone red banner) ── The card pads 20px 20px 16px, so a full-bleed strip needs -20px sides with the card's own top padding removed, and the foot panel needs -16px at the bottom to sit flush. overflow:hidden makes both follow the card's border radius. */ .nosb-score--urgent { padding-top: 0; overflow: hidden; } .nosb-score__urgent-strip { margin: 0 -20px 16px; padding: 10px 20px; background: #CF2A2A; color: #fff; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .nosb-score__urgent-strip i { font-size: 15px; } .nosb-score__urgent-panel { margin: 14px -20px -16px; padding: 14px 20px; background: #FDEEEE; border-top: 1px solid #F5D9D8; } .nosb-score__urgent-head { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 400; color: #0D141A; } .nosb-score__urgent-list { list-style: none; margin: 10px 0 0; padding: 0; } .nosb-score__urgent-list li { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; padding: 5px 0 5px 20px; position: relative; line-height: 1.5; } .nosb-score__urgent-list li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #CF2A2A; } .nosb-score__urgent-list a { color: #B42318; font-weight: 600; text-decoration: underline; cursor: pointer; } .nosb-score__urgent-list a:hover { color: #991B1B; } .nosb-score__urgent-list span { color: #7A8A94; } /* "Details" — opens a collapsed item. Sits at the far right of the header, past the badge, because the title itself is the checkbox's label and clicking it must tick. */ /* Bulk acknowledgement for the optional section. Set apart from the item rows above it — it is a different kind of claim ("I've looked, I'm going") rather than another task. */ .nosb-rec-ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; background: #F2FAF6; border: 1px dashed #C3E3DA; border-radius: 8px; } .nosb-rec-ack--on { background: #EBF7F4; border-style: solid; } .nosb-rec-ack__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nosb-rec-ack__label { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; color: #0D141A; cursor: pointer; line-height: 1.4; } .nosb-rec-ack__sub { font-family: 'Poppins', sans-serif; font-size: 12px; color: #7A8A94; line-height: 1.45; } .nosb-sections-lead { font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.6; color: #44515C; margin: 4px 2px 14px; } .nosb-sections-lead strong { color: #0D141A; font-weight: 600; } .nosb-item__more { order: 102; margin-left: 0; flex-shrink: 0; background: none; border: none; padding: 0; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; color: #1B6B5A; cursor: pointer; text-decoration: underline; } .nosb-item__more:hover { color: #238470; } .nosb-item__collapse { display: block; } /* An open item's first paragraph shouldn't double up the header's gap. */ .nosb-item__collapse > .nosb-item__body:first-child { margin-top: 8px; } /* Item icon — sits between the checkbox and the title, in the tier's ink. It depicts the TASK (a pill, a gavel, an umbrella), not the tier: the badge beside it already names the tier in words, so a tier glyph repeated itself and two urgent items showed two identical clocks. Outline weight, not a filled disc — a disc would compete with the checkbox square right beside it. */ .nosb-item__icon { font-size: 17px; line-height: 1; flex-shrink: 0; margin-top: 1px; } .nosb-item__icon--urgent { color: #CF2A2A; } .nosb-item__icon--eligibility { color: #B42318; } .nosb-item__icon--required { color: #B45309; } .nosb-item__icon--warning { color: #8A6314; } .nosb-item__icon--declare { color: #155E8C; } .nosb-item__icon--recommended { color: #1B6B5A; } .nosb-item__icon--info { color: #7A8A94; } .nosb-item--checked .nosb-item__icon { color: #7A8A94; } /* "crossing in 3 days" — an escalated item says WHY it turned red, so the traveler learns what changed instead of just being shouted at. */ .nosb-item__when { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #CF2A2A; order: 100; flex-shrink: 0; } /* ⚠️ flex-basis MUST be 0, not auto. Flex decides where to WRAP using the hypothetical main size — with `auto` that is the title's full content width (often 1000px+), so a long title broke onto its own line before flex ever got the chance to shrink it, leaving a gap beside the checkbox and icon. With basis 0 it stays on the line and grows to fill. */ .nosb-item__title { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #0D141A; cursor: pointer; user-select: none; line-height: 1.4; flex: 1 1 0; min-width: 210px; } .nosb-item--checked .nosb-item__title { text-decoration: line-through; color: #7A8A94; } .nosb-item--acknowledged .nosb-item__title { text-decoration: none; color: #44515C; } /* Done is GREY, not green. This badge used to be #D1FAE5/#065F46 — byte-identical to the Recommended badge — so one green meant both "you don't have to" and "you did". Quiet grey also matches the 50% opacity a completed card already carries. */ .nosb-item__badge--acknowledged { background: #E8EDEB; color: #44515C; } .nosb-item__body { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; margin: 6px 0 0 28px; line-height: 1.6; } .nosb-item__body--tight { margin-top: 8px; margin-bottom: 0; } .nosb-item__body strong { color: #0D141A; } .nosb-item__med-list { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.55; margin: 4px 0 0 28px; padding-left: 18px; list-style: disc; } .nosb-item__med-list li { margin: 3px 0; } .nosb-item__med-list strong { color: #0D141A; font-weight: 600; } .nosb-checklist .nosb-item__action { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 8px 0 0 28px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #238470 !important; text-decoration: none !important; padding: 6px 14px; border: 1px solid #238470 !important; border-radius: 6px; transition: all 0.2s; box-shadow: none !important; } .nosb-checklist .nosb-item__action:hover { background: #238470 !important; color: #fff !important; } .nosb-checklist .nosb-item__action--affiliate { background: #238470 !important; color: #fff !important; } .nosb-checklist .nosb-item__action--affiliate:hover { background: #1B6B5A !important; } .nosb-checklist .nosb-item__action--primary { background: #238470 !important; color: #fff !important; border-color: #238470 !important; } .nosb-checklist .nosb-item__action--primary:hover { background: #1B6B5A !important; border-color: #1B6B5A !important; } .nosb-item__learn-more { display: inline-block; margin: 6px 0 0 28px; font-family: 'Poppins', sans-serif; font-size: 12px; color: #1A6FA8; text-decoration: none; } .nosb-item__learn-more:hover { text-decoration: underline; } /* ── Insurance special card ── */ .nosb-item__badge--required { background: #FFF0E6; color: #C2500A; } /* Insurance body */ .nosb-ins-body p { margin: 0 0 8px 0; font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.6; } .nosb-ins-body p:last-child { margin-bottom: 0; } .nosb-ins-body p.nosb-ins-bold { font-weight: 700; color: #238470; } .nosb-ins-list { margin: 0 0 8px; padding-left: 18px; list-style: disc; } .nosb-ins-list li { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.6; margin-bottom: 2px; } /* Baja Bound trust sub-card */ .nosb-ins-partner { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 16px; background: #fff; border: 1px solid #D8E8E2; border-radius: 8px; padding: 14px 18px; margin: 12px 0 0 28px; } .nosb-ins-partner__logo { height: 58px; width: auto; flex-shrink: 0; } .nosb-ins-partner__trust { display: flex; flex-direction: column; gap: 3px; } .nosb-ins-partner__label { font-family: 'Poppins', sans-serif; font-size: 11px; color: #7A8A94; text-transform: uppercase; letter-spacing: 0.04em; } .nosb-ins-partner__stars { color: #FF6900; font-size: 13px; letter-spacing: 2px; line-height: 1; } .nosb-ins-partner__rating { font-family: 'Poppins', sans-serif; font-size: 11px; color: #7A8A94; } .nosb-ins-partner__cta { display: inline-flex; align-items: center; gap: 6px; background: #238470; color: #fff !important; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; padding: 8px 16px; border-radius: 6px; white-space: nowrap; margin: 12px 0 0 28px; transition: background 0.15s; } .nosb-ins-partner__cta:hover { background: #1B6B5A !important; } .nosb-ins-disc { font-family: 'Poppins', sans-serif; font-size: 11px; color: #7A8A94; margin: 8px 0 0 28px; font-style: italic; } @media (max-width: 480px) { .nosb-ins-partner { display: flex; } } /* ── eSIM affiliate card (Saily) — mirrors the insurance partner card ── */ .nosb-item--esim { border-color: #9BD3C3; background: #F6FAF7; } .nosb-item__badge--recommended { background: #D1FAE5; color: #065F46; } .nosb-esim-chip { display: flex; align-items: center; justify-content: center; background: #FFE600; border-radius: 6px; padding: 10px 14px; flex-shrink: 0; } .nosb-esim-chip img { display: block; height: 20px; width: auto; } .nosb-esim-promo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 12px 0 0 28px; padding: 8px 12px; background: #EBF7F4; border: 1px dashed #238470; border-radius: 8px; font-size: 13px; color: #0D141A; } .nosb-esim-promo strong { color: #1B6B5A; } .nosb-esim-promo__code { font-weight: 700; letter-spacing: 0.06em; background: #fff; border: 1px solid #238470; border-radius: 5px; padding: 2px 8px; color: #1B6B5A; } /* ── Photo-mission incentive card (Before Arriving) ── */ .nosb-photo-mission { border-color: #D8E8E2; background: #fff; } /* ⚠️ The 28px left margin on .nosb-item__body / __reward exists to clear a CHECKBOX. This card has no checkbox (its header is a badge + a plain title div), so that indent was orphaned and the body sat 28px right of its own title. Zero it here. */ .nosb-photo-mission > .nosb-item__body, .nosb-photo-mission > .nosb-photo-mission__reward { margin-left: 0; } .nosb-photo-mission__badge { background: #D1FAE5; color: #065F46; } .nosb-photo-mission__reward { display: flex; align-items: flex-start; gap: 11px; margin: 12px 0 0 28px; padding: 14px 16px; background: #EBF7F4; border: 1px solid #D8E8E2; border-radius: 8px; color: #1B6B5A; font-family: 'Poppins', sans-serif; font-size: 13px; line-height: 1.55; } .nosb-photo-mission__reward strong { color: #238470; } .nosb-photo-mission__reward i.ph { font-size: 17px; line-height: 1.4; flex-shrink: 0; } /* Trailblazer variant — required task, not a nice-to-have, so it's orange like the other Trailblazer alerts. */ .nosb-photo-mission__reward--tb { background: #FFF0E6; border-color: #FFD1A8; color: #C2500A; } .nosb-photo-mission__reward--tb strong { color: #E55A00; } /* Regular-user variant — real bounties are open somewhere on the border, but not confirmed at THIS traveler's own crossing, so it's a distinct info-blue, not orange's "you must do this" nor the flat-fallback's plain green. */ .nosb-photo-mission__reward--info { background: #EFF6FF; border-color: #BFDBFE; color: #2C5578; } .nosb-photo-mission__reward--info strong { color: #14395C; } /* ── Sub-sections ── */ .nosb-subsection { border: 1px solid #D8E8E2; border-radius: 10px; overflow: hidden; margin-top: 8px; } .nosb-subsection__title { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #fff; background: #44515C; padding: 8px 14px; } .nosb-subsection .nosb-item { border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid #F0F7F4; } .nosb-subsection .nosb-item:last-child { border-bottom: none; } /* ── Briefing block ── */ .nosb-briefing { background: #F6FAF7; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; } .nosb-briefing__title { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #238470; margin-bottom: 4px; } .nosb-briefing__list { margin: 0 0 10px 0; padding-left: 18px; } .nosb-briefing__list li { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.6; margin-bottom: 2px; } /* ── Ready to cross button ── */ /* ── Leaving the US — hero + simple steps + "if stopped" reveal ── */ #nosb-section-leaving_origin .nosb-section__body { padding: 20px 18px; gap: 0; } .nosb-leave-hero { margin-bottom: 18px; } .nosb-leave-hero__lead { font-family: 'Poppins', sans-serif; font-size: 14px; color: #44515C; line-height: 1.55; margin: 0; text-align: left; } .nosb-leave-points { list-style: none; margin: 0; padding: 0; } .nosb-leave-points li { position: relative; padding-left: 18px; font-family: 'Poppins', sans-serif; font-size: 14px; color: #44515C; line-height: 1.6; margin-bottom: 8px; } .nosb-leave-points li:last-child { margin-bottom: 0; } .nosb-leave-points li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #238470; } .nosb-ghost-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1.5px solid #CBE0D8; color: #1B6B5A; border-radius: 10px; padding: 12px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; margin-top: 10px; transition: background 0.15s; } .nosb-ghost-btn:hover { background: #F6FAF7; } .nosb-stopped-card { background: #fff; border: 1px solid #E8F0EC; border-radius: 12px; padding: 12px 13px; margin-top: 10px; } .nosb-stopped-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .nosb-stopped-card__badge { width: 30px; height: 30px; border-radius: 9px; background: #E1F2EC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nosb-stopped-card__title { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #0D141A; } .nosb-stopped-row { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 7px; } .nosb-stopped-row:last-child { margin-bottom: 0; } .nosb-stopped-row__dot { width: 5px; height: 5px; border-radius: 50%; background: #238470; flex-shrink: 0; margin-top: 7px; } .nosb-stopped-row__txt { font-family: 'Poppins', sans-serif; font-size: 14px; color: #44515C; line-height: 1.5; } /* ── Icon-badge guide card (shared across crossing stops) ── */ .nosb-gcard { background: #fff; border: 1px solid #E8F0EC; border-radius: 11px; padding: 13px 14px; margin-top: 10px; } .nosb-gcard__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } .nosb-gcard__badge { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nosb-gcard__badge--amber { background: #FAEEDA; color: #B45309; } .nosb-gcard__badge--teal { background: #E1F2EC; color: #1B6B5A; } .nosb-gcard__badge i { font-size: 16px; } .nosb-gcard__badge--red { background: #FBE9E9; color: #B42318; } .nosb-gcard__title { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: #0D141A; } .nosb-gcard__body { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.5; margin: 0; } .nosb-gcard--amber { background: #FFFBF2; border-color: #F4E6CC; } .nosb-gcard--teal { background: #F2FAF6; border-color: #D5EBE0; } /* ── Crossing step illustration ── */ .nosb-step-img { display: block; width: 100%; max-width: 420px; height: auto; margin: 14px auto 2px; border-radius: 10px; } /* ── Customs semáforo (press-button + outcome cards) ── */ .nosb-sem-wrap { margin: 10px 0 0; } .nosb-sem__lead { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #0D141A; margin: 14px 0 0; } .nosb-sem { display: flex; justify-content: center; margin: 10px 0 14px; } .nosb-sem__btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #D8E8E2; border-radius: 12px; padding: 11px 20px 11px 11px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #0D141A; box-shadow: 0 3px 0 #D3E5DE; } .nosb-sem__btn-ic { width: 32px; height: 32px; border-radius: 50%; background: #E1F2EC; color: #1B6B5A; display: flex; align-items: center; justify-content: center; } .nosb-sem__btn-ic i { font-size: 17px; } .nosb-sem__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .nosb-sem__card { display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 14px; padding: 22px 14px; text-align: center; } .nosb-sem__card--green { background: #EFFAF4; border: 1px solid #CDEBDD; } .nosb-sem__card--red { background: #FDF2F2; border: 1px solid #F5D9D8; } .nosb-sem__cdot { width: 26px; height: 26px; border-radius: 50%; } .nosb-sem__card--green .nosb-sem__cdot { background: #30A46C; } .nosb-sem__card--red .nosb-sem__cdot { background: #E5484D; } .nosb-sem__clbl { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; } .nosb-sem__card--green .nosb-sem__clbl { color: #1B6B5A; } .nosb-sem__card--red .nosb-sem__clbl { color: #C0392B; } .nosb-sem__cap { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.55; margin: 14px 0 0; } /* ── Present card (what to hand the agent) ── */ .nosb-present { background: #F6FAF7; border: 1px solid #E2EEE9; border-radius: 11px; padding: 13px 14px; margin: 10px 0 0; } .nosb-present__label { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: #7A8A94; margin-bottom: 7px; } .nosb-present__row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .nosb-present__row:last-child { margin-bottom: 0; } .nosb-present__ic { color: #238470; display: flex; } .nosb-present__ic i { font-size: 16px; } .nosb-present__txt { font-family: 'Poppins', sans-serif; font-size: 13px; color: #0D141A; } .nosb-present__div { height: 1px; background: #E2EEE9; margin: 11px -14px; } /* A group nested inside BRING TO THE WINDOW ("For your motorhome"). Sentence case and indented, so it reads as a subdivision of the list rather than a second list. */ .nosb-present__label--sub { text-transform: none; font-size: 11px; letter-spacing: 0.02em; color: #44515C; margin-top: 10px; margin-bottom: 5px; padding-left: 2px; } .nosb-present__row--sub { padding-left: 2px; } /* With two permits the TOTAL is the number that matters at the counter. */ .nosb-present__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #C9DED6; font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; } .nosb-present__total strong { font-size: 16px; color: #0D141A; margin-left: auto; } .nosb-present__total-note { flex: 1 0 100%; font-size: 12px; color: #7A8A94; line-height: 1.45; } .nosb-present__div + .nosb-present__label { margin-top: 0; } /* A flagged-items list nested directly inside a guideCard (e.g. the customs Declaración recommendation) instead of its own separate .nosb-present box — a hairline divider keeps it visually distinct from the paragraph above it. */ .nosb-gcard .nosb-present__label { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(13,20,26,0.08); } /* ── Entering Mexico — centered step hero ── */ .nosb-step-hero { text-align: center; cursor: pointer; padding: 2px 0 0; } .nosb-step-hero__count { display: block; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; color: #7A8A94; text-transform: uppercase; margin-bottom: 10px; } .nosb-step-hero__icon { width: 50px; height: 50px; border-radius: 50%; background: #238470; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .nosb-step-hero__icon i { font-size: 26px; color: #fff; } .nosb-step-hero__here { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 500; color: #1B6B5A; background: #E1F2EC; padding: 3px 10px; border-radius: 20px; } .nosb-step-hero__here i { font-size: 12px; } .nosb-step-hero__title { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; color: #0D141A; margin-top: 9px; line-height: 1.25; } .nosb-step-hero__lead { font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; line-height: 1.5; text-align: center; margin: 8px 0 14px; white-space: pre-line; } .nosb-step-hero__notice { font-family: 'Poppins', sans-serif; font-size: 12px; color: #7A8A94; font-style: italic; text-align: center; margin: 4px 0 13px; } .nosb-step-note { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #44515C; line-height: 1.5; text-align: center; margin: 12px 4px 0; } .nosb-gcard__note { font-family: 'Poppins', sans-serif; font-size: 12px; color: #6B665B; line-height: 1.45; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #F0F5F2; } /* ── Entering Mexico — larger intro + comfortable padding (step cards fill the section width) ── */ #nosb-section-entering_destination .nosb-section__description { font-size: 15px; line-height: 1.5; padding: 14px 18px 0; } #nosb-section-entering_destination .nosb-section__body { padding: 16px 18px 20px; } /* ── Empty state ── */ .nosb-empty { font-family: 'Poppins', sans-serif; font-size: 13px; color: #7A8A94; margin: 0; padding: 8px 0; } /* ── Desktop two-column for entering_destination ── */ @media (min-width: 900px) { .nosb-checklist .nosb-section--entering .nosb-section__body { display: block; } } /* ── Completed accordion ── */ .nosb-completed-accordion { margin-top: 8px; } .nosb-completed-accordion__toggle { background: none; border: 1px solid #D8E8E2; border-radius: 8px; padding: 10px 16px; font-family: 'Poppins', sans-serif; font-size: 13px; color: #44515C; cursor: pointer; width: 100%; text-align: left; transition: background 0.2s; display: flex; align-items: center; gap: 8px; } .nosb-completed-accordion__toggle:hover { background: #F6FAF7; } .nosb-completed-accordion--open .nosb-completed-accordion__toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; } .nosb-completed-accordion__body { border: 1px solid #D8E8E2; border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; } .nosb-completed-accordion__body .nosb-item--completed-done { border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid #F0F7F4; background: #fff; } .nosb-completed-accordion__body .nosb-item--completed-done:last-child { border-bottom: none; } /* ── Completed done item ── */ .nosb-item--completed-done { padding: 10px 14px; } .nosb-item--completed-done .nosb-item__header { gap: 10px; } .nosb-item__title--done { color: #7A8A94; text-decoration: line-through; font-size: 14px; } /* ── Crossing step cards ── */ .nosb-step-card { background: #fff; border: 1px solid #D8E8E2; border-radius: 12px; padding: 18px 20px; margin-bottom: 10px; scroll-margin-top: 148px; } .nosb-step-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .nosb-step-card__header--toggle { cursor: pointer; margin-bottom: 0; } /* ── Finish card — "You're in Mexico!" ── */ .nosb-finish { background: #fff; border: 1px solid #BFE5D6; border-radius: 14px; padding: 28px 22px; text-align: center; margin-bottom: 10px; scroll-margin-top: 148px; } /* Blocked variant: the traveler read to the end of the crossing without finishing preparation. Same shell, amber rather than teal, and no confirm button — see the comment at its render site for why the terminal action is the thing that gets gated. */ .nosb-finish--blocked { border-color: #E0BE8A; background: #FFFDF7; } .nosb-finish--blocked .nosb-finish__eyebrow { color: #C2500A; } .nosb-finish--blocked .nosb-finish__flag { opacity: 0.45; filter: grayscale(1); } .nosb-finish--blocked .nosb-gate-note__links { justify-content: center; margin-top: 14px; } .nosb-finish--blocked .nosb-gate-note__link { color: #6B3D0C; border-color: #E0BE8A; } .nosb-finish--blocked .nosb-gate-note__link:hover { background: #C2500A; border-color: #C2500A; color: #fff; } .nosb-finish__eyebrow { display: block; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #1B6B5A; margin-bottom: 12px; } .nosb-finish__flag { line-height: 0; margin-bottom: 12px; display: flex; justify-content: center; } .nosb-finish__flag svg { width: 54px; height: 54px; } .nosb-finish__title { font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 600; color: #0D141A; line-height: 1.2; } .nosb-finish__lead { font-family: 'Poppins', sans-serif; font-size: 13.5px; color: #44515C; line-height: 1.55; margin: 9px auto 0; max-width: 360px; } .nosb-finish__btn { display: block; width: 100%; margin-top: 18px; padding: 13px 16px; background: #FF6900; color: #fff; border: none; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-align: center; transition: background 0.15s; } .nosb-finish__btn:hover { background: #E55A00; } /* Demo ending. Same card as the real finish, but its CTA is an out to the questionnaire rather than a