/* =============================================================================
   Kreyo Lingo — instructor / booking page restyle
   Loaded only on single tuturn-instructor pages (body.kl-instructor).

   COSMETIC ONLY. This page books and pays for lessons through Tuturn's
   nonce-protected AJAX (tu_booking_appointment and friends), so no markup,
   field or handler is touched — only paint.
============================================================================= */

body.kl-instructor {
  --kli-navy:      #1E2A78;
  --kli-navy-deep: #141C52;
  --kli-blue:      #4A90E2;
  --kli-ink:       #0E1726;
  --kli-muted:     #5A5F73;
  --kli-line:      #E3E7F5;
  --kli-mist:      #F3F5FC;
  --kli-ground:    #F7F9FC;
  --kli-ok:        #1A7F37;
  --kli-star:      #E8A33D;
  --kli-shadow:    0 10px 30px -20px rgba(30, 42, 120, .5);
  --kli-lift:      0 22px 44px -22px rgba(30, 42, 120, .55);
  --kli-font:      'Inter', system-ui, -apple-system, sans-serif;
  --kli-display:   'Poppins', var(--kli-font);
}

body.kl-instructor,
body.kl-instructor .tu-main-section { background-color: var(--kli-ground); }
body.kl-instructor .tu-main-section { font-family: var(--kli-font); color: var(--kli-ink); }

/* ── Panels ───────────────────────────────────────────────────────────── */
body.kl-instructor .tu-profile-topbox,
body.kl-instructor .tu-boxwrapper,
body.kl-instructor .tu-asidebox,
body.kl-instructor .tu-detailstabs,
body.kl-instructor .tu-instructor-detail,
body.kl-instructor .tu-widget {
  background: #fff;
  border: 1px solid var(--kli-line);
  border-radius: 20px;
  box-shadow: var(--kli-shadow);
}

/* ── Headings + identity ──────────────────────────────────────────────── */
body.kl-instructor .tu-main-section h1,
body.kl-instructor .tu-main-section h2,
body.kl-instructor .tu-main-section h3,
body.kl-instructor .tu-main-section h4 {
  font-family: var(--kli-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kli-ink);
}
body.kl-instructor .tu-main-section p { color: var(--kli-muted); }

/* Hourly rate — the number a visitor is really looking for. */
body.kl-instructor .tu-listinginfo_price h4,
body.kl-instructor .tu-instructor-price h4 {
  font-family: var(--kli-display);
  font-weight: 800;
  color: var(--kli-navy);
  font-variant-numeric: tabular-nums;
}
body.kl-instructor .tu-rating h6 {
  font-family: var(--kli-display);
  font-weight: 700;
  color: var(--kli-ink);
  font-variant-numeric: tabular-nums;
}
body.kl-instructor .tu-rating .fa-star,
body.kl-instructor .tu-rating i { color: var(--kli-star); }
body.kl-instructor .tu-greenclr,
body.kl-instructor .icon-check-circle { color: var(--kli-ok); }

/* Avatar */
body.kl-instructor .tu-listinginfo-img figure,
body.kl-instructor .tu-profile-img figure {
  border-radius: 18px;
  overflow: hidden;
}

