/* Kitty Pizza Parlor — Y2K / "everything runs Windows XP" skeuomorphic theme */
:root{
  --pink: #FF6EC7;
  --pink-soft: #FFB3E6;
  --pink-pale: #FFE0F2;
  --cream: #FFF6FA;
  --grape: #7B2D8E;
  --gold: #FFD966;
  --mint: #B4F0E0;
  --line: #E8A8D8;
  --shadow: rgba(123,45,142,0.28);
  --bevel-light: rgba(255,255,255,0.9);
  --bevel-dark: rgba(123,45,142,0.45);
}
*{box-sizing:border-box;}
html, body{ height:100%; }
body{
  margin:0;
  font-family:'Quicksand', sans-serif;
  color: var(--grape);
  /* pink checkerboard desktop, like an old-school Y2K background */
  background-color: var(--pink-pale);
  background-image:
    linear-gradient(45deg, var(--pink-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pink-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pink-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pink-soft) 75%);
  background-size: 64px 64px;
  background-position: 0 0, 0 32px, 32px -32px, -32px 0px;
  position: relative;
}
/* drifting glitter dust over the whole page */
body::before{
  content:"";
  position: fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,217,102,0.75) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1.5px);
  background-size: 140px 140px, 190px 190px, 90px 90px;
  background-position: 0 0, 60px 80px, 30px 30px;
  animation: glitterDrift 14s linear infinite;
}
@keyframes glitterDrift{
  0%{ background-position: 0 0, 60px 80px, 30px 30px; }
  100%{ background-position: 140px 140px, 250px 270px, 120px 120px; }
}
nav, main, footer, .page-head, .duo-strip{ position:relative; z-index:2; }
h1,h2,h3,.display{
  font-family:'Baloo 2', cursive;
  font-weight:800;
  color: var(--grape);
  margin:0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 0 14px rgba(255,182,230,0.5);
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* ============ WINDOW CHROME (cute sticker-card look) ============ */
.xp-window{
  background: var(--cream);
  border-radius: 20px;
  border: 3px solid var(--grape);
  box-shadow:
    inset 0 0 0 2px var(--bevel-light),
    4px 4px 0 rgba(123,45,142,0.16),
    0 14px 28px var(--shadow);
  overflow: hidden;
  position: relative;
}
.xp-titlebar{
  background: linear-gradient(180deg, #FFD3EF 0%, #FF8FD6 50%, #FF6EC7 100%);
  color: white;
  font-family:'Baloo 2', cursive;
  font-weight:800;
  font-size: 1rem;
  padding: 11px 18px;
  display:flex; align-items:center;
  text-shadow: 0 1px 1px rgba(107,20,80,0.5);
  border-bottom: 3px solid var(--grape);
  position: relative;
  overflow: hidden;
}
.xp-titlebar::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1.6px);
  background-size: 16px 16px;
  opacity:0.35;
  animation: sparkleTwinkle 2.4s ease-in-out infinite;
  pointer-events:none;
}
.xp-titlebar .xp-title{ display:flex; align-items:center; gap:8px; position:relative; z-index:1; }
.xp-titlebar .xp-title::before{ content:"\2728"; font-size:0.9em; }
.xp-titlebar .xp-title img{ width:20px; height:20px; }
.xp-body{ padding: 24px; }

@keyframes sparkleTwinkle{
  0%, 100%{ opacity:0.2; }
  50%{ opacity:0.55; }
}

