/* LastLonger order page (/zamowienie/) and thank-you page (/dziekujemy/).
   Values from frontend-spec 5.2 and 5.3 (resolved CSS) with the theme-architecture 5.6 overrides #1 (containers),
   #5 (submit states), #10 (thank-you and checkout additions), #13 (consent links) and #16 (compact one-column order page).
   Not here: .ll-btn* and .ll-btn-dark* (components.css), @keyframes llSpin (base.css), .ll-hp (base.css). */

/* ------------------------------------------------------------------ Order page (frontend-spec 5.2) */

/* Horizontal gutter and max-width come from .ll-container.ll-container--order on .ll-order__wrap (5.6 #1).
   Below 1024 px (one column) the page is compact: smaller top padding and heading, the brief instead of the two
   sub-lines and of the side summary, so a 390x664 screen holds the brief, the form and the whole button. */
.ll-order { min-height: 100vh; background-color: #fff; color: var(--ll-ink); padding-top: 1rem; padding-bottom: 2rem; }
@media (min-width: 1024px) { .ll-order { padding-top: 3rem; padding-bottom: 3rem; } }
.ll-backlink { display: inline-flex; align-items: center; gap: .5rem; color: var(--ll-ink-muted);
  transition: color 150ms var(--ll-ease); margin-top: 2rem; }          /* 16px / 24px; last element, after the grid */
.ll-backlink:hover { color: var(--ll-accent); }
.ll-backlink svg { width: 1.25rem; height: 1.25rem; }
.ll-order__grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .ll-order__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ll-order__main > * + *, .ll-order__side > * + * { margin-top: 1.5rem; }
.ll-order h1 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.5rem; line-height: 2rem;
  font-weight: 600; margin-bottom: .5rem; color: var(--ll-ink); }
.ll-order__sub { display: none; color: var(--ll-ink-muted); font-size: 1.125rem; line-height: 1.75rem; margin-bottom: .25rem; }
.ll-order__sub2 { display: none; color: var(--ll-accent); font-size: .875rem; line-height: 1.25rem; font-weight: 500; }

/* Compact order brief (one column only): product, format, price and delivery above the fields. */
.ll-order__brief { padding: .75rem 1rem; background-color: var(--ll-paper-2); border: 1px solid rgba(15,27,46,.1);
  border-radius: 1rem; }
.ll-order__brief-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ll-order__brief-name { font-weight: 600; line-height: 1.375; color: var(--ll-ink); }
.ll-order__brief-name span { white-space: nowrap; }   /* never "4-" at a line end */
.ll-order__brief-meta { font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); margin-top: .125rem; }
.ll-order__brief-price { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 700; color: var(--ll-accent); white-space: nowrap; }
.ll-order__brief-note { display: flex; align-items: center; gap: .375rem; margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid rgba(15,27,46,.1); font-size: .75rem; line-height: 1rem; color: var(--ll-ink-muted); }
.ll-order__brief-note svg { width: 1rem; height: 1rem; color: var(--ll-accent); flex-shrink: 0; }
.ll-order__side > .ll-summary { display: none; }
.ll-order__side > .ll-summary + * { margin-top: 0; }

/* Two columns: the original heading block and the side summary; no brief. */
@media (min-width: 1024px) {
  .ll-order h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .ll-order__sub, .ll-order__sub2 { display: block; }
  .ll-order__brief { display: none; }
  .ll-order__side > .ll-summary { display: block; }
  .ll-order__side > .ll-summary + * { margin-top: 1.5rem; }
}

/* Form */
.ll-form > * + * { margin-top: 1rem; }
.ll-label { display: block; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--ll-ink); margin-bottom: .375rem; }
.ll-field { position: relative; }
.ll-field__icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem;
  color: var(--ll-ink-muted); }        /* positioned: paints above the static input even though it precedes it */
.ll-input { width: 100%; padding: .75rem 1rem .75rem 3rem; background-color: #fff; border: 1px solid rgba(15,27,46,.15);
  border-radius: .75rem; color: var(--ll-ink); transition: all 150ms var(--ll-ease); }   /* 16px/24px, 50px tall */
