/* =========================================================
   SperHub V2 — FINAL five search cards override
   Keep this file loaded LAST after every other CSS file.
   ========================================================= */

@media (min-width: 768px) {
  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;

    overflow: hidden !important;

    border: 0 !important;
    border-top: 1px solid #e7eaf0 !important;
    border-bottom: 1px solid #e7eaf0 !important;

    background: #f7f9fc !important;
  }

  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs > li {
    float: none !important;

    flex: 1 1 0 !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs > li > a,
  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs > li + li > a {
    position: relative !important;

    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    margin: 0 !important;
    padding: 7px 8px !important;

    overflow: hidden !important;

    border: 1px solid #e1e6ed !important;
    border-radius: 12px !important;

    color: #667085 !important;
    background: #ffffff !important;

    text-align: start !important;
    text-decoration: none !important;

    box-shadow: 0 3px 10px rgba(23, 32, 51, 0.035) !important;

    transform: none !important;

    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease !important;
  }
}

/* Remove every legacy underline / tab marker */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li > a::before,
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li > a::after {
  display: none !important;
  content: none !important;
}

/* Hover */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li > a:hover {
  border-color: rgba(255, 90, 31, 0.35) !important;

  color: #ff5a1f !important;
  background: #ffffff !important;

  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.075) !important;

  transform: translateY(-1px) !important;
}

/* Active card: fully orange */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active > a,
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active > a:hover,
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active > a:focus {
  border-color: #ff5a1f !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #ff5a1f 0%, #ff7826 100%) !important;

  box-shadow: 0 9px 22px rgba(255, 90, 31, 0.24) !important;

  transform: translateY(-1px) !important;
}

/* Icon */
html body .container-home-search
.sh-v2-search-tabs .sh-v2-tab-icon {
  display: grid !important;

  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  flex: 0 0 40px !important;

  place-items: center !important;

  margin: 0 !important;

  border: 1px solid rgba(255, 90, 31, 0.25) !important;
  border-radius: 11px !important;

  color: #ff5a1f !important;
  background: #fff7f3 !important;

  box-shadow: none !important;

  font-size: 17px !important;

  transform: none !important;
}

/* Active icon: clear white tile */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active .sh-v2-tab-icon {
  border-color: rgba(255, 255, 255, 0.85) !important;

  color: #ff5a1f !important;
  background: #ffffff !important;

  box-shadow: 0 5px 13px rgba(117, 34, 5, 0.15) !important;
}

/* Text wrapper must shrink inside its card */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li > a > span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Title */
html body .container-home-search
.sh-v2-search-tabs strong {
  display: block !important;

  max-width: 100% !important;
  margin: 0 0 2px !important;

  overflow: hidden !important;

  color: #172033 !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Subtitle */
html body .container-home-search
.sh-v2-search-tabs small {
  display: block !important;

  max-width: 100% !important;

  overflow: hidden !important;

  color: #99a1af !important;

  font-size: 8px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Active text */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active strong,
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active small {
  color: #ffffff !important;
}

/* Mobile: compact horizontal carousel, never ugly wrapping */
@media (max-width: 767px) {
  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 7px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border: 0 !important;
    border-top: 1px solid #e7eaf0 !important;
    border-bottom: 1px solid #e7eaf0 !important;

    background: #f7f9fc !important;

    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs::-webkit-scrollbar {
    display: none;
  }

  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs > li {
    float: none !important;

    flex: 0 0 154px !important;

    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;

    margin: 0 !important;

    scroll-snap-align: start;
  }

  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs > li > a {
    display: flex !important;
    width: 100% !important;
    min-height: 62px !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    padding: 7px !important;

    border: 1px solid #e1e6ed !important;
    border-radius: 12px !important;

    background: #fff !important;
  }

  html body .container-home-search
  .sh-v2-search-card
  .sh-v2-search-tabs.nav-tabs > li.active > a {
    background: linear-gradient(135deg, #ff5a1f, #ff7826) !important;
  }
}

/* Premium badges for QR and URL search methods */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li > a {
  position: relative !important;
}

.sh-v2-premium-badge {
  position: absolute;
  z-index: 4;
  top: 4px;
  inset-inline-start: 5px;

  display: inline-flex;
  align-items: center;
  gap: 3px;

  padding: 3px 5px;

  border: 1px solid rgba(122, 75, 0, .08);
  border-radius: 999px;

  color: #7a4b00;
  background: linear-gradient(135deg, #fff0b8, #ffc84d);

  box-shadow: 0 3px 8px rgba(142, 91, 0, .12);

  font-size: 6.5px;
  font-weight: 900;
  line-height: 1;

  pointer-events: none;
}

.sh-v2-premium-badge i {
  font-size: 6px;
}

html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active .sh-v2-premium-badge {
  border-color: rgba(255, 255, 255, .5);
  color: #7a4b00;
  background: #ffe29a;
}

@media (max-width: 767px) {
  .sh-v2-premium-badge {
    top: 3px;
    inset-inline-start: 4px;
  }
}

/* =========================================================
   Premium icon only — orange on white / white on active
   ========================================================= */

.sh-v2-premium-badge {
  position: absolute !important;
  z-index: 5 !important;
  top: 6px !important;
  inset-inline-start: 7px !important;

  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;

  place-items: center !important;

  border: 0 !important;
  border-radius: 7px !important;

  color: #ff5a1f !important;
  background: transparent !important;

  box-shadow: none !important;

  font-size: 0 !important;
  line-height: 1 !important;

  pointer-events: none !important;
}

.sh-v2-premium-badge i {
  color: inherit !important;
  font-size: 12px !important;
}

/* عندما يكون الكارت المختار برتقالي تصبح الأيقونة بيضاء */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li.active .sh-v2-premium-badge {
  border: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* مساحة بسيطة حتى لا تتداخل علامة Premium مع النص */
html body .container-home-search
.sh-v2-search-tabs.nav-tabs > li > a {
  padding-inline-start: 29px !important;
}

@media (max-width: 767px) {
  .sh-v2-premium-badge {
    top: 5px !important;
    inset-inline-start: 6px !important;
  }
}