/* =====================================================
   ELETROLOPES PERSONALIZAÇÃO — Dark Design System
   Fundo: #0d1527 → #111d40 (navy escuro)
   Acento: #f4c430 (ouro)
   ===================================================== */
:root {
    /* Marca */
    --navy:        #1a2a5e;
    --navy-light:  #2d4a9e;
    --navy-dark:   #111d40;
    --ouro:        #f4c430;
    --ouro-dark:   #d4a820;
    --ouro-light:  #fde97a;

    /* Fundos escuros */
    --bg-base:     #0d1527;
    --bg-sec:      #111d40;
    --bg-card:     rgba(22, 38, 80, 0.60);
    --bg-card-alt: rgba(13, 21, 39, 0.70);
    --bg-input:    rgba(255,255,255,.06);

    /* Bordas glass */
    --border-glass:     rgba(255,255,255,.10);
    --border-ouro:      rgba(244,196,48,.35);
    --border-hover:     rgba(244,196,48,.55);

    /* Texto sobre fundo escuro */
    --texto:       #dde4f5;
    --texto-sub:   rgba(255,255,255,.70);
    --texto-muted: rgba(255,255,255,.45);

    /* Sombras */
    --sombra:       0 4px 24px rgba(0,0,0,.40);
    --sombra-hover: 0 10px 40px rgba(0,0,0,.55);
    --sombra-ouro:  0 4px 20px rgba(244,196,48,.18);

    /* Compat */
    --cinza-claro: #162045;
    --cinza-medio: rgba(255,255,255,.10);

    --radius:    14px;
    --radius-sm:  8px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-base);
    background-image: radial-gradient(ellipse at 20% 0%, rgba(26,42,94,.55) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 100%, rgba(244,196,48,.04) 0%, transparent 55%);
    background-attachment: fixed;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--texto);
    min-height: 100vh;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 3px; }

/* ══════════════════════════════════════════
   BOOTSTRAP OVERRIDES — DARK THEME
   ══════════════════════════════════════════ */

/* Cards */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-glass) !important;
    backdrop-filter: blur(12px);
    color: var(--texto) !important;
    box-shadow: var(--sombra) !important;
}
.card-header {
    border-bottom: 1px solid var(--border-glass) !important;
    color: var(--texto) !important;
}
.card-header.bg-light, .card-header:not([style]) {
    background: rgba(26,42,94,.50) !important;
}
.card-body { color: var(--texto); }

/* Formulários */
.form-control, .form-select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--texto) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    background: rgba(255,255,255,.09) !important;
    border-color: var(--border-ouro) !important;
    box-shadow: 0 0 0 3px rgba(244,196,48,.15) !important;
    color: #fff !important;
}
.form-control::placeholder { color: var(--texto-muted) !important; }
.form-label { color: var(--texto-sub) !important; font-weight: 500; }
.input-group-text {
    background: rgba(26,42,94,.60) !important;
    border-color: var(--border-glass) !important;
    color: var(--texto-sub) !important;
}
.form-control option, .form-select option {
    background: #162045;
    color: var(--texto);
}

