/* ============================================================
   SIGNATURE WEAPON — global.css v6
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; background: #1a2830; color: #fff; overflow-x: hidden; max-width: 100vw; line-height: 1.5; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }

:root {
  --c-orange:#ff5722; --c-orange-dk:#e63d08;
  --c-o9:rgba(230,61,8,.09); --c-o15:rgba(255,87,34,.15);
  --c-o20:rgba(255,87,34,.20); --c-o30:rgba(255,87,34,.30);
  --c-o40:rgba(255,87,34,.40); --c-o60:rgba(255,87,34,.60);
  --c-slate1:#3a4a55; --c-slate2:#36484f; --c-slate3:#252f36; --c-slate4:#1e2d36;
  --c-g1:#1a2830; --c-g2:#161f26; --c-g3:#0d1518;
  --c-w10:rgba(255,255,255,.10); --c-w40:rgba(255,255,255,.40); --c-b50:rgba(0,0,0,.50);
  --c-lgray:#d1d5dc; --c-dgray:#99a1af; --c-sgray:#6a7282; --c-dimgray:#4a5565;
  --c-green:#7bf1a8; --c-white:#fff;
  --f-sans:'Inter',sans-serif; --f-display:'Raleway',sans-serif; --f-title:'Anton SC',sans-serif;
  --pill:9999px; --r-md:12px; --r-sm:6px;
  --shadow:0 10px 15px -3px rgba(0,0,0,.15),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-card:0 6px 28px rgba(0,0,0,.55);
  --grad-o:linear-gradient(90deg,transparent,rgba(255,87,34,.3) 50%,transparent);
  --bo:.7px solid rgba(255,87,34,.60); --bos:.7px solid rgba(255,87,34,.30);
  --nav-h: 56px;
  --foot-h: 80px;
}

.page-wrapper { display:flex; flex-direction:column; min-height:100vh; width:100%; max-width:100%; overflow-x:hidden; }
.page-main    { flex:1; width:100%; max-width:100%; overflow-x:hidden; }

/* ══════════════════════════════════
   HEADER  bgrobot
══════════════════════════════════ */
.site-header {
  width:100%; max-width:100%; background:var(--c-slate1);
  box-shadow:var(--shadow); position:sticky; top:0; z-index:200;
   overflow: visible !important;
}
.header-inner {
  max-width:1200px; margin:0 auto; padding:0 1.25rem;
  height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%;
}
.header-left  { display:flex; align-items:center; gap:.75rem; flex:1; min-width:0; overflow:hidden; }
.header-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

.btn-menu { background:transparent; border:none; padding:.35rem; flex-shrink:0; display:flex; align-items:center; opacity:.85; transition:opacity .2s; }
.btn-menu:hover { opacity:1; }
.btn-menu img { width:20px; height:20px; filter:brightness(0) invert(1); }

.site-logo { height:34px; border-radius:4px; flex-shrink:0; }

.nav-search {
  flex:1; max-width:340px; min-width:0; height:34px;
  display:flex; align-items:center;
  border:1.5px solid var(--c-orange); border-radius:var(--pill);
  overflow:hidden; transition:border-color .2s; background:rgba(0,0,0,.2);
}
.nav-search:focus-within { border-color:var(--c-orange-dk); }
.nav-search input { flex:1; border:none; background:transparent; outline:none; color:var(--c-dgray); font-family:var(--f-sans); font-size:.8125rem; padding:0 .75rem; min-width:0; width:0; }
.nav-search input::placeholder { color:var(--c-sgray); }
.nav-search-btn { border:none; background:transparent; padding:0 .625rem; display:flex; align-items:center; flex-shrink:0; }
.nav-search-btn img { width:15px; height:15px; filter:brightness(0) invert(.55); }

.nav-icon-btn { background:transparent; border:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; flex-shrink:0; }
.nav-icon-btn:hover { background:var(--c-o15); }
.nav-icon-btn img { width:17px; height:17px; object-fit:contain; }

