/* Add after the original template styles. Root must add qh-template to <body>.
   Deliberately preserves the source palette, backgrounds, type scale and layout. */

.qh-template :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--white, #fff);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--black-2, #4b168c);
}

.qh-template .wg-tab [role="tab"]:focus-visible {
  outline-offset: -3px;
}

.qh-template .skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  padding: 12px 18px;
  color: var(--black-2, #4b168c);
  background: var(--white, #fff);
  border: 2px solid var(--black-2, #4b168c);
  border-radius: 5px;
  transform: translateY(-200%);
}

.qh-template .skip-link:focus {
  transform: translateY(0);
}

.qh-template [hidden] {
  display: none !important;
}

.qh-template :is(h1, h2, h3, h4, [id]) {
  scroll-margin-top: 110px;
}

/* Keep the original small visible dots; enlarge only their transparent hit areas. */
.qh-template .sw-pagination .swiper-pagination-bullet {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  flex: 0 0 24px;
}

.qh-template [data-carousel-control] {
  min-width: 44px;
  min-height: 44px;
}

.qh-template [data-carousel-control][aria-disabled="true"] {
  cursor: not-allowed;
}

.qh-template .wg-tab [role="tab"] {
  min-height: 24px;
}

/* Source blue remains #259cf4. Its white small text fails normal-text contrast. */
.qh-template .box-banner.box-1.h-2 :is(.title-banner, .benefit-items, .benefit-items span, .benefit-items i),
.qh-template .box-banner.box-1.h-2 .tf-btn :is(span, i),
.qh-template .section-features.h-2 .heading-section :is(.title, .text, .sub-title),
.qh-template .tf-btn.style-blue:not(:hover) :is(span, i) {
  color: var(--color-title, #0c171a);
}

.qh-template .fun-fact-item.bg-green .counter-item :is(span, .title-counter) {
  color: var(--color-title, #0c171a);
}

.qh-template .fun-fact-item .title-counter {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Reinstate the source white card and purple badge foregrounds after adaptation. */
.qh-template .section-about.h-2 .wg-year-ex.bg-black-2 {
  background-color: var(--black-2, #4b168c);
}

.qh-template .section-about.h-2 .wg-year-ex.bg-black-2 :is(h2, h3, h4, p, a) {
  color: var(--white, #fff);
}

.qh-template .section-features.h-2 .features-item.style-2 .desc {
  color: var(--color-paragraph, #666b68);
}

/* Retain translucent purple inputs; make their actual boundaries discernible. */
.qh-template .form-contact-us.bg-black-2 :is(input:not([type="hidden"]), select, textarea) {
  border-color: var(--cayent, #be8feb) !important;
}

.qh-template .form-contact-us.bg-black-2 select option {
  color: var(--color-title, #0c171a);
  background-color: var(--white, #fff);
}

.qh-template .form-contact-us.bg-black-2 :is(.field-error, [data-form-status]) {
  color: var(--white, #fff);
}

.qh-template .form-contact-us.bg-black-2 [aria-invalid="true"] {
  border-color: var(--yellow, #ffec21) !important;
}

.qh-template .form-contact-us textarea {
  resize: vertical;
}

.qh-template .footer .title-mobile button {
  font: inherit;
  color: inherit;
  text-align: inherit;
}

/* Pointer/keyboard interaction pauses motion; an explicit pause button is still required. */
.qh-template .tf-marquee:is(:hover, :focus-within) .marquee-wrapper,
.qh-template .tf-marquee[data-paused="true"] .marquee-wrapper {
  animation-play-state: paused;
}

@media (max-width: 575px) {
  .qh-template .wg-tab.style-2 .tab-product {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qh-template,
  .qh-template * {
    scroll-behavior: auto !important;
  }

  .qh-template *,
  .qh-template *::before,
  .qh-template *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .qh-template .marquee-wrapper {
    animation: none !important;
  }

  .qh-template :is(.wow, .text-anime, .tf-fade-top, .tf-fade-left, .tf-fade-right, .tf-fade-bottom,
    .tf-fade-bottom-left, .tf-fade-top-right, .tf-animate-1, .tf-animate-2, .tf-animate-3, .tf-animate-4) {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
  }

  .qh-template .features-item.style-2:hover .icon,
  .qh-template .department-item.style-1:hover .icon {
    transform: none;
  }
}

@media (forced-colors: active) {
  .qh-template :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }

  .qh-template .sw-pagination .swiper-pagination-bullet {
    border: 1px solid ButtonText;
  }
}