/* ============================================================
   Skool.Cool — "Trust & Modern" theme layer (ADDITIVE)
   Loaded LAST so it overrides the Landrick template.
   Safe to remove to fully revert to the old look.
   Design tokens mirror design-mockups/skool-prototype.html
   ============================================================ */
:root{
  --sk-teal-900:#06302E;
  --sk-teal-700:#0E5C5C;
  --sk-teal-500:#1E8C84;
  --sk-teal-300:#39C2A8;
  --sk-teal-100:#D7F0EB;
  --sk-teal-50:#EAF7F5;
  --sk-orange:#F2A03D;
  --sk-ink:#16201F;
  --sk-body:#48595A;
  --sk-muted:#5E6F6F;   /* darkened from #8A9A9A → ~4.6:1 on white (WCAG AA) */
  --sk-line:#E7EDEC;
  --sk-bg:#F6F9F9;
  --sk-green:#147A52; --sk-green-soft:#E2F6EE;  /* darkened from #1FB57A → AA on white for prices/badges */
  --sk-red:#E5564B; --sk-red-soft:#FCE8E6;
  --sk-blue:#3B82C4; --sk-blue-soft:#E6F0F9;
  --r-sm:10px;
  --sk-r:16px;
  --sk-r-lg:22px;
  --sk-r-pill:999px;
  --sk-sh-sm:0 2px 8px rgba(14,92,92,.06);
  --sk-sh:0 8px 28px rgba(14,92,92,.10);
  --sk-sh-lg:0 18px 50px rgba(14,92,92,.16);

  /* remap Bootstrap primary to teal */
  --bs-primary:#0E5C5C;
  --bs-primary-rgb:14,92,92;
  --bs-link-color:#0E5C5C;
  --bs-link-hover-color:#06302E;
  --bs-font-sans-serif:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Keyboard focus visibility (WCAG 2.4.7) ----
   Restores a visible focus ring for keyboard users. Replaces the old
   global `body *{outline:none}` (removed from custom.css). Mouse clicks
   don't trigger :focus-visible, so this is keyboard-only and unobtrusive. */
:focus-visible{
  outline:2px solid var(--sk-teal-700);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- Mobile overflow & iOS guards (prevents horizontal cut/shift) ---- */
html{
  -webkit-text-size-adjust:100%;   /* stop iOS Safari from inflating text */
  text-size-adjust:100%;
}
html, body{
  max-width:100%;
  overflow-x:clip;                 /* clip horizontal overflow without breaking sticky */
}
img, svg, video, table{ max-width:100%; }

/* ---- Arabic typography (fixes Nunito not supporting Arabic) ---- */
html, body{
  font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.heading,.title{
  font-family:"IBM Plex Sans Arabic", system-ui, sans-serif !important;
  font-weight:700;
}

/* ---- primary color remap (covers Landrick hardcoded blue) ---- */
.text-primary{ color:var(--sk-teal-700) !important; }
.bg-primary{ background-color:var(--sk-teal-700) !important; }
.border-primary{ border-color:var(--sk-teal-700) !important; }

.btn-primary{
  background-color:var(--sk-teal-300) !important;
  border-color:var(--sk-teal-300) !important;
  color:var(--sk-teal-900) !important;
  font-weight:600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background-color:var(--sk-teal-500) !important;
  border-color:var(--sk-teal-500) !important;
  color:#fff !important;
}
.btn-soft-primary{
  background-color:var(--sk-teal-50) !important;
  border-color:var(--sk-teal-100) !important;
  color:var(--sk-teal-700) !important;
}
.btn-soft-primary:hover{
  background-color:var(--sk-teal-700) !important;
  color:#fff !important;
}
/* pill buttons (e.g. city filter) */
.btn-pills.btn-primary{
  background-color:var(--sk-teal-700) !important;
  border-color:var(--sk-teal-700) !important;
  color:#fff !important;
}
.btn-pills.btn-light{
  background-color:#fff !important;
  border:1px solid var(--sk-line) !important;
  color:var(--sk-body) !important;
}
.btn-pills.btn-light:hover{
  border-color:var(--sk-teal-300) !important;
  color:var(--sk-teal-700) !important;
}

a{ color:var(--sk-teal-700); }
a:hover{ color:var(--sk-teal-900); }

/* soft global polish */
body{ color:var(--sk-body); }
.text-muted{ color:var(--sk-muted) !important; }

/* ============================================================
   Reusable design-system components (used across pages)
   ============================================================ */
.sk-card{
  background:#fff; border:1px solid var(--sk-line); border-radius:18px; padding:24px; margin-bottom:20px;
}
.sk-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--sk-line);
}
.sk-card-head h2{ font-size:20px; font-weight:700; color:var(--sk-ink); margin:0; }
.sk-edit-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--sk-line); border-radius:999px; padding:8px 18px;
  color:var(--sk-teal-700); font-weight:600; font-size:14px; cursor:pointer; transition:.15s;
}
.sk-edit-btn:hover{ border-color:var(--sk-teal-300); background:var(--sk-teal-50); color:var(--sk-teal-700); }
.sk-edit-btn .fea{ width:16px; height:16px; }

