/* ════════════════════════════════════════════════
   مقاهي جوهرة الأوائل — Jawaharat Al-Awael Cafes
   CSS Main Stylesheet
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Amiri:wght@400;700&display=swap');

/* ── CSS Variables ── */
:root {
    --cafe-dark-brown: #2A1E1A;
    --cafe-brown:      #3D2E27;
    --cafe-gold:       #C9A96E;
    --cafe-gold-light: #DFC08A;
    --cafe-gold-dark:  #A8854A;
    --cafe-cream:      #F8F4EF;
    --cafe-beige:      #E8DCCF;
    --cafe-beige-dark: #D4C4B0;
    --cafe-white:      #ffffff;
    --cafe-charcoal:   #1A1A1A;
    --cafe-text:       rgba(42, 30, 26, 0.85);
    --cafe-text-light: rgba(42, 30, 26, 0.6);

    --shadow-sm:  0 2px 8px rgba(42,30,26,.08);
    --shadow-md:  0 4px 20px rgba(42,30,26,.12);
    --shadow-lg:  0 8px 40px rgba(42,30,26,.18);
    --shadow-xl:  0 16px 60px rgba(42,30,26,.24);
    --shadow-gold: 0 4px 20px rgba(201,169,110,.35);

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    --transition: all 0.3s cubic-bezier(.4,0,.2,1);
    --nav-h: 88px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Tajawal', -apple-system, sans-serif;
    background-color: var(--cafe-cream);
    color: var(--cafe-text);
    line-height: 1.7;
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; font-family:inherit; }
ul { list-style:none; }

/* ── Container ── */
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }

/* ════════════════
   HEADER / NAVBAR
   ════════════════ */
.cafe-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: var(--transition);
}

.cafe-topbar {
    background: var(--cafe-dark-brown);
    color: var(--cafe-cream);
    padding: 0.5rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(201,169,110,.15);
}
.cafe-topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.topbar-left { display:flex; gap:1.5rem; align-items:center; }
.topbar-left a {
    display:flex; align-items:center; gap:0.4rem;
    color: var(--cafe-cream);
    transition: var(--transition);
}
.topbar-left a:hover { color: var(--cafe-gold); }
.topbar-center {
    flex:1; text-align:center;
    color: var(--cafe-gold);
    font-size: 0.8rem;
    font-weight: 500;
}

.cafe-navbar {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.85rem 0;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.cafe-navbar.scrolled {
    box-shadow: var(--shadow-md);
    padding: 0.65rem 0;
}
.cafe-navbar .container {
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
}

/* Logo */
.cafe-logo {
    display:flex; align-items:center; gap:0.75rem;
    text-decoration:none;
}
.cafe-logo-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--cafe-gold), var(--cafe-dark-brown));
    border-radius: var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:1.4rem; font-weight:900;
    box-shadow: var(--shadow-gold);
    flex-shrink:0;
}
.cafe-logo-text { line-height:1.2; }
.cafe-logo-text h1 { font-size:1.15rem; font-weight:800; color:var(--cafe-dark-brown); margin:0; }
.cafe-logo-text p  { font-size:0.7rem; color:var(--cafe-gold); margin:0; font-weight:500; letter-spacing:.5px; }

/* Nav Links */
.cafe-nav-links {
    display:flex; gap:0.15rem; align-items:center;
}
.cafe-nav-links a {
    padding: 0.45rem 0.85rem;
    color: var(--cafe-dark-brown);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
}
.cafe-nav-links a:hover,
.cafe-nav-links a.active { color: var(--cafe-gold); background: rgba(201,169,110,.08); }

/* Nav Buttons */
.cafe-nav-end { display:flex; gap:0.75rem; align-items:center; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
    padding: 0.55rem 1.4rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
}
.btn-outline {
    border: 2px solid var(--cafe-gold);
    color: var(--cafe-gold);
    background: transparent;
}
.btn-outline:hover { background:var(--cafe-gold); color:white; }

.btn-primary {
    background: linear-gradient(135deg, var(--cafe-gold), var(--cafe-gold-dark));
    color: white;
    border: 2px solid transparent;
    box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--cafe-dark-brown), var(--cafe-brown));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-dark {
    background: var(--cafe-dark-brown);
    color: white;
    border: 2px solid transparent;
}
.btn-dark:hover { background: var(--cafe-brown); }

