/**
 * Autovox Shop - Premium Dark Theme
 */
:root{
  --autovox-blue:#16B8FF;
  --autovox-black:#06080c;
  --autovox-black-2:#0b0f16;
  --autovox-text:#eef6ff;
  --autovox-muted:#b9c7d6;
}

.autovox-shop-grid,
.autovox-shop-grid *{
  box-sizing: border-box;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.autovox-shop-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1rem 0;
}

.autovox-shop-card{
  background: linear-gradient(180deg,var(--autovox-black) 0%, var(--autovox-black-2) 100%);
  border: 1px solid rgba(22,184,255,.28);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.autovox-shop-title{
  margin:0;
  padding: 0.9rem 1rem;
  text-align:center;
  color: var(--autovox-text);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(22,184,255,.20);
}

.autovox-shop-image{
  padding: .6rem;
  position: relative;
}

.autovox-shop-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.85);
  box-shadow:
    inset 0 0 0 9999px rgba(0,0,0,.10),
    inset 0 0 28px rgba(0,0,0,.55),
    0 8px 30px rgba(0,0,0,.35);
}

.autovox-placeholder{
  width:100%;
  padding-top:56.25%;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(22,184,255,.18);
}

/* Slider arrows */
.autovox-shop-image.autovox-slider{ position:relative; }
.autovox-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  border:none;
  background: transparent;
  color: rgba(255,255,255,.95);
  font-size: 36px;
  line-height: 1;
  padding: 6px 10px;
  cursor:pointer;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.autovox-prev{ left: 8px; }
.autovox-next{ right: 8px; }

/* Details cells */
.autovox-shop-details{
  display:grid;
  /* User request: keep cells stacked (one under the other) on desktop too */
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(22,184,255,.35);
}

.autovox-detail-cell{
  padding: .95rem;
  /* When stacked, separators are horizontal */
  border-right: none;
  border-bottom: 1px solid rgba(22,184,255,.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--autovox-text);
}
.autovox-detail-cell:last-child{ border-bottom:none; }

.autovox-value-main{
  color: var(--autovox-blue);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: .4px;
}

.autovox-note{
  margin-top: .35rem;
  color: var(--autovox-muted);
  font-size: .92rem;
}

/* Customs row: Arabic label on the right, amount on the left */
.autovox-estimate-row{
  display:flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-direction: row-reverse; /* first item (label) on the right */
}
.autovox-estimate-label{
  direction: rtl;
  color: var(--autovox-muted);
  font-weight: 700;
}
.autovox-estimate-value{
  direction: ltr;
  color: var(--autovox-blue);
  font-weight: 900;
  white-space: nowrap;
}

.autovox-order-btn{
  background: linear-gradient(90deg, rgba(22,184,255,1), rgba(0,116,176,1));
  border: none;
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  width: 100%;
  max-width: 220px;
}

/* Specs cell + toggle: gradient black -> blue */
.autovox-detail-cell.autovox-specs{
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(22,184,255,.30) 100%);
  transition: background .45s ease;
}
.autovox-specs-toggle{
  background: var(--autovox-blue);
  color:#fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: .65rem 1rem;
  font-weight: 900;
  cursor:pointer;
  width: 100%;
  max-width: 200px;
}

.autovox-detail-cell.autovox-specs.is-open{
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, var(--autovox-blue) 100%);
}
.autovox-detail-cell.autovox-specs.is-open .autovox-specs-toggle{
  background: rgba(0,0,0,.35);
}

.autovox-specs-content{
  margin-top: .75rem;
  width: 100%;
}

.autovox-specs-list{
  list-style: disc;
  padding-left: 1.25rem;
  margin: .25rem auto 0;
  text-align: left;
  max-width: 260px;
}

.autovox-specs-list li{
  color: #fff;
  margin: .35rem 0;
  font-weight: 600;
}

.autovox-specs-list li::marker{
  color: var(--autovox-blue);
}

/* Modal */
.autovox-modal[hidden]{ display:none !important; }
.autovox-modal{ position:fixed; inset:0; z-index:99999; }
.autovox-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }
.autovox-modal-dialog{
  position: relative;
  background: linear-gradient(180deg,var(--autovox-black) 0%, var(--autovox-black-2) 100%);
  border: 1px solid rgba(22,184,255,.28);
  color: var(--autovox-text);
  width: min(520px, 92vw);
  margin: 8vh auto 0;
  border-radius: 18px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.autovox-modal-close{
  position:absolute;
  top: 10px;
  right: 12px;
  border:none;
  background: transparent;
  color: var(--autovox-text);
  font-size: 26px;
  cursor:pointer;
}
.autovox-modal-title{
  margin: .25rem 0 .5rem;
  text-align:center;
}
.autovox-modal-car{ text-align:center; color: var(--autovox-blue); font-weight: 900; margin-bottom: .75rem; }
.autovox-modal-form{ display:flex; flex-direction:column; gap:.55rem; }
.autovox-modal-form label{ font-weight: 700; }
.autovox-modal-form input,
.autovox-modal-form select{
  padding: .7rem .8rem;
  border-radius: 12px;
  border: 1px solid rgba(22,184,255,.25);
  background: rgba(255,255,255,.06);
  color: var(--autovox-text);
}
.autovox-submit{
  margin-top: .25rem;
  background: linear-gradient(90deg, rgba(22,184,255,1), rgba(0,116,176,1));
  border:none;
  color:#fff;
  padding: .8rem 1rem;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
}
.autovox-form-msg{ min-height: 1.2em; text-align:center; font-weight: 700; }

@media (max-width: 700px){
  .autovox-shop-details{ grid-template-columns: 1fr; }
  .autovox-detail-cell{ border-right: none; }
}