/*
 * Pricing Table - Desktop Overrides
 *
 * Note: Selectors support both `.pt-*` and legacy `.bf-*` classnames so existing
 * `/black-friday` pages keep working while new pages migrate to the neutral `pt-*` naming.
 */

/* Longhand properties are a Webflow compatibility mandate (the design-system hook
   blocks shorthand in Webflow files), which conflicts with stylelint-config-standard's
   redundant-longhand rule; the mandate wins for this file. */
/* stylelint-disable declaration-block-no-redundant-longhand-properties --
   Webflow only accepts longhand properties. */

/* Legacy `.ss_bf_*` / `.ss_pt_*` classes are Webflow-markup names that this stylesheet
   must keep matching, so the kebab-case class pattern does not apply here. */
/* stylelint-disable selector-class-pattern --
   Webflow-markup class names. */
@media (width >= 992px) {
  :is(.pt-product-card, .bf-product-card).annual,
  :is(.pt-plan-featured, .bf-plan-featured), /* NEW: standalone HTML featured class mapping */
  :is(.pt-product-card, .bf-product-card)[data-product-card="annual"],
  :is(.pt-hero-card, .bf-hero-card) {
    transform: none;
    box-shadow: 0 14px 28px rgb(0 0 0 / 14%); /* Controlled depth */
  }

  /* Hero Bullets - Single Line on Laptop */
  :is(.pt-hero-bullets, .bf-hero-bullets) {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: flex-start;
    gap: 1.5rem;
  }
  
  :is(.pt-hero-bullets, .bf-hero-bullets) li {
    font-size: 0.9rem;
    white-space: nowrap;
  }
}