/* Alertas */
.alert { border-radius: var(--radius-sm) !important; }
.alert-danger  { background: rgba(220,53,69,.15) !important; border-color: rgba(220,53,69,.35) !important; color: #ff8a97 !important; }
.alert-success { background: rgba(25,135,84,.15) !important; border-color: rgba(25,135,84,.35) !important; color: #6fd99a !important; }
.alert-info    { background: rgba(13,202,240,.10) !important; border-color: rgba(13,202,240,.30) !important; color: #7deafa !important; }
.alert-warning { background: rgba(244,196,48,.12) !important; border-color: var(--border-ouro) !important; color: var(--ouro) !important; }

/* Badges */
.badge.bg-secondary  { background: rgba(255,255,255,.15) !important; }
.badge.bg-light      { background: rgba(255,255,255,.12) !important; color: var(--texto) !important; }
.badge.bg-warning    { background: var(--ouro) !important; color: var(--navy-dark) !important; }
.badge.bg-success    { background: rgba(25,135,84,.75) !important; }
.badge.bg-danger     { background: rgba(220,53,69,.75) !important; }

/* Buttons */
.btn-outline-secondary {
    border-color: var(--border-glass) !important;
    color: var(--texto-sub) !important;
}
.btn-outline-secondary:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}
.btn-outline-danger {
    border-color: rgba(220,53,69,.5) !important;
    color: #ff8a97 !important;
}
.btn-outline-danger:hover { background: rgba(220,53,69,.2) !important; }
.btn-warning {
    background: var(--ouro) !important;
    border-color: var(--ouro) !important;
    color: var(--navy-dark) !important;
    font-weight: 700 !important;
}
.btn-warning:hover { background: var(--ouro-dark) !important; }
.btn-secondary {
    background: rgba(255,255,255,.12) !important;
    border-color: var(--border-glass) !important;
    color: var(--texto-sub) !important;
}

/* List group */
.list-group-item {
    background: transparent !important;
    border-color: var(--border-glass) !important;
    color: var(--texto-sub) !important;
    transition: background .2s, color .2s;
}
.list-group-item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.list-group-item.active, .list-group-item[style*="background:var(--navy)"] {
    background: rgba(26,42,94,.80) !important;
    border-color: var(--border-ouro) !important;
    color: var(--ouro) !important;
}

/* Breadcrumb */
.breadcrumb-item a { color: rgba(255,255,255,.55) !important; text-decoration: none; transition: color .2s; }
.breadcrumb-item a:hover { color: var(--ouro) !important; }
.breadcrumb-item.active { color: rgba(255,255,255,.85) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.25) !important; }

/* Pagination */
.page-link {
    background: var(--bg-card) !important;
    border-color: var(--border-glass) !important;
    color: var(--texto-sub) !important;
}
.page-link:hover { background: rgba(26,42,94,.80) !important; color: var(--ouro) !important; }
.page-item.active .page-link {
    background: var(--navy) !important;
    border-color: var(--border-ouro) !important;
    color: var(--ouro) !important;
}

/* Dropdown */
.dropdown-menu {
    background: #162550 !important;
    border: 1px solid var(--border-glass) !important;
    backdrop-filter: blur(16px);
    box-shadow: var(--sombra) !important;
}
.dropdown-item { color: var(--texto-sub) !important; transition: all .15s; }
.dropdown-item:hover { background: rgba(244,196,48,.10) !important; color: var(--ouro) !important; }
.dropdown-divider { border-color: var(--border-glass) !important; }

/* Tabelas */
.table { color: var(--texto) !important; }
.table > :not(caption) > * > * {
    background: transparent !important;
    border-color: var(--border-glass) !important;
    color: var(--texto);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,.03) !important; }
.table-hover > tbody > tr:hover > * { background: rgba(244,196,48,.05) !important; }
.table thead { border-bottom: 2px solid var(--border-ouro) !important; }
.table th { color: var(--ouro) !important; font-weight: 600; }

/* Utilities de cores BS */
.bg-light    { background: rgba(255,255,255,.05) !important; }
.bg-white    { background: rgba(255,255,255,.05) !important; }
.bg-body     { background: var(--bg-base) !important; }
.text-dark   { color: var(--texto) !important; }
.text-muted  { color: var(--texto-muted) !important; }
.text-body   { color: var(--texto) !important; }
.border      { border-color: var(--border-glass) !important; }
.border-top, .border-bottom { border-color: var(--border-glass) !important; }
hr           { border-color: var(--border-glass) !important; opacity: 1; }

/* Modal */
.modal-content {
    background: #162045 !important;
    border: 1px solid var(--border-glass) !important;
    backdrop-filter: blur(16px);
    color: var(--texto);
}
.modal-header { border-bottom: 1px solid var(--border-glass) !important; }
.modal-footer { border-top:    1px solid var(--border-glass) !important; }
.btn-close-white { filter: invert(1) !important; }

/* ══════════════════════════════════════════
   BARRA DE TOPO
   ══════════════════════════════════════════ */
.barra-topo-eletro {
    background: var(--navy-dark);
    border-bottom: 1px solid var(--border-glass);
    color: var(--texto-muted);
    font-size: .78rem;
    padding: 6px 0;
}

