/* The layout of the public forms (contact, sign-in, account), the sign-in and password reset pages and the account
   panel. Their fields, buttons, cards and messages are the design system's (ms-field, ms-input, ms-button, ms-card,
   ms-notice); success/info and operation errors are toasts (toast.css). */

@layer pages {
  /* ——— Forms (contact, sign-in, account) ——— */

  .kl__contact-card { padding: clamp(24px, 4vw, 36px); }
  .kl__form { display: flex; flex-direction: column; gap: 18px; }
  .kl__form > .ms-button--block { margin-top: 6px; }
  .kl__field--check { flex-direction: row; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .kl__check-label { flex: 1; min-width: 0; font-size: var(--text-md); color: var(--muted); line-height: 1.5; cursor: pointer; }
  /* The error of the consent goes under its label: 18px checkbox + 10px gap. */
  .kl__field--check .ms-field__error { flex-basis: 100%; padding-left: 28px; }
  .kl__form-submit { margin-top: 4px; align-self: flex-start; }
  .kl__form-errors { margin-bottom: 20px; }

  /* Honeypot — out of sight and out of keyboard reach, but in the DOM (bots fill it in). */
  .kl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Two short fields side by side (first and last name, postal code and city), stacked on a phone. */
  .kl__field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }

  /* ——— Sign-in / password reset ——— */

  .kl__auth { display: grid; place-items: center; padding: clamp(40px, 8vh, 84px) var(--gutter); }
  .kl__auth-col { width: 100%; max-width: 440px; text-align: center; }
  /* The cards show what the customer typed — an e-mail address is one unbreakable word, often wider than a phone:
     it breaks anywhere rather than widen the card and push the page sideways (as .kl__address does). */
  .kl__auth-card { width: 100%; text-align: left; padding: clamp(28px, 5vw, 40px); overflow-wrap: anywhere; }
  .kl__auth-head { text-align: center; margin-bottom: 26px; }
  .kl__auth-title { margin-bottom: 16px; }
  .kl__auth-sub { color: var(--muted); font-size: var(--text-lg); margin: 0; }
  .kl__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .kl__label-link { font-size: var(--text-sm); color: var(--tone); text-decoration: underline; text-decoration-color: var(--tone-pale); text-underline-offset: 3px; }
  .kl__label-link:hover { color: var(--tone-strong); text-decoration-color: currentColor; }
  .kl__auth-foot { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; font-size: var(--text-base); color: var(--muted); }
  .kl__auth-foot a { color: var(--tone); text-decoration: underline; text-decoration-color: var(--tone-pale); text-underline-offset: 3px; }
  .kl__auth-foot a:hover { color: var(--tone-strong); text-decoration-color: currentColor; }
  .kl__auth-foot p { margin: 0; }
  .kl__auth-foot p + p { margin-top: 12px; }
  .kl__auth-foot-form { display: inline; }
  .kl__auth-foot-form button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; color: var(--tone); text-decoration: underline; text-decoration-color: var(--tone-pale); text-underline-offset: 3px; }
  .kl__auth-foot-form button:hover { color: var(--tone-strong); text-decoration-color: currentColor; }
  .kl__auth-note { display: inline-flex; align-items: center; gap: 8px; margin: 22px auto 0; color: var(--muted); font-size: var(--text-sm); }
  .kl__auth-note svg { width: 15px; height: 15px; color: var(--tone); flex-shrink: 0; }

  /* ——— Account panel ——— */

  .kl__account { padding: clamp(40px, 7vh, 72px) var(--gutter); }
  .kl__account-col { width: 100%; max-width: 560px; margin: 0 auto; overflow-wrap: anywhere; } /* as .kl__auth-card */
  .kl__account-head { margin-bottom: 26px; }
  .kl__account-title { margin-bottom: 14px; }
  .kl__account-sub { color: var(--muted); font-size: var(--text-lg); margin: 0; }
  .kl__card { padding: clamp(22px, 4vw, 30px); margin-bottom: 20px; }
  .kl__card-title { font-family: var(--font-display); font-size: var(--heading-sm); font-weight: var(--weight-regular); color: var(--ink); margin: 0 0 18px; }
  .kl__data { margin: 0; }
  .kl__data-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
  .kl__data-row:first-child { padding-top: 0; border-top: 0; }
  .kl__data-row:last-child { padding-bottom: 0; }
  .kl__data-label { font-size: var(--text-sm); color: var(--muted); }
  .kl__data-value { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: var(--text-lg); color: var(--ink); }
  .kl__account-card .ms-button--small { margin-top: 18px; }
  .kl__devices { list-style: none; margin: 0; padding: 0; }
  .kl__device { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
  .kl__device:first-child { padding-top: 0; border-top: 0; }
  .kl__device:last-child { padding-bottom: 0; }
  .kl__device-body { flex: 1; min-width: 0; }
  .kl__device-agent { margin: 0; font-size: var(--text-base); color: var(--ink); overflow-wrap: anywhere; }
  .kl__device-meta { margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted); }
  .kl__account-card .kl__device .ms-button--small { margin-top: 0; flex: none; }
  .kl__devices-others { margin-top: 20px; }
  .kl__account-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; }
  .kl__account-head .ms-link { margin-bottom: 14px; font-size: var(--text-md); }
  .kl__account-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
  .kl__account-logout { color: var(--error); border-color: color-mix(in srgb, var(--error) 28%, transparent); }
  .kl__account-logout:hover { color: var(--error); background: var(--error-bg); border-color: var(--error-bd); }

  /* ——— The customer's account (Customers::*) ——— */

  /* /moje-konto: the orders beside the account and its default address, as Shopify lays it out. */
  .kl__account--wide .kl__account-col { max-width: 980px; }
  .kl__account-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 20px; align-items: start; }
  @media (max-width: 768px) { .kl__account-grid { grid-template-columns: minmax(0, 1fr); } }
  .kl__account-empty { margin: 0 0 16px; color: var(--muted); font-size: var(--text-base); }
  .kl__account--wide .kl__account-foot { align-items: center; justify-content: space-between; gap: 16px; }
  .kl__account-delete { font-size: var(--text-md); color: var(--muted); }
  .kl__orders { list-style: none; margin: 0; padding: 0; }
  .kl__order { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
  .kl__order:first-child { padding-top: 0; border-top: 0; }
  .kl__order-body { flex: 1; min-width: 0; }
  .kl__order-meta { margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted); }
  .kl__order-total { flex: none; font-size: var(--text-base); color: var(--ink); }
  .kl__address { margin: 10px 0 0; font-style: normal; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
  .kl__address-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .kl__address-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .kl__card-subtitle { margin: 20px 0 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted); }
  .kl__account-locker { margin-top: 32px; }
  .kl__account-locker .kl__account-empty { margin: 12px 0 0; }
  .kl__account-card .kl__address-actions .ms-button--small { margin-top: 0; }
}