/* Hamburger */
.cafe-menu-toggle {
    display:none; flex-direction:column; gap:5px;
    background:transparent; padding:6px; border-radius:6px;
}
.cafe-menu-toggle span {
    display:block; width:24px; height:2px;
    background:var(--cafe-dark-brown); border-radius:2px;
    transition:var(--transition);
}

/* Mobile Sidebar */
.cafe-sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.6); z-index:1998;
    opacity:0; transition:opacity .3s;
}
.cafe-sidebar-overlay.open { display:block; opacity:1; }

.cafe-sidebar {
    position:fixed; top:0; right:-320px; bottom:0;
    width:300px; background:var(--cafe-dark-brown);
    z-index:1999; transition:right .35s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; overflow-y:auto;
}
.cafe-sidebar.open { right:0; }

.sb-header {
    padding:2rem 1.5rem 1.5rem;
    border-bottom:1px solid rgba(201,169,110,.2);
}
.sb-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.sb-logo-icon { width:44px;height:44px;background:linear-gradient(135deg,var(--cafe-gold),var(--cafe-gold-dark));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:white;font-size:1.3rem;font-weight:900; }
.sb-logo-text h3 { color:white;font-size:1rem;font-weight:800;margin:0; }
.sb-logo-text p  { color:var(--cafe-gold);font-size:.7rem;margin:0; }

.sb-close {
    position:absolute; top:1rem; left:1rem;
    width:34px;height:34px;background:rgba(255,255,255,.1);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:white;
    font-size:1.1rem;transition:var(--transition);
}
.sb-close:hover { background:rgba(255,255,255,.2); }

.sb-nav { padding:1rem; flex:1; }
.sb-link {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1rem; color:var(--cafe-beige);
    border-radius:var(--radius-sm); font-size:.9rem; font-weight:500;
    transition:var(--transition); margin-bottom:.25rem;
}
.sb-link:hover, .sb-link.active { background:rgba(201,169,110,.15); color:var(--cafe-gold); }

.sb-footer {
    padding:1.5rem;
    border-top:1px solid rgba(201,169,110,.2);
}
.sb-cta {
    display:block; width:100%; padding:.75rem;
    background:linear-gradient(135deg,var(--cafe-gold),var(--cafe-gold-dark));
    color:white; font-weight:700; text-align:center;
    border-radius:var(--radius-sm); margin-bottom:.75rem;
    box-shadow:var(--shadow-gold);
}
.sb-phone {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    color:var(--cafe-beige); font-size:.85rem;
}

/* ════════════
   HERO SECTION
   ════════════ */
.cafe-hero {
    min-height: 100vh;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(145deg, var(--cafe-dark-brown) 0%, #3D2E27 50%, var(--cafe-dark-brown) 100%);
    color: white;
    padding: calc(var(--nav-h) + 3rem) 1.5rem 5rem;
    position:relative; overflow:hidden;
}

.cafe-hero::before {
    content:'';
    position:absolute; top:10%; right:-5%;
    width:400px; height:400px;
    background:var(--cafe-gold);
    border-radius:50%; filter:blur(120px); opacity:.08;
    pointer-events:none;
}
.cafe-hero::after {
    content:'';
    position:absolute; bottom:5%; left:-5%;
    width:500px; height:500px;
    background:var(--cafe-gold);
    border-radius:50%; filter:blur(150px); opacity:.06;
    pointer-events:none;
}

.hero-grain {
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
    opacity:.4; pointer-events:none;
}

.hero-container { position:relative; z-index:2; width:100%; }

.hero-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:4rem; align-items:center;
}

.hero-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(201,169,110,.15);
    backdrop-filter:blur(10px);
    border:1px solid rgba(201,169,110,.3);
    padding:.5rem 1rem; border-radius:2rem;
    color:var(--cafe-gold); font-size:.85rem; font-weight:600;
    margin-bottom:1.5rem;
}

.cafe-hero h1 {
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -.5px;
}
.cafe-hero h1 span { color: var(--cafe-gold); }

.hero-subtitle {
    font-size: 1.35rem;
    color: var(--cafe-beige);
    margin-bottom: 1rem;
    font-weight: 500;
}

.hero-desc {
    font-size: 1rem;
    color: rgba(232,220,207,.75);
    margin-bottom: 2.5rem;
    max-width: 480px;
    line-height: 1.8;
}

.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }

