/* =============================================================
   CephX Pricing — cephx-pricing.css
   Used by: page-pricing-page.php + template-pricing-iframe.php
   via parts/pricing-cards.php
   ============================================================= */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --cp-bg:           #CCDFFE;
  --cp-card:         #ffffff;
  --cp-text:         #0b1730;
  --cp-muted:        #5b6b82;
  --cp-line:         #c9d8ef;
  --cp-accent:       #005DFC;
  --cp-accent-dark:  #0047c7;
  --cp-navy:         #172333;
  --cp-shadow:       0 20px 45px rgba(18, 38, 63, .16);
  --cp-green-start:  #88D29B;
  --cp-green-end:    #7DCE58;
}

/* ── Pricing page wrapper ──────────────────────────────────── */
.cephx-pricing-wrap {
  font-family: Inter, Arial, sans-serif;
  color: var(--cp-text);
  min-height: 100vh;
  background-color: #deeafe;
}

/* Public page only: light gradient background */
body.cephx-pricing-public .cephx-pricing-wrap {
  background:
    linear-gradient(rgba(245, 248, 255, .9), rgba(245, 248, 255, .92)),
    #e8f0fe;
}

/* ── Hero ──────────────────────────────────────────────────── */
.cp-hero {
  text-align: center;
  padding: 60px 20px 42px;
}

.cp-hero h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--cp-text);
  font-weight: 900;
  text-transform: uppercase;
}

/* ── Yearly / Monthly toggle ───────────────────────────────── */
.cp-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid #dbe1e8;
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
  box-shadow: 0 8px 18px rgba(18, 38, 63, .08);
  margin-top: 28px;
}

.cp-toggle button {
  border: 0;
  background: transparent;
  padding: 11px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  color: #526175;
  cursor: pointer;
  font-family: inherit;
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .2s ease;
}

.cp-toggle button:hover:not(.active),
.cp-toggle button:focus:not(.active){
  background: #eaf2ff;
  color: var(--cp-accent);
  transform: translateY(-1px);
}

.cp-toggle button:active {
  transform: translateY(0);
}

.cp-toggle button.active {
  background: var(--cp-accent);
  color: #fff;
  box-shadow:
    0 4px 12px rgba(0, 93, 252, .25),
    0 0 0 1px rgba(255,255,255,.15) inset;
}


/* ── Cards grid ────────────────────────────────────────────── */
.cp-cards {
  width: min(1240px, 92%);
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  filter: drop-shadow(var(--cp-shadow));
}

/* ── Single card ───────────────────────────────────────────── */
.cp-card {
  background: var(--cp-card);
  padding: 34px 28px 24px;
  border-right: 1px solid var(--cp-line);
  position: relative;
  transition: opacity .25s;
}

.cp-card:first-child { border-radius: 8px 0 0 8px; }
.cp-card:last-child  { border-radius: 0 8px 8px 0; border-right: 0; }

/* Featured card */
.cp-card.cp-featured {
  border: 2px solid var(--cp-accent);
  border-radius: 8px !important;
  z-index: 2;
}

/* Disabled card (iframe — lower plan) */
.cp-card.cp-disabled {
  opacity: .45;
  pointer-events: none;
}

/* Hidden card (iframe — plan lower than current, hide completely) */
.cp-card.cp-hidden {
  display: none;
}

/* ── Upgrade grid: flex centering when some plan cards are hidden ─
   Applied when the user's plan tier is above 2d_basic, so 1–3
   cards are visible.  flex + justify-content centers them.      ── */
.cp-cards--upgrade {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  filter: none; /* each card carries its own shadow instead */
}

.cp-cards--upgrade .cp-card {
  flex: 0 1 310px;
  min-width: 240px;
  border-radius: 8px !important;
  border: 1px solid var(--cp-line) !important;
  box-shadow: var(--cp-shadow);
}

.cp-cards--upgrade .cp-card.cp-featured {
  border-color: var(--cp-accent) !important;
  border-width: 2px !important;
}

/* Greyed label for case options the user cannot select (same-tier, ≤ current count) */
.cp-case-select option:disabled {
  color: #aab3c0;
}

