/* ===== Section/Price — header + bulk-pricing solution showcase ===== */
.price { background:var(--c-1); padding-block:72px; }
.price__container { display:flex; flex-direction:column; gap:var(--gap-head-content); }

.price__solution {
  position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  /* row grows with the cards so the media always matches their height (top + bottom stay aligned),
     but never shrinks below 625 so the image can't collapse with only 1–2 cards */
  grid-template-rows:minmax(625px, auto); gap:24px 8px; width:100%;
}

/* Media (left, 8 cols) */
.price__media { grid-column:1 / span 8; position:relative; border:var(--border-1) solid var(--c-3); border-radius:24px; overflow:hidden; }
.price__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.price__tabs {
  position:absolute; top:16px; left:16px; z-index:2;
  display:inline-flex; gap:2px; padding:2px; background:var(--c-3);
  border:var(--border-1) solid var(--c-6); border-radius:var(--radius-md);
}
/* transparent border reserved on every tab so toggling active only changes the color — no width jump */
.price__tab { padding:6px 12px; border:var(--border-1) solid transparent; border-radius:var(--radius-6); font-weight:500; font-size:14px; line-height:24px; letter-spacing:-0.2px; color:var(--c-11); white-space:nowrap; }
.price__tab.is-active { background:var(--c-1); border-color:var(--c-4); color:var(--c-12); box-shadow:var(--shadow-sm); }

/* Autoplay tile (Figma "Autoplay Tile") — a c-2 pill with c-3 border holding a 36px
   timeline ring + play/pause icon. Ring/icon use c-12 so they read in BOTH themes
   (light icon on the dark tile in dark mode; dark icon on the cream tile in light mode). */
.price__autoplay {
  position:absolute; top:16px; right:16px; z-index:2;
  width:40px; height:40px; padding:2px;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-2); border:var(--border-1) solid var(--c-3); border-radius:var(--radius-full);
  filter:drop-shadow(0 0 12px rgba(0,0,0,0.25));
}
.price__ring { width:36px; height:36px; transform:rotate(-90deg); }
.price__ring-track { fill:none; stroke:color-mix(in srgb, var(--c-12) 25%, transparent); stroke-width:2; }
.price__ring-fill {
  fill:none; stroke:var(--c-12); stroke-width:2; stroke-linecap:round;
  --circ:106.814;  /* 2π·17 */
  stroke-dasharray:var(--circ); stroke-dashoffset:var(--circ);  /* empty by default */
}
/* Playing → fill animates empty→full over 8s, looping in sync with the selection timer */
.price__autoplay.is-playing .price__ring-fill { animation:price-ring 8s linear infinite; }
@keyframes price-ring { from { stroke-dashoffset:var(--circ); } to { stroke-dashoffset:0; } }
/* Paused → full ring, no motion */
.price__autoplay.is-paused .price__ring-fill { stroke-dashoffset:0; animation:none; }
@media (prefers-reduced-motion: reduce) {
  .price__autoplay.is-playing .price__ring-fill { animation:none; stroke-dashoffset:0; }
}

/* Icon layer is concentric with the ring (both centered in the tile), so the icons center
   exactly. Visibility is per-icon only, so exactly one shows per state. */
.price__autoplay-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--c-12); }
.price__autoplay-icon path { fill:currentColor; }
.price__icon-pause { display:block; width:11.25px; height:13.5px; }   /* exact Figma vector size */
.price__icon-play  { display:none;  width:13.5px;  height:15.75px; transform:translateX(0.75px); }  /* +0.75px optical centering per Figma */
.price__autoplay.is-paused .price__icon-pause { display:none; }
.price__autoplay.is-paused .price__icon-play  { display:block; }

/* Block wrapper — desktop just holds the solution; mobile stacks tabs-row + carousel + footer (gap 24) */
.price__block { display:flex; flex-direction:column; gap:var(--gap-content); }
.price__tabs-row { display:none; }   /* mobile only */
.price__footer { display:none; }     /* mobile only */
.price__dots { display:flex; align-items:center; gap:var(--sp-2); }
.price__dot { width:8px; height:8px; border-radius:var(--radius-full); background:var(--c-5); }
.price__dot.is-active { background:var(--c-11); }
.price__arrows { display:flex; gap:var(--sp-2); }
.price-card__media { display:none; }  /* mobile only — image-topped card */

/* Cards (right, 4 cols) — fill the fixed 625 row and distribute so the first card's top and the
   last card's bottom line up with the media edges (no gap below the last card). */
.price__cards { grid-column:9 / span 4; align-self:start; }
.price__cards-row { display:flex; flex-direction:column; gap:var(--sp-2); }

/* All cards share ONE fixed box model so selection never reflows the column — only colors
   animate. Every card: 8px outer padding + a nested inner box (1px border + 16px padding).
   Non-selected blends the inner box into the card (same bg, transparent border); selected
   reveals it as the highlight. Content inset is identical in every state → no jump. */
