/* QR Review System — Light SaaS Theme */

:root {
  /* Accent */
  --accent:        #4361ee;
  --accent-dark:   #3651d4;
  --accent-light:  #eef1fd;
  --accent-muted:  #7d93f5;

  /* Surface */
  --bg-body:    #f2f4f8;
  --bg-card:    #ffffff;
  --bg-section: #e8ecf2;
  --bg-input:   #f8f9fc;

  /* Text */
  --text-heading: #1a2035;
  --text-body:    #3d4a5f;
  --text-muted:   #7b88a0;
  --text-light:   #a8b3c5;

  /* Borders */
  --border:       #dde2ec;
  --border-light: #edf0f6;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-card:  0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-hover: 0 4px 8px rgba(0,0,0,0.08), 0 10px 28px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 20px rgba(0,0,0,0.10), 0 20px 40px rgba(0,0,0,0.08);

  /* Radius */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  18px;

  /* Semantic */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger:  #dc2626;
  --color-info:    #0284c7;

  /* Legacy aliases used by dashboard/other templates */
  --primary-blue:       var(--accent);
  --success-primary:    var(--accent);
  --success-secondary:  var(--accent-dark);
  --gradient-primary:   linear-gradient(135deg, var(--accent), #6366f1);
  --neon-blue:          var(--accent);
  --neon-purple:        #6366f1;
  --neon-pink:          #ec4899;
  --success-text:       var(--text-heading);
  --success-text-secondary: var(--text-body);
  --success-light-text: var(--text-muted);
  --success-muted-text: var(--text-muted);
  --success-card-bg:    var(--bg-card);
  --success-border:     var(--border);
  --success-background: var(--bg-body);
  --surface-primary:    var(--bg-card);
  --surface-secondary:  var(--bg-section);
  --surface-tertiary:   var(--bg-body);
  --text-primary:       var(--text-heading);
  --text-secondary:     var(--text-body);
  --border-light:       var(--border);
  --border-medium:      #bbc3d4;

  /* Transition */
  --transition: 0.2s ease;
}

/* ── Reset / Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--text-body);
  background-color: var(--bg-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 60px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

p { color: var(--text-body); margin-bottom: 0.75rem; }

.lead { color: var(--text-body); font-size: 1.1rem; font-weight: 400; }

a { color: var(--accent); transition: color var(--transition); }
a:hover { color: var(--accent-dark); }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-section); }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Navbar ────────────────────────────────────────────────────── */
.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 0.6rem 0;
  backdrop-filter: none;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-heading) !important;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
}

.navbar-brand .highlight-success { color: var(--accent); }

.navbar-nav .nav-link {
  color: var(--text-body) !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.45rem 0.85rem !important;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.navbar-nav .nav-link:hover {
  color: var(--accent) !important;
  background: var(--accent-light);
  transform: none;
  box-shadow: none;
}

.navbar-toggler {
  border-color: var(--border);
  color: var(--text-body);
}

.dropdown-menu {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.4rem;
}

.dropdown-item {
  color: var(--text-body) !important;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  padding: 0.45rem 0.85rem;
  font-weight: 500;
}

.dropdown-item:hover {
  background: var(--accent-light);
  color: var(--accent) !important;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.25rem;
  border: 1.5px solid transparent;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  letter-spacing: 0;
  position: relative;
  overflow: visible;
  box-shadow: none;
  text-decoration: none;
}

.btn::before { display: none; }
.btn:hover::before { display: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(67,97,238,0.3);
}

.btn-success {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}
.btn-success:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22,163,74,0.25);
}

.btn-secondary {
  background: #fff;
  color: var(--text-body);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-section);
  color: var(--text-heading);
  border-color: var(--border-medium);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-primary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline-primary:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--text-body);
  border-color: var(--border);
}
.btn-outline-secondary:hover {
  background: var(--bg-section);
  color: var(--text-heading);
  border-color: var(--border-medium);
}

.btn-outline-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-outline-danger:hover {
  background: var(--color-danger);
  color: #fff;
}

.btn-outline-success {
  background: transparent;
  color: var(--color-success);
  border-color: var(--color-success);
}
.btn-outline-success:hover {
  background: var(--color-success);
  color: #fff;
}

.btn-outline-info {
  background: transparent;
  color: var(--color-info);
  border-color: var(--color-info);
}
.btn-outline-info:hover {
  background: var(--color-info);
  color: #fff;
}

.btn-outline-light {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  font-size: 0.85rem;
}
.btn-outline-light:hover {
  background: var(--bg-section);
  color: var(--text-body);
}

.btn-lg {
  padding: 0.7rem 1.75rem;
  font-size: 1rem;
  border-radius: var(--radius);
}

.btn-sm {
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
}

