/* /livrabilitate/ · page-only layout on the violet system, scoped to .page-livrabilitate, tokens
   only. Shared components (.phero, .dc-*, .card, .ico, .figure, .stage, .frame, .crop) come
   from site.css; domain-check.js owns the .dc-* result markup (unchanged).
   1. Hero: the big input on the gradient band, the result panel rising out of it.
   2. Result states: every state is an icon plus its word (never colour alone); pending rows
      spin while a check runs (pages/livrabilitate.js adds them).
   3. Ce facem noi: five services, then the real figure and the offer on a flat violet card.
   4. The module's screens: a stage with two tabs; phones get a legible window of each. */

/* 1. Hero ---------------------------------------------------------------------------------- */
.page-livrabilitate .lv-form { margin-top: clamp(28px, 2.6vw, 40px); max-width: 38rem; }
.page-livrabilitate .lv-form .field__label { display: block; color: #fff; }
/* The hint sits under the label, high on the band where white text is always AA; the
   white pill (globe, field, button) closes the copy column */
.page-livrabilitate .lv-form .dc-form__hint { margin-top: 4px; color: #fff; }
@media (max-width: 759.98px) {
  .page-livrabilitate .lv-form .dc-form__hint { max-width: 20em; text-wrap: balance; }
}
.page-livrabilitate .lv-form .dc-form__row {
  position: relative;
  margin-top: 14px;
  padding: 8px;
  box-shadow: 0 1px 2px rgb(20 13 51 / .22), 0 26px 50px -22px rgb(20 13 51 / .7);
}
.page-livrabilitate .lv-form .dc-form__row:focus-within {
  box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 4px rgb(255 255 255 / .38), 0 26px 50px -22px rgb(20 13 51 / .7);
}
.page-livrabilitate .lv-form .dc-form__row:has(.input[aria-invalid="true"]) {
  box-shadow: inset 0 0 0 2px var(--bad), 0 0 0 4px rgb(255 255 255 / .38), 0 26px 50px -22px rgb(20 13 51 / .7);
}
.page-livrabilitate .lv-form .input { min-height: 56px; padding-left: 46px; font-size: 1.125rem; }
.page-livrabilitate .lv-form__icon {
  position: absolute; left: 22px; top: 25px;
  width: 22px; height: 22px;
  fill: none; stroke: var(--slate); stroke-width: 1.5;
  pointer-events: none;
}

/* The result panel: a white tool card, the key of the states on top */
.page-livrabilitate .lv-panel {
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2.4vw, 32px) clamp(14px, 1.6vw, 22px);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 4px rgb(42 27 110 / .06), 0 50px 90px -44px rgb(42 27 110 / .6);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.page-livrabilitate .lv-key {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 0 2px 16px;
  border-bottom: 1px solid var(--line);
}
.page-livrabilitate .lv-key__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 620; font-stretch: var(--wd-ui); line-height: 1.4;
  color: var(--ink-2);
}
.page-livrabilitate .lv-key__item::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--st-ico) center / 11px 11px no-repeat, var(--st-bg);
}
/* Phones: the key stays on one line */
@media (max-width: 759.98px) {
  .page-livrabilitate .lv-key { justify-content: space-between; gap: 8px 10px; }
  .page-livrabilitate .lv-key__item { gap: 6px; font-size: .75rem; }
  .page-livrabilitate .lv-key__item::before { width: 16px; height: 16px; background-size: 10px 10px, auto; }
}
.page-livrabilitate .lv-panel .dc-out { margin-top: 8px; }
.page-livrabilitate .lv-panel .dc-result { padding-top: 10px; }

/* The panel already hangs into the lavender tail: a shorter tail keeps the next section close */
.page-livrabilitate .lv-hero { padding-bottom: clamp(48px, 4vw + 24px, 84px); }

/* Phones and tablets: the stacked hero (site.css); the panel keeps a readable width */
@media (max-width: 1099.98px) {
  .page-livrabilitate .lv-hero__media { max-width: 46rem; }
}
/* Large screens: the panel's top sits level with the input and stays there; a longer result
   only grows the panel downwards (the band is sized by the copy alone). */
@media (min-width: 1100px) {
  .page-livrabilitate .lv-hero {
    --lift: calc(var(--skew) + 120px);
    grid-template-rows: [band-start copy-start] auto [copy-end band-end rest-start] auto [rest-end];
  }
  .page-livrabilitate .lv-hero .phero__media {
    grid-row: rest-start / rest-end;
    align-self: start;
    margin-top: calc(-1 * var(--lift));
  }
}

