/* Liran salon — design system v2. "Hairline"-inspired: warm dark barbershop,
   amber/gold accents, rounded cards, pill buttons w/ icon token, glass cards,
   modern bold sans. RTL / Hebrew. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Assistant:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#1b1714;            /* warm near-black text */
  --ink-2:#171310;          /* dark section bg */
  --paper:#ffffff;
  --cream:#f5efe4;          /* warm cream section */
  --cream-2:#faf6ee;
  --line:#e9e0d1;
  --gold:#e0a63e;           /* amber accent */
  --gold-2:#eab74f;
  --gold-d:#c88a26;
  --muted:#726a5e;
  --on-dark:#f0ebe1;
  --on-dark-muted:#b0a596;
  --display:'Rubik', system-ui, sans-serif;
  --sans:'Assistant', system-ui, sans-serif;
  --wrap:1180px;
  --pad-section:clamp(60px, 9vw, 120px);
  --r:20px;                 /* card radius */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.08; margin:0; letter-spacing:-.02em}
h1{font-size:clamp(2.5rem, 6vw, 4.4rem); font-weight:900}
h2{font-size:clamp(1.9rem, 4vw, 3rem)}
h3{font-size:clamp(1.3rem, 2.4vw, 1.8rem)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)}
.section{padding-block:var(--pad-section)}
.cream{background:var(--cream)}
.ink{background:var(--ink-2); color:var(--on-dark)}
.lead{color:var(--muted); font-size:1.1rem; max-width:56ch}
.ink .lead{color:var(--on-dark-muted)}

/* Eyebrow pill — small rounded label with a gold dot (Hairline signature) */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  padding:8px 16px; border-radius:100px; margin:0 0 22px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold)}
.ink .eyebrow, .hero .eyebrow{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px)}

