/**
 * Store Theme Shell (compartido por TODOS los temas de tienda)
 * TiendaWeb.pe - Storefront Theme
 *
 * Viste la "carcasa" de la tienda (navbar, portada, avatar, botones de acción, pestañas y el contenido
 * de /shop, /services, /sorteos, /photos, /posts...) usando SOLO los tokens del tema activo:
 *   --st-bg, --st-surface, --st-surface-2, --st-line, --st-text, --st-heading, --st-muted,
 *   --st-accent, --st-accent-ink, --st-accent-soft, --st-font
 *
 * Reglas:
 *  - Todo cuelga de `body.store-theme-active`, clase que SOLO añade profile.blade.php (páginas de una tienda).
 *    Marketplace (/shop, /services), detalle de producto/servicio y el resto del sitio no la tienen.
 *  - No se tocan ids, names ni markup: es CSS puro.
 *  - Cada tema carga este archivo ANTES del suyo, por lo que puede afinar/sobrescribir cualquier regla
 *    (misma especificidad, gana el posterior).
 */

/* ---------- Base ---------- */
body.store-theme-active {
  padding: 0 !important;           /* anula el padding del bloque raíz del tema (que es para #ssrLandingPage) */
  color: var(--st-text);
  font-family: var(--st-font, inherit);
}

/* ---------- Navbar superior ---------- */
body.store-theme-active .p-nav,
body.store-theme-active .p-nav.navbar_background_color,
body.store-theme-active .p-nav.bg-white {
  background: var(--st-nav-bg, var(--st-surface)) !important;
  border-bottom: 1px solid var(--st-line) !important;
  box-shadow: 0 2px 14px rgba(15, 23, 42, .06) !important;
}

body.store-theme-active .p-nav .navbar-nav a.nav-link:not(.hm-nav-cta),
body.store-theme-active .p-nav .login-btn {
  color: var(--st-text) !important;
  font-family: var(--st-font, inherit);
  font-weight: 500;
  transition: color .2s ease;
}
body.store-theme-active .p-nav .navbar-nav a.nav-link:not(.hm-nav-cta):hover,
body.store-theme-active .p-nav .navbar-nav a.nav-link:not(.hm-nav-cta):focus,
body.store-theme-active .p-nav .login-btn:hover {
  color: var(--st-accent) !important;
}

body.store-theme-active .p-nav #searchCreatorNavbar {
  background-color: var(--st-surface-2) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-heading) !important;
  border-radius: 9999px !important;
}
body.store-theme-active .p-nav #searchCreatorNavbar::placeholder { color: var(--st-muted) !important; }
body.store-theme-active .p-nav #searchCreatorNavbar:focus {
  border-color: var(--st-accent) !important;
  box-shadow: 0 0 0 3px var(--st-accent-soft) !important;
  outline: none !important;
}
body.store-theme-active .p-nav .button-search { color: var(--st-accent) !important; }

body.store-theme-active .p-nav #dropdownCreators {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-line) !important;
}
body.store-theme-active .p-nav #dropdownCreators .dropdown-item { color: var(--st-text) !important; }
body.store-theme-active .p-nav #dropdownCreators .dropdown-item:hover { background: var(--st-surface-2) !important; }

body.store-theme-active .p-nav a.hm-nav-cta,
body.store-theme-active .p-nav .navbar-nav a.hm-nav-cta,
body.store-theme-active .p-nav .hm-nav-cta {
  background: var(--st-accent) !important;
  color: var(--st-accent-ink) !important;
  border: 1px solid var(--st-accent) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  padding: .45rem 1.15rem !important;
  transition: filter .2s ease, transform .2s ease;
}
body.store-theme-active .p-nav a.hm-nav-cta:hover,
body.store-theme-active .p-nav .navbar-nav a.hm-nav-cta:hover,
body.store-theme-active .p-nav .hm-nav-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--st-accent-ink) !important; }

