/* Modern theme baseline: tokens, navbar glass, hero overlays */

/* Design tokens */
:root {
  --bg: #0b1220;            /* slate-950 */
  --bg-soft: #111827;       /* slate-900 */
  --panel: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.12);
  --text: #e5e7eb;          /* slate-200 */
  --muted: #cbd5e1;         /* slate-300 */
  --brand: #F5956F;         /* arancione brand */
  --accent: #EB3F93;        /* rosa */
  --shadow-color: 42 48 66; /* rgb components for shadows */
  --navbar-offset: 72px;
  --font-base: 18px;
  --form-control-height: 54px;
}

html, body {
  height: 100%;
}
body.theme-dark {
  background: var(--bg);
  color: var(--text);
}

/* Body offset for fixed navbar */
body.has-fixed-navbar {
  padding-top: var(--navbar-offset);
}

/* Typography defaults */
body { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; font-size: var(--font-base); }
body h1, body h2, body h3, body h4, body h5, body h6 { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
label { font-size: 1.05rem; }
small, .form-text { font-size: 0.95rem; }

/* Brand utilities */
.text-warning, .text-arancione { color: var(--brand) !important; }
.text-rosa { color: var(--accent) !important; }
.btn-warning { background-color: var(--brand) !important; border-color: var(--brand) !important; color: #1f2937 !important; }
/* Utility: brand border color */
.border-arancione { border-color: var(--brand) !important; }

/* Liquid glass navbar: works in both themes */
.navbar-modern { position: fixed; top: 0; left: 0; right: 0; z-index: 1040; border-radius: 16px; margin: 0 clamp(8px, 2vw, 16px); margin-top: 1%; padding: 0.5rem 1rem; }
.navbar-modern.glass-navbar { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--panel-border) !important; }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .navbar-modern.glass-navbar { backdrop-filter: blur(14px) saturate(160%) !important; background: rgba(255, 255, 255, 0.08) !important; }
}
.navbar-dark .navbar-brand, .navbar-dark .navbar-text, .navbar-dark .nav-link { color: var(--text) !important; }
.navbar-modern .dropdown-menu { z-index: 1100; background-color: var(--bg-soft) !important; border-color: #1f2937 !important; }
.navbar-modern .dropdown-item { color: var(--text) !important; }
.navbar-modern .dropdown-item:hover { background-color: #111827 !important; }

/* Panels */
.theme-dark .card { background-color: var(--panel); border: 1px solid var(--panel-border); color: var(--text); }
.theme-dark hr { border-color: var(--panel-border); }

/* Forms */
.theme-dark .form-control, .theme-dark select.form-control, .theme-dark textarea, .theme-dark input[type="text"],
.theme-dark input[type="number"], .theme-dark input[type="email"], .theme-dark input[type="tel"],
.theme-dark input[type="password"], .theme-dark input[type="search"], .theme-dark select { background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--text); }

/* Larger and vertically centered form controls */
.form-control, select.form-control, textarea.form-control {
  font-size: 1.0625rem; /* ~17px */
  min-height: var(--form-control-height);
  padding: 0.625rem 0.875rem;
  line-height: 1.5;
}
select.form-control { height: var(--form-control-height); padding-top: 0.375rem; padding-bottom: 0.375rem; }
.input-group .form-control { height: var(--form-control-height); }

/* Two-per-row helper + global enforcement */
/* Ensure the form grid actually uses flex */
.form-row, .theme-dark .form-row { display: flex; flex-wrap: wrap; row-gap: 18px; column-gap: 20px !important; margin-left: 0; margin-right: 0; }
/* Fallback spacing when gap unsupported */
.form-row > [class*='col-'], .form-row > .form-group { padding-bottom: 18px; }
@media (min-width: 768px) {
  /* Enforce two columns on any direct child inside .form-row */
  .form-row > * { flex: 0 0 calc((100% - 20px)/2) !important; max-width: calc((100% - 20px)/2) !important; }
  .form-row > *:only-child { flex: 0 0 100% !important; max-width: 100% !important; }

  /* Specific helpers for existing markup (.form-group col-md-*) */
  .form-row.two-per-row > .form-group,
  .form-row.two-per-row > [class*="col-"] { flex: 0 0 calc((100% - 20px)/2) !important; max-width: calc((100% - 20px)/2) !important; }
  .form-row > .form-group,
  .form-row > [class*="col-"] { flex: 0 0 calc((100% - 20px)/2) !important; max-width: calc((100% - 20px)/2) !important; }
  .form-row > .form-group:only-child,
  .form-row > [class*="col-"]:only-child { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Hero backgrounds: base + overlay */
.hero-background { background-size: cover; background-position: top center; position: relative; min-height: 380px; margin-top: calc(var(--navbar-offset) * -1); padding-top: var(--navbar-offset); }
.hero-background::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,0.65) 0%, rgba(2,6,23,0.55) 35%, rgba(2,6,23,0.35) 100%); z-index: 0; }
.hero-background > * { position: relative; z-index: 1; }

