/* Style-U Core — Frontend component styles */

/* ─── Waitlist form ─── */
.styleu-waitlist-form .wl-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wl-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.wl-input:focus {
  border-color: rgba(163,123,255,0.5);
  background: rgba(255,255,255,0.07);
}
.wl-email { flex: 1; min-width: 200px; }
.wl-field  { margin-bottom: 14px; }
.wl-message {
  font-size: 14px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  display: none;
}
.wl-message:not(:empty) { display: block; }
.wl-success { background: rgba(46,229,160,0.12); color: #2ee5a0; border: 1px solid rgba(46,229,160,0.25); }
.wl-error   { background: rgba(255,78,78,0.1);   color: #ff6b6b; border: 1px solid rgba(255,78,78,0.2); }

/* ─── Tailor form ─── */
.styleu-tailor-form label {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.form-field  { margin-bottom: 20px; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.specialty-check:has(input:checked) {
  border-color: rgba(163,123,255,0.5);
  background: rgba(163,123,255,0.08);
  color: #fff;
}

/* ─── Package cards ─── */
.plan-card {
  background: var(--surface, #14141C);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  transition: border-color .2s, transform .2s;
}
.plan-card.featured {
  border-color: rgba(163,123,255,0.4);
  background: rgba(163,123,255,0.05);
}
.plan-badge {
  display: inline-block;
  font-size: 10px;
  padding: 4px 10px;
  background: rgba(163,123,255,0.18);
  color: #A37BFF;
  border-radius: 100px;
  margin-bottom: 12px;
}
.plan-name  { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.plan-price { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; }

/* ─── Testimonial ─── */
.testimonial-card { transition: border-color .2s; }
.testimonial-card:hover { border-color: rgba(255,255,255,0.12); }

/* ─── App badges ─── */
.badge-app { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-app a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.badge-app a:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); }

/* ─── Social links ─── */
.social-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.social-links a { font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color .2s; }
.social-links a:hover { color: #fff; }

/* ─── Footer overrides (li with links) ─── */
.foot-col ul a { color: inherit; text-decoration: none; }
.foot-col ul a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   WORDPRESS BUTTON OVERRIDE RESET
   WordPress injects button styles (from wp-block-library,
   theme defaults) that break the original designs.
   These resets restore exact original behaviour.
═══════════════════════════════════════════════════════════ */

/* ── FAQ accordion buttons ── */
.faq-item .faq-q,
.faq-item .faq-q:hover,
.faq-item .faq-q:focus,
.faq-item .faq-q:active {
  all: unset !important;
  width: 100% !important;
  padding: 20px 0 !important;
  background: none !important;
  border: none !important;
  text-align: left !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 18px !important;
  align-items: center !important;
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  font-family: inherit !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.faq-q .qn {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: var(--purple) !important;
}
.faq-q .plus {
  font-size: 22px !important;
  color: var(--dim-2) !important;
  line-height: 1 !important;
  transition: transform .25s, color .25s !important;
}
.faq-item.open .faq-q .plus {
  transform: rotate(45deg) !important;
  color: var(--purple) !important;
}

/* ── Catalogue tabs ── */
.cat-tabs .cat-tab,
.cat-tabs .cat-tab:hover,
.cat-tabs .cat-tab:focus,
.cat-tabs .cat-tab:active {
  all: unset !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--dim) !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  transition: background .2s, color .2s !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.cat-tabs .cat-tab.active {
  background: #fff !important;
  color: #0a0a0f !important;
}
.cat-tab .cnt {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 100px !important;
  color: var(--dim-2) !important;
}
.cat-tab.active .cnt {
  background: rgba(10,10,15,0.1) !important;
  color: rgba(10,10,15,0.6) !important;
}

/* ── Catalogue filter chips ── */
.cat-filters .cat-chip,
.cat-filters .cat-chip:hover,
.cat-filters .cat-chip:focus {
  all: unset !important;
  background: transparent !important;
  color: var(--dim) !important;
  border: 1px solid var(--hair) !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  transition: background .2s, color .2s, border-color .2s !important;
  font-family: inherit !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  display: inline-block !important;
}
.cat-filters .cat-chip:hover {
  color: #fff !important;
  border-color: var(--hair-2) !important;
}
.cat-filters .cat-chip.active {
  background: rgba(163,123,255,0.12) !important;
  color: #C2A8FF !important;
  border-color: rgba(163,123,255,0.35) !important;
}

/* ── Catalogue page sticky controls (cat-controls) ── */
.cat-controls .lhs button,
.cat-controls .lhs button:hover,
.cat-controls .lhs button:focus {
  all: unset !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--dim) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  transition: background .2s, color .2s !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: inherit !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.cat-controls .lhs button.active {
  background: #fff !important;
  color: #0a0a0f !important;
}
.cat-controls .lhs button .cnt {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 100px !important;
  color: var(--dim-2) !important;
}
.cat-controls .lhs button.active .cnt {
  background: rgba(10,10,15,0.1) !important;
  color: rgba(10,10,15,0.55) !important;
}
.cat-controls .mid button,
.cat-controls .mid button:hover,
.cat-controls .mid button:focus {
  all: unset !important;
  background: transparent !important;
  color: var(--dim) !important;
  border: 1px solid var(--hair) !important;
  padding: 7px 13px !important;
  font-size: 12.5px !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  transition: background .2s, color .2s, border-color .2s !important;
  font-family: inherit !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.cat-controls .mid button:hover { color: #fff !important; border-color: var(--hair-2) !important; }
.cat-controls .mid button.active { background: rgba(163,123,255,0.12) !important; color: #C2A8FF !important; border-color: rgba(163,123,255,0.35) !important; }

/* ── View toggle ── */
.view-toggle button,
.view-toggle button:hover,
.view-toggle button:focus {
  all: unset !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--dim-2) !important;
  padding: 6px 10px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.view-toggle button.active { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

/* ── Billing toggle (packages page) ── */
.billing-toggle button,
.billing-toggle button:hover,
.billing-toggle button:focus {
  all: unset !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--dim) !important;
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  transition: background .2s, color .2s !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.billing-toggle button.active { background: #fff !important; color: #0a0a0f !important; }

/* ── Meas tabs ── */
.meas-tab {
  cursor: pointer !important;
}

/* ── Sort summary / details ── */
.cat-controls .sort summary {
  list-style: none !important;
  cursor: pointer !important;
}
.cat-controls .sort summary::-webkit-details-marker { display: none !important; }
.cat-controls .sort .menu button,
.cat-controls .sort .menu button:hover {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  color: var(--dim) !important;
  border: 0 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.cat-controls .sort .menu button:hover { background: rgba(255,255,255,0.04) !important; color: #fff !important; }
.cat-controls .sort .menu button.active { color: var(--purple) !important; }

/* ── Fave buttons on style cards ── */
.style-card .fave,
.style-card .fave:hover,
.style-card .fave:focus {
  all: unset !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.85) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s, color .2s, transform .2s !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}
.style-card .fave:hover { background: rgba(255,78,205,0.7) !important; color: #fff !important; transform: scale(1.08) !important; }
.style-card.faved .fave { background: var(--pink) !important; color: #fff !important; border-color: transparent !important; }

/* ── Quick action buttons on catalogue cards ── */
.style-card .quick-actions button,
.style-card .quick-actions button:hover {
  all: unset !important;
  padding: 6px 12px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.style-card .quick-actions button:hover { background: rgba(255,255,255,0.18) !important; }

/* ── Catalogue page drop alert form button ── */
.drop-alert button,
.drop-alert button:hover {
  all: unset !important;
  padding: 0 22px !important;
  background: var(--grad-2) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

/* ── Packages page sort dropdown ── */
.tier-cards .tier .cta a,
.tier .cta a {
  width: 100% !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════
   CATALOGUE CONTROLS — EXACT LAYOUT ENFORCEMENT
   Forces the single-row layout: tabs LEFT, chips RIGHT
   exactly matching the original design screenshot.
═══════════════════════════════════════════════════════════ */

/* Wrapper row */
div.catalogue-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
  margin-bottom: 24px !important;
  flex-wrap: nowrap !important; /* prevents wrapping on desktop */
}

/* Gender pill container */
div.catalogue-controls div.cat-tabs,
#cat-tabs.cat-tabs {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  padding: 4px !important;
  background: var(--surface) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 100px !important;
  flex-shrink: 0 !important; /* never shrinks — keeps shape */
  align-items: center !important;
}

/* Gender pill buttons — compact, exact sizing */
div.catalogue-controls div.cat-tabs button.cat-tab,
#cat-tabs button.cat-tab {
  all: unset !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--dim) !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  letter-spacing: -0.01em !important;
  transition: background .2s, color .2s !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}
div.catalogue-controls div.cat-tabs button.cat-tab.active,
#cat-tabs button.cat-tab.active {
  background: #fff !important;
  color: #0a0a0f !important;
}
div.catalogue-controls div.cat-tabs button.cat-tab .cnt,
#cat-tabs button.cat-tab .cnt {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 100px !important;
  color: var(--dim-2) !important;
  line-height: 1.4 !important;
  display: inline-block !important;
}
div.catalogue-controls div.cat-tabs button.cat-tab.active .cnt,
#cat-tabs button.cat-tab.active .cnt {
  background: rgba(10,10,15,0.1) !important;
  color: rgba(10,10,15,0.6) !important;
}

/* Filter chips container — fills remaining space, aligns right */
div.catalogue-controls div.cat-filters,
#cat-filters.cat-filters {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 !important; /* takes up remaining space */
}

/* Filter chip buttons */
div.catalogue-controls div.cat-filters button.cat-chip,
#cat-filters button.cat-chip {
  all: unset !important;
  background: transparent !important;
  color: var(--dim) !important;
  border: 1px solid var(--hair) !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  transition: background .2s, color .2s, border-color .2s !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
div.catalogue-controls div.cat-filters button.cat-chip:hover,
#cat-filters button.cat-chip:hover {
  color: #fff !important;
  border-color: var(--hair-2) !important;
}
div.catalogue-controls div.cat-filters button.cat-chip.active,
#cat-filters button.cat-chip.active {
  background: rgba(163,123,255,0.12) !important;
  color: #C2A8FF !important;
  border-color: rgba(163,123,255,0.35) !important;
}

/* Mobile breakpoint — stack vertically */
@media (max-width: 720px) {
  div.catalogue-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  div.catalogue-controls div.cat-tabs,
  #cat-tabs.cat-tabs {
    flex-wrap: wrap !important;
  }
  div.catalogue-controls div.cat-tabs button.cat-tab,
  #cat-tabs button.cat-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  div.catalogue-controls div.cat-filters,
  #cat-filters.cat-filters {
    justify-content: flex-start !important;
    gap: 5px !important;
  }
  div.catalogue-controls div.cat-filters button.cat-chip,
  #cat-filters button.cat-chip {
    padding: 6px 11px !important;
    font-size: 11.5px !important;
  }
}