/* ===================================================
   کافه ۱۳ — تم تیره طلایی، الهام از بنر رسمی برند
=================================================== */

/* فونت‌ها از طریق تگ link در head بارگذاری می‌شن (سریع‌تر از import) */

:root{
  --bg:#0c0a08;
  --bg-2:#161310;
  --bg-3:#1e1a15;
  --gold:#c9a04f;
  --gold-light:#e3c383;
  --cream:#f3ede1;
  --grey:#a79e8f;
  --grey-soft:#6f6759;
  --line:rgba(201,160,79,.28);
  --accent-serif:'Cormorant Garamond', serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Shabnam',sans-serif;
  background:var(--bg);
  color:var(--cream);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
input,textarea,select{font-family:inherit;font-size:1rem}

.container{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- هدر ---------- */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(12,10,8,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease);
}
.header-inner{
  display:flex;align-items:center;justify-content:center;
  padding:14px 28px;max-width:1180px;margin:0 auto;gap:20px;
  transition:padding .3s var(--ease);
}
header.shrink .header-inner{padding:8px 28px}

.brand{display:flex;align-items:center}
.brand img{width:52px;height:52px;transition:width .3s var(--ease),height .3s var(--ease)}
header.shrink .brand img{width:40px;height:40px}

nav.cat-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
nav.cat-nav::-webkit-scrollbar{display:none}
nav.cat-nav button{
  white-space:nowrap;padding:9px 20px;border-radius:999px;
  font-size:.85rem;font-weight:500;color:var(--grey);
  border:1px solid transparent;transition:all .25s var(--ease);
}
nav.cat-nav button:hover{border-color:var(--line);color:var(--gold-light)}
nav.cat-nav button.active{background:var(--gold);color:var(--bg);font-weight:700}

.nav-scroll{position:relative;max-width:100%;flex:1}
.nav-scroll::before,.nav-scroll::after{
  content:'';position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2;
}
.nav-scroll::before{right:0;background:linear-gradient(to left, rgba(12,10,8,.95), transparent)}
.nav-scroll::after{left:0;background:linear-gradient(to right, rgba(12,10,8,.95), transparent)}
.swipe-hint{
  position:absolute;left:2px;top:50%;transform:translateY(-50%);z-index:3;
  color:var(--gold);opacity:.85;pointer-events:none;
  animation:swipeBounce 1.4s ease-in-out infinite;transition:opacity .4s var(--ease);
}
.swipe-hint.hidden{opacity:0}
@keyframes swipeBounce{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(-6px)}
}

/* ---------- بنر اصلی ---------- */
.banner-wrap{width:100%;border-bottom:1px solid var(--line);position:relative}
.banner-wrap img{width:100%;height:auto;display:block;max-height:640px;object-fit:cover}

/* ---------- جستجو ---------- */
.search-wrap{padding:36px 28px 8px}
.search-box{
  max-width:460px;margin:0 auto;display:flex;align-items:center;gap:10px;
  border-bottom:1.5px solid var(--gold);padding:12px 4px;background:transparent;
}
.search-box input{flex:1;border:none;outline:none;background:none;font-size:1rem;text-align:right;color:var(--cream)}
.search-box input::placeholder{color:var(--grey-soft)}
.search-box svg{flex-shrink:0;color:var(--gold);opacity:.85}