body.store-theme-active .p-nav .navbar-toggler,
body.store-theme-active .p-nav .btn-mobile-nav,
body.store-theme-active .p-nav .navbar-toggler i,
body.store-theme-active .p-nav .btn-mobile-nav i,
body.store-theme-active .p-nav .close-menu-mobile { color: var(--st-heading) !important; }

@media (max-width: 991.98px) {
  body.store-theme-active .p-nav .navbar-mobile {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-line) !important;
    border-radius: 14px;
    padding: 1rem 1.25rem;
  }
}

/* ---------- Portada: transición suave hacia el fondo del tema ---------- */
body.store-theme-active .profile-cover::after {
  height: clamp(100px, 20vw, 220px) !important;
  background: linear-gradient(to top, var(--st-bg) 0%, transparent 100%) !important;
}
body.store-theme-active .btn-cover-upload {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-heading) !important;
}

/* ---------- Avatar, nombre y datos ---------- */
body.store-theme-active .avatar-wrap {
  border-radius: 50% !important;
  background: var(--st-surface);
  box-shadow: 0 0 0 4px var(--st-bg), 0 8px 24px rgba(15, 23, 42, .18) !important;
}
body.store-theme-active .img-user { border: 3px solid var(--st-accent) !important; }
body.store-theme-active .button-avatar-upload {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-accent) !important;
  color: var(--st-accent) !important;
}
body.store-theme-active .img-profile-user h4 {
  color: var(--st-heading) !important;
  font-family: var(--st-font, inherit);
  font-weight: 700;
}
body.store-theme-active .img-profile-user .verified { color: var(--st-accent) !important; }
body.store-theme-active .img-profile-user p,
body.store-theme-active .img-profile-user small,
body.store-theme-active .img-profile-user .timeAgo { color: var(--st-muted) !important; }

/* ---------- Botones de acción (editar/suscribir, propina, mensaje, compartir) ---------- */
body.store-theme-active .d-flex-user .btn-primary,
body.store-theme-active .d-flex-user .btn-profile.btn-primary {
  background: var(--st-accent) !important;
  border: 1px solid var(--st-accent) !important;
  color: var(--st-accent-ink) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  transition: filter .2s ease, transform .2s ease;
}
body.store-theme-active .d-flex-user .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

body.store-theme-active .d-flex-user .btn-google,
body.store-theme-active .d-flex-user .btn-profile.btn-google {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-text) !important;
  border-radius: 9999px !important;
  transition: all .2s ease;
}
body.store-theme-active .d-flex-user .btn-google:hover {
  border-color: var(--st-accent) !important;
  color: var(--st-accent) !important;
  transform: translateY(-1px);
}

/* Modales del perfil (compartir / propina / reportar) */
body.store-theme-active .share-modal .modal-content,
body.store-theme-active #tipForm .modal-content,
body.store-theme-active #reportCreator .modal-content {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-text) !important;
  border-radius: 16px;
}
body.store-theme-active .share-modal .close,
body.store-theme-active #tipForm .close { color: var(--st-muted) !important; }
body.store-theme-active .share-modal .social-share { color: var(--st-text) !important; }
body.store-theme-active .share-modal .social-share:hover { color: var(--st-accent) !important; }

/* ---------- Pestañas (Inicio, Tienda, Servicios, Sorteos, Fotos, Videos, Posts) ---------- */
body.store-theme-active .nav-profile {
  border-bottom: 1px solid var(--st-line) !important;
  background: transparent !important;
}
body.store-theme-active .nav-profile .nav-link {
  border-bottom: 2px solid transparent !important;
  padding: .65rem 1rem !important;
  transition: all .2s ease;
}
body.store-theme-active .nav-profile .nav-link a {
  color: var(--st-muted) !important;
  font-weight: 500;
  transition: color .2s ease;
}
body.store-theme-active .nav-profile .nav-link .sm-btn-size {
  color: var(--st-muted) !important;
  font-size: .9rem !important;
  font-weight: 600;
}
body.store-theme-active .nav-profile .nav-link:hover a,
body.store-theme-active .nav-profile .nav-link:hover .sm-btn-size { color: var(--st-accent) !important; }
body.store-theme-active .nav-profile .nav-link.active,
body.store-theme-active .nav-profile li.active { border-bottom: 2px solid var(--st-accent) !important; }
body.store-theme-active .nav-profile .nav-link.active a { color: var(--st-heading) !important; font-weight: 700; }
body.store-theme-active .nav-profile .nav-link.active .sm-btn-size { color: var(--st-accent) !important; }