/* ══════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════ */
.navbar-eletro, nav.sticky-top {
    background: rgba(13,21,39,.90) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--border-glass);
    box-shadow: 0 2px 30px rgba(0,0,0,.40) !important;
}
.navbar-eletro .nav-link, nav .nav-link {
    color: rgba(255,255,255,.80) !important;
    font-weight: 500;
    transition: color .2s;
    position: relative;
}
.navbar-eletro .nav-link:hover, nav .nav-link:hover { color: var(--ouro) !important; }
.navbar-brand img { transition: opacity .2s, transform .2s; }
.navbar-brand img:hover { opacity: .85; transform: scale(1.04); }

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hero-personalizacao {
    background: linear-gradient(135deg, #050d1e 0%, #0d1527 40%, #1a2a5e 100%);
    position: relative; overflow: hidden;
    min-height: 540px; display: flex; align-items: center;
}
.hero-personalizacao::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 65% 50%, rgba(244,196,48,.10) 0%, transparent 55%),
                radial-gradient(ellipse at 10% 80%, rgba(26,42,94,.60) 0%, transparent 50%);
}
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-particles span {
    position: absolute; border-radius: 50%;
    background: var(--ouro); opacity: .06;
    animation: float-particle 9s infinite ease-in-out;
}
@keyframes float-particle {
    0%,100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-32px) scale(1.12); }
}
.hero-badge {
    background: rgba(244,196,48,.12);
    border: 1px solid rgba(244,196,48,.35);
    color: var(--ouro); border-radius: 50px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 16px; font-size: .82rem; font-weight: 600;
}
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800; line-height: 1.1; color: #fff;
}
.hero-title .highlight {
    background: linear-gradient(90deg, var(--ouro), var(--ouro-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-product-card {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px; padding: 20px;
    text-align: center; color: #fff;
    transition: transform .4s ease, border-color .3s, box-shadow .3s;
}
.hero-product-card:hover {
    transform: translateY(-8px) rotate(-1deg);
    border-color: rgba(244,196,48,.35);
    box-shadow: 0 12px 36px rgba(0,0,0,.40);
}

/* ══════════════════════════════════════════
   BARRA DE VANTAGENS
   ══════════════════════════════════════════ */
.barra-vantagens {
    background: linear-gradient(90deg, rgba(244,196,48,.90), rgba(212,168,32,.95));
    border-top: 1px solid var(--ouro-light);
    border-bottom: 1px solid var(--ouro-dark);
}

/* ══════════════════════════════════════════
   SECÇÕES
   ══════════════════════════════════════════ */
.sec-escuro   { background: var(--bg-base); }
.sec-meio     { background: var(--bg-sec); }
.sec-glass    { background: rgba(26,42,94,.18); }
.sec-branca   { background: rgba(255,255,255,.03); border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); }

/* Títulos de secção */
h1, h2, h3, h4, h5, h6 { color: var(--texto); }
.sec-titulo { color: #fff !important; }
.sec-sub    { color: var(--texto-muted) !important; }

/* ══════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════ */
.btn-primary-eletro {
    background: linear-gradient(135deg, var(--ouro), var(--ouro-dark));
    color: var(--navy-dark); border: none; font-weight: 700;
    border-radius: 50px; padding: 12px 28px;
    transition: all .25s;
    box-shadow: 0 4px 18px rgba(244,196,48,.30);
}
.btn-primary-eletro:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(244,196,48,.50);
    color: var(--navy-dark);
}
.btn-outline-eletro {
    border: 2px solid rgba(255,255,255,.30); color: rgba(255,255,255,.85);
    border-radius: 50px; padding: 11px 26px; font-weight: 600;
    background: rgba(255,255,255,.04); transition: all .25s;
}
.btn-outline-eletro:hover { border-color: var(--ouro); color: var(--ouro); background: rgba(244,196,48,.07); }
.btn-navy {
    background: rgba(26,42,94,.80); color: var(--texto); border: 1px solid var(--border-glass);
    font-weight: 600; border-radius: var(--radius-sm);
    transition: all .2s;
}
.btn-navy:hover { background: rgba(45,74,158,.80); color: var(--ouro); border-color: var(--border-ouro); }
.btn-ouro { background: var(--ouro); color: var(--navy-dark); border: none; font-weight: 700; border-radius: var(--radius-sm); }
.btn-ouro:hover { background: var(--ouro-dark); color: var(--navy-dark); }

/* ══════════════════════════════════════════
   CARDS DE CATEGORIA
   ══════════════════════════════════════════ */
.cat-card-personalizacao {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    text-decoration: none; color: var(--texto); display: block;
}
.cat-card-personalizacao:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-hover);
    border-color: var(--border-ouro);
    color: var(--texto);
}
.cat-card-personalizacao .cat-icon-wrap {
    height: 90px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(17,29,64,.90), rgba(26,42,94,.80));
    font-size: 2.5rem; color: var(--ouro);
}
.cat-card-personalizacao .cat-nome {
    font-weight: 700; font-size: .95rem; padding: 10px;
    text-align: center; color: var(--texto-sub);
}