/* 2. Result states: icon + word. Ink glyphs on mint and sun, white on red (all >= 3:1). ---- */
.page-livrabilitate :is(.dc-row--ok, .dc-result--ok, .lv-key__item--ok) {
  --st-bg: var(--mint); --st-ring: rgb(47 211 154 / .2);
  --st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316121F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4 6.6 11.3 12.4 5'/%3E%3C/svg%3E");
}
.page-livrabilitate :is(.dc-row--warn, .dc-result--warn, .lv-key__item--warn) {
  --st-bg: var(--sun); --st-ring: rgb(255 194 61 / .26);
  --st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4v5.6' stroke='%2316121F' stroke-width='2.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12.3' r='1.4' fill='%2316121F'/%3E%3C/svg%3E");
}
.page-livrabilitate :is(.dc-row--bad, .dc-result--bad, .dc-error, .lv-key__item--bad) {
  --st-bg: #FF5A52; --st-ring: rgb(255 90 82 / .18);
  --st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E");
}
.page-livrabilitate .dc-row--info {
  --st-bg: var(--violet-200); --st-ring: rgb(107 78 255 / .1);
  --st-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4.2' r='1.4' fill='%234930D6'/%3E%3Cpath d='M8 7.4v5.2' stroke='%234930D6' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.page-livrabilitate .dc-row { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 14px; padding-inline: 2px; }
.page-livrabilitate .dc-dot {
  width: 24px; height: 24px; margin: 0;
  background: var(--st-ico) center / 14px 14px no-repeat, var(--st-bg);
  box-shadow: 0 0 0 4px var(--st-ring);
}
.page-livrabilitate .dc-state { font-size: .8125rem; padding: 2px 10px 3px; }
/* Not checked yet: an empty ring */
.page-livrabilitate .dc-row--idle .dc-dot { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-field); }
/* Checking: the ring spins (the loading line above the rows is what screen readers hear) */
.page-livrabilitate .lv-row--pending .dc-dot {
  background: none; box-shadow: none;
  border: 2.5px solid var(--violet-200); border-top-color: var(--violet);
  animation: dc-spin .8s linear infinite;
}
.page-livrabilitate .lv-row--pending .dc-name { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .page-livrabilitate .lv-row--pending .dc-dot { animation-duration: 2.4s; }
}

/* The verdict, the loading line and the error share one box with the state's icon */
.page-livrabilitate :is(.dc-verdict, .dc-loading, .dc-error) {
  position: relative;
  min-height: 54px; margin-bottom: 8px;
  padding: 14px 16px 14px 52px;
  border-radius: 18px;
  font-size: 1rem; line-height: 1.5;
}
.page-livrabilitate :is(.dc-verdict, .dc-error)::before {
  content: ""; position: absolute; left: 14px; top: 13px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--st-ico) center / 15px 15px no-repeat, var(--st-bg);
}
.page-livrabilitate .dc-loading { background: var(--violet-50); color: var(--ink-2); font-weight: 560; }
.page-livrabilitate .dc-loading::before { position: absolute; left: 19px; top: 17px; width: 18px; height: 18px; }
.page-livrabilitate .dc-out:has(.lv-pending) .dc-loading::before { display: none; }
.page-livrabilitate .dc-out:has(.lv-pending) .dc-loading { padding-left: 18px; }
.page-livrabilitate .dc-error { background: #FFEDEB; color: var(--bad); font-weight: 600; }
.page-livrabilitate :is(.dc-verdict, .dc-error):focus-visible { outline-offset: 3px; }
/* The next step after a weak result: one lavender row, the whole row is the link */
.page-livrabilitate .dc-next { margin-top: 14px; }
.page-livrabilitate .dc-next a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 16px 12px 18px;
  border-radius: 16px;
  background: var(--violet-50); box-shadow: inset 0 0 0 1px var(--violet-100);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.page-livrabilitate .dc-next a::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M8.8 4.3 12.5 8l-3.7 3.7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.page-livrabilitate .dc-next a:hover { background-color: var(--violet-100); }
.page-livrabilitate .dc-next a:focus-visible { border-radius: 16px; }

/* 3. Ce facem noi ---------------------------------------------------------------------------- */
.page-livrabilitate .lv-what__grid { display: grid; gap: clamp(28px, 3vw, 44px); }
.page-livrabilitate .lv-what__head .lede { margin-top: 18px; }
/* White cards with the violet depth: they hold on white and on the lavender the page turns to */
.page-livrabilitate .lv-list { display: grid; gap: 12px; }
.page-livrabilitate .lv-item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center;
  column-gap: 20px; row-gap: 3px;
  padding: 20px 24px;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgb(42 27 110 / .05), 0 18px 36px -24px rgb(42 27 110 / .32);
}
.page-livrabilitate .lv-item > .ico { grid-row: 1 / span 2; margin: 0; }
.page-livrabilitate .lv-item .card__title { align-self: end; }
.page-livrabilitate .lv-item .card__text { align-self: start; margin-top: 0; color: var(--slate); }