.btn-subscribe { border:1.5px solid var(--c-orange); background:transparent; color:var(--c-white); font-family:var(--f-display); font-size:.75rem; font-weight:600; border-radius:var(--pill); padding:.25rem .75rem; white-space:nowrap; transition:background .2s, color .2s; flex-shrink:0; }
.btn-subscribe:hover { background:var(--c-orange); }

/* Barra búsqueda móvil (fila 2) */
.header-search-row {
  display:none; align-items:center;
  border:1.5px solid var(--c-orange); border-radius:var(--pill);
  overflow:hidden; height:32px; background:rgba(0,0,0,.2);
  width:calc(100% - 1.5rem); max-width:370px;
  margin:0 auto .45rem;
}
.header-search-row input { flex:1; border:none; background:transparent; outline:none; color:var(--c-dgray); font-family:var(--f-sans); font-size:.8125rem; padding:0 .75rem; min-width:0; width:0; }
.header-search-row input::placeholder { color:var(--c-sgray); }
.header-search-row button { border:none; background:transparent; padding:0 .625rem; display:flex; align-items:center; flex-shrink:0; }
.header-search-row button img { width:15px; height:15px; filter:brightness(0) invert(.55); }

@media (max-width:680px) {
  :root { --nav-h: 78px; }
  .site-header { height:auto; overflow:visible; }
  .header-inner { height:44px; padding:.35rem .75rem; gap:.3rem; }
  .nav-search { display:none; }
  .header-search-row { display:flex; }
  .header-search-row input { font-size:.75rem; padding:0 .625rem; }
  .site-logo { height:26px; }
  .btn-menu img { width:17px; height:17px; }
  .nav-icon-btn { width:26px; height:26px; }
  .nav-icon-btn img { width:14px; height:14px; }
  .btn-subscribe { font-size:.6rem; padding:.175rem .45rem; }
}
@media (max-width:380px) {
  .btn-subscribe { display:none; }
  .header-right { gap:.2rem; }
  .header-inner { gap:.25rem; }
}
@media (max-width:320px) {
  .header-inner { padding:.35rem .5rem; gap:.2rem; }
  .nav-icon-btn { width:24px; height:24px; }
  .nav-icon-btn img { width:13px; height:13px; }
}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.site-footer {
  width:100%; max-width:100%; background:var(--c-slate3);
  border-top:1.5px solid var(--c-o30);
  padding:.625rem 1.5rem .5rem;
  overflow:hidden;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:flex; flex-direction:column; gap:.375rem;
}
.footer-top {
  display:flex; align-items:center;
  justify-content:space-between; gap:.75rem;
  flex-wrap:wrap;
}
.footer-left-group {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; min-width:0;
}
.footer-socials {
  display:flex; align-items:center; gap:.4rem; flex-wrap:nowrap;
}
.social-item { display:flex; flex-direction:column; align-items:center; gap:.2rem; cursor:pointer; transition:transform .2s; flex-shrink:0; }
.social-item:hover { transform:translateY(-2px); }
.social-icon-wrap { width:26px; height:26px; border-radius:50%; border:var(--bos); background:var(--c-w10); display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; }
.social-item:hover .social-icon-wrap { border-color:var(--c-orange); background:var(--c-o15); }
.social-icon-wrap img { width:12px; height:12px; object-fit:contain; }
.social-label { font-size:.5rem; letter-spacing:.4px; text-transform:uppercase; font-weight:500; color:var(--c-sgray); }

.footer-support {
  display:flex; align-items:center; gap:.625rem; cursor:pointer;
  padding:.375rem .75rem; border-radius:var(--r-sm);
  border:var(--bos); background:var(--c-w10);
  transition:background .2s, border-color .2s; flex-shrink:0;
}
.footer-support:hover { background:var(--c-o15); border-color:var(--c-o40); }
.footer-support-text { display:flex; align-items:center; gap:.375rem; }
.footer-triangle {
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:10px solid var(--c-orange);
  flex-shrink:0;
}
.footer-title { font-size:.75rem; font-weight:700; color:var(--c-white); white-space:nowrap; }
.footer-isotipo-wrap {
  width:34px; height:34px; border-radius:50%;
  background:var(--c-slate3); border:1.5px solid var(--c-o30);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.footer-isotipo-wrap img { width:20px; height:20px; object-fit:contain; }

.footer-divider { height:1px; background:var(--grad-o); margin:.375rem 0 0; }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.375rem; padding-top:.25rem;
}
.footer-links { display:flex; gap:.75rem; flex-wrap:wrap; }
.footer-links a { color:var(--c-dgray); font-size:.6875rem; transition:color .2s; }
.footer-links a:hover { color:var(--c-orange); }
.footer-copy { font-size:.5625rem; color:var(--c-dimgray); letter-spacing:.7px; text-transform:uppercase; }

