/* ============================================
   Light Theme Overrides
   ============================================ */

[data-theme="light"] {
  /* Core variable overrides */
  --secondary-color: #111827;
  --ac-ash: #4b5563;
  --ac-black: #ffffff;
  --ac-BG: #f3f4f6;
  --ac-border: #d1d5db;
  --ac-180: #f9fafb;
  --ac-160: #e5e7eb;
  --ac-20: #0a4f82;
  --ac-40: #0d6ebd;
  --ac-60: #1a8cdf;
  --ac-80: #2ba3f0;
  --ac-120: #007acc;
  --ac-140: #005c99;
  --text-gradient: linear-gradient(91deg, #111827 0.61%, #6b7280 100%);
  --background: linear-gradient(45deg, #111827, #4b5563);
  --box-shadow: 0px 0px 100px 0px rgba(0, 153, 255, 0.08);
}

/* ============================================
   Global / Body
   ============================================ */

[data-theme="light"] body {
  background: #ffffff !important;
}

/* Scrollbar track */
[data-theme="light"] ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Navbar
   ============================================ */

[data-theme="light"] .navbar {
  background: #ffffff !important;
}

[data-theme="light"] #header {
  background: #ffffff;
}

[data-theme="light"] #top_bar {
  background: #f3f4f6;
}

/* Navbar gradient border */
[data-theme="light"] #header .wrapper {
  border-image: linear-gradient(
      to right,
      rgba(243, 244, 246, 0.5) 10%,
      #0099ff 50%,
      #0099ff 50%,
      rgba(243, 244, 246, 0.5) 90%
    )
    1 stretch;
}

/* Menu link hover background */
[data-theme="light"] #header .menu_item .active {
  background: linear-gradient(
    180deg,
    rgba(243, 244, 246, 0) 0%,
    rgba(0, 153, 255, 0.12) 100%
  );
}

[data-theme="light"] #header .menu_item .menu_link:hover {
  background: linear-gradient(
    180deg,
    rgba(243, 244, 246, 0) 0%,
    rgba(0, 153, 255, 0.12) 100%
  );
}

/* Mobile menu link colors */
@media only screen and (max-width: 992px) {
  [data-theme="light"] #header .menu_item .active,
  [data-theme="light"] #header .menu_item .menu_link:hover {
    background: linear-gradient(180deg, transparent 0%, transparent 100%);
  }

  [data-theme="light"] #header .menu_item.active .menu_link,
  [data-theme="light"] #header .menu_item .active {
    background: var(--primary-color);
    color: #ffffff;
  }

  [data-theme="light"] #header .menu_item.active .menu_link i {
    color: #ffffff;
  }

  [data-theme="light"] #header .menu_link:hover {
    color: var(--primary-color) !important;
  }

  [data-theme="light"] #header .menu_link::after {
    background: rgba(0, 153, 255, 0.1);
  }

  [data-theme="light"] #header .menu_link:hover::after {
    background: rgba(0, 153, 255, 0.1);
  }
}

/* Menu heading box in mobile */
[data-theme="light"] .menu_heading_box {
  background: #e5e7eb;
}

[data-theme="light"] .menu_heading_box .logo_name {
  background: linear-gradient(91deg, #111827 0.61%, #4b5563 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Submenu */
[data-theme="light"] #header .submenu {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Search bar full screen expand */
[data-theme="light"] #header .search_box .search .search__button.expand {
  background: rgba(255, 255, 255, 0.7);
}

/* View plan button hover */
[data-theme="light"] #header .search_box .view_plan_btn:hover {
  background: #111827;
  color: #ffffff;
}

/* ============================================
   Footer
   ============================================ */

[data-theme="light"] .footer .social_links .link {
  background: #111827;
}

[data-theme="light"] .footer .social_links .link i {
  color: #ffffff;
}

[data-theme="light"] .footer .social_links .link:hover {
  background: var(--primary-color);
}

[data-theme="light"] .footer .border_horizontal {
  color: #d1d5db;
}

/* ============================================
   Hero
   ============================================ */

[data-theme="light"] .hero {
  background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 100%) !important;
  background-image: none !important;
}

[data-theme="light"] .hero .hero_image {
  display: none;
}

