/* ------------------------
   Theme variables (modernized)
   ------------------------ */
:root {
  --bg: #fff6f7;
  --card: #ffffff;
  --primary: #ff7f7f;
  --muted: #f6e9ea;
  --text: #2b2b2b;
  --accent: #ffd6a5;
  --glass: rgba(255,255,255,0.6);
  --overlay: rgba(0,0,0,0.22);
  --radius: 14px;
  --container: 1100px;
  --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
}

/* Strawberry */
:root[data-theme="strawberry"] {
  --bg: #fff1f2;
  --primary: #ff3366;
  --muted: #ffe3ec;
  --text: #361e28;
  --accent: #ffdcdc;
}

/* Chocolate */
:root[data-theme="chocolate"] {
  --bg: #f7efe6;
  --primary: #6b3f2a;
  --muted: #efe1d4;
  --text: #3a2b26;
  --accent: #f0d1b6;
}

/* Vanilla */
:root[data-theme="vanilla"] {
  --bg: #fffdf6;
  --primary: #ffb84d;
  --muted: #fff6e6;
  --text: #3a2f25;
  --accent: #fff0d9;
}

/* Pastel (default) */
:root[data-theme="pastel"] {
  --bg: #E9F6F5;
  --card: #FFFFFF;
  --text: #2F3E46;
  --primary: #60C5C4;
  --accent: #A8DADC;
}

/* ------------------------
   Base layout
   ------------------------ */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family:'Poppins',sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background:var(--bg); color:var(--text); }

/* container utility */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

/* app layout */
#app { display:flex; flex-direction:column; min-height:100vh; }

/* ------------------------
   Navbar
   ------------------------ */
.navbar { display:flex; justify-content:space-between; align-items:center; padding:14px 0; position:sticky; top:0; z-index:120; background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6)); backdrop-filter: blur(6px); box-shadow: var(--shadow-1); width: 100%; /* Make the navbar occupy the entire width */
  padding-left: 1rem; /* Optional: Keep some padding to the left */
  padding-right: 1rem; /* Optional: Keep some padding to the right */}
.brand { display:flex; gap:0.6rem; align-items:center; }
.logo { font-weight:700; font-size:1.15rem; color:var(--primary); }
.tag { font-size:0.82rem; color:var(--text); opacity:0.75; }

.navbar ul { display:flex; gap:1rem; align-items:center; list-style:none; margin:0; padding:0; }
.navbar a { text-decoration:none; color:var(--text); padding:0.35rem 0.6rem; border-radius:10px; font-weight:600; }
.navbar a.router-link-active { background: linear-gradient(90deg, var(--primary), var(--accent)); color:white; }

.menu-toggle { display:none; background:none; border:0; font-size:1.15rem; cursor:pointer; }

/* theme select */
.theme-control select { padding:0.35rem 0.5rem; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:var(--card); font-weight:600; color:var(--text); }

/* ------------------------
   Hero
   ------------------------ */
.hero { min-height: calc(100vh - 140px); padding:4rem 0; background-size:cover; background-position:center; position:relative; display:flex; align-items:center; }
.hero-inner { display:flex; gap:2rem; align-items:center; justify-content:space-between; width:100%; max-width:var(--container); margin:0 auto; padding:0 1rem; }
.hero-text { flex:1; max-width:640px; color:var(--card); z-index:2; }
.eyebrow { background:linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.06)); display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; color:var(--card); opacity:0.95; margin-bottom:0.8rem; }
.hero-title { margin:0; font-size:2.1rem; color:var(--card); line-height:1.05; font-weight:700; text-shadow:0 6px 20px rgba(0,0,0,0.35); }
.hero-sub { margin:0.9rem 0 1.4rem 0; color:rgba(255,255,255,0.94); max-width:520px; }
.hero-ctas { display:flex; gap:0.8rem; margin-bottom:1.1rem; }
.btn { border:0; padding:0.75rem 1.2rem; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.6rem; font-weight:700; }
.btn-primary { background: linear-gradient(90deg, var(--primary), var(--accent)); color:white; box-shadow: 0 8px 26px rgba(0,0,0,0.18); transform:translateZ(0); }
.btn-ghost { background:rgba(255,255,255,0.12); color:white; border:1px solid rgba(255,255,255,0.14); }

.kpis { display:flex; gap:1.6rem; margin-top:1.2rem; align-items:center; }
.kpis div { text-align:left; color:var(--card); }
.kpis strong { display:block; font-size:1.15rem; font-weight:800; }

/* hero card (visual) */
.hero-card { width:360px; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92)); border-radius:18px; box-shadow:0 10px 40px rgba(0,0,0,0.12); overflow:hidden; display:flex; flex-direction:column; color:var(--text); }
.card-media img { width:100%; height:220px; object-fit:cover; display:block; }
.card-meta { padding:14px; }
.card-meta h3 { margin:0 0 6px 0; }
.card-meta p { margin:0 0 10px 0; color:rgba(0,0,0,0.6); font-size:0.95rem; }
.card-actions { display:flex; gap:0.6rem; align-items:center; }

