@import url('preloader.css');

:root,
[data-theme="light"] {
  --hop-bg: #f4f5f5;
  --hop-bg-secondary: #ffffff;
  --hop-surface: #ffffff;
  --hop-surface-elevated: #fefcfb;
  --hop-surface-glass: rgba(255, 255, 255, 0.88);
  --hop-text: #2a322d;
  --hop-text-secondary: #1a1e1d;
  --hop-text-muted: #7a8582;
  --hop-border: rgba(0, 0, 0, 0.08);
  --hop-border-strong: rgba(0, 0, 0, 0.12);
  --hop-primary: #F26522;
  --hop-primary-hover: #D35400;
  --hop-header-bg: #ffffff;
  --hop-footer-bg: #1a1e1d;
  --hop-input-bg: #ffffff;
  --hop-input-border: #e5e7eb;
  --hop-shadow: rgba(0, 0, 0, 0.08);
  --hop-shadow-lg: rgba(0, 0, 0, 0.15);
  --hop-overlay: rgba(0, 0, 0, 0.5);
  --hop-hero-gradient: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  --hop-section-alt: #f7f9fc;
  --hop-card-hover-border: rgba(242, 101, 34, 0.25);
  --hop-glass-border: rgba(255, 255, 255, 0.2);
  --hop-scrollbar-track: #e4e4e4;
  --hop-scrollbar-thumb: #F26522;
  --hop-toggle-bg: #edf2f4;
  --hop-toggle-color: #2a322d;
}

[data-theme="dark"] {
  --hop-bg: #0A0A0A;
  --hop-bg-secondary: #111827;
  --hop-surface: #1F2937;
  --hop-surface-elevated: #15181c;
  --hop-surface-glass: rgba(31, 41, 55, 0.75);
  --hop-text: #f3f4f6;
  --hop-text-secondary: #ffffff;
  --hop-text-muted: #9ca3af;
  --hop-border: rgba(255, 255, 255, 0.08);
  --hop-border-strong: rgba(255, 255, 255, 0.12);
  --hop-primary: #F26522;
  --hop-primary-hover: #ff7b3d;
  --hop-header-bg: #111827;
  --hop-footer-bg: #0A0A0A;
  --hop-input-bg: #15181c;
  --hop-input-border: rgba(255, 255, 255, 0.1);
  --hop-shadow: rgba(0, 0, 0, 0.35);
  --hop-shadow-lg: rgba(0, 0, 0, 0.5);
  --hop-overlay: rgba(0, 0, 0, 0.75);
  --hop-hero-gradient: radial-gradient(circle at 50% 0%, rgba(242, 101, 34, 0.08) 0%, transparent 70%);
  --hop-section-alt: #111827;
  --hop-card-hover-border: rgba(242, 101, 34, 0.35);
  --hop-glass-border: rgba(255, 255, 255, 0.06);
  --hop-scrollbar-track: #1F2937;
  --hop-scrollbar-thumb: #F26522;
  --hop-toggle-bg: #1F2937;
  --hop-toggle-color: #fbbf24;
}

html {
  color-scheme: light;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] .bg-light {
  background-color: var(--hop-bg) !important;
}