/* ── Tabs (Introduction / Reviews) ────────────────────────────────────── */
body.kl-instructor .tu-nav-tabs { border-bottom: 1.5px solid var(--kli-line); gap: 6px; }
body.kl-instructor .tu-nav-tabs .nav-link {
  font-family: var(--kli-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--kli-muted);
  border: none;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: color .16s ease, border-color .16s ease;
}
body.kl-instructor .tu-nav-tabs .nav-link:hover { color: var(--kli-ink); }
body.kl-instructor .tu-nav-tabs .nav-link.active {
  color: var(--kli-navy);
  border-bottom-color: var(--kli-navy);
  background: transparent;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
body.kl-instructor .tu-primbtn,
body.kl-instructor .tu-btn,
body.kl-instructor .tu-primbtn-lg,
body.kl-instructor .tu-primbtn-sm {
  background-color: var(--kli-navy);
  color: #fff;
  font-family: var(--kli-display);
  font-weight: 700;
  border-radius: 11px;
  box-shadow: 0 12px 26px -14px rgba(30, 42, 120, .75);
  transition: background-color .18s ease, transform .18s ease;
}
body.kl-instructor .tu-primbtn::before,
body.kl-instructor .tu-btn::before,
body.kl-instructor .tu-primbtn-lg::before { background: transparent; }
body.kl-instructor .tu-primbtn:hover,
body.kl-instructor .tu-btn:hover,
body.kl-instructor .tu-primbtn-lg:hover {
  background-color: var(--kli-navy-deep);
  color: #fff;
  transform: translateY(-1px);
}
body.kl-instructor .tu-secbtn {
  background: #fff;
  color: var(--kli-navy);
  border: 1.5px solid var(--kli-line);
  font-family: var(--kli-display);
  font-weight: 700;
  border-radius: 11px;
}
body.kl-instructor .tu-secbtn::before { background: transparent; }
body.kl-instructor .tu-secbtn:hover { background: var(--kli-mist); border-color: #CBD6EE; }

/* ── Contact panel ────────────────────────────────────────────────────── */
body.kl-instructor .tu-asidebox a { color: var(--kli-navy); }
body.kl-instructor .tu-asidebox a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Lesson packages ──────────────────────────────────────────────────────
   Custom cards added on top of Tuturn; brought onto the site's card
   language with a blue rail that appears on hover/selection. */
body.kl-instructor .kl-package-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 4px 0 22px;
}
body.kl-instructor .kl-package-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--kli-line);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--kli-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.kl-instructor .kl-package-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--kli-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
body.kl-instructor .kl-package-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kli-lift);
  border-color: #D5E1F0;
}
body.kl-instructor .kl-package-card:hover::before,
body.kl-instructor .kl-package-card.active::before,
body.kl-instructor .kl-package-card.selected::before { transform: scaleX(1); }
body.kl-instructor .kl-package-card.active,
body.kl-instructor .kl-package-card.selected {
  border-color: var(--kli-navy);
  background: #F6F9FF;
}
body.kl-instructor .kl-package-title {
  font-family: var(--kli-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--kli-ink);
  margin-bottom: 6px;
}
body.kl-instructor .kl-package-price {
  font-family: var(--kli-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--kli-navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
body.kl-instructor .kl-vip-badge {
  display: inline-block;
  font-family: var(--kli-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9A6B14;
  background: #FBF0DC;
  border-radius: 999px;
  padding: 4px 11px;
}

/* ── Form controls ────────────────────────────────────────────────────── */
body.kl-instructor .tu-main-section input[type="text"],
body.kl-instructor .tu-main-section input[type="email"],
body.kl-instructor .tu-main-section input[type="number"],
body.kl-instructor .tu-main-section select,
body.kl-instructor .tu-main-section textarea {
  font-family: var(--kli-font);
  border: 1.5px solid var(--kli-line);
  border-radius: 11px;
  color: var(--kli-ink);
}
body.kl-instructor .tu-main-section input:focus,
body.kl-instructor .tu-main-section select:focus,
body.kl-instructor .tu-main-section textarea:focus {
  border-color: var(--kli-blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, .16);
  outline: none;
}

body.kl-instructor .tu-main-section a:focus-visible,
body.kl-instructor .tu-main-section button:focus-visible {
  outline: 2.5px solid var(--kli-blue);
  outline-offset: 3px;
  border-radius: 8px;
}


/* ── Related tutors ───────────────────────────────────────────────────────
   Structure (instructor-search-view-v4.php):
     .tu-featureitem            <- the card itself
       .tu-authorinfo             inner wrapper
         .tu-authordetail         name / meta block
         ul.tu-authorlist         plain list of details
   Only the OUTER card is given a border and shadow. An earlier revision
   styled the inner wrappers too, which produced boxes inside boxes and the
   irregular shapes — hence the deliberate narrowness here. */
body.kl-instructor .tu-featureitem {
  background: #fff;
  border: 1px solid var(--kli-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--kli-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.kl-instructor .tu-featureitem:hover {
  transform: translateY(-4px);
  box-shadow: var(--kli-lift);
  border-color: #D5E1F0;
}
/* Inner wrappers must stay flat — no border, no shadow, no radius. */
body.kl-instructor .tu-featureitem .tu-authorinfo,
body.kl-instructor .tu-featureitem .tu-authordetail,
body.kl-instructor .tu-featureitem .tu-authorlist,
body.kl-instructor .tu-featureitem .tu-authorlist li {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
body.kl-instructor .tu-featureitem .tu-authorname h4,
body.kl-instructor .tu-featureitem .tu-authorname h5,
body.kl-instructor .tu-featureitem .tu-authorname a {
  font-family: var(--kli-display);
  font-weight: 700;
  color: var(--kli-ink);
}
body.kl-instructor .tu-featureitem .tu-authorname a:hover { color: var(--kli-navy); }
body.kl-instructor .tu-featureitem .tu-authorlist li,
body.kl-instructor .tu-featureitem address { color: var(--kli-muted); font-size: 13.5px; font-style: normal; }
body.kl-instructor .tu-featuretag {
  font-family: var(--kli-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .05em;
  background: var(--kli-navy);
  color: #fff;
  border-radius: 999px;
}
body.kl-instructor .tu-explore-title h3 {
  font-family: var(--kli-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(21px, 3vw, 28px);
  color: var(--kli-ink);
}