/* ==========================================================================
   QynTro AI — premium pricing cards
   Shared by the public pricing section and the in-app Subscription Plans page:
   both Blade templates use the same class names (.price-card, .plan-title,
   .plan-feature-text), so one stylesheet covers both.

   Additive only. Every rule is scoped under .qp-priced, a class that
   qyntro-pricing.js adds to a card once it has restructured it — so if the JS
   fails to run, or a template update changes the markup, the original cards
   render untouched rather than half-styled.

   Cache-bust with ?v=N on every change.
   ========================================================================== */

.qp-priced {
  --qpp-card: #17191d;
  --qpp-surface: #0f1113;
  --qpp-line: #26292e;
  --qpp-line-strong: #34383f;
  --qpp-lime: #d1fe17;
  --qpp-lime-ink: #131517;
  --qpp-pink: #f72fa0;
  --qpp-text: #f7f7f8;
  --qpp-muted: #9b9ea6;
  --qpp-faint: #6b6e76;

  background: var(--qpp-card) !important;
  border: 1px solid var(--qpp-line) !important;
  border-radius: 18px !important;
  padding: 28px 24px 26px !important;
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: visible !important;
}

/* Featured card — lime hairline and a soft lift. The theme's own
   .price-card-border is neutralised so the two don't fight. */
.qp-priced.qp-feat {
  border-color: var(--qpp-lime) !important;
  box-shadow: 0 0 0 1px var(--qpp-lime), 0 18px 50px -22px rgba(209, 254, 23, .34) !important;
}
@media (min-width: 992px) {
  .qp-priced.qp-feat { transform: translateY(-10px); }
}

/* ---- plan name + price ---- */
.qp-priced .plan-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--qpp-muted) !important;
  margin-bottom: 4px !important;
}
.qp-priced .plan-cost {
  font-size: 46px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  color: var(--qpp-text) !important;
}
.qp-priced .plan-cost .fs-12,
.qp-priced .plan-cost .text-muted { color: var(--qpp-faint) !important; font-size: 13.5px !important; }

/* "Most Popular" — the only place pink appears, so it keeps its meaning */
.qp-priced .plan-featured,
.qp-priced .plan-featured-prepaid {
  position: absolute !important;
  top: -11px !important;
  left: 24px !important;
  background: var(--qpp-pink) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}

/* ---- "who it's for" line, under the price ---- */
.qp-priced .qp-pitch {
  color: var(--qpp-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 20px !important;
  min-height: 40px;          /* keeps the three CTAs on one baseline */
}

/* ---- CTA ---- */
.qp-priced .btn-primary-pricing {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 13px 16px !important;
  border-radius: 11px !important;
  border: 1px solid var(--qpp-line-strong) !important;
  background: transparent !important;
  color: var(--qpp-text) !important;
  transition: background .18s, border-color .18s;
}
.qp-priced .btn-primary-pricing:hover {
  background: #1d2025 !important;
  border-color: var(--qpp-lime) !important;
}
.qp-priced.qp-feat .btn-primary-pricing {
  background: var(--qpp-lime) !important;
  border-color: var(--qpp-lime) !important;
  color: var(--qpp-lime-ink) !important;
}
.qp-priced.qp-feat .btn-primary-pricing:hover { filter: brightness(1.08); }
.qp-priced .btn-primary-pricing:focus-visible { outline: 2px solid var(--qpp-lime); outline-offset: 3px; }

/* ---- credit spec block: hairline rules, figures right-aligned so the
        three cards can be read across ---- */
.qp-spec {
  border-top: 1px solid var(--qpp-line);
  border-bottom: 1px solid var(--qpp-line);
  padding: 4px 0;
  margin: 22px 0;
}
.qp-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
}
.qp-spec-row + .qp-spec-row { border-top: 1px solid var(--qpp-line); }
.qp-spec-row .qp-spec-label { color: var(--qpp-muted); font-size: 13px; }
.qp-spec-row .qp-spec-value { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--qpp-text); }
.qp-spec-row.qp-spec-key .qp-spec-value { color: var(--qpp-lime); font-size: 17px; }

/* The period marker is secondary to the number — same weight and size as it
   would drag attention off the figure that actually differs between plans. */
.qp-spec-value .qp-spec-per {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--qpp-faint);
  margin-left: 2px;
}

/* ---- model chips ---- */
.qp-models { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.qp-mgroup > h4 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--qpp-faint) !important;
  margin: 0 0 7px !important;
}
.qp-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 !important; margin: 0 !important; list-style: none !important;
}
.qp-chips li {
  font-size: 12px; line-height: 1; padding: 6px 9px;
  border-radius: 7px; white-space: nowrap;
  background: var(--qpp-surface);
  border: 1px solid var(--qpp-line);
  color: var(--qpp-text);
  margin: 0 !important;
}
.qp-chips li.qp-new { border-color: var(--qpp-lime); color: var(--qpp-lime); }

/* Flag 3 — a genuinely new model. Red rather than the lime used everywhere
   else on the card, so it reads as an annotation and not as another accent. */
