/* ====================================
   Alfa Romeo Home Poll – CSS with Fixed Colors
   ==================================== */

/* — spacing below the fixed header, and optional centering on desktop — */
:root { --poll-nav-h: 80px; }

.home-poll{
  margin: calc(var(--poll-nav-h) + 16px) auto 32px;
  padding: 0 16px;
}

/* center vertically on desktop while staying clear of menu */
@media (min-width: 860px){
  .home-poll{
    min-height: calc(100vh - var(--poll-nav-h) - -100px);
    display: flex;
    align-items: center;
  }
}

/* — main card width cap = 1000px */
#home-only .poll-root{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  margin-block-start: 160px;
  margin-block-end: 120px;      
  background: rgba(10,10,10,0.8);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.8), 0 0 24px rgba(184,134,11,0.35);
  padding: 16px 20px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 10 !important;
}

/* =========================
   LAYOUT (desktop & mobile)
   ========================= */
.poll-questions{ margin-top: 4px; }

/* desktop: Q1 full row; Q2–Q4 in a 3-col row */
.poll-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
#poll-q1{ grid-column: 1 / -1; }

/* Q1: 4 models in a row (desktop) */
.poll-options-models{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  justify-items: center;
}

/* mobile: must scroll + smaller boxes */
@media (max-width: 860px){
  html, body{
    height: auto !important;
    overflow-y: auto !important;
  }
  #home-only{
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .home-poll {
	display:block; min-height:auto; 
    padding-bottom: 140px !important;
	padding-top: 100px;
  }

  .poll-grid{ grid-template-columns: 1fr; }

  /* Q1 (models): 2 images per line */
  .poll-options-models{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Q3/Q4: 2 choices per line */
  .poll-options-own,
  .poll-options-gender{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:8px;
  }

  /* Q2 (colors): 4 per line */
  .poll-options-colors{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:8px;
  }

  .poll-option-model{ max-width: 160px !important; }
  .poll-option-color{ width: 48px; height: 48px; }
}

/* cards & options (theme-aligned) */
.poll-card{
  background: radial-gradient(circle at top, rgba(255,255,255,0.06), rgba(10,10,10,0.96));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px 10px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
}
.poll-question{
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 10px; color: rgba(255,255,255,.9);
}

.poll-options{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; justify-content:center; }

.poll-option{
  border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at top, rgba(255,255,255,.08), rgba(10,10,10,.95));
  border-radius: 12px;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color .09s, box-shadow .09s, transform .09s, background .09s;
  color: rgba(255,255,255,.9);
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  user-select: none;
}
.poll-option:hover{
  border-color: rgba(184,134,11,.7);
  box-shadow: 0 0 16px rgba(184,134,11,.7);
  transform: translateY(0px);
  transform: scale(1.05);
}

.poll-option.is-selected{
  border-color: rgba(45,80,22,1);
  box-shadow: 
    0 0 30px rgba(45,80,22,1), 
    0 0 50px rgba(45,80,22,.8),
    0 0 70px rgba(196,30,58,.7),
    inset 0 0 40px rgba(45,80,22,.4);
  background: radial-gradient(circle at top, rgba(60,120,40,.85), rgba(45,80,22,.95));
  transform: scale(1.03);
}

/* models card visuals */
.poll-option-model{ width:100%; max-width:200px; text-align:left; display:flex; flex-direction:column; gap:4px; padding:6px; }
.poll-option-media img{ width:100%; display:block; border-radius:10px; object-fit:cover; aspect-ratio:4/3; }
.poll-option-label{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; text-align: center; }

/* color swatches */
.poll-option-color{ width:40px; height:40px; border-radius:12px; padding:0; position:relative; overflow:hidden; border-width:2px; }
.poll-option-color-inner{ position:absolute; inset:0; border-radius:inherit; }
.poll-option-color-inner::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.65), transparent 45%, rgba(0,0,0,.75));
  mix-blend-mode: soft-light;
}
.poll-option-color-label{
  position:absolute; left:4px; right:4px; bottom:4px;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.08em;
  text-shadow:0 0 4px rgba(0,0,0,.9);
}

/* two-option rows look tidy on desktop too */
@media (min-width: 861px){
  .poll-options-own, .poll-options-gender{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; align-items: center; min-height: 75%; 
  }
}
.poll-options-own .poll-option,
.poll-options-gender .poll-option{ min-width:120px; text-align:center; padding:8px 10px; }
.poll-gender-icon{ font-size:1.4rem; display:block; margin-bottom:2px; }

