/* =============================================================================
   Pricing cards — shared by the public /harga page and the empty state of
   /langganan.
   =============================================================================

   Those two pages run on different stylesheets with different token names, so
   this file styles everything through a small bridge set (--pc-*) that each
   host sheet defines from its own palette. Nothing here names a colour.

   The form is the shadcn pricing-card the operator asked for, rebuilt for a
   server-rendered stack: an outer frame holding an inset header panel with a
   glass gradient across its top, the plan line, the price line, the action,
   then the body list. What is NOT carried over is the struck-through original
   price. Tahunan is a real price and says what it saves in words; a crossed-out
   number on a real billing surface would read as a claim, not a design flourish.
   ========================================================================== */

.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
  /* stretch, not start: the cards line up top and bottom, and each one fills its own column */
  align-items: stretch;
  max-width: 800px;
}

/* three plans need the room; below ~1180px they fall to two, then one */
.pc-grid.is-three { max-width: 1180px; }

/* A column, so the three cards can be the same height without leaving a hole under the short one:
   the feature list takes the slack and each card's closing line sits on the floor. */
.pc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  background: var(--pc-card);
  box-shadow: var(--pc-shadow);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.pc-card:not(.is-selected):hover { border-color: var(--pc-line-loud); }

/* the frame follows the member's choice, not the flag */
.pc-card.is-selected {
  border-color: var(--pc-accent);
  box-shadow: var(--pc-shadow), 0 0 0 1px var(--pc-accent);
}

.pc-flag {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--pc-accent-soft);
  color: var(--pc-accent-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 140ms ease, color 140ms ease;
}

/* the flag stays a fact about the plan; it only lights up while that card is chosen */
.pc-card:not(.is-selected) .pc-flag {
  background: var(--pc-head);
  color: var(--pc-mute);
  box-shadow: inset 0 0 0 1px var(--pc-line-loud);
}

/* the inset panel, with the glass wash over its top */
.pc-head {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--pc-line);
  border-radius: 10px;
  background: var(--pc-head);
}

.pc-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  border-radius: inherit;
  background: var(--pc-glass);
  pointer-events: none;
}

.pc-head > * { position: relative; }

.pc-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}

.pc-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pc-mute);
  font-size: 13px;
  font-weight: 500;
}
.pc-name { gap: 10px; }
.pc-name .ico { width: 20px; height: 20px; }
.pc-name b { color: var(--pc-ink); font-size: 22px; font-weight: 650; line-height: 1.1; letter-spacing: -0.025em; }

.pc-badge {
  padding: 1px 8px;
  border: 1px solid var(--pc-badge-line);
  border-radius: 99px;
  color: var(--pc-mute);
  font-size: 11px;
  white-space: nowrap;
}

.pc-price {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-bottom: 14px;
}

.pc-amount {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--pc-ink);
}

.pc-period {
  padding-bottom: 3px;
  color: var(--pc-mute);
  font-size: 12.5px;
}

.pc-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 110ms ease, border-color 110ms ease, color 110ms ease;
  border-color: var(--pc-line-loud);
  background: transparent;
  color: var(--pc-ink);
}
.pc-act:hover { background: var(--pc-hover); }
.pc-card.is-selected .pc-act { border-color: transparent; background: var(--pc-action); color: var(--pc-on-action); }
.pc-card.is-selected .pc-act:hover { background: var(--pc-action-hover); }
/* Billing: the plan the member already has is a label, not a button; the upgrade is the one action */
.pc-grid:not([data-pc-grid]) .pc-card { cursor: default; }
.pc-card .pc-act.is-current,
.pc-card.is-selected .pc-act.is-current { border-color: var(--pc-line-loud); background: transparent; color: var(--pc-mute); cursor: default; }
.pc-card .pc-act.is-primary { border-color: transparent; background: var(--pc-action); color: var(--pc-on-action); }
.pc-card .pc-act.is-primary:hover { background: var(--pc-action-hover); }
@media (prefers-reduced-motion: reduce) {
  .pc-card, .pc-flag, .pc-act { transition: none; }
}
.pc-act .ico { width: 15px; height: 15px; }

.pc-body { display: flex; flex-direction: column; flex: 1; padding: 14px 12px 10px; }
.pc-list { flex: 1; align-content: start; }
.pc-desc { margin: 0 0 16px; color: var(--pc-mute); font-size: 12px; line-height: 1.5; }
.pc-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.pc-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--pc-mute);
  font-size: 12.5px;
  line-height: 1.45;
}
.pc-list .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--pc-ink); }

/* "Termasuk semua di atas, ditambah" — a real divider between shared and extra */
.pc-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--pc-mute);
  font-size: 11.5px;
}
.pc-sep::before,
.pc-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pc-line-loud);
}

.pc-foot {
  margin: 16px 0 0;
  color: var(--pc-mute);
  font-size: 11.5px;
  line-height: 1.5;
}

/* Bulanan / Tahunan: a segmented switch spanning the grid's first row */
.pc-cycle {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--pc-line);
  border-radius: 99px;
  background: var(--pc-head);
}
.pc-cycle button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--pc-mute);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.pc-cycle button:hover { color: var(--pc-ink); }
.pc-cycle button[aria-pressed="true"] { background: var(--pc-card); color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-line-loud); }
.pc-save {
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--pc-accent-soft);
  color: var(--pc-accent);
  font-size: 11px;
  font-weight: 600;
}

/* each card carries one price line per cycle; the grid's data-cycle shows the picked one */
.pc-grid[data-cycle="monthly"] [data-show]:not([data-show="monthly"]),
.pc-grid[data-cycle="quarterly"] [data-show]:not([data-show="quarterly"]),
.pc-grid[data-cycle="yearly"] [data-show]:not([data-show="yearly"]) { display: none; }
.pc-price-set { margin-bottom: 14px; }
.pc-price-set .pc-price { margin-bottom: 0; }
.pc-equiv { margin: 6px 0 0; color: var(--pc-mute); font-size: 11.5px; }

@media (prefers-reduced-motion: reduce) {
  .pc-cycle button { transition: none; }
}

@media (max-width: 620px) {
  .pc-grid { grid-template-columns: minmax(0, 1fr); }
}