@media (max-width:768px) {
  .site-footer { padding:.5rem 1rem .375rem; }
  .footer-top { gap:.5rem; }
  .footer-left-group { gap:.5rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:.25rem; }
}
@media (max-width:480px) {
  .footer-top { flex-direction:column; align-items:flex-start; }
  .footer-support { width:100%; }
}

/* ══════════════════════════════════
   ICONOS SOCIALES MÓVIL — fila única, 5 íconos
   Diámetro fluido: clamp(42px, 16vw, 72px)
   Resultados: 51px (320px) → 69px (430px) ≈ 2×–2.6×
   Sin overflow horizontal en ninguna pantalla soportada
══════════════════════════════════ */
@media (max-width:680px) {
  .footer-left-group { width:100%; }

  .footer-socials {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    gap: 0;
  }

  .social-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    cursor: pointer;
    transition: transform .2s;
  }
  .social-item:hover { transform: scale(1.06); }


  .social-label {
    display: block;
    font-size: clamp(.45rem, 1.4vw, .6rem);
    letter-spacing: .3px;
    text-align: center;
  }
  
  .form-input-record{
  	width: 250px;
  	font-size:.8em;
  	margin-right:10px;
  }
  
  .form-input-fieldset legend{
  	font-size:.7em;
  }
  
  .form-input{
  	font-size:.8em;
  }
  
  
}




/* ══════════════════════════════════
   MENU OVERLAY
══════════════════════════════════ */
.menu-overlay { position:fixed; inset:0; z-index:500; background:rgba(8,13,17,.97); display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s; }
.menu-overlay.open { opacity:1; pointer-events:all; }
.menu-header-bar { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--c-o30); }
.menu-logo { height:42px; }
.btn-close-menu { background:transparent; border:1px solid var(--c-o30); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--c-white); font-size:1.2rem; line-height:1; transition:background .2s; }
.btn-close-menu:hover { background:var(--c-o20); }
.menu-nav { display:flex; flex-direction:column; padding:1.25rem 1.5rem; gap:.15rem; flex:1; overflow-y:auto; }
.menu-nav-item { display:flex; align-items:center; gap:1rem; padding:.875rem .75rem; border-bottom:1px solid var(--c-o15); border-radius:var(--r-sm); color:var(--c-white); transition:background .2s; }
.menu-nav-item:hover { background:var(--c-o15); }
.menu-nav-item.active { background:var(--c-o15); }
.menu-nav-item.active .menu-nav-label { color:var(--c-orange); }
.menu-nav-ico  { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.menu-nav-label{ font-family:var(--f-display); font-size:1.1rem; font-weight:600; flex:1; }
.menu-nav-arrow{ color:var(--c-orange); font-size:.9rem; }
.menu-footer   { display:flex; padding:1.25rem 1.5rem; border-top:1px solid var(--c-o15); }
.btn-sub-menu  { background:var(--c-orange); border:none; color:var(--c-white); font-family:var(--f-display); font-weight:700; font-size:1rem; padding:.75rem 2rem; border-radius:var(--pill); transition:background .2s; }
.btn-sub-menu:hover { background:var(--c-orange-dk); }

/* ══════════════════════════════════
   ASISTENTE VIRTUAL
══════════════════════════════════ */
.assistant-bubble { position:fixed; bottom:1.5rem; right:1.5rem; z-index:300; display:flex; align-items:center; gap:.625rem; background:var(--c-slate1); border:1px solid var(--c-o40); border-radius:var(--pill); padding:.5rem 1.125rem .5rem .5rem; box-shadow:0 8px 32px rgba(0,0,0,.55); transition:transform .2s, box-shadow .2s; }
.assistant-bubble:hover { transform:scale(1.04); box-shadow:0 12px 40px rgba(0,0,0,.65); }
.ab-img { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--c-o40); flex-shrink:0; }
.ab-label { font-size:.8125rem; font-weight:700; color:var(--c-orange); white-space:nowrap; }

