/* FOOD VIBES · Step 18 | Professional turquoise and soft-coral experience. */
:root { --fv-text:#172e31; --fv-muted:#62767c; --fv-shadow:0 14px 38px rgba(23,48,51,.08); --fv-soft:#f2fbf9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:#fafcfb!important; color:var(--fv-text)!important; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important; line-height:1.55; }
h1,h2,h3 { letter-spacing:-.035em; color:var(--fv-text); }
a { color:#087c75; }
button,input,select,textarea { font:inherit; }
button, .btn, .dv-btn, .link-btn { transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
button:not(:disabled):hover,.btn:hover,.dv-btn:hover { transform:translateY(-1px); }
:focus-visible { outline:3px solid #137e77!important; outline-offset:3px; }
.customer-top,.admin-top,.dash-top { background:#fff!important; border-bottom:1px solid #e6eeec!important; box-shadow:0 2px 18px rgba(14,55,56,.04)!important; }
.customer-nav { max-width:1250px!important; margin:0 auto; padding:15px 20px; gap:18px; }
.brand,.logo { font-weight:850!important; letter-spacing:-.055em!important; color:#087d77!important; text-decoration:none!important; font-size:clamp(1.25rem,2vw,1.65rem)!important; }
.customer-nav nav,.admin-nav { display:flex; flex-wrap:wrap; align-items:center; gap:5px 16px; }
.customer-nav nav a,.admin-nav a { color:#345659!important; font-weight:650!important; padding:7px 5px; text-decoration:none; }
.customer-nav nav a:hover,.customer-nav nav .selected,.admin-nav a:hover { color:#087d77!important; }
.fv-announcement { background:#0b8e88!important; background-image:none!important; color:#fff!important; text-align:center; padding:8px 12px; font-size:.9rem; font-weight:650; }
.hero-home { background:linear-gradient(115deg,#e5faf5 0%,#fff 48%,#fff0f0 100%)!important; border-bottom:1px solid #e5e8e6; padding:64px 20px!important; }
.hero-inner { max-width:620px; }
.hero-home h1 { color:#143c3c!important; font-size:clamp(2.5rem,5.7vw,4.5rem)!important; line-height:1.07!important; }
.hero-home p { max-width:55ch; color:#4c6867!important; }
.hero-kicker,.eyebrow { color:#0b9089!important; text-transform:uppercase; letter-spacing:.11em; font-weight:800; }
.fv-hero-photo { width:min(36vw,420px); height:min(36vw,420px); min-width:250px; min-height:250px; margin:0 auto; border-radius:44px; overflow:hidden; background:#d9f5ed; border:8px solid #fff; box-shadow:0 28px 75px rgba(12,88,85,.18); transform:rotate(3deg); display:flex; align-items:center; justify-content:center; }
.fv-hero-photo img { width:100%; height:100%; object-fit:cover; }
.fv-hero-placeholder { color:#0f7771; font-size:clamp(2.4rem,5vw,4.2rem); font-weight:900; line-height:1.1; text-align:left; letter-spacing:-.06em; }
.fv-hero-placeholder span { color:#fa7d88; }
.customer-wrap,.page-wrap,.dashboard { max-width:1220px!important; margin:auto; }
.panel,.food-card,.fv-address-card,.auth-card { background:#fff!important; border:1px solid #f1cccc!important; border-radius:18px!important; box-shadow:var(--fv-shadow)!important; }
.food-grid { gap:22px!important; }
.food-card { overflow:hidden; display:flex; flex-direction:column; }
.food-photo { background:#edf8f5!important; aspect-ratio:4/3; min-height:180px; }
.food-photo img { width:100%; height:100%; object-fit:cover; }
.food-content { flex:1; display:flex; flex-direction:column; padding:18px!important; }
.food-content h2,.food-content h3 { font-size:1.2rem; }
.food-content .food-bottom { margin-top:auto; }
.btn,.dv-btn,.auth-card button:not(.secondary),button.btn { background:var(--fv-primary)!important; background-image:none!important; border:1px solid var(--fv-primary)!important; color:#fff!important; border-radius:11px!important; font-weight:750!important; box-shadow:none!important; }
.btn-outline,.btn.btn-outline,.dv-btn.secondary { background:#fff!important; color:#0d7772!important; border:1px solid #b1ddd5!important; }
input:not([type=checkbox]):not([type=radio]),select,textarea { max-width:100%; border:1px solid #d8e6e3!important; border-radius:10px!important; background:#fff!important; color:#182e31!important; padding:11px 12px; }
input:focus,select:focus,textarea:focus { border-color:var(--fv-primary)!important; box-shadow:0 0 0 3px rgba(18,184,176,.13)!important; }
.fv-table-wrap,.table-scroll,.dv-table { overflow-x:auto; border-radius:12px; }
table { border-collapse:collapse; width:100%; }
th { background:#effaf7!important; color:#225b5b!important; text-align:left; white-space:nowrap; }
th,td { padding:12px 15px!important; border-bottom:1px solid #edf0ef!important; vertical-align:top; }
tbody tr:hover { background:#f9fdfc; }
.fv-pagination { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:20px; }
.fv-pagination a,.fv-pagination span { border:1px solid #d4e4e0; border-radius:8px; padding:7px 12px; text-decoration:none; }
.fv-pagination .current { background:#087d77; color:white; }
.fv-mobile-shortcuts { background:#fff!important; border-top:1px solid #f0d2d2!important; }
.site-footer { background:#113c40!important; color:#eaf7f5!important; text-align:center; padding:26px; }
.menu-banner,.dv-hero { background:linear-gradient(100deg,#e8f9f5,#fff2f1)!important; color:#173d3e!important; border:1px solid var(--fv-border)!important; border-radius:18px!important; }
.fv-address-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:18px; }
.fv-address-card { padding:18px; overflow-wrap:anywhere; }
.fv-inline { display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; margin:3px; }
.fv-inline input { max-width:165px!important; }
.fv-check { display:flex; align-items:center; gap:8px; }
.fv-row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.fv-notify-sound { background:#f2fbf9!important; color:#075b56!important; border:1px solid #b1ddd5!important; }
@media(max-width:850px) {
 .hero-home { display:flex!important; flex-direction:column!important; text-align:left; padding:38px 18px!important; }
 .fv-hero-photo { width:min(88vw,350px); height:min(88vw,350px); min-width:0; min-height:0; border-radius:32px; margin-top:25px; }
 .customer-nav { align-items:flex-start; flex-direction:column; }
 .customer-nav nav { width:100%; gap:4px 12px; }
 .food-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important; }
 .admin-top,.dash-top { padding:12px!important; }
}
@media(max-width:600px) {
 .customer-wrap,.page-wrap,.dashboard { padding:12px!important; }
 .panel { padding:16px!important; }
 .hero-home h1 { font-size:2.6rem!important; }
 .food-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important; }
 .fv-mobile-shortcuts { padding-bottom:env(safe-area-inset-bottom)!important; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
/* Override leftover rainbow strips and gradients from older Step 8–16 styles. */
body::before { background:var(--fv-primary,#12b8b0)!important; background-image:none!important; height:4px!important; }
.fv-notice-top { background:#0a827c!important; background-image:none!important; }
.fv-notice-button,.fv-community .fv-action,.pay-btn { background:var(--fv-primary,#12b8b0)!important; background-image:none!important; }
.fv-offer-panel { border-image:none!important; border-top:4px solid var(--fv-border,#f5aaaa)!important; }
.report-welcome,.stats>div,.fv-community .fv-stats>div { background:#effaf7!important; background-image:none!important; }
.report-bar { background:linear-gradient(180deg,#12b8b0,#0a7771)!important; }
.cart-thumb,.fv-community .fv-picture,.photo-fallback { background:#ecfaf6!important; background-image:none!important; }
.pay-rainbow { display:none!important; }
.fv-notice-top, .fv-notice-button { color:#fff!important; }