/* /static/css/my.css */
:root{
  --brand:#800000;
  --ink:#111;
  --muted:#666;
  --line:#ddd;
  --ok:#0a0;
  --warn:#c80;
  --bad:#b00;
  --card:#fff;
  --bg:#fafafa;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:16px;
  max-width:820px;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* layout */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
h1{margin:0}
.muted{color:var(--muted)}

/* pills */
.pill{
  padding:2px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px
}
.ok{color:var(--ok);border-color:var(--ok)}
.warn{color:var(--warn);border-color:var(--warn)}
.bad{color:var(--bad);border-color:var(--bad)}

/* cards */
.card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin:12px 0;
  background:var(--card)
}

/* rows + buttons */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  cursor:pointer
}
button.ghost{background:#fff;color:var(--brand)}
button.icon{width:32px;height:32px;padding:0;display:inline-grid;place-items:center;border-radius:8px}
button:disabled{opacity:.5;cursor:not-allowed}

/* list items with + */
.li-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.li-main{display:flex;align-items:center;gap:10px}
.price{font-variant-numeric:tabular-nums;color:#222;opacity:.9}

/* pending block */
.pending-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.total{font-size:16px;font-weight:700}
.hr{height:1px;background:var(--line);margin:8px 0}
.small{font-size:12px;color:var(--muted)}

/* strong round title */
.round-title{font-weight:700}

/* Visible, centered + button */
.add-btn{
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #d1d5db; border-radius: 10px;
  background: #fff;
  font-weight: 800; font-size: 20px; line-height: 1;
  color: #111;               /* force visible glyph */
  padding: 0;                /* ensure centering */
  cursor: pointer;
  user-select: none;
}

/* Remove any inherited icon hacks */
.add-btn::before, .add-btn::after{ content: none !important; background: none !important; }
.add-btn svg{ display: none; }  /* if a broken SVG icon is injected */

/* Guard against global icon classes */
.add-btn, .add-btn *{ 
  text-indent: 0 !important; 
  -webkit-text-fill-color: currentColor !important;
}

/* Hover/focus states */
.add-btn:hover{ background:#f9fafb; }
.add-btn:active{ transform: translateY(1px); }
.add-btn:disabled{ opacity:.5; cursor: not-allowed; }

/* === Plus button color (MyDrinks) === */
button.icon,
button.add-btn{
  appearance:none;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--brand, #8B0000);
  border-radius:12px;
  background:#fff;                 /* white square */
  color:var(--brand, #8B0000);     /* brand-colored “+” */
  font-weight:900; font-size:22px; line-height:1;
  text-indent:0 !important;
  -webkit-text-fill-color:currentColor !important;  /* force visible glyph */
}
button.icon:hover,
button.add-btn:hover{
  background:var(--brand, #8B0000); /* filled on hover */
  color:#fff;                       /* white “+” on hover */
}
button.icon:active,
button.add-btn:active{ transform:translateY(1px); }

button.icon::before, button.icon::after,
button.add-btn::before, button.add-btn::after{
  content:none !important;          /* neutralize icon sprites */
}
/* === STRONGER LOOK FOR MYDRINKS === */

/* Πιο «βαρύ» theme */
:root{
  --bg:#f2f5f8;             /* πιο κρύο background */
  --line:#c3ccd4;           /* πιο σκούρα γραμμή */
  --muted:#4b5563;          /* λίγο πιο έντονο γκρι */
  --brand:#8B0000;          /* κρατάμε το μπορντό έντονο */
}

/* Top bar: καθαρό κοντράστ */
.topbar{
  background:#ffffff !important;
  border-bottom:2px solid #cfd8df !important;
  box-shadow:0 6px 14px rgba(0,0,0,.06) !important;
}

/* Κάρτες: ποιοτικό «σκληρό» panel */
.card{
  background:#ffffff !important;
  border:2px solid var(--line) !important;
  border-radius:14px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
  padding:14px 14px !important;
}

/* Γραμμές λίστας μέσα στις κάρτες πιο ευδιάκριτες */
.li-row{
  border-bottom:1.5px dashed #cfd8df !important;
  padding:10px 0 !important;
}
.li-row:last-child{ border-bottom:0 !important; }

/* Τιμές πιο «γεμάτες» */
.price{
  font-weight:800 !important;
  color:#111 !important;
  opacity:1 !important;
}

/* Τίτλοι round “γράφουν” καλύτερα */
.round-title, .pending-head strong{
  font-weight:900 !important;
  letter-spacing:.2px !important;
}

/* Λεπτή διαχωριστική γραμμή πιο σκούρα */
.hr{ background:#cfd8df !important; height:1.5px !important; }

/* Κουμπιά: γεμάτο brand + έντονο hover */
button{
  border:2px solid var(--brand) !important;
  background:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(139,0,0,.18) !important;
  font-weight:800 !important;
}
button:hover{ filter:brightness(.95) !important; }

/* Ghost κουμπιά: περίγραμμα να φαίνεται */
button.ghost{
  background:#fff !important;
  color:var(--brand) !important;
  border:2px solid var(--brand) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.06) !important;
}

/* Plus buttons: ήδη καλά – δίνουμε λίγο παραπάνω ανάγλυφο */
button.icon{
  box-shadow:0 6px 14px rgba(0,0,0,.10) !important;
}

/* Sticky total bar: πιο μαύρο, πιο έντονο */
.total-bar{
  background:#0f172a !important;   /* πολύ σκούρο μπλε-μαύρο */
  color:#ffffff !important;
  border-top:2px solid #1f2937 !important;
  box-shadow:0 -10px 20px rgba(0,0,0,.12) !important;
  font-weight:900 !important;
}
.total-bar .muted{ color:#d1d5db !important; }

/* Ελαφρύ boost στο body για αντίθεση */
body{ background:var(--bg) !important; }