/*
 * The gateway chat in orbi.cz's own clothes: the same card the /radce/ articles show
 * (orbi-marketing-web, scss/components/sections/ai-chat.scss) — a dark-blue gradient card,
 * white assistant bubbles with the Orbi mark beside them, pale pill user messages, a translucent
 * pill composer, Fira Sans. The /embed/ document fills its iframe with the card so the homepage
 * launcher and the frame read as one surface.
 *
 * Only looks change here. The Art. 50 banner stays a banner above the transcript, the secure
 * form stays a form, the consents stay three checkboxes; nothing in this file is conditional on
 * which partner embeds the page.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/subset-FiraSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/subset-FiraSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/subset-FiraSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/subset-FiraSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* orbi-marketing-web tokens */
  --night: #111938;
  --card-gradient: linear-gradient(159.65deg, #2b467b 15.16%, #627fad 88.25%);
  --mark-gradient: linear-gradient(165.51deg, #273252 30.26%, #0e1a3a 98.31%);
  --cta-gradient: linear-gradient(262.81deg, #f3a344 9.98%, #eb7724 96.23%);
  --cta-gradient-hover: linear-gradient(262.81deg, #ffb054 9.98%, #fe9143 96.23%);
  --ink: #001d5b;
  --ink-soft: #4a5864;
  --muted: #7f909e;
  --moon: #a0a8c7;
  --mint: #18c3c3;
  --orange: #f3a344;
  --purple: #6a41c1;
  --pale: #f1f5f8;
  --light: #e1e8ff;
  --line: #dfe6ef;
  --glass: rgba(255, 255, 255, 0.18);
  --glass-strong: rgba(255, 255, 255, 0.28);
  --glass-line: rgba(255, 255, 255, 0.24);
  --ok-bg: #e6f7f0;
  --ok-ink: #0d6b4e;
  --err-bg: #fdecec;
  --err-ink: #a12626;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--night);
  color: var(--ink);
}

/* ---- standalone chrome (chat.orbi.cz) ---------------------------------------------------- */

.oc-header {
  padding: 18px 20px;
  color: #fff;
}

.oc-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 830px;
  margin: 0 auto;
}

.oc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mark-gradient);
  border: 1px solid var(--glass-line);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oc-header-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oc-kicker {
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mint);
  font-weight: 500;
}

.oc-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.oc-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 8px 12px 10px;
}

.oc-card {
  position: relative;
  width: 100%;
  max-width: 830px;
  min-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  background: var(--card-gradient);
  border-radius: 25px;
  overflow: hidden;
  color: #fff;
}

/* ---- toolbar: "Nová konverzace", away from the send button and confirmed ----------------- */

.oc-toolbar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px 0;
}

.oc-toolbar[hidden],
.oc-toolbar [hidden] {
  display: none;
}

.oc-reset-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 6px;
  font-size: 14px;
  color: #fff;
}

.oc-reset-confirm > span {
  flex: 1 1 100%;
  padding: 0 6px;
  text-align: right;
}

.oc-toolbar .oc-toolbar-btn {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
}

.oc-toolbar .oc-toolbar-btn--danger {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}

/* ---- the Art. 50 banner ------------------------------------------------------------------ */

.oc-disclosure {
  flex: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 16px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}

.oc-disclosure[hidden] {
  display: none;
}

.oc-disclosure-badge {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #fff;
  color: var(--night);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---- intro ------------------------------------------------------------------------------- */

.oc-intro {
  padding: 24px 20px 8px;
}

.oc-intro[hidden] {
  display: none;
}

.oc-intro h1 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.oc-intro p {
  margin: 0 0 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}

.oc-intro-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.oc-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}

.oc-chip:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ---- transcript -------------------------------------------------------------------------- */

.oc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.oc-messages:empty {
  padding: 0;
}

.oc-msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.oc-msg--user {
  justify-content: flex-end;
}

/* The Orbi mark beside every assistant bubble, as on /radce/. The markup has no avatar element
   and this is decoration, so it is a CSS pseudo-element with the mark inlined (img-src allows
   data:). */
.oc-msg--assistant::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: #273252;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M8.08 0C3.617 0 0 3.617 0 8.08c0 4.462 3.617 8.08 8.08 8.08 4.463 0 8.08-3.617 8.08-8.08C16.159 3.617 12.542 0 8.08 0Zm0 4.076a4.005 4.005 0 1 1 0 8.009 4.005 4.005 0 0 1 0-8.01Z' fill='%23fff'/%3E%3Cpath d='M15.215 4.82a2.636 2.636 0 0 0 .718-3.654A2.629 2.629 0 0 0 13.744 0c-.505 0-1.015.145-1.467.447a2.636 2.636 0 0 0-.718 3.654 2.63 2.63 0 0 0 3.656.719Z' fill='%23E47C52'/%3E%3C/svg%3E"),
    var(--mark-gradient);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px, cover;
  border: 1px solid var(--glass-line);
}

