/* Cafe Chargoosh — UTILITY REV12 (finalized links, logo, badge-in-hours) */
:root{
  --bg:#0a0a0a; --surface:#121212; --text:#F6F6F6; --muted:#CFCFCF;
  --ink:#F18A1B; --ink-2:#FFB257; --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06); --radius:18px; --radius-lg:22px;
  --shadow:0 18px 60px rgba(241,138,27,.28);
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.25rem; --space-5:1.75rem; --space-6:2.5rem;
  --container:max(280px, min(1100px, 92vw));
  --fz-1:clamp(14px,2vw,16px); --fz-2:clamp(16px,2.2vw,18px); --fz-3:clamp(20px,3vw,24px); --fz-4:clamp(26px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Vazirmatn',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,iframe{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{width:var(--container); margin-inline:auto}

.bg-base{position:fixed; inset:0; z-index:-3; background: radial-gradient(1200px 600px at 20% 10%, rgba(241,138,27,.08), transparent 60%), radial-gradient(900px 500px at 85% 90%, rgba(255,178,87,.07), transparent 60%), linear-gradient(#0a0a0a,#090909)}
.grain{position:fixed; inset:0; z-index:-1; opacity:.06; mix-blend-mode:overlay; background:url('assets/grain.png') repeat}

.header{display:flex; align-items:center; justify-content:center; padding:var(--space-4) 0 var(--space-3)}
.logo-wrap{display:flex; align-items:center; gap:.6rem}
.logo-wrap img{height:76px; width:auto; filter: drop-shadow(0 8px 28px rgba(241,138,27,.25))}
.brand-text{display:none; font-weight:900; font-size: clamp(20px, 4vw, 28px); letter-spacing:-.3px}
.brand-text.show{display:inline-block}

.main{display:grid; gap:var(--space-5); padding:var(--space-4) 0 var(--space-6)}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4)}
.section-title{margin:0 0 var(--space-3); font-size:var(--fz-3); font-weight:900; letter-spacing:-.2px}

.grid-actions{display:grid; gap:.75rem; grid-template-columns: repeat(4, minmax(0,1fr));}
@media (max-width: 1024px){ .grid-actions{grid-template-columns: repeat(3, minmax(0,1fr));} }
@media (max-width: 720px){ .grid-actions{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 420px){ .grid-actions{grid-template-columns: 1fr;} }

.action{
  display:flex; align-items:center; gap:.6rem; padding:1rem; border-radius:var(--radius); border:1px solid var(--line);
  background:rgba(255,255,255,.04); min-height:52px; font-weight:800; justify-content:center;
  transition: transform .12s ease, box-shadow .28s ease, background .2s ease, color .2s ease;
  color: var(--text);
}
.action .icon{line-height:0; opacity:.9}
.action:hover{transform:translateY(-2px)}
.action.primary{background:linear-gradient(135deg,var(--ink),var(--ink-2)); color:#1d1207; box-shadow:var(--shadow); border-color:transparent}

.contact-panel{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.6rem; max-height:0; overflow:hidden; transform: translateY(-6px); opacity:0; transition: max-height .35s ease, opacity .35s ease, transform .35s ease; margin-top:.5rem;}
.contact-panel.open{max-height:120px; opacity:1; transform: translateY(0)}
.subaction{display:flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1rem; border-radius:var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.04); font-weight:800;}
@media (max-width:560px){ .contact-panel{grid-template-columns: 1fr;} }

.address-wrap{display:grid; gap:.6rem}
.address{width:100%; resize:none; padding:.9rem 1rem; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text);}

.map-shell{padding:.5rem; border-radius:var(--radius-lg)}
.map-embed{border:0; width:100%; aspect-ratio:16/10; border-radius:var(--radius)}

.map-links{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem}
.map-links .chip{padding:.6rem .9rem; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); font-weight:800; transition: transform .12s ease, box-shadow .28s ease, background .2s ease, color .2s ease; display:inline-flex; align-items:center; justify-content:center; min-height:42px;}
.map-links .chip:hover{transform:translateY(-2px); background:rgba(255,255,255,.08)}

.footer{display:grid; gap:var(--space-3); padding:var(--space-5) 0 var(--space-6); color:var(--muted); text-align:center}
.hours{}
.hours-header{display:flex; align-items:center; gap:.6rem; justify-content:center; font-weight:900; letter-spacing:-.2px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--ink); box-shadow:0 0 12px rgba(241,138,27,.7)}
.hours-time{font-size:var(--fz-3); font-weight:800; margin-top:.5rem}

/* Open/Closed badge inside hours header */
.open-badge{
  padding:.35rem .9rem; border-radius:999px; border:1px solid var(--line); margin-inline-start:.25rem; white-space:nowrap;
  font-weight:900; letter-spacing:-.2px; background:rgba(255,255,255,.05);
}
.open-badge.is-open{background:rgba(55,214,122,.12); color:#8DF5B5; border-color:rgba(55,214,122,.35)}
.open-badge.is-closed{background:rgba(255,90,95,.12); color:#ff9a9d; border-color:rgba(255,90,95,.35)}

/* Loader with beans above text */
.loader{position:fixed; inset:0; z-index:9999; background: radial-gradient(1000px 600px at 20% 15%, rgba(241,138,27,.10), transparent 60%), radial-gradient(900px 500px at 85% 90%, rgba(255,178,87,.08), transparent 60%), linear-gradient(#0a0a0a,#090909); display:grid; place-items:center; overflow:hidden}
.loader-inner{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; transform: translateY(-6vh);}
.beans{position:relative; width:130px; height:80px;}
.bean{width:22px; height:34px; border-radius:50% / 60% 60% 40% 40%; background: linear-gradient(135deg, #3a2212, #1c1009); position:absolute; top:0; box-shadow: 0 6px 28px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06);}
.bean::after{content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:4px; height:24px; border-radius:2px; background: rgba(255,255,255,.1);}
.bean1{left:20px; animation: fall 1.2s ease-in-out infinite}
.bean2{left:55px; animation: fall 1.2s .15s ease-in-out infinite}
.bean3{left:90px; animation: fall 1.2s .3s ease-in-out infinite}
@keyframes fall{0%{transform: translateY(-40px) rotate(0deg)}50%{transform: translateY(0) rotate(8deg)}100%{transform: translateY(-40px) rotate(0deg)}}
.loader-text{margin-top:1rem; color:var(--muted); font-weight:800; text-align:center}
.loader.hide{animation: loaderFade .6s ease forwards}
@keyframes loaderFade{to{opacity:0; visibility:hidden}}

/* Ensure contact button uses site font */
button#contact-toggle, a#contact-toggle, #contact-toggle {
  font-family: inherit !important;
}
/* Ensure actions inherit font */
.action { font-family: inherit; }