/* =====================================================FRONT-END CSS==================================================== */

/* ========================NAVBAR CSS======================== */
/* Desktop Dropdowns - All Levels */
.nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 50;
  padding: 8px 0;
}

/* Level 1 dropdown - below parent */
.nav-item:hover > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Level 2, 3, 4 dropdowns - to the right of parent */
.nav-dropdown .nav-item > .nav-dropdown {
  top: 0;
  left: 100%;
  margin-left: 8px;
  transform: translateX(10px);
}

.nav-dropdown .nav-item:hover > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Links in dropdowns */
.nav-dropdown > a,
.nav-dropdown > .nav-item > a,
.nav-dropdown > .nav-item > .nav-dropdown > a,
.nav-dropdown > .nav-item > .nav-dropdown > .nav-item > a,
.nav-dropdown > .nav-item > .nav-dropdown > .nav-item > .nav-dropdown > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-dropdown > a:hover,
.nav-dropdown > .nav-item > a:hover,
.nav-dropdown > .nav-item > .nav-dropdown > a:hover,
.nav-dropdown > .nav-item > .nav-dropdown > .nav-item > a:hover,
.nav-dropdown
  > .nav-item
  > .nav-dropdown
  > .nav-item
  > .nav-dropdown
  > a:hover {
  background: #eff6ff;
  color: #2563eb;
}

/* Category labels in dropdowns */
.nav-category-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-category-label:hover {
  background: #eff6ff;
  color: #2563eb;
}

/* Search Bar */
.header-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
  display: none;
}

.header-search.active {
  display: block;
}

.header-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 999;

  /* background: rgba(255, 255, 255, 0.95); */
  /* backdrop-filter: blur(10px); */

  border-top: 1px solid #e5e7eb;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

  transition: all 0.3s ease;
}

.header-search.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #fff;
  transform: translateX(100%);
  transition: 0.3s;
  z-index: 9999;
  overflow-y: auto;
}

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

.mobile-sub {
  display: none;
  padding-left: 16px;
  margin-top: 8px;
}

.mobile-sub.active {
  display: block;
}

.mobile-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 0;
  font-weight: 500;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: #374151;
}

.mobile-toggle .fa-chevron-down {
  transition: transform 0.3s;
}

.mobile-toggle.active .fa-chevron-down {
  transform: rotate(180deg);
}

.mobile-link {
  display: flex;
  padding: 10px 0;
  color: #374151;
  text-decoration: none;
}

.mobile-link:hover {
  color: #2563eb;
}

/* Level indicators for mobile */
.mobile-sub .mobile-sub {
  padding-left: 20px;
}

.mobile-sub .mobile-sub .mobile-sub {
  padding-left: 24px;
}

/* Enhanced Top Bar Styling */
.top-bar-link {
  text-decoration: underline;
  transition: opacity 0.2s;
}

.top-bar-link:hover {
  opacity: 0.85;
}

/* Enhanced Navigation Button Styling */
.nav-item > button {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-item > button:hover {
  color: #2563eb;
}

.nav-item > button .fa-chevron-down {
  font-size: 10px;
}

/* Main navigation link (without dropdown) */
nav > a {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  transition: color 0.2s;
  white-space: nowrap;
}

nav > a:hover {
  color: #2563eb;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

body {
  top: 0px !important;
}

/* remove ugly border */
.goog-te-gadget {
  font-size: 14px !important;
}

.goog-te-combo {
  border-radius: 6px;
  padding: 5px;
}

/* Flag icon sizing */
.fi {
  display: inline-block;
  width: 22px !important;
  height: 16px !important;
  background-size: cover !important;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Hide mobile menu on desktop ALWAYS */
@media (min-width: 1024px) {
  .mobile-menu {
    display: none !important;
  }
}

#nav-support {
  display: flex;
}
/* ========================END NAVBAR CSS======================== */

/* ========================HOME PAGE CSS======================== */
.breaking-news-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Exact Hero Background */
.hero-section {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.3)),
    url("<?= base_url(); ?>assets/uploads/partners_image/1211701060354_Mask-Group-28.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 600px;
  position: relative;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  overflow-y: auto;
  animation: fadeIn 0.3s;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideDown 0.3s;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  position: relative;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form Styles */
.prescription-form input,
.prescription-form textarea,
.prescription-form select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s;
  background: #f9fafb;
}

.prescription-form input:focus,
.prescription-form textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  background: white;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.prescription-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #374151;
  font-size: 13px;
}

.required::after {
  content: "*";
  color: #ef4444;
  margin-left: 3px;
}

/* Exact button from image */
.btn-white {
  background: white;
  color: #1f2937;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}

.btn-white:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: white;
  padding: 14px 28px;
  border: 2px solid white;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-outline-white:hover {
  background: white;
  color: #1f2937;
}

.btn-yellow {
  background: #ca8a04;
  color: #1f2937;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(202, 138, 4, 0.3);
}

.btn-yellow:hover {
  background: #b45309;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(202, 138, 4, 0.4);
}

.btn-submit {
  background: #8b5cf6;
  color: white;
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-submit:hover {
  background: #7c3aed;
  transform: translateY(-2px);
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #ef4444;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 20px;
  transition: all 0.3s;
  z-index: 10;
}

.close-btn:hover {
  background: #dc2626;
  transform: rotate(90deg);
}

/* ===== MEDICINE SLIDER FIX ===== */
#sliderWrapper {
  overflow: hidden;
  width: 100%;
}

#medicineSlider {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
  will-change: transform;
}

#medicineSlider .slide-card {
  flex: 0 0 256px;
  /* w-64 = 16rem = 256px */
  width: 256px;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 500px;
  }

  .modal-content {
    margin: 10px;
  }

  #medicineSlider .slide-card {
    flex: 0 0 220px;
    width: 220px;
  }
}

#categoryWrapper {
  overflow: hidden;
  width: 100%;
}

.category-card {
  width: 256px;
}

.iti {
  width: 100%;
}

.iti input {
  width: 100% !important;
}

.iti__country-list {
  z-index: 9999 !important;
}

.iti--container {
  z-index: 9999 !important;
}

/* ========================END HOME PAGE CSS======================== */

/* ========================COOKIE POPUP CSS======================== */

/* HIDE BY DEFAULT */
#cookie-popup {
  display: none;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* BUTTON STYLE */
.accept-cookie-btn {
  background: #347cfa;
  color: #ffffff;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.reject-cookie-btn {
  background: #7a73a2;
  color: #fff;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

/* HOVER */
.accept-cookie-btn:hover {
  background: #236be5;
}
.reject-cookie-btn:hover {
  background: #6a6294;
}

/* MOBILE IMPROVEMENT */
@media (max-width: 640px) {
  #cookie-popup {
    padding: 16px;
  }

  .accept-cookie-btn,
  .reject-cookie-btn {
    width: 100%;
    text-align: center;
  }
}

/* ========================END COOKIE POPUP CSS======================== */