.oc-bubble {
  max-width: 86%;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  background: #fff;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
}

.oc-bubble--rendered {
  white-space: normal;
}

.oc-msg--user .oc-bubble {
  max-width: 80%;
  background: var(--pale);
  color: var(--ink);
  border-radius: 24px;
  padding: 12px 18px;
}

.oc-msg--assistant .oc-bubble {
  border-top-left-radius: 4px;
}

.oc-bubble p {
  margin: 0 0 8px;
}

.oc-bubble p:last-child {
  margin-bottom: 0;
}

.oc-bubble strong {
  font-weight: 700;
}

.oc-bubble ul,
.oc-bubble ol {
  margin: 4px 0 8px 18px;
  padding: 0;
}

.oc-bubble li {
  margin: 3px 0;
}

.oc-bubble code {
  font-size: 13px;
  background: var(--pale);
  padding: 1px 5px;
  border-radius: 4px;
}

.oc-bubble a {
  color: var(--purple);
  font-weight: 600;
}

.oc-note {
  align-self: center;
  max-width: 92%;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--glass);
  color: #fff;
  border: 1px solid var(--glass-line);
}

.oc-note--ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border-color: transparent;
}

.oc-note--error {
  background: var(--err-bg);
  color: var(--err-ink);
  border-color: transparent;
  border-radius: 14px;
}

.oc-note .oc-btn {
  margin-left: 8px;
  padding: 5px 12px;
  font-size: 12px;
}

.oc-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.oc-activity[hidden] {
  display: none;
}

.oc-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: oc-spin 0.7s linear infinite;
}

@keyframes oc-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---- composer ---------------------------------------------------------------------------- */

.oc-composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* The label stays for assistive tech; the pill's placeholder does its visual job. */
.oc-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 16px, not less: iOS Safari zooms the page into any smaller field on focus and leaves it panned
   sideways. */
.oc-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  max-height: 160px;
  resize: none;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  padding: 12px 18px;
  background: var(--glass);
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  overflow-y: hidden;
  font-family: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.oc-input::placeholder {
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-input:focus {
  outline: none;
  background: var(--glass-strong);
  border-color: rgba(255, 255, 255, 0.55);
}

.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.06s ease, background-color 0.12s ease;
}

.oc-btn--primary {
  background: var(--cta-gradient);
  color: #fff;
}

.oc-btn--primary:hover {
  background: var(--cta-gradient-hover);
}

.oc-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.oc-btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 10px;
  font-weight: 500;
}

.oc-btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* The send button is the paper plane in an orange disc, as on the homepage card; its text keeps
   the accessible name. */
#oc-send {
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 0;
  flex: 0 0 auto;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"),
    var(--cta-gradient);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px, cover;
}

#oc-send:hover {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"),
    var(--cta-gradient-hover);
}

.oc-btn--busy {
  position: relative;
  pointer-events: none;
  padding-right: 34px;
}

.oc-btn--busy::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: #fff;
  animation: oc-spin 0.6s linear infinite;
}

#oc-send.oc-btn--busy {
  padding-right: 0;
  background-image: var(--cta-gradient);
}

#oc-send.oc-btn--busy::after {
  right: auto;
}

/* ---- cards the assistant opens: the secure form, the e-mail card, offers, consents --------- */

.oc-panel {
  align-self: stretch;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  padding: 18px;
}

.oc-panel h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.oc-panel-subhead {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.oc-panel-lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.oc-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.oc-grid {
  display: grid;
  gap: 10px;
}

@media (min-width: 560px) {
  .oc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.oc-field {
  margin-bottom: 10px;
}

.oc-field[hidden] {
  display: none;
}

.oc-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.oc-field input[type="text"],
.oc-field input[type="date"],
.oc-field input[type="email"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--pale);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.oc-field input:focus {
  background: #fff;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(106, 65, 193, 0.18);
}

.oc-field input.oc-invalid {
  border-color: #c62828;
  background: #fff7f7;
}

.oc-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.oc-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--purple);
}

.oc-traveller {
  margin: 0 0 10px;
  padding: 12px 12px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.oc-field-error {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #c62828;
}

.oc-field-error[hidden] {
  display: none;
}

/* "Held until the assistant finishes" is a status, not a mistake — same line, calm colour. */
.oc-field-error--notice {
  color: var(--muted);
}

.oc-btn--link {
  background: transparent;
  color: var(--purple);
  padding: 6px 0;
  font-weight: 500;
}

.oc-panel .oc-btn:not(.oc-btn--primary):not(.oc-btn--link) {
  background: var(--pale);
  color: var(--ink);
}

.oc-consent-premium {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--light);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}

.oc-consent-premium[hidden] {
  display: none;
}

