/* Plan card: two states — collapsed (full spec list) and open ("Details":
   condensed summary + per-row accordion). Toggle driven by js/plan-card.js. */

/* Four cards per row at ≥1200px (percentage widths like the live Bootstrap
   grid), then 3 / 2 / 1. Flex + justify-content:center so an orphan last card
   is centred. align-items:flex-start (NOT stretch) so opening one card's
   Details grows only that card — its neighbours stay put. Collapsed cards line
   up because the header reserves a fixed height by construction (the name is
   always 2 lines, the operator always 1 — see .plan-card__name/__operator). */
.plan-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.plan-card {
  position: relative;
  flex: 0 0 calc(25% - 18px);
  max-width: calc(25% - 18px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid #f1f2f3;
  border-radius: 12px;
  /* rem so the card padding scales with the root like the live theme */
  padding: 1.25rem 1.125rem;
  /* soft, diffuse shadow — light, not heavy (matches live) */
  box-shadow: 0 6px 22px rgba(20, 40, 60, 0.05);
}

@media (max-width: 1199px) {
  .plan-card {
    flex-basis: calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
  }
}

@media (max-width: 991px) {
  .plan-card {
    flex-basis: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

@media (max-width: 767px) {
  .plan-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* 5G badge */
/* Hangs off the top-right corner (matches live) — smaller, pulled further out
   so it stays clear of the price. */
.plan-card__badge {
  position: absolute;
  top: -20px;
  right: -13px;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-action);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plan-card__badge img {
  width: 22px;
  height: 22px;
}

/* Header: operator logo · name/operator · prices */
.plan-card__head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.plan-card__logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-self: center;
  grid-column: 1;
}

/* Explicit columns so the name stays in the wide column even when a product
   has no operator logo (else it auto-flows into the narrow logo column). */
.plan-card__titles {
  min-width: 0;
  align-self: center;
  grid-column: 2;
}

/* Name always fills 2 lines (min-height reserves the second even for short
   names; line-clamp caps long ones) so every card's header is the same height
   and collapsed cards align without any JS. */
.plan-card__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  color: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em; /* 2 × line-height */
}

/* Operator stays on one line (ellipsis if long) — never wraps to a second row
   that would knock the header height out of alignment. */
.plan-card__operator {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.4);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card__prices {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  margin: 0;
  align-self: center;
}

/* No operator logo (e.g. the Havas storefront) — drop the reserved 40px logo
   column so the title/brand sit flush left instead of indented. */
.plan-card__head:not(:has(.plan-card__logo)) {
  grid-template-columns: 1fr auto;
}
.plan-card__head:not(:has(.plan-card__logo)) .plan-card__titles {
  grid-column: 1;
}
.plan-card__head:not(:has(.plan-card__logo)) .plan-card__prices {
  grid-column: 2;
}
/* Logo-less cards: a larger title, and the brand tucked closer beneath it
   (drop the 2-line name reservation the logo layout needs for alignment). */
.plan-card__head:not(:has(.plan-card__logo)) .plan-card__name {
  font-size: 1.1875rem;
  min-height: 0;
}
.plan-card__head:not(:has(.plan-card__logo)) .plan-card__operator {
  margin-top: 1px;
}

.plan-card__prices .price--struck {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-soft);
}

.plan-card__prices .price--sale {
  font-size: 1.25rem;
  font-weight: 500;
  color: #32b532;
}

.plan-card__prices .price:only-child {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-action);
}

/* Collapsed: full spec list. Height is animated (max-height) by plan-card.js
   when the card opens/closes — hence overflow:hidden + the transition. */
.plan-card__specs {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.plan-card__specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ededed;
  font-size: 1rem;
}

.plan-card__spec-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(0, 0, 0, 0.6);
}

.plan-card__spec-label i {
  font-size: 1.25rem;
  color: #25465f; /* live --primary (petrol navy) */
}

.plan-card__spec-value {
  font-weight: 300;
  color: #4b555d; /* grey (live), not heavy navy */
}

/* Open: condensed 3-item summary (Data · Calls & SMS · Validity). Kept in the
   flow (not display:none) and collapsed via max-height so plan-card.js can
   slide + fade it in/out. */
.plan-card__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.plan-card__summary li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  justify-content: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy, var(--color-text));
}

.plan-card__summary li + li {
  border-left: 1px solid #ededed;
}

.plan-card__summary i {
  font-size: 1.25rem;
  color: #25465f;
}

/* Buy button — pushed to the card bottom so buttons align across a row
   (cards are equal height via the flex row). Text is light + slightly larger
   (live uses no bold anywhere; a heavy button label sticks out). */
.plan-card__buy {
  width: 100%;
  margin-top: auto;
  font-size: 1.0625rem;
  font-weight: 400;
}

/* Out of stock — a non-interactive Buy button (sparks stock exhausted). */
.plan-card__buy.is-disabled {
  background: var(--color-border, #e3e8ee);
  color: var(--color-muted, #8a97a6);
  cursor: not-allowed;
  pointer-events: none;
  text-align: center;
}

/* Details toggle */
.plan-card__toggle {
  display: block;
  width: 100%;
  margin-top: 0.625rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy, var(--color-text));
}

.plan-card__toggle i {
  margin-left: 4px;
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.plan-card.is-open .plan-card__toggle i {
  transform: rotate(180deg);
}

/* Open: accordion of detail rows. Collapsed to 0 and slid open by
   plan-card.js (which then releases the cap so a detail row can expand). */
.plan-card__accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.plan-card__drow {
  border-top: 1px solid #ededed;
}

.plan-card__drow-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.plan-card__drow-icon {
  font-size: 1.25rem;
  color: #25465f;
  flex: none;
}

/* Label takes the left; value + caret sit at the far right — so the caret
   stays right-aligned even on rows with no value (eSIM Expiry, Top-Up…). */
.plan-card__drow-label {
  margin-right: auto;
  color: rgba(0, 0, 0, 0.6);
}

.plan-card__drow-value {
  font-weight: 300;
  color: #4b555d;
}

.plan-card__drow-caret {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-soft);
  transition: transform 0.2s ease;
  flex: none;
}

.plan-card__drow.is-open .plan-card__drow-caret {
  transform: rotate(180deg);
}

/* Animated body — height driven by js/plan-card.js (maxHeight). */
.plan-card__drow-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.plan-card__drow-inner {
  padding: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}

/* Cap the country list and scroll inside it — a wide-coverage plan (dozens of
   countries) must not stretch the card down the whole page. The detail-row
   animation measures this capped height, so it opens to the cap then scrolls. */
.plan-card__coverage {
  list-style: none;
  margin: 0;
  padding: 0 6px 12px 0;
  max-height: 236px;
  overflow-y: auto;
}

.plan-card__coverage li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
}

.plan-card__coverage .fi {
  width: 21px;
  height: 15px;
}

/* The page's own destination (e.g. France on /esim-france) stands out —
   bold label + a slightly larger flag. */
.plan-card__coverage li.is-active {
  font-weight: 600;
}

.plan-card__coverage li.is-active .fi {
  width: 25px;
  height: 18px;
}