/* decorative floating cakes */
.hero-decor { position:absolute; inset:0; pointer-events:none; z-index:1; }
.floating-cake { position:absolute; width:120px; height:120px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), rgba(255,255,255,0.1)); border-radius:50%; filter: blur(12px); opacity:0.28; transform:translateZ(0); }
.floating-cake.c1 { top:8%; left:6%; background:linear-gradient(135deg,var(--primary), rgba(255,255,255,0.6)); animation:floaty 7s ease-in-out infinite; }
.floating-cake.c2 { bottom:10%; right:8%; width:160px; height:160px; background:linear-gradient(135deg, var(--accent), rgba(255,255,255,0.6)); animation:floaty 9s ease-in-out infinite; }
.floating-cake.c3 { top:30%; right:18%; width:90px; height:90px; background:linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6)); animation:floaty 6s ease-in-out infinite; }
@keyframes floaty { 0% { transform: translateY(0) translateX(0);} 50% { transform: translateY(-14px) translateX(6px);} 100% { transform: translateY(0) translateX(0);} }

/* ------------------------
   Highlights
   ------------------------ */
.highlights { padding:3rem 0; }
.highlights .container { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; }
.highlight { background:var(--card); padding:1.1rem; border-radius:12px; text-align:center; box-shadow: var(--shadow-1); }
.highlight .icon { font-size:1.8rem; margin-bottom:0.6rem; }
.highlight h4 { margin:0 0 6px 0; }
.highlight p { margin:0; color:rgba(0,0,0,0.6); }

/* ------------------------
   Gallery
   ------------------------ */
.featured-gallery { padding:2.2rem 0 4rem 0; }
.featured-gallery h2 { margin:0 0 0.3rem 0; color:var(--text); }
.featured-gallery .muted { color:rgba(0,0,0,0.55); margin-bottom:0.9rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0.8rem; }
.gallery-item { position:relative; overflow:hidden; border-radius:10px; }
.gallery-item img { width:100%; height:160px; object-fit:cover; display:block; transition: transform .45s cubic-bezier(.2,.9,.3,1); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .overlay { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.5)); color:white; padding:10px; }

/* ------------------------
   Menu page
   ------------------------ */
.page.container { padding:2.4rem 0; }
.menu-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.menu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.cake { background:var(--card); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow-1); }
.cake-media img { width:100%; height:180px; object-fit:cover; display:block; }
.cake-body { padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cake .meta { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.price { font-weight:800; color:var(--text); }

/* small helpers */
.muted { color:rgba(0,0,0,0.6); }
.link { color:var(--primary); text-decoration:none; font-weight:700; }

/* ------------------------
   About & Contact layout
   ------------------------ */
.about { padding:2.2rem 0; }
.about-grid { display:grid; grid-template-columns:1fr 360px; gap:1.4rem; align-items:center; }
.about-visual img { width:100%; border-radius:12px; }

/* contact grid */
.contact-grid { display:grid; grid-template-columns:1fr 360px; gap:1.4rem; align-items:start; }
.contact-form input, .contact-form textarea { width:100%; padding:12px; border-radius:10px; border:1px solid rgba(0,0,0,0.06); margin-bottom:10px; }
.form-actions { display:flex; gap:0.6rem; }

/* ------------------------
   Cart UI
   ------------------------ */
.cart-floating { position:fixed; bottom:22px; right:22px; background:linear-gradient(90deg,var(--primary),var(--accent)); color:white; padding:12px 16px; border-radius:999px; display:flex; gap:8px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,0.18); z-index:140; cursor:pointer; font-weight:700; }
.cart-count { background:white; color:var(--primary); padding:2px 8px; border-radius:999px; font-weight:800; margin-left:6px; font-size:0.9rem; }

.cart-modal { position:fixed; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.48); z-index:150; }
.cart-box { width:92%; max-width:520px; background:var(--card); padding:1.2rem; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.35); }
.cart-box h3 { margin:0 0 10px 0; }
.cart-box ul { list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
.cart-box li { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.05); }
.cart-box img { width:56px; height:56px; object-fit:cover; border-radius:8px; }
.cart-box .remove { background:none; border:0; cursor:pointer; font-size:1.1rem; margin-left:auto; }
.cart-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.btn-small { padding:8px 12px; border-radius:10px; border:0; background:var(--primary); color:white; font-weight:700; cursor:pointer; }
.btn-small.ghost { background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--text); }
.btn-small.danger { background:#c92a2a; }

/* ------------------------
   Footer
   ------------------------ */
.site-footer { margin-top:auto; padding:18px 0; color:rgba(0,0,0,0.6); background:transparent; }
.site-footer .container { display:flex; justify-content:space-between; align-items:center; font-size:0.9rem; }

/* ------------------------
   Transitions & responsiveness
   ------------------------ */
.fade-enter-active, .fade-leave-active { transition: opacity 0.45s ease; }
.fade-enter-from, .fade-leave-to { opacity:0; }

@media (max-width: 980px) {
  .hero-inner { flex-direction:column-reverse; gap:1.2rem; padding:0 1rem; }
  .hero-card { width:100%; max-width:520px; }
  .about-grid, .contact-grid { grid-template-columns:1fr; }
  .navbar ul { display:none; }
  .menu-toggle { display:block; }
  .navbar ul.open { display:flex; flex-direction:column; gap:0.6rem; position:absolute; right:1rem; top:66px; background:var(--card); padding:10px; border-radius:10px; box-shadow:var(--shadow-1); }
}

/* small screens */
@media (max-width: 520px) {
  .hero-title { font-size:1.35rem; }
  .hero-sub { font-size:0.95rem; }
  .kpis { flex-direction:column; gap:0.4rem; }
  .gallery-item img { height:120px; }
}

/* accessibility / minor helpers */
.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }