/*
 * Full-page checkout layout layer (display mode: full_page).
 *
 * Loaded AFTER drawer.css. The page reuses every `.kp-drawer …` component style
 * (the form column and the relocated summary both sit under `.kp-drawer`); this
 * file only (a) lays out the standalone two-column page + topbar, and (b)
 * neutralises the drawer's slide-in panel positioning so `.kp-drawer.kp-fullpage`
 * is a static, in-flow card. Mirrors the reference `fp-*` layout values
 * (1120px shell, minmax(280px,1fr) 550px grid, 48px gap, sticky summary).
 */

/* ---- Page frame ---- */
.kp-fullpage-body {
  margin: 0;
  background: oklch(0.972 0.004 285);
  color: oklch(0.18 0.01 285);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kp-fullpage-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* WordPress pushes the page down by the admin bar height (logged-in users);
 * subtract it so the full-height screen fills the AVAILABLE area instead of
 * overflowing into a scroll. Shoppers (no admin bar) keep the full 100vh. */
body.admin-bar .kp-fullpage-screen {
  min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .kp-fullpage-screen {
    min-height: calc(100vh - 46px);
  }
}

/* ---- Topbar ---- */
.kp-fullpage-topbar {
  background: #ffffff;
  border-bottom: 1px solid oklch(0.92 0.006 285);
}

.kp-fullpage-topbar-inner {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kp-fullpage-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: oklch(0.18 0.01 285);
}

.kp-fullpage-secured {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: oklch(0.55 0.012 285);
  white-space: nowrap;
}

.kp-fullpage-secured b {
  color: oklch(0.36 0.01 285);
  font-weight: 600;
}

/* ---- Two-column shell ---- */
.kp-fullpage-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 24px 48px;
}

.kp-fullpage-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 550px;
  /* Row fills the (flex-filled) grid height when content is short, but grows to
   * content when the form is longer than the viewport. */
  grid-template-rows: minmax(min-content, 1fr);
  gap: 48px;
  align-items: start;
}

/* Left column (relocated amount hero + order summary). Sticky like the
 * reference so it stays in view while the form scrolls. */
.kp-fullpage-summary-col {
  position: sticky;
  top: 28px;
}

/* ---- Neutralise the drawer slide-in panel → static in-flow card ---- *
 * Both the form column and the summary column carry `.kp-drawer.kp-fullpage`
 * (for the scoped component styling); strip the fixed/transform/clip chrome. */
.kp-drawer.kp-fullpage {
  position: static;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: auto;
  /* Keep each card within its grid track. Without border-box, the left card's
   * 26px padding (+1px border) adds ~54px on top of width:100%, overflowing the
   * track into the 48px gap and colliding with the form column. */
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
  transition: none;
  overflow: visible;
  /* Reference `.fp-card`: white surface, 1px hair border, 16px radius, very
   * subtle shadow. Applies to both the form column and the summary column. */
  background: #ffffff;
  border: 1px solid var(--kp-d-hair);
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(20, 19, 29, 0.04);
}

/* Make the FORM column (right) at least fill the viewport so it reads as a tall
 * full-height card even when the form is short (e.g. the logged-in state); it
 * still grows past this when the content is longer. The summary column (left)
 * keeps its natural height and stays sticky. ~140px ≈ topbar + shell padding. */
/* The form column stretches to fill the grid row (the grid fills the viewport via
 * the shell/grid flex), so it's a tall full-height card when the form is short and
 * grows naturally (page scrolls) when it's longer — no magic topbar offsets. */
.kp-drawer.kp-fullpage[data-kp-fullpage] {
  align-self: stretch;
  /* Positioning context for the absolutely-positioned country-code picker popup
   * (fullpage.js positions it relative to this card, like the drawer does). Beats
   * the `.kp-drawer.kp-fullpage { position: static }` neutralize (0,2,0). The
   * sticky pay foot inside is unaffected (sticky pins to the scroll container). */
  position: relative;
}

/* Body fills the tall card so the foot (pay button) is pushed to the bottom; the
 * form content sits at the top with empty space between it and the foot. */
.kp-fullpage .kp-drawer__body {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
}

/* Pinned pay foot at the bottom of the form card (horizontal padding matches the
 * shell so the button aligns with the fields above). */
.kp-fullpage-foot {
  flex: 0 0 auto;
  padding: 8px 28px 24px;
}

.kp-fullpage-foot:empty {
  display: none;
}