/* ── Badge ─────────────────────────────────────────────────── */
.cp-badge {
  position: absolute;
  top: 30px;
  right: -8px;
  background: #303b49;
  color: #fff;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: .04em;
}

/* "Current plan" badge variant */
.cp-badge.cp-badge--current {
  background: var(--cp-accent);
}

/* ── Plan name ─────────────────────────────────────────────── */
.cp-plan-name {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--cp-navy);
  letter-spacing: .02em;
}

/* ── Price row ─────────────────────────────────────────────── */
.cp-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px;
}

.cp-price {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--cp-text);
  line-height: 1;
}

.cp-price-currency {
  color: var(--cp-muted);
  font-size: 13px;
  font-weight: 600;
}

/* ── Case selector ─────────────────────────────────────────── */
.cp-case-label {
  display: block;
  color: var(--cp-muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cp-case-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%233a4655' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 12px 36px 12px 14px;
  color: #263347;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color .2s;
}

.cp-case-select:focus {
  outline: none;
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(0, 93, 252, .1);
}

/* ── Per-case note ─────────────────────────────────────────── */
.cp-per-case {
  min-height: 18px;
  color: var(--cp-muted);
  font-size: 12px;
  margin-bottom: 18px;
}

/* ── CTA button ────────────────────────────────────────────── */
.cp-cta {
  width: 100%;
  background: linear-gradient(135deg, var(--cp-green-start) 0%, var(--cp-green-end) 100%);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 15px 18px;
  font-weight: 900;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  margin: 4px 0 24px;
  box-shadow: 0 9px 18px rgba(125, 206, 88, .28);
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: filter .2s;
}

.cp-cta:hover  { filter: brightness(1.06); }
.cp-cta:active { filter: brightness(.96); }

/* Disabled CTA (iframe mode) */
.cp-card.cp-disabled .cp-cta {
  background: #cdd4dc;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Features list ─────────────────────────────────────────── */
.cp-features {
  border-top: 1px solid var(--cp-line);
  margin-top: 4px;
}

.cp-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--cp-line);
  padding: 13px 0;
  color: #314055;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.cp-feature-check {
  color: var(--cp-accent);
  font-size: 18px;
  line-height: 1.2;
  flex: 0 0 auto;
}

/* ── Disclaimer ────────────────────────────────────────────── */
.cp-disclaimer {
  width: min(1240px, 92%);
  margin: 24px auto 40px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--cp-muted);
  text-align: center;
}

.cp-disclaimer a {
  color: var(--cp-accent);
  text-decoration: underline;
}

/* ── Contact CTA ───────────────────────────────────────────── */
.cp-contact-cta {
  text-align: center;
  margin: 20px 0 8px;
}

.cp-contact-cta button {
  background: transparent;
  border: 2px solid var(--cp-accent);
  color: var(--cp-accent);
  border-radius: 999px;
  padding: 13px 32px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .2s, color .2s;
}

.cp-contact-cta button:hover,
.cp-contact-cta button:focus {
  background: var(--cp-accent);
  color: #fff;
}

/* ── Entry Popup (2D / 3D choice) — public page only ──────── */
.cp-entry-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 50, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  backdrop-filter: blur(3px);
}

.cp-entry-popup {
  background: #fff;
  border-radius: 20px;
  padding: 48px 40px 40px;
  max-width: 860px;
  width: 92%;
  box-shadow: 0 24px 60px rgba(10, 20, 60, .18);
  text-align: center;
}

.cp-entry-popup h2 {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900;
  color: var(--cp-navy);
  margin: 0 0 12px;
  line-height: 1.1;
}

.cp-entry-popup .cp-entry-subtitle {
  font-size: 17px;
  color: var(--cp-muted);
  margin: 0 0 40px;
}

.cp-entry-cards {
  display: flex;
  gap: 28px;
  justify-content: center;
}

.cp-entry-card {
  flex: 1;
  max-width: 340px;
  border: 2px solid var(--cp-line);
  border-radius: 16px;
  padding: 28px 24px 24px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
}

.cp-entry-card:hover {
  border-color: var(--cp-accent);
  box-shadow: 0 8px 24px rgba(0, 93, 252, .12);
}

.cp-entry-card img {
  width: 100%;
  border-radius: 10px;
  display: block;
  margin-bottom: 18px;
}