/* submit */
.poll-btn{
  margin-top:12px; width:100%; border-radius:12px;
  border:1px solid rgba(184,134,11,.5);
  background: linear-gradient(135deg, rgba(20,20,20,.95), rgba(10,10,10,.98));
  padding:32px 10px; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.9);
  cursor:pointer; transition:border-color .09s, box-shadow .09s, transform .09s, background .09s;
}
.poll-btn:hover:not(:disabled){ border-color:rgba(184,134,11,.9); box-shadow:0 0 18px rgba(184,134,11,.8); background:linear-gradient(135deg, rgba(30,25,20,.98), rgba(10,10,10,1)); transform:translateY(0px); transform: scale(1.02);}
.poll-btn:disabled{ opacity:.45; cursor:default; }

.poll-message{ margin-top:6px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }

/* =======================
   RESULTS — COLOR SYSTEM (FIXED)
   ======================= */

.poll-results{ margin-top:14px; border-top:1px solid rgba(255,255,255,.12); padding-top:10px; }
.poll-results-title{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-top: 20px; margin-bottom: 10px; }
.poll-results-total{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:8px; }
.poll-results-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.poll-results-label{ display:flex; justify-content:space-between; gap:10px; font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; }
.poll-results-percentage{ color:rgba(255,255,255,.9); }

.poll-results-bar-bg{ margin-top:2px; width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }

/* DEFAULT: Green gradient for all bars */
.poll-results-bar-fill{ 
  height:100%; 
  border-radius:inherit; 
  background: linear-gradient(90deg, #21451b, #3c7a2a); 
  box-shadow:0 0 10px rgba(33,69,27,.6); 
}

/* MODELS: Quadrifoglio green (all models keep green) */
#poll-results-models .poll-results-bar-fill{
  background: linear-gradient(90deg, #0b3b2e, #1e8f5f);
  box-shadow: 0 0 12px rgba(30,143,95,.55);
}

/* GENDER: Female = Modern Pink, Male = Electric Blue */
#poll-results-gender .poll-results-item:nth-child(1) .poll-results-bar-fill{
  background: linear-gradient(90deg, #0080ff, #00bfff);
  box-shadow: 0 0 12px rgba(255,20,147,.65);
}
#poll-results-gender .poll-results-item:nth-child(2) .poll-results-bar-fill{
  background: linear-gradient(90deg, #ff1493, #ff69b4);  
  box-shadow: 0 0 12px rgba(0,128,255,.65);
}

/* OWN ALFA: Yes = Brilliant Golden/Orange, No = Dark Orange */
#poll-results-own .poll-results-item:nth-child(1) .poll-results-bar-fill{
  background: linear-gradient(90deg, #ff8c00, #ffa500);
  box-shadow: 0 0 12px rgba(255,140,0,.65);
}
#poll-results-own .poll-results-item:nth-child(2) .poll-results-bar-fill{
  background: linear-gradient(90deg, #8b4513, #d2691e);
  box-shadow: 0 0 12px rgba(139,69,19,.55);
}

/* COLORS: Dynamic color bars - handled by inline styles in JS */

/* Hide hex text label in color results */
#poll-results-colors .poll-results-color-row > span:nth-child(2){
  display: none;
}

/* Hide the question title when results are shown */
#poll-results:not([hidden]) ~ .poll-heading .poll-title-questions {
    display: none;
}

/* Show the results title when results appear */
#poll-results:not([hidden]) ~ .poll-heading .poll-title-results {
    display: block !important;
}


/* Flip order of YES and NO results */
#poll-results-own .poll-results-list {
    direction: rtl;
}
#poll-results-own .poll-results-item {
    direction: ltr;
}

/* Flip the order of MALE and FEMALE results */
#poll-results-gender .poll-results-list {
    direction: rtl;
}
#poll-results-gender .poll-results-item {
    direction: ltr;
}

/* Two-result sections side-by-side */
#poll-results-gender .poll-results-list,
#poll-results-own .poll-results-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 14px;
}

/* Force poll layout to honor mobile breakpoints */
#home-only .poll-options-models {
  display: grid !important;
}

@media (max-width: 860px) {
  #home-only .poll-options-models { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  
  #home-only .poll-root{ margin-block-start: 20px; margin-block-end: 20px;  }
  
  .poll-option-color{ width:48px; height:48px; border-radius:12px; padding:0; position:relative; overflow:hidden; border-width:2px; }
  
  .poll-options-own, .poll-options-gender{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; align-items: center; min-height: 75%; }

}

/* HIDE NUMBER OF VOTERS */
.poll-results-total {
    display: none !important;
}