/* ==========================================================================
   GM CORE — Plans module CSS.
   SELF-CONTAINED: card shape, featured treatment, ribbon, checkmark list.
   Brand tokens have literal fallbacks via var(--x, LITERAL) so the widget looks
   correct even with no theme gm.css present. Agrees with gm.css when present.
   ========================================================================== */

/* Grid — 3 columns, featured centre slightly raised */
.gm-plans-widget .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
@media(max-width:900px){.gm-plans-widget .plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* Suppress any gm.css ::before seam on widget plan cards (plans use border, not seam) */
.gm-plans-widget .plan::before{display:none}

.gm-plans-widget .plan{
  background:#fff;border-radius:var(--r-lg,22px);padding:32px 28px;
  border:2px solid var(--border,#E1E7EE);box-shadow:var(--sh,0 4px 24px rgba(10,27,51,.07));
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);
}
.gm-plans-widget .plan:hover{transform:translateY(-6px);box-shadow:var(--sh-lg,0 18px 48px rgba(10,27,51,.14))}

/* Featured — gold border, warm gradient, lifted */
.gm-plans-widget .plan--hot{
  border-color:var(--gold,#D9A02B);
  box-shadow:var(--sh-gold,0 12px 32px rgba(217,160,43,.3));
  background:linear-gradient(180deg,#FFFCF5,#fff);
}

/* Ribbon */
.gm-plans-widget .plan__rib{
  position:absolute;top:16px;right:-34px;transform:rotate(45deg);
  background:var(--gold-grad,linear-gradient(135deg,#E8B33C,#D9A02B 48%,#B97512));
  color:var(--navy,#0A1B33);font-size:.625rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 40px;
  box-shadow:0 4px 14px rgba(217,160,43,.4);
}

.gm-plans-widget .plan__for{
  font-size:.75rem;font-weight:700;color:var(--gold-text,#8A5A0C);letter-spacing:.06em;
  text-transform:uppercase;margin:6px 0 10px;
}
.gm-plans-widget .plan h3{font-size:1.3rem;margin:0 0 12px;color:var(--navy,#0A1B33)}
.gm-plans-widget .plan__d{font-size:.875rem;color:var(--muted,#63738A);line-height:1.7;margin-bottom:22px}

.gm-plans-widget .plan__price{
  display:flex;align-items:baseline;gap:4px;padding-bottom:22px;
  margin-bottom:22px;border-bottom:1px solid var(--border,#E1E7EE);
}
.gm-plans-widget .plan__price b{font-size:2.125rem;font-weight:800;color:var(--navy,#0A1B33);letter-spacing:-.03em}
.gm-plans-widget .plan__price span{font-size:.875rem;color:var(--muted,#63738A);font-weight:600}

.gm-plans-widget .plan__l{list-style:none;margin:0 0 26px;padding:0}
.gm-plans-widget .plan__l li{
  font-size:.875rem;color:var(--dark,#16202E);padding:7px 0 7px 26px;position:relative;line-height:1.5;
}
.gm-plans-widget .plan__l li::before{
  content:"";position:absolute;left:0;top:8px;width:17px;height:17px;
  border-radius:50%;background:rgba(15,163,122,.13);
}
.gm-plans-widget .plan__l li::after{
  content:"";position:absolute;left:5px;top:12.5px;width:7px;height:4px;
  border-left:1.9px solid var(--bar-4,#0FA37A);border-bottom:1.9px solid var(--bar-4,#0FA37A);
  transform:rotate(-45deg);
}

.gm-plans-widget .plan .btn{margin-top:auto}
.gm-plans-widget .plan__note{text-align:center;font-size:.75rem;color:var(--muted,#63738A);margin-top:12px}

.gm-plans-widget .plans__foot{text-align:center;margin-top:36px;font-size:.875rem;color:var(--muted,#63738A)}

/* Self-sufficient button base + fallbacks so buttons have the correct padding,
   shape and colours even without the theme's gm.css. */
.gm-plans-widget .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 32px;border:2px solid transparent;border-radius:var(--r-pill,100px);
  font-size:.9375rem;font-weight:700;text-decoration:none;cursor:pointer;box-sizing:border-box;
  transition:transform .25s cubic-bezier(.4,0,.2,1),background .25s,box-shadow .25s;
}
.gm-plans-widget .btn--full{width:100%}
.gm-plans-widget .btn--navy{background:var(--navy,#0A1B33);color:#fff}
.gm-plans-widget .btn--navy:hover{background:var(--navy-3,#17375E);color:#fff}
.gm-plans-widget .btn--gold{
  background:var(--gold-grad,linear-gradient(135deg,#E8B33C,#D9A02B 48%,#B97512));
  color:var(--navy,#0A1B33);
}
.gm-plans-widget .btn--gold:hover{transform:translateY(-2px)}