@media (width >= 992px) {
  :is(.pt-product-grid, .bf-product-grid),
  [class*="product-grid"],
  [class*="pt-grid"],
  [class*="bf-grid"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column bento grid */
    gap: 24px; /* Tighter gap for modern density */
    align-items: stretch; /* Equal height cards */
    position: relative; /* Enable z-index layering */
  }

  /* Annual Card - HERO TREATMENT (Center, Columns 5-9, Elevated) */
  :is(.pt-product-card, .bf-product-card)[data-product-card="annual"],
  [data-product-card="annual"],
  :is(.pt-hero-card, .bf-hero-card), /* Webflow Class */
  :is(.pt-plan-featured, .bf-plan-featured), /* Standalone HTML featured card */
  .annual-card,
  :is(.pt-plan-card, .bf-plan-card):nth-child(2) {
    /* Bento Grid Positioning */
    grid-column: 5 / 9; /* Spans columns 5-8 (4 columns wide) */

    /* Overrides the shared card transform; content hierarchy stands out instead of scale. */
    transform: none !important;
    z-index: 2; /* Layer above side cards */

    /* Enhanced visual prominence with Gradient Border - 2025 update: thicker border */
    border-width: 2px;
    border-style: solid;
    border-color: transparent; /* Kept at 2px for visual weight */
    background:
      linear-gradient(rgb(255 255 255 / 96%), rgb(255 255 255 / 96%)) padding-box, /* Subtle opacity bump: 0.96 */
      linear-gradient(135deg, var(--shape-dark-blue), var(--shapescale-teal)) border-box;
    box-shadow: 0 14px 28px -14px rgb(0 0 0 / 24%); /* Slightly more depth */

    /* Hero enters first */
    animation-delay: 0.1s;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover transition */
  }

  /* Dark mode support for gradient border background */
  @media (prefers-color-scheme: dark) {
    :is(.pt-product-card, .bf-product-card)[data-product-card="annual"],
    [data-product-card="annual"],
    :is(.pt-hero-card, .bf-hero-card),
    :is(.pt-plan-featured, .bf-plan-featured),
    .annual-card,
    :is(.pt-plan-card, .bf-plan-card):nth-child(2) {
      background:
        linear-gradient(rgb(18 18 18 / 96%), rgb(18 18 18 / 96%)) padding-box,
        linear-gradient(135deg, var(--shape-dark-blue), var(--shapescale-teal)) border-box;
      border-width: 2px;
      border-style: solid;
      border-color: transparent;
      box-shadow: 0 14px 32px -12px rgb(0 0 0 / 75%);
      color: var(--pt-dark-text-soft);
    }
  }

  /* Hero card hover - Modern 2025: Border glow effect (NO transform, JS tilt handles that) */
  :is(.pt-product-card, .bf-product-card)[data-product-card="annual"]:hover,
  [data-product-card="annual"]:hover,
  :is(.pt-plan-featured, .bf-plan-featured):hover {
    border-color: transparent; /* Let border glow take over */

    /* Modern 2025: Brand blue border glow + tightly contained shadow */
    box-shadow:
      0 0 0 2px rgb(92 129 255 / 35%), /* Border glow */
      0 6px 16px rgb(0 0 0 / 12%), /* Enhanced depth with more lift */
      inset 0 1px 0 rgb(255 255 255 / 60%);
    z-index: 3; /* Float above everything on hover */
    transform: translateY(-6px); /* Slightly more lift - 2025 update */
  }

  /* Annual Card - Larger Product Image */
  [data-product-card="annual"] .product-image,
  [data-product-card="annual"] img[class*="product"] {
    transform: scale(1.15);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Annual Card - Larger CTA Button */
  [data-product-card="annual"] :is(.pt-cta-button, .bf-cta-button),
  [data-product-card="annual"] :is(.ss_pt_cta_button, .ss_bf_cta_button),
  [data-product-card="annual"] .w-button[href*="checkout.php"] {
    padding-top: 14px;
    padding-right: 40px;
    padding-bottom: 14px;
    padding-left: 40px;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%),
                0 1px 3px rgb(0 0 0 / 10%);
  }

  [data-product-card="annual"] :is(.pt-cta-button, .bf-cta-button):hover,
  [data-product-card="annual"] :is(.ss_pt_cta_button, .ss_bf_cta_button):hover,
  [data-product-card="annual"] .w-button[href*="checkout.php"]:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 25%),
                0 2px 6px rgb(0 0 0 / 15%);
  }

  /* Annual Card - Larger Price Display (2025 Premium) */
  [data-product-card="annual"] :is(.pt-price, .bf-price),
  [data-product-card="annual"] :is(.pt-plan-header, .bf-plan-header) h3 {
    font-size: clamp(2.5rem, 5vw, 3rem); /* Slightly larger */
    font-weight: 300; /* Keep light weight */
    letter-spacing: -0.04em; /* Consistent em-based spacing */
  }

  /* Monthly Card - SUPPORTING (Left, Columns 1-5) */
  :is(.pt-product-card, .bf-product-card)[data-product-card="monthly"],
  [data-product-card="monthly"],
  .monthly-card,
  :is(.pt-plan-card, .bf-plan-card):nth-child(1) {
    grid-column: 1 / 5; /* Spans columns 1-4 (4 columns = 33.3%) */
    transform: translateY(0); /* Aligned baseline - no stagger */
    animation-delay: 0.2s; /* Staggered delay */
    z-index: 1; /* Layer behind hero */
  }

  /* Lifetime Card - SUPPORTING (Right, Columns 9-13) */
  :is(.pt-product-card, .bf-product-card)[data-product-card="lifetime"],
  [data-product-card="lifetime"],
  .lifetime-card,
  :is(.pt-plan-card, .bf-plan-card):nth-child(3) {
    grid-column: 9 / 13; /* Spans columns 9-12 (4 columns = 33.3%) */
    transform: translateY(0); /* Aligned baseline - no stagger */
    animation-delay: 0.3s; /* Staggered delay */
    z-index: 1; /* Layer behind hero */
  }

  /* Side Cards Hover - Modern 2025: Border glow + gentle lift */
  :is(.pt-product-card, .bf-product-card)[data-product-card="monthly"]:hover,
  :is(.pt-product-card, .bf-product-card)[data-product-card="lifetime"]:hover,
  [data-product-card="monthly"]:hover,
  [data-product-card="lifetime"]:hover,
  :is(.pt-plan-card, .bf-plan-card):nth-child(1):hover,
  :is(.pt-plan-card, .bf-plan-card):nth-child(3):hover {
    /* Unified hover: contained ring, subtle lift */
    transform: translateY(-4px);
    box-shadow:
      0 10px 22px -14px rgb(0 0 0 / 18%),
      0 0 0 1px rgb(92 129 255 / 16%),
      inset 0 1px 0 rgb(255 255 255 / 50%);
    border-color: rgb(92 129 255 / 16%);
    z-index: 2;
  }

  /* Monthly card hover - subtle lift */
  :is(.pt-product-card, .bf-product-card)[data-product-card="monthly"]:hover,
  [data-product-card="monthly"]:hover,
  :is(.pt-plan-card, .bf-plan-card):nth-child(1):hover {
    transform: translateY(-4px); /* Aligned baseline with subtle lift */
  }

  :is(.pt-product-card, .bf-product-card)[data-product-card="lifetime"]:hover,
  [data-product-card="lifetime"]:hover,
  :is(.pt-plan-card, .bf-plan-card):nth-child(3):hover {
    transform: translateY(-4px); /* Aligned baseline with subtle lift */
  }

  /* Equal-Height Cards with Bottom-Aligned CTAs */
  :is(.pt-plan-card, .bf-plan-card),
  :is(.pt-product-card, .bf-product-card) {
    display: flex;
    flex-direction: column;
  }

  :is(.pt-plan-features, .bf-plan-features) {
    flex-grow: 1; /* Expand to fill available space */
  }

  :is(.pt-plan-footer, .bf-plan-footer) {
    margin-top: auto; /* Push footer to bottom */
    padding-top: 1rem;
  }
}

