/* =============================================================
   1000X Pricing & Popup System — Public Stylesheet
   Premium dark UI with glassmorphism & glow effects
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ─── Custom Properties ──────────────────────────────────── */
:root {
  --xpps-font:        'Plus Jakarta Sans', system-ui, sans-serif;
  --xpps-mono:        'Space Grotesk', monospace;

  /* Brand palette */
  --xpps-accent-1:    #f97316;  /* orange */
  --xpps-accent-2:    #dc2626;  /* red    */
  --xpps-accent-mid:  #ef4444;
  --xpps-glow:        rgba(249, 115, 22, 0.35);
  --xpps-glow-strong: rgba(249, 115, 22, 0.6);
  --xpps-glow-red:    rgba(220, 38, 38, 0.4);

  /* Surface */
  --xpps-bg-deep:     #050810;
  --xpps-bg-card:     rgba(13, 17, 34, 0.85);
  --xpps-bg-card-ft:  rgba(15, 10, 5, 0.92); /* featured card */
  --xpps-border:      rgba(249, 115, 22, 0.22);
  --xpps-border-ft:   rgba(249, 115, 22, 0.75);
  --xpps-glass-blur:  16px;

  /* Text */
  --xpps-text:        #e2e8f0;
  --xpps-text-muted:  #94a3b8;
  --xpps-text-dim:    #64748b;

  /* Spacing & shape */
  --xpps-radius:      18px;
  --xpps-radius-sm:   10px;
  --xpps-radius-pill: 999px;
  --xpps-gap:         28px;

  /* Transition */
  --xpps-transition:  0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  --xpps-ease:        0.22s ease;
}

/* ─── Utility Reset ─────────────────────────────────────── */
.xpps-pricing-wrap *,
.xpps-popup-overlay * {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* ═══════════════════════════════════════════════════════════
   PRICING TABLE
   ═══════════════════════════════════════════════════════════ */

.xpps-pricing-wrap {
  font-family:    var(--xpps-font);
  color:          var(--xpps-text);
  padding:        60px 20px;
  position:       relative;
  overflow:       hidden;
}

/* Ambient background glow */
.xpps-pricing-wrap::before {
  content:         '';
  position:        absolute;
  inset:           0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 50%, rgba(249,115,22,.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(220,38,38,.05)  0%, transparent 70%);
  pointer-events:  none;
  z-index:         0;
}

/* ─── Billing Toggle ─────────────────────────────────────── */
.xpps-billing-toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  margin-bottom:   52px;
  position:        relative;
  z-index:         1;
}

.xpps-billing-label {
  font-size:       0.95rem;
  font-weight:     500;
  color:           var(--xpps-text-muted);
  transition:      color var(--xpps-ease);
  cursor:          pointer;
}
.xpps-billing-label--active { color: var(--xpps-text); }

.xpps-save-badge {
  display:         inline-block;
  padding:         2px 10px;
  border-radius:   var(--xpps-radius-pill);
  background:      linear-gradient(135deg, rgba(249,115,22,.18), rgba(220,38,38,.18));
  border:          1px solid rgba(249,115,22,.35);
  font-size:       0.75rem;
  font-style:      normal;
  color:           var(--xpps-accent-1);
  margin-left:     6px;
}

/* Toggle switch */
.xpps-period-switch {
  position:       relative;
  display:        inline-block;
  width:          52px;
  height:         28px;
  cursor:         pointer;
}
.xpps-period-switch input { opacity: 0; width: 0; height: 0; }
.xpps-period-slider {
  position:        absolute;
  inset:           0;
  border-radius:   var(--xpps-radius-pill);
  background:      rgba(255,255,255,.1);
  border:          1px solid rgba(249,115,22,.3);
  transition:      background var(--xpps-ease), box-shadow var(--xpps-ease);
}
.xpps-period-slider::before {
  content:         '';
  position:        absolute;
  width:           20px;
  height:          20px;
  left:            3px;
  top:             3px;
  border-radius:   50%;
  background:      var(--xpps-text-muted);
  transition:      transform var(--xpps-transition), background var(--xpps-ease);
}
.xpps-period-input:checked + .xpps-period-slider {
  background:      linear-gradient(135deg, var(--xpps-accent-1), var(--xpps-accent-2));
  border-color:    transparent;
  box-shadow:      0 0 16px var(--xpps-glow);
}
.xpps-period-input:checked + .xpps-period-slider::before {
  transform:       translateX(24px);
  background:      #fff;
}

