/* ============================================================
   PRODUCTS LISTING PAGE
   Loaded by web-lab/products/index.blade.php
   Reusable card styles (product-page-card, features, pricing,
   lh-grid, btn-cart, btn-docs) live in listing-page.css
============================================================ */

/* ── Guarantee strip ───────────────────────────────────────── */
.guarantee-strip {
  background: #fff;
  border-top: 1px solid rgba(10,22,40,.06);
  padding: 48px 0;
}
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.guarantee-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.guarantee-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.guarantee-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--navy);
}
.guarantee-desc { font-size: 12.5px; color: #94A3B8; line-height: 1.5; }

/* ── Coming soon section ───────────────────────────────────── */
.coming-soon-section { background: #F8FAFF; padding: 0 0 100px; }
.coming-soon-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
}
.coming-soon-header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--navy);
}
.coming-soon-divider {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(10,22,40,.1), transparent);
}

/* ── Coming-soon card ──────────────────────────────────────── */
.cs-card {
  background: var(--navy);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden; position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 260px;
}
.cs-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 10% 50%, rgba(0,194,255,.07) 0%, transparent 55%),
              radial-gradient(circle at 90% 20%, rgba(108,71,255,.08) 0%, transparent 55%);
  pointer-events: none;
}
.cs-card-left {
  padding: 36px 40px; position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.cs-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25);
  border-radius: 100px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: #FBBF24; font-family: 'Space Grotesk', sans-serif;
  width: fit-content;
}
.cs-badge i { font-size: 11px; }
.cs-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.15;
}
.cs-title span { color: #00C2FF; }
.cs-desc { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; max-width: 400px; }
.cs-teaser-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cs-feature-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px; font-size: 12px; color: rgba(255,255,255,.65);
  font-family: 'Inter', sans-serif;
}
.cs-feature-tag i { font-size: 11px; color: #00C2FF; }

.cs-card-right {
  padding: 36px 40px; border-left: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  position: relative;
}
.cs-price-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  font-family: 'Space Grotesk', sans-serif; margin-bottom: 8px;
}
.cs-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cs-price-early {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 38px; font-weight: 800; color: #fff; line-height: 1;
}
.cs-price-early sup { font-size: 18px; font-weight: 600; vertical-align: super; line-height: 0; }
.cs-price-regular {
  font-size: 16px; color: rgba(255,255,255,.3);
  text-decoration: line-through; font-family: 'Space Grotesk', sans-serif;
}
.cs-price-saving {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25);
  border-radius: 100px; font-size: 11.5px; font-weight: 700; color: #22C55E;
  font-family: 'Space Grotesk', sans-serif; margin-bottom: 4px;
}
.cs-price-note { font-size: 12px; color: rgba(255,255,255,.3); }
.cs-price-note strong { color: #FBBF24; font-weight: 600; }

/* ── Pre-order & notify buttons ────────────────────────────── */
.btn-preorder {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  color: #0A1628; border: none; cursor: pointer;
  transition: all .25s cubic-bezier(.16,1,.3,1);
  text-decoration: none; box-shadow: 0 4px 20px rgba(251,191,36,.3);
}
.btn-preorder:hover {
  background: linear-gradient(135deg, #FCD34D, #FBBF24);
  box-shadow: 0 8px 28px rgba(251,191,36,.45); transform: translateY(-2px);
}
.btn-notify {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.55); background: transparent;
  border: 1px solid rgba(255,255,255,.12); cursor: pointer;
  transition: all .2s; text-decoration: none;
}
.btn-notify:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); }

.btn-preorder-incart {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  background: transparent; color: #FBBF24;
  border: 2px solid rgba(251,191,36,.4); cursor: default;
  text-decoration: none; pointer-events: none;
}
.btn-preorder-done {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  background: rgba(34,197,94,.12); color: #22C55E;
  border: 2px solid rgba(34,197,94,.3); cursor: default;
  text-decoration: none; pointer-events: none;
}
.btn-notify-done {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  color: #22C55E; background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25); cursor: default;
  text-decoration: none; pointer-events: none;
}

/* ── Inline notify email form ──────────────────────────────── */
.cs-notify-form { display: none; flex-direction: column; gap: 6px; margin-top: 2px; }
.cs-notify-form.active { display: flex; }
.cs-notify-form input[type="email"] {
  padding: 10px 14px; border-radius: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 13px; outline: none;
}
.cs-notify-form input[type="email"]::placeholder { color: rgba(255,255,255,.3); }
.cs-notify-form input[type="email"]:focus { border-color: rgba(255,255,255,.35); }
.cs-notify-form-submit {
  padding: 10px 16px; border-radius: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.cs-notify-form-submit:hover { background: rgba(255,255,255,.16); }

/* ── Spots indicator ───────────────────────────────────────── */
.cs-spots { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.35); }
.cs-spots-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,.6);
  flex-shrink: 0; animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .guarantee-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-card { grid-template-columns: 1fr; }
  .cs-card-right { border-left: none; border-top: 1px solid rgba(255,255,255,.07); }
  /* On small screens show features inline instead of hover overlay */
  .features-overlay {
    position: static; opacity: 1; transform: none;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; margin-top: 16px; pointer-events: auto;
  }
  .features-overlay-label { display: none; }
  .features-overlay .features-list li { color: #475569; }
  .features-overlay .feature-check { background: rgba(0,194,255,.1); border: none; }
  .features-overlay .features-list li.more { color: #94A3B8; }
  .features-hint { display: none; }
}
@media (max-width: 600px) {
  .guarantee-grid { grid-template-columns: 1fr; }
  .cs-card-left, .cs-card-right { padding: 28px 24px; }
  .cs-title { font-size: 22px; }
}