.cp-entry-card h3 {
  font-size: 22px;
  font-weight: 900;
  color: var(--cp-navy);
  margin: 0 0 10px;
}

.cp-entry-card p {
  font-size: 14px;
  color: var(--cp-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Contact popup (Magnific) ──────────────────────────────── */
.cp-contact-popup {
  max-width: 540px;
  width: 92%;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
}

.cp-contact-popup h3 {
  font-size: 22px;
  font-weight: 900;
  color: var(--cp-navy);
  margin: 0 0 22px;
  text-align: center;
}

.cp-contact-popup .cp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.cp-contact-popup label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-navy);
}

.cp-contact-popup input,
.cp-contact-popup textarea {
  border: 1.5px solid #d0ddf8;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--cp-text);
  background: #f4f8ff;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}

.cp-contact-popup input:focus,
.cp-contact-popup textarea:focus {
  outline: none;
  border-color: var(--cp-accent);
  background: #fff;
}

.cp-contact-popup textarea { resize: vertical; min-height: 90px; }

.cp-contact-popup .cp-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cp-contact-popup .cp-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--cp-green-start), var(--cp-green-end));
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 8px 18px rgba(125, 206, 88, .28);
  transition: filter .2s;
}

.cp-contact-popup .cp-submit:hover { filter: brightness(1.06); }

.cp-contact-popup .cp-form-msg {
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px;
}

.cp-contact-popup .cp-form-msg.success { color: #2a7a18; }
.cp-contact-popup .cp-form-msg.error   { color: #c0392b; }

.cp-contact-popup .mfp-close:hover{
    background-color: transparent;
}

/* ── Entry popup ─────────────────────── */
.cp-entry-btn{
    border: 1px solid transparent;
    border-radius: 14px;
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(7, 21, 50, 0.06);
    transition: 
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.cp-entry-btn:hover{
    box-shadow: 0 14px 35px rgba(7, 21, 50, 0.12),
                0 0 0 1px rgba(99, 102, 241, 0.08);
}

/* ── Confirmation popup (iframe only) ─────────────────────── */
.cp-confirm-popup {
  max-width: 460px;
  width: 92%;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
}

.cp-confirm-popup p {
  font-size: 16px;
  color: var(--cp-text);
  line-height: 1.6;
  margin: 0 0 28px;
}

.cp-confirm-popup .cp-confirm-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.cp-confirm-popup .cp-btn-cancel {
  background: transparent;
  border: 1.5px solid #c0cad8;
  color: var(--cp-muted);
  border-radius: 10px;
  padding: 13px 28px;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s;
}

.cp-confirm-popup .cp-btn-cancel:hover { border-color: #8a96a6; }

.cp-confirm-popup .cp-btn-confirm {
  background: linear-gradient(135deg, var(--cp-green-start), var(--cp-green-end));
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 13px 28px;
  font-weight: 900;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(125, 206, 88, .28);
  transition: filter .2s;
}

.cp-confirm-popup .cp-btn-confirm:hover { filter: brightness(1.06); }

/* ── Iframe header ─────────────────────────────────────────── */
.cp-iframe-header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
  padding: 0 6%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cp-iframe-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.cp-iframe-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cp-muted);
  box-shadow: none !important;
}

.cp-iframe-steps .cp-step-active {
  color: var(--cp-accent);
  font-weight: 700;
}

.cp-iframe-steps .cp-step-sep { color: #bbc6d4; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cp-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    filter: none;
  }

  .cp-card,
  .cp-card:first-child,
  .cp-card:last-child,
  .cp-card.cp-featured {
    border-radius: 8px !important;
    border: 1px solid var(--cp-line);
    margin: 0;
    box-shadow: var(--cp-shadow);
  }

  .cp-card.cp-featured { border-color: var(--cp-accent); border-width: 2px; }
}

@media (max-width: 680px) {
  .cp-cards { grid-template-columns: 1fr; width: min(430px, 92%); }
  .cp-entry-cards { flex-direction: column; align-items: center; }
  .cp-entry-card  { max-width: 100%; }
  .cp-contact-popup .cp-contact-row { grid-template-columns: 1fr; }
  .cp-iframe-header { padding: 0 20px; }
}