/* checkered pattern as an interior fill option (for panels that want the motif inside too) */
.checkered-bg{
  background-image:
    linear-gradient(45deg, var(--pink-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pink-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pink-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pink-soft) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  background-color: var(--cream);
}

/* ============ NAV (taskbar-ish) ============ */
nav{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, #FFD3EF 0%, #FF9AD9 55%, #FF6EC7 100%);
  border-bottom: 3px solid var(--grape);
  box-shadow: 0 3px 0 rgba(123,45,142,0.2), 0 4px 14px rgba(123,45,142,0.25);
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 26px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-size:1.35rem; color:white;
  text-decoration:none;
  text-shadow: 0 1px 1px rgba(107,20,80,0.5);
}
.brand img{
  width:38px; height:38px; border-radius:6px;
  box-shadow: inset 0 0 0 2px white, 0 2px 4px rgba(0,0,0,0.25);
}
nav ul{
  list-style:none; display:flex; align-items:center; gap:10px; margin:0; padding:0;
  font-weight:700; font-size:0.92rem;
}
nav a{ text-decoration:none; color:white; text-shadow:0 1px 1px rgba(107,20,80,0.4); }
nav li > a:not(.nav-cart){
  padding:7px 14px; border-radius:6px;
  transition: background .12s ease;
}
nav li > a:not(.nav-cart):hover{ background: rgba(255,255,255,0.25); }
.nav-cart{
  display:flex; align-items:center; gap:6px;
  background: linear-gradient(180deg, #ffffff, var(--pink-pale));
  border: 2px solid var(--grape); border-radius:8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 2px 2px 0 rgba(123,45,142,0.3);
  padding:6px 14px; font-weight:800; text-decoration:none; color:var(--grape) !important;
  text-shadow:none !important;
}
.nav-cart img{ width:20px; height:20px; }
.cart-count{
  background: var(--pink); color:white; border-radius:999px;
  min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.75rem; padding:0 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Inset (sunken) look for text inputs / selects, to match the chrome */
.sunken, input[type="text"], input[type="email"], select{
  box-shadow: inset 2px 2px 3px rgba(123,45,142,0.2), inset -1px -1px 0 rgba(255,255,255,0.8);
}

/* ============ BUTTONS (glossy, beveled) ============ */
.btn{
  font-family:'Baloo 2', cursive; font-weight:700; font-size:1rem;
  padding: 11px 26px; border-radius: 8px; border: 2px solid var(--grape);
  cursor:pointer; text-decoration:none; display:inline-block;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  background: linear-gradient(180deg, #ffffff 0%, var(--pink-pale) 45%, var(--pink-soft) 100%);
  color: var(--grape);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 0 var(--grape), 0 6px 10px rgba(123,45,142,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(107,20,80,0.35); }
.btn-pink{
  background: linear-gradient(180deg, #FFA6E0 0%, var(--pink) 55%, #E0489E 100%);
  color:white; text-shadow: 0 1px 1px rgba(107,20,80,0.5);
}
.btn-cream{ background: linear-gradient(180deg, #ffffff, var(--cream)); color:var(--grape); text-shadow:none; }
.btn:disabled{ opacity:0.55; cursor:not-allowed; transform:none; filter:none; }

/* ============ LAYOUT ============ */
main{ max-width:1100px; margin:0 auto; padding: 24px 24px 70px; }
.section-head{ text-align:center; margin-bottom:36px; }
.section-head h2{ font-size: clamp(1.7rem, 4vw, 2.4rem); }
.section-head p{ color:#A85BA8; font-weight:600; margin-top:8px; }

footer{
  text-align:center; padding: 40px 20px 60px; color:#8B3F87; font-weight:700; font-size:0.9rem;
  border-top: 3px solid var(--grape);
  background: linear-gradient(180deg, var(--pink-pale), var(--pink-soft));
}
footer a.mailto-footer{
  color: var(--grape); font-weight:800; text-decoration:underline;
}

/* ============ Mascot bubble ============ */
.mascot-bubble{
  display:flex; align-items:flex-start; gap:16px;
  background: var(--cream); border: 2px solid var(--grape); border-radius:12px;
  padding:18px 22px;
  box-shadow: inset 0 0 0 2px var(--bevel-light), 3px 3px 0 rgba(123,45,142,0.2), 0 8px 18px var(--shadow);
  max-width:560px; margin: 0 auto 30px;
}
.mascot-bubble img{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--grape); box-shadow: inset 0 0 0 2px white;
}
.mascot-bubble p{ margin:0; font-weight:600; font-size:0.98rem; }
.mascot-bubble .mascot-name{ font-family:'Baloo 2',cursive; font-weight:700; color:var(--pink); display:block; margin-bottom:4px; }

/* ============ Modal ============ */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(123,45,142,0.45);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background: var(--cream); border-radius:12px; padding:0; max-width:480px; text-align:center;
  border: 2px solid var(--grape);
  box-shadow: inset 0 0 0 2px var(--bevel-light), 0 20px 50px rgba(0,0,0,0.35);
  animation: popIn .2s ease;
  overflow:hidden;
}
@keyframes popIn{ from{ transform: scale(0.9); opacity:0; } to{ transform: scale(1); opacity:1; } }
.modal-body{ padding: 30px 34px; }
.modal img{ width:90px; height:90px; margin:0 auto; border-radius:50%; border:2px solid var(--grape); }
.modal h3{ margin-top:12px; font-size:1.4rem; }
.modal p{ margin-top:10px; color:#A85BA8; font-weight:600; }
.modal .btn{ margin-top:20px; }

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; }
}

.donate-section{
  margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--line); text-align:left;
}
.donate-lead{
  margin-top:0 !important; font-size:0.88rem; text-align:center;
}
.donate-links{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.donate-link{
  display:flex; flex-direction:column; gap:1px;
  background: linear-gradient(180deg,#fff,var(--pink-pale)); border: 2px solid var(--grape);
  border-radius:10px; padding:8px 14px; text-decoration:none; color:var(--grape);
  font-weight:800; font-size:0.9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 2px 2px 0 rgba(123,45,142,0.15);
  transition: transform .08s ease;
}
.donate-link:hover{ transform: translateY(-1px); }
.donate-link:active{ transform: translateY(1px); box-shadow:none; }
.donate-link span{ font-weight:600; font-size:0.76rem; color:#A85BA8; }

/* generic beveled panel, used where a full title bar is overkill */
.bevel-panel{
  background: var(--cream); border: 2px solid var(--grape); border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--bevel-light), 3px 3px 0 rgba(123,45,142,0.2), 0 10px 20px var(--shadow);
}