/*!
 * HyperDC order form — Cart Studio options ($hdc.cart, docs/handoff/A4.md §6.2, docs/handoff/T6.md):
 * plan card styles (cards | list | compact), billing-cycle switcher styles (dropdown | radio) and the "best value"
 * mark, free-domain banner, promo box positions, upsell suggestions, the separate account step at checkout.
 * Loaded after css/hdc-cart.css by common.tpl. Design tokens only (light + dark), logical properties (RTL), 360px.
 */

/* ==========================================================================
   1. Plan cards — list (one plan per row) and compact (denser cards)
   ========================================================================== */
.hdc-cart-plans--list,
.hdc-cart-plans--list[data-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: none; }
.hdc-cart-plans--list .hdc-plan {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(max-content, 13.5rem); /* same price column on every row */
  grid-template-areas:
    "head specs price"
    "desc specs cta";
  align-items: start;
  column-gap: clamp(1rem, .5rem + 1.5vw, 2rem);
  padding-block: clamp(1.2rem, 1rem + .6vw, 1.5rem);
}
.hdc-cart-plans--list .hdc-plan__head { grid-area: head; }
.hdc-cart-plans--list .hdc-plan__desc { grid-area: desc; min-height: 0; margin-bottom: .25rem; }
.hdc-cart-plans--list .hdc-plan__specs {
  grid-area: specs;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  margin: 0;
}
.hdc-cart-plans--list .hdc-plan__price { grid-area: price; margin-bottom: .75rem; padding-bottom: .75rem; }
.hdc-cart-plans--list .hdc-plan__cta { grid-area: cta; margin-bottom: 0; }
.hdc-cart-plans--list .hdc-plan__features,
.hdc-cart-plans--list .hdc-plan__stock { grid-column: 1 / -1; }
.hdc-cart-plans--list .hdc-plan__features { margin-top: 1.1rem; }
/* No spec list: the plan's own feature list takes the middle column (browsers without :has keep it full width) */
.hdc-cart-plans--list .hdc-plan:not(:has(> .hdc-plan__specs)) > .hdc-plan__features { grid-area: specs; margin-top: 0; }
.hdc-cart-plans--list .hdc-cart-rich ul:not(.hdc-checklist) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); column-gap: 1.25rem; }
.hdc-cart-plans--list .hdc-plan__ribbon,
[dir="rtl"] .hdc-cart-plans--list .hdc-plan__ribbon { inset-inline-start: 1.5rem; transform: none; }
.hdc-cart-plans--list .hdc-plan:hover { transform: translateY(-2px); }
@media (min-width: 1100px) {
  .hdc-cart-plans--list .hdc-plan--featured { transform: none; }
  .hdc-cart-plans--list .hdc-plan--featured:hover { transform: translateY(-2px); }
}
@media (max-width: 899.98px) {
  .hdc-cart-plans--list .hdc-plan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head" "desc desc" "specs specs" "price cta";
  }
  .hdc-cart-plans--list .hdc-plan__specs,
  .hdc-cart-plans--list .hdc-plan:not(:has(> .hdc-plan__specs)) > .hdc-plan__features { margin-bottom: 1rem; }
  .hdc-cart-plans--list .hdc-plan__price { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .hdc-cart-plans--list .hdc-plan__cta { align-self: end; }
}
@media (max-width: 559.98px) {
  .hdc-cart-plans--list .hdc-plan {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "desc" "price" "cta" "specs";
  }
  .hdc-cart-plans--list .hdc-plan__price { margin-bottom: .85rem; padding-bottom: .85rem; border-bottom: 1px dashed var(--hdc-border-strong); }
  .hdc-cart-plans--list .hdc-plan__specs,
  .hdc-cart-plans--list .hdc-plan:not(:has(> .hdc-plan__specs)) > .hdc-plan__features { margin: 1.1rem 0 0; }
}

.hdc-cart-plans--compact { --hdc-plan-min: 210px; gap: 1rem; }
.hdc-cart-plans--compact .hdc-plan { padding: 1.1rem 1.2rem; border-radius: var(--hdc-r-lg); }
.hdc-cart-plans--compact .hdc-plan__name { font-size: var(--hdc-fs-lg); }
.hdc-cart-plans--compact .hdc-plan__desc { min-height: 0; margin-bottom: .75rem; }
.hdc-cart-plans--compact .hdc-plan__price { gap: .2rem; margin-bottom: .85rem; padding-bottom: .85rem; }
.hdc-cart-plans--compact .hdc-plan__value { font-size: clamp(1.7rem, 1.5rem + .6vw, 2.1rem); }
.hdc-cart-plans--compact .hdc-plan__cta { margin-bottom: .85rem; }
.hdc-cart-plans--compact .hdc-plan__specs { gap: .35rem; margin-bottom: .25rem; }
/* The rich description only goes when a spec list already describes the plan */
.hdc-cart-plans--compact .hdc-plan__specs ~ .hdc-plan__features { display: none; }
@media (min-width: 1100px) {
  .hdc-cart-plans--compact .hdc-plan--featured { transform: none; }
  .hdc-cart-plans--compact .hdc-plan--featured:hover { transform: translateY(-4px); }
}

/* ==========================================================================
   2. Billing-cycle switcher — dropdown, radio cards, "best value" mark
   ========================================================================== */
.hdc-cart-cycles--dropdown { flex-direction: column; align-items: center; gap: .4rem; }
.hdc-cart-cycles--dropdown .hdc-label { margin: 0; }
.hdc-cart-cycles--dropdown .hdc-select { width: auto; min-width: min(100%, 260px); max-width: 100%; }

