/**
 * DreamPage checkout skin.
 *
 * Every rule is scoped under .dp-checkout-skin, which checkout-skin.js adds to
 * the checkout block root. WooCommerce Blocks keeps rendering and running the
 * checkout — this file only decides what it looks like. Nothing here changes
 * layout in a way that could hide a field or a control.
 *
 * Loaded on the checkout page only (not the order-received page).
 */

.dp-checkout-skin {
  --dp-skin-ink: #132440;
  --dp-skin-muted: rgba(19, 36, 64, 0.55);
  --dp-skin-line: rgba(19, 36, 64, 0.09);
  --dp-skin-accent: #6a5ae0;
  --dp-skin-accent-strong: #5b3fd6;
  --dp-skin-field-radius: 12px;
}

/* ═══ Section headings ══════════════════════════════════════════════════
   Was: "1. Kontaktinformasjon" in default block-checkout type — the single
   most recognisably "WooCommerce plugin" thing on the page. Now a brand
   medallion plus a heading in the site's own sans. */

/* Kill a CSS-counter numeral if the installed WooCommerce renders one, so the
   medallion is never doubled up. */
.dp-checkout-skin .wc-block-components-checkout-step__title::before {
  content: none !important;
}

.dp-checkout-skin .wc-block-components-checkout-step__heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.dp-checkout-skin .wc-block-components-checkout-step__heading[data-dp-step]::before {
  content: attr(data-dp-step);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--dp-skin-accent) 0%, var(--dp-skin-accent-strong) 100%);
  box-shadow: 0 2px 6px rgba(91, 63, 214, 0.28);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dp-checkout-skin .wc-block-components-checkout-step__title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--dp-skin-ink);
}

/* The "Logg inn" link rides in the heading — keep it quiet, it leads out of
   the funnel and most buyers are one-off gift shoppers. */
.dp-checkout-skin .wc-block-components-checkout-step__heading-content {
  margin-left: auto;
  font-size: 0.78rem;
}

.dp-checkout-skin .wc-block-checkout__login-prompt {
  color: var(--dp-skin-muted);
  font-weight: 600;
  text-decoration-color: rgba(19, 36, 64, 0.25);
  text-underline-offset: 3px;
}

.dp-checkout-skin .wc-block-checkout__login-prompt:hover {
  color: var(--dp-skin-accent-strong);
}

/* ═══ Express wallets ═══════════════════════════════════════════════════
   Apple Pay, Google Pay, Link and Vipps each ship their own button geometry.
   Left alone they stack as four different-looking bars — the Vipps one
   noticeably narrower than the rest. One shared width, height and radius
   turns them into a single block. */

.dp-checkout-skin .wc-block-components-express-payment--checkout {
  margin-bottom: 4px;
  padding: 0;
  border: none;
  background: transparent;
}

/* ── Wallets, while they load ───────────────────────────────────────────
   The wallets take a second or two to arrive, and the area they land in reads
   as empty until they do — so the buttons appear out of nowhere on a page the
   customer had already decided was finished loading.

   Woo does draw placeholders for exactly this: one block-sized box before
   hydration, then a skeleton per wallet while they initialise. Both are filled
   with `color-mix(in srgb, currentColor 5%, transparent)`, which on a white
   checkout is invisible — that is the whole bug. Same placeholders, in a tint
   you can actually see, shaped like the buttons that replace them.

   Everything below only re-tints what Woo already renders, so when the wallets
   land the placeholders leave with them. Nothing here needs cleaning up. */

/* Phase 1 — before hydration. Specific enough to beat Woo's own
   `.is-loading … -fields-block > div` fill without !important. */
.wp-block-woocommerce-checkout.is-loading
  .wp-block-woocommerce-checkout-fields-block
  > .wp-block-woocommerce-checkout-express-payment-block {
  border-radius: 10px;
  background-color: rgba(19, 36, 64, 0.07);
}

.wp-block-woocommerce-checkout.is-loading
  .wp-block-woocommerce-checkout-fields-block
  > .wp-block-woocommerce-checkout-express-payment-block::after {
  background: linear-gradient(90deg, transparent, rgba(19, 36, 64, 0.09) 50%, transparent);
}

/* Phase 2 — hydrated, wallets still initialising. Woo renders one skeleton per
   wallet it expects, inside the same list the real buttons end up in. */
.dp-checkout-skin .wc-block-components-express-payment .wc-block-components-skeleton__element {
  background-color: rgba(19, 36, 64, 0.07);
}

.dp-checkout-skin .wc-block-components-express-payment .wc-block-components-skeleton__element::after {
  background: linear-gradient(90deg, transparent, rgba(19, 36, 64, 0.09) 50%, transparent);
}

/* The button-shaped ones get the buttons' own radius and height, so the swap
   from placeholder to wallet moves nothing on the page. */
.dp-checkout-skin .wc-block-components-express-payment__event-buttons .wc-block-components-skeleton__element {
  min-height: 46px;
  border-radius: 10px;
}

