@charset "utf-8";

/* ========== Global navigation search ========== */
.nav-search-item {
   align-items: center;
}

nav.navbar .navbar-nav .nav-search-toggle {
   width: 44px;
   height: 44px;
   padding: 0 !important;
   border: 1px solid rgba(255, 255, 255, 0.45);
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   display: grid;
   place-items: center;
   cursor: pointer;
}

nav.navbar .navbar-nav .nav-search-toggle i {
   font-size: 1.05rem;
}

nav.navbar .navbar-nav .nav-search-toggle:hover,
nav.navbar .navbar-nav .nav-search-toggle:focus-visible {
   color: var(--white) !important;
   border-color: var(--accent-cyan);
   background: rgba(0, 212, 255, 0.14);
   box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
}

.navbar.scrolled .navbar-nav .nav-search-toggle {
   border-color: var(--gray-200);
   background: var(--gray-50);
   color: var(--blue-800) !important;
}

.navbar.scrolled .navbar-nav .nav-search-toggle:hover,
.navbar.scrolled .navbar-nav .nav-search-toggle:focus-visible {
   color: var(--blue-600) !important;
   background: var(--blue-50);
   border-color: var(--blue-300);
}

.nav-search-toggle:focus-visible,
.site-search-close:focus-visible,
.site-search-panel-form input:focus-visible,
.site-search-panel-form button:focus-visible,
.site-search-mobile-form input:focus-visible,
.site-search-mobile-form button:focus-visible {
   outline: 3px solid rgba(0, 212, 255, 0.42);
   outline-offset: 3px;
}

.site-search-panel {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   z-index: 4;
   opacity: 0;
   transform: translateY(-12px);
   transition: opacity 220ms ease, transform 220ms ease;
}

.site-search-panel.is-open {
   opacity: 1;
   transform: translateY(0);
}

.site-search-panel-card {
   padding: 28px 32px 30px;
   border: 1px solid rgba(163, 207, 255, 0.72);
   border-top: 3px solid var(--accent-cyan);
   border-radius: 0 0 var(--radius-xl) var(--radius-xl);
   background:
      radial-gradient(circle at 92% 8%, rgba(0, 212, 255, 0.11), transparent 28%),
      var(--white);
   box-shadow: 0 30px 70px rgba(6, 14, 26, 0.24);
}

.site-search-panel-heading {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 20px;
}

.site-search-panel-heading span {
   color: var(--blue-600);
   font-size: 0.73rem;
   font-weight: 800;
   letter-spacing: 0.16em;
}