/* ══════════════════════════════════════════
   CARDS DE PRODUTO
   ══════════════════════════════════════════ */
.card-produto {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
    border-color: var(--border-ouro);
}
.card-produto .img-wrapper {
    height: 200px; overflow: hidden;
    background: rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.card-produto .img-wrapper img { width:100%; height:100%; object-fit:cover; }
.card-produto .img-wrapper .no-img { font-size: 4rem; color: rgba(255,255,255,.2); }
.card-produto .badge-personalizar {
    position: absolute; top: 10px; right: 10px;
    background: var(--ouro); color: var(--navy-dark);
    font-size: .7rem; font-weight: 700;
    padding: 3px 9px; border-radius: 50px;
}
.card-produto .badge-destaque {
    position: absolute; top: 10px; left: 10px;
    background: rgba(26,42,94,.90); color: var(--ouro);
    border: 1px solid var(--border-ouro);
    font-size: .7rem; font-weight: 700;
    padding: 3px 9px; border-radius: 50px;
}
/* card-produto.php inline overrides */
.card-produto-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-glass) !important;
    backdrop-filter: blur(10px);
    color: var(--texto) !important;
}
.card-produto-item:hover {
    border-color: var(--border-ouro) !important;
    box-shadow: var(--sombra-hover) !important;
}

/* ── Preços ── */
.preco-atual   { color: var(--ouro); font-weight: 800; font-size: 1.15rem; }
.preco-original { text-decoration: line-through; color: var(--texto-muted); font-size: .85rem; }
.preco-promo   { color: #ff6b7a; font-weight: 800; font-size: 1.15rem; }

/* ══════════════════════════════════════════
   SECÇÃO "COMO FUNCIONA"
   ══════════════════════════════════════════ */
.step-circle {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-dark), var(--navy));
    border: 2px solid var(--border-ouro);
    color: var(--ouro); font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; font-weight: 800;
    box-shadow: 0 4px 20px rgba(244,196,48,.20);
}
.step-connector {
    position: absolute; top: 32px; left: calc(50% + 42px);
    right: calc(-50% + 42px); height: 2px;
    background: linear-gradient(90deg, rgba(244,196,48,.35), rgba(244,196,48,.10));
    z-index: 0;
}

/* ══════════════════════════════════════════
   BANNER CTA
   ══════════════════════════════════════════ */
.banner-cta {
    background: linear-gradient(135deg, #050d1e 0%, #0d1527 40%, var(--navy) 100%);
    border-top: 1px solid var(--border-glass);
    position: relative; overflow: hidden;
}
.banner-cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(244,196,48,.08) 0%, transparent 65%);
}
.banner-cta::after {
    content: ''; position: absolute;
    right: -80px; top: -80px;
    width: 320px; height: 320px; border-radius: 50%;
    background: rgba(244,196,48,.05);
}

/* ══════════════════════════════════════════
   EDITOR DE PERSONALIZAÇÃO
   ══════════════════════════════════════════ */
