/* ================================================================
   KODI POLISH — modern layer, loaded AFTER kodi-shared.css
   Koinder Global Limited · © Glory N. Nweke

   This file only ADDS. It never removes. If it fails to load, the
   site still works exactly as before — that is deliberate, because
   a stylesheet should never be able to take a site down.
   ================================================================ */

:root{
  --k-purple:#1E0F4A; --k-purple-mid:#3D2470; --k-purple-soft:#F4F1FE;
  --k-peach:#F97316;  --k-peach-dark:#C2410C; --k-mint:#06D6A0;
  --k-line:#E8E2F8;   --k-muted:#6B5FA8;      --k-paper:#FAF9FE;
  --k-r-sm:10px; --k-r:14px; --k-r-lg:20px;
  --k-shadow:0 2px 4px rgba(30,15,74,.04), 0 8px 24px rgba(30,15,74,.08);
  --k-shadow-lg:0 4px 8px rgba(30,15,74,.06), 0 16px 40px rgba(30,15,74,.14);
  --k-ease:cubic-bezier(.34,1.2,.5,1);
}

/* ---------------- BUTTONS -------------------------------------
   Every button on the site — including raw <button> tags that had
   no class at all, which is why they showed as grey browser
   defaults in the screenshots. */
button,
.pay-btn, .unlock-cta-btn, .account-submit-btn, .encouragement-close-btn,
.load-btn, .ksh-go, input[type=submit]{
  font-family:'Fredoka','Nunito',system-ui,sans-serif;
  font-size:1rem; font-weight:600; line-height:1.2;
  border:none; border-radius:var(--k-r);
  padding:13px 24px; cursor:pointer;
  background:linear-gradient(135deg,var(--k-peach),#EA6306);
  color:#fff;
  box-shadow:0 4px 0 var(--k-peach-dark), var(--k-shadow);
  transition:transform .12s var(--k-ease), box-shadow .12s, filter .12s;
  -webkit-tap-highlight-color:transparent;
  min-height:46px;                    /* comfortable thumb target */
}
button:hover, .pay-btn:hover, .unlock-cta-btn:hover,
.account-submit-btn:hover, .load-btn:hover, .ksh-go:hover{
  filter:brightness(1.06); transform:translateY(-1px);
}
button:active, .pay-btn:active, .unlock-cta-btn:active,
.account-submit-btn:active, .load-btn:active{
  transform:translateY(3px); box-shadow:0 1px 0 var(--k-peach-dark);
}
button:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}

/* quieter secondary actions — "Maybe later", "Close", tabs */
.ksh-later, .modal-close, .encouragement-close-btn.secondary,
button.secondary, .account-tab-btn{
  background:#fff !important; color:var(--k-purple-mid) !important;
  border:2px solid var(--k-line) !important;
  box-shadow:none !important; font-weight:600;
}
.ksh-later:hover, button.secondary:hover, .account-tab-btn:hover{
  border-color:var(--k-purple-mid) !important; background:var(--k-purple-soft) !important;
}
.account-tab-btn.active{
  background:var(--k-purple-mid) !important; color:#fff !important;
  border-color:var(--k-purple-mid) !important;
}

/* text links that act as buttons */
.upgrade-link{
  display:inline-block; color:var(--k-purple-mid); font-weight:600;
  text-decoration:none; border-bottom:2px solid var(--k-line);
  padding-bottom:2px; transition:border-color .15s,color .15s;
}
.upgrade-link:hover{color:var(--k-peach); border-color:var(--k-peach)}

/* ---------------- INPUTS --------------------------------------
   The screenshots showed bare browser inputs. 16px font is not a
   style choice — anything smaller makes iPhones zoom on focus. */
input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=number], input[type=search],
input[type=date], select, textarea{
  font-family:'Nunito',system-ui,sans-serif;
  font-size:16px;
  width:100%; padding:13px 15px;
  border:2px solid var(--k-line); border-radius:var(--k-r);
  background:#fff; color:var(--k-purple);
  transition:border-color .15s, box-shadow .15s;
  min-height:46px;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--k-peach);
  box-shadow:0 0 0 4px rgba(249,115,22,.14);
}
input::placeholder{color:#A79ACC}

/* keyboard users must always see where they are */
:focus-visible{outline:3px solid var(--k-peach); outline-offset:2px; border-radius:6px}

/* ---------------- MODALS --------------------------------------
   These were the panels stacking down the page. */
.modal-overlay, .encouragement-overlay{
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  background:rgba(20,11,51,.62) !important;
  padding:16px; overflow-y:auto;
}
.modal-box, .encouragement-box, .page-lock-box, .ksh-card{
  border-radius:var(--k-r-lg) !important;
  box-shadow:var(--k-shadow-lg) !important;
  border:none !important;
  max-width:440px; width:100%;
  max-height:90vh; overflow-y:auto;
  animation:kPop .32s var(--k-ease);
}
@keyframes kPop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}

.modal-close{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; min-height:36px;
  padding:0; border-radius:50% !important;
  display:grid; place-items:center; font-size:1.1rem;
}

/* ---------------- THE PAYWALL ---------------------------------
   Screenshot 1: a flat list of features with no shape at all. */