.hero-stats {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:.5rem; max-width:400px;
    padding: 1.5rem;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    border-radius:var(--radius-lg);
    border:1px solid rgba(201,169,110,.15);
}
.hero-stat { text-align:center; padding:.5rem; }
.hero-stat:nth-child(2) {
    border-left:1px solid rgba(201,169,110,.2);
    border-right:1px solid rgba(201,169,110,.2);
}
.hero-stat-num { font-size:1.9rem; font-weight:900; color:var(--cafe-gold); line-height:1; }
.hero-stat-lbl { font-size:.75rem; color:var(--cafe-beige); margin-top:.25rem; }

/* Hero Visual */
.hero-visual {
    display:flex; justify-content:center; align-items:center;
}
.hero-card {
    width:100%; max-width:440px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(16px);
    border:1px solid rgba(201,169,110,.2);
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.hero-card-visual {
    height:380px;
    background:linear-gradient(145deg, rgba(201,169,110,.15), rgba(42,30,26,.5));
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
.hero-card-icon { opacity:.2; }
.hero-card-overlay {
    position:absolute; bottom:0; left:0; right:0;
    padding:2rem;
    background:linear-gradient(to top, rgba(42,30,26,.9), transparent);
    text-align:center;
}
.hero-card-overlay h3 { font-size:1.6rem; font-weight:800; color:white; }
.hero-card-overlay p  { color:var(--cafe-gold); font-size:.875rem; margin-top:.5rem; }

/* ════════════════
   SECTIONS COMMON
   ════════════════ */
.cafe-section { padding:5rem 0; }
.cafe-section-sm { padding:3rem 0; }
.bg-cream { background:var(--cafe-cream); }
.bg-white { background:white; }
.bg-dark  { background:linear-gradient(145deg,var(--cafe-dark-brown),var(--cafe-brown)); }

.section-header { text-align:center; margin-bottom:3.5rem; }
.section-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(201,169,110,.1);
    padding:.4rem 1rem; border-radius:2rem;
    margin-bottom:1rem;
}
.section-badge span { font-size:.8rem; color:var(--cafe-gold); font-weight:600; }

.section-title {
    font-size:clamp(1.8rem,3vw,2.8rem);
    font-weight:800; color:var(--cafe-dark-brown);
    margin-bottom:.75rem; line-height:1.2;
}
.section-title.light { color:white; }
.section-title span  { color:var(--cafe-gold); }

.section-desc {
    font-size:1rem; color:var(--cafe-text-light);
    max-width:600px; margin:0 auto; line-height:1.8;
}
.section-desc.light { color:rgba(232,220,207,.8); }

/* ════════════
   CARDS GRID
   ════════════ */
.cards-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:1.75rem;
}
.cards-grid-2 { grid-template-columns:repeat(auto-fill, minmax(400px,1fr)); }
.cards-grid-4 { grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); }

.cafe-card {
    background:white;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:2px solid var(--cafe-beige);
    transition:var(--transition);
}
.cafe-card:hover {
    box-shadow:var(--shadow-lg);
    border-color:var(--cafe-gold);
    transform:translateY(-6px);
}

