/* ============================================================
   brand-v14.css — Pricing page card polish
   Loaded LAST (after brand-v13.css). Win cascade by specificity
   + !important on the fixes below.

   v14 fixes targeted in this file:
   1. Pricing cards: kill the word-per-line wrap caused by
      `grid-template-columns: 22px 1fr` on .price-card__features li.
      Switch to flexbox with min-width:0 on the text track so long
      lines actually flow normally.
   2. Loosen .price-grid minmax so two-plan layouts don't render
      cards too narrow on 992–1280px laptop screens.
   3. Style the new "Credit packs for logged-in users" block
      that pricing.php renders below the plan cards.
   ============================================================ */

/* ---------- 1. PRICE GRID: better breakpoints ---------- */
.price-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 760px){
  /* If we have exactly 2 plans, keep them comfortably wide */
  .price-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px){
  /* 3+ plans get 3 columns */
  .price-grid:has(> :nth-child(3)){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ---------- 2. PRICE CARDS: stop word-by-word wrap ---------- */
.price-card,
.plan-card{
  padding: 32px 26px !important;
  min-width: 0 !important;       /* allow card to actually shrink */
  display: flex;
  flex-direction: column;
}

.price-card__features,
.price-card ul,
.plan-card ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 22px !important;
}

/* OVERRIDE v13 grid layout — switch to flex */
.price-card__features li,
.price-card ul li,
.plan-card ul li{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 7px 0 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #1f1937;
  position: relative;
  grid-template-columns: none !important;  /* hard-kill the v13 grid */
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* The check bullet — fixed-size, never shrinks.
   CRITICAL: legacy site.css sets position:absolute + left:0 + top:3px on
   this pseudo-element, which makes it sit on top of the text in our new
   flex layout. We must hard-reset position:static + remove left/top so
   it participates in the flex flow as a normal child. */
.price-card__features li::before,
.price-card ul li::before,
.plan-card ul li::before{
  content: "" !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  flex-shrink: 0 !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background-color: #ede9fe !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8L7 11.5L12.5 5' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
  display: block !important;
  transform: none !important;
}

/* ALSO null out legacy padding-left on the li (site.css sets 26px) */
.price-card__features li,
.price-card ul li,
.plan-card ul li{
  padding-left: 0 !important;
}

/* Popular card keeps gold bullets */
.price-card--popular .price-card__features li::before,
.price-card--popular ul li::before{
  background-color: #facc15 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8L7 11.5L12.5 5' stroke='%231a0533' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}

/* Push CTA to bottom so cards align */
.price-card__cta{
  margin-top: auto !important;
  padding-top: 16px;
}

/* Narrow viewport — even safer settings */
@media (max-width: 480px){
  .price-card,
  .plan-card{ padding: 28px 22px !important; }
  .price-card__features li,
  .price-card ul li{ font-size: 14px !important; }
}

/* ============================================================
   3. CREDIT PACKS BLOCK (logged-in users only)
   Rendered by pricing.php inside .pricing-credit-packs
   ============================================================ */
.pricing-credit-packs{
  margin-top: 56px;
  padding: 40px 32px;
  background: linear-gradient(135deg, #faf8ff 0%, #f3eefe 100%);
  border: 1px solid #e9e3fb;
  border-radius: 22px;
}
.pricing-credit-packs__head{
  text-align: center;
  margin-bottom: 28px;
}
.pricing-credit-packs__head .eyebrow{
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
}
.pricing-credit-packs__head h2{
  font-size: 28px;
  margin: 14px 0 8px;
  color: #0f0a1f;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pricing-credit-packs__head p{
  color: #6b6680;
  font-size: 14.5px;
  max-width: 60ch;
  margin: 0 auto;
}

.credit-pack-block{
  margin-top: 28px;
}
.credit-pack-block__title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6d28d9;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.credit-pack-block__title.is-validator{ color: #047857; }
.credit-pack-block__title .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor;
}

.credit-pack-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.credit-pack-card{
  background: #fff;
  border: 1.5px solid #ece6fb;
  border-radius: 16px;
  padding: 22px 20px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.credit-pack-card:hover{
  border-color: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(124, 58, 237, 0.25);
}
.credit-pack-card__label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c3aed;
}
.credit-pack-card__label.is-validator{ color: #047857; }
.credit-pack-card__credits{
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: #0f0a1f;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.credit-pack-card__credits small{
  font-size: 13px;
  font-weight: 500;
  color: #6b6680;
  margin-left: 4px;
}
.credit-pack-card__price{
  font-size: 18px;
  font-weight: 700;
  color: #1f1937;
}
.credit-pack-card__price small{
  font-size: 11px;
  font-weight: 500;
  color: #6b6680;
  margin-left: 3px;
}
.credit-pack-card__rate{
  font-size: 11.5px;
  color: #6b6680;
  margin: 0;
}
.credit-pack-card__cta{
  margin-top: 12px;
}
.credit-pack-card__cta .btn{
  width: 100%;
  justify-content: center;
}