.editor-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius);
    box-shadow: var(--sombra); overflow: hidden;
    backdrop-filter: blur(10px);
}
.editor-toolbar {
    background: rgba(13,21,39,.90); color: white;
    padding: 10px 16px; display: flex; gap: 8px; flex-wrap: wrap;
    align-items: center; border-bottom: 1px solid var(--border-glass);
}
.editor-toolbar .btn-tool {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.80); border-radius: var(--radius-sm); padding: 6px 12px;
    font-size: .82rem; cursor: pointer; transition: all .2s; display: flex;
    align-items: center; gap: 5px;
}
.editor-toolbar .btn-tool:hover { background: rgba(244,196,48,.18); border-color: var(--ouro); color: var(--ouro); }
.editor-toolbar .btn-tool.ativo { background: var(--ouro); border-color: var(--ouro); color: var(--navy-dark); font-weight: 700; }
.editor-toolbar .separator { width: 1px; height: 28px; background: rgba(255,255,255,.15); margin: 0 4px; }

.editor-canvas-area {
    background: repeating-conic-gradient(rgba(255,255,255,.03) 0% 25%, rgba(255,255,255,.015) 0% 50%) 0 0 / 24px 24px;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; position: relative; min-height: 420px; overflow: auto;
}
.mockup-container {
    position: relative !important;
    display: inline-block !important;
    line-height: 0;
    box-shadow: 0 12px 40px rgba(0,0,0,.50), 0 4px 16px rgba(0,0,0,.30);
    border-radius: 8px; overflow: visible !important;
}
.mockup-container svg,
.mockup-container img.mockup-img {
    display: block; user-select: none; pointer-events: none;
    border-radius: 6px; max-width: 100%;
}
.mockup-container .canvas-container {
    position: absolute !important; top: 0 !important; left: 0 !important; z-index: 10;
}
#editor-canvas-el { cursor: crosshair; }

.editor-sidebar {
    background: rgba(13,21,39,.80);
    border-left: 1px solid var(--border-glass);
    overflow-y: auto; max-height: calc(100vh - 200px);
}
.editor-section { border-bottom: 1px solid var(--border-glass); padding: 14px 16px; }
.editor-section-title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    color: var(--ouro); letter-spacing: .06em; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}

/* Paleta de cores */
.color-swatch {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: all .15s;
}
.color-swatch:hover, .color-swatch.ativo { border-color: var(--ouro); transform: scale(1.2); }

/* Seletor de fonte */
.font-option {
    padding: 6px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass); cursor: pointer;
    font-size: .85rem; transition: all .15s; text-align: center;
    background: rgba(255,255,255,.04); color: var(--texto-sub);
}
.font-option:hover, .font-option.ativo { border-color: var(--ouro); background: rgba(244,196,48,.08); color: var(--ouro); }

/* Área de upload */
.upload-area {
    border: 2px dashed rgba(244,196,48,.30); border-radius: var(--radius-sm);
    padding: 20px; text-align: center; cursor: pointer;
    transition: all .2s; background: rgba(255,255,255,.03); color: var(--texto-muted);
}
.upload-area:hover, .upload-area.drag-over {
    border-color: var(--ouro); background: rgba(244,196,48,.06); color: var(--texto);
}


/* ── Design thumb no carrinho ── */
.design-thumb {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: var(--radius-sm); border: 2px solid var(--border-glass);
}
.design-thumb-placeholder {
    width: 64px; height: 64px; background: rgba(255,255,255,.05);
    border-radius: var(--radius-sm); border: 1px solid var(--border-glass);
    display: flex; align-items: center; justify-content: center;
    color: var(--texto-muted); font-size: 1.4rem;
}

/* ══════════════════════════════════════════
   CARRINHO
   ══════════════════════════════════════════ */
.carrinho-item { border-bottom: 1px solid var(--border-glass); }
.carrinho-item:last-child { border-bottom: none; }
.total-pill {
    background: linear-gradient(135deg, var(--ouro), var(--ouro-dark));
    color: var(--navy-dark); font-weight: 800; font-size: 1.2rem;
    padding: 10px 24px; border-radius: 50px; display: inline-block;
    box-shadow: 0 4px 16px rgba(244,196,48,.30);
}

/* ══════════════════════════════════════════
   OPÇÕES DE PRODUTO
   ══════════════════════════════════════════ */