.card-img {
    height:220px;
    background:linear-gradient(145deg, var(--cafe-dark-brown), var(--cafe-brown));
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.card-img img { width:100%;height:100%;object-fit:cover; transition:transform .5s; }
.cafe-card:hover .card-img img { transform:scale(1.06); }

.card-img-overlay {
    position:absolute; bottom:0; left:0; right:0;
    padding:1.25rem;
    background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
    z-index:2;
}
.card-img-overlay h3 { color:white; font-size:1.25rem; font-weight:700; }
.card-img-overlay p  { color:rgba(255,255,255,.8); font-size:.8rem; margin-top:.25rem; }

.card-badge {
    position:absolute; top:1rem; right:1rem;
    background:var(--cafe-gold); color:white;
    padding:.3rem .8rem; border-radius:2rem;
    font-size:.72rem; font-weight:700; z-index:3;
    letter-spacing:.5px;
}
.card-badge.new { background:#16a34a; }
.card-badge.hot { background:#dc2626; }

.card-body { padding:1.5rem; }
.card-info {
    display:flex; justify-content:space-between; align-items:center;
    font-size:.8rem; color:var(--cafe-text-light);
    margin-bottom:1rem; padding-bottom:1rem;
    border-bottom:1px solid var(--cafe-beige);
}
.card-info span { display:flex; align-items:center; gap:.35rem; }

.card-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.tag {
    padding:.25rem .7rem;
    background:var(--cafe-cream); color:var(--cafe-dark-brown);
    border-radius:2rem; font-size:.72rem; font-weight:500;
}
.tag-gold { background:rgba(201,169,110,.15); color:var(--cafe-gold-dark); }

.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.card-rooms {
    background:var(--cafe-cream);
    border-radius:var(--radius-sm);
    padding:.75rem;
    display:flex; justify-content:space-between; align-items:center;
    font-size:.82rem; margin-bottom:1rem;
}
.card-rooms strong { color:var(--cafe-gold); font-weight:700; }

/* ════════════════
   QUICK FEATURES
   ════════════════ */
.features-strip {
    padding:3rem 0;
    background:white;
    border-top:3px solid var(--cafe-gold);
}
.features-strip-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:2rem;
}
.feature-item { text-align:center; padding:1.5rem 1rem; }
.feature-icon {
    width:70px; height:70px;
    background:rgba(201,169,110,.1);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1rem;
}
.feature-item h4 { font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.feature-item p  { font-size:.82rem; color:var(--cafe-text-light); }

/* ════════════════
   MENU / PRODUCTS
   ════════════════ */
.cafe-tabs {
    display:flex; flex-wrap:wrap; gap:.75rem;
    justify-content:center; margin-bottom:3rem;
}
.cafe-tab {
    display:flex; align-items:center; gap:.5rem;
    padding:.65rem 1.5rem;
    border-radius:var(--radius-sm);
    background:var(--cafe-cream); color:var(--cafe-dark-brown);
    font-weight:600; font-size:.875rem;
    transition:var(--transition); border:2px solid var(--cafe-beige);
}
.cafe-tab:hover { border-color:var(--cafe-gold); color:var(--cafe-gold); }
.cafe-tab.active {
    background:var(--cafe-gold);
    color:white; border-color:transparent;
    box-shadow:var(--shadow-gold);
}

.menu-item-card {
    background:white;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--cafe-beige);
    transition:var(--transition);
    display:flex; gap:0;
}
.menu-item-card:hover { box-shadow:var(--shadow-md); border-color:var(--cafe-gold); }
.menu-item-img {
    width:120px; flex-shrink:0;
    background:linear-gradient(145deg,var(--cafe-cream),var(--cafe-beige));
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.menu-item-img img { width:100%; height:100%; object-fit:cover; }
.menu-item-body { padding:1.25rem; flex:1; }
.menu-item-body h4 { font-size:1rem; font-weight:700; margin-bottom:.3rem; }
.menu-item-body p  { font-size:.82rem; color:var(--cafe-text-light); line-height:1.6; }
.menu-item-footer {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:.75rem; padding-top:.75rem;
    border-top:1px dashed var(--cafe-beige);
}
.menu-price { font-size:1rem; font-weight:800; color:var(--cafe-gold); }

/* ════════════════
   PACKAGES / OFFERS
   ════════════════ */
.packages-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
    gap:2rem;
}
.package-card {
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    border:1px solid rgba(201,169,110,.2);
    border-radius:var(--radius-xl);
    padding:2.5rem 2rem;
    text-align:center;
    position:relative; overflow:hidden;
    transition:var(--transition);
    color:white;
}
.package-card:hover {
    transform:translateY(-8px);
    border-color:var(--cafe-gold);
    box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.package-card.popular {
    border-color:var(--cafe-gold);
    background:rgba(201,169,110,.12);
}
.package-card .badge-tag {
    display:inline-block;
    background:var(--cafe-gold);
    color:white; padding:.3rem .9rem; border-radius:2rem;
    font-size:.72rem; font-weight:700; margin-bottom:1rem;
    letter-spacing:.5px;
}
.package-card h3 { font-size:1.3rem; font-weight:800; margin-bottom:1rem; }
.package-price { font-size:2.5rem; font-weight:900; color:var(--cafe-gold); }
.package-price span { font-size:1rem; font-weight:500; }
.package-items { margin:1.5rem 0; text-align:right; }
.package-item {
    display:flex; align-items:center; gap:.6rem;
    padding:.5rem 0; font-size:.875rem; color:rgba(255,255,255,.85);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.package-item:last-child { border:none; }
.package-item svg { color:var(--cafe-gold); flex-shrink:0; }

/* ════════════════
   TESTIMONIALS
   ════════════════ */
.testimonials-section { background:linear-gradient(145deg,var(--cafe-dark-brown),var(--cafe-brown)); padding:5rem 0; }
.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:1.75rem;
}
.testimonial-card {
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(10px);
    border:1px solid rgba(201,169,110,.15);
    border-radius:var(--radius-lg);
    padding:2rem;
    transition:var(--transition);
}
.testimonial-card:hover { border-color:rgba(201,169,110,.4); transform:translateY(-4px); }
.testimonial-stars { color:var(--cafe-gold); font-size:1.1rem; margin-bottom:.75rem; letter-spacing:2px; }
.testimonial-text {
    color:rgba(255,255,255,.85); font-size:.9rem; line-height:1.8;
    margin-bottom:1.25rem; font-style:italic;
}
.testimonial-author { display:flex; align-items:center; gap:.75rem; }
.author-avatar {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,var(--cafe-gold),var(--cafe-gold-dark));
    display:flex; align-items:center; justify-content:center;
    color:white; font-weight:700; font-size:1rem; flex-shrink:0;
    overflow:hidden;
}
.author-avatar img { width:100%;height:100%;object-fit:cover; }
.author-name { color:white; font-weight:700; font-size:.9rem; }
.author-title{ color:var(--cafe-gold); font-size:.75rem; }

/* ════════════
   FAQ
   ════════════ */
.faq-list { max-width:860px; margin:0 auto; }
.faq-item {
    background:white;
    border-radius:var(--radius-md);
    border:1.5px solid var(--cafe-beige);
    margin-bottom:1rem;
    overflow:hidden;
    transition:var(--transition);
}
.faq-item:hover { border-color:var(--cafe-gold); }
.faq-question {
    width:100%; padding:1.25rem 1.5rem;
    display:flex; justify-content:space-between; align-items:center;
    background:transparent; color:var(--cafe-dark-brown);
    font-weight:700; font-size:.95rem; cursor:pointer;
    transition:var(--transition);
}
.faq-question .faq-icon {
    width:28px;height:28px;
    background:rgba(201,169,110,.1); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--cafe-gold); font-size:1.1rem; flex-shrink:0;
    transition:var(--transition);
}
.faq-question.open { color:var(--cafe-gold); }
.faq-question.open .faq-icon { background:var(--cafe-gold); color:white; transform:rotate(45deg); }
.faq-answer {
    max-height:0; overflow:hidden;
    padding:0 1.5rem;
    color:var(--cafe-text-light); font-size:.88rem; line-height:1.8;
    transition:max-height .35s ease, padding .25s;
}
.faq-answer.open { max-height:500px; padding:0 1.5rem 1.25rem; }

/* ════════════
   BLOG POSTS
   ════════════ */
.blog-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:1.75rem;
}
.blog-card {
    background:white;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1.5px solid var(--cafe-beige);
    transition:var(--transition);
}
.blog-card:hover { box-shadow:var(--shadow-lg); border-color:var(--cafe-gold); transform:translateY(-4px); }
.blog-img-wrap { position:relative; height:200px; overflow:hidden; }
.blog-img-wrap img { width:100%;height:100%;object-fit:cover; transition:transform .5s; }
.blog-card:hover .blog-img-wrap img { transform:scale(1.05); }
.blog-img-placeholder { width:100%;height:100%;background:linear-gradient(145deg,var(--cafe-dark-brown),var(--cafe-brown));display:flex;align-items:center;justify-content:center; }
.blog-category-tag {
    position:absolute; top:.75rem; right:.75rem;
    background:var(--cafe-gold);color:white;
    padding:.2rem .65rem;border-radius:2rem;font-size:.72rem;font-weight:700;
}
.blog-body { padding:1.5rem; }
.blog-meta-row { display:flex; gap:1rem; font-size:.75rem; color:var(--cafe-text-light); margin-bottom:.75rem; }
.blog-title { font-size:1.05rem; font-weight:700; margin-bottom:.6rem; color:var(--cafe-dark-brown); line-height:1.4; }
.blog-excerpt { font-size:.82rem; color:var(--cafe-text-light); line-height:1.7; margin-bottom:1rem; }
.blog-read-more { display:inline-flex; align-items:center; gap:.4rem; color:var(--cafe-gold); font-size:.82rem; font-weight:700; }

