/* =========================================================
   TUTOREO — SITE-WIDE STYLESHEET (cleaned & de-duplicated)
   ========================================================= */

:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --success: #10b981;
  --header-height: 100px;
}

* {
  box-sizing: border-box;
}

/* -----------------------------------------------------------
   BASE / TYPOGRAPHY
----------------------------------------------------------- */

body {
  margin: 0;
  padding-top: var(--header-height);
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1 {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 10px;
  line-height: 1.1;
}

p {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 30px;
  line-height: 1.6;
}

a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 640px) {
  h1 {
    font-size: 30px;
  }
}

/* -----------------------------------------------------------
   HEADER / NAV
----------------------------------------------------------- */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 32px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* Optional inner wrapper for pages that constrain header content width */
.header-inner {
  max-width: 1150px;
  margin: auto;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  font-weight: 800;
  font-size: 20px;
  color: var(--primary);
}

.back-link {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.nav-links a:hover {
  color: var(--primary);
}

.login-btn {
  padding: 10px 16px;
  background: #111827;
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.login-btn:hover {
  background: #000;
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .login-btn {
    display: none;
  }
}

@media (max-width: 640px) {
  .header-inner {
    padding: 14px 16px;
  }
}

/* Mobile hamburger */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
  background: none;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #111827;
  margin: 5px 0;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }
}

/* Mobile slide-in menu */

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform .25s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-top {
  display: flex;
  justify-content: flex-end;
}

.mobile-menu-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #111827;
  padding: 6px;
  width: auto;
  margin: 0;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus,
.mobile-menu-close:active {
  background: none;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}

.mobile-menu-links a {
  color: #111827;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
}

.mobile-menu-bottom {
  margin-top: auto;
}

.mobile-menu-bottom .login-btn {
  display: block;
  text-align: center;
  padding: 14px;
  font-size: 16px;
}

/* -----------------------------------------------------------
   LAYOUT CONTAINERS
----------------------------------------------------------- */

.container {
  max-width: 1200px;
  margin: auto;
  padding: 60px 20px;
  text-align: center;
}

@media (max-width: 640px) {
  .container {
    padding: 40px 16px;
  }
}

.wrap {
  max-width: 1150px;
  margin: auto;
  padding: 24px 20px 48px;
}

@media (max-width: 640px) {
  .wrap {
    padding: 16px 16px 100px;
  }
}

/* -----------------------------------------------------------
   CARD (shared component — used across search, profile, admin)
----------------------------------------------------------- */

.card {
  background: var(--card);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .06);
  margin-bottom: 24px;
  text-align: left;
}

#searchBox .card {
  max-width: 720px;
  margin: auto;
}

@media (max-width: 640px) {
  .card {
    padding: 20px;
    border-radius: 22px;
  }
}

/* -----------------------------------------------------------
   FORM ELEMENTS
----------------------------------------------------------- */

.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 10px;
}

input,
select,
textarea,
button {
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 16px;
  box-sizing: border-box;
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
}

button {
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  margin-top: 18px;
}

button:hover {
  background: var(--primary-dark);
}

.footer-note {
  margin-top: 20px;
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
}

/* -----------------------------------------------------------
   ALERT / STATUS MESSAGES (login, signup, forms)
----------------------------------------------------------- */

.msg {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  display: none;
}

.success {
  display: block;
  background: #ecfdf5;
  color: #065f46;
}

.error {
  display: block;
  background: #fef2f2;
  color: #991b1b;
}

/* -----------------------------------------------------------
   NARROW AUTH PAGES (login / signup / forgot-password)
   Use these instead of .wrap / .card when you need the
   compact centered form layout, so they don't collide with
   the site-wide .wrap / .card sizing.
----------------------------------------------------------- */

.auth-wrap {
  max-width: 560px;
  margin: 40px auto;
  padding: 16px;
}