body,
#main-wrapper,
.main-wrapper {
  background-color: var(--hop-bg) !important;
  color: var(--hop-text) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body::-webkit-scrollbar-track {
  background-color: var(--hop-scrollbar-track);
}

/* ── Theme toggle button ── */
.hop-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  padding: 0;
  border: 1px solid var(--hop-border);
  border-radius: 50%;
  background: var(--hop-toggle-bg);
  color: var(--hop-toggle-color);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.hop-theme-toggle:hover {
  background: var(--hop-primary);
  color: #fff;
  border-color: var(--hop-primary);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(242, 101, 34, 0.35);
}

.hop-theme-toggle:focus-visible {
  outline: 2px solid var(--hop-primary);
  outline-offset: 2px;
}

.hop-theme-toggle i {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

[data-theme="light"] .hop-theme-icon-sun,
[data-theme="dark"] .hop-theme-icon-moon {
  display: none;
}

.hop-theme-toggle--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10050;
  margin: 0;
  box-shadow: 0 4px 20px var(--hop-shadow);
}

/* ── Header / Navbar ── */
[data-theme="dark"] header,
[data-theme="dark"] .main-menu,
[data-theme="dark"] .stricky-header,
[data-theme="dark"] .stricked-menu {
  background-color: var(--hop-header-bg) !important;
  border-bottom: 1px solid var(--hop-border);
}

[data-theme="dark"] .main-menu__list a,
[data-theme="dark"] .main-menu__nav a {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .main-menu__list a:hover,
[data-theme="dark"] .main-menu__list a.active,
[data-theme="dark"] .main-menu__nav a:hover,
[data-theme="dark"] .main-menu__nav a.active {
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .main-menu-icons a {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .mobile-nav__content {
  background: var(--hop-bg-secondary) !important;
}

[data-theme="dark"] .mobile-nav__content .main-menu__list a {
  color: var(--hop-text) !important;
}

/* ── Typography ── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .heading h2,
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .hop-team-enthusiasts__header h2 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .hero-description,
[data-theme="dark"] .section-header p,
[data-theme="dark"] .hop-team-enthusiasts__header p {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .color-primary {
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .fm-sec {
  /* keep orange gradient accents */
}

/* ── Hero ── */
[data-theme="dark"] .hero-banner-2 {
  background: var(--hop-hero-gradient), var(--hop-bg) !important;
}

[data-theme="dark"] .hero-tagline,
[data-theme="dark"] .hero_title,
[data-theme="dark"] .hero-program-hook {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .glass-board {
  background: var(--hop-surface-glass) !important;
  border: 1px solid var(--hop-glass-border) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px var(--hop-shadow-lg) !important;
}

[data-theme="dark"] .glass-header h5,
[data-theme="dark"] .glass-title,
[data-theme="dark"] .glass-course-details h6,
[data-theme="dark"] .glass-course-details span {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .glass-float-card {
  background: var(--hop-surface) !important;
  border: 1px solid var(--hop-border) !important;
  box-shadow: 0 10px 30px var(--hop-shadow) !important;
}

[data-theme="dark"] .glass-float-card strong,
[data-theme="dark"] .glass-float-card span {
  color: var(--hop-text-muted) !important;
}

/* ── Features / About / Cards ── */
[data-theme="dark"] .hop-features-premium,
[data-theme="dark"] section.py-60 {
  background: var(--hop-bg) !important;
}

[data-theme="dark"] .about-hook {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .about-subhook {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .about-feature-card,
[data-theme="dark"] .modern-teacher-card,
[data-theme="dark"] .event-card,
[data-theme="dark"] .blog_card,
[data-theme="dark"] .team-card {
  background: var(--hop-surface) !important;
  border: 1px solid var(--hop-border) !important;
  box-shadow: 0 8px 30px var(--hop-shadow) !important;
  color: var(--hop-text) !important;
}

/* ── Popular Language Courses (homepage slider) ── */
[data-theme="dark"] .courses-1 {
  background: var(--hop-bg) !important;
  overflow: visible;
}

[data-theme="dark"] .courses-1 .section-title h2,
[data-theme="dark"] .courses-1 .section-title h6 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .course__card {
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: var(--hop-text) !important;
}

[data-theme="dark"] .course__card--a1 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%),
    linear-gradient(145deg, #2a2868 0%, #1e3a72 55%, #172850 100%) !important;
}

[data-theme="dark"] .course__card--a2 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%),
    linear-gradient(145deg, #18324f 0%, #16404e 52%, #122f3a 100%) !important;
}

[data-theme="dark"] .course__card--b1 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%),
    linear-gradient(145deg, #342550 0%, #2f3348 52%, #282f3e 100%) !important;
}

[data-theme="dark"] .course__card--b2 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%),
    linear-gradient(145deg, #1f4a62 0%, #1a3d52 52%, #143244 100%) !important;
}

[data-theme="dark"] .course__card--fluent {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 100%),
    linear-gradient(145deg, #3d2a1f 0%, #4a3020 38%, #2a2868 100%) !important;
}

[data-theme="dark"] .course__card:hover {
  border-color: rgba(242, 101, 34, 0.28) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(242, 101, 34, 0.14),
    0 0 48px rgba(242, 101, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .course__title,
[data-theme="dark"] .course__title a {
  color: #ffffff !important;
}

[data-theme="dark"] .course__desc {
  color: #ebedf0 !important;
}

[data-theme="dark"] .course__card .course_info li {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .course__french-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .about-feature-card .card-desc {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .about-feature-card:hover {
  border-color: var(--hop-card-hover-border) !important;
  box-shadow: 0 15px 40px var(--hop-shadow-lg) !important;
}

/* ── Team section ── */
[data-theme="dark"] .hop-team-enthusiasts,
[data-theme="dark"] .team-section-bg,
[data-theme="dark"] .team-section-area {
  background: var(--hop-section-alt) !important;
}

[data-theme="dark"] .hop-team-card,
[data-theme="dark"] .enthusiast-card {
  background: var(--hop-surface) !important;
  border: 1px solid var(--hop-border) !important;
}

[data-theme="dark"] .hop-team-card h4,
[data-theme="dark"] .enthusiast-card h4 {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .hop-team-card p,
[data-theme="dark"] .enthusiast-card p {
  color: var(--hop-text-muted) !important;
}

/* ── Testimonials ── */
[data-theme="dark"] .testimonials-area,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] section[class*="testimonial"] {
  background: var(--hop-bg) !important;
}

[data-theme="dark"] .testimonials-wave-bg {
  background: var(--hop-bg-secondary) !important;
}

[data-theme="dark"] .testimonial_card_2,
[data-theme="dark"] .testimonial-overlay-content .student-name {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .testimonial-overlay-content .student-sub {
  color: var(--hop-text-muted) !important;
}

/* ── Events ── */
[data-theme="dark"] .events-section {
  background: var(--hop-bg) !important;
}

[data-theme="dark"] .event-card__body h4,
[data-theme="dark"] .event-card__body p {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .btn-ev-outline {
  border-color: var(--hop-primary) !important;
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .btn-ev-outline:hover {
  background: var(--hop-primary) !important;
  color: #fff !important;
}

/* ── Google reviews / end section ── */
[data-theme="dark"] .end-section,
[data-theme="dark"] .google-reviews-section,
[data-theme="dark"] .reviews-section {
  background: var(--hop-bg) !important;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(242, 101, 34, 0.07) 0%, transparent 55%) !important;
}

[data-theme="dark"] .reviews-section .section-header h2 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .reviews-section .section-header p {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .gr-card,
[data-theme="dark"] .review-card {
  background: var(--hop-surface-elevated) !important;
  border: 1px solid var(--hop-border) !important;
  color: var(--hop-text) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px var(--hop-shadow-lg) !important;
}

[data-theme="dark"] .gr-bg-1,
[data-theme="dark"] .gr-bg-2,
[data-theme="dark"] .gr-bg-3,
[data-theme="dark"] .gr-bg-4 {
  background-color: var(--hop-surface-elevated) !important;
}

[data-theme="dark"] .gr-author-info h5 {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .gr-time,
[data-theme="dark"] .gr-text {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .gr-avatar {
  border-color: var(--hop-surface) !important;
}

[data-theme="dark"] .gr-google-badge {
  border-top-color: var(--hop-border) !important;
  color: var(--hop-text-muted) !important;
}

/* ── Footer (dark — premium redesign) ── */
[data-theme="dark"] footer {
  background: var(--hop-bg) !important;
}

[data-theme="dark"] footer .footer_main {
  background: linear-gradient(180deg, #0A0A0A 0%, #111827 45%, #0A0A0A 100%) !important;
  background-image: none !important;
  border-top: 1px solid var(--hop-border);
  position: relative;
  padding-top: 72px !important;
  padding-bottom: 48px !important;
}

[data-theme="dark"] footer .footer_main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hop-primary), transparent);
  opacity: 0.7;
}

[data-theme="dark"] footer .footer_main .vector_shape {
  opacity: 0.12;
  filter: grayscale(1) brightness(1.5);
}

[data-theme="dark"] footer .footer_main .dots {
  opacity: 0.08;
}

[data-theme="dark"] footer .footer_main h5.medium-black,
[data-theme="dark"] footer .footer_main .footer_widget h5 {
  color: var(--hop-text-secondary) !important;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  margin-bottom: 20px !important;
  position: relative;
  padding-bottom: 10px;
}

[data-theme="dark"] footer .footer_main h5.medium-black::after,
[data-theme="dark"] footer .footer_main .footer_widget h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--hop-primary);
  border-radius: 2px;
}

[data-theme="dark"] footer .footer_main .description_text {
  color: var(--hop-text-muted) !important;
  line-height: 1.75;
  font-size: 0.92rem;
}

[data-theme="dark"] footer .footer_main .list li,
[data-theme="dark"] footer .footer_main .list li a {
  color: var(--hop-text-muted) !important;
  transition: color 0.3s ease, transform 0.3s ease;
}

[data-theme="dark"] footer .footer_main .list li a:hover {
  color: var(--hop-primary) !important;
  transform: translateX(3px);
}

[data-theme="dark"] footer .footer_main .list li i {
  color: var(--hop-primary) !important;
}

[data-theme="dark"] footer .footer_main .bottom-row {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--hop-border);
}

[data-theme="dark"] footer .social_icons_list a {
  display: inline-flex;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.85;
}

[data-theme="dark"] footer .social_icons_list a:hover {
  opacity: 1;
  transform: translateY(-3px);
}

[data-theme="dark"] footer .copyright_row {
  background: #0A0A0A !important;
  border-top: 1px solid var(--hop-border);
  padding: 18px 24px !important;
}

[data-theme="dark"] footer .copyright_row p {
  color: var(--hop-text-muted) !important;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.hop-footer-attribution {
  display: inline;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.hop-footer-attribution:hover {
  color: #ffd8c2 !important;
  text-decoration: underline;
}

[data-theme="dark"] .hop-footer-attribution {
  display: inline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: var(--hop-text-muted) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

[data-theme="dark"] .hop-footer-attribution:hover {
  color: var(--hop-primary) !important;
  text-decoration: underline;
}


[data-theme="dark"] footer .footer-admin-link {
  color: var(--hop-text-muted) !important;
  opacity: 0.6;
}

[data-theme="dark"] footer .footer-admin-link:hover {
  color: var(--hop-primary) !important;
  opacity: 1;
}

/* ── Buttons ── */
[data-theme="dark"] .educate-btn.sec-2 {
  background: transparent !important;
  border: 2px solid var(--hop-primary) !important;
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .educate-btn.sec-2:hover {
  background: var(--hop-primary) !important;
  color: #fff !important;
}

[data-theme="dark"] .educate-btn.sec,
[data-theme="dark"] .educate-btn:not(.sec-2) {
  background: var(--hop-primary) !important;
  color: #fff !important;
}

[data-theme="dark"] .educate-btn:hover {
  background: var(--hop-primary-hover) !important;
}

/* ── Forms ── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .nice-select {
  background-color: var(--hop-input-bg) !important;
  border-color: var(--hop-input-border) !important;
  color: var(--hop-text) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-control:focus {
  border-color: var(--hop-primary) !important;
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.2) !important;
}

[data-theme="dark"] label {
  color: var(--hop-text-muted) !important;
}

/* ── Modals ── */
[data-theme="dark"] #quizModal,
[data-theme="dark"] .mfp-bg,
[data-theme="dark"] .mobile-nav__overlay {
  background: var(--hop-overlay) !important;
}

[data-theme="dark"] #quizModal > div,
[data-theme="dark"] .search-popup__content,
[data-theme="dark"] .mobile-nav__content {
  background: var(--hop-surface) !important;
  color: var(--hop-text) !important;
}

/* ── Contact page (theme-aware) ── */
.contact-page-wrap {
  background-color: var(--hop-bg);
  color: var(--hop-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .contact-page-wrap .info-card,
[data-theme="light"] .contact-page-wrap .form-container-card,
[data-theme="light"] .contact-page-wrap .form-wrapper {
  background: var(--hop-surface);
  border: 1px solid var(--hop-border);
  box-shadow: 0 8px 30px var(--hop-shadow);
}

[data-theme="light"] .contact-page-wrap .info-card h4,
[data-theme="light"] .contact-page-wrap .form-text-col h2 {
  color: var(--hop-text);
}

[data-theme="light"] .contact-page-wrap .info-card p,
[data-theme="light"] .contact-page-wrap .contact-hero p,
[data-theme="light"] .contact-page-wrap .form-text-col p {
  color: var(--hop-text-muted);
}

[data-theme="light"] .contact-page-wrap .form-wrapper input,
[data-theme="light"] .contact-page-wrap .form-wrapper textarea,
[data-theme="light"] .contact-page-wrap .form-wrapper select {
  background: var(--hop-input-bg);
  border-color: var(--hop-input-border);
  color: var(--hop-text);
}

[data-theme="dark"] .contact-page-wrap .info-card,
[data-theme="dark"] .contact-page-wrap .form-container-card,
[data-theme="dark"] .contact-page-wrap .form-wrapper {
  background: var(--hop-surface-elevated);
  border: 1px solid var(--hop-border);
  backdrop-filter: blur(12px);
}

[data-theme="dark"] .contact-page-wrap .info-card:hover {
  border-color: var(--hop-card-hover-border);
  box-shadow: 0 30px 60px var(--hop-shadow-lg);
}

[data-theme="dark"] .contact-page-wrap .form-wrapper input,
[data-theme="dark"] .contact-page-wrap .form-wrapper textarea,
[data-theme="dark"] .contact-page-wrap .form-wrapper select {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hop-input-border);
  color: var(--hop-text);
}

[data-theme="dark"] .contact-hero {
  background: var(--hop-hero-gradient);
}

/* Preloader styles → see css/preloader.css */

/* ── Admin pages ── */
[data-theme="dark"] .admin-login-page,
[data-theme="dark"] .admin-layout,
[data-theme="dark"] body.admin-body {
  background: var(--hop-bg) !important;
  color: var(--hop-text) !important;
}

[data-theme="dark"] .login-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .admin-sidebar,
[data-theme="dark"] .admin-main,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .data-table-wrap {
  background: var(--hop-surface) !important;
  border-color: var(--hop-border) !important;
  color: var(--hop-text) !important;
}

[data-theme="dark"] .admin-sidebar a,
[data-theme="dark"] .admin-table th,
[data-theme="dark"] .admin-table td {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .admin-sidebar a.active,
[data-theme="dark"] .admin-sidebar a:hover {
  color: var(--hop-primary) !important;
}

/* ── Misc overrides ── */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .white-bg {
  background-color: var(--hop-surface) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .color-dark {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .spinner-border.text-primary {
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .slick-dots li button:before {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .courses-slider .slick-dots li button {
  background: rgba(255, 255, 255, 0.22) !important;
}

[data-theme="dark"] .courses-slider .slick-dots li button:hover,
[data-theme="dark"] .courses-slider .slick-dots li button:focus {
  background: rgba(255, 255, 255, 0.34) !important;
}

[data-theme="dark"] .courses-slider .slick-dots li.slick-active button,
[data-theme="dark"] .courses-slider .slick-dots li.slick-active button:hover,
[data-theme="dark"] .courses-slider .slick-dots li.slick-active button:focus {
  background: var(--hop-primary) !important;
  box-shadow: 0 0 0 4px rgba(242, 101, 34, 0.22) !important;
}

[data-theme="dark"] .page-title-area,
[data-theme="dark"] .breadcrumb-area {
  background: var(--hop-bg-secondary) !important;
}

/* Smooth transitions on themed surfaces */
[data-theme="dark"] .hop-feature-pill,
[data-theme="dark"] .glass-board,
[data-theme="dark"] .info-card,
[data-theme="dark"] footer,
[data-theme="dark"] header,
[data-theme="dark"] .main-menu,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Homepage inline-style overrides (dark) ── */
[data-theme="dark"] .about-feature-card {
  background: var(--hop-surface) !important;
}

[data-theme="dark"] .about-feature-card .card-icon {
  background: var(--hop-surface-elevated) !important;
}

[data-theme="dark"] .about-feature-card .card-title {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .modern-teacher-card .info-card {
  background: var(--hop-surface) !important;
}

[data-theme="dark"] .modern-teacher-card .info-card h5 {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .modern-teacher-card .info-card p {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .glass-profile img {
  background: var(--hop-surface) !important;
  border-color: var(--hop-border) !important;
}

[data-theme="dark"] .glass-profile h5 {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .glass-profile span {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .glass-streak {
  background: linear-gradient(135deg, var(--hop-surface), rgba(242, 101, 34, 0.15)) !important;
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .gfc-icon {
  background: var(--hop-surface) !important;
}

[data-theme="dark"] .gfc-text strong {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .gfc-text span {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .team-card {
  background: var(--hop-surface) !important;
}

[data-theme="dark"] .team-card h4,
[data-theme="dark"] .team-card h5 {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .team-card p {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .events-section .section-header h2,
[data-theme="dark"] .end-section h2 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .event-card {
  background: var(--hop-surface) !important;
}

[data-theme="dark"] .event-card__image-wrap {
  border-color: var(--hop-border) !important;
}

[data-theme="dark"] .search-popup__content,
[data-theme="dark"] .search-popup__form input {
  background: var(--hop-surface) !important;
  color: var(--hop-text) !important;
  border-color: var(--hop-input-border) !important;
}

[data-theme="dark"] .nice-select .list {
  background: var(--hop-surface) !important;
  border-color: var(--hop-border) !important;
}

[data-theme="dark"] .nice-select .option {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .nice-select .option:hover,
[data-theme="dark"] .nice-select .option.selected {
  background: var(--hop-bg-secondary) !important;
}

/* ── Dark mode premium refinements (waves, teachers, market, transitions) ── */

/* Teacher section — background & wave dividers */
[data-theme="dark"] .team-section-bg {
  background-color: var(--hop-bg-secondary) !important;
}

[data-theme="dark"] .team-section-bg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230A0A0A' fill-opacity='1' d='M0,160L48,144C96,128,192,96,288,106.7C384,117,480,171,576,202.7C672,235,768,245,864,224C960,203,1056,149,1152,133.3C1248,117,1344,139,1392,149.3L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .team-section-bg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230A0A0A' fill-opacity='1' d='M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .team-blob-1 {
  background: rgba(242, 101, 34, 0.14) !important;
  opacity: 0.5;
}

[data-theme="dark"] .team-blob-2 {
  background: rgba(59, 130, 246, 0.1) !important;
  opacity: 0.4;
}

[data-theme="dark"] .educators-title {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .educators-desc {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .modern-teacher-card .info-card {
  background: var(--hop-surface-elevated) !important;
  border: 1px solid var(--hop-border) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px var(--hop-shadow-lg) !important;
}

[data-theme="dark"] .modern-teacher-card .info-card h5 {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .modern-teacher-card .stats-list {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .modern-teacher-card .desc {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .modern-teacher-card .img-wrapper {
  box-shadow: 0 16px 40px var(--hop-shadow) !important;
  border: 1px solid var(--hop-border);
}

[data-theme="dark"] .team-slider:hover .modern-teacher-card:not(:hover) {
  opacity: 0.82;
}

/* Premium features strip */
[data-theme="dark"] .hop-feature-pill {
  background: rgba(21, 24, 28, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .hop-feature-pill:hover {
  border-color: rgba(242, 101, 34, 0.4) !important;
  box-shadow: 0 24px 56px rgba(242, 101, 34, 0.15) !important;
}

[data-theme="dark"] .hop-feature-pill__icon-wrap {
  background: linear-gradient(145deg, rgba(242, 101, 34, 0.18) 0%, rgba(242, 101, 34, 0.06) 100%) !important;
  border-color: rgba(242, 101, 34, 0.28) !important;
}

[data-theme="dark"] .hop-feature-pill__text h5 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .hop-feature-pill__text p {
  color: var(--hop-text-muted) !important;
}

/* Learning community — enrollment stats */
[data-theme="dark"] .hop-market-overview {
  background: var(--hop-bg) !important;
}

[data-theme="dark"] .hop-market-overview::before {
  background: radial-gradient(ellipse, rgba(242, 101, 34, 0.1) 0%, transparent 72%) !important;
}

[data-theme="dark"] .hop-market-overview__header h2 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .hop-market-overview__subtitle {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .hop-market-infographic::before {
  background: linear-gradient(90deg, transparent, rgba(242, 101, 34, 0.35) 12%, rgba(242, 101, 34, 0.35) 88%, transparent) !important;
}

[data-theme="dark"] .hop-market-stat__value {
  background: linear-gradient(135deg, #f3f4f6 15%, #F26522 90%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="dark"] .hop-market-stat__label {
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .hop-market-stat__lang {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .hop-market-stat__desc {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .hop-market-stat__icon {
  background: rgba(242, 101, 34, 0.14) !important;
  border-color: rgba(242, 101, 34, 0.28) !important;
  box-shadow: 0 0 0 5px rgba(242, 101, 34, 0.14), 0 4px 20px rgba(242, 101, 34, 0.18) !important;
}

[data-theme="dark"] .hop-market-stat__accent {
  box-shadow: 0 0 14px rgba(242, 101, 34, 0.45) !important;
}

/* Language enthusiasts team section */
[data-theme="dark"] .hop-team-enthusiasts {
  background: var(--hop-bg-secondary) !important;
}

[data-theme="dark"] .hop-team-card__inner {
  background: var(--hop-surface-elevated) !important;
  border-color: var(--hop-border) !important;
  box-shadow: 0 16px 40px var(--hop-shadow-lg) !important;
}

[data-theme="dark"] .hop-team-card__name {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .hop-team-card__role {
  color: var(--hop-text-muted) !important;
}

[data-theme="dark"] .hop-team-card__avatar {
  border-color: var(--hop-surface) !important;
}

[data-theme="dark"] .hop-team-card--accent-blue .hop-team-card__shape {
  opacity: 0.35;
}

[data-theme="dark"] .hop-team-card--accent-green .hop-team-card__shape,
[data-theme="dark"] .hop-team-card--accent-teal .hop-team-card__shape,
[data-theme="dark"] .hop-team-card--accent-orange .hop-team-card__shape {
  opacity: 0.4;
}

/* Section wave decorator (between Google Reviews & Events) */
[data-theme="dark"] .section-decorator {
  background: var(--hop-bg-secondary) !important;
}

[data-theme="dark"] .section-decorator svg,
[data-theme="dark"] .section-decorator svg path {
  fill: var(--hop-bg) !important;
}

/* Events section gradient override */
[data-theme="dark"] .events-section {
  background: linear-gradient(135deg, var(--hop-bg) 0%, var(--hop-bg-secondary) 100%) !important;
}

/* Section heading contrast (homepage) */
[data-theme="dark"] .section-header h2 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] section h2.mb-16,
[data-theme="dark"] section .heading h2 {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .medium-black {
  color: var(--hop-text-secondary) !important;
}

[data-theme="dark"] .event-card__title {
  color: var(--hop-text) !important;
}

[data-theme="dark"] .event-tag--event {
  background: rgba(242, 101, 34, 0.15) !important;
  color: var(--hop-primary) !important;
}

[data-theme="dark"] .event-tag--workshop {
  background: rgba(58, 141, 222, 0.15) !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .event-tag--achievement {
  background: rgba(39, 174, 96, 0.15) !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .event-badge--live {
  background: rgba(231, 76, 60, 0.15) !important;
  color: #f87171 !important;
}

[data-theme="dark"] .event-badge--upcoming {
  background: rgba(26, 188, 156, 0.15) !important;
  color: #2dd4bf !important;
}

@media (max-width: 991px) {
  /* Footer Main Container Padding */
  footer .footer_main {
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }

  /* Force container padding for consistent 24px margins on both sides */
  footer .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
  }

  /* Stack footer columns vertically & remove excessive empty spaces */
  footer .footer_main .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px !important; /* Compact, equal spacing between sections */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  footer .footer_main .row > div:last-child {
    margin-bottom: 0 !important;
  }

  footer .footer_main .footer_widget {
    margin-bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Center the logo and scale properly */
  footer .footer_main .footer_widget a.mb-8 {
    display: inline-block !important;
    margin: 0 auto 16px !important;
    text-align: center !important;
  }

  footer .footer_main .footer_widget img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reduce heading sizes slightly & center typography underline decorative bar */
  [data-theme="dark"] footer .footer_main h5.medium-black,
  [data-theme="dark"] footer .footer_main .footer_widget h5,
  footer .footer_main h5.medium-black,
  footer .footer_main .footer_widget h5 {
    font-size: 1rem !important; /* ~16px */
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    display: inline-block !important;
    position: relative !important;
  }

  [data-theme="dark"] footer .footer_main h5.medium-black::after,
  [data-theme="dark"] footer .footer_main .footer_widget h5::after,
  footer .footer_main h5.medium-black::after,
  footer .footer_main .footer_widget h5::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: 24px !important;
  }

  /* Reduce paragraph and description font size to 14px */
  footer .footer_main .description_text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Ensure link lists wrap correctly and have centered structure */
  footer .footer_main .footer_widget .list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  footer .footer_main .footer_widget .list li {
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 6px !important; /* Equal vertical spacing */
  }

  footer .footer_main .footer_widget .list li:last-child {
    margin-bottom: 0 !important;
  }

  /* Improve touch targets for text links (minimum 44px height) */
  footer .footer_main .footer_widget .list li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    width: auto !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
  }

  /* Social Icons layout - centered, aligned and evenly spaced */
  footer .footer_main .bottom-row {
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--hop-border) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  footer .social_icons_list {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* Symmetrical 44px touch targets for brand icons */
  footer .social_icons_list li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  /* Copyright Row styling: Stacked, centered, safe area for floating buttons */
  footer .copyright_row,
  [data-theme="dark"] footer .copyright_row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px 24px !important; /* Consistent 20-24px margin on both sides */
    box-sizing: border-box !important;
  }

  footer .copyright_row p,
  [data-theme="dark"] footer .copyright_row p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    word-break: break-word !important; 
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force attribution badge/text to wrap to its own line on mobile to prevent overlaps */
  .hop-footer-attribution,
  [data-theme="dark"] .hop-footer-attribution {
    display: block !important;
    margin-top: 8px !important;
    text-align: center !important;
  }

  /* Admin lock touch target (44px x 44px) */
  footer .footer-admin-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Adjust Fixed Back to Top button on mobile/tablet viewports representing 44px size */
  .scroll-top {
    bottom: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .scroll-top::before {
    line-height: 44px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 575px) {
  .hop-theme-toggle {
    width: 36px;
    height: 36px;
    margin-right: 8px;
  }

  .hop-theme-toggle i {
    font-size: 14px;
  }

  .hop-theme-toggle--floating {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
}