.ll-input::placeholder { color: rgba(71,85,105,.7); opacity: 1; }
.ll-input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--ll-accent);
  box-shadow: 0 0 0 2px rgba(31,111,80,.5); }
.ll-field__hint { font-size: .75rem; line-height: 1rem; color: var(--ll-ink-muted); margin-top: .25rem; }
.ll-consent { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.ll-consent input { margin-top: .125rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--ll-accent); cursor: pointer; }
.ll-consent span { font-size: .875rem; line-height: 1.625; color: var(--ll-ink-muted); }
.ll-consent a { color: var(--ll-accent); }
.ll-consent a:hover { text-decoration-line: underline; }
/* 5.6 #13: the original link-buttons were atomic inline-blocks, so "Politykę Prywatności" wraps as one unit. */
.ll-consent a { display: inline-block; }
.ll-alert { padding: 1rem; background-color: #FEF2F2; border: 1px solid #FCA5A5; border-radius: .75rem; color: #DC2626; }  /* 16px/24px */
/* 5.6 #10: admin-only "Brak: ..." line inside the alert (manage_options users while the shop is not ready). */
.ll-alert__admin { display: block; margin-top: .5rem; font-weight: 600; }

/* CTA block: submit, assurance lines, guarantee */
.ll-order__cta { padding-top: .25rem; }
.ll-order__cta > * + * { margin-top: .75rem; }
.ll-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.25rem 2rem;
  background-color: var(--ll-accent); color: #fff; border-radius: 9999px; font-weight: 600; font-size: 1.25rem; line-height: 1.75rem;
  box-shadow: var(--ll-shadow-cta); transition: all 200ms var(--ll-ease); }   /* height 68px */
.ll-submit:hover { background-color: var(--ll-accent-hover); transform: translateY(-0.125rem); }
.ll-submit svg { width: 1.25rem; height: 1.25rem; }
.ll-submit:disabled { opacity: .5; cursor: not-allowed; }
.ll-submit:disabled:hover { transform: translateY(0); }   /* bg still darkens on hover while disabled: original behaviour */
/* 5.6 #5: the idle/busy spans keep icon and text as direct flex items of the button; [hidden] still wins (base.css). */
.ll-submit__state { display: contents; }
.ll-order__assure { text-align: center; }
.ll-order__assure > * + * { margin-top: .375rem; }
.ll-order__assure p { font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); display: flex; align-items: center;
  justify-content: center; gap: .375rem; }
.ll-order__assure p svg { width: 1rem; height: 1rem; color: var(--ll-accent); }
/* Payment line, first under the button: a centred text block with an inline lock; on a phone it breaks after the dash. */
.ll-order__assure p.ll-order__secure { display: block; color: var(--ll-ink); font-weight: 500; padding-bottom: .125rem; }
.ll-order__assure p.ll-order__secure svg { display: inline-block; vertical-align: -.125rem; width: .875rem; height: .875rem;
  margin-right: .375rem; }
.ll-order__assure p.ll-order__secure span { white-space: nowrap; }
.ll-order__guarantee { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid rgba(31,111,80,.3);
  border-radius: .75rem; background-color: var(--ll-accent-soft); }
.ll-order__guarantee svg { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); flex-shrink: 0; margin-top: .125rem; }
.ll-order__guarantee p { font-size: .875rem; line-height: 1.625; color: var(--ll-ink-muted); }
.ll-order__guarantee p span { color: var(--ll-ink); font-weight: 500; }

/* Order summary and "Co otrzymasz:" */
.ll-summary { background-color: var(--ll-paper-2); border-radius: 1.5rem; border: 1px solid rgba(15,27,46,.1); padding: 2rem;
  box-shadow: var(--ll-shadow-soft); }
.ll-summary h3 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.5rem; line-height: 2rem; font-weight: 600;
  margin-bottom: 1.5rem; color: var(--ll-ink); }