/* ════════════════
   BRANCHES
   ════════════════ */
.branches-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
    gap:2rem;
}

/* ════════════
   PRIVATE ROOMS
   ════════════ */
.rooms-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(340px,1fr));
    gap:2rem;
}
.room-card {
    background:white;
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    border:2px solid var(--cafe-beige);
    transition:var(--transition);
}
.room-card:hover { border-color:var(--cafe-gold); transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.room-img { height:260px; overflow:hidden; position:relative; }
.room-img img { width:100%;height:100%;object-fit:cover;transition:transform .6s; }
.room-card:hover .room-img img { transform:scale(1.07); }
.room-body { padding:2rem; }
.room-capacity {
    display:inline-flex; align-items:center; gap:.4rem;
    background:rgba(201,169,110,.1); color:var(--cafe-gold-dark);
    padding:.3rem .8rem; border-radius:2rem; font-size:.8rem; font-weight:600;
    margin-bottom:1rem;
}
.room-body h3 { font-size:1.3rem; font-weight:800; margin-bottom:.5rem; }
.room-body p  { font-size:.875rem; color:var(--cafe-text-light); line-height:1.8; margin-bottom:1.25rem; }
.room-features { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.room-price { font-size:1.3rem; font-weight:900; color:var(--cafe-gold); margin-bottom:1.25rem; }

/* ════════════════
   SHISHA
   ════════════════ */
.shisha-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
    gap:1.5rem;
}
.shisha-card {
    background:rgba(255,255,255,.06);
    border:1px solid rgba(201,169,110,.2);
    border-radius:var(--radius-lg);
    padding:2rem 1.5rem;
    text-align:center;
    transition:var(--transition);
    color:white;
}
.shisha-card:hover { border-color:var(--cafe-gold); transform:translateY(-4px); background:rgba(201,169,110,.08); }
.shisha-icon { font-size:3rem; margin-bottom:1rem; }
.shisha-card h4 { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.shisha-card p  { font-size:.82rem; color:rgba(255,255,255,.7); line-height:1.7; }
.shisha-price { font-size:1.1rem; font-weight:800; color:var(--cafe-gold); margin-top:.75rem; }

/* ════════════
   CTA SECTION
   ════════════ */
.cafe-cta {
    background:linear-gradient(145deg,var(--cafe-dark-brown),var(--cafe-brown));
    padding:5rem 0; text-align:center; color:white;
}
.cafe-cta h2 { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; margin-bottom:1rem; }
.cafe-cta p  { font-size:1.05rem; color:var(--cafe-beige); margin-bottom:2rem; max-width:600px; margin-left:auto; margin-right:auto; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ════════════
   BOOKING MODAL
   ════════════ */
.cafe-modal {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:1rem;
}
.cafe-modal.open { display:flex; }

.modal-content {
    background:white;
    border-radius:var(--radius-xl);
    max-width:680px; width:100%;
    max-height:90vh; overflow-y:auto;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    animation:modalSlide .3s cubic-bezier(.4,0,.2,1);
}
@keyframes modalSlide {
    from { opacity:0; transform:translateY(-20px) scale(.97); }
    to   { opacity:1; transform:none; }
}

.modal-header {
    background:linear-gradient(135deg,var(--cafe-dark-brown),var(--cafe-brown));
    color:white; padding:1.75rem 2rem;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    display:flex; justify-content:space-between; align-items:center;
}
.modal-header h2 { font-size:1.4rem; font-weight:800; margin-bottom:.2rem; }
.modal-header p  { font-size:.82rem; color:var(--cafe-beige); }

.modal-close {
    width:38px;height:38px;
    background:rgba(255,255,255,.12); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:1.2rem; transition:var(--transition);
}
.modal-close:hover { background:rgba(255,255,255,.22); }

.modal-body { padding:2rem; }

/* Forms */
.form-group { margin-bottom:1.5rem; }
.form-label { display:block; font-weight:600; font-size:.875rem; margin-bottom:.5rem; color:var(--cafe-dark-brown); }
.form-control {
    width:100%; padding:.75rem 1rem;
    background:var(--cafe-cream);
    border:2px solid var(--cafe-beige);
    border-radius:var(--radius-sm);
    font-family:inherit; font-size:.875rem;
    color:var(--cafe-dark-brown);
    transition:var(--transition);
}
.form-control:focus { outline:none; border-color:var(--cafe-gold); background:white; }
textarea.form-control { resize:vertical; min-height:100px; }
select.form-control option { background:white; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-grid-3 { grid-template-columns:repeat(3,1fr); }

.form-actions { display:flex; gap:.75rem; padding-top:.75rem; }
.form-actions .btn { flex:1; }

/* ════════════
   PAGE HEADER
   ════════════ */
.page-header {
    background:linear-gradient(145deg,var(--cafe-dark-brown),var(--cafe-brown));
    padding:calc(var(--nav-h) + 3rem) 0 4rem;
    text-align:center; color:white;
    position:relative; overflow:hidden;
}
.page-header::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A96E' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-header h1 { font-size:clamp(1.8rem,3.5vw,3rem); font-weight:900; margin-bottom:.75rem; position:relative; }
.page-header p   { color:var(--cafe-beige); font-size:1.05rem; position:relative; max-width:600px; margin:0 auto 1.25rem; }

.breadcrumb {
    display:flex; align-items:center; gap:.5rem; justify-content:center;
    font-size:.8rem; color:rgba(232,220,207,.7); position:relative;
}
.breadcrumb a { color:var(--cafe-gold); }
.breadcrumb a:hover { text-decoration:underline; }

/* ════════════════
   ABOUT / CONTACT
   ════════════════ */
.contact-card {
    background:white;
    border-radius:var(--radius-lg);
    padding:2rem;
    box-shadow:var(--shadow-sm);
    border:1.5px solid var(--cafe-beige);
}
.contact-icon {
    width:48px;height:48px;
    background:rgba(201,169,110,.1); border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:1rem;
}
.contact-card h4 { font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.contact-card p, .contact-card a { font-size:.875rem; color:var(--cafe-text-light); }
.contact-card a:hover { color:var(--cafe-gold); }

/* ════════════
   WHATSAPP FLOAT
   ════════════ */
.whatsapp-float {
    position:fixed; bottom:1.75rem; left:1.75rem;
    width:58px;height:58px;
    background:#25D366; border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(37,211,102,.4);
    z-index:999; transition:var(--transition);
    animation:floatBounce 3s ease-in-out infinite;
}
.whatsapp-float:hover { transform:scale(1.1) translateY(-3px); }
@keyframes floatBounce {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-8px); }
}

/* ════════════
   FOOTER
   ════════════ */
.cafe-footer {
    background:linear-gradient(145deg,var(--cafe-charcoal),var(--cafe-dark-brown));
    color:white; padding:5rem 0 0;
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:3rem; margin-bottom:4rem;
}
.footer-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.footer-logo-icon { width:48px;height:48px;background:linear-gradient(135deg,var(--cafe-gold),var(--cafe-gold-dark));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:white;font-size:1.4rem;font-weight:900; }
.footer-logo-text h3 { color:white; font-size:1.1rem; font-weight:800; margin:0; }
.footer-logo-text p  { color:var(--cafe-gold); font-size:.7rem; margin:0; }

.footer-desc { color:var(--cafe-beige); font-size:.875rem; line-height:1.85; margin-bottom:1.5rem; }
.footer-social { display:flex; gap:.75rem; }
.social-btn {
    width:38px;height:38px;
    background:rgba(255,255,255,.08); border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    color:white; transition:var(--transition);
}
.social-btn:hover { background:var(--cafe-gold); }

.footer-col h4 { color:var(--cafe-gold); font-size:1rem; font-weight:700; margin-bottom:1.5rem; }
.footer-links { display:flex; flex-direction:column; gap:.65rem; }
.footer-links a { color:var(--cafe-beige); font-size:.875rem; transition:var(--transition); display:flex; align-items:center; gap:.4rem; }
.footer-links a:hover { color:var(--cafe-gold); padding-right:.25rem; }

.footer-contact { display:flex; flex-direction:column; gap:1rem; }
.footer-contact-item { display:flex; gap:.75rem; align-items:flex-start; }
.footer-contact-item p { font-size:.75rem; color:var(--cafe-beige); margin-bottom:.15rem; }
.footer-contact-item a { color:white; font-size:.875rem; font-weight:600; }
.footer-contact-item a:hover { color:var(--cafe-gold); }

.footer-hours {
    background:rgba(255,255,255,.04);
    border:1px solid rgba(201,169,110,.2);
    border-radius:var(--radius-md);
    padding:1rem;
    margin-top:1rem;
}
.footer-hours p { font-size:.8rem; color:var(--cafe-beige); margin-bottom:.3rem; }
.footer-hours strong { font-size:.85rem; color:var(--cafe-gold); }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.08);
    padding:1.75rem 0;
    display:flex; justify-content:space-between; align-items:center;
    font-size:.8rem; color:rgba(232,220,207,.6);
}
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a:hover { color:var(--cafe-gold); }

/* ════════════
   NEWSLETTER
   ════════════ */
.newsletter-section {
    background:linear-gradient(135deg,var(--cafe-gold),var(--cafe-gold-dark));
    padding:3rem 0;
}
.newsletter-inner {
    display:flex; gap:2rem; align-items:center; justify-content:space-between;
    flex-wrap:wrap;
}
.newsletter-text h4 { font-size:1.3rem; font-weight:800; color:white; margin-bottom:.3rem; }
.newsletter-text p  { color:rgba(255,255,255,.8); font-size:.875rem; }
.newsletter-form { display:flex; gap:.5rem; flex:1; max-width:480px; }
.newsletter-input {
    flex:1; padding:.75rem 1rem;
    border-radius:var(--radius-sm); border:2px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.15); color:white; font-family:inherit; font-size:.875rem;
    backdrop-filter:blur(8px);
}
.newsletter-input::placeholder { color:rgba(255,255,255,.7); }
.newsletter-input:focus { outline:none; border-color:white; }
.newsletter-btn {
    padding:.75rem 1.5rem;
    background:var(--cafe-dark-brown); color:white;
    border-radius:var(--radius-sm); font-weight:700; font-size:.875rem;
    transition:var(--transition); white-space:nowrap;
}
.newsletter-btn:hover { background:var(--cafe-charcoal); }