.auth-card {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.auth-back {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.auth-back a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

/* -----------------------------------------------------------
   SIMPLE HERO (dark, full-height homepage hero)
----------------------------------------------------------- */

.simple-hero {
  background-color: #111;
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url("../assets/heroBg1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  text-align: center;
  padding: 60px 20px 40px;
  min-height: calc(100vh - var(--header-height));
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.simple-hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.simple-hero h1 {
  font-size: 92px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}

.simple-hero p {
  margin: 28px auto 0;
  max-width: 700px;
  font-size: 26px;
  color: #fff;
}

.hero-search-btn {
  width: auto;
  padding: 18px 44px;
  background: white;
  color: #111;
  border-radius: 10px;
  margin-top: 0;
  font-size: 20px;
  font-weight: 700;
}

.location-pill {
  display: inline-block;
  margin-top: 26px;
  padding: 13px 22px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
  color: #e5e5e5;
  max-width: 90%;
}

.instructor-join-box {
  margin: 35px auto 0;
  max-width: 480px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px;
  padding: 25px;
}

.join-text {
  font-size: 30px;
  font-weight: 800;
}

.join-sub {
  margin-top: 10px;
  font-size: 18px;
  color: #c7c7c7;
  line-height: 1.5;
}

.join-btn {
  display: inline-block;
  margin-top: 20px;
  background: #10b981;
  color: white;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
}

.join-btn:hover {
  background: #059669;
}

@media (max-width: 640px) {
  .simple-hero {
    padding: 40px 16px 24px;
  }

  .simple-hero h1 {
    font-size: 38px;
  }

  .simple-hero p {
    font-size: 17px;
  }

  .location-pill {
    font-size: 13px;
    padding: 10px 15px;
  }
}

@media (min-width: 1600px) {
  .simple-hero h1 {
    font-size: 108px;
  }

  .simple-hero p {
    font-size: 28px;
  }
}

/* -----------------------------------------------------------
   SMART SECTION ("Search by What Matters Most")
----------------------------------------------------------- */

.smart-section {
  background: black;
  padding: 90px 20px;
  color: #111827;
  text-align: center;
}

.smart-section h2 {
  font-size: 42px;
  font-weight: 400;
  margin: 0;
  color: white;
}

.smart-sub {
  color: white;
  max-width: 700px;
  margin: 20px auto 70px;
  font-size: 18px;
  line-height: 1.7;
}

.smart-grid {
  max-width: 950px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.smart-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 30px;
  text-align: left;
  min-height: 300px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.smart-card h3 {
  font-size: 20px;
  margin: 25px 0 15px;
  color: #111827;
}

.smart-card p {
  color: #6b7280;
  line-height: 1.7;
  font-size: 15px;
  margin: 0;
}

.smart-icon {
  width: 52px;
  height: 52px;
  background: #f3f4f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

.smart-button {
  display: inline-block;
  margin-top: 45px;
  background: white;
  color: #111;
  padding: 16px 45px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.tags span {
  border: 1px solid;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.blue span {
  color: #60a5fa;
}

.green span {
  color: #22c55e;
}

.purple span {
  color: #a855f7;
}

.orange span {
  color: #f59e0b;
}

@media (max-width: 1000px) {
  .smart-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .smart-grid {
    grid-template-columns: 1fr;
  }

  .smart-section h2 {
    font-size: 34px;
  }
}

/* -----------------------------------------------------------
   FEATURED INSTRUCTOR CARDS (dark cards, homepage grid)
----------------------------------------------------------- */

.badge {
  border: 1px solid #333;
  padding: 6px 12px;
  border-radius: 8px;
  color: #aaa;
  font-size: 12px;
}

.fake-tabs {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #181818;
  padding: 5px;
  border-radius: 10px;
  text-align: center;
  color: #aaa;
  font-size: 14px;
}

.fake-tabs div {
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
}

.fake-tabs div.active {
  background: #050505;
  color: white;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.feature-list {
  background: #171717;
  padding: 16px;
  border-radius: 16px;
  display: grid;
  gap: 12px;
  font-size: 14px;
}

.feature-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #e5e7eb;
}

/* Small feature "pill" tags inside a featured card
   (renamed from the old generic .car-features to avoid
   colliding with the profile page's vehicle-features grid) */
.featured-car-tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.car-feature {
  background: #242424;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
}

/* -----------------------------------------------------------
   FOOTER
----------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: #f7f8fc;
  color: var(--muted);
  padding: 60px 20px 24px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: #9ca3af;
  margin: 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-title {
  color: #111827;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.footer-col a,
.footer-col span {
  color: #9ca3af;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
}

.footer-col a:hover {
  color: #111827;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 24px;
  font-size: 13px;
  color: var(--muted);
}

.footer-social {
  display: flex;
  gap: 18px;
}

.footer-social a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
}

.footer-social a:hover {
  color: #111827;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -----------------------------------------------------------
   INSTRUCTOR PROFILE PAGE
----------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  align-items: start;
}

.profile-side {
  position: relative;
}

.profile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 24px;
  background: #eee;
}

.verified {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #111827;
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.hero-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
}


.stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.stat {
  background: #f9fafb;
  border: 1px solid #eef2f7;
  padding: 16px;
  border-radius: 18px;
  min-width: 130px;
}

.stat-label {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.stat-value {
  font-weight: 800;
  font-size: 18px;
}

.price {
  font-size: 34px;
  font-weight: 900;
}

.price span {
  font-size: 16px;
  color: var(--muted);
  font-weight: 600;
}

.rating {
  color: #f59e0b;
  font-weight: 700;
}

.description {
  color: #374151;
  line-height: 1.7;
  font-size: 15px;
}

.contact-btn {
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 18px 20px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
  width: 100%;
  margin-top: 24px;
  box-shadow: 0 10px 25px rgba(79, 70, 229, .25);
}

.contact-btn:hover {
  transform: translateY(-2px);
  background: var(--primary-dark);
}

.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.info-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.info-card .contact-btn {
  margin-top: 24px;
}

.small-car-img {
  width: 500px;
  height: 500px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  margin: auto;
}

.section-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.info-box {
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 18px;
}

.info-label {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.info-value {
  font-weight: 700;
}

.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.specialty-tag {
  background: #eef2ff;
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
}

.profile-bio {
  margin: 4px 0 26px;
  font-size: 16px;
  line-height: 1.75;
  color: #374151;
}

/* Vehicle features grid (profile page) */
.car-features {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.car-features .info-box {
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 18px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  transition: .2s ease;
}

.car-features .info-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .08);
}

/* Why Choose Me */

.why-card {
  margin-top: 0;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  padding: 16px;
  border-radius: 18px;
}

.why-icon {
  font-size: 24px;
}

.why-title {
  font-weight: 800;
}

.why-text {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* -----------------------------------------------------------
   REVIEWS
----------------------------------------------------------- */

.review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}

.review-btn {
  border: none;
  background: #111827;
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
  margin-top: 0;
}

.reviews-grid {
  display: grid;
  gap: 16px;
}

.review-card {
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 20px;
  padding: 20px;
}

.review-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.review-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}

.review-name {
  font-weight: 800;
}

.review-date {
  font-size: 13px;
  color: var(--muted);
}

.review-stars {
  color: #f59e0b;
  font-size: 14px;
}

.review-text {
  color: #374151;
  line-height: 1.7;
}

.review-form {
  display: none;
  margin-top: 24px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 20px;
  padding: 20px;
}

.review-form input,
.review-form textarea,
.review-form select {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  margin-top: 0;
  font-size: 15px;
}

.review-form button {
  width: 100%;
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 14px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0;
}

/* -----------------------------------------------------------
   MODAL
----------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding: 20px;
}

.modal-card {
  background: #fff;
  width: 100%;
  max-width: 500px;
  border-radius: 28px;
  padding: 28px;
  animation: pop .2s ease;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 24px;
  font-weight: 800;
}

.close-btn {
  border: none;
  background: none;
  font-size: 30px;
  cursor: pointer;
  color: var(--muted);
  width: auto;
  padding: 0;
  margin: 0;
}

.modal-sub {
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.modal input,
.modal textarea {
  width: 100%;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid #ddd;
  margin-bottom: 14px;
  margin-top: 0;
  font-size: 15px;
}

.modal textarea {
  min-height: 120px;
  resize: vertical;
}

.send-btn {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  color: #fff;
  padding: 16px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 0;
}

.success-msg {
  margin-top: 14px;
  background: #ecfdf5;
  color: #065f46;
  padding: 14px;
  border-radius: 14px;
  font-weight: 600;
}

/* -----------------------------------------------------------
   SEARCH RESULTS PAGE
----------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.filters input,
.filters select {
  flex: 1;
  min-width: 160px;
  margin-top: 0;
}

.filters button {
  flex: 0 0 auto;
  width: auto;
  padding: 16px 28px;
  margin-top: 0;
}

@media (max-width: 640px) {
  .filters {
    flex-direction: column;
  }

  .filters input,
  .filters select,
  .filters button {
    width: 100%;
  }
}

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.results a {
  text-decoration: none;
  color: inherit;
}

.results .card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  max-width: 360px;
  transition: .2s ease;
}

.results .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .1);
}

.results .img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  background: #eee;
}

.results .info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.results .meta {
  color: var(--muted);
  font-size: 14px;
}

.result-price {
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  margin-top: 4px;
}

.result-rating {
  color: #f59e0b;
  font-weight: 700;
  font-size: 14px;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 20px;
  font-size: 16px;
  grid-column: 1 / -1;
}

/* -----------------------------------------------------------
   RESPONSIVE — PROFILE PAGE
----------------------------------------------------------- */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 30px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .title {
    font-size: 28px;
  }

  .price {
    font-size: 28px;
  }
}

/* -----------------------------------------------------------
   BECOME AN INSTRUCTOR PAGE
   Scoped under .ib-page / .ib-* so it can never collide with
   the shared .card, .container, .hero, .stat, etc. above.
----------------------------------------------------------- */

.ib-page * {
  box-sizing: border-box;
}

.ib-page a {
  text-decoration: none;
}

.ib-page .ib-hero {
  background: linear-gradient(135deg, var(--primary-dark), #5b3df5);
  color: #fff;
  padding: 90px 20px;
}

.ib-page .ib-container {
  max-width: 1180px;
  margin: auto;
}

.ib-page .ib-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 420px;
  gap: 40px;
  align-items: center;
}

.ib-page .ib-hero h1 {
  font-size: 56px;
  line-height: 1.08;
  margin: 20px 0 0;
}

.ib-page .ib-lead {
  font-size: 20px;
  line-height: 1.6;
}

.ib-page .ib-cta {
  display: inline-block;
  margin-top: 28px;
  background: #fff;
  color: var(--primary-dark);
  padding: 16px 28px;
  border-radius: 14px;
  font-weight: 700;
}

.ib-page .ib-panel {
  background: rgba(255, 255, 255, .12);
  padding: 28px;
  border-radius: 20px;
}

.ib-page .ib-tick {
  margin: 12px 0;
}

.ib-page .ib-section {
  padding: 70px 20px;
}

.ib-page .ib-section h2 {
  text-align: center;
  font-size: 38px;
  margin: 0 0 16px;
}

.ib-page .ib-sub {
  text-align: center;
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto 40px;
}

.ib-page .ib-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ib-page .ib-card {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.ib-page .ib-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ib-page .ib-stat {
  background: black;
  color: #fff;
  padding: 22px;
  border-radius: 18px;
  text-align: center;
}

.ib-page .ib-stat strong {
  display: block;
  font-size: 38px;
}

.ib-page .ib-step {
  display: flex;
  gap: 16px;
  align-items: center;
  background: #fff;
  padding: 22px;
  border-radius: 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
}

.ib-page .ib-num {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.ib-page .ib-compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.ib-page .ib-compare th,
.ib-page .ib-compare td {
  padding: 16px;
  border: 1px solid #eee;
}

.ib-page .ib-cta-band {
  background: #111827;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.ib-page .ib-cta-band .ib-cta {
  color: var(--primary-dark);
}

@media (max-width: 900px) {
  .ib-page .ib-hero-grid,
  .ib-page .ib-grid3,
  .ib-page .ib-stats {
    grid-template-columns: 1fr;
  }

  .ib-page .ib-hero h1 {
    font-size: 38px;
  }
}

/* -----------------------------------------------------------
   ABOUT PAGE
----------------------------------------------------------- */

.about-hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px 30px;
}

.about-eyebrow {
  display: inline-block;
  background: #eef2ff;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.about-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.about-lead {
  font-size: 20px;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
}

.about-content {
  max-width: 800px;
  margin: 0 auto 24px;
}

.about-content h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 16px;
}

.about-content p:last-child {
  margin-bottom: 0;
}

.about-cta-band {
  background: #111827;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  margin-top: 40px;
}

.about-cta-band h2 {
  font-size: 32px;
  margin: 0 0 24px;
  color: #fff;
}

.about-cta-btn {
  display: inline-block;
  background: #fff;
  color: #111827;
  padding: 16px 36px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

.about-cta-btn:hover {
  opacity: .9;
}

.about-tagline {
  margin-top: 24px;
  color: #9ca3af;
  font-size: 14px;
}

@media (max-width: 640px) {
  .about-hero {
    padding: 50px 16px 40px;
  }

  .about-hero h1 {
    font-size: 32px;
  }

  .about-lead {
    font-size: 17px;
  }

  .about-cta-band h2 {
    font-size: 26px;
  }
}

/* -----------------------------------------------------------
   LEGAL PAGES (Terms, Privacy Policy)
----------------------------------------------------------- */

.legal-hero {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 70px 20px 30px;
}

.legal-hero h1 {
  font-size: 42px;
  margin-bottom: 10px;
}

.legal-updated {
  font-size: 14px;
  color: var(--muted);
}

.legal-content {
  max-width: 800px;
  margin: 0 auto 24px;
}

.legal-content h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin: 32px 0 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 20px 0 10px;
}

.legal-content p {
  font-size: 16px;
  margin: 0 0 14px;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal-content li {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.6;
}

.legal-content li:last-child {
  margin-bottom: 0;
}

.legal-footer-note {
  text-align: center;
  padding: 20px 20px 0;
  color: var(--muted);
  font-size: 14px;
}

.legal-footer-note strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .legal-hero {
    padding: 40px 16px 24px;
  }

  .legal-hero h1 {
    font-size: 30px;
  }
}

/* -----------------------------------------------------------
   HOW IT WORKS PAGE
----------------------------------------------------------- */

.hiw-toggle-wrap {
  display: flex;
  justify-content: center;
  padding: 0 20px 40px;
}

.hiw-toggle {
  display: inline-flex;
  gap: 8px;
}

.hiw-toggle-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
  margin-top: 0;
  transition: .2s ease;
}

.hiw-toggle-btn.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.hiw-panel {
  display: none;
}

.hiw-panel.active {
  display: block;
}

.hiw-step-title {
  font-weight: 800;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.hiw-step-text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .hiw-toggle {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .hiw-toggle-btn {
    width: 100%;
  }
}

/* -----------------------------------------------------------
   CONTACT PAGE
----------------------------------------------------------- */

.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}

.contact-email-highlight {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 18px 20px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  text-decoration: none;
  transition: .2s ease;
}

.contact-email-highlight:hover {
  background: #eef2ff;
  border-color: #e0e7ff;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.contact-info-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}

.contact-info-value {
  font-weight: 700;
  color: var(--text);
}

/* -----------------------------------------------------------
   SHARED: PRIMARY CTA BUTTON (light backgrounds)
   & CHECKLIST GRID
----------------------------------------------------------- */

.cta-btn-primary {
  display: inline-block;
  margin-top: 28px;
  background: var(--primary);
  color: #fff;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
}

.cta-btn-primary:hover {
  background: var(--primary-dark);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 10px;
}

.check-item {
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 640px) {
  .check-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------
   DASHBOARD PAGE (dashboard.html)
   Scoped under body.dash-page / .dash-page so it can never
   collide with the shared .card, .wrap, .msg, button, etc. above.
----------------------------------------------------------- */

body.dash-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f7f8fc;
  margin: 0;
  color: #111827;
  padding-top: 130px;
}

.dash-page .wrap {
  max-width: 980px;
  margin: 24px auto;
  padding: 16px;
}

.dash-page .card {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  margin-bottom: 18px;
}

/* Instructor-only fixed header: logo/logout row + horizontally
   scrollable tab strip, replacing the old separate sticky tab bar */

.instructor-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.instructor-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
}

.instructor-header-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 14px;
  scrollbar-width: none;
}

.instructor-header-tabs::-webkit-scrollbar {
  display: none;
}

/* Mobile: a native dropdown replaces the scrollable tab strip.
   Scrolling to find hidden tabs isn't discoverable for everyone —
   a select is unambiguous and needs no explanation. */
.instructor-mobile-select-wrap {
  display: none;
  padding: 0 16px 14px;
}

.instructor-mobile-select {
  width: 100%;
  margin-top: 0;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-weight: 700;
  font-size: 15px;
}

@media (max-width: 640px) {
  .instructor-header-tabs {
    display: none;
  }

  .instructor-mobile-select-wrap {
    display: block;
  }
}

.dash-page .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dash-page .box {
  background: #f9fafb;
  padding: 12px;
  border-radius: 12px;
}

.dash-page .label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.dash-page .value {
  font-weight: bold;
}

.dash-page form {
  display: grid;
  gap: 12px;
}

.dash-page .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dash-page .wrap input,
.dash-page .wrap textarea,
.dash-page .wrap select,
.dash-page .wrap button {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
}

.dash-page .wrap textarea {
  resize: none;
  min-height: 220px;
  line-height: 1.5;
}

.dash-page .wrap button {
  background: #4f46e5;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.dash-page .msg {
  display: none;
  padding: 10px;
  border-radius: 10px;
}

.dash-page .success {
  background: #ecfdf5;
  color: #065f46;
}

.dash-page .error {
  background: #fef2f2;
  color: #991b1b;
}

.dash-page img.preview {
  max-width: 200px;
  border-radius: 18px;
  margin-bottom: 10px;
  display: block;
}

.dash-page img.preview.car-preview {
  width: 100%;
  max-width: 100%;
  height: 220px;
  object-fit: contain;
  border-radius: 18px;
  background: #f9fafb;
}

.dash-page .nav-buttons {
  display: flex;
  gap: 10px;
}

.dash-page .secondary-btn {
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #e5e7eb;
  width: auto;
  margin-bottom: 10px;
}

.dash-page .logout-btn {
  background: #111827;
}

.dash-page .nav-buttons button {
  width: auto;
  padding: 10px 18px;
  border-radius: 999px;
}

.dash-page .char-counter {
  text-align: right;
  font-size: 13px;
  color: #6b7280;
  margin-top: -10px;
  margin-bottom: 15px;
}

/* Modern tab buttons + Logout button */
.dash-page .dash-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
  transition: .2s ease;
}

.dash-page .dash-toggle-btn.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.dash-page .dash-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  background: #fff;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.dash-page .dash-logout-btn:hover {
  background: #fef2f2;
}

@media (max-width: 640px) {
  .instructor-header-top {
    padding: 12px 16px;
  }

  .instructor-header-tabs {
    padding: 0 16px 12px;
  }

  .dash-page .dash-toggle-btn {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* Unsaved changes banner */
.dash-page .unsaved-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: #111827;
  color: #fff;
  padding: 14px 20px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .15);
  transition: background .2s ease;
}

.dash-page .unsaved-banner.show {
  display: flex;
}

.dash-page .unsaved-banner.incomplete {
  background: #dc2626;
}

/* Upload progress bar */
.dash-page .upload-progress-track {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.dash-page .upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border-radius: 999px;
  transition: width .2s ease;
  width: 0%;
}

/* Save confirmation modal */
.dash-page .save-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.dash-page .save-confirm-overlay.show {
  display: flex;
}

.dash-page .save-confirm-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  max-width: 420px;
  text-align: center;
}