/* ── Pill button with circular icon token ─────────────── */
.pbtn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  background:var(--gold); color:#221a0c; border:none; cursor:pointer;
  padding:8px 22px 8px 8px; border-radius:100px;
  transition:background .2s, transform .15s, box-shadow .2s;
  box-shadow:0 8px 22px -10px rgba(224,166,62,.7);
}
.pbtn:hover{background:var(--gold-2); transform:translateY(-1px)}
.pbtn .ic{
  width:38px; height:38px; border-radius:50%; background:#211d17; color:var(--gold);
  display:grid; place-items:center; flex:none;
}
.pbtn .ic svg{width:17px; height:17px}
.pbtn.dark{background:#211d17; color:#fff}
.pbtn.dark .ic{background:var(--gold); color:#211d17}
.pbtn.light{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none}
.pbtn.light .ic{background:var(--gold); color:#211d17}
.pbtn.sm{font-size:.82rem; padding:6px 18px 6px 6px}
.pbtn.sm .ic{width:32px; height:32px}
.pbtn.sm .ic svg{width:14px; height:14px}

/* legacy .btn kept for forms/admin — now pill-shaped */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  font-family:var(--sans); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  padding:14px 28px; border-radius:100px; cursor:pointer; transition:.2s;
}
.btn:hover{background:#000}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#221a0c}
.btn.gold:hover{background:var(--gold-2); border-color:var(--gold-2)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:#fff}
.tlink{display:inline-flex; align-items:center; gap:.5em; font-weight:700; color:var(--gold-d); border-bottom:1px solid currentColor; padding-bottom:3px}

/* ── Site header ──────────────────────────────────── */
.site-head{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.site-head.on-hero{position:absolute; inset-inline:0; top:0; background:transparent; border:none}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:82px; gap:20px}
.brand{display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:1.4rem}
.brand .logo{width:40px; height:40px; border-radius:50%; background:var(--gold); color:#211d17; display:grid; place-items:center}
.brand .logo svg{width:20px; height:20px}
.brand small{display:block; font-family:var(--sans); font-weight:600; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-d); margin-top:-3px}
.on-hero .brand, .on-hero .nav a{color:#fff}
.nav{display:flex; gap:30px; align-items:center}
.nav a{font-weight:600; font-size:.9rem; color:var(--ink)}
.nav a:hover{color:var(--gold-d)}
.on-hero .nav a:hover{color:var(--gold-2)}
@media(max-width:860px){ .nav{display:none} }

/* ── Hero ─────────────────────────────────────────── */
.hero{position:relative; min-height:92vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,19,16,.55) 0%, rgba(23,19,16,.15) 32%, rgba(23,19,16,.85) 100%)}
.hero-inner{position:relative; z-index:2; width:100%; padding-block:clamp(40px,8vw,88px); display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:end}
.hero h1{max-width:14ch}
.hero .eyebrow{color:#fff}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr} }

/* Floating opening-hours glass card */
.hours{background:rgba(28,24,20,.5); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:26px 28px; align-self:flex-end}
.hours-h{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.05rem; margin-bottom:16px}
.hours-h .ic{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.12); display:grid; place-items:center; color:var(--gold-2)}
.hours-h .ic svg{width:16px;height:16px}
.hours-row{display:flex; justify-content:space-between; gap:24px; padding:9px 0; border-top:1px solid rgba(255,255,255,.1); font-size:.92rem}
.hours-row span:first-child{color:var(--on-dark-muted)}
.hours-row span:last-child{color:#fff; font-weight:600}

/* ── About ────────────────────────────────────────── */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,72px); align-items:center}
@media(max-width:900px){ .about{grid-template-columns:1fr} }
.about-media{position:relative; padding-bottom:40px}
.about-media .im1{width:74%; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4}
.about-media .im2{position:absolute; bottom:0; inset-inline-end:0; width:56%; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; border:6px solid var(--cream)}
.about-media img{width:100%; height:100%; object-fit:cover}
.badge{position:absolute; top:32%; inset-inline-start:56%; width:98px; height:98px; z-index:3}
.badge .spin{width:100%; height:100%; animation:spin 14s linear infinite}
.badge .dot{position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%; background:var(--gold); color:#211d17; display:grid; place-items:center}
.badge .dot svg{width:18px;height:18px}
@keyframes spin{to{transform:rotate(360deg)}}

.feat{display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line)}
.feat .ic{width:46px; height:46px; border-radius:12px; background:var(--cream-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--gold-d); flex:none}
.feat .ic svg{width:22px;height:22px}
.feat h4{font-family:var(--display); font-size:1.02rem; font-weight:700; margin-bottom:2px}
.feat p{margin:0; color:var(--muted); font-size:.92rem; line-height:1.5}

.founder{display:flex; align-items:center; gap:12px}
.founder .av{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700}
.founder b{display:block; font-family:var(--display)}
.founder span{color:var(--muted); font-size:.85rem}

/* ── Services (dark, icon cards) ──────────────────── */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){ .svc-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .svc-grid{grid-template-columns:1fr} }
.svc{background:#221d18; border:1px solid rgba(255,255,255,.07); border-radius:var(--r); padding:32px 28px; transition:.25s}
.svc:hover{background:#26201a; transform:translateY(-4px)}
.svc .ic{width:60px; height:60px; border-radius:16px; background:rgba(224,166,62,.12); color:var(--gold-2); display:grid; place-items:center; margin-bottom:22px}
.svc .ic svg{width:28px;height:28px}
.svc h3{color:#fff; margin-bottom:8px}
.svc p{color:var(--on-dark-muted); font-size:.95rem; margin:0 0 18px}
.svc-price{font-family:var(--display); font-weight:700; color:var(--gold-2); font-size:1.05rem}

/* CTA band */
.cta{background:linear-gradient(120deg,#211d17,#2a231b); color:#fff; border-radius:calc(var(--r)+8px); padding:clamp(40px,7vw,72px); text-align:center; position:relative; overflow:hidden}
.cta h2{color:#fff}

/* ── Forms (booking + admin) ──────────────────────── */
.field{margin-bottom:20px}
.field label{display:block; font-weight:700; font-size:.82rem; color:var(--ink); margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink); padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:12px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.field textarea{min-height:110px; resize:vertical}

/* ── Grids / cards ────────────────────────────────── */
.grid{display:grid; gap:clamp(16px,3vw,30px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){ .g3{grid-template-columns:1fr 1fr} .g2{grid-template-columns:1fr} }
@media(max-width:560px){ .g3{grid-template-columns:1fr} }
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r)}

/* ── Admin ────────────────────────────────────────── */
.admin{background:var(--cream)}
.search{width:100%; font-size:1rem; padding:14px 18px; border:1px solid var(--line); border-radius:100px; background:#fff}
.search:focus{outline:none; border-color:var(--gold)}
.linkbtn{background:none; border:0; color:var(--muted); cursor:pointer; font-size:.9rem; padding:8px}
.linkbtn:hover{color:#b00}
.appt{display:flex; gap:18px; align-items:center; padding:16px 20px}
.appt-when{display:flex; flex-direction:column; align-items:center; min-width:52px; line-height:1.1}
.appt-when strong{font-family:var(--display); font-size:1.15rem}
.appt-when span{font-size:.8rem; color:var(--muted)}
.appt-main{flex:1; min-width:0}
.appt-name{font-weight:700}
.appt-acts{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pill{font-size:.66rem; font-weight:700; letter-spacing:.06em; padding:3px 10px; border-radius:20px; vertical-align:middle}
.pill-pending{background:#fbf1dd; color:#9a6b16}
.pill-confirmed{background:#e3f0e4; color:#2e6b34}
@media(max-width:620px){ .appt{flex-wrap:wrap} .appt-acts{width:100%; justify-content:flex-end} }
.clients{display:flex; flex-direction:column; gap:10px}
.client-row{display:flex; align-items:center; gap:16px; padding:14px 18px; transition:.2s}
.client-row:hover{border-color:var(--gold)}
.client-name{font-family:var(--display); font-weight:700; font-size:1.12rem}
.avatar{width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:1.2rem; flex-shrink:0}
.avatar.big{width:72px; height:72px; font-size:1.9rem}
.client-head{display:flex; gap:20px; align-items:flex-start}
.add-visit{border:1px dashed var(--gold)!important; background:#fff}
.add-visit>summary{cursor:pointer; padding:18px 24px; font-weight:700; color:var(--gold-d); list-style:none}
.add-visit>summary::-webkit-details-marker{display:none}
.visit{padding:22px 24px}
.visit-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.visit-date{font-family:var(--display); font-size:1.25rem; font-weight:800}
.visit-svc{color:var(--muted); font-weight:600; margin-top:2px}
.visit-details{background:var(--cream); border-radius:12px; padding:14px 16px; margin:14px 0; font-size:.95rem; line-height:1.7}
.ba{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px}
@media(max-width:520px){ .ba{grid-template-columns:1fr} }
.ba-lbl{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.ba-imgs{display:flex; flex-wrap:wrap; gap:8px}
.thumb{position:relative; margin:0; width:96px; height:96px; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb-x{position:absolute; top:3px; inset-inline-end:3px; width:22px; height:22px; border:0; border-radius:50%; background:rgba(20,20,20,.7); color:#fff; cursor:pointer; font-size:.75rem; line-height:1}
.add-photo{width:96px; height:96px; border:1px dashed var(--gold); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--gold-d); cursor:pointer}
.add-photo input{display:none}
.uploader{margin:0}
.tabbar{position:fixed; inset-inline:0; bottom:0; z-index:60; display:none; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0; font-size:1.3rem; color:var(--muted)}
.tabbar a span{font-size:.62rem; font-weight:600}
@media(max-width:760px){ .tabbar{display:flex} .admin main{padding-bottom:80px!important} }

/* Utility */
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}
.muted{color:var(--muted)}
.divider{height:1px; background:var(--line); border:0; margin:0}