/* ════════════════
   TOAST / ALERT
   ════════════════ */
.toast-overlay {
    position:fixed; inset:0; z-index:99999;
    background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center;
}
.toast-overlay.show { display:flex; }
.toast-box {
    background:white; border-radius:var(--radius-xl);
    padding:2.5rem; max-width:380px; width:100%;
    text-align:center; box-shadow:var(--shadow-xl);
    animation:modalSlide .3s cubic-bezier(.4,0,.2,1);
}
.toast-icon {
    width:60px;height:60px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1.25rem;
}
.toast-icon.success { background:#dcfce7; color:#16a34a; }
.toast-icon.error   { background:#fee2e2; color:#dc2626; }
.toast-box h3 { font-size:1.2rem; font-weight:800; margin-bottom:.5rem; color:var(--cafe-dark-brown); }
.toast-box p  { font-size:.875rem; color:var(--cafe-text-light); margin-bottom:1.5rem; }
.toast-close {
    background:var(--cafe-gold); color:white;
    padding:.65rem 2rem; border-radius:var(--radius-sm);
    font-weight:700; font-size:.875rem;
}

/* ════════════════
   ANIMATIONS / RV
   ════════════════ */
.rv {
    opacity:0; transform:translateY(22px);
    transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.rv.in { opacity:1; transform:none; }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* ════════════
   RESPONSIVE
   ════════════ */
@media (max-width:1024px) {
    .cafe-nav-links, .cafe-nav-end .btn-outline { display:none; }
    .cafe-menu-toggle { display:flex; }
    .hero-grid { grid-template-columns:1fr; }
    .hero-visual { display:none; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
    :root { --nav-h:75px; }
    .cafe-topbar .container { flex-direction:column; gap:.25rem; }
    .topbar-center { display:none; }
    .cafe-hero h1 { font-size:2.2rem; }
    .hero-buttons { flex-direction:column; }
    .hero-stats { max-width:100%; }
    .section-title { font-size:1.8rem; }
    .footer-grid { grid-template-columns:1fr; gap:2rem; }
    .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
    .form-grid, .form-grid-3 { grid-template-columns:1fr; }
    .newsletter-inner { flex-direction:column; }
    .newsletter-form { max-width:100%; width:100%; }
    .cafe-cta { padding:4rem 0; }
    .card-actions { grid-template-columns:1fr; }
}

@media (max-width:480px) {
    .container { padding:0 1rem; }
    .cafe-hero { padding-top:calc(var(--nav-h) + 2rem); }
    .cards-grid { grid-template-columns:1fr; }
    .packages-grid { grid-template-columns:1fr; }
    .blog-grid { grid-template-columns:1fr; }
}

/* ════════════
   UTILITIES
   ════════════ */
.text-center { text-align:center; }
.text-gold   { color:var(--cafe-gold); }
.mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; } .mb-3 { margin-bottom:1.5rem; }
.hidden { display:none; }
.empty-state { text-align:center; padding:5rem 2rem; color:var(--cafe-text-light); }
.empty-state h3 { font-size:1.25rem; margin-bottom:.5rem; }