.dash-page .save-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}

.dash-page .save-confirm-card button {
  width: auto;
  background: #4f46e5;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0;
}

/* Click-to-enlarge lightbox — reusable across any page.
   Add class="lightbox-trigger" and onclick="openLightbox(this.src)"
   to any <img> to make it clickable. */
.lightbox-trigger {
  cursor: zoom-in;
}

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

.lightbox-overlay.show {
  display: flex;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, .25);
}

/* Language picker modal — reused on dashboard.html and admin.html.
   Same overlay/card pattern as the save-confirm modal, just wider
   to fit a checkbox grid. */
.language-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.language-modal-overlay.show {
  display: flex;
}

.language-modal-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.language-modal-title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
}

.language-modal-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 18px;
}

.language-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  overflow-y: auto;
  padding-right: 4px;
}

.language-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-checkbox-item input[type=checkbox] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.language-checkbox-item label {
  font-size: 15px;
  cursor: pointer;
}

.language-checkbox-item input[type=checkbox]:disabled + label {
  color: #c1c5cc;
  cursor: not-allowed;
}

.language-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eef0f4;
}

.language-modal-actions button {
  width: auto;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  margin-top: 0;
}

.language-modal-cancel-btn {
  background: #f3f4f6;
  color: #111827;
}

.language-modal-save-btn {
  background: #111827;
  color: #fff;
}