/* The offer: the real figure (static) and the question, on flat violet */
.page-livrabilitate .lv-offer {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0;
  padding: clamp(26px, 2.8vw, 40px);
  border-radius: var(--r-xl);
  background: var(--violet);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 2px 4px rgb(42 27 110 / .12), 0 34px 64px -30px rgb(73 48 214 / .8);
  --fg: #fff; --fg-2: #fff; --fg-line: rgb(255 255 255 / .3); --tick: #fff;
}
.page-livrabilitate .lv-offer__figure { border-top: 0; }
.page-livrabilitate .lv-offer__figure::before { top: 0; border-radius: 3px; }
/* The figure sizes to its content inside the flex card, so it opts out of the shared container sizing
   (inline-size containment would collapse it to zero width); the clamp alone fits at every width. */
.page-livrabilitate .lv-offer__figure { container-type: normal; }
.page-livrabilitate .lv-offer .figure__num { font-size: clamp(3rem, 1.75rem + 3vw, 4.75rem); }
.page-livrabilitate .lv-offer .figure__label { max-width: 24em; font-size: 1.0625rem; }
.page-livrabilitate .lv-offer__cta { margin-top: clamp(28px, 3vw, 44px); }
.page-livrabilitate .lv-offer__ask {
  font-size: var(--fs-h3); font-weight: 700; font-stretch: var(--wd-h3);
  letter-spacing: -.012em; line-height: 1.2;
}
.page-livrabilitate .lv-offer .btn { margin-top: 16px; }
.page-livrabilitate .lv-offer :focus-visible { outline-color: #fff; }
.page-livrabilitate .lv-offer .btn:focus-visible { box-shadow: 0 0 0 3px var(--violet), 0 0 0 5.5px #fff; }


/* Desktop: heading and offer on the left, the five services on the right */
@media (min-width: 1100px) {
  .page-livrabilitate .lv-what__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head list" "offer list";
    column-gap: clamp(48px, 5vw, 96px);
  }
  .page-livrabilitate .lv-what__head { grid-area: head; }
  .page-livrabilitate .lv-list { grid-area: list; align-self: start; }
  .page-livrabilitate .lv-offer { grid-area: offer; align-self: end; }
}
/* Tablets: the offer as one wide card, figure left, question and button right */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .page-livrabilitate .lv-offer { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .page-livrabilitate .lv-offer__cta { margin-top: 0; text-align: right; }
}
/* Phones: compact rows */
@media (max-width: 759.98px) {
  .page-livrabilitate .lv-item { column-gap: 16px; padding: 18px; }
  .page-livrabilitate .lv-item .card__title { font-size: 1.125rem; }
  .page-livrabilitate .lv-item .card__text { font-size: .9375rem; }
  .page-livrabilitate .lv-offer__cta { align-self: stretch; }
  .page-livrabilitate .lv-offer .btn { width: 100%; }
}

/* 4. The module's screens ---------------------------------------------------------------- */
.page-livrabilitate .section-head + .lv-stage-wrap > .lv-stage { margin-top: 0; }
@media (min-width: 900px) {
  .page-livrabilitate .lv-stage .ruler-tabs { width: fit-content; grid-auto-columns: minmax(0, 320px); }
}
/* Without JavaScript the tabs cannot switch: show both screens, one under the other */
html:not(.js) .page-livrabilitate .lv-stage :is(.ruler-tabs, .ruler-tabs__caption) { display: none; }
html:not(.js) .page-livrabilitate .lv-stage .tab-panels--stack { display: block; margin-top: 0; }
html:not(.js) .page-livrabilitate .lv-stage .tab-panel { opacity: 1; visibility: visible; content-visibility: visible; }
html:not(.js) .page-livrabilitate .lv-stage .tab-panel + .tab-panel { margin-top: var(--s7); }
html:not(.js) .page-livrabilitate .lv-stage { padding-top: clamp(16px, 2.4vw, 32px); }