/*
Theme Name: Kyu TKD
Theme URI: https://kyutkd.club
Description: Lightweight custom theme for the Kyu Taekwondo member portal. No page builder, minimal CSS, fast loads. Reproduces the club branding (Poppins, teal palette, sage background) used previously on Astra + Elementor.
Author: MindSite
Version: 1.3.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kyutkd
*/

:root{
  --kt-teal:#024a59; --kt-teal2:#008aa7; --kt-green:#00a78b; --kt-darkgreen:#134940;
  --kt-bg:#cbdbd5; --kt-text:#334155; --kt-card:#ffffff;
  --kt-radius:14px; --kt-btnradius:10px; --kt-max:1240px;
  --kt-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--kt-font);font-size:16px;line-height:1.65;color:var(--kt-text);background:var(--kt-bg);}
img{max-width:100%;height:auto;}
a{color:var(--kt-teal);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--kt-font);color:var(--kt-teal);line-height:1.25;}

/* ---- header ---- */
.kt-header{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04);}
.kt-header-inner{max-width:var(--kt-max);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.kt-logo img,.kt-logo .custom-logo{display:block;height:64px;width:auto;}
.kt-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;align-items:center;flex-wrap:wrap;}
.kt-nav a{color:var(--kt-text);font-weight:500;font-size:16px;}
.kt-nav a:hover{color:var(--kt-teal);text-decoration:none;}
.kt-nav li{position:relative;}
.kt-nav .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);border-radius:10px;padding:8px;min-width:220px;z-index:50;}
.kt-nav li:hover>.sub-menu{display:block;}
.kt-nav .sub-menu li{display:block;}
.kt-nav .sub-menu a{display:block;padding:9px 12px;border-radius:8px;}
.kt-nav .sub-menu a:hover{background:#f1f6f7;color:var(--kt-teal);}
.kt-menu-toggle{display:none;background:var(--kt-teal);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-size:15px;font-family:var(--kt-font);cursor:pointer;}

/* ---- page-title banner ---- */
.kt-banner{background:var(--kt-teal);color:#fff;border-radius:var(--kt-btnradius);text-align:center;padding:22px 24px;margin:28px auto 26px;max-width:var(--kt-max);}
.kt-banner h1{margin:0;font-size:30px;font-weight:600;color:#fff;}

/* ---- content ---- */
.kt-main{min-height:40vh;}
.kt-content{max-width:var(--kt-max);margin:0 auto;padding:0 20px 50px;}
.kt-content h1,.kt-content h2,.kt-content h3{color:var(--kt-teal);}

/* ---- cards + buttons (dashboard + general) ---- */
.kt-card{background:var(--kt-card);border-radius:var(--kt-radius);padding:26px 26px 30px;margin:0 auto 28px;max-width:var(--kt-max);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.kt-card>h2{text-align:center;color:var(--kt-teal);font-size:28px;font-weight:600;margin:0 0 18px;}
.kt-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 18px;margin:0 0 12px;border-radius:var(--kt-btnradius);font-weight:600;font-size:15px;color:#fff;background:var(--kt-teal);text-align:center;border:2px solid transparent;}
.kt-btn:last-child{margin-bottom:0;}
.kt-btn:hover{opacity:.92;text-decoration:none;color:#fff;}
.kt-btn.is-teal2{background:var(--kt-teal2);}
.kt-btn.is-green{background:var(--kt-green);}
.kt-btn.is-darkgreen{background:var(--kt-darkgreen);}
.kt-btn.is-outline{background:#fff;color:var(--kt-teal);border-color:var(--kt-teal);}
.kt-btn.is-outline:hover{background:#f1f6f7;color:var(--kt-teal);opacity:1;}

/* ---- footer ---- */
.kt-footer{text-align:center;padding:34px 20px 46px;}
.kt-footer img{height:74px;width:auto;display:inline-block;}

/* ---- logged-out welcome ---- */
.kt-welcome{max-width:520px;margin:10px auto 0;text-align:center;}

/* ---- responsive ---- */
@media(max-width:880px){
  .kt-menu-toggle{display:inline-block;}
  .kt-nav{display:none;width:100%;}
  .kt-nav.open{display:block;}
  .kt-header-inner{flex-wrap:wrap;}
  .kt-nav ul{flex-direction:column;align-items:stretch;gap:2px;width:100%;padding-top:10px;}
  .kt-nav .sub-menu{position:static;display:block;box-shadow:none;padding:0 0 0 14px;min-width:0;}
  .kt-banner h1{font-size:24px;}
}

/* ============================================================
   v1.1.0 — production polish: a11y, auth pages, tips, responsive
   ============================================================ */

/* ---- accessibility ---- */
.kt-skip-link{position:absolute;left:8px;top:-50px;background:var(--kt-teal);color:#fff;padding:10px 16px;border-radius:0 0 8px 8px;z-index:100000;transition:top .15s;}
.kt-skip-link:focus{top:0;text-decoration:none;color:#fff;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.kt-btn:focus-visible{outline:3px solid #e08a1e;outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}

/* ---- global safety (no horizontal scroll, media fit) ---- */
html,body{overflow-x:hidden;max-width:100%;}
.kt-content img,.kt-card img,.kt-banner img{max-width:100%;height:auto;}

/* ---- auth pages: login / register / forgot / set-password ---- */
.kt-content > .kyu-auth{max-width:480px;margin:0 auto;background:#fff;border-radius:var(--kt-radius);padding:28px 28px 30px;box-shadow:0 1px 3px rgba(0,0,0,.07);}
.kt-content > .kyu-auth h3{margin:0 0 18px;color:var(--kt-teal);font-size:1.2rem;font-weight:700;}
.kt-content > .kyu-auth .kyu-auth-form p{margin:0 0 14px;}
.kt-content > .kyu-auth .kyu-auth-form label{display:block;font-weight:600;font-size:.86rem;color:#3a565b;margin-bottom:5px;}
.kt-content > .kyu-auth .kyu-auth-form input,
.kt-content > .kyu-auth .kyu-auth-form select{width:100%;padding:12px 13px;border:1px solid #cdd9d8;border-radius:9px;font-size:16px;font-family:var(--kt-font);color:#13343b;background:#fff;}
.kt-content > .kyu-auth .kyu-auth-form input:focus{outline:none;border-color:var(--kt-teal);box-shadow:0 0 0 3px rgba(2,74,89,.14);}
.kt-content > .kyu-auth .kyu-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--kt-teal);color:#fff;border:0;border-radius:9px;padding:13px 24px;font-size:16px;font-weight:600;font-family:var(--kt-font);cursor:pointer;width:100%;}
.kt-content > .kyu-auth .kyu-btn:hover{background:#01323d;color:#fff;text-decoration:none;}
.kt-content > .kyu-auth .kyu-auth-links{margin:16px 0 0;font-size:.92rem;text-align:center;color:#566;}
.kt-content > .kyu-auth .kyu-auth-links a{color:var(--kt-teal);font-weight:600;}

/* auth alerts + register confirmation */
.kyu-auth-ok,.kyu-auth-err{border-radius:9px;padding:12px 14px;margin:0 0 16px;font-size:.95rem;line-height:1.5;}
.kyu-auth-ok{background:#e8f5ee;border:1px solid #b6e0c7;color:#137333;}
.kyu-auth-err{background:#fcecec;border:1px solid #f2c2c2;color:#b3261e;}
.kyu-auth-err ul{margin:0;padding-left:18px;}

/* ---- collapsible tips / help (native <details>, e.g. upload pages) ---- */
.kt-content details{background:#fff;border:1px solid #d9e4e3;border-radius:12px;margin:14px 0;max-width:var(--kt-max);overflow:hidden;}
.kt-content details>summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:600;color:var(--kt-teal);display:flex;align-items:center;gap:10px;}
.kt-content details>summary::-webkit-details-marker{display:none;}
.kt-content details>summary::before{content:"";width:9px;height:9px;border-right:2px solid var(--kt-teal);border-bottom:2px solid var(--kt-teal);transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;}
.kt-content details[open]>summary::before{transform:rotate(45deg);}
.kt-content details>summary:hover{background:#f1f6f7;}
.kt-content details>*:not(summary){padding:0 18px 16px;}
.kt-content details p,.kt-content details ul,.kt-content details ol{margin:0 0 10px;}

/* spacing for content headings (e.g. "Uploading & recording tips") */
.kt-content > h2,.kt-content > h3,.kt-content > h4{margin-top:26px;}
.kt-content > h2:first-child,.kt-content > h3:first-child,.kt-content > h4:first-child{margin-top:0;}

/* ---- footer polish ---- */
.kt-footer img{height:70px;}
.kt-footer-tag{margin:12px 0 0;font-size:.82rem;color:#5d7378;}
.kt-footer-tag a{color:var(--kt-teal);}

/* ---- responsive hardening ---- */
@media(max-width:880px){
  .kt-header-inner{padding:12px 16px;}
  .kt-menu-toggle{min-height:44px;}
  .kt-nav ul{padding-top:8px;}
  .kt-nav>ul>li>a{padding:11px 4px;font-size:17px;}
  .kt-nav .sub-menu a{padding:10px 12px;}
  .kt-banner{margin:18px auto;padding:18px 16px;}
  .kt-content{padding:0 16px 40px;}
  .kt-card{padding:20px 16px 24px;}
  .kt-card>h2{font-size:24px;}
  .kt-content > .kyu-auth{padding:22px 18px 24px;}
}
@media(max-width:480px){
  .kt-banner h1{font-size:21px;}
  .kt-logo img,.kt-logo .custom-logo{height:54px;}
  .kt-btn{font-size:14.5px;padding:13px 14px;}
}

/* v1.1.1 fix: page-content <details> summaries shipped a raw inline SVG marker with no size,
   which ballooned inside the flex summary. Hide it (theme provides its own chevron). */
.kt-content details > summary svg{display:none!important;}
.kt-content details svg{max-width:22px;max-height:22px;}

/* ============================================================
   v1.2.0 — contrast, icons, accordions, mobile menu, dark mode
   ============================================================ */

/* ---- button icons (dashboard) ---- */
.kt-bi{width:19px;height:19px;flex:0 0 auto;}

/* ---- contrast pass (WCAG AA) ---- */
.kt-footer-tag{color:#43585c;}
.kt-content > .kyu-auth .kyu-auth-links{color:#3f5559;}
.kyu-prof .kyu-btn{background:#0e6a2c;}
.kyu-prof .kyu-btn:hover{background:#0a5122;}
.kt-content .kyu-prof-hint,.kt-content .kyu-myup-empty,.kt-content .kyu-prof-since{color:#41575b;}

/* ---- header layout + theme toggle ---- */
.kt-header-inner{justify-content:flex-start;gap:22px;}
.kt-nav{margin-left:auto;}
.kt-header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.kt-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #d4e1df;background:#fff;border-radius:11px;cursor:pointer;color:var(--kt-teal);padding:0;}
.kt-theme-toggle:hover{background:#f1f6f7;}
.kt-theme-toggle svg{width:20px;height:20px;}
.kt-theme-toggle .kt-icon-sun{display:none;}
:root[data-theme=dark] .kt-theme-toggle .kt-icon-sun{display:block;}
:root[data-theme=dark] .kt-theme-toggle .kt-icon-moon{display:none;}

/* ---- animated hamburger ---- */
.kt-menu-toggle{display:none;width:44px;height:44px;padding:0;align-items:center;justify-content:center;background:var(--kt-teal);border:0;border-radius:11px;cursor:pointer;}
.kt-burger,.kt-burger::before,.kt-burger::after{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,top .2s,background .2s;}
.kt-burger{position:relative;}
.kt-burger::before,.kt-burger::after{content:"";position:absolute;left:0;}
.kt-burger::before{top:-6px;}
.kt-burger::after{top:6px;}
.kt-menu-toggle[aria-expanded=true] .kt-burger{background:transparent;}
.kt-menu-toggle[aria-expanded=true] .kt-burger::before{top:0;transform:rotate(45deg);}
.kt-menu-toggle[aria-expanded=true] .kt-burger::after{top:0;transform:rotate(-45deg);}

/* ---- accordions reworked (better edge spacing) ---- */
.kt-content > h2{font-size:1.04rem;color:#3a565b;font-weight:600;margin:28px 0 6px;}
.kt-content details{margin:12px 0;border:1px solid #d4e1df;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.kt-content details>summary{padding:16px 20px;font-size:1rem;font-weight:600;color:var(--kt-teal);gap:12px;}
.kt-content details[open]>summary{border-bottom:1px solid #eef3f2;}
.kt-content details>summary::before{width:10px;height:10px;}
.kt-content details>*:not(summary){padding:16px 20px 18px;}
.kt-content details ul,.kt-content details ol{margin:0;padding-left:22px;}
.kt-content details li{margin:0 0 9px;line-height:1.55;}
.kt-content details li:last-child{margin-bottom:0;}
.kt-content details p{margin:0 0 10px;}
.kt-content details p:last-child{margin-bottom:0;}

/* ---- mobile menu (dropdown panel) ---- */
@media(max-width:880px){
  .kt-header{position:relative;}
  .kt-header-inner{flex-wrap:nowrap;padding:12px 16px;}
  .kt-nav{margin-left:0;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 14px 28px rgba(0,0,0,.14);border-top:1px solid #eef3f2;display:none;z-index:60;max-height:80vh;overflow:auto;}
  .kt-nav.open{display:block;}
  .kt-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0;}
  .kt-nav>ul>li{border-bottom:1px solid #f0f4f3;position:static;}
  .kt-nav>ul>li:last-child{border-bottom:0;}
  .kt-nav>ul>li>a{display:block;padding:15px 20px;font-size:16px;}
  .kt-nav .sub-menu{position:static;display:block;box-shadow:none;border-radius:0;padding:0;min-width:0;background:#f6faf9;}
  .kt-nav .sub-menu a{padding:13px 20px 13px 38px;font-size:15px;}
  .kt-menu-toggle{display:inline-flex;}
}

/* ---- dark mode ---- */
:root[data-theme="dark"]{--kt-bg:#0e1c20;--kt-text:#d9e6e3;--kt-card:#17282d;}
[data-theme=dark] body{background:var(--kt-bg);color:var(--kt-text);}
[data-theme=dark] .kt-header{background:#12242a;box-shadow:0 1px 0 rgba(255,255,255,.05);}
[data-theme=dark] .kt-nav a{color:#cfe0dd;}
[data-theme=dark] .kt-nav a:hover{color:#74cadb;}
[data-theme=dark] .kt-nav{background:#16282e;border-top-color:#243a40;}
[data-theme=dark] .kt-nav .sub-menu{background:#1b2f35;}
[data-theme=dark] .kt-nav>ul>li{border-bottom-color:#23383e;}
[data-theme=dark] .kt-theme-toggle{background:#1c2f35;border-color:#2c4148;color:#cfe0dd;}
[data-theme=dark] .kt-content h1,[data-theme=dark] .kt-content h2,[data-theme=dark] .kt-content h3,[data-theme=dark] .kt-content h4,[data-theme=dark] .kt-card>h2{color:#74cadb;}
[data-theme=dark] .kt-content > h2{color:#9fb3b6;}
[data-theme=dark] .kt-card{background:var(--kt-card);box-shadow:0 1px 4px rgba(0,0,0,.45);}
[data-theme=dark] .kt-btn.is-outline{background:#16282d;color:#74cadb;border-color:#2c8ea0;}
[data-theme=dark] .kt-btn.is-outline:hover{background:#1d3036;color:#9fdfec;}
[data-theme=dark] .kt-footer-tag{color:#86999d;}
[data-theme=dark] a{color:#74cadb;}
/* dark: accordions / details */
[data-theme=dark] .kt-content details{background:#17282d;border-color:#2a3f45;box-shadow:none;}
[data-theme=dark] .kt-content details>summary{color:#74cadb;}
[data-theme=dark] .kt-content details[open]>summary{border-color:#243a40;}
[data-theme=dark] .kt-content details>summary:hover{background:#1d3036;}
[data-theme=dark] .kt-content details>summary::before{border-color:#74cadb;}
/* dark: plugin cards + auth + profile + uploader + galleries */
[data-theme=dark] .kt-content > .kyu-auth,
[data-theme=dark] .kyu-prof .kyu-auth,
[data-theme=dark] .kyu-ut-card,
[data-theme=dark] .kyu-vw-card,
[data-theme=dark] .kyu-myup-card,
[data-theme=dark] .kyu-vw-select,
[data-theme=dark] .kyu-prof-notify{background:#17282d!important;border-color:#2a3f45!important;color:var(--kt-text);}
[data-theme=dark] .kyu-prof, [data-theme=dark] .kyu-ut, [data-theme=dark] .kyu-vw, [data-theme=dark] .kyu-myup{color:var(--kt-text);}
[data-theme=dark] .kt-content > .kyu-auth h3,
[data-theme=dark] .kyu-prof .kyu-auth h3,
[data-theme=dark] .kyu-ut-card h3,[data-theme=dark] .kyu-ut-card h4{color:#74cadb;}
[data-theme=dark] .kyu-prof-check,[data-theme=dark] .kyu-auth-form label,[data-theme=dark] .kyu-ut-field label,[data-theme=dark] .kyu-ut label{color:#b6c8ca!important;}
[data-theme=dark] .kt-content input,[data-theme=dark] .kt-content select,[data-theme=dark] .kt-content textarea{background:#0e1c20!important;color:#e6f0ee!important;border-color:#33474d!important;}
[data-theme=dark] .kt-content input::placeholder{color:#7d9296;}
[data-theme=dark] .kyu-prof-hint,[data-theme=dark] .kyu-prof-since,[data-theme=dark] .kt-content .kyu-myup-empty,[data-theme=dark] .kyu-ut-sub{color:#92a6aa!important;}
[data-theme=dark] .kyu-auth-ok{background:#10271b;border-color:#1f5a3a;color:#86dca6;}
[data-theme=dark] .kyu-auth-err{background:#2c1717;border-color:#6a3030;color:#f0a6a6;}
[data-theme=dark] .kyu-vw-tab{color:#cfe0dd;}
[data-theme=dark] .kyu-myup-fbtn{background:#1d3036;border-color:#2c4148;color:#cfe0dd;}
[data-theme=dark] .kyu-myup-fbtn.active{background:#74cadb;color:#0e1c20;border-color:#74cadb;}

/* ============================================================
   v1.2.1 — hamburger right, off-canvas menu, dark button text
   ============================================================ */

/* keep solid buttons readable in dark mode (broad a-colour was tinting them) */
:root[data-theme=dark] .kt-btn{color:#fff;}
:root[data-theme=dark] .kt-btn.is-outline{color:#74cadb;}

/* push the toggle + hamburger to the far right */
.kt-header-actions{margin-left:auto;}

/* off-canvas pieces hidden on desktop */
.kt-nav-close{display:none;}
.kt-nav-backdrop{display:none;}

@media(max-width:880px){
  .kt-header-inner{flex-wrap:nowrap;}
  .kt-nav{margin-left:0;position:fixed;top:0;right:0;left:auto;bottom:0;width:84%;max-width:330px;height:100%;background:#fff;box-shadow:-10px 0 34px rgba(0,0,0,.22);transform:translateX(100%);transition:transform .26s ease;display:block;z-index:100001;overflow-y:auto;padding:60px 0 24px;border-top:0;}
  .kt-nav.open{transform:translateX(0);}
  .kt-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(8,20,22,.5);opacity:0;visibility:hidden;transition:opacity .26s;z-index:100000;border:0;}
  .kt-nav-backdrop.open{opacity:1;visibility:visible;}
  body.kt-nav-lock{overflow:hidden;}
  .kt-nav-close{display:block;position:absolute;top:10px;right:12px;width:42px;height:42px;border:0;background:none;font-size:30px;line-height:1;color:#3a565b;cursor:pointer;padding:0;}
  .kt-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:4px 0;}
  .kt-nav>ul>li{border-bottom:1px solid #f0f4f3;}
  .kt-nav>ul>li:last-child{border-bottom:0;}
  .kt-nav>ul>li>a{display:block;padding:15px 22px;font-size:16px;}
  .kt-nav .sub-menu{position:static;display:block;box-shadow:none;background:#f6faf9;padding:0;min-width:0;}
  .kt-nav .sub-menu a{padding:13px 22px 13px 40px;}
  .kt-menu-toggle{display:inline-flex;}
}

/* off-canvas in dark mode */
:root[data-theme=dark] .kt-nav{background:#16282e;}
:root[data-theme=dark] .kt-nav-close{color:#cfe0dd;}
:root[data-theme=dark] .kt-nav .sub-menu{background:#1b2f35;}

/* ============================================================
   v1.3.0 — PWA install button + iOS add-to-home hint
   ============================================================ */

.kt-pwa-install{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--kt-teal);background:var(--kt-teal);color:#fff;font-family:inherit;font-weight:600;font-size:14px;line-height:1;padding:9px 14px;border-radius:var(--kt-btnradius);cursor:pointer;transition:background .15s,transform .15s;}
.kt-pwa-install:hover{background:#013a47;}
.kt-pwa-install:active{transform:translateY(1px);}
.kt-pwa-install svg{width:18px;height:18px;flex:0 0 auto;}
.kt-pwa-install[hidden]{display:none;}
:root[data-theme=dark] .kt-pwa-install{background:#0f6f86;border-color:#0f6f86;color:#fff;}
:root[data-theme=dark] .kt-pwa-install:hover{background:#0c5d70;}

@media(max-width:560px){
  .kt-pwa-install-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .kt-pwa-install{padding:9px;}
}

.kt-ios-hint{position:fixed;left:12px;right:12px;bottom:12px;z-index:99999;display:flex;align-items:center;gap:12px;background:var(--kt-teal);color:#fff;padding:13px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.28);font-size:14px;line-height:1.35;max-width:520px;margin:0 auto;}
.kt-ios-hint strong{font-weight:700;}
.kt-ios-hint-x{margin-left:auto;flex:0 0 auto;border:0;background:rgba(255,255,255,.16);color:#fff;width:30px;height:30px;border-radius:8px;font-size:20px;line-height:1;cursor:pointer;}
.kt-ios-hint-x:hover{background:rgba(255,255,255,.28);}

/* ============================================================
   v1.3.2 — install modal (iOS guide) + splash
   ============================================================ */

.kt-install-modal{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,18,20,.55);}
.kt-im-card{position:relative;background:#fff;color:var(--kt-text);max-width:380px;width:100%;border-radius:16px;padding:26px 24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center;font-family:var(--kt-font);}
.kt-im-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:26px;line-height:1;color:#7a8c90;cursor:pointer;padding:4px 8px;}
.kt-im-icon{width:72px;height:72px;border-radius:16px;display:block;margin:2px auto 12px;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.kt-im-title{margin:0 0 6px;color:var(--kt-teal);font-size:1.2rem;font-weight:700;}
.kt-im-sub{margin:0 0 16px;font-size:.95rem;color:#516469;line-height:1.5;}
.kt-im-steps{text-align:left;margin:0 0 18px;padding:0 0 0 22px;display:flex;flex-direction:column;gap:11px;font-size:.95rem;line-height:1.45;}
.kt-im-steps li{padding-left:4px;}
.kt-im-steps svg{vertical-align:-4px;color:var(--kt-teal2);}
.kt-im-ok{display:block;width:100%;background:var(--kt-teal);color:#fff;border:0;border-radius:10px;padding:13px 26px;font-size:15px;font-weight:600;font-family:var(--kt-font);cursor:pointer;}
.kt-im-ok:hover{background:#01323d;}
:root[data-theme=dark] .kt-im-card{background:#17282d;color:#d9e6e3;}
:root[data-theme=dark] .kt-im-title{color:#74cadb;}
:root[data-theme=dark] .kt-im-sub{color:#9fb3b6;}
:root[data-theme=dark] .kt-im-ok{background:#0f6f86;}
:root[data-theme=dark] .kt-im-ok:hover{background:#0c5d70;}