/* /var/www/relyn/static_src/css/price.css */

/* SECTION */
.pricing-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 24px 80px;
}

.pricing-shell {
  position: relative;
  width: 100%;
  max-width: 1919px;
  min-height: 1195px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 114px;

  /* Blur placement for this section */
  --blur-top: 54%;
  --blur-h: 740px;

  /* ✅ UPDATED: wider blur so it reaches closer to section edges */
  --blur-w: 2200px;

  box-sizing: border-box;
}

/* Background blur layer */
.pricing-blur-layer {
  position: absolute;
  left: 50%;
  top: var(--blur-top);
  transform: translate(-50%, -50%);

  /* ✅ UPDATED: use wider blur width */
  width: var(--blur-w);
  max-width: 100%;
  height: var(--blur-h);

  background:
    radial-gradient(circle at 28% 35%, rgba(99, 62, 178, 0.55), transparent 62%),
    radial-gradient(circle at 72% 52%, rgba(166, 151, 224, 0.28), transparent 66%),
    radial-gradient(circle at 50% 78%, rgba(99, 62, 178, 0.35), transparent 62%);

  filter: blur(95px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

/* ✅ Project Type Toggle wrap */
.pricing-type-toggle-wrap {
  position: relative;
  z-index: 1;

  width: 100%;
  display: flex;
  justify-content: center;
}

/* ✅ Type toggle bar: W=730 H=60 radius=50 background=#FFF */
.pricing-type-toggle {
  position: relative;

  width: 730px;
  height: 60px;

  border-radius: 50px;
  background: #FFFFFF;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 35px;

  /* ✅ IMPORTANT: vertical padding becomes the "equal top/bottom gap" source of truth */
  --type-pad-y: 5px;
  --type-pad-x: 18px;

  padding: var(--type-pad-y) var(--type-pad-x);
  box-sizing: border-box;

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
  overflow: hidden;

  /* ✅ Pill size default (desktop/laptop/tablet landscape unchanged) */
  --type-pill-w: 125px;
  --type-pill-h: 50px;

  /* ✅ Border radius tokens (default) */
  --type-wrap-r: 50px;
  --type-pill-r: 50px;
}

.pricing-type-toggle {
  border-radius: var(--type-wrap-r);
}

/* Active pill: W=125 H=50 radius=50 bg=#633EB2 */
.pricing-type-pill {
  position: absolute;

  /* ✅ FIX: make top/bottom space perfectly equal using pad-y */
  top: var(--type-pad-y);
  left: var(--type-pad-x);

  width: var(--type-pill-w);
  height: var(--type-pill-h);

  border-radius: var(--type-pill-r);
  background: #633EB2;

  /* ✅ JS now moves this relative to the padded inner area */
  transform: translate3d(0, 0, 0);
  transition: transform 0.92s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;

  z-index: 1;
}

/* Type button */
.pricing-type-btn {
  position: relative;
  z-index: 2;

  /* ✅ keep same height as pill for perfect vertical symmetry */
  height: var(--type-pill-h);

  border: none;
  background: transparent;
  padding: 0 8px;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 20px;

  color: #633EB2;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
  transition: transform 220ms ease, color 260ms ease;
}

.pricing-type-btn:hover {
  transform: translateY(-1px);
}

.pricing-type-btn.is-active {
  color: #FFFFFF;
}

/* ✅ Monthly/Yearly toggle wrap */
.pricing-toggle-wrap {
  position: relative;
  z-index: 1;

  margin-top: 30px;
  width: 100%;

  display: flex;
  justify-content: center;
}

/* Glass toggle bar */
.pricing-toggle {
  position: relative;
  width: 316px;
  height: 50px;

  border-radius: 50px;
  border: 1px solid #633EB2;

  background: linear-gradient(
    135deg,
    rgba(99, 62, 178, 0.35) 0%,
    rgba(99, 62, 178, 0.12) 100%
  );

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  /* ✅ FIX: vertical padding is the single source of truth for equal top/bottom gap */
  --plan-pad-y: 5px;
  --plan-pad-x: 8px;

  padding: var(--plan-pad-y) var(--plan-pad-x);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
  overflow: visible;

  /* ✅ Border radius tokens (default) */
  --plan-wrap-r: 50px;
  --plan-pill-r: 50px;
}

.pricing-toggle {
  border-radius: var(--plan-wrap-r);
}

/* Active pill */
.pricing-toggle-pill {
  position: absolute;

  /* ✅ FIX: equal top/bottom space via pad-y */
  top: var(--plan-pad-y);
  left: var(--plan-pad-x);

  width: 150px;

  /* ✅ FIX: pill height always fits between padding (50 - 10 = 40) */
  height: calc(100% - (var(--plan-pad-y) * 2));

  border-radius: var(--plan-pill-r);
  background: #633EB2;

  transform: translateX(0);
  transition: transform 0.92s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  z-index: 1;
}

/* Buttons */
.pricing-toggle-btn {
  position: relative;
  z-index: 2;

  width: 150px;

  /* ✅ FIX: match pill height exactly */
  height: calc(100% - (var(--plan-pad-y) * 2));

  border-radius: 50px;
  border: none;
  background: transparent;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;

  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: color 260ms ease, transform 220ms ease;
}

.pricing-toggle-btn:hover {
  transform: translateY(-1px);
}

.pricing-toggle-btn.is-active {
  color: #FFFFFF;
}

.pricing-toggle.is-yearly .pricing-toggle-pill {
  transform: translateX(150px);
}

/* Discount badge */
.pricing-toggle-badge {
  position: absolute;
  right: -10px;
  top: -11px;

  width: 66px;
  height: 22px;

  border-radius: 20px;
  background: #633EB2;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
  z-index: 3;
}

/* Pricing cards wrap */
.pricing-cards-wrap {
  position: relative;
  z-index: 1;

  width: 100%;
  margin-top: 125px;

  display: flex;
  justify-content: center;
}

/* 3-card row container */
.pricing-cards-row {
  position: relative;
  width: 100%;
  max-width: 1164px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  gap: 58px;
}

/* Base card */
.pricing-plan-card {
  position: relative;
  width: 345px;
  height: 526px;
  border-radius: 30px;
  overflow: visible;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.85);

  /* ✅ Radius tokens (default) */
  --card-r: 30px;
  --badge-r: 20px;
  --btn-r: 8px;
}

.pricing-plan-card {
  border-radius: var(--card-r);
}

/* Inner content */
.pricing-card-inner {
  width: 100%;
  height: 100%;

  padding: 41px 24px 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  box-sizing: border-box;
}

/* CENTER featured card */
.pricing-plan-featured {
  border: 2px solid #FFFFFF;

  background: linear-gradient(
    180deg,
    rgba(99, 62, 178, 0.80) 0%,
    rgba(99, 62, 178, 0.80) 72%,
    rgba(99, 62, 178, 0.20) 100%
  );
}

/* LEFT & RIGHT glass card */
.pricing-plan-glass {
  border: 1px solid #633EB2;
  background: linear-gradient(
    135deg,
    rgba(99, 62, 178, 0.8) 0%,
    rgba(99, 62, 178, 0.2) 100%
  );

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Vertical offset: left and right are 77px lower */
.pricing-plan-left,
.pricing-plan-right {
  margin-top: 77px;
}

/* Most Popular badge */
.pricing-popular-badge {
  position: absolute;
  top: -16px;
  right: 30px;

  width: 135px;
  height: 33px;

  border-radius: var(--badge-r);
  background: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #633EB2;

  box-shadow: 0 16px 55px rgba(0, 0, 0, 0.75);
}

/* Plan name */
.pricing-plan-name {
  margin: 0;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 600;

  color: #FFFFFF;
}

/* Price */
.pricing-plan-price {
  margin: 25px 0 0;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 40px;
  font-weight: 700;

  color: #FFFFFF;
  line-height: 1.05;
}

/* Billed text */
.pricing-plan-billed {
  margin: 25px 0 0;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;

  color: #FFFFFF;
  opacity: 0.95;
}

/* Divider */
.pricing-divider {
  width: 298px;
  height: 1px;
  background: rgba(255, 255, 255, 1);
  margin-top: 16px;
}

/* Feature list */
.pricing-feature-list {
  list-style: none;
  padding: 0;
  margin: 25px 0 0;

  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 25px;
}

.pricing-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tick in circle */
.pricing-tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 16px;
}

.pricing-tick svg {
  display: block;
}

/* Purple circle with white tick */
.pricing-tick--purple {
  background: #633EB2;
  color: #FFFFFF;
}

/* White circle with purple tick */
.pricing-tick--white {
  background: #FFFFFF;
  color: #633EB2;
}

/* Feature text */
.pricing-feature-text {
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
}

/* Choose Plan button */
.pricing-choose-btn {
  width: 252px;
  height: 40px;

  border-radius: var(--btn-r);
  border: none;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;

  margin-top: 20px;
  align-self: center;

  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.pricing-choose-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.pricing-choose-btn--purple {
  background: #633EB2;
  color: #FFFFFF;
}

.pricing-choose-btn--white {
  background: #FFFFFF;
  color: #633EB2;
}

/* Responsive */
@media (max-width: 1200px) {
  .pricing-cards-row {
    max-width: 980px;
    gap: 32px;
  }
}

@media (max-width: 1024px) {
  .pricing-section {
    padding: 0 16px 64px;
  }

  .pricing-shell {
    padding-top: 96px;
    min-height: 980px;
  }

  .pricing-type-toggle {
    width: min(730px, 92vw);
  }

  .pricing-cards-row {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 420px;
  }

  .pricing-plan-left,
  .pricing-plan-right {
    margin-top: 0;
  }

  .pricing-divider {
    width: 100%;
    max-width: 298px;
  }
}

/* ✅ Mobile + Tablet (Portrait): type toggle more rectangular ONLY (pricing-toggle stays original rounded) */
@media (max-width: 1024px) and (orientation: portrait) {
  /* Type toggle: 2 rows (3 + 2) + rectangular look */
  .pricing-type-toggle {
    height: auto;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    width: min(92vw, 560px);

    gap: 10px 10px;
    padding: 8px 12px;

    overflow: hidden;

    /* pill becomes 1/3 width so it doesn't overlap neighbors */
    --type-pill-w: calc((100% - 20px) / 3);
    --type-pill-h: 46px;

    /* ✅ ONLY TYPE TOGGLE becomes rectangle-ish */
    --type-wrap-r: 16px;
    --type-pill-r: 12px;

    /* ✅ keep equal top/bottom space for pill in portrait too */
    --type-pad-y: 8px;
    --type-pad-x: 12px;
  }

  .pricing-type-btn {
    flex: 0 0 calc((100% - 20px) / 3);
    height: 46px;

    font-size: 14px;
    padding: 0 4px;

    white-space: nowrap;
  }

  /* ✅ pricing-toggle: keep previous rounded box (no radius overrides here) */
  .pricing-toggle-btn {
    font-size: 14px;
  }

  .pricing-toggle-badge {
    font-size: 11px;
    height: 20px;
    width: 64px;
  }

  /* Cards: keep your portrait “more rectangle” + reduced fonts */
  .pricing-plan-card {
    width: min(345px, 92vw);
    height: 510px;

    --card-r: 16px;
    --badge-r: 14px;
    --btn-r: 6px;
  }

  .pricing-card-inner {
    padding: 34px 18px 0;
  }

  .pricing-popular-badge {
    font-size: 12px;
    height: 30px;
    width: 128px;
  }

  .pricing-plan-name {
    font-size: 17px;
  }

  .pricing-plan-price {
    margin-top: 20px;
    font-size: 34px;
  }

  .pricing-plan-billed {
    margin-top: 18px;
    font-size: 12px;
  }

  .pricing-divider {
    margin-top: 14px;
  }

  .pricing-feature-list {
    margin-top: 20px;
    gap: 18px;
  }

  .pricing-feature-text {
    font-size: 13px;
  }

  .pricing-choose-btn {
    height: 38px;
    font-size: 13px;
    margin-top: 16px;
  }
}

@media (max-width: 768px) {
  .pricing-shell {
    padding-top: 80px;
    min-height: 900px;
  }

  .pricing-cards-wrap {
    margin-top: 90px;
  }

  .pricing-type-toggle {
    gap: 18px;
  }

  .pricing-type-btn {
    font-size: 16px;
    padding: 0 6px;
  }
}

@media (max-width: 480px) {
  .pricing-shell {
    padding-top: 70px;
    min-height: 860px;
  }

  .pricing-plan-card {
    width: 300px;
    height: 520px;
  }

  .pricing-card-inner {
    padding: 36px 18px 0;
  }

  .pricing-popular-badge {
    right: 18px;
  }

  .pricing-choose-btn {
    width: 100%;
    max-width: 252px;
  }

  /* ✅ Extra-tight for small mobiles, still 3 + 2 layout */
  .pricing-type-toggle {
    gap: 8px 8px;
    padding: 8px 10px;

    --type-pill-w: calc((100% - 16px) / 3);

    /* ✅ keep equal top/bottom space */
    --type-pad-y: 8px;
    --type-pad-x: 10px;
  }

  .pricing-type-btn {
    font-size: 14px;
    padding: 0 2px;
  }
}

/* ✅ Mobile portrait: keep pricing-toggle rounded; only type toggle stays rectangle-ish */
@media (max-width: 480px) and (orientation: portrait) {
  .pricing-type-toggle {
    --type-wrap-r: 14px;
    --type-pill-r: 10px;

    --type-pill-h: 44px;

    /* ✅ keep equal top/bottom space */
    --type-pad-y: 8px;
    --type-pad-x: 10px;
  }

  .pricing-type-btn {
    height: 44px;
    font-size: 13px;
  }

  /* ✅ pricing-toggle stays as previous rounded box; only reduce font a bit */
  .pricing-toggle-btn {
    font-size: 13px;
  }

  .pricing-plan-card {
    width: min(300px, 92vw);
    height: 500px;

    --card-r: 14px;
    --badge-r: 12px;
    --btn-r: 6px;
  }

  .pricing-card-inner {
    padding: 30px 16px 0;
  }

  .pricing-plan-name {
    font-size: 16px;
  }

  .pricing-plan-price {
    font-size: 32px;
  }

  .pricing-feature-text {
    font-size: 12.5px;
  }

  .pricing-choose-btn {
    font-size: 12.5px;
  }
}