/**
 * Pricing Section — Redesign (v2)
 * TaskTweaky · template-shopify.php
 *
 * All selectors are prefixed with `ttr-` to avoid collisions with existing
 * `pricing-card`, `pricing-badge`, etc. styles loaded from main.css.
 *
 * Enqueued via functions.php on the Shopify Development page template only.
 */

/* ─── CSS custom properties (brand tokens) ────────────────────────────── */
:root {
  --ttr-blue:          #2563EB;
  --ttr-blue-hover:    #1D4ED8;
  --ttr-blue-light:    #EFF6FF;
  --ttr-blue-lighter:  #DBEAFE;
  --ttr-teal:          #0D9488;
  --ttr-teal-light:    #CCFBF1;
  --ttr-green:         #16A34A;
  --ttr-green-light:   #DCFCE7;
  --ttr-text-dark:     #111827;
  --ttr-text-med:      #374151;
  --ttr-text-light:    #6B7280;
  --ttr-text-lighter:  #9CA3AF;
  --ttr-border:        #E5E7EB;
  --ttr-bg-page:       #EEF2FB;
  --ttr-bg-card:       #FFFFFF;
  --ttr-radius-card:   16px;
  --ttr-radius-sm:     10px;
  --ttr-shadow:        0 4px 24px rgba(0, 0, 0, 0.08);
  --ttr-shadow-feat:   0 8px 32px rgba(37, 99, 235, 0.18);
  --ttr-shadow-hover:  0 10px 40px rgba(0, 0, 0, 0.14);
  --ttr-transition:    0.22s ease;
}

/* ─── Section wrapper ──────────────────────────────────────────────────── */
.ttr-pricing-section {
  background: var(--ttr-bg-page) !important;
  padding-top: 72px !important;
  padding-bottom: 64px !important;
}

/* ─── Section header ───────────────────────────────────────────────────── */
.ttr-pricing-header {
  text-align: center;
  margin-bottom: 52px;
}

.ttr-pricing-eyebrow {
  display: inline-flex;
  align-items: center;
  background: #E0EAFF;
  color: var(--ttr-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.ttr-pricing-header h2 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: var(--ttr-text-dark);
  margin: 0 0 16px;
  line-height: 1.12;
  letter-spacing: -1.2px;
}

.ttr-pricing-sub {
  font-size: 17px;
  color: var(--ttr-text-light);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ─── Pricing cards grid ───────────────────────────────────────────────── */
.ttr-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start; /* cards start at same top; featured lifts via transform */
  margin-bottom: 36px;
}

/* ─── Individual pricing card ──────────────────────────────────────────── */
.ttr-pricing-card {
  background: var(--ttr-bg-card);
  border-radius: var(--ttr-radius-card);
  border: 1.5px solid var(--ttr-border);
  box-shadow: var(--ttr-shadow);
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  transition:
    box-shadow var(--ttr-transition),
    transform  var(--ttr-transition),
    border-color var(--ttr-transition);
}

.ttr-pricing-card:hover {
  box-shadow: var(--ttr-shadow-hover);
  transform: translateY(-4px);
}

/* Featured (Standard Task) card */
.ttr-pricing-card--featured {
  border: 2px solid var(--ttr-blue);
  box-shadow: var(--ttr-shadow-feat);
  transform: translateY(-6px);
}

.ttr-pricing-card--featured:hover {
  box-shadow: 0 14px 48px rgba(37, 99, 235, 0.22);
  transform: translateY(-10px);
}

/* ─── Plan badge ───────────────────────────────────────────────────────── */
.ttr-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 5px 13px;
  border-radius: 100px;
  margin-bottom: 20px;
  width: fit-content;
}

/* Badge colour variants */
.ttr-plan-badge--quick-fix {
  background: var(--ttr-green-light);
  color: var(--ttr-green);
}

.ttr-plan-badge--standard-task {
  background: var(--ttr-blue);
  color: #fff;
}

.ttr-plan-badge--advanced-project {
  background: var(--ttr-teal-light);
  color: var(--ttr-teal);
}

/* ─── Icon + price row ─────────────────────────────────────────────────── */
.ttr-plan-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.ttr-plan-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ttr-plan-icon--wrench {
  background: var(--ttr-green-light);
  color: var(--ttr-green);
}

.ttr-plan-icon--bag {
  background: var(--ttr-blue-lighter);
  color: var(--ttr-blue);
}

.ttr-plan-icon--rocket {
  background: var(--ttr-teal-light);
  color: var(--ttr-teal);
}

.ttr-plan-price-block {
  display: flex;
  flex-direction: column;
}

.ttr-plan-prefix {
  font-size: 13px;
  color: var(--ttr-text-light);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 1px;
}

.ttr-plan-price {
  font-size: 46px;
  font-weight: 800;
  color: var(--ttr-text-dark);
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.ttr-plan-period {
  font-size: 13px;
  color: var(--ttr-text-light);
  font-weight: 500;
  margin-top: 2px;
}

/* ─── Title & description ──────────────────────────────────────────────── */
.ttr-plan-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ttr-text-dark);
  margin: 0 0 4px;
}