[data-theme="light"] .hero .hero_content {
  max-width: 100%;
  text-align: center;
}

[data-theme="light"] .hero .description {
  text-align: center;
}

[data-theme="light"] .hero .cta_button:hover {
  background: #111827;
  color: #ffffff;
}

/* ============================================
   Services Section
   ============================================ */

[data-theme="light"] #services .service_card {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] #services .service_card .icon {
  background-color: #e5e7eb;
}

[data-theme="light"] #services .service_card:hover {
  background: var(--primary-color);
}

[data-theme="light"] #services .service_card:hover .title {
  background: #ffffff;
  background-clip: text;
  -webkit-background-clip: text;
}

[data-theme="light"] #services .service_card:hover .description {
  color: #ffffff;
}

/* ============================================
   Internet Feature
   ============================================ */

[data-theme="light"] .internet_feature {
  background: #ffffff;
}

[data-theme="light"] .internet_feature .tag span {
  background: #ffffff;
}

[data-theme="light"] .internet_feature .service_card .icon {
  background-color: #e5e7eb;
}

/* ============================================
   OTT Platforms
   ============================================ */

[data-theme="light"] .ott_platforms .tag span {
  background: #f3f4f6;
}

/* ============================================
   Pricing Section
   ============================================ */

[data-theme="light"] .pricing_section {
  background: #ffffff;
}

[data-theme="light"] .pricing_section .tag span {
  background: #ffffff;
}

[data-theme="light"] .pricing_section .pricing_col {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] .pricing_section .pricing_col:hover .get_start_btn {
  background: #111827;
  color: #ffffff;
}

[data-theme="light"] .pricing_section .pricing_col .get_start_btn:hover {
  background: #111827;
  color: #ffffff;
}

[data-theme="light"] .pricing_section .pricing_col .devices .icon {
  background: #e5e7eb;
}

/* ============================================
   Counter Wrapper
   ============================================ */