.site-search-panel-heading h2 {
   margin: 4px 0 3px;
   color: var(--blue-900);
   font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.site-search-panel-heading p {
   margin: 0;
   font-size: 0.92rem;
}

.site-search-close {
   width: 44px;
   height: 44px;
   flex: 0 0 44px;
   border: 1px solid var(--gray-200);
   border-radius: 50%;
   background: var(--gray-50);
   color: var(--blue-800);
   cursor: pointer;
   transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.site-search-close:hover {
   color: var(--blue-600);
   border-color: var(--blue-300);
   background: var(--blue-50);
}

.site-search-panel-form label,
.site-search-mobile-form label,
.site-search-main-form > label {
   display: block;
   margin-bottom: 8px;
   color: var(--blue-900);
   font-size: 0.82rem;
   font-weight: 700;
}

.site-search-panel-form > div {
   min-height: 62px;
   padding: 7px 8px 7px 20px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   background: var(--gray-50);
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 14px;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.site-search-panel-form > div:focus-within {
   border-color: var(--blue-400);
   background: var(--white);
   box-shadow: 0 0 0 4px rgba(20, 86, 160, 0.1);
}

.site-search-panel-form > div > i {
   color: var(--blue-500);
   font-size: 1.2rem;
}

.site-search-panel-form input {
   min-width: 0;
   border: 0;
   outline: 0;
   background: transparent;
   color: var(--text-primary);
   font-size: 1rem;
}

.site-search-panel-form button {
   min-height: 46px;
   padding: 0 22px;
   border: 0;
   border-radius: var(--radius-sm);
   background: var(--gradient-primary);
   color: var(--white);
   font-weight: 700;
   cursor: pointer;
   box-shadow: var(--shadow-blue);
}

.site-search-panel-form button i {
   margin-left: 6px;
}

.site-search-panel-suggestions {
   margin-top: 17px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 9px;
}

.site-search-panel-suggestions > span {
   margin-right: 3px;
   color: var(--text-secondary);
   font-size: 0.8rem;
   font-weight: 700;
}

.site-search-panel-suggestions a {
   padding: 6px 11px;
   border: 1px solid var(--gray-200);
   border-radius: 999px;
   background: var(--white);
   color: var(--blue-700);
   font-size: 0.8rem;
   font-weight: 600;
}

.site-search-panel-suggestions a:hover,
.site-search-panel-suggestions a:focus-visible {
   border-color: var(--blue-300);
   background: var(--blue-50);
   color: var(--blue-600);
}

.site-search-scrim {
   position: fixed;
   inset: 0;
   z-index: 3;
   width: 100%;
   height: 100%;
   border: 0;
   background: rgba(6, 14, 26, 0.5);
   cursor: default;
   opacity: 0;
   transition: opacity 220ms ease;
}

.site-search-scrim.is-open {
   opacity: 1;
}

.site-search-mobile-form {
   margin: 0 12px 18px;
   padding: 14px;
   border: 1px solid rgba(163, 207, 255, 0.48);
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.96);
   box-shadow: var(--shadow-md);
}

.site-search-mobile-form > div {
   min-height: 48px;
   padding-left: 14px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-sm);
   background: var(--gray-50);
   display: grid;
   grid-template-columns: auto 1fr 44px;
   align-items: center;
   gap: 10px;
}

.site-search-mobile-form > div > i {
   color: var(--blue-500);
}

.site-search-mobile-form input {
   min-width: 0;
   border: 0;
   outline: 0;
   background: transparent;
   color: var(--text-primary);
   font-size: 0.95rem;
}

.site-search-mobile-form button {
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 7px;
   background: var(--gradient-primary);
   color: var(--white);
}

/* ========== Search result page ========== */
.site-search-hero .hero-image-bg {
   background: url("/img/hero-products.avif") center 46% / cover no-repeat;
   opacity: 0.74;
}

.site-search-hero .hero-overlay {
   z-index: 2;
   background: linear-gradient(135deg, rgba(6, 14, 26, 0.96) 0%, rgba(13, 34, 64, 0.84) 58%, rgba(20, 86, 160, 0.62) 100%);
}

.site-search-workspace {
   position: relative;
   background:
      radial-gradient(circle at 0 0, rgba(20, 86, 160, 0.08), transparent 32%),
      linear-gradient(180deg, var(--gray-50), var(--white) 28%);
}

.site-search-shell {
   position: relative;
   margin-top: -112px;
   padding: clamp(24px, 4vw, 42px);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-xl);
   background:
      radial-gradient(circle at 90% 0, rgba(0, 212, 255, 0.1), transparent 34%),
      var(--white);
   box-shadow: 0 28px 80px rgba(10, 22, 40, 0.13);
   z-index: 5;
}

.site-search-heading {
   margin-bottom: 24px;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
}

.site-search-heading h2 {
   margin: 8px 0 5px;
   color: var(--blue-900);
   font-size: clamp(1.45rem, 3vw, 2rem);
}

.site-search-heading p {
   margin: 0;
}

.site-search-scope {
   padding: 8px 12px;
   border: 1px solid #bbf7d0;
   border-radius: 999px;
   background: #f0fdf4;
   color: #166534;
   font-size: 0.8rem;
   font-weight: 700;
   white-space: nowrap;
}

.site-search-scope i {
   margin-right: 5px;
}

