/* ==========================================================================
   Pearl IMS — Pricing page (templates/page-pricing.php)
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */






/* ---- Plan cards ---------------------------------------------------------- */
.pim-pricing-plans-section{ padding-top:clamp(40px,5vw,64px); }
/* Four tiers: 4-up on wide screens, 2x2 on tablets, stacked on phones. */
.pim-pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; }
@media (max-width: 1280px){ .pim-pricing-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (max-width: 720px){ .pim-pricing-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }

.pim-plan{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--pim-border); border-radius:var(--pim-radius-xl); padding:32px 28px; box-shadow:var(--pim-shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pim-plan:hover{ transform:translateY(-3px); box-shadow:var(--pim-shadow-md); border-color:var(--pim-border-strong); }

/* The highlighted plan sits proud of its neighbours. */
.pim-plan--popular{ border-color:var(--pim-blue); border-width:2px; padding:38px 28px 32px; box-shadow:0 24px 48px -28px rgba(27,63,224,.45); }
.pim-plan--popular:hover{ border-color:var(--pim-blue); }
@media (min-width: 1001px){ .pim-plan--popular{ margin-top:-14px; } }

.pim-plan__badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--pim-blue); color:#fff; font:600 10.5px/1 var(--pim-font-mono); letter-spacing:.1em; padding:7px 14px; border-radius:999px; white-space:nowrap; box-shadow:0 6px 16px rgba(27,63,224,.35); }

.pim-plan__name{ margin:0; font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--pim-text); }
.pim-plan__price{ margin:14px 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.pim-plan__amount{ font-weight:800; font-size:clamp(30px,3.4vw,38px); line-height:1.05; letter-spacing:-.03em; color:var(--pim-text); }
.pim-plan__period{ font-size:14.5px; font-weight:600; color:var(--pim-text-faint); }
.pim-plan__blurb{ margin:12px 0 0; font-size:14.5px; line-height:1.55; color:var(--pim-text-muted-2); }
.pim-plan__cta{ margin-top:24px; }
.pim-plan__features-intro{ margin:26px 0 14px; padding-top:22px; border-top:1px solid var(--pim-border-4); font:600 11px/1 var(--pim-font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--pim-text-faint-2); }
.pim-plan__features{ display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none; }
.pim-plan__features li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.5; color:#3A415A; list-style:none; }
.pim-plan__tick{ flex:none; width:19px; height:19px; margin-top:1px; border-radius:50%; background:var(--pim-green-bg); color:var(--pim-green); display:flex; align-items:center; justify-content:center; }
.pim-plan--popular .pim-plan__tick{ background:var(--pim-blue-light); color:var(--pim-blue); }

/* ---- Included with every plan -------------------------------------------- */
.pim-pricing-included{ background:var(--pim-surface-tint-2); border-top:1px solid var(--pim-border-4); border-bottom:1px solid var(--pim-border-4); padding:clamp(40px,5vw,56px) 0; }
.pim-pricing-included__title{ margin:0 0 26px; text-align:center; font-weight:800; font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em; color:var(--pim-text); }
.pim-pricing-included__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width: 860px){ .pim-pricing-included__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 460px){ .pim-pricing-included__grid{ grid-template-columns:1fr; } }
.pim-included-item{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--pim-border); border-radius:var(--pim-radius-md); padding:16px 18px; }
.pim-included-item__icon{ flex:none; width:38px; height:38px; border-radius:10px; background:var(--pim-blue-light); color:var(--pim-blue); display:flex; align-items:center; justify-content:center; }
.pim-included-item__label{ font-weight:700; font-size:14.5px; color:var(--pim-text); }

/* ---- Comparison table ---------------------------------------------------- */
.pim-compare-scroll{ margin-top:40px; overflow-x:auto; border:1px solid var(--pim-border); border-radius:var(--pim-radius-lg); background:#fff; -webkit-overflow-scrolling:touch; }
.pim-compare-scroll:focus-visible{ outline:2px solid var(--pim-blue); outline-offset:2px; }
.pim-compare{ width:100%; min-width:min(620px,100%); border-collapse:collapse; font-size:14.5px; }

.pim-compare thead th{ position:sticky; top:0; z-index:2; background:#fff; padding:18px 16px; text-align:center; border-bottom:1px solid var(--pim-border); vertical-align:bottom; }
.pim-compare thead th.pim-compare__feature-col{ text-align:left; font:600 11px/1 var(--pim-font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--pim-text-faint-2); }
.pim-compare__plan-name{ display:block; font-weight:800; font-size:16px; color:var(--pim-text); }
.pim-compare__plan-price{ display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--pim-text-faint); }

/* Keep the feature name readable while the plan columns scroll under it. */
.pim-compare__feature-col{ position:sticky; left:0; z-index:1; background:#fff; text-align:left !important; font-weight:600; color:var(--pim-text); min-width:min(220px,100%); box-shadow:1px 0 0 var(--pim-border-4); }
.pim-compare thead th.pim-compare__feature-col{ z-index:3; }

.pim-compare tbody th,
.pim-compare tbody td{ padding:13px 16px; border-bottom:1px solid var(--pim-border-4); text-align:center; }
.pim-compare tbody tr:last-child th,
.pim-compare tbody tr:last-child td{ border-bottom:none; }
.pim-compare tbody tr:hover th,
.pim-compare tbody tr:hover td{ background:var(--pim-surface-tint); }

/* Tint the highlighted plan's column down the whole table. */
.pim-compare th.is-popular,
.pim-compare td.is-popular{ background:rgba(27,63,224,.035); }
.pim-compare tbody tr:hover td.is-popular{ background:rgba(27,63,224,.06); }

.pim-compare__yes{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--pim-green-bg); color:var(--pim-green); }
.pim-compare td.is-popular .pim-compare__yes{ background:var(--pim-blue-light); color:var(--pim-blue); }
.pim-compare__no{ color:#C2C8DA; font-weight:700; }

.pim-compare__hint{ margin:12px 0 0; font-size:12.5px; color:var(--pim-text-faint-2); text-align:center; }
@media (min-width: 760px){ .pim-compare__hint{ display:none; } }

/* Tighter plan cards, since four of them share the row --------------------- */
@media (min-width: 1281px){
  .pim-plan{ padding:28px 22px; }
  .pim-plan__amount{ font-size:clamp(28px,2.4vw,36px); }
  .pim-plan__features li{ font-size:13.5px; }
}

/* Optional add-ons -------------------------------------------------------- */
.pim-addons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px 24px; margin-top:34px; }
.pim-addons__item{ display:flex; align-items:center; gap:11px; padding:13px 16px; border:1px solid var(--pim-border); border-radius:12px; background:#fff; font-size:14.5px; font-weight:500; color:var(--pim-text); }
.pim-addons__icon{ flex:none; display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; background:var(--pim-blue-light); color:var(--pim-blue); }