[data-theme="light"] .counter_wrapper .shape {
  background: radial-gradient(
    50% 50% at 50% 50%,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

[data-theme="light"] .counter_wrapper .shape img {
  background: radial-gradient(
    50% 50% at 50% 50%,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

[data-theme="light"] .counter_wrapper .tag span {
  background: #f3f4f6;
}

/* ============================================
   FAQ Section
   ============================================ */

[data-theme="light"] .faq_accordion .accordion-item {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] .faq_accordion .accordion-button {
  background: #ffffff;
}

[data-theme="light"] .faq_accordion .accordion-button:not(.collapsed) {
  background: rgba(0, 153, 255, 0.05);
}

/* ============================================
   Brand / Counter Line (about page)
   ============================================ */

[data-theme="light"] .others_counter .counter_line {
  background: #ffffff;
  border-image: linear-gradient(
      to right,
      rgba(243, 244, 246, 0.5) 10%,
      #0099ff 50%,
      #0099ff 50%,
      rgba(243, 244, 246, 0.5) 90%
    )
    1 stretch;
}

[data-theme="light"] .others_counter .tag span {
  background: #f3f4f6;
}

/* ============================================
   Testimonials
   ============================================ */

[data-theme="light"] .testimonials .tag span {
  background: #f3f4f6;
}

[data-theme="light"] .testimonials .testimonial_card {
  background: #ffffff;
  border-color: #e5e7eb;
}

/* ============================================
   Team (about page)
   ============================================ */

[data-theme="light"] .team .tag span {
  background: #f3f4f6;
}

[data-theme="light"] .team_card_wrapper .details {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-color: #e5e7eb;
}

/* ============================================
   Our Values (about page)
   ============================================ */

[data-theme="light"] .our_value .tag span {
  background: #f3f4f6;
}

/* ============================================
   Contact Page
   ============================================ */

[data-theme="light"] .contact_section {
  background: #ffffff;
}

[data-theme="light"] .contact_section .card {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}

[data-theme="light"] .get_in_touch {
  background: #ffffff;
}

[data-theme="light"] .get_in_touch .form_wrapper {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

[data-theme="light"] .get_in_touch .form_wrapper form textarea,
[data-theme="light"] .get_in_touch .form_wrapper form input {
  border-color: #d1d5db;
  color: #111827;
}

[data-theme="light"] .get_in_touch .form_wrapper .submit_btn:hover {
  background: #111827;
  color: #ffffff;
}

/* ============================================
   Blog
   ============================================ */

[data-theme="light"] .blog {
  background: #ffffff;
}

[data-theme="light"] .blog .card_wrapper .tag {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] .blog .rightside_wrapper .recent_posts {
  background: #f3f4f6;
}

[data-theme="light"] .blog .rightside_wrapper .tags {
  background: #f3f4f6;
}

[data-theme="light"] .blog .rightside_wrapper .tag_list .item,
[data-theme="light"] .blog .single_card_wrapper .tag_list .item {
  background: #e5e7eb;
}

[data-theme="light"] .blog .rightside_wrapper .post_info .tag {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] .blog .pagination .link {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

[data-theme="light"] .blog .pagination .link:hover {
  background: #e5e7eb;
}

[data-theme="light"] .blog .search_bar {
  border-color: #d1d5db;
}

[data-theme="light"] .blog .search_bar input {
  color: #111827;
}

/* Blog Single */
[data-theme="light"] .blog .single_card_wrapper .tag {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] .blog .single_card_wrapper .link {
  background: #111827;
}

[data-theme="light"] .blog .single_card_wrapper .link i {
  color: #ffffff;
}

[data-theme="light"] .blog .single_card_wrapper .link:hover {
  background: var(--primary-color);
}

[data-theme="light"] .blog .single_card_wrapper .buttons .btn,
[data-theme="light"] .blog .comment .details_wrap .reply_btn {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #111827;
}

[data-theme="light"] .blog .comment .comment_item_box {
  border-color: #e5e7eb;
}

[data-theme="light"] .blog .comment .comment_item_box .date {
  background: #e5e7eb;
}

[data-theme="light"] .blog .form_wrapper form textarea,
[data-theme="light"] .blog .form_wrapper form input {
  border-color: #d1d5db;
  color: #111827;
}

/* ============================================
   Coming Soon
   ============================================ */

[data-theme="light"] .coming-soon .notify-btn:hover {
  background: #111827;
  color: #ffffff;
}

/* ============================================
   Legal Page (inline style overrides)
   ============================================ */

[data-theme="light"] .legal-header h1 {
  color: #111827 !important;
}

[data-theme="light"] .legal-header p {
  color: #4b5563 !important;
}

[data-theme="light"] .legal-card {
  background: linear-gradient(145deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  border-color: rgba(0, 153, 255, 0.15) !important;
}

[data-theme="light"] .legal-card-content h3 {
  color: #111827 !important;
}

[data-theme="light"] .legal-card-content p {
  color: #4b5563 !important;
}

/* ============================================
   Plans Page - Zone Selector
   ============================================ */

[data-theme="light"] .zone-btn {
  background: rgba(0, 153, 255, 0.06);
  border-color: #d1d5db;
  color: #111827;
}

[data-theme="light"] .zone-btn:hover {
  background: rgba(0, 153, 255, 0.12);
}

[data-theme="light"] .zone-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

/* ============================================
   Hero Page (inner pages)
   ============================================ */

[data-theme="light"] #hero {
  background-color: #e8f4fd;
}

[data-theme="light"] #hero .hero-wrap .breadcrumb {
  background: #ffffff;
}

/* ============================================
   Search Results
   ============================================ */

[data-theme="light"] #searchResults {
  background-color: #e5e7eb;
}

/* ============================================
   Back to Top
   ============================================ */

[data-theme="light"] #back-to-top svg circle {
  stroke: rgba(0, 153, 255, 0.3);
}

/* ============================================
   Preloader
   ============================================ */

[data-theme="light"] .preloader {
  background: #ffffff;
}

/* ============================================
   Overlay (mobile menu)
   ============================================ */

[data-theme="light"] #header .overlay.active {
  background: rgba(255, 255, 255, 0.5);
}

/* ============================================
   Theme Toggle Button
   ============================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ac-border);
  color: var(--secondary-color);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--primary-color);
  background: rgba(0, 153, 255, 0.1);
}

.theme-toggle svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

/* ============================================
   Smooth transition for theme change
   ============================================ */

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease !important;
}