/* ---------- بخش‌های منو ---------- */
.menu-section{padding:56px 0 10px;scroll-margin-top:96px}
.section-head{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.section-head .icon{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.section-head h2{font-size:1.5rem;font-weight:700;color:var(--gold-light)}
.section-head .rule{flex:1;height:1px;background:var(--line)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.card{
  display:flex;gap:16px;padding:18px;background:var(--bg-2);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
  opacity:0;transform:translateY(14px);
}
.card.in{opacity:1;transform:translateY(0)}
.card:hover{border-color:var(--gold);background:var(--bg-3);transform:translateY(-3px)}

.card .thumb{width:96px;height:96px;flex-shrink:0;overflow:hidden;background:var(--bg-3);border:1px solid var(--line);position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.card .thumb.empty{display:flex;align-items:center;justify-content:center;color:var(--grey-soft)}
.card .thumb.unavailable::after{
  content:'ناموجود';position:absolute;inset:0;background:rgba(12,10,8,.72);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;
}

.card .body{flex:1;min-width:0;display:flex;flex-direction:column}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card h3{font-size:1.02rem;font-weight:700;color:var(--cream)}
.card .off-badge{font-size:.65rem;font-weight:700;color:var(--grey);border:1px solid var(--grey-soft);padding:2px 8px;border-radius:999px;margin-right:6px}
.card p{font-size:.83rem;color:var(--grey);margin:6px 0 10px;flex:1}
.card .price{font-family:var(--accent-serif);font-style:italic;font-size:1.2rem;font-weight:600;color:var(--gold-light);white-space:nowrap}
.card .price small{font-family:'Shabnam';font-style:normal;font-size:.65rem;color:var(--grey);margin-right:4px}

.empty-state{text-align:center;padding:70px 20px;color:var(--grey)}

/* ---------- اسکلت لودینگ (تا رسیدن داده) ---------- */
.skeleton-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:56px 0}
@media(max-width:640px){.skeleton-wrap{grid-template-columns:1fr}}
.skeleton-card{
  height:96px;border-radius:2px;background:linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
  background-size:400% 100%;animation:skeletonPulse 1.6s ease-in-out infinite;border:1px solid var(--line);
}
@keyframes skeletonPulse{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- فوتر ---------- */
footer{margin-top:80px;background:var(--bg-2);border-top:1px solid var(--line);padding:50px 28px 26px}
.foot-logo{display:flex;justify-content:center;margin-bottom:36px}
.foot-logo img{width:64px;height:64px}
.footer-inner{
  max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;
  border-top:1px solid var(--line);padding-top:28px;
}
.footer-inner h4{font-weight:700;margin-bottom:10px;font-size:.82rem;color:var(--gold);letter-spacing:.03em}
.footer-inner p{color:var(--grey);font-size:.86rem;margin-bottom:5px}
.foot-bottom{
  max-width:1180px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line);
  text-align:center;color:var(--grey-soft);font-size:.76rem;
}

/* ---------- Admin shared ---------- */
.admin-body{background:var(--bg-3);min-height:100vh;color:var(--cream)}
.admin-shell{max-width:1000px;margin:0 auto;padding:30px 20px 80px}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.admin-top .logo{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:700;color:var(--gold-light)}
.admin-top .logo img{width:34px;height:34px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;font-weight:700;font-size:.85rem;transition:.25s var(--ease)}
.btn-dark{background:var(--gold);color:var(--bg)}
.btn-dark:hover{background:var(--gold-light)}
.btn-outline{border:1.5px solid var(--gold);color:var(--gold-light)}
.btn-outline:hover{background:var(--gold);color:var(--bg)}
.btn-danger{color:#d17563;border:1.5px solid #d17563}
.btn-danger:hover{background:#d17563;color:#fff}
.btn-sm{padding:7px 15px;font-size:.76rem}

.panel{background:var(--bg-2);border:1px solid var(--line);padding:26px;margin-bottom:22px}
.panel h3{font-size:1.02rem;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px;color:var(--gold-light)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.78rem;font-weight:700;color:var(--grey)}
.field input[type=text],.field input[type=number],.field textarea,.field select{
  border:1px solid var(--line);border-bottom:2px solid var(--gold);border-radius:0;padding:10px 12px;
  outline:none;transition:border .2s;background:var(--bg-3);color:var(--cream);text-align:right;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.field textarea{resize:vertical;min-height:70px}

.upload-box{border:1.5px dashed var(--grey-soft);display:flex;align-items:center;gap:14px;padding:12px;cursor:pointer}
.upload-box:hover{border-color:var(--gold)}
.upload-box .preview{width:56px;height:56px;background:var(--bg-3);object-fit:cover;flex-shrink:0}
.upload-box span{font-size:.8rem;color:var(--grey)}
.upload-box input{display:none}

.check-row{display:flex;align-items:center;gap:8px;font-size:.85rem}

.item-row{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line)}
.item-row:last-child{border-bottom:none}
.item-row img{width:52px;height:52px;object-fit:cover;background:var(--bg-3);flex-shrink:0}
.item-row .thumb-empty{width:52px;height:52px;background:var(--bg-3);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--grey-soft)}
.item-row .info{flex:1;min-width:0}
.item-row .info b{display:block;font-size:.92rem;color:var(--cream)}
.item-row .info span{font-size:.76rem;color:var(--grey)}
.item-row .price-tag{font-family:var(--accent-serif);font-style:italic;font-weight:600;font-size:1rem;white-space:nowrap;color:var(--gold-light)}
.item-row .actions{display:flex;gap:6px}
.badge-off{font-size:.68rem;background:var(--bg-3);color:var(--grey);padding:2px 8px;border-radius:999px;margin-right:6px}

.icon-picker{display:flex;flex-wrap:wrap;gap:8px}
.icon-picker button{
  width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--grey-soft);
  transition:.2s var(--ease);flex-shrink:0;background:var(--bg-3);
}
.icon-picker button:hover{border-color:var(--gold);color:var(--gold-light)}
.icon-picker button.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}

.cat-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold);padding:7px 8px 7px 16px;margin:4px;font-size:.82rem;font-weight:700;color:var(--gold-light)}
.cat-chip .chip-icon{display:flex;align-items:center;color:var(--gold-light)}
.cat-chip button{color:var(--grey);font-size:1rem;line-height:1}
.cat-chip button:hover{color:#d17563}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--gold);color:var(--bg);padding:13px 24px;border-radius:999px;
  font-size:.86rem;font-weight:700;opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.login-card{width:100%;max-width:380px;background:var(--bg-2);border:1px solid var(--gold);padding:40px 30px;text-align:center}
.login-card img{width:56px;height:56px;margin:0 auto 14px}
.login-card p{color:var(--grey);font-size:.84rem;margin-bottom:22px}
.login-card input{width:100%;border:none;border-bottom:2px solid var(--gold);padding:12px 6px;text-align:center;margin-bottom:14px;outline:none;background:transparent;color:var(--cream)}
.login-card input::placeholder{color:var(--grey-soft)}
.login-card .btn{width:100%;justify-content:center;margin-top:6px}
.login-err{color:#d17563;font-size:.78rem;margin-bottom:10px;min-height:1em}

.hint-box{background:var(--bg-2);border-right:3px solid var(--gold);padding:14px 16px;font-size:.8rem;color:var(--grey);margin-bottom:24px;line-height:1.9}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px}