/* Frosted, sticky Pay bar — mirrors the drawer's translucent pay foot. It pins
 * to the bottom of the viewport while the form column is in view (so the fields
 * blur through behind it), then settles at the card's bottom. Same 10% white +
 * blur as the drawer. */
.kp-fullpage-foot:not(:empty) {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: color-mix(in srgb, #ffffff 10%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid color-mix(in srgb, var(--kp-d-ink, #14131d) 8%, transparent);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 -8px 22px -14px rgba(20, 19, 29, 0.3);
}

.kp-fullpage .kp-drawer__mount {
  height: auto;
}

/* The summary column is a white `.fp-card` (inherits surface/border/radius/shadow
 * from `.kp-drawer.kp-fullpage` above) holding the relocated amount hero + the
 * grey order-summary block. Re-assert `sticky` here: the
 * `.kp-drawer.kp-fullpage { position: static }` neutralize rule (0,2,0) would
 * otherwise outrank a plain `.kp-fullpage-summary-col` sticky, pinning it static.
 * This selector (0,3,0) wins, so the left column follows the scroll while the
 * taller form column scrolls past. */
.kp-fullpage-summary-col.kp-drawer.kp-fullpage {
  position: sticky;
  top: 28px;
  display: block;
  padding: 26px;
}

/* The relocated amount hero leads the card — drop its drawer top margin so it
 * sits flush under the card's padding. */
.kp-fullpage-summary-col .kp-legacy-checkout__amount-hero {
  margin-top: 0;
}

/* ---- Form column adaptations ---- *
 * Keep the header's "Checkout" title but drop the branding bits that duplicate
 * the standalone topbar (merchant name/logo + "Secured by Krepling Pay" chip). */
.kp-fullpage .kp-legacy-checkout__logo-row,
.kp-fullpage .kp-legacy-checkout__brand-mark,
.kp-fullpage .kp-legacy-checkout__brand-monogram,
.kp-fullpage .kp-legacy-checkout__merchant-name,
.kp-fullpage .kp-legacy-checkout__signed-in-group,
.kp-fullpage .kp-legacy-checkout__header-side {
  display: none !important;
}

.kp-fullpage .kp-legacy-checkout__header {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

/* "Checkout" reads as the form's section title (reference .fp-section-title).
 * The drawer hides it via `.kp-drawer .__title { display:none !important }`, which
 * this container also matches — so force it visible. */
.kp-fullpage .kp-legacy-checkout__title {
  display: block !important;
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--kp-d-ink);
}

/* Subtitle injected by fullpage.js under the title (reference .fp-section-sub). */
.kp-fullpage .kp-fullpage-section-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--kp-d-ink-2);
}

/* The subscription (payment-mode) block sits right under the Checkout header; its
 * 18px top margin doubles up with the header's bottom margin, leaving too big a
 * gap. Zero it so it sits snug under the subtitle. */
.kp-fullpage .kp-subscription-section {
  margin-top: 0;
}

/* ---- Contact area: Full Name (contact) + Email (auth) as one section ---- *
 * They are two separate <section>s; drop the divider + the margins between them
 * (the Full Name field's margin-bottom and the auth section's top spacing) so
 * they read as one tight block. Full-page guest tab only. */
.kp-fullpage [data-kp-checkout-tab="guest"] .kp-legacy-checkout__section--auth {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.kp-fullpage [data-kp-checkout-tab="guest"] #full_name_feild {
  margin-bottom: 0 !important;
}

/* ---- Smooth contact collapse (full-page) — the address/card FLIP ---- *
 * The shared collapse hides the Full Name + Email with an instant display:none.
 * Here fullpage.js drives the same JS-measured max-height FLIP the address/card
 * blocks use (a MutationObserver on the collapse flag); CSS just supplies the
 * transition + the opacity/margin fade. The "Contact … / Change" card still
 * slides in via kp-guest-address-card-in. */
.kp-fullpage [data-kp-checkout-tab="guest"] .kp-legacy-checkout__section--contact .kp-legacy-checkout__contact-grid,
.kp-fullpage [data-kp-checkout-tab="guest"] .kp-legacy-checkout__section--auth {
  transition: max-height 320ms ease, opacity 200ms ease, margin 320ms ease;
}

