/* /static/css/welcome.css — HERO FIRST + HAMBURGER */

:root{
  --site-bg:linear-gradient(180deg,#dff9ff 0%,#e9fcff 40%,#ffffff 100%);
  --site-ink:#0f2a35;
  --site-line:#ccecf2;
  --card:#ffffff; --muted:#4b616c; --line:#ddebf2;
  --sun:#ffb703; --sun-ink:#1b1400; --aqua:#1087A6; --aqua-ink:#ffffff; --ok:#0b8f2a;
  --radius:14px; --shadow:0 8px 26px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--site-bg);color:var(--site-ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* HAMBURGER πάνω στο hero */
.burger{
  position:fixed;top:14px;right:14px;z-index:60;width:44px;height:44px;
  border:0;border-radius:12px;
  background:rgba(0,0,0,.42);backdrop-filter:saturate(120%) blur(6px);
  display:grid;place-items:center;cursor:pointer;
}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:3px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.navPanel{
  position:fixed;inset:0 0 0 40%;z-index:55;
  background:rgba(10,26,36,.92);color:#fff;
  transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;padding:90px 24px 24px;gap:6px;
}
.navPanel a{
  color:#fff;text-decoration:none;font-weight:800;letter-spacing:.5px;
  padding:12px 8px;border-radius:10px;
}
.navPanel a:hover{background:rgba(255,255,255,.08)}
.navPanel.is-open{transform:translateX(0)}
@media (max-width:640px){.navPanel{inset:0;padding-top:100px}}

/* HERO VIDEO / IMAGE */
.heroVideo{position:relative;min-height:clamp(420px,60vh,760px);overflow:hidden}
.heroVideo .bgVideo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
  filter:brightness(1.18) contrast(1.04) saturate(1.06);
}
.heroVideo .overlay{position:absolute;inset:0;background:none;z-index:1}
.heroVideo .heroBrand{z-index:2;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);text-align:center;color:#fff;
  width:min(69vw,380px)
}
.heroBrand{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.heroBrand .ring{position:absolute;inset:0;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45))}
.heroBrand .type{position:relative;display:grid;gap:4px;place-items:center;padding:10px 16px}
.heroBrand .brand{font:700 30px/1.05 Georgia,"Times New Roman",serif;letter-spacing:5px;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.heroBrand .word{font:600 13px/1.1 system-ui,sans-serif;letter-spacing:3px;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.heroBrand .sub{font:600 10px/1.2 system-ui,sans-serif;letter-spacing:2px;opacity:.95}

/* ΚΑΡΤΕΣ ΚΑΤΩ ΑΠΟ HERO */
.dilemma-cards-section{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;padding:40px 20px;background:var(--site-bg)}
.dilemma-card{width:100%;max-width:400px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1)}
.card-image-container{width:100%;height:250px;overflow:hidden;background:#2c2c2c}
.card-image{width:100%;height:100%;object-fit:cover}
.card-content-box{padding:30px 25px;text-align:center;border:1px solid var(--site-line);border-top:none;background:#fff}
.card-icon-container{margin-bottom:20px}
.drinks-icon{width:60px;height:60px;color:#1087A6;stroke:#1087A6;fill:none}
.card-title{font-family:Georgia,serif;font-size:28px;font-weight:700;color:#05668d;margin-bottom:15px;text-transform:uppercase}
.card-description{font-family:system-ui,sans-serif;font-size:15px;line-height:1.6;color:#444;margin-bottom:25px}
.card-button{display:inline-block;padding:12px 25px;background:#1087A6;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:5px;transition:.3s}
.card-button:hover{transform:translateY(-2px);filter:brightness(.95)}
:root{
  --card-orange:#e17c2f;--card-orange-dark:#c96d24;
  --card-aqua:#1087A6;--card-aqua-dark:#0c6a83;
  --card-green:#70a610;--card-green-dark:#5b870c;
}
.card-orange .card-content-box{border-color:var(--card-orange)}
.card-orange .drinks-icon{color:var(--card-orange);stroke:var(--card-orange)}
.card-orange .card-button{background:var(--card-orange)}
.card-orange .card-button:hover{background:var(--card-orange-dark)}
.card-aqua .card-content-box{border-color:var(--card-aqua)}
.card-aqua .drinks-icon{color:var(--card-aqua);stroke:var(--card-aqua)}
.card-aqua .card-button{background:var(--card-aqua)}
.card-aqua .card-button:hover{background:var(--card-aqua-dark)}
.card-green .card-content-box{border-color:var(--card-green)}
.card-green .drinks-icon{color:var(--card-green);stroke:var(--card-green)}
.card-green .card-button{background:var(--card-green)}
.card-green .card-button:hover{background:var(--card-green-dark)}
@media (min-width:768px){.dilemma-card{width:calc(50% - 30px)}}
@media (min-width:1024px){.dilemma-card{width:calc(33.333% - 30px)}}

/* HERO-CARD BASE */
.card-hero{background:transparent;border:none;box-shadow:0 4px 15px rgba(0,0,0,.1)}
.card-hero .card-cover{
  position:relative;height:420px;border-radius:18px;overflow:hidden;
  background:center/cover no-repeat var(--cover);
}
@media (max-width:540px){.card-hero .card-cover{height:360px}}

/* GLASS PANEL */
.card-glass{
  position:relative;z-index:1;margin:18px;padding:24px;text-align:center;border-radius:14px;
  background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);
  color:#073042;box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.card-glass .card-title{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.card-glass .card-description{color:#eef7fb}
.card-glass .drinks-icon{color:#fff;stroke:#fff}
.card-glass .card-button{background:#e17c2f;color:#fff}
.card-glass .card-button:hover{filter:brightness(.95)}

/* --- Jukebox hero card --- */
.dilemma-card.card-hero .card-cover{
  position:relative;
  display:block;
  width:100%;
  height:420px;  /* ΣΤΑΘΕΡΟ ΥΨΟΣ για desktop */
  border-radius:18px;
  overflow:hidden;
  background:center/cover no-repeat var(--cover);
}

@media (max-width:640px){
  .dilemma-card.card-hero .card-cover{
    height:56vw; /* responsive ύψος σε κινητά */
  }
}

.dilemma-card.jukebox .note-ico{
  position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);
  width:116px;height:auto;display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));pointer-events:none;
}
@media (max-width:640px){
  .dilemma-card.jukebox .note-ico{width:90px;}
}

.dilemma-card.jukebox .card-glass{
  position:absolute;z-index:1;left:0;right:0;bottom:0;height:75%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 22px;text-align:center;
  background:linear-gradient(to top,rgba(255,255,255,.32),rgba(255,255,255,.22));
  border-top:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 24px 60px rgba(255,255,255,.22);
  color:#083246;
}
.dilemma-card.jukebox .card-glass .card-title{
  margin:0 0 6px;color:#ffffff;
  font:800 22px/1.15 system-ui,sans-serif;letter-spacing:.8px;text-shadow:0 2px 10px rgba(0,0,0,.35);text-transform:uppercase;
}
.dilemma-card.jukebox .card-glass .card-description{
  margin:0;color:#eef7fb;font:600 14px/1.35 system-ui,sans-serif;
}
.dilemma-card.jukebox .card-glass .card-button{
  margin-top:12px;padding:10px 18px;border-radius:12px;border:0;
  background:#e17c2f;color:#fff;text-decoration:none;font:800 13px/1;
}
.dilemma-card.jukebox .card-glass .card-button:hover{filter:brightness(.95)}

/* EVENTS SECTION */
.eventsSection{padding:40px 0 30px}
.eventsTitle{font-size:1rem;line-height:1.4;font-weight:600;margin:0 0 .5rem;text-align:center}
.eventsGrid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:16px;overflow-x:auto;padding:10px 6px;scroll-snap-type:x mandatory;scroll-padding:6px}
.evCard{display:grid;grid-template-columns:68px 1fr;align-items:center;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.08);border:1px solid var(--site-line);min-height:110px;scroll-snap-align:start}
.evDate{display:grid;place-items:center;background:#f4f4f6;border-right:1px solid var(--site-line);height:100%;border-radius:12px 0 0 12px}
.evMon{color:#ff7a34;font:800 12px/1 system-ui;letter-spacing:1px}
.evDay{color:#ff7a34;font:900 28px/1 system-ui}
.evBody{display:flex;flex-direction:column;justify-content:center;padding:10px 12px}
.evTime{font:700 13px/1.2 system-ui;color:#4b616c;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.evTitle{font:900 17px/1.25 system-ui;color:#0f2a35}
.eventsMore{display:flex;justify-content:center;margin-top:14px}
.eventsBtn{display:inline-block;padding:12px 18px;border-radius:12px;border:2px solid #e17c2f;color:#2a2a2a;text-decoration:none;font:800 18px/1.2 system-ui;background:#fff}
.eventsBtn:hover{filter:brightness(.98)}
.evEmpty{text-align:center;color:#4b616c;padding:24px}
.crests{display:flex;gap:10px;align-items:center;margin:4px 0 6px}
.crest{width:28px;height:28px;object-fit:contain;display:block}
@media (min-width:720px){.crest{width:32px;height:32px}}
@media (max-width:720px){.eventsGrid{grid-auto-columns:minmax(220px,80%);gap:14px}}
@media (max-width:540px){
  .evCard{grid-template-columns:58px 1fr;min-height:96px}
  .evDay{font-size:24px}
  .evTitle{font-size:16px}
}
.evIcon{width:80%;max-width:160px;height:auto;display:block;margin:10px auto;object-fit:contain}
.eventsGrid::-webkit-scrollbar{height:8px}
.eventsGrid::-webkit-scrollbar-thumb{background:#d9e9ef;border-radius:8px}
.status-badge{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:10px;font:700 12px/1 system-ui}
.status-ok{background:#e6f7ec;color:#0b8f2a;border:1px solid #bfe8c9}
.status-off{background:#fff3f3;color:#b71c1c;border:1px solid #f3c1c1}
.card-button.offline{background:#aaa;cursor:not-allowed;filter:grayscale(40%)}

/* Γενικό layout για media στο event card */
.evCard .crests{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Όταν είναι EVENT δείξε μόνο την εικόνα σε block */
.evCard.is-event .crests{display:block}
/* Banner εικόνα για EVENT */
.evCard.is-event .evBanner{display:block;width:100%;height:auto;max-height:180px;object-fit:cover;border-radius:12px}
/* Προαιρετικά: μέγεθος για εμβλήματα/εικονίδια match */
.evCard .evIcon{width:36px;height:36px}
.evCard .crest{width:36px;height:36px}
@media (max-width:540px){
  .evCard .evIcon,.evCard .crest{width:28px;height:28px}
  .evCard.is-event .evBanner{max-height:140px}
}

/* ===== MENU CARD STYLES ===== */

/* Confirm = πορτοκαλί */
#confirmBtn,
button#confirmBtn {
  background:#e17c2f !important;
  color:#fff !important;
  border:0 !important;
}
#confirmBtn:hover { filter:brightness(.95); }

/* Explore (Look the menu) = βαθύ κόκκινο */
#cardMenu .card-content-box .card-button {
  background:#a00014 !important;
  color:#fff !important;
  border:0 !important;
}
#cardMenu .card-content-box .card-button:hover {
  filter:brightness(.96);
}

/* ==== GLASS TYPO ==== */
#menuGlass{
  text-align:center;
  animation:glassIn .5s ease both;
}
#menuGlass .card-title{
  font:900 clamp(18px,2.4vw,26px)/1.15 system-ui,sans-serif;
  letter-spacing:.6px;
  color:#ffffff;
  text-shadow:0 3px 12px rgba(0,0,0,.45),0 0 1px rgba(255,255,255,.25);
  margin:0 0 6px;
}
#menuGlass .card-description{
  color:#eef7fb;
  opacity:.95;
  font:600 13px/1.35 system-ui,sans-serif;
}
#nameWrap input{
  font:600 14px/1 system-ui;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.6);
  outline:0;
  box-shadow:0 6px 20px rgba(0,0,0,.12) inset,0 6px 22px rgba(0,0,0,.08);
}

/* ==== APPROVED STATE ==== */
.approved-strong{
  color:#1b5e20 !important;
  font-weight:800;
  text-shadow:0 2px 8px rgba(27,94,32,.25);
}

/* ==== ANIMATIONS ==== */
@keyframes glassIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes shine{0%{background-position:200% 0}100%{background-position:0 0}}

@media (prefers-reduced-motion:reduce){
  #menuGlass{animation:none}
}

/* ===== MENU TOTAL + MODAL ===== */

/* Κουμπί Total στην κάρτα */
#menuTotalBtn{
  background:#a00014 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px;
}
#menuTotalBtn:hover{ filter:brightness(.96) }

/* Backdrop πάνω απ' όλα */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
}
/* TEXT BLOCKS */
.dilemma-text {
  width: 100%;
  max-width: 900px;      /* Το όριο πλάτους που ήθελες */
  margin: 10px auto 22px; /* Κεντράρισμα και αποστάσεις */
  padding: 0 18px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #222;
}

.dilemma-text h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.dilemma-text p {
  margin: 0 0 6px;
}
.dilemma-text p:last-child {
  margin: 0;
}