/* ============================================================
   Online-Bestellung – Speisekarte-Steuerung, Warenkorb-Button,
   Warenkorb-/Checkout-/Bestätigungsseiten
   ============================================================ */

/* ---------- "In den Warenkorb" auf der Speisekarte ---------- */
.op-order{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;
}
.op-variant{
    background:#211d1a;color:#ece6dc;border:1px solid #3a342c;
    border-radius:3px;padding:5px 8px;font-size:12px;font-family:inherit;max-width:100%;
}
.op-add{
    background:#eda900;color:#1a1510;border:0;border-radius:3px;cursor:pointer;
    padding:7px 12px;font-size:11px;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;font-family:inherit;transition:.2s;white-space:nowrap;
}
.op-add:hover{background:#efb554}
.op-add:disabled{opacity:.6;cursor:default}

/* ---------- Schwebender Warenkorb-Button (alle Seiten) ---------- */
.op-fab{
    position:fixed;right:22px;bottom:22px;z-index:9998;
    width:58px;height:58px;border-radius:50%;
    background:#eda900;color:#1a1510;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 22px rgba(0,0,0,.5);transition:.25s;
}
.op-fab:hover{background:#efb554;transform:translateY(-2px)}
.op-fab svg{width:26px;height:26px}
.op-fab-count{
    position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;
    background:#1a1510;color:#efb554;border:2px solid #eda900;border-radius:20px;
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
    padding:0 5px;font-family:'Source Sans Pro',Arial,sans-serif;
}
.op-fab-count.op-empty-badge{display:none}

/* ---------- Toast-Meldung ---------- */
.op-toast{
    position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);
    background:#211d1a;border:1px solid #eda900;color:#ece6dc;
    padding:13px 24px;border-radius:4px;font-size:14px;z-index:99998;
    box-shadow:0 8px 26px rgba(0,0,0,.5);opacity:0;pointer-events:none;
    transition:opacity .3s,transform .3s;font-family:'Source Sans Pro',Arial,sans-serif;
}
.op-toast.op-show{opacity:1;transform:translateX(-50%) translateY(0)}
.op-toast.op-err{border-color:#d9776b}

/* ============================================================
   Bestellseiten (Warenkorb / Checkout / Bestätigung)
   ============================================================ */
.op-page{
    background:#181513;color:#ece6dc;min-height:100vh;
    font-family:'Source Sans Pro',Arial,sans-serif;
    padding:150px 22px 80px;
}
.op-container{max-width:1080px;margin:0 auto}
.op-hero-title{
    font-family:'Playfair Display',Georgia,serif;color:#efb554;
    font-size:clamp(30px,5vw,46px);text-align:center;margin:0 0 6px;
}
.op-hero-sub{text-align:center;color:#a99e8d;margin:0 0 44px;font-size:15px}

.op-card{
    background:#211d1a;border:1px solid #3a342c;border-radius:5px;padding:26px 28px;
}
.op-card + .op-card{margin-top:22px}
.op-card h2{
    font-family:'Playfair Display',Georgia,serif;color:#efb554;
    font-size:22px;margin:0 0 18px;
}

/* Tabelle */
.op-table{width:100%;border-collapse:collapse}
.op-table th{
    text-align:left;color:#a99e8d;font-weight:600;font-size:12px;
    text-transform:uppercase;letter-spacing:.6px;padding:0 10px 12px;
    border-bottom:1px solid #3a342c;
}
.op-table td{padding:14px 10px;border-bottom:1px solid #2a2520;vertical-align:middle}
.op-table tr:last-child td{border-bottom:0}
.op-dish{font-family:'Playfair Display',Georgia,serif;color:#e5cfbd;font-size:17px}
.op-variant-label{display:block;color:#a99e8d;font-size:13px;margin-top:2px}
.op-right{text-align:right}
.op-center{text-align:center}
.op-qty{
    width:62px;background:#181513;color:#ece6dc;border:1px solid #3a342c;
    border-radius:3px;padding:7px;text-align:center;font-family:inherit;font-size:14px;
}
.op-remove{color:#a99e8d;font-size:20px;text-decoration:none;line-height:1}
.op-remove:hover{color:#d9776b}

.op-total{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-top:18px;padding-top:16px;border-top:1px solid #3a342c;
    font-family:'Playfair Display',Georgia,serif;
}
.op-total span:first-child{color:#e5cfbd;font-size:18px}
.op-total span:last-child{color:#eda900;font-size:24px;font-weight:700}
.op-line{display:flex;justify-content:space-between;color:#a99e8d;padding:5px 0;font-size:14px}
.op-line span:last-child{color:#ece6dc}

/* Buttons */
.op-btn{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    border:1px solid #eda900;border-radius:3px;padding:13px 28px;
    font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    font-family:'Source Sans Pro',Arial,sans-serif;transition:.25s;text-decoration:none;
    background:#eda900;color:#1a1510;
}
.op-btn:hover{background:#efb554;border-color:#efb554}
.op-btn-ghost{background:transparent;color:#efb554}
.op-btn-ghost:hover{background:#3a342c;color:#efb554}
.op-btn-lg{padding:16px 38px;font-size:14px}
.op-btn-block{display:flex;width:100%;justify-content:center}
.op-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}

/* Formular */
.op-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.op-field{margin-bottom:16px}
.op-field label{display:block;color:#e5cfbd;font-size:14px;margin-bottom:6px;font-weight:600}
.op-field input,.op-field select,.op-field textarea{
    width:100%;background:#181513;color:#ece6dc;border:1px solid #3a342c;
    border-radius:3px;padding:11px 13px;font-family:inherit;font-size:15px;
}
.op-field input:focus,.op-field select:focus,.op-field textarea:focus{
    outline:0;border-color:#eda900;
}
.op-hint{color:#8a8170;font-size:13px;margin:5px 0 0}
.op-alert{padding:12px 16px;border-radius:4px;margin-bottom:18px;font-size:14px;line-height:1.5}
.op-alert-ok{background:#1e4620;color:#d4edda;border:1px solid #2e7d32}
.op-alert-err{background:#4a1f1f;color:#f5c6cb;border:1px solid #a94442}
.op-alert-err ul{margin:0;padding-left:18px}

.op-empty{text-align:center;padding:50px 20px;color:#a99e8d}
.op-empty p{margin:0 0 22px;font-size:16px}

@media(max-width:760px){
    .op-grid{grid-template-columns:1fr}
    .op-page{padding-top:120px}
    .op-table th:nth-child(3),.op-table td:nth-child(3){display:none}
}

/* ---------- Checkout: Zahlungsarten-Auswahl ---------- */
.op-pay-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 8px}
.op-pay-opt{
    display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
    border:1px solid rgba(255,255,255,0.12);border-radius:8px;cursor:pointer;
    background:rgba(255,255,255,0.02);
    transition:border-color .15s, background .15s;
}
.op-pay-opt:hover{border-color:rgba(229,207,189,0.5)}
.op-pay-opt input[type=radio]{margin-top:3px;accent-color:#e5cfbd}
.op-pay-opt:has(input:checked){border-color:#e5cfbd;background:rgba(229,207,189,0.06)}
.op-pay-body{display:flex;flex-direction:column;gap:2px;flex:1}
.op-pay-body strong{color:#ece6dc;font-weight:600}
.op-pay-body small{color:#9d958a;font-size:12.5px}
.op-pay-instructions{
    margin-top:10px;padding:10px 12px;border-radius:8px;
    background:rgba(229,207,189,0.08);color:#d8d1c5;
    font-size:13.5px;line-height:1.5;white-space:pre-wrap;
}

/* ---------- Mobile-Bottom-Bar (Schnellzugriff) ---------- */
.mb-bar{display:none}
@media (max-width:768px){
    .mb-bar{
        display:flex;position:fixed;left:0;right:0;bottom:0;z-index:999;
        background:rgba(10,10,10,0.94);backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border-top:1px solid rgba(229,207,189,0.18);
        padding:6px 0 max(6px,env(safe-area-inset-bottom));
    }
    .mb-bar-item{
        flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
        padding:6px 4px;text-decoration:none;color:#cfc6b8;
        font-size:11px;line-height:1.2;text-align:center;
        transition:color .15s;position:relative;
    }
    .mb-bar-item:hover,.mb-bar-item:focus{color:#e5cfbd}
    .mb-bar-item.is-active{color:#e5cfbd}
    .mb-bar-item.is-active::before{
        content:"";position:absolute;top:-6px;left:25%;right:25%;
        height:2px;background:#e5cfbd;border-radius:2px;
    }
    .mb-icon{width:22px;height:22px;flex-shrink:0}
    .mb-bar-cart .mb-badge{
        position:absolute;top:2px;right:calc(50% - 24px);
        background:#e5cfbd;color:#0a0a0a;
        font-size:10px;font-weight:700;
        min-width:16px;height:16px;line-height:16px;
        border-radius:10px;padding:0 5px;text-align:center;
    }
    .mb-bar-cart .mb-badge.is-empty{display:none}
    /* Verstecken: floating cart + bottom-padding fürs Layout */
    .op-fab{display:none !important}
    body{padding-bottom:64px}
}