/* info rows as soft mini-cards (Metronic settings pattern: bg-muted rounded) */
.sk-info{ display:flex; flex-direction:column; gap:10px; }
.sk-info-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 16px; background:var(--sk-bg); border-radius:12px; font-size:15px;
}
.sk-info-row span{ color:var(--sk-muted); }
.sk-info-row b{ color:var(--sk-ink); font-weight:600; text-align:end; }

.sk-empty{
  text-align:center; padding:50px 20px; background:#fff; border:1px dashed var(--sk-line); border-radius:18px; color:var(--sk-muted);
}
.sk-empty .fea{ width:48px; height:48px; color:var(--sk-teal-300); margin-bottom:14px; }
.sk-empty .btn-primary, .sk-empty .sk-edit-btn{ margin-top:14px; }

/* ---- Registration / activity-status cards (profile current/previous) ---- */
.sk-childgroup{ margin-bottom:26px; }
.sk-childgroup-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sk-childgroup-head .av{ width:44px; height:44px; border-radius:50%; background:var(--sk-teal-100); color:var(--sk-teal-700); display:grid; place-items:center; font-weight:700; flex-shrink:0; }
.sk-childgroup-head b{ font-size:16px; color:var(--sk-ink); }
.sk-reg{ background:#fff; border:1px solid var(--sk-line); border-radius:16px; margin-bottom:12px; overflow:hidden; }
.sk-reg-head{ display:flex; align-items:center; gap:12px; padding:16px; cursor:pointer; }
.sk-reg-head:hover{ background:var(--sk-bg); }
.sk-reg-title{ flex:1; min-width:0; }
.sk-reg-title b{ display:block; color:var(--sk-ink); font-size:15.5px; }
.sk-reg-title small{ color:var(--sk-muted); font-size:13px; }
.sk-reg-chev{ color:var(--sk-muted); transition:transform .2s; flex-shrink:0; }
.sk-reg.open .sk-reg-chev{ transform:rotate(180deg); }
.sk-reg-body{ padding:0 16px 16px; }
.sk-status{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; flex-shrink:0; }
.sk-status.ok{ background:var(--sk-green-soft); color:#147a52; }
.sk-status.pend{ background:#FCF1DD; color:#9a6b1c; }
.sk-status.bad{ background:var(--sk-red-soft); color:#b53d33; }
.sk-status.neutral{ background:var(--sk-blue-soft); color:#2c6094; }
.sk-att{ margin-top:16px; border-top:1px solid var(--sk-line); padding-top:6px; }
.sk-att h4{ font-size:14px; color:var(--sk-ink); margin:8px 0; font-weight:700; }
.sk-att-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--sk-line); font-size:14px; }
.sk-att-row:last-child{ border-bottom:0; }
.sk-att-date{ flex:1; min-width:0; color:var(--sk-ink); }
.sk-att-date small{ display:block; color:var(--sk-muted); font-size:12px; }
.sk-att-note{ flex:1; min-width:0; color:var(--sk-muted); font-size:13px; }
.sk-att-badge{ font-size:12px; font-weight:600; padding:3px 12px; border-radius:999px; flex-shrink:0; }
.sk-att-badge.in{ background:var(--sk-green-soft); color:#147a52; }
.sk-att-badge.out{ background:var(--sk-red-soft); color:#b53d33; }

/* ---- Parent self-cancel (current activities) ---- */
.sk-cancel-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--sk-red); border-radius:999px; padding:8px 18px;
  background:#fff; color:var(--sk-red); font-weight:600; font-size:14px; cursor:pointer; transition:.15s;
}
.sk-cancel-btn:hover{ background:var(--sk-red-soft); }
.sk-cancel-btn .fea{ width:16px; height:16px; }
.sk-confirm{ margin-top:12px; background:var(--sk-red-soft); border:1px solid #f3c7c2; border-radius:14px; padding:14px 16px; }
.sk-confirm-text{ margin:0 0 12px; font-size:14.5px; color:#b53d33; }
.sk-confirm-text b{ color:#9a322a; }
.sk-confirm-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.sk-confirm-yes{
  border:0; cursor:pointer; background:var(--sk-red); color:#fff;
  font-family:inherit; font-weight:700; font-size:14px; padding:10px 18px; border-radius:12px; transition:.15s;
}
.sk-confirm-yes:hover{ background:#cf4338; }
.sk-confirm-yes:disabled{ opacity:.6; cursor:not-allowed; }
.sk-confirm-no{
  border:1.5px solid var(--sk-line); cursor:pointer; background:#fff; color:var(--sk-body);
  font-family:inherit; font-weight:600; font-size:14px; padding:10px 18px; border-radius:12px; transition:.15s;
}
.sk-confirm-no:hover{ border-color:var(--sk-muted); background:var(--sk-bg); }
.sk-contact-hint{ margin-top:12px; font-size:13.5px; color:var(--sk-muted); background:var(--sk-bg); border:1px dashed var(--sk-line); border-radius:12px; padding:10px 14px; }
@media (max-width:480px){
  .sk-cancel-btn, .sk-confirm-yes, .sk-confirm-no{ width:100%; justify-content:center; }
  .sk-confirm-actions{ flex-direction:column; }
}

/* ---- Forms (reusable) ---- */
.sk-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 560px){ .sk-form-grid{ grid-template-columns:1fr; } }
.sk-form-row{ margin-bottom:18px; }
.sk-label{ display:block; font-size:14px; font-weight:600; color:var(--sk-ink); margin-bottom:7px; }
.sk-label .req{ color:var(--sk-red); }
.sk-input{
  width:100%; border:1px solid var(--sk-line); border-radius:var(--r-sm); padding:12px 14px;
  font-family:inherit; font-size:15px; color:var(--sk-ink); background:#fff; transition:.15s;
}
.sk-input:focus{ outline:0; border-color:var(--sk-teal-300); box-shadow:0 0 0 3px var(--sk-teal-50); }
.sk-input::placeholder{ color:var(--sk-muted); }
.sk-input:read-only{ background:var(--sk-bg); color:var(--sk-muted); }
select.sk-input{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A9A9A' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center;
}
.sk-help{ font-size:13px; color:var(--sk-muted); margin-top:6px; }
.sk-phone{ display:flex; gap:8px; }
.sk-phone-key{ flex-shrink:0; display:flex; align-items:center; padding:0 14px; background:var(--sk-bg); border:1px solid var(--sk-line); border-radius:var(--r-sm); font-weight:600; color:var(--sk-ink); direction:ltr; }
.sk-err{ font-size:13px; color:var(--sk-red); margin-top:6px; }
.sk-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; background:var(--sk-teal-300); color:var(--sk-teal-900);
  font-family:inherit; font-weight:700; font-size:16px; padding:13px 26px; border-radius:14px; transition:.18s;
}
.sk-btn-primary:hover{ background:var(--sk-teal-700); color:#fff; }
.sk-form-actions{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.sk-formpage{ padding:36px 0 70px; background:var(--sk-bg); min-height:60vh; }
.sk-formpage .sk-card{ max-width:760px; margin:0 auto; }

/* ---- Error pages ---- */
.sk-errpage{ min-height:100dvh; display:grid; place-items:center; text-align:center; padding:40px 20px; background:var(--sk-bg); }
.sk-errpage .code{ font-size:84px; font-weight:800; color:var(--sk-teal-300); line-height:1; }
.sk-errpage h1{ font-size:26px; margin:10px 0; color:var(--sk-ink); }
.sk-errpage p{ max-width:430px; margin:0 auto 24px; color:var(--sk-body); }

/* ---- Static page hero + content ---- */
.sk-page-hero{ background:linear-gradient(160deg,var(--sk-teal-700),var(--sk-teal-900)); color:#fff; padding:48px 0; text-align:center; }
.sk-page-hero h1{ color:#fff; font-size:32px; margin:0; }
.sk-page-hero p{ color:rgba(255,255,255,.82); margin-top:8px; }
.sk-page-wrap{ padding:48px 0 70px; background:var(--sk-bg); }
.sk-page-wrap .container{ max-width:900px; }
.trust{ background:var(--sk-teal-900); color:#fff; border-radius:var(--sk-r-lg); padding:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.trust b{ display:block; font-size:30px; color:var(--sk-teal-300); }
.trust span{ font-size:14px; color:rgba(255,255,255,.78); }
@media (max-width:600px){ .trust{ grid-template-columns:repeat(2,1fr); padding:26px; } }

/* ---- Footer ---- */
.sk-footer{ background:var(--sk-teal-900); color:rgba(255,255,255,.8); padding:54px 0 0; }
.sk-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; padding-bottom:34px; }
@media (max-width:760px){ .sk-footer-grid{ grid-template-columns:1fr 1fr; } .sk-footer-brand{ grid-column:1 / -1; } }
.sk-footer-logo{ height:48px; filter:brightness(0) invert(1); margin-bottom:14px; }
.sk-footer-brand p{ font-size:14.5px; max-width:330px; color:rgba(255,255,255,.7); line-height:1.8; }
.sk-footer-social{ display:flex; gap:10px; margin-top:18px; }
.sk-footer-social a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12); transition:.18s; }
/* keep all four glyphs identical size & perfectly centered (fix baseline/centering drift) */
.sk-footer-social a i-feather{ display:flex; align-items:center; justify-content:center; }
.sk-footer-social a .fea{ width:18px; height:18px; }
.sk-footer-social a svg{ display:block; }
.sk-footer-social a:hover{ background:var(--sk-teal-300); color:var(--sk-teal-900); border-color:transparent; }
.sk-footer h4{ color:#fff; font-size:15px; margin-bottom:14px; }
.sk-footer-grid a{ display:block; color:rgba(255,255,255,.72); font-size:14.5px; padding:5px 0; }
.sk-footer-grid a:hover{ color:#fff; }
.sk-footer-bar{ border-top:1px solid rgba(255,255,255,.12); padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13.5px; color:rgba(255,255,255,.6); }

/* ---- Contact ---- */
.sk-contact{ display:grid; grid-template-columns:1fr 1.2fr; gap:26px; align-items:start; }
@media (max-width:760px){ .sk-contact{ grid-template-columns:minmax(0,1fr); } }
.sk-contact-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.sk-contact-ic{ width:46px; height:46px; border-radius:13px; background:var(--sk-teal-50); color:var(--sk-teal-700); display:grid; place-items:center; flex-shrink:0; }
.sk-contact-item b{ display:block; color:var(--sk-ink); margin-bottom:2px; }
.sk-contact-item span, .sk-contact-item a{ color:var(--sk-body); font-size:14.5px; }

/* ---- Alerts (reusable) ---- */
.sk-alert{ display:flex; align-items:flex-start; gap:10px; border-radius:14px; padding:14px 16px; font-size:14.5px; margin:0 0 18px; }
.sk-alert .fea{ flex-shrink:0; margin-top:2px; width:18px; height:18px; }
.sk-alert-ok{ background:var(--sk-green-soft); color:#147a52; }
.sk-alert-info{ background:var(--sk-blue-soft); color:#2c6094; }
.sk-alert-err{ background:var(--sk-red-soft); color:#b53d33; }

/* ---- Auth pages (Metronic branded-auth pattern) ---- */
.sk-auth{ min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:860px){ .sk-auth{ grid-template-columns:minmax(0,1fr); } }
.sk-auth-brand{
  position:relative; overflow:hidden; color:#fff; padding:60px;
  background:linear-gradient(160deg,var(--sk-teal-700),var(--sk-teal-900));
  display:flex; flex-direction:column; justify-content:center;
}
.sk-auth-brand::after{ content:""; position:absolute; inset-inline-end:-100px; top:-100px; width:340px; height:340px; background:radial-gradient(circle,var(--sk-teal-300),transparent 65%); opacity:.3; }
.sk-auth-brand .b-logo{ height:48px; margin-bottom:26px; position:relative; filter:brightness(0) invert(1); align-self:flex-start; }
.sk-auth-brand h2{ color:#fff; font-size:30px; position:relative; }
.sk-auth-brand p{ color:rgba(255,255,255,.85); margin-top:12px; position:relative; max-width:380px; }
.sk-auth-brand ul{ list-style:none; margin-top:26px; position:relative; padding:0; }
.sk-auth-brand li{ display:flex; gap:10px; align-items:center; margin-bottom:14px; color:rgba(255,255,255,.92); }
.sk-auth-brand li .fea{ color:var(--sk-teal-300); flex-shrink:0; }
@media (max-width:860px){ .sk-auth-brand{ display:none; } }
.sk-auth-form{ display:flex; align-items:center; justify-content:center; padding:40px 20px; background:var(--sk-bg); }
.sk-auth-card{ width:100%; max-width:430px; background:#fff; border:1px solid var(--sk-line); border-radius:22px; padding:34px; box-shadow:var(--sk-sh); }
.sk-auth-logo{ height:46px; display:block; margin:0 auto 20px; }
.sk-auth-card h1{ font-size:25px; text-align:center; margin-bottom:6px; }
.sk-auth-card .lead{ color:var(--sk-body); text-align:center; margin-bottom:24px; font-size:15px; }
.sk-auth-alt{ text-align:center; margin-top:22px; font-size:14.5px; color:var(--sk-body); }
.sk-auth-alt a{ color:var(--sk-teal-700); font-weight:700; }
.sk-auth-foot{ text-align:center; color:var(--sk-muted); font-size:13px; margin-top:18px; }
.sk-hint{ background:var(--sk-teal-50); border:1px solid var(--sk-teal-100); border-radius:12px; padding:11px 14px; font-size:13.5px; color:var(--sk-teal-700); margin-bottom:18px; text-align:center; }
.sk-otp-input{ text-align:center; letter-spacing:10px; font-size:24px; font-weight:700; direction:ltr; }
.sk-resend{ text-align:center; color:var(--sk-muted); font-size:14px; margin-top:16px; }
.sk-resend a{ color:var(--sk-teal-700); font-weight:600; cursor:pointer; }
.sk-btn-primary.block{ width:100%; }
.sk-btn-primary:disabled{ opacity:.5; cursor:not-allowed; }