/* Brand rule for every template (owner, 2026-10-18): Buy and other key buttons, and the search
   entry buttons, use the exact colour of the logo's "roo". Loaded last, after any theme layer.
   --roo-ink keeps text readable: ink on the bright roo colours, white on the dark ones (all >= 4.5:1). */
:root { --roo: var(--coral); --roo-ink: var(--ocean); }
:root:is([data-palette="retro"], [data-palette="lagoon"]) { --roo: var(--coral-dark); --roo-ink: #fff; }
:root[data-palette="quiet"] { --roo: var(--accent-dark); --roo-ink: #fff; }
:root[data-template="neo"] { --roo: var(--coral); --roo-ink: var(--ocean); }

:root[data-template] .site-logo strong { color: var(--roo); }
:root[data-template] :is(.button--buy, .button--primary, .plan-card__buy, .hero-search button, .site-search button, .inline-check button) {
  background: var(--roo);
  color: var(--roo-ink);
}
:root[data-template] :is(.button--buy, .button--primary, .hero-search button, .site-search button, .inline-check button):hover,
:root[data-template] .plan-card:has(.plan-card__link:hover) .plan-card__buy {
  background: var(--roo);
  color: var(--roo-ink);
  filter: brightness(0.92);
}

/* Shared order workspace: every theme uses the same markup and QR dimensions. */
.shell.narrow.order { max-width: 1000px; }
.order .order__item { min-width: 0; }
.order .order__item h2 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.order__esim { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; }
.order__esim--no-qr { grid-template-columns: minmax(0, 1fr); }
.order__qr { width: 240px; padding: 0; background: #fff; border-radius: var(--r-md); }
.order__qr img { display: block; width: 240px; height: 240px; max-width: none; object-fit: contain; }
.order__details { min-width: 0; }
.order__details .usage { margin-top: 16px; }
.order__details h3 { margin: 0 0 8px; font-size: var(--fs-md); }
.order__details dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.order__details code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.order__install { min-height: 44px; max-width: 100%; white-space: normal; }
.order__manual { margin-block: 16px; border-block: 1px solid var(--line); }
.order__manual summary, .order-support summary { padding-block: 12px; min-height: 44px; cursor: pointer; font-weight: 600; }
.order__manual > code { display: block; padding-bottom: 16px; font-size: var(--fs-sm); }
.order-support { margin-block: 24px; padding: 24px; min-width: 0; scroll-margin-top: 120px; overflow-wrap: anywhere; }
.order-support h2 { margin: 0 0 8px; font-size: var(--fs-xl); }
.order-support h3 { font-size: var(--fs-md); }
.order-support__header { margin-bottom: 16px; }
.order-support__messages { display: grid; gap: 12px; margin-block: 16px; padding: 0; list-style: none; }
.order-support__message { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
/* Chat bubbles: the customer on the left; Telroo support and system notes share one right-hand
   bubble (only the author line tells them apart). */
.order-support__message:is(.order-support__message--customer, .order-support__message--team, .order-support__message--system) { width: fit-content; max-width: min(85%, 560px); padding: 12px 16px; border-radius: 18px; }
.order-support__message--customer { justify-self: start; border-end-start-radius: 4px; }
.order-support__message:is(.order-support__message--team, .order-support__message--system) { justify-self: end; border: 1px solid var(--roo); border-end-end-radius: 4px; background: var(--seafoam-soft); font-size: inherit; text-align: end; }
.order-support__message:is(.order-support__message--team, .order-support__message--system) .order-support__meta { justify-content: flex-end; }
.order-support__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: var(--fs-sm); color: var(--ocean-soft); }
.order-support__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.order-support__body :first-child { margin-top: 0; }
.order-support__body :last-child { margin-bottom: 0; }
.order-support__history { border-block: 1px solid var(--line); margin-block: 16px; }
.order-support__form { margin-top: 16px; }
.order-support__thread { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.order-support__thread > h3 { margin: 0 0 4px; }
.order-support__thread > p { margin: 0; font-size: var(--fs-sm); color: var(--ocean-soft); }
.order-support__fields { display: grid; gap: 16px; }
.order-support :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { max-width: 100%; min-width: 0; }
.order-support textarea { min-height: 128px; resize: vertical; }
.order-support .button { min-height: 44px; white-space: normal; }
.order-support__timeline { margin-block: 16px; list-style: none; padding-inline-start: 24px; border-inline-start: 2px solid var(--line); font-size: var(--fs-sm); color: var(--ocean-soft); }
.order-support__timeline li { padding-block: 4px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .order .order__item, .order-support { padding: 16px; }
  .order__esim { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .order__qr { justify-self: center; }
  .order__details dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .order__details dd { margin-bottom: 8px; }
}
/* The inline order support replaces the floating contact shortcut on this page,
   keeping the full QR clear for scanning at every scroll position. */
body:has(.order) .support-widget { display: none; }
.order__manual::details-content, .order-support details::details-content { transition: none; }
.order-support__fields label { display: grid; gap: 8px; font-weight: 600; }
.order-support :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: 44px; padding: 12px 16px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--paper); color: var(--ocean); font: inherit; }
.order-support__form label:has(> input[type="checkbox"][name="confirmed"]) { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 44px; padding-block: 12px; line-height: 1.5; cursor: pointer; }
.order-support__form input[type="checkbox"][name="confirmed"] { appearance: auto; width: 20px; height: 20px; min-width: 20px; min-height: 20px; margin: 3px 0 0; padding: 0; accent-color: var(--roo); cursor: pointer; }
.order-support__form input[type="checkbox"][name="confirmed"]:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.order-support__fields .button { justify-self: start; }
/* Order support: one form. Send message is the key action (roo); the replacement
   request sits beside it as an outlined secondary and opens its own short panel. */
.order-support__form > label[for="support-message"] { display: grid; gap: 8px; margin-top: 16px; font-weight: 600; }
.order-support__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.order-support__replace-toggle[hidden] { display: none; }
.order-support__replace-toggle { background: var(--paper); color: var(--ocean); border: 2px solid var(--roo); }
.order-support__replace-toggle:hover, .order-support__replace-toggle[aria-expanded="true"] { background: var(--sand); color: var(--ocean); }
.order-support__replace:not([hidden]) { display: grid; gap: 16px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sand); }
.order-support__replace p { margin: 0; }
.order-support__replace .button { justify-self: start; }
@media (max-width: 560px) {
  .order-support__actions { flex-direction: column; }
  .order-support__actions .button, .order-support__replace .button { width: 100%; justify-self: stretch; }
}