.price-card {
  background:var(--c-2); border:var(--border-1) solid var(--c-4); border-radius:24px;
  padding:var(--sp-2);
  cursor:pointer; transition:background-color .2s ease, border-color .2s ease;
}
.price-card:hover:not(.is-selected) { border-color:var(--c-6); }
.price-card:focus-visible { outline:2px solid var(--acc-4); outline-offset:2px; }
.price-card__inner {
  display:flex; flex-direction:column; gap:var(--sp-4);
  background:var(--c-2); border:var(--border-1) solid transparent; border-radius:var(--radius-2xl);
  padding:16px;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.price-card.is-selected { background:var(--c-3); box-shadow:inset 0 0 4px var(--shadow-color); }
.price-card.is-selected .price-card__inner {
  background:var(--c-1); border-color:var(--c-5); box-shadow:0 0 2px var(--shadow-color);
}

.price-card__head { display:flex; align-items:flex-start; gap:var(--sp-2); }
.price-card__title { flex:1 0 0; min-width:0; font-weight:500; font-size:20px; line-height:1.2; letter-spacing:-0.04em; color:var(--c-12); }
.price-card__badge {
  flex:none; height:24px; display:inline-flex; align-items:center; padding:2px 8px;
  border:var(--border-1) solid var(--c-5); border-radius:var(--radius-xs);
  font-weight:500; font-size:12px; line-height:18px; text-transform:uppercase; color:var(--c-11); white-space:nowrap;
}
.price-card__divider { height:1px; width:100%; background:var(--c-5); }
.price-card__tiers { display:flex; gap:var(--sp-4); }
.price-tier { flex:1 0 0; min-width:0; display:flex; flex-direction:column; gap:12px; }
.price-tier__qty { font-weight:500; font-size:16px; line-height:1.5; color:var(--c-10); white-space:nowrap; }
.price-tier__value { display:flex; flex-direction:column; gap:var(--sp-4); align-items:flex-start; }
.price-tier__price { font-weight:500; font-size:20px; line-height:1.2; letter-spacing:-0.04em; color:var(--c-12); white-space:nowrap; }
/* Discount/base tags — default/hover = outline (c-8 border, c-12 text, Regular).
   Only the SELECTED card uses the solid fill (c-12 bg / c-1 text, Medium, uppercase). Themes 1:1. */
.price-tier__disc {
  display:inline-flex; align-items:center; padding:0 8px;
  border:var(--border-1) solid var(--c-8); border-radius:var(--radius-6);
  font-weight:400; font-size:16px; line-height:1.5; color:var(--c-12); white-space:nowrap;
}
.price-card.is-selected .price-tier__disc {
  background:var(--c-12); border-color:transparent;
  font-weight:500; text-transform:uppercase; color:var(--c-1);
}

/* --- Mobile (Figma 9489:41283): tabs row + horizontal carousel of image-topped cards + footer --- */
@media (max-width:1023px) {
  .price { padding-block:48px; }

  /* hide the desktop shared media + autoplay; the carousel block stacks tabs / cards / footer */
  .price__media { display:none; }
  .price__solution { display:block; height:auto; }

  /* tabs row: hug the triggers + left-align; scroll internally only once the row would exceed
     the available width (display minus the section padding) */
  .price__tabs-row {
    display:flex; gap:2px; padding:2px; width:max-content; max-width:100%; align-self:flex-start;
    overflow-x:auto; scrollbar-width:none;
    background:var(--c-3); border:var(--border-1) solid var(--c-6); border-radius:var(--radius-md);
  }
  .price__tabs-row::-webkit-scrollbar { display:none; }
  .price__tabs-row .price__tab { flex:none; justify-content:center; white-space:nowrap; }

  /* carousel viewport (rounded-32 per Figma) */
  .price__cards {
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:var(--sp-2);
    background:var(--c-3); border:var(--border-1) solid var(--c-4); border-radius:32px; padding:var(--sp-2);
    box-shadow:inset 0 0 4px var(--shadow-color); scrollbar-width:none;
  }
  .price__cards::-webkit-scrollbar { display:none; }
  .price__cards-row { flex-direction:row; gap:var(--sp-2); width:max-content; }

  /* self-contained card: image on top, then content; no "selected" highlight in the carousel */
  .price-card {
    flex:none; width:286px; scroll-snap-align:start; display:flex; flex-direction:column; gap:var(--sp-2);
    background:var(--c-1); border-color:var(--c-4); padding:var(--sp-2); box-shadow:none;
  }
  .price-card.is-selected { background:var(--c-1); box-shadow:none; }
  .price-card__media {
    display:block; position:relative; width:100%; aspect-ratio:1/1;
    border:var(--border-1) solid var(--c-3); border-radius:var(--radius-2xl); overflow:hidden;
  }
  .price-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .price-card__inner { background:transparent; border:0; border-radius:0; padding:var(--sp-2); gap:var(--sp-4); box-shadow:none; }
  .price-card.is-selected .price-card__inner { background:transparent; border:0; box-shadow:none; }

  /* mobile type sizes */
  .price-card__title { font-size:18px; letter-spacing:0; }
  .price-tier__price { font-size:18px; letter-spacing:0; }
  /* every tag is the outline style in the mobile carousel (no solid selected tag) */
  .price-card.is-selected .price-tier__disc {
    background:transparent; border:var(--border-1) solid var(--c-8);
    font-weight:400; text-transform:none; color:var(--c-12);
  }

  .price__footer { display:flex; align-items:center; justify-content:space-between; width:100%; }
}