.qp-chips li.qp-badge-new {
  border-color: #ff3b5c;
  color: var(--qpp-text);
}
.qp-chips li.qp-badge-new .qp-chip-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 20px;
  background: #ff3b5c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.6;
  vertical-align: middle;
}
/* Locked chips name what the next tier adds. The qualifier is appended here
   rather than written into the label: inline, "Claude & Gemini Pro — Plus"
   read as a model name with a version suffix. Rendering it as a separate,
   smaller, uppercase tag makes it unmistakably a status, not part of the name. */
.qp-chips li.qp-locked {
  color: var(--qpp-faint);
  border-style: dashed;
  /* Its own row: naming two or three models plus a status tag makes this chip
     far wider than the rest, and inline it overflowed the card and broke the
     grid. Full width with the tag pushed right reads as a footnote to the
     group above, which is what it is. */
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px !important;
  /* The base .qp-chips li sets white-space: nowrap, which is right for short
     chips but stopped this one wrapping — so it overflowed the card on the
     landing page and was clipped on the dashboard. */
  white-space: normal;
  line-height: 1.35;
  min-width: 0;
  text-align: left;
}
.qp-chips li.qp-locked::after {
  content: "NOT IN THIS PLAN";
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(155, 158, 166, .16);
  color: var(--qpp-faint);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* the four single-provider groups pair up, or seven groups make the card huge */
.qp-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; padding-top: 2px; }

/* ---- remaining feature lines ---- */
.qp-priced .qp-incl { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.qp-priced .qp-incl li {
  font-size: 13.5px !important;
  color: var(--qpp-muted) !important;
  margin-bottom: 7px !important;
}
.qp-priced .qp-incl li i { color: var(--qpp-lime) !important; }

/* not included on this tier — stated rather than omitted, so the gap between
   plans is visible at a glance */
.qp-priced .qp-incl li.qp-off { color: var(--qpp-faint) !important; }
.qp-priced .qp-incl li.qp-off i { color: var(--qpp-faint) !important; }

/* ---- one line beneath the whole grid ---- */
.qp-footnote {
  max-width: 62ch;
  margin: 34px auto 0 !important;
  text-align: center;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #6b6e76 !important;
}

/* ==========================================================================
   NO HOVER ANIMATION — ambient glow instead.
   The theme animates pricing cards on hover: .tabs-menu-body .card carries
   transition:all .2s, the shadow jumps, and .plan-cost turns #007bff — which
   also fights the lime. A pricing table is read and compared, not played with,
   so the movement is removed and replaced with a static glow that sits behind
   the card permanently.
   ========================================================================== */
.qp-priced,
.tabs-menu-body .card.qp-priced {
  transition: none !important;
  box-shadow:
    0 24px 60px -30px rgba(0, 0, 0, .85),
    0 0 44px -14px rgba(209, 254, 23, .10) !important;
}

.qp-priced:hover,
.qp-priced:focus,
.qp-priced:focus-within,
.tabs-menu-body .card.qp-priced:hover,
.tabs-menu-body .card.qp-priced:focus {
  box-shadow:
    0 24px 60px -30px rgba(0, 0, 0, .85),
    0 0 44px -14px rgba(209, 254, 23, .10) !important;
  transform: none !important;
}

/* the featured card keeps its stronger glow, hovered or not */
.qp-priced.qp-feat,
.qp-priced.qp-feat:hover,
.qp-priced.qp-feat:focus,
.tabs-menu-body .card.qp-priced.qp-feat:hover {
  box-shadow:
    0 0 0 1px var(--qpp-lime),
    0 24px 60px -28px rgba(0, 0, 0, .85),
    0 0 70px -18px rgba(209, 254, 23, .38) !important;
}
@media (min-width: 992px) {
  .qp-priced.qp-feat,
  .qp-priced.qp-feat:hover { transform: translateY(-10px) !important; }
}

/* the theme turns the price blue on hover — hold the brand colour */
.qp-priced:hover .plan-cost,
.qp-priced:focus .plan-cost,
.tabs-menu-body .card.qp-priced:hover .plan-cost {
  color: var(--qpp-text) !important;
}

/* ==========================================================================
   MINUTES — removed from the last places the admin toggle doesn't reach.
   Turning OFF "AI Speech to Text Feature Access" in admin removes the tiles on
   the dashboard and the plans page (both are wrapped in an @if on that
   setting). These three render unconditionally.
   ========================================================================== */

/* credits modal row + the rule that divides it */
.d-flex.justify-content-between:has(> div > i[data-tippy-minutes]),
hr:has(+ .d-flex.justify-content-between > div > i[data-tippy-minutes]) {
  display: none !important;
}

/* balance widget: two rows of two — Words+Media, then Characters+Minutes.
   Only the second column of the second row goes; Characters then fills the
   row on its own, because .col-sm grows to fill available space. The second
   row is the one carrying pb-4 WITHOUT pt-4. */
.card-footer > .row.text-center.pb-4:not(.pt-4) > .col-sm:nth-child(2) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .qp-priced, .qp-priced * { transition: none !important; }
  .qp-priced.qp-feat { transform: none !important; }
}