/* ---------- Contenido de las pestañas (carga directa por SEO o AJAX) ---------- */
body.store-theme-active #ssrTabShop,
body.store-theme-active #ssrTabServices,
body.store-theme-active #ssrTabRaffles,
body.store-theme-active #ssrDefaultPosts {
  color: var(--st-text);
}
body.store-theme-active #ssrTabShop :is(h1, h2, h3, h4, h5, h6),
body.store-theme-active #ssrTabServices :is(h1, h2, h3, h4, h5, h6),
body.store-theme-active #ssrTabRaffles :is(h1, h2, h3, h4, h5, h6),
body.store-theme-active #ssrDefaultPosts :is(h1, h2, h3, h4, h5, h6) {
  color: var(--st-heading);
  font-family: var(--st-font, inherit);
}
body.store-theme-active #ssrTabShop .text-muted,
body.store-theme-active #ssrTabServices .text-muted,
body.store-theme-active #ssrTabRaffles .text-muted,
body.store-theme-active #ssrDefaultPosts .text-muted { color: var(--st-muted) !important; }

body.store-theme-active #ssrDefaultPosts .card:not(.card-updates),
body.store-theme-active #ssrDefaultPosts .card-body,
body.store-theme-active #ssrDefaultPosts .update {
  background: var(--st-surface) !important;
  border-color: var(--st-line) !important;
  color: var(--st-text);
}
body.store-theme-active #ssrDefaultPosts .border-bottom,
body.store-theme-active #ssrDefaultPosts .border-top,
body.store-theme-active #ssrDefaultPosts hr { border-color: var(--st-line) !important; }

body.store-theme-active #ssrTabShop .form-control,
body.store-theme-active #ssrTabShop .custom-select,
body.store-theme-active #ssrTabServices .form-control,
body.store-theme-active #ssrTabServices .custom-select,
body.store-theme-active #ssrTabRaffles .form-control {
  background-color: var(--st-surface);
  border-color: var(--st-line);
  color: var(--st-heading);
}

body.store-theme-active #ssrTabShop .btn-primary,
body.store-theme-active #ssrTabServices .btn-primary,
body.store-theme-active #ssrTabRaffles .btn-primary,
body.store-theme-active #ssrDefaultPosts .btn-primary {
  background: var(--st-accent);
  border-color: var(--st-accent);
  color: var(--st-accent-ink);
}
body.store-theme-active #ssrTabShop .btn-outline-primary,
body.store-theme-active #ssrTabServices .btn-outline-primary,
body.store-theme-active #ssrTabRaffles .btn-outline-primary,
body.store-theme-active #ssrDefaultPosts .btn-outline-primary {
  border-color: var(--st-accent);
  color: var(--st-accent);
  background: transparent;
}
body.store-theme-active #ssrTabShop .btn-outline-primary:hover,
body.store-theme-active #ssrTabServices .btn-outline-primary:hover,
body.store-theme-active #ssrTabRaffles .btn-outline-primary:hover,
body.store-theme-active #ssrDefaultPosts .btn-outline-primary:hover {
  background: var(--st-accent);
  color: var(--st-accent-ink);
}

/* Paginación */
body.store-theme-active .page-link { background: var(--st-surface); border-color: var(--st-line); color: var(--st-text); }
body.store-theme-active .page-item.active .page-link { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-ink); }