/* guest_style.css (Dark POS Grid Theme for Guest Menu) */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

:root {
    --font-main: 'Roboto', sans-serif;
    --bg-body: #4a4a4a;
    --bg-panel: #3d3d3d;
    
    /* Light 3D Button (for Categories) */
    --btn-light-bg-start: #e0e0e0;
    --btn-light-bg-end: #c8c8c8;
    --btn-light-shadow-dark: #353535;
    --btn-light-shadow-light: #707070;
    --btn-light-text: #222;

    /* Dark 3D Button (for Items) */
    --btn-dark-bg-start: #5a5a5a;
    --btn-dark-bg-end: #404040;
    --btn-dark-shadow-dark: #2a2a2a;
    --btn-dark-shadow-light: #6a6a6a;
    --btn-dark-text: #e0e0e0;

    /* General Text & Borders */
    --text-on-dark-panel: #e0e0e0;
    --border-light: #555555;

    --color-primary: #5eead4;         /* teal glow */
--color-primary-2: #60a5fa;       /* blue edge */
--color-text-body: #f3f6fc;
--color-text-muted: #b8c2d6;
--color-border: rgba(255,255,255,.14);
--glass-1: rgba(255,255,255,.06);
--glass-2: rgba(255,255,255,.02);

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body{
  font-family: var(--font-main);
  background:
    radial-gradient(1000px 600px at 20% -10%, #1a2337 0%, transparent 60%),
    radial-gradient(800px 500px at 110% 0%, #0e2a29 0%, transparent 60%),
    var(--bg-body);
  color: var(--text-on-dark-panel);
  line-height: 1.5;
}


.menu-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--bg-panel);
    border-radius: 15px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);
}

/* No large header needed for this design */
header { display: none; }
/* === NEW CREATIVE CATEGORY STYLES (in guest_style.css) === */

/* The header for the category section */
.category-header {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* The container for the category buttons */
/* REPLACE .category-nav {...} with: */
.category-nav{
  display:flex; flex-wrap:wrap;
  gap:14px 14px;
  justify-content:center;
  margin-bottom:36px;
  padding:18px 6px 24px;
  border-bottom:1px solid var(--color-border);
}


/* The new category button style */
/* REPLACE .category-btn {...} with: */
.category-btn{
  --tile-w: 140px; --tile-h: 80px;
  width: var(--tile-w); height: var(--tile-h);
  border:none; cursor:pointer; position:relative; isolation:isolate;
  border-radius:16px;
  background:
    linear-gradient(145deg,var(--glass-1),var(--glass-2));
  color: var(--color-text-muted);
  font-family: var(--font-main);
  font-weight:700; font-style:italic; letter-spacing:.3px;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 22px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}


/* The text inside the button */
.category-btn span{
  display:grid; place-items:center;
  width:100%; height:100%;
  padding:0 10px; text-align:center;
}
/* The underline effect on hover/active */
/* +++ ADD: neon edge and ambient glow +++ */
.category-btn::before{
  content:""; position:absolute; inset:0; border-radius:16px;
  background: radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), transparent 35%),
              linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none; z-index:-1;
}
.category-btn::after{
  content:""; position:absolute; inset:-2px; border-radius:18px;
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-2));
  opacity:.25; filter: blur(10px);
  z-index:-2; transition: opacity .18s ease, filter .18s ease;
}


/* REPLACE .category-btn:hover {...} and .category-btn.active {...} and ::after underline rules with: */
.category-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 30px rgba(0,0,0,.45);
  color: var(--color-text-body);
}
.category-btn:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.category-btn.active{
  color:#ffffff;
}
.category-btn.active::after,
.category-btn:hover::after{
  opacity:.6; filter: blur(14px);
}
.category-btn:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(94,234,212,.35), 0 10px 24px rgba(0,0,0,.45);
}

#item-display{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:14px;
  align-content:start;
}




/* REPLACE .menu-item {...} with: */
.menu-item{
  min-height:72px; /* per your 140×72 spec */
  padding:10px; line-height:1.25; font-size:.95rem; font-weight:600;
  border:none; border-radius:12px; display:flex; justify-content:center; align-items:center; text-align:center;
  background: linear-gradient(160deg, var(--btn-dark-bg-start), var(--btn-dark-bg-end));
  color: var(--btn-dark-text);
  box-shadow: 3px 3px 6px var(--btn-dark-shadow-dark), -2px -2px 6px var(--btn-dark-shadow-light);
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-item:hover{ transform: translateY(-1px); box-shadow: 6px 6px 12px var(--btn-dark-shadow-dark), -3px -3px 10px var(--btn-dark-shadow-light); }


.item-name {
    /* No specific extra styling needed, inherits from .menu-item */
}


.item-price {
    font-weight: normal;
    font-size: 0.9em;
    margin-top: 5px;
    color: #b0b0b0; /* Lighter grey for price */
}

/* For loading and error messages */
.loading, .error, .info {
    grid-column: 1 / -1; /* Make message span all columns */
    text-align: center;
    padding: 40px;
    font-size: 1.1rem;
    color: #aaa;
}
.error {
    color: #ff8a8a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .menu-container {
        padding: 15px;
    }
  /* In @media (max-width: 480px) replace #item-display and .category-nav gaps: */
#item-display{ grid-template-columns: repeat(2, 1fr); gap:12px; }
.category-nav{ gap:10px 10px; }

}

@media (max-width: 480px) {
    .menu-container {
        padding: 10px;
        margin: 10px;
    }
    .category-nav {
        gap: 8px;
    }
    .category-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
        height: 40px;
    }
    #item-display {
        grid-template-columns: repeat(2, 1fr); /* Always 2 columns on small mobile */
        gap: 10px;
    }
    .menu-item {
        min-height: 70px;
        font-size: 0.9rem;
    }
}

/* +++ ADD: respect user reduced-motion +++ */
@media (prefers-reduced-motion: reduce){
  .category-btn, .menu-item{ transition: none; }
}