.ttr-plan-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--ttr-text-med);
  margin: 0 0 8px;
}

.ttr-plan-desc {
  font-size: 14px;
  color: var(--ttr-text-light);
  line-height: 1.65;
  margin: 0 0 16px;
}

/* ─── Divider ──────────────────────────────────────────────────────────── */
.ttr-plan-divider {
  height: 1px;
  background: var(--ttr-border);
  margin: 0 0 16px;
}

/* ─── Feature list ─────────────────────────────────────────────────────── */
.ttr-plan-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ttr-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ttr-text-med);
  line-height: 1.5;
}

/* Check icon colour per card type */
.ttr-pricing-card .ttr-check-icon {
  color: var(--ttr-green);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
}

.ttr-pricing-card--featured .ttr-check-icon {
  color: var(--ttr-blue);
}

/* ─── Examples box ─────────────────────────────────────────────────────── */
.ttr-plan-examples {
  background: #FAFAFA;
  border-radius: var(--ttr-radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  flex: 1; /* pushes CTA to the bottom so all cards match height */
}

.ttr-plan-examples--featured {
  background: var(--ttr-blue-light);
}

.ttr-examples-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ttr-text-lighter);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.ttr-plan-examples--featured .ttr-examples-label {
  color: var(--ttr-blue);
}

.ttr-plan-examples ul {
  list-style: disc;
  padding-left: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ttr-plan-examples ul li {
  font-size: 13px;
  color: var(--ttr-text-med);
  line-height: 1.5;
}

/* ─── CTA button ───────────────────────────────────────────────────────── */
.ttr-plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--ttr-radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition:
    background var(--ttr-transition),
    color var(--ttr-transition),
    border-color var(--ttr-transition);
  /* Outlined style (non-featured) */
  border: 2px solid var(--ttr-blue);
  background: #fff;
  color: var(--ttr-blue);
}

.ttr-plan-cta:hover {
  background: var(--ttr-blue-light);
  text-decoration: none;
  color: var(--ttr-blue-hover);
}

/* Filled style (featured card) */
.ttr-plan-cta--featured {
  background: var(--ttr-blue);
  color: #fff;
  border-color: var(--ttr-blue);
}

.ttr-plan-cta--featured:hover {
  background: var(--ttr-blue-hover);
  border-color: var(--ttr-blue-hover);
  color: #fff;
}

/* ─── Trust strip ──────────────────────────────────────────────────────── */
.ttr-trust-strip {
  background: var(--ttr-bg-card);
  border-radius: var(--ttr-radius-card);
  padding: 28px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ttr-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ttr-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ttr-blue-light);
  color: var(--ttr-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ttr-trust-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ttr-text-dark);
  margin-bottom: 2px;
}

.ttr-trust-item span {
  display: block;
  font-size: 13px;
  color: var(--ttr-text-light);
}

/* ─── Trusted note ─────────────────────────────────────────────────────── */
.ttr-trusted-note {
  text-align: center;
  font-size: 14px;
  color: var(--ttr-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

/* ─── Contact form: package field highlight ────────────────────────────── */
#tt-package.ttr-pkg-preselected {
  border-color: var(--ttr-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none;
}

.ttr-pkg-note {
  display: none;
  font-size: 12px;
  color: var(--ttr-blue);
  margin-top: 5px;
  font-weight: 600;
}

.ttr-pkg-note.ttr-pkg-note--visible {
  display: block;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */

/* Tablet: 2 columns, Advanced on its own row centred */
@media (max-width: 900px) {
  .ttr-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bump Advanced to second row, span 2 cols at half width and centre */
  .ttr-pricing-grid > article:last-child {
    grid-column: 1 / -1;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }

  .ttr-trust-strip {
    padding: 24px 28px;
    gap: 20px;
  }
}

/* Mobile: single column stack */
@media (max-width: 600px) {
  .ttr-pricing-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .ttr-pricing-header {
    margin-bottom: 36px;
  }

  .ttr-pricing-header h2 {
    font-size: 30px;
    letter-spacing: -0.5px;
  }

  .ttr-pricing-sub {
    font-size: 15px;
  }

  .ttr-pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Remove featured elevation on mobile — all cards same level */
  .ttr-pricing-card--featured {
    transform: none;
  }

  .ttr-pricing-card--featured:hover {
    transform: translateY(-4px);
  }

  /* Advanced card: full width on mobile */
  .ttr-pricing-grid > article:last-child {
    grid-column: unset;
    max-width: unset;
  }

  .ttr-plan-price {
    font-size: 38px;
  }

  .ttr-plan-cta {
    padding: 15px 20px;
  }

  .ttr-trust-strip {
    padding: 20px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: var(--ttr-radius-sm);
  }
}