/* ==========================================================
   VersaForge - PRICING PAGE
   ----------------------------------------------------------
   Loaded ONLY by pricing.php.

   Design language: clean, modern, restrained luxury -white
   cards on a soft tinted backdrop, a single confident accent
   gradient reserved for the "most popular" tier and CTAs,
   generous whitespace instead of heavy borders/shadows.

   The country toggle is real, working vanilla JS (see the
   inline <script> in pricing.php) since this page ships its
   own dedicated stylesheet and is not bound by the "no new
   files" constraint some other pages carried.
   ========================================================== */

.pr {
  --pr-violet: #6A58E4;
  --pr-blue:   #4A86F5;
  --pr-cyan:   #28A8D9;
  --pr-ink:    #111827;
  --pr-slate:  #475569;
  --pr-mute:   #5B6475;
  --pr-line:   #E6ECF5;
  --pr-tint:   #F8FAFF;
}

/* ==========================================================
   1. COUNTRY TOGGLE
   ========================================================== */
.pr-toggle {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--pr-line);
  box-shadow: 0 10px 30px -18px rgba(17, 24, 39, .18);
}

.pr-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  font: 700 12.5px/1 'Inter', ui-monospace, monospace;
  letter-spacing: .04em;
  color: var(--pr-mute);
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}

.pr-toggle-btn:hover { color: var(--pr-ink); }

.pr-toggle-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--pr-violet), var(--pr-blue));
  box-shadow: 0 8px 20px -8px rgba(106, 88, 228, .55);
}

/* ==========================================================
   2. PRICING CAROUSEL
   ----------------------------------------------------------
   Layout is handled by the site's existing carousel engine
   (.vf-tm-carousel / initCarousel() in assets/js/main.js) via
   data-perview -3 cards on large screens, 2 on tablet, 1 on
   phone. .pr-carousel only adds pricing-specific breathing
   room; every .carousel- / *.vf-tm-* class keeps its site-wide
   styling from style.css untouched.
   ========================================================== */
.pr-carousel { padding-bottom: .5rem; }
.pr-carousel .vf-tm-slide { padding: .35rem; }

.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.15rem 1.85rem 2rem;
  border-radius: 1.4rem;
  background: #fff;
  border: 1px solid var(--pr-line);
  box-shadow: 0 20px 50px -30px rgba(17, 24, 39, .12);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.pr-card:hover {
  transform: translate3d(0, -6px, 0);
  border-color: rgba(106, 88, 228, .28);
  box-shadow: 0 30px 60px -28px rgba(106, 88, 228, .22);
}

/* the "most popular" tier -restrained, one accent treatment only */
.pr-card.is-popular {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--pr-violet), var(--pr-blue), var(--pr-cyan)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 30px 64px -26px rgba(106, 88, 228, .32);
}

.pr-card.is-popular:hover { transform: translate3d(0, -8px, 0); }

.pr-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: .38rem .9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pr-violet), var(--pr-blue));
  color: #fff;
  font: 800 10px/1 'Inter', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(106, 88, 228, .6);
  white-space: nowrap;
}

.pr-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  color: var(--pr-ink);
  text-align: center;
}

.pr-timeframe {
  margin-top: .4rem;
  text-align: center;
  font: 700 10.5px/1.3 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-violet);
}

.pr-price-block {
  margin: 1.5rem 0 1.65rem;
  padding: 1.35rem 1rem;
  border-radius: 1rem;
  background: var(--pr-tint);
  text-align: center;
}

.pr-card.is-popular .pr-price-block {
  background: linear-gradient(160deg, rgba(106, 88, 228, .07), rgba(40, 168, 217, .05));
}

.pr-price-label {
  font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-mute);
}

.pr-price {
  margin-top: .5rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.pr-price-amount {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  letter-spacing: -.02em;
  color: var(--pr-ink);
  white-space: nowrap;
}

.pr-price-duration {
  font: 600 13px/1 'Inter', sans-serif;
  color: var(--pr-mute);
}

.pr-features {
  flex: 1 1 auto;
  display: grid;
  gap: .7rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.pr-feature {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font: 600 13px/1.45 'Inter', sans-serif;
  color: var(--pr-slate);
}

.pr-feature-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: .05rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
}

.pr-feature.is-yes .pr-feature-icon { background: rgba(16, 185, 129, .14); color: #059669; }
.pr-feature.is-no  .pr-feature-icon { background: rgba(239, 68, 68, .12); color: #DC2626; }
.pr-feature.is-no  { color: #A3ABBA; }

.pr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .85rem 1.2rem;
  border-radius: .85rem;
  font: 700 12.5px/1 'Inter', sans-serif;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid var(--pr-violet);
  color: var(--pr-violet);
  background: transparent;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease;
}

.pr-cta:hover {
  background: linear-gradient(135deg, var(--pr-violet), var(--pr-blue));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(106, 88, 228, .55);
  transform: translate3d(0, -2px, 0);
}

.pr-card.is-popular .pr-cta {
  background: linear-gradient(135deg, var(--pr-violet), var(--pr-blue));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(106, 88, 228, .5);
}

.pr-card.is-popular .pr-cta:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 18px 36px -14px rgba(106, 88, 228, .6); }

/* ==========================================================
   3. TRUST NOTE STRIP
   ========================================================== */
.pr-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--pr-line);
}

.pr-note-item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 600 12.5px/1 'Inter', sans-serif;
  color: var(--pr-mute);
}

.pr-note-item i,
.pr-note-item svg { width: 16px; height: 16px; color: var(--pr-violet); }

/* ==========================================================
   4. ENTRANCE (mirrors the site's data-reveal pattern)
   ========================================================== */
.pr-card {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1),
              box-shadow .35s ease, border-color .35s ease;
}

.pr-card.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
.pr-card.is-revealed:hover { transform: translate3d(0, -6px, 0); }
.pr-card.is-popular.is-revealed:hover { transform: translate3d(0, -8px, 0); }

/* price value swap -brief cross-fade when the country changes */
.pr-price-amount { transition: opacity .18s ease; }
.pr-price-amount.is-swapping { opacity: 0; }

/* ==========================================================
   5. RESPONSIVE
   ----------------------------------------------------------
   Card *count per view* is handled by the carousel engine's
   data-perview (3 large / 2 tablet / 1 phone). These rules only
   adjust card internals -padding, badge size- at the same
   breakpoints so the card looks intentional at every width,
   not stretched or cramped.
   ========================================================== */
@media (max-width: 1279px) and (min-width: 901px) {
  .pr-card { padding: 2rem 1.7rem 1.9rem; }
}

@media (max-width: 900px) {
  .pr-card { padding: 1.95rem 1.6rem 1.85rem; }
}

@media (max-width: 639px) {
  .pr-card { padding: 1.9rem 1.35rem 1.7rem; }
  .pr-toggle { flex-wrap: wrap; justify-content: center; }
  .pr-toggle-btn { padding: .5rem .9rem; font-size: 11.5px; }
  .pr-note { gap: 1.1rem 1.5rem; }
  .pr-carousel .vf-tm-slide { padding: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-card { transition: none; opacity: 1; transform: none; }
  .pr-card:hover, .pr-card.is-revealed:hover, .pr-card.is-popular.is-revealed:hover { transform: none; }
  .pr-price-amount { transition: none; }
}