/* ============================================================
   TuitionCentre.my — Shared stylesheet for app pages
   Brand: purple #534AB7 · amber #EF9F27 · Inter
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:#534AB7; --purple-dark:#3f38a0; --purple-light:#EEEcF9; --purple-mid:#7B74CC;
  --amber:#EF9F27; --amber-light:#FEF3DC;
  --dark:#2C2C2A; --body:#4A4A48; --muted:#7A7A78; --subtle:#ADADAB;
  --border:#E8E6F0; --bg:#FAFAF8; --white:#FFFFFF;
  --green:#1BA85C; --green-light:#E6F7EE; --red:#E05A6D; --red-light:#FEE8E8;
  --blue:#2A7DCC; --blue-light:#E6F1FE;
  --whatsapp:#25D366;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px;
  --shadow-sm:0 1px 3px rgba(83,74,183,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(83,74,183,.10),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:0 12px 40px rgba(83,74,183,.14),0 4px 12px rgba(0,0,0,.06);
  --shadow-card:0 2px 8px rgba(0,0,0,.06),0 0 0 1px rgba(83,74,183,.06);
  --nav-h:64px;
}

html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--dark); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }

.container { max-width:1160px; margin:0 auto; padding:0 28px; }
.container-narrow { max-width:720px; margin:0 auto; padding:0 28px; }

/* ─── BUTTONS ─── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; border-radius:var(--r-md); font-size:14px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:all .18s; font-family:inherit; white-space:nowrap; }
.btn-ghost { background:transparent; color:var(--purple); border:1.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--purple); background:var(--purple-light); }
.btn-primary { background:var(--purple); color:#fff; border:1.5px solid var(--purple); }
.btn-primary:hover { background:var(--purple-dark); border-color:var(--purple-dark); transform:translateY(-1px); box-shadow:0 4px 14px rgba(83,74,183,.3); }
.btn-amber { background:var(--amber); color:#fff; border:1.5px solid var(--amber); }
.btn-amber:hover { background:#d98f1f; transform:translateY(-1px); box-shadow:0 4px 14px rgba(239,159,39,.35); }
.btn-white { background:#fff; color:var(--purple); border:1.5px solid #fff; }
.btn-white:hover { background:rgba(255,255,255,.9); }
.btn-danger { background:transparent; color:var(--red); border:1.5px solid var(--border); }
.btn-danger:hover { border-color:var(--red); background:var(--red-light); }
.btn-lg { padding:13px 26px; font-size:15px; }
.btn-full { width:100%; }
.btn-block { width:100%; }

/* ─── NAVBAR ─── */
.nav { position:sticky; top:0; z-index:200; background:var(--white); border-bottom:1px solid var(--border); height:var(--nav-h); }
.nav-inner { max-width:1160px; margin:0 auto; padding:0 28px; height:100%; display:flex; align-items:center; gap:28px; }
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo svg { height:36px; width:auto; }
.nav-links { display:flex; align-items:center; gap:4px; flex:1; }
.nav-links a { color:var(--body); text-decoration:none; font-size:14px; font-weight:500; padding:6px 14px; border-radius:var(--r-md); transition:all .15s; }
.nav-links a:hover { color:var(--purple); background:var(--purple-light); }
.nav-links a.active { color:var(--purple); background:var(--purple-light); font-weight:600; }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-lang { display:flex; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.nav-lang button { padding:5px 10px; border:none; cursor:pointer; background:transparent; color:var(--muted); font-size:12px; font-weight:600; font-family:inherit; }
.nav-lang button.active { background:var(--purple); color:#fff; }

/* ─── PAGE HEADER BANNER ─── */
.page-banner { background:linear-gradient(145deg,#F4F2FD 0%,#FAFAF8 55%,#FEF8EE 100%); padding:56px 0; border-bottom:1px solid var(--border); }
.page-banner h1 { font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-0.025em; color:var(--dark); }
.page-banner p { font-size:17px; color:var(--muted); margin-top:12px; max-width:560px; }
.page-banner.center { text-align:center; }
.page-banner.center p { margin-left:auto; margin-right:auto; }
.eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--purple); text-transform:uppercase; margin-bottom:12px; }
.eyebrow::before { content:''; width:18px; height:2px; background:var(--amber); border-radius:2px; }
.eyebrow.center { justify-content:center; }

/* ─── CARD ─── */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); }
.card-pad { padding:28px; }

/* ─── FORM ─── */
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label { font-size:13px; font-weight:600; color:var(--body); }
.field .hint { font-size:12px; color:var(--muted); font-weight:400; }
.field input, .field select, .field textarea {
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--r-md);
  font-size:14px; font-family:inherit; color:var(--dark); outline:none; background:var(--white);
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-light); }
.field input::placeholder, .field textarea::placeholder { color:var(--subtle); }
.field textarea { resize:vertical; min-height:90px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.required { color:var(--red); }

.checkbox-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1.5px solid var(--border); border-radius:999px; cursor:pointer; font-size:13px; font-weight:500; transition:all .15s; user-select:none; }
.checkbox-pill:hover { border-color:var(--purple-mid); }
.checkbox-pill input { display:none; }
.checkbox-pill.checked { background:var(--purple); color:#fff; border-color:var(--purple); }

/* ─── FOOTER ─── */
.footer { background:var(--dark); color:rgba(255,255,255,.75); padding:56px 0 0; margin-top:64px; }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; margin-bottom:40px; }
.footer-brand p { font-size:14px; line-height:1.65; margin-top:16px; max-width:260px; }
.footer-col h5 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:14px; color:rgba(255,255,255,.65); text-decoration:none; transition:color .15s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(255,255,255,.35); flex-wrap:wrap; gap:12px; }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { color:rgba(255,255,255,.45); text-decoration:none; }
.footer-legal a:hover { color:rgba(255,255,255,.75); }

/* ─── BADGES / CHIPS ─── */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
.badge-green { background:var(--green-light); color:var(--green); }
.badge-amber { background:var(--amber-light); color:#b9791a; }
.badge-purple { background:var(--purple-light); color:var(--purple); }
.badge-red { background:var(--red-light); color:var(--red); }
.badge-gray { background:#F0F0EE; color:var(--muted); }
.badge-blue { background:var(--blue-light); color:var(--blue); }

/* ─── TOAST ─── */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--dark); color:#fff; padding:13px 22px; border-radius:999px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all .3s; z-index:400; display:flex; align-items:center; gap:9px; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg { color:var(--green); }

/* ─── MODAL ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(44,44,42,.5); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:500; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--white); border-radius:var(--r-2xl); box-shadow:var(--shadow-lg); width:100%; max-width:480px; padding:28px; position:relative; max-height:88vh; overflow-y:auto; }
.modal-close { position:absolute; top:18px; right:18px; width:30px; height:30px; border:none; background:var(--bg); border-radius:50%; cursor:pointer; font-size:18px; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--border); }

/* utility */
.muted { color:var(--muted); }
.center { text-align:center; }
.mt-0 { margin-top:0; } .mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.divider { border:none; border-top:1px solid var(--border); margin:24px 0; }