.opcao-btn {
    padding: 6px 14px; border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm); font-size: .85rem;
    font-weight: 500; cursor: pointer; transition: all .15s;
    background: rgba(255,255,255,.05); color: var(--texto-sub);
}
.opcao-btn:hover { border-color: var(--border-ouro); color: var(--ouro); }
.opcao-btn.ativo { border-color: var(--ouro); background: rgba(244,196,48,.12); color: var(--ouro); font-weight: 700; }

.cor-opcao {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer;
    transition: all .15s; outline: 2px solid transparent;
}
.cor-opcao:hover { outline: 2px solid rgba(255,255,255,.40); outline-offset: 2px; }
.cor-opcao.ativo { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* ══════════════════════════════════════════
   ADMIN — PAINEL
   ══════════════════════════════════════════ */
.admin-sidebar {
    min-height: 100vh;
    background: linear-gradient(180deg, #070d1c 0%, #0d1527 60%, #111d40 100%);
    border-right: 1px solid var(--border-glass);
    width: 240px; position: fixed; top: 0; left: 0;
    overflow-y: auto; z-index: 1000;
}
.admin-content {
    margin-left: 240px;
    min-height: 100vh;
    background: var(--bg-base);
    background-image: radial-gradient(ellipse at 10% 0%, rgba(26,42,94,.25) 0%, transparent 55%);
    color: var(--texto);
}

/* Sidebar nav */
.admin-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: 10px;
    text-decoration: none; font-size: .88rem; font-weight: 500;
    color: rgba(255,255,255,.55);
    transition: all .2s; margin-bottom: 2px;
    border: 1px solid transparent;
}
.admin-nav-link:hover { background: rgba(244,196,48,.08); color: rgba(255,255,255,.90); border-color: rgba(244,196,48,.15); }
.admin-nav-link.ativo { background: rgba(244,196,48,.13); color: var(--ouro); border-color: rgba(244,196,48,.30); font-weight: 700; }
.admin-nav-link i { font-size: 1rem; width: 18px; text-align: center; }

/* Stat cards */
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border-glass);
    border-radius: var(--radius); backdrop-filter: blur(12px);
    transition: all .25s; overflow: hidden; position: relative;
}
.stat-card:hover { border-color: var(--border-ouro); transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.stat-card .stat-icon {
    width: 54px; height: 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; flex-shrink: 0;
}
.stat-card .stat-val { font-size: 2rem; font-weight: 800; line-height: 1; color: #fff; }
.stat-card .stat-lbl { font-size: .76rem; color: var(--texto-muted); font-weight: 500; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }

/* Admin table */
.admin-table thead th {
    background: rgba(8,14,30,.90) !important;
    color: var(--ouro) !important;
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border-ouro) !important;
    padding: 12px 16px; white-space: nowrap;
}
.admin-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.06) !important; transition: background .15s; }
.admin-table tbody tr:hover { background: rgba(244,196,48,.04) !important; }
.admin-table tbody td { padding: 12px 16px; color: var(--texto-sub); border: none !important; vertical-align: middle; }
.admin-table tbody tr:last-child { border-bottom: none !important; }

/* Admin card */
.admin-card { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius); backdrop-filter: blur(12px); overflow: hidden; }
.admin-card-header { background: rgba(8,14,30,.70); border-bottom: 1px solid var(--border-glass); padding: 14px 20px; font-weight: 700; color: var(--texto); display: flex; align-items: center; gap: 8px; }
.admin-card-header i { color: var(--ouro); }