.assistant-overlay { position:fixed; inset:0; z-index:400; background:rgba(8,13,17,.82); display:flex; align-items:flex-end; justify-content:flex-end; padding:5rem 1.25rem 1.25rem; opacity:0; pointer-events:none; transition:opacity .25s; }
.assistant-overlay.open { opacity:1; pointer-events:all; }
.assistant-panel { width:100%; max-width:260px; background:var(--c-slate3); border:1px solid var(--c-o30); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 16px 48px rgba(0,0,0,.7); transform:translateY(16px); transition:transform .3s; }
.assistant-overlay.open .assistant-panel { transform:translateY(0); }
.ap-header { display:flex; align-items:center; justify-content:space-between; padding:.625rem 1rem; background:var(--c-slate1); border-bottom:1px solid var(--c-o30); }
.ap-title { font-weight:700; font-size:.8125rem; }
.btn-close-as { background:transparent; border:none; font-size:1rem; line-height:1; color:var(--c-sgray); transition:color .2s; }
.btn-close-as:hover { color:var(--c-white); }
.ap-avatar-section { position:relative; display:flex; flex-direction:column; align-items:center; background:var(--c-slate4); }
.ap-avatar-ring { width:100%; height:320px; border-radius:0; background:var(--c-g3); display:flex; align-items:stretch; justify-content:center; overflow:hidden; flex-shrink:0; }
.ap-avatar-ring img { width:100%; height:100%; object-fit:contain; object-position:center center; display:block; background:var(--c-g3); }
.ap-greet { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.0) 100%); font-family:var(--f-display); font-size:.9375rem; font-weight:700; color:#fff; text-align:center; padding:2rem 1rem .875rem; }
.ap-actions { padding:.875rem 1rem; }

@media (max-width:480px) {
  .assistant-overlay { padding:3.5rem .75rem .75rem; }
  .assistant-panel { max-width:240px; }
  .ap-avatar-ring { height:280px; }
}