.oc-consent-premium strong {
  font-size: 22px;
  color: var(--night);
  white-space: nowrap;
}

.oc-docs {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.oc-docs li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--pale);
  font-size: 13px;
}

.oc-docs a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}

.oc-docs a:hover {
  text-decoration: underline;
}

.oc-docs-type {
  color: var(--muted);
  white-space: nowrap;
}

.oc-broker {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.oc-broker[hidden] {
  display: none;
}

.oc-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
}

.oc-consent-item:hover {
  background: var(--pale);
}

.oc-consent-item input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--purple);
}

.oc-consent-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.oc-footnote {
  max-width: 830px;
  margin: 10px auto 24px;
  padding: 0 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--moon);
}

@media (max-width: 640px) {
  .oc-main {
    padding: 0;
  }

  .oc-field input[type="text"],
  .oc-field input[type="date"],
  .oc-field input[type="email"] {
    font-size: 16px;
  }

  .oc-disclosure {
    margin: 10px 12px 0;
    padding: 8px 10px;
    font-size: 12px;
  }

  .oc-card {
    border-radius: 0;
    min-height: calc(100vh - 66px);
  }

  .oc-bubble {
    max-width: 92%;
  }

  .oc-msg--user .oc-bubble {
    max-width: 88%;
  }

  .oc-footnote {
    margin: 8px auto 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* P5.1 — the same page inside a partner's iframe.
 *
 * Purely a layout change: the frame supplies its own page, so the standalone page's outer chrome
 * (the Orbi header bar, the footnote) is repetition, and 100vh means the iframe's height rather
 * than the screen's. The card IS the frame here — gradient on the body, no radius of its own —
 * so the embedding page draws the corners. Everything the backend guarantees — the Art. 50
 * banner, the secure form, the three consent checkboxes — is untouched, because none of it is
 * decoration. Nothing here is conditional on WHICH partner: the page is never told.
 */
:root[data-embed] body {
  min-height: 100%;
  background: var(--card-gradient);
  background-attachment: fixed;
}

:root[data-embed] .oc-header,
:root[data-embed] .oc-footnote {
  display: none;
}

:root[data-embed] .oc-main {
  padding: 0;
}

:root[data-embed] .oc-card {
  max-width: none;
  border-radius: 0;
  background: transparent;
}

/* The frame is the window: the card fills it exactly and only the transcript scrolls, so the
   composer is always at the bottom and a swipe in the conversation never chains into the page
   that embeds it. Before this the whole frame document scrolled and the composer went with it. */
:root[data-embed],
:root[data-embed] body {
  height: 100%;
  overflow: hidden;
}

:root[data-embed] .oc-main {
  min-height: 0;
}

:root[data-embed] .oc-card {
  height: 100%;
  min-height: 0;
}

:root[data-embed] .oc-intro {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

:root[data-embed] .oc-messages {
  min-height: 0;
  overscroll-behavior: contain;
}

:root[data-embed] .oc-intro h1 {
  font-size: 20px;
}

/* P8/QA 2026-09-10: what the visitor is agreeing to cover, above the checkboxes. */
.oc-coverage {
  margin: 14px 0 0;
}

.oc-coverage-limit {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 600;
}

.oc-coverage-text {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  white-space: pre-line;
}

.oc-coverage-items {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- P9: the offer cards ---------------------------------------------------------------------
   A horizontal scroll-snap strip: a swipe on a phone, arrows or the keyboard on a desktop. No
   library — the browser does the snapping, which is also what keeps it working when JS for the
   arrows is the only thing that fails. */
.oc-panel--offers {
  padding-bottom: 12px;
}

.oc-offers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.oc-offers-count {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.oc-offers-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.oc-offers-strip:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 10px;
}

.oc-offer {
  flex: 0 0 clamp(210px, 74%, 260px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--pale);
}

.oc-offer-badge {
  align-self: flex-start;
  margin: 0 0 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--cta-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.oc-offer-partial {
  align-self: flex-start;
  margin: 0 0 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--light);
  color: var(--night);
  font-size: 11px;
  font-weight: 600;
}

.oc-offer--partial {
  border-style: dashed;
}

.oc-offer-shortfalls {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #b45309;
}

.oc-offer-insurer {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.oc-offer-tariff {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.oc-offer-premium {
  margin: 6px 0 0;
  font-size: 16px;
}

.oc-offer-premium span {
  font-size: 12.5px;
  color: var(--muted);
}

.oc-offer-limit {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.oc-offer-notes {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.oc-offer-pick {
  margin-top: auto;
  align-self: stretch;
}

.oc-offer--selected {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple) inset;
  background: #fff;
}

.oc-offers-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.oc-offers-arrow {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.oc-offers-arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

.oc-offers-dots {
  font-size: 12px;
  color: var(--muted);
  min-width: 48px;
  text-align: center;
}

.oc-offers-unavailable {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}