/* ============================================================
   index.css — Styles specific to index.php (the order page)
   Loaded after base.css. Covers: menu grid, drink cards,
   order instance list, extras chips, cart bar, SnapScan button,
   donate section and its form.
   ============================================================ */

/* ================================================
   [MENU GRID] Drink selection cards
   Each tap adds a new drink instance — cards don't
   toggle selected state, they always look "available".
   ================================================ */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.drink-card {
    background: var(--foam);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    user-select: none;
    text-align: center;
}
.drink-card:hover {
    border-color: var(--caramel);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.drink-card:active { transform: translateY(0) scale(0.98); }

.drink-emoji { font-size: 2.2rem; display: block; margin-bottom: 0.5rem; }
.drink-name  { font-weight: 500; font-size: 1rem; }
.drink-desc  { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.4; }
.drink-price { font-weight: 500; color: var(--caramel); margin-top: 0.6rem; font-size: 1rem; }
.drink-add   {
    display: inline-block;
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--cream-dark);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

/* ================================================
   [ORDER LIST] One card per drink instance
   ================================================ */
#order-list-wrap {
    margin-bottom: 1.5rem;
    display: none; /* shown by JS when items exist */
}
#order-list-wrap.visible { display: block; }

.order-instance {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1rem 1rem 1.2rem;
    margin-bottom: 0.75rem;
    animation: slide-in 0.18s ease;
}
@keyframes slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Top row: name + price + remove button */
.instance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.instance-name  { font-weight: 500; font-size: 0.95rem; }
.instance-price { color: var(--caramel); font-weight: 500; font-size: 0.9rem; white-space: nowrap; }
.instance-remove {
    width: 24px; height: 24px;
    border: none;
    background: var(--cream-dark);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}
.instance-remove:hover { background: #f5c6c4; color: #c0392b; }

/* ================================================
   [EXTRAS CHIPS] Tappable add-on pills per instance
   ================================================ */
.extras-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
.extra-chip {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
    background: var(--cream);
}
.extra-chip.checked {
    border-color: var(--caramel);
    background: #FEF5E4;
    color: var(--cocoa);
}
.extra-chip .chip-price { color: var(--text-muted); font-size: 0.75rem; }
.extra-chip.checked .chip-price { color: var(--caramel); }

/* ================================================
   [CART TOTAL BAR]
   ================================================ */
#cart-summary {
    background: var(--cocoa);
    color: var(--cream);
    border-radius: var(--radius);
    padding: 1rem 1.4rem;
    margin-bottom: 1.5rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
#cart-summary.visible  { display: flex; }
#cart-total            { font-family: 'Playfair Display', serif; font-size: 1.3rem; }
#cart-items-text       { font-size: 0.85rem; color: var(--caramel-lt); }

/* ================================================
   [SNAPSCAN PAY BUTTON]
   ================================================ */
.btn-snapscan {
    display: block;
    width: 100%;
    padding: 1rem;
    background: var(--snapscan);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
    transition: background 0.2s, transform 0.15s;
}
.btn-snapscan:hover   { background: var(--snapscan-dk); transform: translateY(-1px); }
.btn-snapscan:active  { transform: translateY(0); }
.btn-snapscan:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ================================================
   [DONATE SECTION]
   ================================================ */
.donate-section {
    margin-top: 3rem;
    background: white;
    border: 2px solid #a8d5b5;
    border-radius: var(--radius);
    padding: 1.8rem;
    text-align: center;
}
.donate-section .section-label {
    border-bottom-color: var(--donate);
    color: var(--donate);
}
.donate-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
    line-height: 1.6;
}
.donate-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.donate-prefix {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--donate);
}
.donate-input {
    width: 130px;
    padding: 0.65rem 0.8rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    border: 2px solid #a8d5b5;
    border-radius: 8px;
    text-align: center;
    color: var(--donate);
    outline: none;
    transition: border-color 0.2s;
}
.donate-input:focus { border-color: var(--donate); }

.donate-presets {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.preset-btn {
    padding: 0.35rem 0.9rem;
    border: 1.5px solid #a8d5b5;
    border-radius: 999px;
    background: white;
    color: var(--donate);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.preset-btn:hover { background: #e8f5ee; border-color: var(--donate); }

.btn-donate {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    background: var(--donate);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.btn-donate:hover   { background: var(--donate-dk); transform: translateY(-1px); }
.btn-donate:active  { transform: translateY(0); }
.btn-donate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.donate-error { color: #c0392b; font-size: 0.82rem; margin-top: 0.5rem; min-height: 1rem; }

/* ================================================
   [DONATE FORM] Donor details capture
   ================================================ */
.donate-form {
    text-align: left;
    border-top: 1px solid #c8e6d4;
    padding-top: 1.2rem;
    margin-bottom: 1rem;
}
.donate-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 500px) { .donate-form-row { grid-template-columns: 1fr; } }

.donate-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.donate-field input {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 1.5px solid #c8e6d4;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--text);
    background: white;
    outline: none;
    transition: border-color 0.2s;
}
.donate-field input:focus { border-color: var(--donate); }
.donate-field input:disabled { background: #f5f5f5; color: #bbb; border-color: #ddd; }

.required-star { color: #c0392b; }
.optional-tag  { font-weight: 300; text-transform: none; letter-spacing: 0; color: #aaa; font-size: 0.75rem; }

/* Anonymous toggle */
.anon-wrap    { margin-top: 0.5rem; margin-bottom: 0.8rem; }
.anon-label   { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; font-size: 0.88rem; color: var(--text-muted); }
.anon-checkbox {
    width: 20px; height: 20px;
    border: 2px solid #a8d5b5;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    background: white;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.anon-checkbox.active { background: var(--donate); border-color: var(--donate); }
.anon-hint { font-size: 0.78rem; color: #aaa; margin-top: 0.3rem; margin-left: 1.6rem; display: none; }
.anon-hint.visible { display: block; }