.site-search-main-control {
   min-height: 68px;
   padding: 8px 8px 8px 20px;
   border: 2px solid var(--blue-100);
   border-radius: var(--radius-md);
   background: var(--gray-50);
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 15px;
   transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.site-search-main-control:focus-within {
   border-color: var(--blue-400);
   background: var(--white);
   box-shadow: 0 0 0 5px rgba(20, 86, 160, 0.1);
}

.site-search-main-control > i {
   color: var(--blue-500);
   font-size: 1.3rem;
}

.site-search-main-control input {
   min-width: 0;
   border: 0;
   outline: 0;
   background: transparent;
   color: var(--blue-900);
   font-size: 1.05rem;
}

.site-search-main-control button {
   min-height: 50px;
   padding: 0 24px;
   border: 0;
   border-radius: var(--radius-sm);
   background: var(--gradient-primary);
   color: var(--white);
   font-weight: 800;
   cursor: pointer;
   box-shadow: var(--shadow-blue);
   transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.site-search-main-control button:hover {
   transform: translateY(-1px);
   box-shadow: 0 12px 32px rgba(20, 86, 160, 0.34);
}

.site-search-main-control button i {
   margin-left: 6px;
}

.site-search-popular {
   margin-top: 18px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 9px;
}

.site-search-popular > span {
   margin-right: 3px;
   color: var(--text-secondary);
   font-size: 0.82rem;
   font-weight: 700;
}

.site-search-popular a {
   padding: 7px 12px;
   border: 1px solid var(--gray-200);
   border-radius: 999px;
   background: var(--white);
   color: var(--blue-700);
   font-size: 0.82rem;
   font-weight: 600;
}

.site-search-popular a:hover,
.site-search-popular a:focus-visible {
   border-color: var(--blue-300);
   background: var(--blue-50);
}

.site-search-result-header {
   margin: 72px 0 24px;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 32px;
}

.site-search-eyebrow {
   margin-bottom: 6px;
   color: var(--blue-600);
   font-size: 0.75rem;
   font-weight: 800;
   letter-spacing: 0.14em;
}

.site-search-result-header h2 {
   margin-bottom: 7px;
   color: var(--blue-900);
   font-size: clamp(1.45rem, 3vw, 2rem);
}

.site-search-result-header p {
   margin-bottom: 0;
}

.site-search-synonyms {
   max-width: 410px;
   padding: 14px 17px;
   border: 1px solid var(--blue-100);
   border-radius: var(--radius-md);
   background: var(--blue-50);
}

.site-search-synonyms span {
   color: var(--blue-700);
   font-size: 0.78rem;
   font-weight: 800;
}

.site-search-synonyms span i {
   margin-right: 4px;
}

.site-search-synonyms p {
   margin: 4px 0 0;
   color: var(--blue-900);
   font-size: 0.84rem;
}

.site-search-filters {
   margin-bottom: 26px;
   padding: 7px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   background: var(--white);
   display: flex;
   gap: 6px;
   overflow-x: auto;
   box-shadow: var(--shadow-sm);
}

.site-search-filters a {
   min-height: 44px;
   padding: 9px 14px;
   border-radius: 8px;
   color: var(--text-secondary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   font-size: 0.88rem;
   font-weight: 700;
   white-space: nowrap;
}

.site-search-filters a span {
   min-width: 24px;
   height: 24px;
   padding: 0 6px;
   border-radius: 999px;
   background: var(--gray-100);
   color: var(--text-secondary);
   display: grid;
   place-items: center;
   font-size: 0.72rem;
}

.site-search-filters a:hover {
   color: var(--blue-600);
   background: var(--blue-50);
}

.site-search-filters a.active {
   background: var(--blue-800);
   color: var(--white);
   box-shadow: 0 8px 20px rgba(13, 34, 64, 0.18);
}

.site-search-filters a.active span {
   background: rgba(255, 255, 255, 0.17);
   color: var(--white);
}

.site-search-results {
   display: grid;
   gap: 14px;
}

.site-search-result-card {
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-lg);
   background: var(--white);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.site-search-result-card:hover {
   transform: translateY(-3px);
   border-color: var(--blue-200);
   box-shadow: var(--shadow-lg);
}

.site-search-result-card > a {
   min-height: 170px;
   padding: clamp(20px, 3vw, 28px);
   color: inherit;
   display: grid;
   grid-template-columns: 62px minmax(0, 1fr) 44px;
   align-items: center;
   gap: clamp(16px, 3vw, 26px);
}

.site-search-result-card > a:focus-visible {
   outline: 3px solid var(--blue-400);
   outline-offset: -4px;
}

.site-search-result-icon {
   width: 62px;
   height: 62px;
   border: 1px solid var(--blue-100);
   border-radius: 18px;
   background: linear-gradient(135deg, var(--blue-50), #e8faff);
   color: var(--blue-600);
   display: grid;
   place-items: center;
   font-size: 1.45rem;
}

.site-search-result-content {
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.site-search-result-type {
   margin-bottom: 5px;
   color: var(--blue-600);
   font-size: 0.73rem;
   font-weight: 800;
   letter-spacing: 0.08em;
}

.site-search-result-title {
   color: var(--blue-900);
   font-size: clamp(1.08rem, 2vw, 1.3rem);
   font-weight: 800;
   line-height: 1.45;
}

.site-search-result-excerpt {
   margin-top: 8px;
   color: var(--text-secondary);
   line-height: 1.75;
}

.site-search-result-meta {
   margin-top: 10px;
   color: #475569;
   font-size: 0.8rem;
   line-height: 1.55;
}

.site-search-result-meta i {
   margin-right: 6px;
   color: var(--blue-500);
}

.site-search-result-arrow {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--gray-50);
   color: var(--blue-700);
   display: grid;
   place-items: center;
   transition: color var(--transition-fast), background var(--transition-fast);
}

.site-search-result-card:hover .site-search-result-arrow {
   background: var(--gradient-primary);
   color: var(--white);
}

.site-search-pagination {
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid var(--gray-200);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
}

.site-search-pagination a {
   min-height: 44px;
   padding: 9px 15px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-sm);
   background: var(--white);
   color: var(--blue-700);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
}

.site-search-pagination span {
   color: var(--text-secondary);
   font-size: 0.86rem;
}

.site-search-empty {
   margin-top: 64px;
   padding: clamp(38px, 8vw, 72px) 24px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-xl);
   background:
      radial-gradient(circle at 50% 0, rgba(0, 212, 255, 0.08), transparent 32%),
      var(--white);
   text-align: center;
   box-shadow: var(--shadow-md);
}

.site-search-empty-icon {
   width: 76px;
   height: 76px;
   margin: 0 auto 18px;
   border: 1px solid var(--blue-100);
   border-radius: 24px;
   background: var(--blue-50);
   color: var(--blue-600);
   display: grid;
   place-items: center;
   font-size: 1.8rem;
}

.site-search-empty h2 {
   margin-bottom: 8px;
   color: var(--blue-900);
}

.site-search-empty > p:not(.site-search-eyebrow) {
   max-width: 620px;
   margin: 0 auto;
}

.site-search-empty-warning .site-search-empty-icon {
   background: #fff7ed;
   border-color: #fed7aa;
   color: #c2410c;
}

.site-search-empty-actions {
   margin-top: 24px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 12px;
}

.btn-bitaint-primary,
.btn-bitaint-secondary {
   min-height: 46px;
   padding: 10px 20px;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
}

.btn-bitaint-primary {
   background: var(--gradient-primary);
   color: var(--white);
   box-shadow: var(--shadow-blue);
}

.btn-bitaint-primary:hover {
   color: var(--white);
}

.btn-bitaint-secondary {
   border-color: var(--gray-200);
   background: var(--white);
   color: var(--blue-700);
}

.site-search-guide {
   margin-top: 64px;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 16px;
}

.site-search-guide article {
   padding: 28px 24px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-lg);
   background: var(--white);
   box-shadow: var(--shadow-sm);
}

.site-search-guide article > i {
   width: 48px;
   height: 48px;
   margin-bottom: 18px;
   border-radius: 14px;
   background: var(--blue-50);
   color: var(--blue-600);
   display: grid;
   place-items: center;
   font-size: 1.2rem;
}

.site-search-guide h2 {
   margin-bottom: 8px;
   color: var(--blue-900);
   font-size: 1.06rem;
}

.site-search-guide p {
   margin: 0;
   font-size: 0.88rem;
}

@media (max-width: 1199.98px) {
   nav.navbar .navbar-nav .nav-link {
      padding-right: 11px !important;
      padding-left: 11px !important;
   }

   .navbar .nav-link::before {
      right: 11px;
      left: 11px;
   }

   .site-search-guide {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 991.98px) {
   .site-search-panel,
   .site-search-scrim {
      display: none !important;
   }

   .site-search-shell {
      margin-top: -72px;
   }

   .site-search-result-header {
      align-items: flex-start;
      flex-direction: column;
   }

   .site-search-synonyms {
      max-width: none;
   }
}

@media (max-width: 767.98px) {
   .site-search-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
   }

   .site-search-main-control {
      padding: 8px 8px 8px 15px;
      grid-template-columns: auto minmax(0, 1fr);
   }

   .site-search-main-control button {
      grid-column: 1 / -1;
      width: 100%;
   }

   .site-search-result-header {
      margin-top: 54px;
   }

   .site-search-result-card > a {
      grid-template-columns: 50px minmax(0, 1fr);
      align-items: flex-start;
   }

   .site-search-result-icon {
      width: 50px;
      height: 50px;
      border-radius: 15px;
      font-size: 1.15rem;
   }

   .site-search-result-arrow {
      display: none;
   }

   .site-search-pagination {
      flex-wrap: wrap;
   }

   .site-search-pagination span {
      width: 100%;
      order: -1;
      text-align: center;
   }
}

@media (max-width: 575.98px) {
   .site-search-shell {
      margin-top: -54px;
      padding: 22px 18px;
      border-radius: var(--radius-lg);
   }

   .site-search-popular {
      align-items: flex-start;
   }

   .site-search-popular > span {
      width: 100%;
   }

   .site-search-guide {
      grid-template-columns: 1fr;
   }

   .site-search-filters {
      margin-right: -12px;
      margin-left: -12px;
      border-right: 0;
      border-left: 0;
      border-radius: 0;
   }

   .site-search-result-card > a {
      min-height: 0;
      padding: 20px 17px;
      gap: 14px;
   }

   .site-search-empty-actions a {
      width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   .site-search-panel,
   .site-search-scrim,
   .site-search-result-card,
   .site-search-main-control button {
      transition: none !important;
   }
}