/*
 * Paskyros theme - violet -> rose gradient, dark background.
 * Base colors (--cl-*) come from the dashboard (Theme Color, backgrounds,
 * border) via layouts/master.njk. --violet below is fixed so every gradient
 * keeps a consistent violet-to-accent direction regardless of the chosen
 * accent color. Edit this file for extra tweaks.
 */

:root {
  --violet: #7c3aed;
  --grad: linear-gradient(135deg, var(--violet), var(--cl-accent));
  --accent-soft: #f0abfc;
  --rose-radius: 18px;
}

/* --- Page ------------------------------------------------------------- */
html, body { overflow-x: clip; }

body {
  background-image:
    radial-gradient(900px 520px at 92% -6%, rgba(124,58,237,.16), transparent 62%),
    radial-gradient(700px 480px at -8% 30%, rgba(var(--cl-accent-rgb), .12), transparent 60%);
  background-attachment: fixed;
  letter-spacing: -.005em;
}

::selection { background: rgba(var(--cl-accent-rgb), .45); color: #fff; }
a { text-underline-offset: 3px; }

/* --- Headings ----------------------------------------------------------- */
.section-title h1,
.section-title h2 { font-weight: 800; letter-spacing: -.035em; color: #fff; }
.section-subtitle p { color: rgba(255,255,255,.62); }

/* --- Buttons & forms ------------------------------------------------------ */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--cl-accent); --bs-btn-border-color: var(--cl-accent);
  --bs-btn-hover-bg: var(--cl-accent); --bs-btn-hover-border-color: var(--cl-accent);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  background: var(--grad) !important; border: 0 !important;
  box-shadow: 0 10px 26px -14px rgba(236,47,115,.6);
}
.btn-primary:hover { filter: brightness(1.08); }

.form-control,
.form-select {
  border-radius: 14px;
  background-color: var(--cl-background-secondary);
  border-color: var(--cl-border);
  color: #fff;
}

.modal-content,
.dropdown-menu {
  border-radius: 22px;
  background-color: var(--cl-background-secondary);
  border-color: var(--cl-border);
}

/* --- Navbar --------------------------------------------------------------- */
.hb-navbar[data-component-id="navbar"] {
  background: rgba(12, 7, 19, .82) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cl-border);
}
.hb-navbar[data-component-id="navbar"] .nav-link,
.hb-navbar[data-component-id="navbar"] .nav-ghost { border-radius: 999px !important; }
.hb-navbar[data-component-id="navbar"] .navbar-brand { letter-spacing: -.03em; }

/* --- Product cards ---------------------------------------------------------- */
.shop-card.card {
  border-radius: 22px !important;
  background: rgba(var(--cl-background-secondary-rgb), .92) !important;
  border-color: var(--cl-border) !important;
}
.shop-card.card:hover { border-color: rgba(var(--cl-accent-rgb), .7) !important; transform: translateY(-2px); }
.shop-card .card-title { letter-spacing: -.02em; font-weight: 600; }
.shop-card .badge.bg-success,
.badge.bg-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }

/* --- FAQ accordion ------------------------------------------------------------ */
.faq .accordion-item {
  background: var(--cl-background-secondary);
  border: 1.5px solid var(--cl-border);
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: 12px;
}
.faq .accordion-button {
  background: transparent; color: #fff; font-weight: 600;
}
.faq .accordion-button:not(.collapsed) {
  background: rgba(var(--cl-accent-rgb), .12); color: #fff; box-shadow: none;
}
.faq .accordion-button::after { filter: invert(1); }
.faq .accordion-body { color: rgba(255,255,255,.68); }

/* --- Social buttons on the homepage -------------------------------------------- */
.socials .social { border-radius: 18px; }

/* --- Scrollbar ------------------------------------------------------------------ */
* { scrollbar-color: rgba(var(--cl-accent-rgb), .5) transparent; }

/* --- Mobile (currency / login buttons in the collapsed navbar) ------------------ */
@media (max-width: 991.98px) {
  .hb-navbar[data-component-id="navbar"] .nav-mobile-utility {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--cl-border);
    background: var(--cl-background-secondary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
  }
  .hb-navbar[data-component-id="navbar"] .nav-mobile-login { font-size: 14px; }
  .hb-navbar[data-component-id="navbar"] .nav-mobile-currency { min-width: 84px; }
  .hb-navbar[data-component-id="navbar"] .nav-mobile-currency .choices,
  .hb-navbar[data-component-id="navbar"] .nav-mobile-currency .choices__inner {
    margin-bottom: 0 !important;
    min-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}