.page-lock-box, .modal-box{ padding:28px 26px !important; text-align:left }
.lock-emoji-big{ display:block; text-align:center; font-size:2.6rem; margin-bottom:6px }
.modal-subhead{ text-align:center; color:var(--k-muted); margin-bottom:16px; font-size:.95rem }
.price{
  display:block; text-align:center;
  font-family:'Fredoka',sans-serif; font-size:2.3rem; line-height:1;
  color:var(--k-purple); margin:4px 0 18px;
}
/* the feature list becomes readable rows */
.modal-box ul, .page-lock-box ul{ list-style:none; padding:0; margin:0 0 20px }
.modal-box ul li, .page-lock-box ul li{
  display:flex; gap:11px; align-items:flex-start;
  padding:10px 13px; margin-bottom:7px;
  background:var(--k-purple-soft); border-radius:var(--k-r-sm);
  font-size:.93rem; line-height:1.45; color:var(--k-purple);
}
/* stack the payment fields instead of cramming them in a row */
.modal-box input, .page-lock-box input{ margin-bottom:11px }
.pay-btn, .unlock-cta-btn{ width:100%; margin-top:4px }

/* ---------------- ACCOUNT PANEL -------------------------------
   Screenshot 2 */
.account-tabs{ display:flex; gap:8px; margin-bottom:18px }
.account-tab-btn{ flex:1; padding:11px !important; min-height:44px }
.account-form{ display:none } .account-form.active{ display:block }
.account-form input{ margin-bottom:11px }
.account-submit-btn{ width:100%; margin-top:4px }
.account-error{
  background:#FEF2F4; color:#BE123C; border-radius:var(--k-r-sm);
  padding:10px 13px; font-size:.87rem; font-weight:600; margin-bottom:11px;
}
.account-success{
  background:#F0FDF9; color:#047857; border-radius:var(--k-r-sm);
  padding:10px 13px; font-size:.87rem; font-weight:600; margin-bottom:11px;
}

/* ---------------- START HERE CARD -----------------------------
   Screenshot 2, the "START HERE" block */
.ksh-card{ padding:26px !important; text-align:center }
.ksh-bot{ font-size:2.4rem; line-height:1; margin-bottom:6px; display:block }
.ksh-title{
  font-family:'Fredoka',sans-serif; font-size:1.3rem;
  color:var(--k-purple); margin-bottom:7px; display:block;
}
.ksh-sub{ color:var(--k-muted); font-size:.93rem; margin-bottom:14px; display:block }
.ksh-free{
  display:inline-block; background:linear-gradient(135deg,var(--k-mint),#059669);
  color:#fff; font-weight:800; font-size:.74rem; letter-spacing:.7px;
  padding:6px 15px; border-radius:999px; margin-bottom:16px;
}
.ksh-go{ width:100%; text-decoration:none; display:block; text-align:center }
.ksh-later{ display:block; width:100%; margin-top:9px }

/* ---------------- ENCOURAGEMENT -------------------------------- */
.encouragement-box{ padding:28px 26px !important; text-align:center }
.encouragement-smiley{ font-size:2.6rem; display:block; margin-bottom:8px }
.encouragement-text{ font-size:1.05rem; line-height:1.6; color:var(--k-purple); margin-bottom:14px }
.encouragement-signature{ color:var(--k-peach); font-weight:700; font-size:.92rem }
.encouragement-copyright{ color:#A79ACC; font-size:.72rem; margin-top:12px }
.encouragement-close-btn{ width:100%; margin-top:16px }

/* ---------------- CARDS ---------------------------------------- */
.lesson-card, .course-card, .card{
  border-radius:var(--k-r-lg);
  box-shadow:var(--k-shadow);
  transition:transform .16s var(--k-ease), box-shadow .16s;
}
.lesson-card:hover, .course-card:hover{
  transform:translateY(-3px); box-shadow:var(--k-shadow-lg);
}

/* ---------------- NAV ------------------------------------------ */
.kodi-nav{ gap:6px; padding:10px 12px }
.kodi-nav a{
  border-radius:999px; padding:9px 15px;
  transition:background .14s, color .14s; white-space:nowrap;
}
.kodi-nav a:hover{ background:var(--k-purple-soft) }
.kodi-nav a.active{ background:var(--k-purple-mid); color:#fff }

/* ---------------- MOBILE ---------------------------------------
   Most of your learners are on a phone. */
@media (max-width:640px){
  .modal-box, .encouragement-box, .page-lock-box, .ksh-card{
    padding:22px 18px !important; max-height:92vh;
  }
  .price{ font-size:2rem }
  button, .pay-btn, .unlock-cta-btn, .account-submit-btn{
    width:100%; padding:14px 18px;
  }
  .kodi-nav{ overflow-x:auto; -webkit-overflow-scrolling:touch;
             flex-wrap:nowrap; justify-content:flex-start }
  .kodi-nav::-webkit-scrollbar{ display:none }
  .modal-box ul li, .page-lock-box ul li{ font-size:.88rem; padding:9px 11px }
}

/* very small phones */
@media (max-width:380px){
  .ksh-title{ font-size:1.15rem }
  .encouragement-text{ font-size:.97rem }
}

/* ---------------- ACCESSIBILITY -------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  button:hover, .lesson-card:hover{ transform:none !important }
}

/* ---------------- PRINT ----------------------------------------
   You print guest passes, so make that page behave. */
@media print{
  .kodi-nav, .modal-overlay, .encouragement-overlay, button{ display:none !important }
  body{ background:#fff }
}