.hero-text {
  color: #11afed;
}

.card-spotlight {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid #222;
  background-color: #111;
  padding: 2rem;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(255, 255, 255, 0.05);
}

.card-spotlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.card-spotlight:hover::before,
.card-spotlight:focus-within::before {
  opacity: 0.6;
}


.section-title h2 {
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.section-title h2 {
    margin-bottom: 0px; /* Remove extra space below the title */
}

.section-subtitle p {
    color: #ffffff;
    font-size: 13px;
    opacity: 0.8; /* 20% opacity */
    margin-bottom: 10px !important; /* Move the subtitle closer to the title */
}

    .section-title h2 {
      margin-bottom: 1rem;
      font-weight: 700;
      font-size: 2.5rem;
      letter-spacing: -0.5px;
      color: #ffffff;
    }
    
    .section-subtitle p {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.8);
      max-width: 700px;
      margin: 0 auto 2rem;
      text-align: center;
    }

.section-title,
.section-subtitle {
    text-align: center;  
    width: 100%;        
    display: flex;       
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    margin-bottom: 0.5rem !important;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ==== Ajuste responsivo del header ==== */

/* Escritorio (mantener alineado con el resto del sitio) */
@media (min-width: 992px) {
  .header-wrapper .nebula-navbar .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .header-wrapper .nebula-navbar .nav-brand {
    margin-left: -45px !important;
  }
}

/* Móviles: agregar aire visual a los lados */
@media (max-width: 991px) {
  /* Forzamos padding mayor para separar logo y menú del borde */
  .header-wrapper .nebula-navbar .container {
    padding-left: 20px !important;   /* puedes subir a 24px si quieres más espacio */
    padding-right: 20px !important;
  }

  /* Aseguramos que el logo no quede desplazado */
  .header-wrapper .nebula-navbar .nav-brand {
    margin-left: 0 !important;
  }

  /* Separación del botón de menú (3 rayas) */
  .header-wrapper .nebula-navbar .navbar-toggler {
    margin-right: 10px !important;
  }
}


/* =========================================
   CREW SHOP - CUSTOMER DASHBOARD V2
   FORZADO PARA SELLAUTH
========================================= */

/* ========= CONTENEDOR GENERAL ========= */
body:has(a[href*="/customer/logout"]),
body:has(.customer-sidebar),
body:has([href*="/customer/orders"]) {
  background: transparent !important;
}

/* wrapper principal */
main .container:has(a[href*="/customer/logout"]),
main .container:has([href*="/customer/orders"]),
.container:has(.btn[href*="/customer/logout"]),
.container:has(a[href*="/customer/dashboard"]) {
  max-width: 1320px !important;
  padding-top: 36px !important;
  padding-bottom: 40px !important;
}

/* ========= HEADER TIPO "WELCOME BACK" ========= */
main .container:has(a[href*="/customer/logout"])::before,
main .container:has([href*="/customer/orders"])::before,
.container:has(.btn[href*="/customer/logout"])::before,
.container:has(a[href*="/customer/dashboard"])::before {
  content: "Welcome back 👋";
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

main .container:has(a[href*="/customer/logout"])::after,
main .container:has([href*="/customer/orders"])::after,
.container:has(.btn[href*="/customer/logout"])::after,
.container:has(a[href*="/customer/dashboard"])::after {
  content: "Manage your purchases, orders and account in one place.";
  display: block;
  font-size: 1rem;
  color: rgba(220,235,255,.58);
  margin-bottom: 26px;
}

/* ========= GRID / ESPACIADO ========= */
main .container:has(a[href*="/customer/logout"]) .row,
main .container:has([href*="/customer/orders"]) .row,
.container:has(.btn[href*="/customer/logout"]) .row,
.container:has(a[href*="/customer/dashboard"]) .row {
  --bs-gutter-x: 1.25rem !important;
  --bs-gutter-y: 1.25rem !important;
}

/* ========= TODAS LAS TARJETAS ========= */
main .container:has(a[href*="/customer/logout"]) .card,
main .container:has([href*="/customer/orders"]) .card,
.container:has(.btn[href*="/customer/logout"]) .card,
.container:has(a[href*="/customer/dashboard"]) .card,
main .container:has(a[href*="/customer/logout"]) > .row > div > div,
main .container:has([href*="/customer/orders"]) > .row > div > div,
.container:has(.btn[href*="/customer/logout"]) > .row > div > div,
.container:has(a[href*="/customer/dashboard"]) > .row > div > div {
  background:
    radial-gradient(circle at top left, rgba(0,191,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(8,12,20,.92), rgba(4,8,14,.96)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 24px !important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow: hidden !important;
  backdrop-filter: blur(14px) !important;
  transition: all .22s ease !important;
}

main .container:has(a[href*="/customer/logout"]) .card:hover,
main .container:has([href*="/customer/orders"]) .card:hover,
.container:has(.btn[href*="/customer/logout"]) .card:hover,
.container:has(a[href*="/customer/dashboard"]) .card:hover,
main .container:has(a[href*="/customer/logout"]) > .row > div > div:hover,
main .container:has([href*="/customer/orders"]) > .row > div > div:hover,
.container:has(.btn[href*="/customer/logout"]) > .row > div > div:hover,
.container:has(a[href*="/customer/dashboard"]) > .row > div > div:hover {
  transform: translateY(-2px);
  box-shadow:
    0 26px 56px rgba(0,0,0,.48),
    0 0 24px rgba(0,191,255,.08) !important;
}

/* ========= COLUMNA IZQUIERDA / SIDEBAR ========= */
main .container:has(a[href*="/customer/logout"]) .row > div:first-child > div,
main .container:has([href*="/customer/orders"]) .row > div:first-child > div,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child > div,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child > div {
  padding: 22px !important;
  min-height: 100% !important;
}

/* Título del sidebar */
main .container:has(a[href*="/customer/logout"]) .row > div:first-child h1,
main .container:has(a[href*="/customer/logout"]) .row > div:first-child h2,
main .container:has(a[href*="/customer/logout"]) .row > div:first-child h3,
main .container:has([href*="/customer/orders"]) .row > div:first-child h1,
main .container:has([href*="/customer/orders"]) .row > div:first-child h2,
main .container:has([href*="/customer/orders"]) .row > div:first-child h3,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child h1,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child h2,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child h3,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child h1,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child h2,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child h3 {
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 1.75rem !important;
  margin-bottom: 10px !important;
  letter-spacing: -.02em !important;
}

/* textos pequeños sidebar */
main .container:has(a[href*="/customer/logout"]) .row > div:first-child p,
main .container:has([href*="/customer/orders"]) .row > div:first-child p,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child p,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child p {
  color: rgba(220,235,255,.62) !important;
  font-size: .98rem !important;
}

/* línea */
main .container:has(a[href*="/customer/logout"]) .row > div:first-child hr,
main .container:has([href*="/customer/orders"]) .row > div:first-child hr,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child hr,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child hr {
  border-color: rgba(255,255,255,.07) !important;
  opacity: 1 !important;
  margin: 18px 0 !important;
}

/* ========= LINKS SIDEBAR ========= */
main .container:has(a[href*="/customer/logout"]) .row > div:first-child a,
main .container:has([href*="/customer/orders"]) .row > div:first-child a,
main .container:has(a[href*="/customer/logout"]) .row > div:first-child button,
main .container:has([href*="/customer/orders"]) .row > div:first-child button,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child a,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child button,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child a,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.02) !important;
  color: rgba(230,240,255,.92) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  transition: all .18s ease !important;
  margin-bottom: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* hover */
main .container:has(a[href*="/customer/logout"]) .row > div:first-child a:hover,
main .container:has([href*="/customer/orders"]) .row > div:first-child a:hover,
main .container:has(a[href*="/customer/logout"]) .row > div:first-child button:hover,
main .container:has([href*="/customer/orders"]) .row > div:first-child button:hover,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child a:hover,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child button:hover,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child a:hover,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child button:hover {
  background: rgba(0,191,255,.08) !important;
  border-color: rgba(0,191,255,.18) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* activo */
main .container:has(a[href*="/customer/logout"]) .row > div:first-child a.active,
main .container:has([href*="/customer/orders"]) .row > div:first-child a.active,
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child a.active,
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child a.active,
main .container:has(a[href*="/customer/logout"]) .row > div:first-child a[href*="/dashboard"],
main .container:has([href*="/customer/orders"]) .row > div:first-child a[href*="/dashboard"],
.container:has(.btn[href*="/customer/logout"]) .row > div:first-child a[href*="/dashboard"],
.container:has(a[href*="/customer/dashboard"]) .row > div:first-child a[href*="/dashboard"] {
  background: linear-gradient(90deg, rgba(0,191,255,.26), rgba(59,130,246,.22)) !important;
  border-color: rgba(0,191,255,.25) !important;
  color: #fff !important;
  box-shadow:
    0 10px 28px rgba(0,191,255,.12),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* logout botón */
main .container:has(a[href*="/customer/logout"]) a[href*="/customer/logout"],
main .container:has([href*="/customer/orders"]) a[href*="/customer/logout"],
.container:has(.btn[href*="/customer/logout"]) a[href*="/customer/logout"],
.container:has(a[href*="/customer/dashboard"]) a[href*="/customer/logout"] {
  justify-content: center !important;
  margin-top: 16px !important;
  border-radius: 18px !important;
}

/* ========= TARJETAS DE STATS ========= */
main .container:has(a[href*="/customer/logout"]) .row > div:not(:first-child) > div,
main .container:has([href*="/customer/orders"]) .row > div:not(:first-child) > div,
.container:has(.btn[href*="/customer/logout"]) .row > div:not(:first-child) > div,
.container:has(a[href*="/customer/dashboard"]) .row > div:not(:first-child) > div {
  padding: 24px !important;
}

/* títulos pequeños tipo Completed Orders */
main .container:has(a[href*="/customer/logout"]) h6,
main .container:has([href*="/customer/orders"]) h6,
.container:has(.btn[href*="/customer/logout"]) h6,
.container:has(a[href*="/customer/dashboard"]) h6,
main .container:has(a[href*="/customer/logout"]) .small,
main .container:has([href*="/customer/orders"]) .small,
.container:has(.btn[href*="/customer/logout"]) .small,
.container:has(a[href*="/customer/dashboard"]) .small {
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: .78rem !important;
  color: rgba(200,220,255,.45) !important;
  font-weight: 700 !important;
}

/* números grandes */
main .container:has(a[href*="/customer/logout"]) h1,
main .container:has([href*="/customer/orders"]) h1,
.container:has(.btn[href*="/customer/logout"]) h1,
.container:has(a[href*="/customer/dashboard"]) h1,
main .container:has(a[href*="/customer/logout"]) h2,
main .container:has([href*="/customer/orders"]) h2,
.container:has(.btn[href*="/customer/logout"]) h2,
.container:has(a[href*="/customer/dashboard"]) h2 {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

/* ========= LATEST ORDER CARD ========= */
main .container:has(a[href*="/customer/logout"]) .row > div h4,
main .container:has([href*="/customer/orders"]) .row > div h4,
.container:has(.btn[href*="/customer/logout"]) .row > div h4,
.container:has(a[href*="/customer/dashboard"]) .row > div h4 {
  color: #fff !important;
  font-weight: 900 !important;
}

/* ========= BOTONES ========= */
main .container:has(a[href*="/customer/logout"]) .btn,
main .container:has([href*="/customer/orders"]) .btn,
.container:has(.btn[href*="/customer/logout"]) .btn,
.container:has(a[href*="/customer/dashboard"]) .btn,
main .container:has(a[href*="/customer/logout"]) a.btn,
main .container:has([href*="/customer/orders"]) a.btn,
.container:has(.btn[href*="/customer/logout"]) a.btn,
.container:has(a[href*="/customer/dashboard"]) a.btn {
  border-radius: 16px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: all .18s ease !important;
}

/* primary */
main .container:has(a[href*="/customer/logout"]) .btn-primary,
main .container:has([href*="/customer/orders"]) .btn-primary,
.container:has(.btn[href*="/customer/logout"]) .btn-primary,
.container:has(a[href*="/customer/dashboard"]) .btn-primary {
  background: linear-gradient(90deg, rgba(0,191,255,.26), rgba(59,130,246,.22)) !important;
  border-color: rgba(0,191,255,.24) !important;
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(0,191,255,.10),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

main .container:has(a[href*="/customer/logout"]) .btn-primary:hover,
main .container:has([href*="/customer/orders"]) .btn-primary:hover,
.container:has(.btn[href*="/customer/logout"]) .btn-primary:hover,
.container:has(a[href*="/customer/dashboard"]) .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 36px rgba(0,191,255,.16),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* delete */
main .container:has(a[href*="/customer/logout"]) .btn-danger,
main .container:has([href*="/customer/orders"]) .btn-danger,
.container:has(.btn[href*="/customer/logout"]) .btn-danger,
.container:has(a[href*="/customer/dashboard"]) .btn-danger,
main .container:has(a[href*="/customer/logout"]) a[href*="delete"],
main .container:has([href*="/customer/orders"]) a[href*="delete"],
.container:has(.btn[href*="/customer/logout"]) a[href*="delete"],
.container:has(a[href*="/customer/dashboard"]) a[href*="delete"] {
  background: rgba(255, 20, 20, 0.08) !important;
  border: 1px solid rgba(255, 70, 70, 0.25) !important;
  color: #ff9b9b !important;
  border-radius: 999px !important;
}

main .container:has(a[href*="/customer/logout"]) .btn-danger:hover,
main .container:has([href*="/customer/orders"]) .btn-danger:hover,
.container:has(.btn[href*="/customer/logout"]) .btn-danger:hover,
.container:has(a[href*="/customer/dashboard"]) .btn-danger:hover,
main .container:has(a[href*="/customer/logout"]) a[href*="delete"]:hover,
main .container:has([href*="/customer/orders"]) a[href*="delete"]:hover,
.container:has(.btn[href*="/customer/logout"]) a[href*="delete"]:hover,
.container:has(a[href*="/customer/dashboard"]) a[href*="delete"]:hover {
  background: rgba(255, 20, 20, 0.14) !important;
  border-color: rgba(255, 90, 90, 0.35) !important;
  color: #fff !important;
}

/* ========= LINKS ========= */
main .container:has(a[href*="/customer/logout"]) a,
main .container:has([href*="/customer/orders"]) a,
.container:has(.btn[href*="/customer/logout"]) a,
.container:has(a[href*="/customer/dashboard"]) a {
  transition: .16s ease !important;
}

/* ========= MOBILE ========= */
@media (max-width: 991px) {
  main .container:has(a[href*="/customer/logout"])::before,
  main .container:has([href*="/customer/orders"])::before,
  .container:has(.btn[href*="/customer/logout"])::before,
  .container:has(a[href*="/customer/dashboard"])::before {
    font-size: 1.65rem !important;
  }

  main .container:has(a[href*="/customer/logout"])::after,
  main .container:has([href*="/customer/orders"])::after,
  .container:has(.btn[href*="/customer/logout"])::after,
  .container:has(a[href*="/customer/dashboard"])::after {
    font-size: .95rem !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 576px) {
  main .container:has(a[href*="/customer/logout"])::before,
  main .container:has([href*="/customer/orders"])::before,
  .container:has(.btn[href*="/customer/logout"])::before,
  .container:has(a[href*="/customer/dashboard"])::before {
    font-size: 1.4rem !important;
  }
}