/* ══════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════ */
.eyebrow  { font-size:.625rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:500; color:var(--c-orange); }
.sec-title{ font-family:var(--f-display); font-size:clamp(1.375rem,2.5vw,1.875rem); font-weight:800; color:var(--c-white); margin:.25rem 0 0; }
.sec-sub  { font-size:.875rem; color:var(--c-sgray); margin:.25rem 0 0; }
.sec-num  { font-family:var(--f-title); font-size:3.5rem; color:var(--c-orange); opacity:.1; line-height:1; user-select:none; }
.sec-div  { height:1px; background:var(--grad-o); margin:1.75rem 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.btn-ver  { background:transparent; border:var(--bos); color:var(--c-orange); font-family:var(--f-display); font-size:.8125rem; font-weight:600; padding:.45rem 1.125rem; border-radius:var(--pill); white-space:nowrap; transition:background .2s; }
.btn-ver:hover { background:var(--c-o15); }

/* ══════════════════════════════════
   PRODUCT CARD
══════════════════════════════════ */
.product-card { background:var(--c-slate4); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s; cursor:pointer; border:1px solid transparent; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--c-o20); }
.pc-img { position:relative; aspect-ratio:1; overflow:hidden; background:var(--c-g3); }
.pc-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.product-card:hover .pc-img img { transform:scale(1.05); }
.badge { position:absolute; top:.5rem; left:.5rem; color:var(--c-white); font-size:.6rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:.2rem .5rem; border-radius:4px; line-height:1.4; background:var(--c-orange); }
.badge.reco  { background:#7bf1a8; color:#000; }
.badge.lim   { background:#a855f7; }
.badge.colec { background:#3b82f6; }
.badge.agot  { background:#ef4444; }
.badge.box   { background:#f59e0b; color:#000; }
.genre { position:absolute; bottom:.5rem; left:.5rem; background:rgba(0,0,0,.7); color:var(--c-white); font-size:.6rem; font-weight:700; padding:.2rem .5rem; border-radius:4px; }
.heart-btn { position:absolute; top:.5rem; right:.5rem; background:rgba(0,0,0,.45); border:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
.heart-btn:hover { background:var(--c-o40); transform:scale(1.15); }
.heart-btn img { width:16px; height:16px; object-fit:contain; }
.pc-info   { padding:.875rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.pc-artist { font-family:var(--f-display); font-size:.875rem; font-weight:700; color:var(--c-white); }
.pc-album  { font-size:.75rem; color:var(--c-dgray); }
.pc-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.625rem; }
.pc-price  { font-family:var(--f-display); font-size:1rem; font-weight:800; color:var(--c-orange); }
.pc-actions{ display:flex; align-items:center; gap:.35rem; }
.btn-cart  { background:transparent; border:none; padding:0; transition:transform .2s; }
.btn-cart:hover { transform:scale(1.12); }
.btn-cart img { width:28px; height:28px; object-fit:contain; display:block; }
.dot-avail { width:6px; height:6px; border-radius:50%; background:var(--c-green); flex-shrink:0; }
.dot-not-avail { width:6px; height:6px; border-radius:50%; background:red; flex-shrink:0; }
.btn-play  { width:28px; height:28px; border-radius:50%; border:var(--bo); background:transparent; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.btn-play:hover { background:var(--c-o20); }
.btn-play img { width:12px; height:12px; }

/* ══════════════════════════════════
   PAGE BG ROBOT
══════════════════════════════════ */
.page-bg-robot {
  position:fixed !important;
  inset:0; 
  z-index:-1;
  background-image:url('../assets/images/bgrobot.png');
  background-position:center top;
  opacity:.18; 
  pointer-events:none;
  background-repeat: no-repeat;
  background-size: cover !important;
  height: 100lvh;
}

@media (max-width:768px) {
  .page-bg-robot { 
	  background-position:center top; 
	  opacity:.10; 
  }
}

/* ══════════════════════════════════
   BTN GOTO STORE — círculo naranja con flecha → tienda
══════════════════════════════════ */
.btn-goto-store {
  width:28px; height:28px; border-radius:50%;
  background:var(--c-orange); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, transform .2s;
  flex-shrink:0;
}
.btn-goto-store:hover { background:var(--c-orange-dk); transform:scale(1.1); }
.btn-goto-store img { width:12px; height:12px; filter:brightness(0) invert(1); }

.form-input {
  flex:1; max-width:360px; min-width:0; height:40px;
  display:flex; align-items:center;
  border:2px solid var(--c-orange); border-radius:var(--pill);
  overflow:hidden; transition:border-color .2s; background:rgba(0,0,0,.2);
}
.form-input:focus-within { border-color:var(--c-orange-dk); }
.form-input input { flex:1; border:none; background:transparent; outline:none; color:var(--c-dgray); font-family:var(--f-sans); font-size:.875rem; padding:0 .875rem; min-width:0; }
.form-input input::placeholder { color:var(--c-sgray); }

.form-input-record {
  flex:1; max-width:360px; min-width:0; height:30px;
  display:flex; align-items:center;
  border:1px solid var(--c-orange); border-radius:var(--pill);
  overflow:hidden; transition:border-color .2s; background:rgba(0,0,0,.2);
  padding:.25rem;margin-bottom:.55rem;
}

.form-input-record:focus-within { border-color:var(--c-orange-dk); }
.form-input-record input { font-size:.7em; flex:1; border:none; background:transparent; outline:none; color:var(--c-dgray); font-family:var(--f-sans); padding:.315rem 1rem; white-space:nowrap; min-width:0; }
.form-input-record input::placeholder { color:var(--c-sgray); }


.form-input-record select { 
	font-size:.7em; 
	flex:1; 
	border:none; 
	background:transparent; 
	outline:none; 
	color:var(--c-dgray); 
	font-family:var(--f-sans); 
	padding:.375rem 1.125rem; 
	white-space:nowrap; 
	min-width:0; 
	margin-bottom:0px !important;
	}
.form-input-record select::placeholder { color:var(--c-sgray); }

.form-input-record select::before {
  border-bottom: var(--size) solid var(--dropdown-icon-color)
}

.form-input-record-textarea {
	flex:1; max-width:660px; min-width:0; height:40px;
  display:flex; align-items:center;
  border:2px solid var(--c-orange); border-radius:2px;
  overflow:hidden; transition:border-color .2s; background:rgba(0,0,0,.2);
  padding:.25rem;margin-bottom:.55rem;height:200px;
}

.form-input-record-textarea textarea {
  min-height: 190px;font-size:.7em; flex:1; border:none; background:transparent; outline:none; color:var(--c-dgray); font-family:var(--f-sans);  min-width:0; }

textarea::placeholder { color:var(--c-sgray);overflow: visible; }

textarea::-webkit-input-placeholder {
  position: absolute;
}


.btn-login { border:2px solid var(--c-orange); background:transparent; color:var(--c-white); font-family:var(--f-display); font-size:.875rem; font-weight:600; border-radius:var(--pill); padding:.375rem 1.125rem; white-space:nowrap; transition:background .2s, color .2s; }
.btn-login:hover { background:var(--c-orange); }

.btn-login-cart { border:2px solid var(--c-orange); background:transparent; color:var(--c-white); font-family:var(--f-display); font-size:.875rem; font-weight:600; border-radius:var(--pill); padding:.375rem 1.125rem; white-space:nowrap; transition:background .2s, color .2s; }
.btn-login-cart:hover { background:var(--c-orange); }

.btn-search {border:var(--bos); background:transparent; color:var(--c-dgray); font-family:var(--f-display); 
		font-size:.875rem; font-weight:600; 
		border-radius:var(--pill); 
		font-size:.75rem; 
		letter-spacing:1.5px; 
		padding:.375rem 1.125rem;
		text-transform:uppercase;
		white-space:nowrap; 
		transition:background .2s, color .2s; 
	}
.btn-search:hover { background:var(--c-orange); color:var(--c-white);}

.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
  background: transparent;
  color: white;
  padding: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1e2d36;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #e63d08
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #e63d08;
}

/* Responsive container */
.table-container-table {
  overflow-x: auto;
  margin: 0 0;
  overflow-y: auto;
  max-height: 600px; 
}

/* Responsive container */
.table-container {
  overflow-x: auto;
  margin: 0 0;
}

.styled-table thead th {
  position: sticky;
  top: 0; /* Sticks header to the top of the container */
  z-index: 1; /* Ensures header stays above the body content */
  background-color: #e63d08;
}

/* Base table styles */
.styled-table {
  border-collapse: collapse; /* Merges borders into a single line */
  margin: 0 auto;
  font-size: 0.8em;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius: 5px 5px 0 0;
  background-color: #4a5565;

}

/* Header styles */
.styled-table thead tr {
  background-color: #e63d08;
  color: #ffffff;
  text-align: left;
  
}

/* Cell padding and alignment */
.styled-table th,
.styled-table td {
  padding: 12px 15px;
}

/* Zebra-striping for readability */
.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #3a4a55;
}

/* Highlight bottom border of last row */
.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #36484f;
}

/* Optional: Highlight a specific 'active' row */
.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #fff;
}

/* Hover effect for rows */
.styled-table tbody tr:hover {
  background-color: #6a7282;
  cursor: pointer;
}

.styled-table thead th {
  position: sticky;
  top: 0; /* Sticks header to the top of the container */
  z-index: 1; /* Ensures header stays above the body content */
}


.content-layout { padding:5px; background-color: #3a4a55; display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
.main-content { max-width:1500px; margin:0 auto; padding:2rem 1.5rem 4rem; }


input::file-selector-button {
  font-weight: bold;
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
}

input::file-selector-button { border:2px solid var(--c-orange); background:transparent; color:var(--c-white); font-family:var(--f-display); font-size:.875rem; font-weight:600; border-radius:var(--pill); padding:.375rem 1.125rem; white-space:nowrap; transition:background .2s, color .2s; }
input::file-selector-button:hover { background:var(--c-orange); }


@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-14 input[type=checkbox] {
      --active: #e63d08;
      --active-inner: #fff;
      --border: #e63d08;
      --border-hover: #e63d08;
      --background: #fff;
      --disabled: #F6F8FF;
      --disabled-inner: #E1E6F9;
      -webkit-appearance: none;
      -moz-appearance: none;
      height: 21px;
      outline: none;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      cursor: pointer;
      border: 1px solid #e63d08;
      background: var(--b, var(--background));
      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    .checkbox-wrapper-14 input[type=checkbox]:after {
      content: "";
      display: block;
      left: 0;
      top: 0;
      position: absolute;
      transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    .checkbox-wrapper-14 input[type=checkbox]:checked {
      --b: var(--active);
      --bc: var(--active);
      --d-o: .3s;
      --d-t: .6s;
      --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }
    .checkbox-wrapper-14 input[type=checkbox]:disabled {
      --b: var(--disabled);
      cursor: not-allowed;
      opacity: 0.9;
    }
    .checkbox-wrapper-14 input[type=checkbox]:disabled:checked {
      --b: var(--disabled-inner);
      --bc: var(--border);
    }
    .checkbox-wrapper-14 input[type=checkbox]:disabled + label {
      cursor: not-allowed;
    }
    .checkbox-wrapper-14 input[type=checkbox]:hover:not(:checked):not(:disabled) {
      --bc: var(--border-hover);
    }
    .checkbox-wrapper-14 input[type=checkbox]:focus {
      box-shadow: 0 0 0 var(--focus);
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
      width: 21px;
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
      opacity: var(--o, 0);
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
      --o: 1;
    }
    .checkbox-wrapper-14 input[type=checkbox] + label {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 4px;
    }

    .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
      border-radius: 7px;
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
      width: 5px;
      height: 9px;
      border: 2px solid var(--active-inner);
      border-top: 0;
      border-left: 0;
      left: 7px;
      top: 3px;
      transform: rotate(var(--r, 20deg));
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
      --r: 43deg;
    }
    .checkbox-wrapper-14 input[type=checkbox].switch {
      width: 38px;
      border-radius: 11px;
    }
    .checkbox-wrapper-14 input[type=checkbox].switch:after {
      left: 2px;
      top: 2px;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      background: var(--ab, var(--border));
      transform: translateX(var(--x, 0));
    }
    .checkbox-wrapper-14 input[type=checkbox].switch:checked {
      --ab: var(--active-inner);
      --x: 17px;
    }
    .checkbox-wrapper-14 input[type=checkbox].switch:disabled:not(:checked):after {
      opacity: 0.6;
    }
  }

  .checkbox-wrapper-14 * {
    box-sizing: inherit;
  }
  .checkbox-wrapper-14 *:before,
  .checkbox-wrapper-14 *:after {
    box-sizing: inherit;
  }


@media (max-width:480px) {
  .assistant-overlay { padding:4rem .75rem .75rem; }
  .assistant-panel { max-width:100%; }
  .nav-icon-btn { width:30px; height:30px; }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #3a4a55;
-webkit-box-shadow:  2px 2px 4px 0px #3a4a55;
box-shadow: 2px 2px 4px 0px #3a4a55;
-moz-border-radius: 18px ;
-webkit-border-radius:18px ;
border-radius:158x;
}

.audio-container {
    display: flex;
    align-items: center; /* Vertically centers the text and the audio player */
    gap: 10px; /* Adds some space between the text and the player */
}

.custom-audio {
    width: 250px; /* Adjust width as needed */
    height: 40px; /* Adjust width as needed */
    /* Other general CSS properties */
  }
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px #e63d08;
-moz-box-shadow: 15px 15px 20px #e63d08;
box-shadow: 15px 15px 20px #e63d08;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

.inline-form {
  display: flex; /* Aligns children in a row */
  flex-flow: row wrap; /* Allows wrapping on smaller screens */
  align-items: center; /* Vertically centers the items */
  gap: 10px; /* Modern way to add space between elements */
}

.btn-aux { border:2px solid var(--c-orange); background:var(--c-orange); color:var(--c-white); font-family:var(--f-display); font-size:.875rem; font-weight:600; border-radius:var(--pill); padding:.375rem 1.125rem; white-space:nowrap; transition:background .2s, color .2s; }
.btn-aux:hover { background:var(--c-orange-dk); transform:scale(1.02); }

/* Simple Spinner Loader */
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.compras-container {
	background-color: #0d1518;
  display: grid;
  /* Creates three equal-width columns */
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  gap: 10px; /* Optional space between items */
}

/* The modal container */
.notifyModal {
  opacity: 1;
  transition: opacity 0.8s ease; /* Adjust 0.8s for how "soft" the fade is */
  visibility: visible;
}

/* The class added by JavaScript to hide it */
.notifyModal.hide-softly {
  opacity: 0;
  visibility: hidden; /* Keeps the modal from being clickable while fading */
}

.quantity-input {
  margin-top:10px;
  margin-bottom:20px;
  display: flex;
  align-items: center;
  width: fit-content;
  color:#fff;
  border:none;
  font-size:1.2em;
}

.quantity-input input {
  width: 40px;
  text-align: center;
  border: none;
  outline: none;
  color:#fff;
  background: transparent;
  font-weight: bold;
}

.quantity-input button {
  background: transparent;
  color:#fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.2rem;
}

.quantity-input button:hover {
  background: transparent;
  font-weight: bold;
  border:none;
}

.quantity-input button:active {
    border: none;
    outline: none;
}

.quantity-input button:focus {
    outline: none;
    box-shadow: none; /* Some browsers use box-shadow instead */
}


.btn-order { width:100%; background:var(--c-orange); border:none; color:var(--c-white); font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; padding:1rem 2rem; border-radius:var(--pill); transition:background .2s, transform .15s; }
.btn-order:hover { background:var(--c-orange-dk); transform:scale(1.02); }

/* Style the content container inside <details> */
details::details-content {
  opacity: 0;
  transition: content-visibility 0.3s allow-discrete, opacity 0.3s;
}

details {
  margin-left:20px;
}

/* Change opacity when the parent <details> is open */
details[open]::details-content {
  opacity: 1;
}

.form-row {
  display: flex;
  align-items: center; /* Vertically centers the label with the input */
  gap: 10px;           /* Adds space between the label and input */
  margin-bottom: 15px;
  width:250px;
}


.center-content{
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:#000;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 8px solid #e63d08;
    border-top: 8px solid #ff5722;
    border-radius: 50%;
     left: 80%;
    width: 90px;
    height: 90px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mycheck {
    cursor: pointer;
    background-color: #e63d08;
    width: 18px;
    height: 18px;
}

.parent {
  margin: 1rem;
  text-align: left;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

/* Container wrapper to add a custom arrow */
.custom-dropdown {
  position: relative;
  display: inline-block;
  width: 250px;
}

/* Styling the main Select Box */
.custom-dropdown select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 16px;
  color: #333333;
  background-color: #ffffff;
  border: 2px solid #dddddd;
  border-radius: 8px;
  cursor: pointer;
  
  /* Removes default browser styling and native arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  transition: all 0.3s ease;
}

/* Hover and Focus interaction states */
.custom-dropdown select:hover {
  border-color: #3498db;
}

.custom-dropdown select:focus {
  outline: none;
  border-color: #2980b9;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

/* Creating a custom indicator arrow */
.custom-dropdown::after {
  content: "▼";
  font-size: 12px;
  color: #777777;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Allows clicks to pass through to the select */
}

/* Styling the actual dropdown Options */
.custom-dropdown select option {
  padding: 12px;
  background-color: #ffffff;
  color: #333333;
}

/* Soft gray color for the placeholder text */
.custom-dropdown select option:disabled {
  color: #999999;
}

.password-container {
  position: relative;
  width: 300px;
}

.password-container input {
  width: 100%;
  padding: 10px 40px 10px 10px; /* Extra right padding prevents text overlapping the icon */
  box-sizing: border-box;
}

.password-container i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
}