/* ═══════════════════════════════════════════════════
   PABAGAN v4 — Linear × Apple
   Philosophy: Fewer elements. Bigger moments. Precision.
   Background: #09090b (Linear's exact black)
═══════════════════════════════════════════════════ */

@font-face{font-family:"Peyda";src:url("/wp-content/themes/pabagan-theme/assets/fonts/PeydaWebFaNum-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Peyda";src:url("/wp-content/themes/pabagan-theme/assets/fonts/PeydaWebFaNum-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Peyda";src:url("/wp-content/themes/pabagan-theme/assets/fonts/PeydaWebFaNum-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Peyda";src:url("/wp-content/themes/pabagan-theme/assets/fonts/PeydaWebFaNum-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Peyda";src:url("/wp-content/themes/pabagan-theme/assets/fonts/PeydaWebFaNum-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Peyda";src:url("/wp-content/themes/pabagan-theme/assets/fonts/PeydaWebFaNum-Black.woff2") format("woff2");font-weight:900;font-display:swap}

/* ── TOKENS ── */
:root{
  --bg:      #09090b;
  --bg1:     #111113;
  --bg2:     #18181b;
  --brd:     rgba(255,255,255,.07);
  --brd2:    rgba(255,255,255,.12);
  --gold:    #C8962A;
  --gold2:   #E8B923;
  --cream:   #F5ECD7;
  --t1:      #F4F4F5;
  --t2:      rgba(244,244,245,.6);
  --t3:      rgba(244,244,245,.35);
  --t4:      rgba(244,244,245,.18);
  --r:       8px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  font-family:"Peyda",Tahoma,sans-serif;
  background:var(--bg);color:var(--t1);
  direction:rtl;line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ── LAYOUT ── */
.w{max-width:1160px;margin:0 auto;padding:0 28px}
.w-sm{max-width:720px;margin:0 auto;padding:0 28px}
.w-lg{max-width:1400px;margin:0 auto;padding:0 32px}

/* ── TYPOGRAPHY ── */
/* Apple-style: huge confident text */
.t-xl{font-size:clamp(3.5rem,8vw,7.5rem);font-weight:900;line-height:.95;letter-spacing:-.05em}
.t-lg{font-size:clamp(2.5rem,5.5vw,5rem);font-weight:900;line-height:1.0;letter-spacing:-.04em}
.t-h1{font-size:clamp(1.8rem,3.5vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.t-h2{font-size:clamp(1.3rem,2.5vw,2rem);font-weight:700;line-height:1.2}
.t-body{font-size:clamp(.95rem,1.3vw,1.08rem);color:var(--t2);line-height:1.8}
.t-sm{font-size:.85rem;color:var(--t3)}
.t-xs{font-size:.75rem;color:var(--t4)}
.t-label{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* Gold foil — with shimmer animation (GPU accelerated via background-position) */
.gold{
  background:linear-gradient(105deg,#8B6914 0%,#C8962A 20%,#F5D76E 40%,#E8B923 50%,#F5D76E 60%,#C8962A 80%,#8B6914 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gold-shimmer 4s ease-in-out infinite;
}
@keyframes gold-shimmer{
  0%{background-position:100% 0}
  50%{background-position:0% 0}
  100%{background-position:100% 0}
}

/* ── HEADER — Linear precision ── */
#h{
  position:fixed;top:0;left:0;right:0;z-index:999;
  padding:.85rem 0;
  transition:all .35s;
}
#h.s{
  background:rgba(9,9,11,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--brd);
  padding:.65rem 0;
}
.logo{font-size:1.3rem;font-weight:900;letter-spacing:-.04em;color:var(--t1)}
.logo span{color:var(--gold)}

/* Nav — Linear style: minimal, no hover boxes */
.nav{display:flex;align-items:center;gap:.05rem;list-style:none}
.nav>li{position:relative}
.nav>li>a{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.4rem .8rem;font-size:.84rem;font-weight:500;
  color:var(--t3);transition:color .15s;border-radius:6px;
}
.nav>li>a:hover{color:var(--t1)}
.arr{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav>li:hover .arr{transform:rotate(180deg)}

/* Dropdown — ultra minimal */
.drop{
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--bg1);
  border:1px solid var(--brd2);
  border-radius:12px;padding:.4rem;min-width:200px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
  transition:all .18s cubic-bezier(.23,1,.32,1);z-index:10;
}
.nav>li:hover .drop{opacity:1;visibility:visible;transform:none}
.drop a{
  display:flex;align-items:center;gap:.6rem;
  padding:.48rem .75rem;border-radius:7px;font-size:.82rem;
  color:var(--t3);transition:all .12s;
}
.drop a:hover{color:var(--t1);background:rgba(255,255,255,.05)}
.drop a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;opacity:.6}
.drop a:hover svg{opacity:1}
.dsec{font-size:.6rem;font-weight:600;color:var(--t4);letter-spacing:.1em;text-transform:uppercase;padding:.4rem .75rem .12rem}
.dsep{height:1px;background:var(--brd);margin:.28rem .4rem}

/* Mobile */
#mb{display:none;background:transparent;border:1px solid var(--brd2);border-radius:7px;padding:6px 8px;color:var(--t3);align-items:center;justify-content:center;cursor:pointer}
#mb:hover{color:var(--t1);border-color:var(--brd2)}
#mm{display:none;border-top:1px solid var(--brd);background:rgba(9,9,11,.97);backdrop-filter:blur(20px)}
.ma{display:flex;align-items:center;gap:.55rem;padding:.58rem 1rem;font-size:.88rem;color:var(--t3)}
.ma:hover{color:var(--t1)}
.ma svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;opacity:.55}
.msub{padding-right:1.75rem}
.msep{height:1px;background:var(--brd);margin:.25rem 1rem}
.msec{font-size:.6rem;font-weight:600;color:var(--t4);letter-spacing:.1em;text-transform:uppercase;padding:.62rem 1rem .12rem}

/* ── BUTTONS — Linear precise ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.72rem 1.6rem;border-radius:var(--r);
  font-weight:600;font-size:.86rem;border:none;
  transition:all .18s;white-space:nowrap;cursor:pointer;font-family:inherit;
}
/* Gold primary */
.btn-gold{
  background:linear-gradient(135deg,#C8962A,#E8B923);
  color:#09090b;
  box-shadow:0 0 0 1px rgba(200,150,42,.3);
}
.btn-gold:hover{
  background:linear-gradient(135deg,#D4A030,#F0C030);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(200,150,42,.25),0 0 0 1px rgba(200,150,42,.4);
}
/* Ghost — Linear style */
.btn-ghost{
  background:transparent;
  border:1px solid var(--brd2);
  color:var(--t2);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.2);color:var(--t1);background:rgba(255,255,255,.04)}
/* Text button */
.btn-text{background:transparent;color:var(--t3);padding:.72rem .4rem}
.btn-text:hover{color:var(--t1)}
.btn-lg{padding:.92rem 2rem;font-size:.92rem}
.btn-sm{padding:.5rem 1rem;font-size:.78rem}

/* ── MINIMAL DIVIDER — Linear style ── */
hr.d{border:none;height:1px;background:var(--brd);margin:0}

/* ── BADGE — Linear: very subtle ── */
.badge{
  display:inline-flex;align-items:center;gap:.38rem;
  padding:.22rem .78rem;border-radius:50px;font-size:.7rem;font-weight:600;
  background:rgba(200,150,42,.08);border:1px solid rgba(200,150,42,.2);color:var(--gold);
}
.badge-dim{background:rgba(255,255,255,.04);border:1px solid var(--brd2);color:var(--t3)}
.badge-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#4ade80}

/* ── TICKER — refined ── */
.tk-o{overflow:hidden;border-top:1px solid var(--brd);border-bottom:1px solid var(--brd)}
.tk-i{display:flex;animation:tk 28s linear infinite;width:max-content}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tki{display:inline-flex;align-items:center;gap:.48rem;padding:.52rem 1.8rem;font-size:.76rem;color:var(--t4);border-left:1px solid var(--brd)}
.tki svg{stroke:var(--gold);fill:none;stroke-width:2;width:12px;height:12px;opacity:.7}

/* ── FEATURE ROW — Apple: one idea ── */
.feat-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  padding:7rem 0;
}
.feat-row.rev{direction:ltr}
.feat-row.rev>*{direction:rtl}

/* ── MODULE LIST — Linear: horizontal items ── */
.mod-item{
  display:flex;align-items:center;gap:1.25rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--brd);
  transition:all .18s;
  cursor:default;
}
.mod-item:first-child{border-top:1px solid var(--brd)}
.mod-item:hover{padding-right:.5rem}
.mod-num{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--t4);font-family:monospace;
  width:28px;flex-shrink:0;
}
.mod-icon{
  width:36px;height:36px;border-radius:9px;
  background:rgba(200,150,42,.1);border:1px solid rgba(200,150,42,.18);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mod-icon svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2}
.mod-name{font-weight:700;font-size:.92rem;color:var(--t1)}
.mod-desc{font-size:.8rem;color:var(--t3);margin-top:.12rem}
.mod-badge{margin-right:auto;font-size:.66rem}
.mod-arr{color:var(--t4);transition:all .18s;flex-shrink:0}
.mod-item:hover .mod-arr{color:var(--gold);transform:translateX(-4px)}

/* ── STAT BLOCK — big number ── */
.stat-blk{text-align:center}
.stat-num{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:900;line-height:1;letter-spacing:-.04em}
.stat-label{font-size:.78rem;color:var(--t3);margin-top:.5rem}

/* ── INVOICE MOCKUP ── */
.invoice{
  background:var(--bg1);
  border:1px solid var(--brd2);
  border-radius:16px;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
}
.inv-bar{
  display:flex;align-items:center;gap:.4rem;
  padding:.7rem 1rem;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--brd);
}
.inv-dot{width:10px;height:10px;border-radius:50%}

/* ── SCROLL REVEAL ── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}
.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ── FOOTER ── */
.footer{border-top:1px solid var(--brd);padding:4rem 0 2.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-col-title{font-size:.7rem;font-weight:600;color:var(--t4);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem}
.footer-link{display:block;font-size:.84rem;color:var(--t3);margin-bottom:.48rem;transition:color .15s}
.footer-link:hover{color:var(--t1)}

/* ── CTA BLOCK ── */
.cta-block{
  padding:7rem 0;text-align:center;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(200,150,42,.07) 0%,transparent 70%);
  border-top:1px solid var(--brd);
}

/* ── INPUT ── */
.inp{
  padding:.75rem 1.1rem;background:rgba(255,255,255,.04);
  border:1px solid var(--brd2);border-radius:var(--r);
  color:var(--t1);font-family:"Peyda",inherit;font-size:.88rem;
  direction:rtl;outline:none;transition:border-color .18s;
}
.inp:focus{border-color:rgba(200,150,42,.4)}
.inp::placeholder{color:var(--t4)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav,.dcta{display:none!important}
  #mb{display:flex!important}
  .feat-row{grid-template-columns:1fr;gap:3rem;padding:5rem 0;direction:rtl!important}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}

/* ── INVOICE REALISTIC ── */
.inv-paper{
  background:#fff;color:#1a1a2e;direction:rtl;
  border-radius:12px;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  font-family:"Peyda",Tahoma,sans-serif;
}
.inv-top{background:#1a1a2e;padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.inv-logo{font-size:1.1rem;font-weight:900;color:#F5ECD7;letter-spacing:-.03em}
.inv-logo span{color:#E8B923}
.inv-id{font-size:.62rem;color:rgba(245,236,215,.5);font-family:monospace;text-align:left}
.inv-head{padding:1rem 1.5rem;border-bottom:2px solid #E8B923;display:flex;justify-content:space-between;align-items:start}
.inv-shop{font-size:.78rem;color:#555}
.inv-shop strong{display:block;font-size:.92rem;color:#1a1a2e;margin-bottom:.15rem}
.inv-meta{font-size:.65rem;color:#888;text-align:left}
.inv-meta strong{display:block;font-size:.72rem;color:#1a1a2e}
.inv-table{width:100%;border-collapse:collapse;font-size:.72rem}
.inv-table th{background:#f8f7f4;padding:.55rem .65rem;text-align:right;font-weight:700;color:#555;font-size:.62rem;border-bottom:1px solid #e8e0d0}
.inv-table td{padding:.52rem .65rem;border-bottom:1px solid #f0ebe0;color:#333;vertical-align:middle}
.inv-table tr:last-child td{border-bottom:none}
.inv-table .num{text-align:left;font-family:monospace;font-size:.68rem}
.inv-cat{display:inline-block;font-size:.58rem;background:#FFF3CD;color:#856404;padding:.08rem .42rem;border-radius:3px}
.inv-totals{padding:.85rem 1.5rem;background:#f8f7f4;border-top:1px solid #e8e0d0}
.inv-total-row{display:flex;justify-content:space-between;font-size:.72rem;color:#555;padding:.2rem 0}
.inv-total-final{display:flex;justify-content:space-between;padding:.55rem 0;border-top:2px solid #1a1a2e;margin-top:.35rem}
.inv-total-final .label{font-weight:800;font-size:.82rem;color:#1a1a2e}
.inv-total-final .val{font-weight:900;font-size:.92rem;color:#1a1a2e}
.inv-stamp{padding:.65rem 1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.6rem;color:#aaa;border-top:1px solid #e8e0d0}

/* Admin form mockup */
.adm-form{
  background:#18181b;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.adm-bar{background:#111113;padding:.65rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.4rem;font-size:.68rem;color:rgba(255,255,255,.3)}
.adm-bar span{color:rgba(255,255,255,.55)}
.adm-body{padding:1.1rem}
.adm-field{margin-bottom:.7rem}
.adm-label{font-size:.62rem;font-weight:600;color:rgba(255,255,255,.4);margin-bottom:.28rem;letter-spacing:.04em}
.adm-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:.48rem .72rem;font-size:.75rem;color:rgba(255,255,255,.8);font-family:"Peyda",Tahoma,sans-serif;direction:rtl}
.adm-input:focus{border-color:rgba(200,150,42,.4);outline:none}
.adm-select{width:100%;background:#1f1f23;border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:.48rem .72rem;font-size:.75rem;color:rgba(255,255,255,.7);font-family:"Peyda",Tahoma,sans-serif;direction:rtl}
.adm-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.adm-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}
.adm-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:5px;font-size:.62rem;font-weight:600}
.adm-auto{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
.adm-total-row{display:flex;justify-content:space-between;align-items:center;padding:.38rem 0;font-size:.72rem;border-bottom:1px solid rgba(255,255,255,.05)}
.adm-total-row .tl{color:rgba(255,255,255,.4)}.adm-total-row .tv{color:rgba(255,255,255,.75);font-weight:600}
.adm-total-final{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-top:1px solid rgba(200,150,42,.3);margin-top:.35rem}
.adm-total-final .tl{color:rgba(200,150,42,.7);font-size:.72rem}.adm-total-final .tv{color:#E8B923;font-weight:800;font-size:.88rem}

/* Tab switcher */
.inv-tabs{display:flex;gap:.4rem;margin-bottom:1.5rem}
.inv-tab{padding:.42rem 1rem;border-radius:7px;border:1px solid var(--brd2);background:transparent;color:var(--t3);font-size:.78rem;font-weight:600;cursor:pointer;font-family:"Peyda",Tahoma,sans-serif;transition:all .15s}
.inv-tab.active{background:rgba(200,150,42,.12);border-color:rgba(200,150,42,.35);color:var(--gold)}

/* ── INVOICE SPLIT LAYOUT ── */
.inv-split{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:2rem;
  align-items:start;
}
/* RTL: admin form is visually on the right (first col = right in RTL) */
.inv-arrow-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  font-size:.6rem;
  font-weight:600;
  color:var(--gold);
  letter-spacing:.06em;
  padding:.18rem .6rem .18rem .38rem;
  background:rgba(200,150,42,.08);
  border:1px solid rgba(200,150,42,.2);
  border-radius:50px;
  margin:-.5rem auto .5rem;
  left:50%;
  transform:translateX(-50%);
}
.inv-arrow-badge::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--gold2);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.7)}
}

@media(max-width:860px){
  .inv-split{grid-template-columns:1fr}
}