/* VeronAi Frontend Styles v3.0.0 */
:root {
    --va-primary:   #1E3A5F;
    --va-secondary: #F7A700;
    --va-radius:    8px;
    --va-shadow:    0 2px 12px rgba(0,0,0,.1);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.veronai-btn {
    display:inline-block;padding:10px 20px;background:var(--va-primary);
    color:#fff;border:none;border-radius:var(--va-radius);cursor:pointer;
    font-size:14px;font-weight:600;transition:background .2s,transform .1s;
    text-decoration:none;
}
.veronai-btn:hover { background:#16304f; transform:translateY(-1px); }
.veronai-btn:active { transform:none; }

/* ── Menu Grid ─────────────────────────────────────────────────────────── */
.veronai-menu { max-width:1200px;margin:0 auto; }
.veronai-menu-cats { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px; }
.veronai-cat-btn {
    padding:6px 16px;border:2px solid var(--va-primary);border-radius:20px;
    background:transparent;color:var(--va-primary);cursor:pointer;font-size:13px;
    transition:all .2s;
}
.veronai-cat-btn.active,.veronai-cat-btn:hover { background:var(--va-primary);color:#fff; }
.veronai-menu-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;
}
.veronai-product-card {
    border-radius:var(--va-radius);overflow:hidden;box-shadow:var(--va-shadow);
    background:#fff;transition:box-shadow .2s;
}
.veronai-product-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.15); }
.veronai-product-img {
    width:100%;height:180px;object-fit:cover;display:block;
}
.veronai-product-img--placeholder { height:180px; }
.veronai-product-body { padding:14px; }
.veronai-product-name { margin:0 0 6px;font-size:16px;font-weight:700; }
.veronai-product-desc { margin:0 0 10px;font-size:13px;color:#666;line-height:1.4; }
.veronai-product-footer { display:flex;align-items:center;justify-content:space-between; }
.veronai-product-price { font-size:18px;font-weight:700; }
.veronai-out-of-stock { font-size:12px;color:#999; }
.veronai-add-to-cart-btn {
    padding:7px 14px;border:none;border-radius:var(--va-radius);color:#fff;
    cursor:pointer;font-size:13px;transition:opacity .2s;
}
.veronai-add-to-cart-btn:hover { opacity:.85; }

/* ── Cart ──────────────────────────────────────────────────────────────── */
.veronai-cart { max-width:600px;margin:0 auto; }
.veronai-cart-item {
    display:flex;gap:12px;align-items:center;padding:12px 0;
    border-bottom:1px solid #eee;
}
.veronai-cart-item img { width:60px;height:60px;object-fit:cover;border-radius:4px; }
.veronai-ci-info { flex:1; }
.veronai-ci-qty { display:flex;align-items:center;gap:8px; }
.veronai-qty-btn {
    width:28px;height:28px;border:1px solid #ddd;border-radius:50%;
    cursor:pointer;background:#fff;font-size:16px;line-height:1;
}
.veronai-cart-summary { margin-top:20px;padding:16px;background:#f9f9f9;border-radius:var(--va-radius); }
.veronai-cart-row { display:flex;justify-content:space-between;padding:6px 0; }
.veronai-cart-total { font-weight:700;font-size:18px;border-top:2px solid #ddd;margin-top:8px;padding-top:8px; }

/* ── Checkout ──────────────────────────────────────────────────────────── */
.veronai-checkout { max-width:700px;margin:0 auto; }
.veronai-checkout-section { margin-bottom:24px; }
.veronai-order-type-btns { display:flex;gap:8px;flex-wrap:wrap; }
.veronai-order-type-btn {
    padding:10px 20px;border:2px solid var(--va-primary);border-radius:var(--va-radius);
    background:transparent;color:var(--va-primary);cursor:pointer;font-weight:600;
    transition:all .2s;
}
.veronai-order-type-btn.active { background:var(--va-primary);color:#fff; }
.veronai-tip-btns { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
.veronai-tip-btn {
    padding:8px 16px;border:2px solid #ddd;border-radius:var(--va-radius);
    background:#fff;cursor:pointer;transition:all .2s;
}
.veronai-tip-btn.active { border-color:var(--va-primary);background:var(--va-primary);color:#fff; }
.veronai-checkout input, .veronai-checkout textarea {
    width:100%;padding:10px;border:1px solid #ddd;border-radius:var(--va-radius);
    margin-bottom:8px;box-sizing:border-box;font-size:14px;
}
.veronai-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
@media (max-width:600px) { .veronai-form-grid { grid-template-columns:1fr; } }

/* Tracker */
.veronai-tracker { display:flex;gap:0;margin:16px 0; }
.veronai-tracker-step { flex:1;text-align:center;position:relative; }
.veronai-tracker-step::before {
    content:'';display:block;width:100%;height:3px;background:#eee;position:absolute;top:12px;left:-50%;z-index:0;
}
.veronai-tracker-step:first-child::before { display:none; }
.veronai-tracker-dot {
    width:24px;height:24px;border-radius:50%;background:#eee;margin:0 auto 6px;
    position:relative;z-index:1;transition:background .3s;
}
.veronai-tracker-step.active .veronai-tracker-dot { background:var(--va-primary); }
.veronai-tracker-step.done .veronai-tracker-dot { background:var(--va-secondary); }
.veronai-tracker-step span { font-size:11px;color:#666; }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
.veronai-dashboard { max-width:900px;margin:0 auto; }
.veronai-dash-tabs { display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid #eee;margin-bottom:20px; }
.veronai-dash-tab {
    padding:8px 16px;border:none;background:transparent;cursor:pointer;
    font-size:14px;color:#666;border-bottom:2px solid transparent;margin-bottom:-2px;
    transition:all .2s;
}
.veronai-dash-tab.active { color:var(--va-primary);border-bottom-color:var(--va-primary);font-weight:700; }
.veronai-dash-panel { display:none; }
.veronai-dash-panel.active { display:block; }
.veronai-dashboard input[type="text"],
.veronai-dashboard input[type="email"],
.veronai-dashboard input[type="tel"],
.veronai-dashboard input[type="password"] {
    display:block;width:100%;max-width:400px;padding:8px 12px;border:1px solid #ddd;
    border-radius:var(--va-radius);margin-bottom:10px;font-size:14px;
}
.veronai-status-badge {
    display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;
}
.veronai-status-pending   { background:#FFF3CD;color:#856404; }
.veronai-status-confirmed { background:#D1ECF1;color:#0C5460; }
.veronai-status-preparing { background:#D4EDDA;color:#155724; }
.veronai-status-ready     { background:#CCE5FF;color:#004085; }
.veronai-status-delivered { background:#D4EDDA;color:#155724; }
.veronai-status-cancelled { background:#F8D7DA;color:#721C24; }
.veronai-status-active    { background:#D4EDDA;color:#155724; }

/* ── Loyalty Card ──────────────────────────────────────────────────────── */
.veronai-loyalty-card {
    max-width:360px;border-radius:16px;padding:24px;color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.2);margin-bottom:24px;
}
.veronai-loyalty-tier { font-size:13px;text-transform:uppercase;letter-spacing:2px;opacity:.8; }
.veronai-loyalty-points { font-size:40px;font-weight:900;margin:8px 0; }
.veronai-loyalty-progress-bar {
    height:6px;background:rgba(255,255,255,.3);border-radius:3px;margin:12px 0;
}
.veronai-loyalty-progress-bar div {
    height:100%;background:#fff;border-radius:3px;transition:width .6s;
}
.veronai-loyalty-next { font-size:12px;opacity:.75;margin-bottom:16px; }
.veronai-loyalty-qr { width:80px;height:80px;background:#fff;border-radius:8px;padding:4px; }
.veronai-rewards-catalog { max-width:600px; }
.veronai-reward-item {
    display:flex;align-items:center;justify-content:space-between;
    padding:12px;border-bottom:1px solid #eee;
}
.veronai-reward-pts { font-weight:700;color:var(--va-secondary); }

/* ── Reservation ───────────────────────────────────────────────────────── */
.veronai-reservation-form { max-width:600px; }
.veronai-reservation-form input,
.veronai-reservation-form select,
.veronai-reservation-form textarea {
    display:block;width:100%;padding:10px;border:1px solid #ddd;
    border-radius:var(--va-radius);margin-bottom:10px;box-sizing:border-box;font-size:14px;
}
.veronai-slot-grid { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }
.veronai-slot-btn {
    padding:6px 14px;border:2px solid var(--va-primary);border-radius:var(--va-radius);
    background:#fff;color:var(--va-primary);cursor:pointer;font-size:13px;
}
.veronai-slot-btn.active { background:var(--va-primary);color:#fff; }

/* ── Coupon / Newsletter forms ─────────────────────────────────────────── */
.veronai-coupon-form, .veronai-newsletter-form { max-width:480px; }
.veronai-coupon-row { display:flex;gap:8px; }
.veronai-coupon-row input {
    flex:1;padding:10px;border:1px solid #ddd;border-radius:var(--va-radius);font-size:14px;
}
.veronai-coupon-msg, .veronai-nl-msg { margin-top:6px;font-size:13px; }
.veronai-newsletter-form input {
    display:block;width:100%;padding:10px;border:1px solid #ddd;
    border-radius:var(--va-radius);margin-bottom:8px;box-sizing:border-box;font-size:14px;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.veronai-table { border-collapse:collapse;width:100%; }
.veronai-table th, .veronai-table td {
    padding:10px 12px;text-align:left;border-bottom:1px solid #eee;font-size:13px;
}
.veronai-table th { background:#f7f7f7;font-weight:700; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.veronai-toast {
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:#fff;border-left:4px solid var(--va-primary);padding:12px 20px;
    border-radius:var(--va-radius);box-shadow:var(--va-shadow);
    opacity:0;transition:all .3s;pointer-events:none;z-index:99999;font-size:14px;
}
.veronai-toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── Lang Switcher ─────────────────────────────────────────────────────── */
.veronai-lang-switcher { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.veronai-lang-option {
    padding:4px 10px;border:1px solid var(--va-primary);border-radius:3px;
    text-decoration:none;color:var(--va-primary);font-size:12px;transition:all .15s;
}
.veronai-lang-option.active, .veronai-lang-option:hover { background:var(--va-primary);color:#fff; }

/* ── Login Prompt ──────────────────────────────────────────────────────── */
.veronai-login-prompt { max-width:400px;margin:0 auto;text-align:center;padding:40px 20px; }

/* ── Reviews ───────────────────────────────────────────────────────────── */
.veronai-reviews { max-width:700px; }
.veronai-review-item { padding:12px 0;border-bottom:1px solid #eee; }

/* ── PWA Install ───────────────────────────────────────────────────────── */
.veronai-pwa-install-btn {
    background:var(--va-primary);color:#fff;padding:12px 24px;
    border:none;border-radius:var(--va-radius);cursor:pointer;font-size:15px;
    box-shadow:var(--va-shadow);transition:background .2s;
}
.veronai-pwa-install-btn:hover { background:#16304f; }

/* ── Toggle Switch ─────────────────────────────────────────────────────── */
.veronai-toggle { position:relative;display:inline-block;width:48px;height:26px;cursor:pointer; }
.veronai-toggle input { opacity:0;width:0;height:0; }
.veronai-slider { position:absolute;inset:0;background:#ccc;border-radius:26px;transition:background .2s; }
.veronai-slider::before {
    content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;
    background:#fff;border-radius:50%;transition:transform .2s;
}
.veronai-toggle input:checked + .veronai-slider { background:var(--va-primary); }
.veronai-toggle input:checked + .veronai-slider::before { transform:translateX(22px); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:768px) {
    .veronai-menu-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
    .veronai-product-img { height:130px; }
    .veronai-tracker { flex-direction:column;align-items:flex-start; }
    .veronai-tracker-step::before { display:none; }
}
.veronai-ai-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.veronai-ai-recommendation-item {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}
.veronai-ai-recommendation-reason {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.5rem;
}