.dp-checkout-skin .dp-express-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two up as soon as the column is wide enough for a wallet lockup to breathe.
   Below that they stay full width — a cramped wallet button is worse than a
   tall row. */
@media (min-width: 620px) {
  .dp-checkout-skin .dp-express-grid[data-dp-express-count="2"],
  .dp-checkout-skin .dp-express-grid[data-dp-express-count="4"] {
    grid-template-columns: 1fr 1fr;
  }
}

.dp-checkout-skin .dp-express-grid > * {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Reach through each vendor's own wrapper so the actual clickable surface
   fills the cell. Height is normalised rather than forced, so a wallet that
   needs more room is never clipped. */
.dp-checkout-skin .dp-express-grid > * > *,
.dp-checkout-skin .dp-express-grid button,
.dp-checkout-skin .dp-express-grid apple-pay-button,
.dp-checkout-skin .dp-express-grid .StripeElement,
.dp-checkout-skin .dp-express-grid img[src*="vipps"],
.dp-checkout-skin .dp-express-grid [class*="vipps"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 46px;
}

.dp-checkout-skin .dp-express-grid apple-pay-button {
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 46px;
  --apple-pay-button-border-radius: 10px;
}

/* The "or continue" divider, in the site's own voice. */
.dp-checkout-skin .wc-block-components-express-payment-continue-rule {
  margin: 20px 0;
  color: var(--dp-skin-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dp-checkout-skin .wc-block-components-express-payment-continue-rule::before,
.dp-checkout-skin .wc-block-components-express-payment-continue-rule::after {
  background: var(--dp-skin-line);
}

.dp-checkout-skin .wc-block-components-express-payment__title {
  color: var(--dp-skin-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ═══ Fields ════════════════════════════════════════════════════════════
   Same components, DreamPage's own focus behaviour and radii. */

.dp-checkout-skin .wc-block-components-text-input input[type="text"],
.dp-checkout-skin .wc-block-components-text-input input[type="email"],
.dp-checkout-skin .wc-block-components-text-input input[type="tel"],
.dp-checkout-skin .wc-block-components-text-input input[type="number"],
.dp-checkout-skin .wc-block-components-combobox input,
.dp-checkout-skin .wc-blocks-components-select__select {
  border-radius: var(--dp-skin-field-radius);
  border-color: rgba(19, 36, 64, 0.16);
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.dp-checkout-skin .wc-block-components-text-input.is-active input:focus,
.dp-checkout-skin .wc-block-components-text-input input:focus,
.dp-checkout-skin .wc-block-components-combobox input:focus,
.dp-checkout-skin .wc-blocks-components-select__select:focus {
  border-color: var(--dp-skin-accent);
  box-shadow: 0 0 0 3px rgba(106, 90, 224, 0.16);
  outline: none;
}

.dp-checkout-skin .wc-block-components-checkbox__input:checked {
  background-color: var(--dp-skin-accent-strong);
  border-color: var(--dp-skin-accent-strong);
}

.dp-checkout-skin .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle {
  color: var(--dp-skin-muted);
  font-weight: 600;
}

/* ═══ Payment method rows ═══════════════════════════════════════════════ */

.dp-checkout-skin .wc-block-components-radio-control-accordion-option,
.dp-checkout-skin .wc-block-components-radio-control__option {
  border-radius: 14px;
}

.dp-checkout-skin .wc-block-components-radio-control__option--checked-option-highlighted,
.dp-checkout-skin .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: rgba(106, 90, 224, 0.4);
  box-shadow: 0 0 0 1px rgba(106, 90, 224, 0.18);
}

.dp-checkout-skin .wc-block-components-radio-control__input:checked {
  border-color: var(--dp-skin-accent-strong);
  background-color: var(--dp-skin-accent-strong);
}

/* Gateways that register their brand mark as the label and their name as the
   secondary label (Vipps) render icon-left / name-stranded-right. Swap them
   visually — flex order only, the DOM is untouched. */
.dp-checkout-skin .dp-radio-reversed .wc-block-components-radio-control__label-group,
.dp-checkout-skin .dp-radio-reversed .wc-block-components-radio-control__option-layout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.dp-checkout-skin .dp-radio-reversed .wc-block-components-radio-control__label {
  order: 2;
}

.dp-checkout-skin .dp-radio-reversed .wc-block-components-radio-control__secondary-label {
  order: 1;
  margin-left: 0;
  margin-right: auto;
  color: var(--dp-skin-ink);
  font-weight: 600;
}

/* ═══ Terms ═════════════════════════════════════════════════════════════ */

.dp-checkout-skin .dp-checkout-terms {
  margin-top: 18px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--dp-skin-muted);
}

.dp-checkout-skin .dp-checkout-terms a {
  color: var(--dp-skin-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(19, 36, 64, 0.3);
  text-underline-offset: 3px;
}

/* ═══ Order summary header ══════════════════════════════════════════════ */

.dp-checkout-skin .dp-summary-thumb {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 1px 3px rgba(19, 36, 64, 0.14);
}

.dp-checkout-skin .wc-block-components-checkout-order-summary__title.dp-has-thumb {
  align-items: center;
}