@media (width >= 1200px) and (height >= 800px) {
  :is(.pt-plans, .bf-plans) {
    margin-top: -1.5rem;
    position: relative;
    z-index: 2;
  }

  :is(.pt-hero, .bf-hero) {
    padding-bottom: 3.5rem;
  }
}

/* Lease Terms Disclaimer */
:is(.pt-lease-terms, .bf-lease-terms) {
  background: linear-gradient(135deg, rgb(92 129 255 / 6%), rgb(114 199 197 / 4%));
  border-width: 1px;
  border-style: solid;
  border-color: rgb(92 129 255 / 20%);
  border-radius: 12px;
  padding-top: clamp(20px, 3vw, 32px);
  padding-right: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(20px, 3vw, 32px);
  padding-left: clamp(20px, 3vw, 32px);
  margin-top: 64px;
  margin-right: auto;
  margin-bottom: 48px;
  margin-left: auto;
  max-width: 900px;
  position: relative;
  z-index: 1;
  clear: both;
}

:is(.pt-lease-terms-content, .bf-lease-terms-content) h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--shapescale-dark-100);
  margin-bottom: 16px;
}

:is(.pt-lease-terms-content, .bf-lease-terms-content) h4 i {
  color: var(--shape-dark-blue);
  font-size: 1.2em;
}

:is(.pt-lease-terms-list, .bf-lease-terms-list) {
  list-style: none;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 16px;
  margin-left: 0;
}

:is(.pt-lease-terms-list, .bf-lease-terms-list) li {
  padding-top: 8px;
  padding-right: 0;
  padding-bottom: 8px;
  padding-left: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

:is(.pt-lease-terms-list, .bf-lease-terms-list) strong {
  color: var(--shape-dark-blue);
  font-weight: 600;
}

:is(.pt-lease-terms-cta, .bf-lease-terms-cta) {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 16px;
  padding-top: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(148 163 184 / 20%);
}

:is(.pt-lease-terms-cta, .bf-lease-terms-cta) a {
  color: var(--shape-dark-blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  transition: border-color 0.2s ease;
}

:is(.pt-lease-terms-cta, .bf-lease-terms-cta) a:hover {
  border-bottom-color: var(--shape-dark-blue);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  /* Disable alternating section backgrounds on pricing table page */
  section:nth-of-type(even) {
    background-color: transparent;
  }

  :is(.pt-lease-terms, .bf-lease-terms) {
    background: linear-gradient(135deg, rgb(92 129 255 / 10%), rgb(114 199 197 / 6%));
    border-color: rgb(92 129 255 / 30%);
  }

  :is(.pt-lease-terms-content, .bf-lease-terms-content) h4 {
    color: var(--pt-white);
  }

  :is(.pt-lease-terms-list, .bf-lease-terms-list) {
    background: transparent;
  }

  :is(.pt-lease-terms-list, .bf-lease-terms-list) strong {
    color: var(--shapescale-teal);
  }

  :is(.pt-lease-terms-cta, .bf-lease-terms-cta) a {
    color: var(--shapescale-teal);
  }

  :is(.pt-lease-terms-cta, .bf-lease-terms-cta) a:hover {
    border-bottom-color: var(--shapescale-teal);
  }
}