/**
 * Public site (Medicax): do not import Tailwind here.
 * Tailwind Preflight (from resources/css/app.css) conflicts with Bootstrap + main.css
 * loaded from public/assets/user in app.blade.php — grid, typography, and images break.
 */

/* ===========================================================================
 * Clinique HOV brand palette
 *
 * Logo colors:
 *   Primary  = #0094da  (HOV blue)
 *   Accent   = #eead35  (HOV gold)
 *
 * Strategy: override the Medicax theme's CSS custom properties so all
 * buttons, headings, pills, links, etc. pick up the new colors with zero
 * template edits. The theme uses `--ztc-text-text-11` and `--ztc-bg-bg-10`
 * (both #02015A) as the primary brand color across hundreds of selectors
 * in main.css.
 * ======================================================================= */

:root {
  /* Semantic brand tokens we control from React components. */
  --clinique-primary: #0094da;
  --clinique-primary-dark: #0078b3;
  --clinique-primary-soft: #e6f4fc;
  --clinique-accent: #eead35;
  --clinique-accent-dark: #c98a1c;
  --clinique-accent-soft: #fdf4e1;
  --clinique-ink: #1c293f;
  --clinique-muted: #565857;

  /* Override the Medicax primary brand variables. */
  --ztc-text-text-11: var(--clinique-primary);
  --ztc-bg-bg-10:     var(--clinique-primary);

  /* Theme also occasionally uses a darker/vivid blue (#4416FF) as a secondary
     primary on buttons and hover states. Bring it in line with our brand. */
  --ztc-text-text-12: var(--clinique-primary-dark);
  --ztc-bg-bg-11:     var(--clinique-primary-dark);

  /* The original template's lime/green accents (#BEDC48 / #64B427) become our gold. */
  --ztc-text-text-4:  var(--clinique-accent);
  --ztc-bg-bg-3:      var(--clinique-accent);
  --ztc-text-text-10: var(--clinique-accent-dark);
  --ztc-bg-bg-9:      var(--clinique-accent-dark);
}

/* ---------------------------------------------------------------------------
 * Inline SVGs in our React markup were copied from the original template with
 * `stroke="#02015A"` baked in (the small arrow next to section subtitles, the
 * filled circle in primary buttons, etc.). Attribute selectors let us recolor
 * them without editing every component.
 * ------------------------------------------------------------------------- */
svg [stroke="#02015A"],
svg [stroke="#02015a"] {
  stroke: var(--clinique-primary) !important;
}
svg [fill="#02015A"],
svg [fill="#02015a"] {
  fill: var(--clinique-primary) !important;
}

/* A few buttons reuse fill="white" on top of the brand background, leave those alone. */

/* ---------------------------------------------------------------------------
 * Logo overrides for Clinique HOV
 *
 * The base template hard-codes .vl-logo img to a 164x50 horizontal wordmark
 * slot. Our logo is non-square (e.g. 777x460, ~1.69:1) so we constrain only
 * the height and let the width follow the natural aspect ratio. This works
 * for any future logo (square, portrait, or landscape) without further CSS.
 * ------------------------------------------------------------------------- */
.vl-logo,
.vl-offcanvas-logo {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.vl-logo a,
.vl-offcanvas-logo a {
  display: inline-flex !important;
  align-items: center !important;
}

.vl-logo img,
.vl-offcanvas-logo img {
  width: auto !important;
  height: 60px !important;
  max-height: 60px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  vertical-align: middle !important;
}

.vl-footer-logo img,
footer .vl-logo img {
  height: 72px !important;
  max-height: 72px !important;
}

.vl-offcanvas-logo img {
  height: 48px !important;
  max-height: 48px !important;
}

@media (max-width: 575.98px) {
  .vl-logo img {
    height: 48px !important;
    max-height: 48px !important;
  }
}

/* ===========================================================================
 * Language switcher — Clinique HOV
 *
 * Drives the hidden Google Translate widget. Pill in the header, block list
 * inside the mobile offcanvas. Uses the brand tokens so it always matches
 * the theme.
 * ======================================================================= */
.clinique-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  z-index: 30;
}

.clinique-lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 148, 218, 0.20);
  border-radius: 999px;
  background: #fff;
  color: var(--clinique-ink, #1c293f);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
  outline: none;
}

.clinique-lang__trigger:hover,
.clinique-lang__trigger:focus-visible {
  border-color: var(--clinique-primary);
  color: var(--clinique-primary);
  box-shadow: 0 4px 14px rgba(0, 148, 218, 0.18);
}

.clinique-lang__flag {
  font-size: 16px;
  line-height: 1;
}

.clinique-lang__code {
  letter-spacing: 0.04em;
}

.clinique-lang__chevron {
  font-size: 11px;
  transition: transform .2s ease;
}

.clinique-lang__chevron.is-open {
  transform: rotate(180deg);
}

.clinique-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.12);
  z-index: 1080;
}