.hdc-cart-cycles--radio { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.hdc-cycle-radios { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem .6rem; padding-block-start: .55rem; } /* room for the "best value" tab */
.hdc-cycle-radio { position: relative; display: grid; min-width: 0; cursor: pointer; } /* grid: every card as tall as the row */
.hdc-cycle-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hdc-cycle-radio__body {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .3rem;
  min-width: 132px;
  min-height: 64px;
  padding: .7rem 1rem;
  border: 1.5px solid var(--hdc-border);
  border-radius: var(--hdc-r-md);
  background: var(--hdc-surface);
  color: var(--hdc-heading);
  font-size: var(--hdc-fs-sm);
  font-weight: 600;
  text-align: center;
  transition: border-color var(--hdc-dur-1), background-color var(--hdc-dur-1), box-shadow var(--hdc-dur-1);
}
.hdc-cycle-radio:hover .hdc-cycle-radio__body { border-color: var(--hdc-border-strong); }
.hdc-cycle-radio input:checked + .hdc-cycle-radio__body { border-color: var(--hdc-primary); background: var(--hdc-primary-soft); }
.hdc-cycle-radio input:focus-visible + .hdc-cycle-radio__body { box-shadow: var(--hdc-focus-ring); }
/* "Best value" sits as a tab on the card's top edge, so every card keeps the same height */
.hdc-cycle-radio__best {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: max-content;
  max-width: calc(100% - .5rem);
  margin-inline: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
  background: linear-gradient(var(--hdc-success-soft), var(--hdc-success-soft)), var(--hdc-surface);
  font-size: var(--hdc-fs-2xs);
}
@media (max-width: 559.98px) {
  .hdc-cart-cycles--radio { width: 100%; }
  .hdc-cycle-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdc-cycle-radio__body { min-width: 0; }
}

.hdc-cart-cycles__best {
  display: inline-flex;
  align-items: center;
  padding: .1rem .45rem;
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-success-soft);
  color: var(--hdc-success-text);
  font-size: var(--hdc-fs-2xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* ==========================================================================
   3. Free-domain banner (store page, cart)
   ========================================================================== */
.hdc-cart-freedomain {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--hdc-success) 32%, transparent);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-success-soft);
}
.hdc-cart--products .hdc-cart-freedomain { width: 100%; max-width: 820px; margin: 0 auto 1.5rem; }
.hdc-cart-freedomain__text { display: grid; gap: .15rem; min-width: 0; margin: 0; color: var(--hdc-text); font-size: var(--hdc-fs-sm); }
.hdc-cart-freedomain__text strong { color: var(--hdc-heading); }
.hdc-cart-freedomain__tlds { color: var(--hdc-text-2); overflow-wrap: anywhere; }

/* ==========================================================================
   4. Promo box positions (view cart: top / summary; checkout summary line)
   ========================================================================== */
.hdc-summary__promo { padding: 1rem 1.25rem; border-top: 1px solid var(--hdc-border); }
.hdc-summary__promo-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; color: var(--hdc-heading); font-size: var(--hdc-fs-sm); font-weight: 650; }
.hdc-summary__promo-title .hdc-i { --hdc-i: 16px; color: var(--hdc-text-3); }
.hdc-summary__promo .hdc-cart-inline-form .hdc-input { flex: 1 1 9rem; }
.hdc-summary__promo .hdc-cart-inline-form .hdc-btn { flex: 0 0 auto; }

.hdc-checkout__promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: .85rem; border-top: 1px dashed var(--hdc-border-strong); font-size: var(--hdc-fs-sm); }
.hdc-checkout__promo-code { display: inline-flex; align-items: center; gap: .45rem; color: var(--hdc-success-text); }
.hdc-checkout__promo-code .hdc-i,
.hdc-checkout__promo-link .hdc-i { --hdc-i: 16px; }
.hdc-checkout__promo-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }

/* ==========================================================================
   5. Upsell / cross-sell suggestions (view cart)
   ========================================================================== */
.hdc-cart-upsell__list { display: grid; margin: 0; padding: 0; list-style: none; }
.hdc-cart-upsell__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem .9rem;
  padding: .85rem var(--hdc-cart-pad);
  border-top: 1px solid var(--hdc-border);
}
.hdc-cart-upsell__item:first-child { border-top: 0; }
.hdc-cart-upsell__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--hdc-r-sm);
  background: var(--hdc-primary-soft);
  color: var(--hdc-primary);
}
.hdc-cart-upsell__icon .hdc-i { --hdc-i: 18px; }
.hdc-cart-upsell__text { display: grid; gap: .1rem; min-width: 0; }
.hdc-cart-upsell__name { color: var(--hdc-heading); font-weight: 600; overflow-wrap: anywhere; }
.hdc-cart-upsell__price { color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 479.98px) {
  .hdc-cart-upsell__item { grid-template-columns: auto minmax(0, 1fr); }
  .hdc-cart-upsell__cta { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   6. Checkout: account step before payment (accountStep = separate)
   ========================================================================== */
.hdc-checkout__account-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  padding: 1rem var(--hdc-cart-pad);
  border: 1px dashed var(--hdc-border-strong);
  border-radius: var(--hdc-r-xl);
  background: var(--hdc-surface-sunken);
}
.hdc-checkout__account-gate-text { flex: 1 1 16rem; margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-checkout__payment.is-locked { opacity: .55; filter: saturate(.6); user-select: none; }
.hdc-checkout__payment.is-locked .hdc-cart-section__head::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  background: currentColor;
  color: var(--hdc-text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Header not sticky (Studio layout headerSticky = false): sticky summaries stop at the top of the viewport */
.hdc-header-static .hdc-cart { --hdc-cart-sticky-top: 1rem; }