/* ─── Plans Grid ─────────────────────────────────────────── */
.xpps-plans-grid {
  display:               grid;
  gap:                   var(--xpps-gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items:           start;
  position:              relative;
  z-index:               1;
}

.xpps-plans-grid.xpps-plans-count-3 {
  grid-template-columns: repeat(3, 1fr);
}
.xpps-plans-grid.xpps-plans-count-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width:             780px;
  margin-inline:         auto;
}
.xpps-plans-grid.xpps-plans-count-1 {
  grid-template-columns: 1fr;
  max-width:             380px;
  margin-inline:         auto;
}

/* ─── Plan Card ──────────────────────────────────────────── */
.xpps-plan {
  position:        relative;
  background:      var(--xpps-bg-card);
  border:          1px solid var(--xpps-border);
  border-radius:   var(--xpps-radius);
  padding:         36px 32px 32px;
  backdrop-filter: blur(var(--xpps-glass-blur));
  -webkit-backdrop-filter: blur(var(--xpps-glass-blur));
  transition:      transform var(--xpps-transition), box-shadow var(--xpps-ease), border-color var(--xpps-ease);
  overflow:        visible;
  display:         flex;
  flex-direction:  column;
  gap:             24px;
}

.xpps-plan::after {
  content:         '';
  position:        absolute;
  inset:           0;
  border-radius:   inherit;
  background:      linear-gradient(160deg, rgba(255,255,255,.04) 0%, transparent 60%);
  pointer-events:  none;
}

.xpps-plan:hover {
  transform:        translateY(-6px);
  border-color:     rgba(249,115,22,.45);
  box-shadow:
    0 0 0 1px rgba(249,115,22,.15),
    0 24px 60px rgba(0,0,0,.5),
    0 0 40px rgba(249,115,22,.08);
}

