/* ============================================================================
   us-notice.css — "Continental U.S. Residents Only", before a cart is built.

   HTML EXPERIMENT (2026-09-30), for the client to review before anything is
   carried into Odoo. Added and removed as a unit by
   scripts/us-residents-notice.py; nothing else on the site depends on it.

   One component, three uses:

     .us-badge               a small flag pill, "Continental U.S. Only" —
                             under Buy Now / Add to Cart on every product page
                             you can buy online, and under the shop heading
     .us-notice              the full notice, where the customer commits:
                             the cart, checkout and registration
     checkout                when the ship-to address is outside the area,
                             the same three signals the Odoo checkout gives

   Blue, the site's own colour for anything the customer should act on, as
   a tint rather than a fill: it has to be seen before the cart is built, but
   it is information, not an alarm. Only the checkout stop — the one place
   the customer has actually hit the limit — takes the warning colour the
   shop screens already use.

   Every selector is a class the pages do not use, and the text rules name
   the element as well, so the hero copy rules on the product pages
   (".cpe-copy p", ".phero-copy p" and friends, which set size, colour and
   centring) cannot restyle the notice sitting inside them.
   ========================================================================= */

.us-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  max-width: 540px;
  margin: 20px 0 0;
  padding: 13px 16px 13px 13px;
  border-radius: 12px;
  /* near-opaque, so it reads the same over the photograph heroes
     (the Yealink phones, the headset) as over the page background */
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--ink);
  text-align: left;
}

.us-notice .us-notice-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.us-notice .us-notice-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.us-notice p.us-notice-title {
  margin: 4px 0 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--ink);
  text-align: left;
}

.us-notice p.us-notice-text {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: left;
}

/* The phone and headset heroes centre their copy and buttons. */
.us-notice.is-center {
  margin-left: auto;
  margin-right: auto;
}

/* In a heading block (cart, checkout, registration) it sits under the
   heading and its lead, a little further off than under a button row. */
.us-notice.is-lead {
  max-width: 640px;
  margin-top: 18px;
}

/* ---- the badge: product pages and the shop listing -----------------------
   Recognised at a glance rather than read: the flag says where, the three
   words say what, and the pill shape reads as a property of the product —
   like a price tag or a chip — not as a warning about it. Same blue tint as
   the full notice, so the two are visibly the same message.

   The flag is drawn, not an emoji: "🇺🇸" renders as the letters "US" on
   Windows. 19 x 13 is the real 1.9:1 flag with each of the 13 stripes on a
   whole pixel, so it stays crisp at 1x rather than turning pink.

   The full sentence rides along as the title (a hover tooltip) and as
   visually-hidden text, so a screen reader hears the whole rule, not a
   fragment. A <div>, not a <p>: the hero copy columns restyle their own
   paragraphs. */
div.us-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 6px 13px 6px 9px;
  border-radius: 40px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}

div.us-badge .us-flag {
  flex: none;
  display: block;
  width: 19px;
  height: 13px;
}

div.us-badge .us-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the phone hero that centres its buttons (T85W) centres this too */
div.us-badge.is-center {
  margin-left: auto;
  margin-right: auto;
}

/* under the shop heading it sits a little closer, as the heading's own tag */
div.us-badge.is-lead {
  margin-top: 12px;
}

/* ---- checkout: an address outside the area ----------------------------
   Exactly what the Odoo checkout does, so the two read the same: each
   shipping option's price becomes "Not available", the client's own sentence
   goes at the foot of the Shipping method step, and Place Order is disabled.
   These two rules are odoo/addons/hbe_product/static/src/css/checkout.css,
   copied verbatim — the static checkout has no equivalent of its own. */
.opt .amt.amt-pending {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-faint);
}

.buybtn.is-disabled, .buybtn:disabled { opacity: .45; pointer-events: none; }

@media (max-width: 560px) {
  .us-notice {
    padding: 12px 13px 12px 11px;
    gap: 10px;
  }

  .us-notice p.us-notice-title {
    font-size: 14px;
  }
}

/* ---- compact: a line above a form step ---------------------------------
   The full .us-notice is sized for the top of the cart and the checkout,
   where it is the only thing on the screen. Above "Your details" on the
   Sales Request form it read as a second section rather than a note about
   the next one: 640px wide against a 1010px form, 96px tall, its own blue
   tint and a filled icon circle, none of which the .qs sections around it
   use.

   This is the same message at the weight of a caption. It takes the form's
   own surface, --line border and 12px radius, so it sits in the column as
   one of its parts; the only colour is a 3px blue edge, which marks it as
   information without tinting the whole card. Both sentences stay, set as
   one wrapping line - the title in --ink, the explanation in --ink-soft -
   so it is about 44px tall on a desktop instead of 96.

   max-width: none so it lines up with the form container rather than
   stopping short of it. */
.us-notice.is-compact {
  align-items: flex-start;
  gap: 9px;
  max-width: none;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--blue);
  color: var(--ink);
}

/* The outline mark the site already uses for a quiet note, not the filled
   disc the full notice carries - at this size a 30px disc is the loudest
   thing in the column. */
.us-notice.is-compact .us-note-ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.us-notice.is-compact p.us-note-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: left;
}

.us-notice.is-compact p.us-note-line b {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}

@media (max-width: 560px) {
  .us-notice.is-compact {
    gap: 8px;
    padding: 9px 12px;
  }

  .us-notice.is-compact p.us-note-line {
    font-size: 12.5px;
  }
}