.ll-summary h3 + div > * + * { margin-top: 1rem; }
.ll-summary__product { display: flex; align-items: flex-start; gap: 1rem; }
.ll-summary__product img { width: 4rem; height: 5rem; border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
   /* 64x80 = exactly the 4:5 ratio of the 1080x1350 PNG, so nothing is cropped */
.ll-summary__product > div { flex: 1 1 0%; }
.ll-summary__product h4 { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; margin-bottom: .25rem; color: var(--ll-ink); }
.ll-summary__product p { color: var(--ll-ink-muted); font-size: .875rem; line-height: 1.25rem; }
.ll-summary__totals { border-top: 1px solid rgba(15,27,46,.1); padding-top: 1rem; }
.ll-summary__totals > * + * { margin-top: .75rem; }
.ll-summary__row { display: flex; justify-content: space-between; font-size: .875rem; line-height: 1.25rem; }
.ll-summary__row span:first-child { color: var(--ll-ink-muted); }
.ll-summary__row span:last-child { font-weight: 500; color: var(--ll-ink); }
.ll-summary__total { display: flex; justify-content: space-between; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.ll-summary__total span:first-child { color: var(--ll-ink); }
.ll-summary__total span:last-child { color: var(--ll-accent); }
.ll-gets { background-color: var(--ll-paper-2); border-radius: 1rem; border: 1px solid rgba(15,27,46,.1); padding: 1.5rem; }
.ll-gets h4 { font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; color: var(--ll-ink); }
.ll-gets h4 svg { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); }
.ll-gets ul { font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); }
.ll-gets ul > * + * { margin-top: .75rem; }
.ll-gets li { display: flex; align-items: flex-start; gap: .5rem; }
.ll-gets li svg { width: 1rem; height: 1rem; color: var(--ll-accent); flex-shrink: 0; margin-top: .125rem; }

/* ------------------------------------------------------------------ Thank-you page (frontend-spec 5.3) */

/* Centred views: loading, error, pending, failed. Max-width 28rem and the 1rem gutter come from
   .ll-container.ll-container--md on .ll-ty-center__box (5.6 #1); the container has no width, so the box shrinks to fit. */