/* Specific hero variants (images under /public) */
.windowsBackground { background-image: url('/cat/windows.png'); }
.ipadBackground { background-image: url('/vendere-ipad.jpg'); }
.iphoneBackground { background-image: url('/vendere-iphone.jpg'); }
.androidBackground { background-image: url('/vendere-samsung.jpg'); }
.consoleBackground { background-image: url('/vendere-playstation-xbox-usate.webp'); }
.GPUBackground { background-image: url('/vendere-gpu.jpg'); }
.MBBackground { background-image: url('/vendere-mainboard.jpg'); }
.greyHeaderBackground { background-image: url('/img_header.jpg'); }

/* Banner container fixes */
.devicesBanner { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.devicesBanner .btn { box-shadow: 0 10px 24px rgba(var(--shadow-color) / 0.35); }

/* Ensure sticky behavior also when Bootstrap's fixed-top is present */
.navbar.fixed-top, .navbar-modern { position: fixed !important; }

/* Body field visuals for light theme (if used) */
body:not(.theme-dark) .form-control { background: #f8f8f8 !important; border: 2px solid #ababab !important; font-size: 16px !important; color: #2f2f2f !important; }

/* Full-screen form shell */
.form-shell, .bg-white.rounded.mt-n5 { min-height: calc(100vh - var(--navbar-offset)); padding: 1.25rem; }

/* Modern CTA button: fuchsia gradient, centered */
#evaluateProductButton.btn,
#evaluateProductButton.btn-success,
#accediButton {
  display: block; /* center with auto margins */
  width: max-content; /* fallback: fits content */
  margin-left: auto;
  margin-right: auto;
  padding: 0.9rem 1.4rem;
  min-height: 60px;
  font-size: 1.125rem; /* ~18px */
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff !important;
  background-image: linear-gradient(135deg, #EB3F93 0%, #9B5CF6 100%) !important;
  border: 0 !important;
  border-radius: 14px;
  transition: box-shadow 140ms ease, transform 140ms ease;
  /* Drop + moderate glow ring */
  box-shadow: 0 8px 22px rgba(var(--shadow-color) / 0.45), 0 0 0 8px rgba(235, 63, 147, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
#evaluateProductButton:hover,
#accediButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(var(--shadow-color) / 0.55), 0 0 0 10px rgba(235, 63, 147, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
#evaluateProductButton:active,
#accediButton:active {
  transform: translateY(0);
}
#evaluateProductButton:focus,
#accediButton:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(235, 63, 147, 0.35) !important;
}

/* Mobile full-screen modals */
@media (max-width: 767.98px) {
  .modal-dialog.modal-fullscreen-mobile {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
  }
  .modal-dialog.modal-fullscreen-mobile .modal-content {
    height: 100vh !important;
    border-radius: 0 !important;
  }
  .modal-dialog.modal-fullscreen-mobile .modal-body {
    overflow-y: auto;
  }
}

/* Responsive images inside help modals */
.modal-dialog.modal-fullscreen-mobile .modal-body img {
  max-width: 100%;
  height: auto;
}
/* Glass cards for categories */
.glass-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 0 !important;
  color: var(--text) !important;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .glass-card { backdrop-filter: blur(12px) saturate(160%); }
}
.category-card {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(var(--shadow-color) / 0.35);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.category-card:hover { 
  transform: translateY(-2px);
  box-shadow:
    0 0 28px 8px rgba(255, 20, 120, 0.60),
    0 0 70px 22px rgba(255, 20, 120, 0.38),
    0 18px 40px rgba(var(--shadow-color) / 0.50) !important;
}
.category-card .card-img-top {
  width: 100%;
  height: 180px;
  object-fit: cover;
  padding: 0 !important;
}
@media (min-width: 992px) { /* lg */
  .category-card .card-img-top { height: 220px; }
}
@media (max-width: 575.98px) {
  .category-card { width: 100%; }
  .category-card .card-img-top { height: 160px; }
}

/* Footer modern liquid glass */
.footer-modern {
  position: relative;
  margin: 0 clamp(8px, 2vw, 16px);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-border);
}
.glass-footer { }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .footer-modern.glass-footer { backdrop-filter: blur(14px) saturate(160%); background: rgba(255, 255, 255, 0.08); }
}
.footer-modern .link, .footer-modern a { color: var(--text); }
.footer-modern hr { border-color: var(--panel-border); }

/* Grid helper for category decks: switch to CSS Grid */
.categories-deck {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
  justify-items: stretch;
}
@media (min-width: 768px) { /* md */
  .categories-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 992px) { /* lg */
  .categories-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1200px) { /* xl */
  .categories-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
}
.categories-deck .card { width: 100%; }