.clinique-lang__menu li { list-style: none; }

.clinique-lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--clinique-ink, #1c293f);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.clinique-lang__option:hover {
  background: var(--clinique-primary-soft, #e6f4fc);
  color: var(--clinique-primary);
}

.clinique-lang__option.is-active {
  background: var(--clinique-primary);
  color: #fff;
}

.clinique-lang__option.is-active:hover {
  background: var(--clinique-primary-dark, #0078b3);
  color: #fff;
}

.clinique-lang__check {
  margin-left: auto;
  font-size: 12px;
}

.clinique-lang__name {
  white-space: nowrap;
}

/* Mobile offcanvas variant */
.clinique-lang--mobile {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.clinique-lang__mobile-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clinique-muted, #565857);
  margin-bottom: 10px;
}

.clinique-lang__mobile-options {
  display: flex;
  gap: 8px;
}

.clinique-lang__mobile-option {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 148, 218, 0.25);
  border-radius: 999px;
  background: #fff;
  color: var(--clinique-ink, #1c293f);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.clinique-lang__mobile-option:hover {
  border-color: var(--clinique-primary);
  color: var(--clinique-primary);
}

.clinique-lang__mobile-option.is-active {
  background: var(--clinique-primary);
  border-color: var(--clinique-primary);
  color: #fff;
}

/* Force-hide every piece of Google Translate UI chrome that can leak through.
   Modern Google Translate also injects `VIpgJd-*` and `skiptranslate` overlays
   anchored to the top-left of the viewport — those are the icons that look
   stray in the layout. We keep the hidden `<select class="goog-te-combo">`
   functional but invisible (positioned far off-screen below). */
.goog-te-banner-frame,
.goog-te-spinner-pos,
.goog-te-spinner,
.goog-te-spinner-anim,
.goog-te-balloon-frame,
.goog-te-balloon,
.goog-te-ftab,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
.goog-logo-link,
.goog-te-gadget-icon,
.goog-te-menu-frame,
#goog-gt-tt,
#gt-nvframe,
iframe.skiptranslate,
iframe.goog-te-menu-frame,
.skiptranslate,
.VIpgJd-ZVi9od-xl07Ob-lTBxed,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-yAWNEb-L7lbkb,
.VIpgJd-yAWNEb-hvhgNd,
.VIpgJd-yAWNEb-hvhgNd-aXYTce,
.VIpgJd-suEOdc,
div[id^="goog-gt-"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
}

body { top: 0 !important; }

#google_translate_element,
.goog-te-gadget {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

/* Don't let Google Translate's <font> wrappers ruin the visual styling.
   Google wraps every translated text node in nested <font> tags; left alone
   they alter inline metrics and push the header menu out of alignment in
   French. Forcing them to be fully layout-neutral keeps translated text
   visually identical to the original. */
font:hover,
.translated-ltr font,
.translated-rtl font {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.translated-ltr font,
.translated-rtl font {
  font: inherit !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* ===========================================================================
 * Header phone — hide the number on lg, show only at xl+ so the language
 * switcher, phone icon and "Get Involved" button all fit on one line.
 * ======================================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .clinique-header-phone__label {
    display: none !important;
  }
  .clinique-header-phone {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Home "Welcome to Clinique HOV" block — image alignment + readable title.
   Theme uses left:-50px on .about-images-area (overlap look) which reads as
   misplaced next to the text column. SplitText on .text-anime-style-3
   breaks badly when Google Translate wraps characters — title becomes one
   letter per line — so we use a plain heading + AOS instead. */
.clinique-home-about .about-images-area {
  left: 0 !important;
}

.clinique-home-about .about-images-area .clinique-home-about__figure {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.clinique-home-about .about-images-area .clinique-home-about__figure img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
}

@media (min-width: 992px) {
  .clinique-home-about .about-images-area .clinique-home-about__figure img {
    min-height: 380px;
  }
}

.clinique-home-about .clinique-home-about__title {
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
}

.clinique-home-about .clinique-home-about__title .split-line,
.clinique-home-about .clinique-home-about__title div {
  display: inline !important;
}

/* ===========================================================================
 * Branded preloader — override the theme's wave-SVG with the HOV logo and
 * a thin spinning ring in HOV blue.
 * ======================================================================= */
.cs_preloader.clinique-preloader {
  background-color: #ffffff;
}

.clinique-preloader .clinique-preloader__in {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clinique-preloader .clinique-preloader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--clinique-primary-soft, #e6f4fc);
  border-top-color: var(--clinique-primary, #0094da);
  border-right-color: var(--clinique-accent, #eead35);
  animation: clinique-preloader-spin 1.1s linear infinite;
  pointer-events: none;
}

.clinique-preloader .clinique-preloader__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  animation: clinique-preloader-pulse 1.6s ease-in-out infinite;
}

@keyframes clinique-preloader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes clinique-preloader-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.92); }
}