/* Estado badges */
.est-pendente     { background: rgba(255,193,7,.18);  color: #ffc107; border: 1px solid rgba(255,193,7,.35); }
.est-pago         { background: rgba(13,202,240,.15); color: #0dcaf0; border: 1px solid rgba(13,202,240,.30); }
.est-em_preparacao{ background: rgba(13,110,253,.15); color: #6ea8fe; border: 1px solid rgba(13,110,253,.30); }
.est-enviado      { background: rgba(25,135,84,.18);  color: #6fd99a; border: 1px solid rgba(25,135,84,.35); }
.est-entregue     { background: rgba(255,255,255,.10);color: var(--texto-sub); border: 1px solid var(--border-glass); }
.est-cancelado    { background: rgba(220,53,69,.15);  color: #ff8a97; border: 1px solid rgba(220,53,69,.30); }
.est-badge { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; display: inline-block; }

/* Filtros */
.estado-filtro { padding: 5px 14px; border-radius: 50px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; border: 1px solid var(--border-glass); color: var(--texto-muted); background: rgba(255,255,255,.04); display: inline-block; }
.estado-filtro:hover { border-color: var(--border-ouro); color: var(--ouro); }
.estado-filtro.ativo { background: rgba(244,196,48,.14); border-color: var(--border-ouro); color: var(--ouro); }

/* Coords & builder */
#coords-display { font-family: monospace; font-size: .8rem; background: rgba(255,255,255,.06); border: 1px solid var(--border-glass); color: var(--ouro); padding: 5px 10px; border-radius: 6px; }
.opcao-grupo-item { background: rgba(22,32,69,.60) !important; border: 1px solid var(--border-glass) !important; border-radius: 10px !important; }

/* JSON pre */
.json-pre { max-height:400px; overflow:auto; font-size:.75rem; background:rgba(5,10,22,.90); color:#a8d8a8; padding:14px; border-radius:8px; border:1px solid var(--border-glass); font-family:monospace; }

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.footer-eletro { background: #070d1c; border-top: 1px solid var(--border-glass); }
footer { background: #070d1c !important; border-top: 1px solid var(--border-glass); }
.social-link, .social-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.06); border: 1px solid var(--border-glass);
    display: flex; align-items: center; justify-content: center;
    color: var(--texto-sub); text-decoration: none; font-size: 1rem;
    transition: all .2s;
}
.social-link:hover, .social-icon:hover {
    background: var(--ouro); border-color: var(--ouro); color: var(--navy-dark);
}

/* ══════════════════════════════════════════
   UTILITÁRIOS PRÓPRIOS
   ══════════════════════════════════════════ */
.badge-navy { background: rgba(26,42,94,.80) !important; color: var(--ouro) !important; border: 1px solid var(--border-ouro); }
.badge-ouro { background: var(--ouro) !important; color: var(--navy-dark) !important; }
.text-navy  { color: var(--ouro) !important; }
.text-ouro  { color: var(--ouro) !important; }
.bg-navy    { background: rgba(26,42,94,.70) !important; }
.bg-ouro    { background: var(--ouro) !important; }
.border-ouro { border-color: var(--border-ouro) !important; }

/* Glasspanel genérico */
.glass-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    box-shadow: var(--sombra);
}

/* ── Toast ── */
.toast-container { z-index: 9999; }
@keyframes bounce-in {
    0% { transform: scale(.5); opacity: 0; }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.badge-bounce { animation: bounce-in .3s ease; }

/* ══════════════════════════════════════════
   RESPONSIVO — MOBILE FIRST
   ══════════════════════════════════════════ */

/* ── Utilitários touch ── */
@media (max-width: 991.98px) {
    /* Navbar */
    .navbar-eletro .navbar-collapse {
        background: rgba(10,16,36,.97);
        border: 1px solid var(--border-glass);
        border-radius: 14px;
        margin-top: 8px;
        padding: 12px;
        backdrop-filter: blur(20px);
    }
    .navbar-eletro .nav-link { padding: 10px 12px !important; border-radius: 8px; }
    .navbar-eletro .nav-link:hover { background: rgba(244,196,48,.08); }
    .navbar-eletro .dropdown-menu {
        position: static !important;
        background: rgba(255,255,255,.04) !important;
        border: 1px solid var(--border-glass) !important;
        border-radius: 10px !important;
        margin: 4px 0 4px 12px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }
    .navbar-eletro .dropdown-item { border-radius: 7px; padding: 9px 12px !important; }
    .navbar-eletro .btn { margin-top: 4px; width: 100%; text-align: center; border-radius: 10px !important; }
    .navbar-eletro .ms-1 { margin-left: 0 !important; }
}

@media (max-width: 767.98px) {
    /* Barra de topo: esconder elementos secundários */
    .barra-topo-eletro { font-size: .7rem; padding: 5px 0; }
    .barra-topo-eletro .container { flex-direction: column; gap: 2px !important; align-items: flex-start; }

    /* Navbar toggler */
    .navbar-toggler { padding: 6px 10px !important; }

    /* Hero sections */
    .hero-personalizacao { min-height: auto; padding: 40px 0; }
    .hero-title, .hero-title h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
    .hero-institucional { padding: 52px 0 40px; }
    .hero-stats { gap: 20px; }
    .hero-stats .stat-val { font-size: 1.3rem; }
    .hero-service-badge { padding: 10px 14px; gap: 10px; }
    .hero-service-badge .hsbico { width: 36px; height: 36px; font-size: 1.1rem; }

    /* Barra de vantagens */
    .barra-vantagens .d-flex { flex-wrap: wrap; justify-content: center !important; gap: 8px; }
    .barra-vantagens .d-flex > * { font-size: .78rem; }
    .barra-vantagens .vline { display: none !important; }

    /* Cards de serviço */
    .servico-card { padding: 24px 20px; }
    .servico-icon { width: 56px; height: 56px; font-size: 1.6rem; margin-bottom: 16px; }

    /* Cards de produto — 2 colunas em mobile */
    .card-produto-item [style*="height:190px"] { height: 150px !important; }
    .card-produto .img-wrapper { height: 150px; }

    /* Editor de personalização */
    .editor-canvas-area { padding: 10px; min-height: 280px; }
    .editor-toolbar { gap: 4px; padding: 8px; flex-wrap: wrap; }
    .editor-toolbar .btn-tool span { display: none; }
    .editor-toolbar .btn-tool { padding: 6px 8px; font-size: .78rem; }
    .editor-sidebar { max-height: none; border-left: none; border-top: 1px solid var(--border-glass); }

    /* Carrinho */
    .carrinho-item .row { gap: 0; }
    .design-thumb, .design-thumb-placeholder { width: 52px; height: 52px; }

    /* Checkout — métodos de pagamento */
    .metodo-card { padding: 12px !important; }

    /* Produto detalhe */
    #prod-img-wrap img { max-height: 280px; }

    /* Footer */
    footer .row > [class*="col-md"] { text-align: center; }
    footer .d-flex.gap-2 { justify-content: center; }
    footer .col-md-4:first-child p { text-align: center; }

    /* Página de produtos — sidebar colapsável no mobile */
    .produtos-sidebar-wrap { margin-bottom: 16px; }

    /* Botões CTA — full width em mobile */
    .hero-cta-group { flex-direction: column; align-items: stretch !important; }
    .hero-cta-group .btn { width: 100%; text-align: center; }

    /* Step connector (linha entre passos) */
    .step-connector { display: none; }

    /* Glass panel dentro de secções */
    .glass-panel { padding: 20px !important; }

    /* Tabelas — scroll horizontal */
    .table-responsive-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Confirmação / estado encomenda */
    .confirmacao-card .d-flex { flex-direction: column; gap: 8px; }

    /* FAQ, processo, etc. */
    section { padding-top: 40px !important; padding-bottom: 40px !important; }

    /* Tipografia */
    h1 { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; }
    h2 { font-size: clamp(1.3rem, 4vw, 1.8rem) !important; }
    .sec-titulo { font-size: clamp(1.3rem, 4vw, 1.8rem) !important; }
}

/* ── Tablet (md) ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-institucional { padding: 70px 0 56px; }
    .hero-title { font-size: clamp(2rem, 5vw, 3rem) !important; }
    .servico-card { padding: 30px 24px; }
    .editor-canvas-area { min-height: 340px; }
    .editor-toolbar .btn-tool span { font-size: .78rem; }
}

/* ── Admin sidebar mobile ── */
@media (max-width: 991.98px) {
    .admin-sidebar {
        width: 100%;
        min-height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--border-glass);
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        gap: 4px;
    }
    .admin-sidebar .admin-nav-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 7px 12px;
        font-size: .80rem;
    }
    .admin-sidebar .admin-nav-link span { display: inline; }
    .admin-content { margin-left: 0; }

    /* Admin tabelas */
    .admin-table { font-size: .80rem; }
    .admin-table thead th,
    .admin-table tbody td { padding: 8px 10px; }
}

@media (max-width: 767.98px) {
    .admin-sidebar .admin-nav-link i { margin-right: 0; }
    .admin-table { font-size: .75rem; }
    .stat-card .stat-val { font-size: 1.5rem; }
}