/* Hero starts at top under glass navbar */
.navbar-modern ~ .hero-background { margin-top: 0 !important; }
.hero-background { background-position: top center !important; background-repeat: no-repeat; }
.hero-background .devicesBanner { padding-top: calc(var(--navbar-offset) + 8px); }
.glass-footer { }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .footer-modern.glass-footer { backdrop-filter: blur(14px) saturate(160%); background: rgba(255, 255, 255, 0.08); }
}
.footer-modern .link, .footer-modern a { color: var(--text); }
.footer-modern hr { border-color: var(--panel-border); }
/* Bottoni arancioni uniformi */
.btn-orange {
  color: #1b1b1b !important;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 100%) !important;
  border: 0 !important;
  transition: box-shadow 160ms ease, transform 120ms ease;
}
.btn-orange:hover { 
  color: #111 !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px rgba(var(--shadow-color) / 0.45),
    0 0 18px 6px rgba(255, 20, 120, 0.40);
}
.btn-orange:focus { 
  outline: none;
  box-shadow:
    0 0 20px 6px rgba(255, 20, 120, 0.35);
}
.btn-orange:active { filter: brightness(0.98); }
/* Footer font size 70% */
.footer-modern { font-size: 0.7rem !important; line-height: 1.35; }
.footer-modern h5, .footer-modern h6, .footer-modern p, .footer-modern a, .footer-modern li, .footer-modern small { font-size: 0.7rem !important; }
/* Hero gap removal for homepage */
.hero-background .devicesBanner { padding-top: 0 !important; }
.glass-footer { }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .footer-modern.glass-footer { backdrop-filter: blur(14px) saturate(160%); background: rgba(255, 255, 255, 0.08); }
}
.footer-modern .link, .footer-modern a { color: var(--text); }
.footer-modern hr { border-color: var(--panel-border); }
/* Varianti bottoni dentro card: trasparenti con bordo arancione */
.category-card .btn-orange {
  background: transparent !important;
  color: var(--brand) !important;
  border: 2px solid var(--brand) !important;
  box-shadow: none !important;
}
.category-card .btn-orange:hover {
  filter: none;
  transform: none;
  box-shadow: 0 0 16px 6px rgba(245, 149, 111, 0.35) !important;
}
/* CTA valutazione: mantieni bordo solido e ring */
#evaluateProductButton.btn,
#evaluateProductButton.btn-success {
  display: block; /* center with auto margins */
  width: max-content; /* fallback: fits content */
  margin-left: auto;
  margin-right: auto;
  padding: 0.9rem 1.4rem;
  min-height: 60px;
  font-size: 1.125rem; /* ~18px */
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff !important;
  background-image: linear-gradient(135deg, #EB3F93 0%, #9B5CF6 100%) !important;
  border: 2px solid rgba(235, 63, 147, 0.45) !important;
  /* Softer base glow; keep hover strong */
  box-shadow:
    0 10px 24px rgba(var(--shadow-color) / 0.40),
    0 0 18px 6px rgba(255, 20, 120, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
#evaluateProductButton:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 34px 10px rgba(255, 20, 120, 0.65),
    0 0 90px 30px rgba(255, 20, 120, 0.42),
    0 22px 46px rgba(var(--shadow-color) / 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
#evaluateProductButton:focus { outline: none; box-shadow: 0 0 22px 6px rgba(255, 20, 120, 0.35) !important; }
/* Bottone scuro glossy per azioni equivalenti a VENDILO SUBITO */
.btn-dark-glossy {
  color: #fff !important;
  background: linear-gradient(180deg, #3b3b3b 0%, #2b2b2b 100%) !important;
  border: 0 !important;
  transition: box-shadow 160ms ease, transform 120ms ease;
}
.btn-dark-glossy:hover { 
  color: #fff !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px rgba(var(--shadow-color) / 0.45),
    0 0 18px 6px rgba(255, 20, 120, 0.40);
}
.btn-dark-glossy:focus { 
  outline: none;
  box-shadow:
    0 0 20px 6px rgba(255, 20, 120, 0.35);
}
.btn-dark-glossy:active { filter: brightness(0.98); }
/* Category pages: use the same gradient background used in admin dark */
body.theme-dark.category-theme {
  background: radial-gradient(1200px 800px at 15% 10%, rgba(34, 211, 238, .08), transparent),
              radial-gradient(1000px 700px at 85% 70%, rgba(139, 92, 246, .12), transparent),
              linear-gradient(180deg, #0b0f16 0%, #0f172a 100%) !important;
}



.glass-footer { }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .footer-modern.glass-footer { backdrop-filter: blur(14px) saturate(160%); background: rgba(255, 255, 255, 0.08); }
}
.footer-modern .link, .footer-modern a { color: var(--text); }
.footer-modern hr { border-color: var(--panel-border); }