/* ============================================================
   TasteCraviing — main.css
   Shared styles extracted from all 5 HTML pages.
   Load this on every page via <link rel="stylesheet" href="css/main.css" />
   ============================================================ */

/* ----------------------------------------------------------
   1. GOOGLE FONTS IMPORT
      (Optional: move font @imports here instead of HTML)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   2. MATERIAL SYMBOLS — Base variation settings
      Duplicated on all 5 pages, now unified here.
   ---------------------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ----------------------------------------------------------
   3. ANIMATIONS
      Source: index.html
   ---------------------------------------------------------- */
@keyframes floating {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.float-anim {
    animation: floating 3s ease-in-out infinite;
}

.offset-image {
    transform: translate(20px, -20px);
}

/* ----------------------------------------------------------
   4. GLOW / SHADOW UTILITIES
      Renamed to avoid the class-name conflict between
      about.html (background gradient) and menu.html (box-shadow).
   ---------------------------------------------------------- */

/* index.html + offers.html */
.neon-glow {
    text-shadow: 0 0 10px rgba(176, 0, 74, 0.4);
}

/* about.html — was ".neon-glow-primary", renamed to avoid conflict */
.neon-bg-primary {
    background: linear-gradient(135deg, #b0004a 0%, #d81b60 100%);
}

/* menu.html — was ".neon-glow-primary", renamed to avoid conflict */
.neon-box-shadow {
    box-shadow: 0 0 15px rgba(176, 0, 74, 0.2);
}

/* contact.html */
.neon-shadow:hover {
    box-shadow: 0 0 32px 0 rgba(176, 0, 74, 0.15);
}

.glowing-btn {
    position: relative;
    background: #b0004a;
    box-shadow: 0 0 20px rgba(176, 0, 74, 0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

.glowing-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 30px rgba(176, 0, 74, 0.6);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.glowing-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 35px rgba(176, 0, 74, 0.7);
}

.glowing-btn:hover::after {
    opacity: 1;
}

.glowing-btn {
    animation: dreamy-glow 3s infinite;
}

@keyframes dreamy-glow {
    0% { box-shadow: 0 0 15px rgba(176, 0, 74, 0.4); }
    50% { box-shadow: 0 0 30px rgba(176, 0, 74, 0.7); }
    100% { box-shadow: 0 0 15px rgba(176, 0, 74, 0.4); }
}

/* ----------------------------------------------------------
   4b. GLOWING TAG UTILITY
   Used for category highlights in menu.html.
   ---------------------------------------------------------- */
.glowing-tag {
    position: relative;
    background: #b0004a !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(176, 0, 74, 0.5);
    animation: tag-dreamy-glow 3s infinite;
    transition: all 0.3s ease;
}

.glowing-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(176, 0, 74, 0.8);
}

@keyframes tag-dreamy-glow {
    0% { box-shadow: 0 0 10px rgba(176, 0, 74, 0.3); }
    50% { box-shadow: 0 0 25px rgba(176, 0, 74, 0.6); }
    100% { box-shadow: 0 0 10px rgba(176, 0, 74, 0.3); }
}

/* ----------------------------------------------------------
   5. GLASS HEADER
      Source: about.html + contact.html (identical)
   ---------------------------------------------------------- */
.glass-header {
    background: rgba(255, 249, 234, 0.8);
    backdrop-filter: blur(20px);
}

/* ----------------------------------------------------------
   6. TYPOGRAPHY HELPERS
      Source: about.html
   ---------------------------------------------------------- */
.serif-tight {
    font-family: 'Noto Serif', serif;
    letter-spacing: -0.02em;
}

.sans-modern {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ----------------------------------------------------------
   7. SCROLLBAR HIDE UTILITY
      Source: menu.html  
   ---------------------------------------------------------- */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ----------------------------------------------------------
   8. OFFERS PAGE UTILITIES
      Source: offers.html
   ---------------------------------------------------------- */
.asymmetric-clip {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}

.grain-texture {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuB4NBpmY1YdlHwUnq4i_mhDnY72Gn-AhgKm-Ykd-Hn50YfAkL0VIoveE5D76eWpiJht4qQHpgudZoCFZJXW-Ci9-36PlAeOphhq0CIDj0oPju7enNVdvf84zrjKoF8gDXVa7XZ70QX2Zp4EqfuijPp_eYuY0_MNYUCApBDQnJ9x_PNTXs4Bm_NYZQFJyi9BfW2UmDavl88E5-9Jnh40yh0PteqcKMbmtZqQOalJaTa_y1mr6xbgY4JKKVdSd2JZgiZgFVYYMa0x95E);
    opacity: 0.03;
}

/* ----------------------------------------------------------
   9. MOBILE NAVIGATION DRAWER
      Used by main.js to open/close hamburger nav on all pages.
   ---------------------------------------------------------- */
#mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff9ea;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
}

#mobile-nav.open {
    transform: translateX(0);
}

#mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

#mobile-nav-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

#mobile-nav .nav-link {
    font-family: 'Noto Serif', serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #715400;
    text-decoration: none;
    transition: color 0.2s;
}

#mobile-nav .nav-link:hover,
#mobile-nav .nav-link.active {
    color: #b0004a;
}

/* ----------------------------------------------------------
   10. TOAST NOTIFICATION
       Used by contact form success feedback (main.js)
   ---------------------------------------------------------- */
#toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #b0004a;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    z-index: 999;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(176, 0, 74, 0.3);
}

#toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ----------------------------------------------------------
   11. CART BUTTON FEEDBACK
       Visual feedback when item added to cart
   ---------------------------------------------------------- */
.add-btn.added {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   12. SHIMMER CARD ANIMATION
       Used by bento-grid offer cards on offers.html
   ---------------------------------------------------------- */
.shimmer-card {
    position: relative;
    overflow: hidden;
}
.shimmer-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 50;
}
.shimmer-card:hover::after {
    left: 150%;
}

/* ----------------------------------------------------------
   13. SMOOTH TRANSITIONS — Global base
   ---------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}