/* ===== Kafaat Al-Ahsa — design tokens + base components ===== */
:root{
  --kf-teal:#0C8079; --kf-teal-light:#0AA89B; --kf-teal-deep:#063D39;
  --kf-lime:#9FE60A; --kf-on-lime:#0B1505;
  --kf-ink:#0E1C1A; --kf-muted:#5A6E6A; --kf-line:#E2EBE8; --kf-bg:#F3F7F5; --kf-surface:#FFFFFF;
  --kf-tint:#E6F2F1; --kf-open-bg:#E8F8CD; --kf-open-fg:#2C4A07; --kf-full-bg:#F3F1EE; --kf-full-fg:#9A8F86;
  --kf-r-md:16px; --kf-r-lg:18px; --kf-r-xl:22px; --kf-r-pill:40px;
  --kf-shadow:0 18px 50px -22px rgba(6,61,57,.30);
  --kf-font-ar:"Tajawal",system-ui,sans-serif;
  --kf-font-num:"Space Grotesk",sans-serif;
  --kf-font-en:"Plus Jakarta Sans",system-ui,sans-serif;
}

/* base typography (Arabic-first) */
body{font-family:var(--kf-font-ar);color:var(--kf-ink);background:var(--kf-bg);line-height:1.6}
.kf-num{font-family:var(--kf-font-num);direction:ltr;unicode-bidi:isolate}

/* buttons */
.kf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;
  border-radius:var(--kf-r-pill);border:none;font-family:var(--kf-font-ar);font-weight:700;font-size:15px;
  cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s}
.kf-btn:active{transform:translateY(1px)}
.kf-btn--lime{background:var(--kf-lime);color:var(--kf-on-lime);box-shadow:0 12px 24px -12px rgba(159,230,10,.7)}
.kf-btn--teal{background:var(--kf-teal);color:#fff;box-shadow:0 12px 24px -14px var(--kf-teal)}
.kf-btn--ghost{background:transparent;color:var(--kf-ink);border:1.5px solid var(--kf-line)}
.kf-btn--block{width:100%}

/* cards */
.kf-card{background:var(--kf-surface);border:1px solid var(--kf-line);border-radius:var(--kf-r-lg);padding:18px}
.kf-card--xl{border-radius:var(--kf-r-xl)}
.kf-shadow{box-shadow:var(--kf-shadow)}

/* program cover (gradient tile) */
.kf-cover{height:140px;border-radius:var(--kf-r-md);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:12px}
.kf-cover.c1{background:linear-gradient(135deg,#0C8079,#0AA89B)}
.kf-cover.c2{background:linear-gradient(135deg,#063D39,#0C8079)}
.kf-cover.c3{background:linear-gradient(135deg,#0AA89B,#00C2A8)}
.kf-cover.c4{background:linear-gradient(140deg,#0C8079,#063D39 70%)}
.kf-cover.c5{background:linear-gradient(135deg,#07514C,#0AA89B)}
.kf-cover.c6{background:linear-gradient(135deg,#0C8079,#0E6E66)}
.kf-cover .glyph{position:absolute;inset-inline-end:-6px;inset-block-start:-10px;font-size:96px;line-height:1;color:rgba(255,255,255,.16)}

/* pills / tags */
.kf-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--kf-teal);
  background:var(--kf-tint);padding:5px 11px;border-radius:20px;line-height:1}
.kf-covtag{position:relative;z-index:1;background:rgba(255,255,255,.92);color:var(--kf-teal);font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px}
.kf-status{display:inline-flex;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:20px;line-height:1}
.kf-status--open{background:var(--kf-open-bg);color:var(--kf-open-fg)}
.kf-status--full{background:var(--kf-full-bg);color:var(--kf-full-fg)}

/* seat / progress bar */
.kf-seat{height:8px;border-radius:8px;background:var(--kf-line);overflow:hidden}
.kf-seat > span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--kf-teal),var(--kf-teal-light))}
.kf-seat > span.full{background:linear-gradient(90deg,#c9c2bb,#ddd6cf)}

/* Material Symbols icon helper */
.kf-ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;
  white-space:nowrap;direction:ltr;display:inline-flex;vertical-align:middle;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}

/* helpers */
.kf-row{display:flex;align-items:center;gap:10px}
.kf-btw{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kf-muted{color:var(--kf-muted)}
.kf-teal{color:var(--kf-teal)}

/* program card (widget) */
.kf-program{display:flex;flex-direction:column}
.kf-program .title{font-weight:800;font-size:17px;margin:13px 0 4px;line-height:1.3}
.kf-program .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--kf-muted);font-size:12.5px;margin-bottom:13px}
.kf-program .seatrow{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px}