.kp-fullpage [data-kp-checkout-tab="guest"][data-kp-guest-contact-collapsed="true"] .kp-legacy-checkout__section--contact .kp-legacy-checkout__contact-grid,
.kp-fullpage [data-kp-checkout-tab="guest"][data-kp-guest-contact-collapsed="true"] .kp-legacy-checkout__section--auth {
  /* Override the shared display:none so the FLIP can animate. max-height is set
   * inline by fullpage.js — do NOT cap it here or !important would fight it. */
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* ---- Left column heading + trust line (reference .fp-summary-head / .fp-trust) ---- */
.kp-fullpage-summary-head {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kp-d-muted);
}

.kp-fullpage-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--kp-d-muted);
}

.kp-fullpage-trust-lock {
  line-height: 1;
}

/* Scroll the whole page from anywhere — including over the form. The legacy panel
 * is a fixed side panel whose inner `.__shell` is an internal scroll area
 * (height:100%; overflow-y:auto; overscroll-behavior:contain) — correct inside the
 * fixed drawer, but on the full page it captures the wheel over the form and never
 * chains to the page. Make the panel + shell natural-height with no internal
 * scroll so the page is the only scroll container. */
.kp-fullpage .kp-legacy-checkout {
  height: auto !important;
  overflow: visible !important;
  /* Transparent so the panel's own white background doesn't paint a square over
   * the card's rounded corners — the `.kp-drawer.kp-fullpage` card provides the
   * white surface (which is clipped to the 16px radius). */
  background: transparent !important;
}

.kp-fullpage .kp-legacy-checkout__shell {
  background: transparent !important;
}

.kp-fullpage .kp-legacy-checkout__shell {
  height: auto;
  min-height: 0;
  overflow: visible;
  overscroll-behavior: auto;
  /* The shell padding is the form card's inner padding (reference
   * `.fp-formcol .fp-card`: 26px 28px 24px). */
  padding: 26px 28px 24px;
}

/* No boot-time flash: the amount hero + order summary are server-rendered inside
 * the form (right) column and relocated to the LEFT column by fullpage.js. Hide
 * them WHILE still in the form mount so they never paint on the right; once moved
 * into [data-kp-fullpage-summary] (outside the mount) this rule stops matching
 * and they show. Scoped to the mount so the relocated copies are unaffected. */
[data-kp-fullpage-mount] [data-kp-amount-hero],
[data-kp-fullpage-mount] .kp-legacy-checkout__section--summary {
  display: none !important;
}

/* Pay button: the drawer moves it into a pinned foot (.kp-drawer__foot …); here
 * it stays in the payment section, so replicate that full-width treatment in
 * place (mirrors hifi.css .btn-pay / the drawer foot button). */
.kp-fullpage .kp-legacy-checkout__actions {
  margin: 8px 0 0;
  display: block;
}

/* Include #btnFirstStep so this beats the base ID rule
 * (.kp-legacy-checkout__section--payment #btnFirstStep, specificity 1,1,0) which
 * otherwise wins on width/margin/radius WHILE the button is still in the payment
 * section — before fullpage.js relocates it to the foot. Without this the button
 * renders small (233px), right-aligned and pill-shaped on load, then jumps to
 * full-width once relocated. */
.kp-fullpage .kp-legacy-checkout__actions #btnFirstStep,
.kp-fullpage .kp-legacy-checkout__actions [data-kp-payment-submit] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--kp-button-color, #8e00e9) !important;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--kp-d-raise), var(--kp-d-bevel-on) !important;
  transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
}

.kp-fullpage .kp-legacy-checkout__actions [data-kp-payment-submit]:active {
  transform: translateY(1px);
}

.kp-fullpage .kp-legacy-checkout__actions [data-kp-payment-submit]:disabled,
.kp-fullpage .kp-legacy-checkout__actions [data-kp-payment-submit].disabled {
  opacity: 0.55 !important;
  cursor: not-allowed;
}

/* "Payments secured by Krepling Pay" caption under the button, centered. */
.kp-fullpage .kp-legacy-checkout__secured-foot {
  width: 100%;
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--kp-d-muted, #6b6b78);
}

.kp-fullpage .kp-legacy-checkout__secured-foot strong {
  font-weight: 700;
  color: inherit;
}

/* ---- Responsive: stack to a single column ---- */
@media (max-width: 880px) {
  .kp-fullpage-shell {
    padding: 24px 18px 64px;
  }

  .kp-fullpage-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Same specificity caveat as the sticky rule above — must match (0,3,0) to win
   * over the neutralize rule and drop the column back to normal flow on mobile. */
  .kp-fullpage-summary-col.kp-drawer.kp-fullpage {
    position: static;
    padding: 20px;
  }

  .kp-fullpage .kp-legacy-checkout__shell {
    padding: 20px;
  }
}