/* Featured card */
.xpps-plan--featured {
  background:      var(--xpps-bg-card-ft);
  border-color:    var(--xpps-border-ft);
  box-shadow:
    0 0 0 1px rgba(249,115,22,.25),
    0 0 60px rgba(249,115,22,.12),
    inset 0 1px 0 rgba(249,115,22,.15);
  transform:       translateY(-10px) scale(1.02);
}
.xpps-plan--featured:hover {
  transform:       translateY(-16px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(249,115,22,.5),
    0 30px 80px rgba(0,0,0,.6),
    0 0 80px rgba(249,115,22,.2);
}

/* Glow border top on featured */
.xpps-plan--featured::before {
  content:         '';
  position:        absolute;
  top:             -1px;
  left:            20%;
  right:           20%;
  height:          2px;
  background:      linear-gradient(90deg, transparent, var(--xpps-accent-1), var(--xpps-accent-2), transparent);
  border-radius:   var(--xpps-radius-pill);
}

/* ─── Badge ──────────────────────────────────────────────── */
.xpps-plan__badge {
  position:        absolute;
  top:             -14px;
  left:            50%;
  transform:       translateX(-50%);
  white-space:     nowrap;
  z-index:         2;
}
.xpps-plan__badge span {
  display:         inline-block;
  padding:         5px 18px;
  border-radius:   var(--xpps-radius-pill);
  font-size:       0.75rem;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  background:      linear-gradient(135deg, var(--xpps-accent-1), var(--xpps-accent-2));
  color:           #fff;
  box-shadow:      0 0 20px var(--xpps-glow-strong);
}

/* ─── Plan Header ────────────────────────────────────────── */
.xpps-plan__header { display: flex; flex-direction: column; gap: 8px; }

.xpps-plan__name {
  font-size:       1.3rem;
  font-weight:     700;
  letter-spacing:  -0.02em;
  color:           #fff;
}

.xpps-plan__desc {
  font-size:       0.875rem;
  line-height:     1.6;
  color:           var(--xpps-text-muted);
}

/* ─── Price ──────────────────────────────────────────────── */
.xpps-plan__price {
  display:        flex;
  align-items:    baseline;
  gap:            2px;
}

.xpps-price-monthly,
.xpps-price-yearly {
  display:        flex;
  align-items:    baseline;
  gap:            2px;
  width:          100%;
}

.xpps-price__currency {
  font-size:      1.4rem;
  font-weight:    600;
  color:          var(--xpps-text-muted);
  margin-top:     6px;
  align-self:     flex-start;
}

.xpps-price__amount {
  font-size:       clamp(2.8rem, 5vw, 3.8rem);
  font-weight:     800;
  letter-spacing:  -0.04em;
  line-height:     1;
  background:      linear-gradient(135deg, #fff 40%, rgba(255,255,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.xpps-price__period {
  font-size:      0.9rem;
  color:          var(--xpps-text-muted);
  margin-left:    4px;
  align-self:     flex-end;
  margin-bottom:  8px;
}

/* ─── Features List ──────────────────────────────────────── */
.xpps-plan__features {
  list-style:      none;
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  flex:            1;
  padding-top:     4px;
  border-top:      1px solid rgba(255,255,255,.07);
}

.xpps-plan__feature {
  display:         flex;
  align-items:     flex-start;
  gap:             12px;
  font-size:       0.9rem;
  line-height:     1.5;
}

.xpps-feature-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  font-size:       0.75rem;
  font-weight:     700;
  flex-shrink:     0;
  margin-top:      1px;
}

.xpps-feature-icon--check {
  background: rgba(34, 197, 94, .15);
  color:      #4ade80;
  border:     1px solid rgba(34, 197, 94, .3);
}
.xpps-feature-icon--cross {
  background: rgba(239, 68, 68, .12);
  color:      #f87171;
  border:     1px solid rgba(239, 68, 68, .25);
}
.xpps-feature-icon--dash {
  background: rgba(148, 163, 184, .1);
  color:      var(--xpps-text-dim);
  border:     1px solid rgba(148, 163, 184, .2);
}

.xpps-feature--cross .xpps-feature-text {
  color:          var(--xpps-text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(148,163,184,.4);
}

.xpps-feature-text {
  color:          var(--xpps-text-muted);
}

/* ─── CTA Button ─────────────────────────────────────────── */
.xpps-plan__footer { margin-top: auto; }

.xpps-plan__btn {
  display:          block;
  width:            100%;
  padding:          14px 24px;
  border-radius:    var(--xpps-radius-pill);
  text-align:       center;
  font-family:      var(--xpps-font);
  font-size:        0.95rem;
  font-weight:      700;
  letter-spacing:   0.01em;
  text-decoration:  none;
  cursor:           pointer;
  border:           1px solid rgba(249,115,22,.35);
  background:       transparent;
  color:            var(--xpps-text);
  transition:       all var(--xpps-transition);
  position:         relative;
  overflow:         hidden;
}
.xpps-plan__btn::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       linear-gradient(135deg, var(--xpps-accent-1), var(--xpps-accent-2));
  opacity:          0;
  transition:       opacity var(--xpps-ease);
}
.xpps-plan__btn span { position: relative; z-index: 1; }
.xpps-plan__btn:hover {
  border-color:    transparent;
  transform:       translateY(-2px) scale(1.02);
  box-shadow:      0 0 30px var(--xpps-glow), 0 8px 20px rgba(0,0,0,.3);
  color:           #fff;
}
.xpps-plan__btn:hover::before { opacity: 1; }

/* Featured button — always gradient */
.xpps-plan__btn--featured {
  background:      linear-gradient(135deg, var(--xpps-accent-1), var(--xpps-accent-2));
  border-color:    transparent;
  color:           #fff;
  box-shadow:      0 0 24px var(--xpps-glow);
}
.xpps-plan__btn--featured::before { background: linear-gradient(135deg, #fb923c, #ef4444); }
.xpps-plan__btn--featured:hover {
  box-shadow:      0 0 40px var(--xpps-glow-strong), 0 10px 30px rgba(0,0,0,.4);
}

/* ─── Error state ────────────────────────────────────────── */
.xpps-error {
  padding:        12px 20px;
  border-radius:  8px;
  background:     rgba(239,68,68,.1);
  border:         1px solid rgba(239,68,68,.3);
  color:          #f87171;
  font-family:    var(--xpps-font);
  font-size:      0.9rem;
}


/* ═══════════════════════════════════════════════════════════
   POPUP SYSTEM
   ═══════════════════════════════════════════════════════════ */

/* ─── Overlay ────────────────────────────────────────────── */
.xpps-popup-overlay {
  position:        fixed;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  z-index:         var(--xpopup-zindex, 99999);
  pointer-events:  none;
  opacity:         0;
  visibility:      hidden;
  transition:      opacity 0.3s ease, visibility 0s 0.3s;
}

.xpps-popup-overlay::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       var(--xpopup-overlay, rgba(0,0,0,0.7));
  opacity:          var(--xpopup-overlay-op, 0.7);
}

.xpps-popup-overlay.xpps-popup--open {
  pointer-events:  all;
  opacity:         1;
  visibility:      visible;
  transition:      opacity 0.3s ease;
}

/* ─── Modal ──────────────────────────────────────────────── */
.xpps-popup-modal {
  position:         relative;
  width:            var(--xpopup-width, 560px);
  max-width:        100%;
  height:           var(--xpopup-height, auto);
  max-height:       90vh;
  overflow-y:       auto;
  background:       var(--xpopup-bg, #0d1117);
  border-radius:    var(--xpopup-radius, 16px);
  padding:          var(--xpopup-padding, 40px);
  color:            var(--xpopup-color, #fff);
  font-family:      var(--xpps-font);
  box-shadow:
    0 0 0 1px rgba(249,115,22,.2),
    0 0 60px rgba(249,115,22,.1),
    0 40px 100px rgba(0,0,0,.6);
  border:           1px solid rgba(249,115,22,.3);

  /* Animations: default scale state */
  transform:        scale(0.9) translateY(20px);
  transition:       transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.3s ease;
  opacity:          0;
}

.xpps-popup--open .xpps-popup-modal {
  transform:        scale(1) translateY(0);
  opacity:          1;
}

/* Glassmorphism sheen */
.xpps-popup-modal::before {
  content:         '';
  position:        absolute;
  inset:           0;
  border-radius:   inherit;
  background:      linear-gradient(160deg, rgba(255,255,255,.05) 0%, transparent 50%);
  pointer-events:  none;
}

/* Glow top edge */
.xpps-popup-modal::after {
  content:         '';
  position:        absolute;
  top:             -1px;
  left:            15%;
  right:           15%;
  height:          2px;
  background:      linear-gradient(90deg, transparent, var(--xpps-accent-1), var(--xpps-accent-2), transparent);
  border-radius:   var(--xpps-radius-pill);
}

/* Animation variants */
.xpps-popup-overlay[data-animation="slideUp"] .xpps-popup-modal       { transform: translateY(60px); }
.xpps-popup-overlay[data-animation="slideUp"].xpps-popup--open .xpps-popup-modal { transform: translateY(0); }

.xpps-popup-overlay[data-animation="slideDown"] .xpps-popup-modal       { transform: translateY(-60px); }
.xpps-popup-overlay[data-animation="slideDown"].xpps-popup--open .xpps-popup-modal { transform: translateY(0); }

.xpps-popup-overlay[data-animation="fade"] .xpps-popup-modal       { transform: none; }
.xpps-popup-overlay[data-animation="fade"].xpps-popup--open .xpps-popup-modal { transform: none; }

.xpps-popup-overlay[data-animation="bounce"] .xpps-popup-modal       { transform: scale(0.5); }
.xpps-popup-overlay[data-animation="bounce"].xpps-popup--open .xpps-popup-modal {
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* ─── Close Button ───────────────────────────────────────── */
.xpps-popup-close {
  position:        absolute;
  top:             16px;
  right:           16px;
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  border:          1px solid rgba(255,255,255,.12);
  background:      rgba(255,255,255,.06);
  color:           rgba(255,255,255,.6);
  cursor:          pointer;
  transition:      all var(--xpps-ease);
  z-index:         2;
}
.xpps-popup-close:hover {
  background:      rgba(239,68,68,.2);
  border-color:    rgba(239,68,68,.5);
  color:           #f87171;
  transform:       rotate(90deg);
}

/* ─── Popup Image ────────────────────────────────────────── */
.xpps-popup-image {
  margin:          calc(-1 * var(--xpopup-padding, 40px));
  margin-bottom:   var(--xpopup-padding, 40px);
  border-radius:   var(--xpopup-radius, 16px) var(--xpopup-radius, 16px) 0 0;
  overflow:        hidden;
  max-height:      260px;
}
.xpps-popup-image img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  display:         block;
}

/* ─── Popup Body ─────────────────────────────────────────── */
.xpps-popup-body {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  gap:             16px;
}

.xpps-popup-title {
  font-size:       clamp(1.4rem, 3vw, 1.9rem);
  font-weight:     800;
  letter-spacing:  -0.02em;
  line-height:     1.2;
  color:           #fff;
}

.xpps-popup-desc {
  font-size:       0.95rem;
  line-height:     1.7;
  color:           rgba(255,255,255,.7);
}

.xpps-popup-actions {
  display:         flex;
  gap:             12px;
  flex-wrap:       wrap;
  margin-top:      8px;
}

.xpps-popup-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         13px 32px;
  border-radius:   var(--xpps-radius-pill);
  background:      linear-gradient(135deg, var(--xpopup-btn-from, #f97316), var(--xpopup-btn-to, #dc2626));
  color:           #fff;
  font-family:     var(--xpps-font);
  font-size:       0.95rem;
  font-weight:     700;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      all var(--xpps-transition);
  box-shadow:      0 0 24px rgba(249,115,22,.4);
}
.xpps-popup-btn:hover {
  transform:       translateY(-2px) scale(1.03);
  box-shadow:      0 0 40px rgba(249,115,22,.65), 0 10px 30px rgba(0,0,0,.4);
}

/* ─── Scrollbar styling ──────────────────────────────────── */
.xpps-popup-modal::-webkit-scrollbar       { width: 4px; }
.xpps-popup-modal::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.xpps-popup-modal::-webkit-scrollbar-thumb { background: rgba(249,115,22,.4); border-radius: 4px; }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .xpps-plans-grid.xpps-plans-count-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .xpps-plan--featured { transform: none; }
  .xpps-plan--featured:hover { transform: translateY(-6px); }
}

@media (max-width: 600px) {
  .xpps-pricing-wrap { padding: 40px 16px; }

  .xpps-plans-grid,
  .xpps-plans-grid.xpps-plans-count-3,
  .xpps-plans-grid.xpps-plans-count-2 {
    grid-template-columns: 1fr;
  }

  .xpps-plan { padding: 28px 20px; }

  .xpps-popup-modal {
    padding: 24px 20px;
    max-height: 88vh;
  }

  .xpps-popup-image {
    margin: -24px -20px 24px;
  }

  .xpps-plan--featured { transform: none; }
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .xpps-plan,
  .xpps-plan__btn,
  .xpps-popup-modal,
  .xpps-popup-overlay,
  .xpps-popup-close { transition: none !important; animation: none !important; }
}