.btn-glow {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(67,97,238,0.25);
}
.btn-glow:hover {
  background: var(--accent-dark);
  color: #fff;
  box-shadow: 0 6px 16px rgba(67,97,238,0.35);
  transform: translateY(-1px);
}

/* pulse button — subtle */
.pulse-btn, .animated-pulse {
  animation: saas-pulse 3s ease-in-out infinite;
}
@keyframes saas-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(67,97,238,0.25); }
  50%       { box-shadow: 0 6px 20px rgba(67,97,238,0.45); }
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card, .success-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  margin-bottom: 1.5rem;
  backdrop-filter: none;
}

.card:hover, .success-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--border-medium);
  transform: translateY(-2px);
}

.card-header {
  background: var(--bg-section) !important;
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1.25rem;
  font-weight: 600;
}

.card-header.bg-primary {
  background: var(--accent) !important;
  color: #fff;
  border-bottom: none;
}
.card-header.bg-primary * { color: #fff; }

.card-header.bg-success {
  background: var(--color-success) !important;
  color: #fff;
  border-bottom: none;
}
.card-header.bg-success * { color: #fff; }

.card-header.bg-info {
  background: var(--color-info) !important;
  color: #fff;
  border-bottom: none;
}
.card-header.bg-info * { color: #fff; }

.card-header.bg-danger {
  background: var(--color-danger) !important;
  color: #fff;
  border-bottom: none;
}

.card-body { padding: 1.25rem; }
.card-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  padding: 0.85rem 1.25rem;
}

.card-title  { color: var(--text-heading) !important; font-weight: 700; }
.card-text   { color: var(--text-body) !important; }

/* neon-card alias → same style */
.neon-card, .neon-card-glow {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.neon-card:hover, .neon-card-glow:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--border-medium);
}

/* glass-card alias */
.glass-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ── Forms ─────────────────────────────────────────────────────── */
.form-label {
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
}

.form-control, .form-select {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  font-size: 0.93rem;
  padding: 0.6rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: none;
  backdrop-filter: none;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.12);
  background: #fff;
  color: var(--text-heading);
  outline: none;
  transform: none;
}

.form-control::placeholder { color: var(--text-muted); opacity: 1; }

.input-group-text {
  background: var(--bg-section);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
}