.ll-ty-center { min-height: 100vh; background-color: #fff; color: var(--ll-ink); display: flex; align-items: center; justify-content: center; }
.ll-ty-center__box { text-align: center; }
.ll-ty-center__box > * + * { margin-top: 1.5rem; }
.ll-spin { width: 4rem; height: 4rem; color: var(--ll-accent); margin: 0 auto; animation: llSpin 1s linear infinite; }   /* not disabled for reduced motion (parity) */
.ll-ty-center h2 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.ll-ty-center p { color: var(--ll-ink-muted); }
.ll-ty-x { width: 4rem; height: 4rem; background-color: #FEE2E2; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto; }
.ll-ty-x span { font-size: 2.25rem; line-height: 2.5rem; }
/* 5.6 #10: "pending" view icon circle and the button row of the "failed" view (new views, theme-architecture 4.6). */
.ll-ty-icon--clock { width: 4rem; height: 4rem; border-radius: 9999px; background-color: var(--ll-accent-soft); display: flex;
  align-items: center; justify-content: center; margin: 0 auto; }
.ll-ty-icon--clock svg { width: 2rem; height: 2rem; color: var(--ll-accent); }
.ll-ty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Success view. Max-width 48rem + 2 x 1rem gutter: .ll-container.ll-container--ty on .ll-ty__wrap (5.6 #1). */
.ll-ty { min-height: 100vh; background-color: #fff; color: var(--ll-ink); padding-top: 3rem; padding-bottom: 3rem; }
.ll-ty__head { text-align: center; margin-bottom: 2rem; }
.ll-ty__head > * + * { margin-top: 1.5rem; }
.ll-ty__head > svg { width: 5rem; height: 5rem; color: var(--ll-accent); margin: 0 auto; }
.ll-ty__head > div > * + * { margin-top: .75rem; }
.ll-ty__head h1 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.875rem; line-height: 2.25rem;
  font-weight: 600; color: var(--ll-ink); }
@media (min-width: 640px) { .ll-ty__head h1 { font-size: 3rem; line-height: 1; } }
.ll-ty__head p { font-size: 1.25rem; line-height: 1.75rem; color: var(--ll-ink-muted); }
.ll-ty__cards { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.ll-ty__mail { background-color: var(--ll-paper-2); border-radius: 1rem; border: 1px solid rgba(31,111,80,.3); padding: 1rem; }
@media (min-width: 640px) { .ll-ty__mail { padding: 2rem; } }
.ll-ty__mail > * + * { margin-top: 1.25rem; }
.ll-ty__mail > div:first-child { display: flex; align-items: flex-start; gap: 1rem; }
.ll-ty__mail-icon { width: 3rem; height: 3rem; background-color: var(--ll-accent-soft); border-radius: .75rem; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.ll-ty__mail-icon svg { width: 1.5rem; height: 1.5rem; color: var(--ll-accent); }
/* Text column beside the icon: the outline's tw "flex-1" (frontend-spec 5.3), which the resolved CSS block omits (theme 4.6). */
.ll-ty__mail-body { flex: 1 1 0%; }
.ll-ty__mail h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin-bottom: .5rem; color: var(--ll-ink); }
.ll-ty__mail h3 + p { color: var(--ll-ink-muted); margin-bottom: 1rem; }
.ll-ty__email { background-color: #fff; border: 1px solid rgba(15,27,46,.1); border-radius: .75rem; padding: .75rem 1rem;
  font-family: var(--ll-font-mono); color: var(--ll-accent); word-break: break-all; font-size: .875rem; line-height: 1.25rem; }
/* 5.6 #10: mail-failed hint, download wrapper (hidden while there is no URL) and the in-app note inside it. */
.ll-ty__mail-hint { margin-top: .75rem; font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); }
.ll-ty__download { margin-top: 1rem; }
.ll-ty__dl-note { display: block; margin-top: .5rem; font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); }
.ll-ty__next { border-top: 1px solid rgba(15,27,46,.1); padding-top: 1.5rem; }
.ll-ty__next h4, .ll-ty__details h4 { font-weight: 600; margin-bottom: 1rem; color: var(--ll-ink); }
.ll-ty__next ol > * + * { margin-top: 1rem; }
.ll-ty__next li { display: flex; align-items: flex-start; gap: .75rem; }
.ll-ty__next li > span { flex-shrink: 0; width: 2rem; height: 2rem; background-color: var(--ll-accent); color: #fff; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; font-weight: 700; }
.ll-ty__next li p:first-child { font-weight: 500; color: var(--ll-ink); }
.ll-ty__next li p:last-child { font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); }
.ll-ty__details { background-color: var(--ll-paper-2); border-radius: 1rem; border: 1px solid rgba(15,27,46,.1); padding: 1rem; }
@media (min-width: 640px) { .ll-ty__details { padding: 1.5rem; } }
.ll-ty__details h4 + div { font-size: .875rem; line-height: 1.25rem; }
.ll-ty__details h4 + div > * + * { margin-top: .75rem; }
.ll-ty__details h4 + div > div { display: flex; justify-content: space-between; }
.ll-ty__details h4 + div > div > span:first-child { color: var(--ll-ink-muted); }
.ll-ty__no { font-family: var(--ll-font-mono); color: var(--ll-ink); }
.ll-ty__date { color: var(--ll-ink); }
.ll-ty__amount { font-weight: 700; color: var(--ll-accent); }
.ll-ty__help { background-color: var(--ll-accent-soft); border: 1px solid rgba(31,111,80,.3); border-radius: 1rem; padding: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .ll-ty__help { padding: 1.5rem; } }
.ll-ty__help h4 { font-weight: 600; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; color: var(--ll-ink); }
.ll-ty__help h4 svg { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); }
.ll-ty__help p { font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); }
.ll-ty__help p:first-of-type { margin-bottom: 1rem; }
.ll-ty__back { text-align: center; }