.edit-languages-btn {
  width: auto;
  padding: 10px 18px;
  margin-top: 10px;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 700;
  font-size: 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

@media (max-width: 640px) {
  .language-checkbox-grid {
    grid-template-columns: 1fr;
  }
}
/* Featured instructor directory cards */
.featured-heading { font-size:clamp(24px,3vw,32px); letter-spacing:-.03em; margin:0 0 24px; }
.featured-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.featured-card { text-align:left; width:auto; min-width:0; display:flex; flex-direction:column; padding:24px; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:20px; box-shadow:0 6px 24px rgba(17,24,39,.04); transition:transform .2s,box-shadow .2s,border-color .2s; }
.featured-card:hover { transform:translateY(-3px); border-color:#c7d2fe; box-shadow:0 16px 36px rgba(79,70,229,.09); }
.featured-user { display:flex; gap:14px; align-items:center; min-width:0; }
.featured-user > div:last-child { min-width:0; }
.featured-avatar-wrap { width:60px; height:60px; flex-shrink:0; position:relative; border-radius:16px; overflow:hidden; background:#eef2ff; }
.featured-initials { display:grid; place-items:center; height:100%; font-size:20px; font-weight:700; color:var(--primary); }
.featured-avatar { position:absolute; inset:0; width:100%; height:100%; border-radius:0; object-fit:cover; }
.featured-name { margin:0; font-size:20px; line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; }
.featured-rating { color:var(--text); font-size:13px; margin-top:6px; }
.featured-rating > span:first-child { color:#b7791f; }
.featured-rating > span:last-child { color:var(--muted); }
.featured-bio { margin:20px 0; font-size:14px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:69px; overflow-wrap:anywhere; }
.featured-details { display:grid; gap:14px; margin:0 0 24px; font-size:13px; }
.featured-details > div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; }
.featured-details dt { color:var(--muted); }
.featured-details dd { margin:0; color:var(--text); font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.featured-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:20px; border-top:1px solid var(--border); }
.featured-price { display:flex; flex-direction:column; gap:3px; }
.featured-price strong { font-size:20px; font-weight:600; letter-spacing:-.025em; white-space:nowrap; }
.featured-price span { font-size:12px; color:var(--muted); }
.featured-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; margin:0; background:var(--primary); color:white; padding:12px 14px; font-size:13px; border-radius:10px; white-space:nowrap; }
.featured-link:hover { background:var(--primary-dark); opacity:1; }
.featured-link:focus-visible, .admin-page button:focus-visible { outline:3px solid #a5b4fc; outline-offset:3px; }
@media(max-width:1050px) { .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) { .featured-grid { grid-template-columns:minmax(0,1fr); gap:16px; } .featured-card { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .featured-card { transition:none; } .featured-card:hover { transform:none; } }

/* =========================================================
   ADMIN & INSTRUCTOR WORKSPACES
   Shared spacing: 8 / 12 / 16 / 24 / 32px.
   ========================================================= */
body:is(.admin-page,.dash-page) { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); }
.admin-page { padding-top:0; }
:is(.admin-page,.dash-page) .wrap { max-width:1160px; padding:0 24px; margin:32px auto 64px; }
:is(.admin-page,.dash-page) .card { padding:32px; margin:0 0 24px; border:1px solid var(--border); border-radius:20px; background:var(--card); box-shadow:0 4px 20px rgba(17,24,39,.03); }
:is(.admin-page,.dash-page) .card:hover { transform:none; }
:is(.admin-page,.dash-page) h2 { margin:0 0 8px; font-size:24px; letter-spacing:-.025em; }
:is(.admin-page,.dash-page) h3 { margin:0 0 16px; font-size:18px; letter-spacing:-.015em; }
:is(.admin-page,.dash-page) p { font-size:14px; line-height:1.6; }
:is(.admin-page,.dash-page) .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
:is(.admin-page,.dash-page) .box { min-width:0; padding:20px; background:#f8fafc; border:1px solid #edf0f5; border-radius:12px; }
:is(.admin-page,.dash-page) .label { color:var(--muted); font-size:12px; line-height:1.5; margin-bottom:6px; }
:is(.admin-page,.dash-page) .value { font-weight:500; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
:is(.admin-page,.dash-page) button { font-family:inherit; font-size:14px; line-height:1.4; font-weight:600; min-height:40px; margin:0; }
.admin-page button { width:auto; padding:10px 16px; border-radius:10px; }
:is(.admin-page,.dash-page) input:not([type=checkbox]), :is(.admin-page,.dash-page) select, :is(.admin-page,.dash-page) textarea { min-width:0; max-width:100%; font-family:inherit; font-size:14px; border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:0; background:white; color:var(--text); }
:is(.admin-page,.dash-page) textarea { resize:vertical; line-height:1.6; }
:is(.admin-page,.dash-page) :is(input,select,textarea,button,a,summary):focus-visible { outline:3px solid #c7d2fe; outline-offset:3px; }
:is(.admin-page,.dash-page) input[type=checkbox] { width:18px; height:18px; min-height:0; padding:0; margin:0; accent-color:var(--primary); flex-shrink:0; }
.admin-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px max(24px,calc((100vw - 1112px)/2)); background:white; border-bottom:1px solid var(--border); }
.admin-header-user { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.admin-header .admin-logout-btn { display:inline-flex; align-items:center; gap:8px; background:white; color:var(--text); border:1px solid var(--border); }
.panel-intro { margin-bottom:24px; }
.panel-eyebrow { display:block; margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.panel-intro h1 { font-size:34px; letter-spacing:-.035em; margin:0 0 12px; }
.panel-intro p { margin:0; }
.panel-nav { display:flex; gap:8px; flex-wrap:wrap; padding:6px; margin-bottom:24px; width:fit-content; max-width:100%; background:#e9edf5; border-radius:12px; }
.panel-nav button { background:transparent; color:var(--muted); padding:10px 20px; }
.panel-nav button.active { background:white; color:var(--primary); box-shadow:0 2px 6px #1118270a; }
.panel-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.panel-section-heading p { margin:0; }
.panel-export,.admin-page .primary { background:var(--primary); color:white; }
.panel-export { padding:12px 16px; font-size:14px; border-radius:10px; }
.admin-page .panel-secondary,.admin-page .dark { border:1px solid var(--border); background:white; color:var(--text); }
.admin-page .success,.admin-page .save-inline { background:#ecfdf5; color:#047857; }
.admin-page .danger { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.panel-table-scroll { overflow:auto; }
.admin-page .table { width:100%; border-collapse:collapse; font-size:14px; }
.admin-page .table th { background:#f8fafc; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
.admin-page .table :is(th,td) { padding:16px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
.admin-page .table td { overflow-wrap:anywhere; }
.admin-page .table td button { margin:4px; }
.panel-status { display:inline-block; font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; }
.panel-status.is-live { background:#ecfdf5; color:#047857; }
.panel-status.is-hidden { background:#f1f5f9; color:#64748b; }
.panel-empty { padding:32px 20px; border:1px dashed var(--border); border-radius:12px; background:#f8fafc; color:var(--muted); font-size:14px; text-align:center; }
#detail { scroll-margin-top:24px; }
.admin-detail-section { border-top:1px solid var(--border); }
.admin-detail-section > summary { cursor:pointer; padding:24px 4px; display:flex; justify-content:space-between; align-items:center; list-style:none; gap:16px; }
.admin-detail-section > summary::-webkit-details-marker { display:none; }
.admin-detail-section > summary::after { content:'+'; color:var(--primary); font-size:24px; font-weight:400; }
.admin-detail-section[open] > summary::after { content:'−'; }
.admin-detail-section summary strong { display:block; font-size:16px; font-weight:600; }
.admin-detail-section summary small { display:block; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.5; }
.admin-section-body { padding:0 0 24px; }
.admin-bio { grid-column:1/-1; }
.admin-page .edit-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.admin-page .edit-row > div { flex:1; min-width:0; }
.admin-page .edit-btn { flex-shrink:0; min-height:32px; padding:6px 10px; background:#eef2ff; color:var(--primary); font-size:12px; }
.admin-page .value { white-space:pre-wrap; }
.admin-page .value input,.admin-page .value textarea,.admin-page .value select { display:block; width:100%; margin-bottom:12px; }
.admin-page .value button { margin:0 8px 8px 0; }
.admin-page .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.admin-profile-extras { display:grid; gap:12px; margin-top:24px; }
.admin-profile-extras > label,.panel-field label,.admin-image-editor label { font-size:14px; font-weight:600; }
.admin-profile-extras label span { font-size:12px; font-weight:400; color:var(--muted); }
.admin-profile-extras textarea { width:100%; }
.admin-profile-extras fieldset { padding:20px; margin:8px 0; border:1px solid var(--border); border-radius:12px; }
.admin-profile-extras legend { padding:0 8px; font-size:14px; font-weight:600; }
.admin-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.admin-feature-grid label { display:flex; align-items:center; gap:10px; font-size:14px; }
.admin-profile-extras > button { justify-self:start; }
#admin-extras-status:empty { display:none; }
#admin-extras-status { font-size:14px; color:var(--muted); }
.admin-image-editor { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.admin-image-editor h3 { margin:0; }
.admin-image-editor img { width:100%; height:180px; object-fit:contain; border-radius:10px; background:white; }
.admin-image-editor input { width:100%; }
.panel-field { display:grid; gap:12px; justify-items:start; }
.panel-field textarea { width:100%; }
.panel-danger-zone { border-top:1px solid var(--border); margin-top:32px; padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.panel-danger-zone p { margin:6px 0 0; }
/* Instructor form rhythm and navigation */
.dash-page .panel-description { margin-bottom:24px; }
.dash-page #account .box > input { margin-top:12px; }
.dash-page .wrap input[type=file]::file-selector-button { border:0; border-radius:6px; padding:8px 12px; margin-right:12px; background:#eef2ff; color:var(--primary); font:inherit; cursor:pointer; }
.dash-page .edit-languages-btn { width:auto; }
.dash-page .unsaved-banner.incomplete { background:#fffbeb; color:#92400e; border-top:1px solid #fde68a; box-shadow:0 -4px 16px #11182706; }

.dash-page .wrap { max-width:1080px; padding-bottom:24px; }
.dash-page #summary .grid { margin-top:24px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.dash-page .form-grid { gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.dash-page form { gap:24px; }
.dash-page #tab-content-profile > *, .dash-page #tab-content-vehicle > * { margin-top:0; margin-bottom:16px; }
.dash-page #tab-content-profile > .label { margin:24px 0 8px !important; }
.dash-page #tab-content-profile > h3,.dash-page #tab-content-vehicle > h3 { margin:32px 0 16px !important; }
.dash-page .wrap textarea { min-height:160px; }
.dash-page .wrap input[type=checkbox] { width:18px; height:18px; padding:0; }
.dash-page .form-grid > label:has(input[type=checkbox]) { display:flex; align-items:center; gap:12px; padding:16px; background:#f8fafc; border:1px solid var(--border); border-radius:10px; font-size:14px; }
.dash-page .wrap button { margin-top:0; }
.dash-page .panel-field { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.dash-page .panel-field label { font-size:13px; font-weight:600; }
.dash-page .char-counter { margin-top:-8px !important; font-size:12px; }
.dash-page .panel-step-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:24px; margin-top:24px; border-top:1px solid var(--border); }
.dash-page .panel-step-actions button { width:100%; padding:12px 16px; border-radius:10px; font-size:14px; white-space:normal; }
.dash-page .panel-step-actions .panel-step-back { grid-column:1; background:white; color:var(--text); border:1px solid var(--border); }
.dash-page .panel-step-actions .panel-step-next { grid-column:2; background:var(--primary); color:white; }
.dash-page .card > :is(h2,h3):focus { outline:none; }
.dash-page #form > button[type=submit] { justify-self:start; width:auto; min-width:160px; }
.dash-page .instructor-header-top,.dash-page .instructor-header-tabs { max-width:1080px; margin:auto; }
.dash-page .instructor-header-top { gap:16px; }
.dash-page .dash-toggle-btn { margin:0; }
.dash-page .dash-logout-btn { margin:0; }
.dash-page .panel-enquiry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
@media(max-width:700px) {
  :is(.admin-page,.dash-page) .wrap { padding:0 16px; margin-top:24px; }
  :is(.admin-page,.dash-page) .card { padding:20px; border-radius:16px; }
  :is(.admin-page,.dash-page) .grid,.dash-page #summary .grid,.dash-page .form-grid,.admin-feature-grid,.dash-page .panel-enquiry-grid { grid-template-columns:minmax(0,1fr); }
  .panel-intro h1 { font-size:28px; }
  .panel-nav { width:100%; gap:4px; }
  .panel-nav button { flex:1; padding:10px 8px; }
  .admin-header { padding:16px; }
  .admin-header-user { display:none; }
  .admin-detail-section > summary { padding:20px 0; }
  :is(.admin-page,.dash-page) .box { padding:16px; }
  .admin-page .table :is(th,td) { padding:12px; }
  .dash-page .wrap { padding-bottom:48px; }
}

/* Instructor form labels and save actions */
.dash-page .panel-field > :is(label,.label), .dash-page #tab-content-profile > div > label, .dash-page #tab-content-vehicle > div > label { font-size:14px; font-weight:600; line-height:1.5; color:var(--text); margin:0; }
.dash-page .panel-field { gap:8px; }
.dash-page .panel-field > .panel-field-action { align-self:flex-start; width:auto; padding:10px 16px; background:#eef2ff; color:var(--primary); font-size:14px; }
.dash-page .panel-save-actions { margin-top:24px; }
.dash-page .wrap .panel-save-btn { width:auto; min-width:160px; padding:12px 20px; font-size:14px; font-weight:600; border-radius:10px; background:var(--primary); color:white; }
.dash-page #account .label { font-size:14px; font-weight:600; color:var(--text); }
.dash-page #account .value { color:var(--muted); font-size:13px; }
.dash-page .wrap input, .dash-page .wrap select, .dash-page .wrap textarea { font-weight:400; line-height:1.5; }

/* Image upload rhythm and compact instructor directory */
.dash-page .panel-image-upload { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.dash-page .panel-image-upload img.preview { margin:0; max-width:min(200px,100%); height:auto; }
.dash-page .panel-image-upload img.car-preview { width:100%; max-width:100%; height:220px; }
.dash-page .panel-image-upload input { width:100%; }
.admin-page .instructor-table td:first-child { white-space:nowrap; overflow-wrap:normal; }
.admin-page .instructor-table .panel-status { display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.admin-page .instructor-table .status-icon { display:none; flex-shrink:0; }
.admin-page .instructor-table .manage-instructor { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.admin-page .instructor-table .manage-instructor svg { flex-shrink:0; }
@media(max-width:600px) {
  .admin-page .instructor-table { table-layout:fixed; }
  .admin-page .instructor-table :is(th,td) { padding:12px 6px; }
  .admin-page .instructor-table th:first-child { width:34px; }
  .admin-page .instructor-table th:nth-child(3), .admin-page .instructor-table th:nth-child(4) { width:52px; text-align:center; }
  .admin-page .instructor-table td:nth-child(3), .admin-page .instructor-table td:nth-child(4) { text-align:center; }
  .admin-page .instructor-table .status-text,.admin-page .instructor-table .manage-text { display:none; }
  .admin-page .instructor-table .status-icon { display:block; }
  .admin-page .instructor-table .panel-status { width:32px; height:32px; padding:0; }
  .admin-page .instructor-table .manage-instructor { width:40px; height:40px; padding:0; margin:0; }
}

/* Instructor onboarding: progress reflects saved required details. */
.dash-page .onboarding-card { margin-top:24px; padding:24px; background:#f7f7ff; border:1px solid #dddffd; border-radius:16px; }
.dash-page .onboarding-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dash-page .onboarding-heading h3 { font-size:22px; margin:0 0 10px; }
.dash-page .onboarding-heading p { margin:0; max-width:620px; }
.dash-page .onboarding-percent { font-size:28px; font-weight:700; color:var(--primary); flex-shrink:0; text-align:right; }
.dash-page .onboarding-percent small { display:block; font-size:12px; font-weight:500; color:var(--muted); margin-top:4px; }
.dash-page .onboarding-progress { display:block; width:100%; height:8px; margin:24px 0; border:0; border-radius:99px; overflow:hidden; background:#e4e7f5; accent-color:var(--primary); }
.dash-page .onboarding-progress::-webkit-progress-bar { background:#e4e7f5; }
.dash-page .onboarding-progress::-webkit-progress-value { background:var(--primary); border-radius:99px; }
.dash-page .onboarding-progress::-moz-progress-bar { background:var(--primary); }
.dash-page .onboarding-steps { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.dash-page .onboarding-steps li { display:flex; gap:12px; align-items:flex-start; padding:16px; background:white; border:1px solid var(--border); border-radius:12px; }
.dash-page .onboarding-step-number { width:28px; height:28px; display:grid; place-items:center; flex-shrink:0; border-radius:50%; background:#eef2ff; color:var(--primary); font-size:13px; font-weight:600; }
.dash-page .is-complete .onboarding-step-number { color:#047857; background:#ecfdf5; }
.dash-page .onboarding-steps li > div { flex:1; min-width:0; }
.dash-page .onboarding-steps strong { font-size:14px; font-weight:600; }
.dash-page .onboarding-steps p { margin:6px 0 0; font-size:13px; line-height:1.6; }
.dash-page .wrap .onboarding-step-link { width:auto; background:transparent; color:var(--primary); padding:4px 8px; flex-shrink:0; }
.dash-page .onboarding-footer { margin-top:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.dash-page .wrap .onboarding-cta { width:auto; padding:12px 20px; }
.dash-page .onboarding-footer > span { color:var(--muted); font-size:12px; }
.dash-page .onboarding-complete { margin-top:24px; padding:20px; background:#ecfdf5; border:1px solid #d1fae5; border-radius:12px; }
.dash-page .onboarding-complete strong { color:#047857; }
.dash-page .onboarding-complete p { margin:8px 0 0; }
@media(max-width:600px) {
  .dash-page .onboarding-card { padding:16px; }
  .dash-page .onboarding-heading { gap:12px; }
  .dash-page .onboarding-heading h3 { font-size:20px; }
  .dash-page .onboarding-percent { font-size:22px; }
  .dash-page .onboarding-steps li { display:grid; grid-template-columns:28px minmax(0,1fr); padding:12px; }
  .dash-page .wrap .onboarding-step-link { grid-column:2; justify-self:start; padding:4px 0; }
  .dash-page .wrap .onboarding-cta { width:100%; }
}

/* Public search reassurance and tablet profile layout */
#searchBox { scroll-margin-top:calc(var(--header-height) + 24px); }
.search-assurance { font-size:16px; line-height:1.6; color:var(--muted); }
@media(min-width:701px) and (max-width:1100px) {
  #profile .lesson-type-box { grid-column:1 / -1; }
  #profile .lesson-type-box .info-value { white-space:nowrap; }
}

/* Learner plate brand detail and public profile photo gallery */
.learner-word { white-space:nowrap; }
.learner-plate { display:inline-block; width:1em; height:1em; margin-right:.045em; vertical-align:-.08em; object-fit:contain; background:#fff; border-radius:2px; }
.public-profile-hero { grid-template-rows:auto 1fr; column-gap:30px; row-gap:20px; }
.public-profile-heading { grid-column:2; grid-row:1; min-width:0; }
.public-profile-heading .title { margin:10px 0 0; overflow-wrap:anywhere; }
.public-profile-role { margin:0; font-size:15px; font-weight:500; color:var(--muted); }
.public-profile-hero > .profile-side { grid-column:1; grid-row:1 / span 2; }
.public-profile-hero > .hero-main { grid-column:2; grid-row:2; min-width:0; }
.vehicle-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.vehicle-gallery:has(.vehicle-photo:only-child) { grid-template-columns:minmax(0,1fr); }
.vehicle-photo { margin:0; padding:0; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#f8fafc; cursor:zoom-in; }
.vehicle-photo:hover { background:#f1f5f9; }
.vehicle-photo img { display:block; width:100%; height:320px; object-fit:contain; }
.lightbox-overlay .lightbox-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; margin:0; border:1px solid #ffffff60; border-radius:50%; background:#111827dd; color:white; z-index:1; }
.lightbox-prev { left:16px; }
.lightbox-next { right:16px; }
.lightbox-arrow[hidden] { display:none; }
.lightbox-count { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:white; background:#111827cc; padding:6px 14px; border-radius:99px; }
.lightbox-count:empty { display:none; }
@media(max-width:900px) {
  .public-profile-hero > .public-profile-heading,.public-profile-hero > .profile-side,.public-profile-hero > .hero-main { grid-column:1; grid-row:auto; }
}
@media(max-width:600px) {
  .vehicle-gallery { grid-template-columns:minmax(0,1fr); }
  .vehicle-photo img { height:240px; }
}

/* Shared instructor cards: homepage and search results */
.instructor-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.instructor-card { min-width:0; display:flex; flex-direction:column; align-items:center; padding:28px 24px 24px; background:white; border:1px solid var(--border); border-radius:20px; text-align:center; box-shadow:0 4px 18px #11182704; }
.instructor-card-photos { display:flex; align-items:center; justify-content:center; width:100%; margin-bottom:20px; }
.instructor-card-photo { position:relative; display:grid; place-items:center; width:112px; height:112px; flex-shrink:0; border-radius:50%; border:1px solid var(--border); overflow:hidden; background:#f8fafc; }
.instructor-card-photo:first-child { z-index:1; box-shadow:0 0 0 3px white; }
.instructor-card-car { margin-left:-20px; background:white; }
.instructor-card-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:white; }
.instructor-card-car img { object-fit:cover; padding:0; }
.instructor-card-car svg { width:44px; height:44px; color:#94a3b8; }
.instructor-card-initials { color:var(--primary); font-size:30px; font-weight:700; }
.instructor-card-name { margin:0 0 12px; color:var(--text); font-size:24px; font-weight:650; letter-spacing:-.025em; line-height:1.25; overflow-wrap:anywhere; }
.instructor-card-rating { margin:0 0 12px; font-size:14px; color:var(--text); line-height:1.5; }
.instructor-card-rating > span:first-child { color:var(--primary); }
.instructor-card-review-count { color:var(--muted); }
.instructor-card-caption { margin:0 0 20px; font-size:13px; color:var(--muted); line-height:1.5; }
.instructor-card-price { margin-top:auto; margin-bottom:20px; color:var(--text); font-size:23px; font-weight:600; letter-spacing:-.02em; }
.instructor-card-link { display:block; width:100%; padding:13px 16px; color:white; background:var(--primary); font-size:15px; border-radius:10px; text-decoration:none; font-weight:600; }
.instructor-card-link:hover { background:var(--primary-dark); }
.instructor-card-link:focus-visible { outline:3px solid #a5b4fc; outline-offset:4px; }
.instructor-card-grid > .empty { grid-column:1/-1; }
@media(max-width:1050px) { .instructor-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .instructor-card-grid { grid-template-columns:minmax(0,1fr); gap:16px; } }

/* Instructor signup: consistent section spacing across desktop and mobile. */
.become-instructor-page { --signup-section-space: 56px; }
.become-instructor-page .about-hero { padding: 64px 20px var(--signup-section-space); }
.become-instructor-page .about-hero h1 { margin: 0 0 20px; line-height: 1.15; }
.become-instructor-page .about-hero .cta-btn-primary { display: inline-block; margin-top: 28px; }
.become-instructor-page > .wrap { padding: 0 20px var(--signup-section-space); }
.become-instructor-page .smart-section { padding: var(--signup-section-space) 20px; }
.become-instructor-page .smart-sub { margin: 16px auto 32px; }
.become-instructor-page .ib-section { padding: var(--signup-section-space) 20px 0; }
.become-instructor-page .ib-page { padding-bottom: var(--signup-section-space); }
.become-instructor-page .ib-step:last-child { margin-bottom: 0; }
.become-instructor-page .about-cta-band { background: #000; margin-top: 0; padding: var(--signup-section-space) 20px; }
.become-instructor-page .about-tagline { margin-bottom: 0; }
.dash-page .specialties-help { margin: 6px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) {
  .become-instructor-page { --signup-section-space: 36px; }
  .become-instructor-page .about-hero { padding: 40px 16px var(--signup-section-space); }
  .become-instructor-page > .wrap { padding: 0 16px var(--signup-section-space); }
  .become-instructor-page .ib-section, .become-instructor-page .smart-section, .become-instructor-page .about-cta-band { padding-left: 16px; padding-right: 16px; }
  .become-instructor-page .ib-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .become-instructor-page .ib-stat { padding: 18px 12px; }
  .become-instructor-page .ib-section h2 { font-size: 30px; }
  .become-instructor-page .ib-step { padding: 18px; align-items: flex-start; }
  .become-instructor-page .ib-compare th, .become-instructor-page .ib-compare td { padding: 12px; }
}
.become-instructor-page .smart-card { min-height: 0; padding: 26px; }
.become-instructor-page .smart-card h3 { margin: 20px 0 12px; }

/* Show required-field feedback only after an instructor tries to continue. */
.dash-page .is-invalid { border: 1px solid #dc2626; border-radius: 12px; padding: 12px; background: #fff7f7; }
.dash-page [aria-invalid="true"], #signup-form.validation-attempted :invalid { border-color: #dc2626; outline: 1px solid #dc2626; background: #fff7f7; }
.field-error, .signup-validation-note { color: #b91c1c; font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.signup-validation-note { margin: 0 0 14px; }
.hero-search-btn:hover { background: var(--primary-dark) !important; }
.public-profile-hero .info-value { overflow-wrap: anywhere; line-height: 1.6; }

.dash-page .availability-fieldset { grid-column:1 / -1; min-width:0; border:1px solid var(--border); border-radius:12px; padding:16px; margin:0; }
.availability-fieldset legend { font-weight:600; padding:0 6px; }
.availability-head, .availability-row { display:grid; grid-template-columns:minmax(100px,1fr) repeat(2,minmax(0,1fr)); gap:12px; align-items:center; }
.availability-head { color:var(--muted); font-size:13px; margin-bottom:8px; }
.availability-row { margin-bottom:10px; }
.availability-row:last-child { margin-bottom:0; }
.availability-row strong { font-size:14px; font-weight:500; }
.dash-page .availability-row input { margin:0; min-width:0; width:100%; }
.availability-row .field-error { grid-column:1 / -1; }
.availability-legacy { font-size:14px; line-height:1.5; color:var(--muted); }
@media(max-width:480px) {
  .dash-page .availability-fieldset { padding:12px; }
  .availability-head, .availability-row { grid-template-columns:88px repeat(2,minmax(0,1fr)); gap:8px; }
  .dash-page .availability-row input { padding:10px 6px; font-size:13px; }
}