/* ── Alerts ────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid transparent;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.alert::before { display: none; }

.alert-success {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.alert-warning {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.alert-danger {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.alert-info {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

/* ── Tables ────────────────────────────────────────────────────── */
.table {
  color: var(--text-body);
  --bs-table-color: var(--text-body);
  --bs-table-border-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.table thead th,
.table th {
  background: var(--bg-section) !important;
  color: var(--text-muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border) !important;
  border-top: none;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.table td {
  color: var(--text-body) !important;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border-light) !important;
  border-bottom: none;
  vertical-align: middle;
  font-size: 0.9rem;
  font-weight: 500;
}

.table tbody tr:hover {
  background: var(--accent-light) !important;
  --bs-table-accent-bg: transparent;
}

.table-hover tbody tr:hover { background: var(--accent-light) !important; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.32em 0.7em;
  border-radius: 5px;
  letter-spacing: 0;
  text-transform: none;
}

.badge.bg-primary   { background: var(--accent) !important; color: #fff; }
.badge.bg-success   { background: var(--color-success) !important; color: #fff; }
.badge.bg-warning   { background: var(--color-warning) !important; color: #fff; }
.badge.bg-danger    { background: var(--color-danger) !important; color: #fff; }
.badge.bg-secondary { background: var(--text-muted) !important; color: #fff; }
.badge.bg-info      { background: var(--color-info) !important; color: #fff; }
.badge.bg-dark      { background: var(--text-heading) !important; color: #fff; }

.badge.bg-success-subtle {
  background: #f0fdf4 !important;
  color: var(--color-success) !important;
  border: 1px solid #bbf7d0;
}

/* ── Modals ────────────────────────────────────────────────────── */
.modal-content {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
}

.modal-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  padding: 0.85rem 1.25rem;
}

.modal-body { color: var(--text-body); padding: 1.25rem; }
.modal-title { color: var(--text-heading) !important; font-weight: 700; }

/* ── QR Container ──────────────────────────────────────────────── */
.qr-container {
  background: #fff;
  padding: 16px;
  display: inline-block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition);
  position: relative;
}

.qr-container::before { display: none; }
.qr-container:hover {
  box-shadow: var(--shadow-hover);
  transform: none;
}

/* ── Icon Circles ──────────────────────────────────────────────── */
.icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: var(--accent-light);
  border: 1px solid rgba(67,97,238,0.15);
}

.icon-circle:hover {
  transform: none;
  box-shadow: none;
}

.icon-circle-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.bg-primary     { background-color: var(--accent) !important; }
.bg-primary-subtle {
  background-color: var(--accent-light) !important;
  border: 1px solid rgba(67,97,238,0.15);
}
.bg-success-subtle {
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0;
}
.bg-warning-subtle {
  background-color: #fffbeb !important;
  border: 1px solid #fde68a;
}

/* ── Stat Step Numbers ─────────────────────────────────────────── */
.step-number {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: none;
  animation: none;
}

/* ── Text Utilities ────────────────────────────────────────────── */
.text-primary { color: var(--accent) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-info    { color: var(--color-info) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-light   { color: var(--text-muted) !important; }
.text-white   { color: #fff !important; }

.highlight-success, .highlight-text {
  color: var(--accent);
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: unset;
}

.success-text {
  color: var(--accent);
  font-weight: 700;
}

/* ── Dashboard Header ──────────────────────────────────────────── */
.dashboard-header {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.5rem;
}

.hero-glow-success { display: none; }

/* achievement badge in dashboard */
.achievement-badge {
  display: inline-block;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Subscription badge within dashboard */
.subscription-badge { font-size: 0.82rem; font-weight: 600; }

/* ── Flash Messages ────────────────────────────────────────────── */
.flash-message {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff !important;
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ── Content Wrapper ───────────────────────────────────────────── */
.content-wrapper {
  flex: 1 0 auto;
  padding: 1.5rem 0 2rem;
}

/* ── Footer ────────────────────────────────────────────────────── */
.footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  box-shadow: none;
  backdrop-filter: none;
}

.footer .text-light, .footer span, .footer p { color: var(--text-muted) !important; }

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}

.social-icon:hover {
  background: var(--accent-light);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: none;
}

/* ── Navbar Glass alias ────────────────────────────────────────── */
.navbar-glass {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-bottom: 1px solid var(--border) !important;
}

/* ── Rating Stars ──────────────────────────────────────────────── */
.rating-stars { cursor: pointer; display: inline-block; }
.rating-stars .star { display: inline-block; margin: 0 6px; color: var(--border-medium); transition: transform 0.15s ease; }
.rating-stars .star:hover { transform: scale(1.25); }
.rating-stars .star.selected i { color: #f59e0b; text-shadow: none; }

/* ── Floating animation — subtle ───────────────────────────────── */
.float-animation, .floating-icon {
  animation: subtle-float 5s ease-in-out infinite;
}
@keyframes subtle-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.pulse-animation { animation: none; }

/* ── Feature hexagon — simplified ─────────────────────────────── */
.hexagon-container {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.hexagon {
  width: 100%;
  height: 100%;
  background: var(--accent-light);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  transition: background var(--transition);
}

.hexagon::before { display: none; }
.hexagon-container:hover .hexagon { background: #e0e7ff; }

/* ── Review elements ───────────────────────────────────────────── */
.review-comment {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-body) !important;
  background: var(--bg-section);
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 0;
}

.review-item {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  transition: box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}

.review-item:hover { box-shadow: var(--shadow-card); border-color: var(--border-medium); transform: none; }

/* ── Misc ──────────────────────────────────────────────────────── */
.small, small { color: var(--text-muted) !important; font-weight: 500; }

.list-group-item {
  color: var(--text-body) !important;
  border-color: var(--border);
  background: #fff;
}

.breadcrumb-item { color: var(--text-muted) !important; font-weight: 500; }
.breadcrumb-item.active { color: var(--text-body) !important; font-weight: 600; }

.toast { color: var(--text-body) !important; }
.toast-header { color: var(--text-heading) !important; font-weight: 600; background: var(--bg-section); }
.toast-body { color: var(--text-body) !important; }

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
  body * { visibility: hidden; }
  .print-section, .print-section * { visibility: visible; }
  .print-section { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard-header { padding: 1rem; }
  .display-3 { font-size: 2.2rem; }
  .btn-lg { padding: 0.6rem 1.25rem; font-size: 0.95rem; }
}

/* ── Cookie Banner ─────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  z-index: 1050;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.07);
}

.cookie-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.cookie-text h5 { font-size: 1rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; }
.cookie-text p  { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0; }
.cookie-buttons { display: flex; gap: 0.6rem; }

@media (min-width: 768px) {
  .cookie-content { flex-direction: row; align-items: center; justify-content: space-between; }
  .cookie-text { flex: 1; }
}

/* ── Subscription cards used in subscribe.html / subscription.html */
.plan-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.plan-card.featured, .plan-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(67,97,238,0.08), var(--shadow-hover);
}

/* progress bar */
.progress { background: var(--bg-section); border-radius: 99px; }
.progress-bar { background: var(--accent); border-radius: 99px; }

/* ── BG shapes — removed ───────────────────────────────────────── */
.bg-shapes { display: none; }
.shape { display: none; }