/*
 * HKN Yala Safari controlled dark palette v8.
 * Activated only when the browser/device reports a dark colour preference.
 * The approved light palette in site.css remains unchanged.
 */
html.theme-dark{
    color-scheme: dark !important;
    supported-color-schemes: dark !important;
    --hkn-dark-page: #07140f;
    --hkn-dark-section: #0b1d15;
    --hkn-dark-section-alt: #0e241a;
    --hkn-dark-card: #142c21;
    --hkn-dark-card-2: #193528;
    --hkn-dark-border: #2b5140;
    --hkn-dark-text: #f1f7f3;
    --hkn-dark-muted: #aec2b6;
    --hkn-dark-green: #39c88a;
    --hkn-dark-orange: #ffad3f;
  }

  html.theme-dark,
  html.theme-dark body{
    background: var(--hkn-dark-page) !important;
    color: var(--hkn-dark-text) !important;
  }

  html.theme-dark body,
  html.theme-dark body *{
    forced-color-adjust: none;
  }

  html.theme-dark img,
  html.theme-dark picture,
  html.theme-dark video,
  html.theme-dark canvas,
  html.theme-dark svg{
    mix-blend-mode: normal !important;
  }

  /* Dark-mode-only header treatment. The approved light header remains untouched. */
  html.theme-dark .site-nav{
    background: linear-gradient(180deg, rgba(20, 38, 29, .99), rgba(10, 23, 17, .99)) !important;
    border-bottom: 1px solid rgba(166, 255, 211, .22) !important;
    box-shadow: 0 13px 34px rgba(0, 0, 0, .42), inset 0 -1px 0 rgba(255,255,255,.035) !important;
  }
  html.theme-dark .brand,
  html.theme-dark .nav-links a{ color: #ffffff !important; }
  html.theme-dark .brand img{
    filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.22)) !important;
    opacity: .98 !important;
  }
  html.theme-dark .nav-links,
  html.theme-dark .profile-quick-menu{
    background: #142b20 !important;
    color: #f4fff8 !important;
    border-color: rgba(139, 231, 187, .30) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.42) !important;
  }
  html.theme-dark .profile-quick-menu::before{
    background: #142b20 !important;
    border-color: rgba(139, 231, 187, .30) !important;
  }
  html.theme-dark .profile-quick-menu a{ color: #f4fff8 !important; }
  html.theme-dark .profile-quick-menu a:hover,
  html.theme-dark .profile-quick-menu a:active{ background: #1f4534 !important; }
  html.theme-dark .nav-links a{ border-color: rgba(139, 231, 187, .16) !important; }
  html.theme-dark .menu-toggle,
  html.theme-dark .nav-profile-button{
    background: linear-gradient(145deg, #ffffff, #eef8f2) !important;
    border: 2px solid rgba(255,255,255,.98) !important;
    color: #0b6547 !important;
    box-shadow: 0 11px 28px rgba(0,0,0,.34), inset 0 1px 0 #ffffff !important;
  }
  html.theme-dark .menu-toggle span{ background: #0b6547 !important; }
  html.theme-dark .nav-profile-button svg{ fill: #0b6547 !important; }

  /* Theme switch is shown only when the device/browser reports dark mode. */
  .theme-switch-wrap{ display:none; align-items:center; flex:0 0 auto; }
  html.system-dark .theme-switch-wrap,
  html.theme-dark .theme-switch-wrap{ display:flex; }
  .theme-switch-button{
    min-width:50px;
    height:44px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:999px;
    cursor:pointer;
    font:800 12px/1 Arial,sans-serif;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .theme-switch-button:active{ transform:scale(.95); }
  .theme-switch-button svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .theme-switch-button .theme-icon-moon{ display:none; }
  html.theme-dark .theme-switch-button{
    color:#0b3827 !important;
    background:linear-gradient(145deg,#ffffff,#dff8eb) !important;
    border:1px solid rgba(255,255,255,.96) !important;
    box-shadow:0 9px 24px rgba(0,0,0,.30),inset 0 1px 0 #fff !important;
  }
  html.theme-light.system-dark .theme-switch-button{
    color:#ffffff !important;
    background:linear-gradient(145deg,#227c58,#0c543a) !important;
    border:1px solid rgba(255,255,255,.75) !important;
    box-shadow:0 9px 24px rgba(9,73,49,.24),inset 0 1px 0 rgba(255,255,255,.25) !important;
  }
  html.theme-light.system-dark .theme-switch-button .theme-icon-sun{ display:none; }
  html.theme-light.system-dark .theme-switch-button .theme-icon-moon{ display:block; }

  /* Main light sections. Existing intentionally-dark/photo sections remain intact. */
  html.theme-dark .intro,
  html.theme-dark .packages-section,
  html.theme-dark #reviews,
  html.theme-dark .why-section,
  html.theme-dark .booking-steps,
  html.theme-dark .faq-section,
  html.theme-dark .payment-section,
  html.theme-dark .availability-section,
  html.theme-dark .gallery-page-main{
    background: var(--hkn-dark-section) !important;
    color: var(--hkn-dark-text) !important;
  }
  html.theme-dark .animal-categories-section,
  html.theme-dark .google-reviews-section,
  html.theme-dark .facebook-section,
  html.theme-dark .map-section{
    background: linear-gradient(180deg, var(--hkn-dark-section-alt), var(--hkn-dark-page)) !important;
    color: var(--hkn-dark-text) !important;
  }
  html.theme-dark .dark,
  html.theme-dark .memories-section,
  html.theme-dark .sightings-section,
  html.theme-dark .gallery-preview{
    background-color: #071a12 !important;
    color: #fff !important;
  }

  html.theme-dark h1,
  html.theme-dark h2,
  html.theme-dark h3,
  html.theme-dark h4,
  html.theme-dark h5,
  html.theme-dark h6,
  html.theme-dark .packages-heading h2,
  html.theme-dark .availability-head h3,
  html.theme-dark .calendar-month h4{
    color: var(--hkn-dark-text) !important;
  }
  html.theme-dark p,
  html.theme-dark .section-copy,
  html.theme-dark .google-live-note,
  html.theme-dark .feature-grid p,
  html.theme-dark .steps-grid p,
  html.theme-dark .faq-list p,
  html.theme-dark .fb-body p,
  html.theme-dark .google-review-card p,
  html.theme-dark .google-rating-summary p,
  html.theme-dark .google-no-key-card p,
  html.theme-dark .social-fallback p{
    color: var(--hkn-dark-muted) !important;
  }
  html.theme-dark small,
  html.theme-dark .stats span,
  html.theme-dark .animal-category small,
  html.theme-dark .fb-head small,
  html.theme-dark .google-review-head small{
    color: #9eb5a8 !important;
  }

  html.theme-dark .section-badge:not(.light){
    background: #18382a !important;
    color: #81e0b2 !important;
    border: 1px solid #2e6148 !important;
  }

  /* Cards and panels */
  html.theme-dark .stat-card,
  html.theme-dark .cards article,
  html.theme-dark .feature-grid article,
  html.theme-dark .steps-grid article,
  html.theme-dark .facebook-card,
  html.theme-dark .faq-list details,
  html.theme-dark .payment-grid div,
  html.theme-dark .availability-wrap,
  html.theme-dark .availability-card,
  html.theme-dark .calendar-month,
  html.theme-dark .map-card,
  html.theme-dark .google-rating-summary,
  html.theme-dark .google-review-card,
  html.theme-dark .google-no-key-card,
  html.theme-dark .social-fallback,
  html.theme-dark .google-live-embed{
    background: linear-gradient(145deg, var(--hkn-dark-card-2), var(--hkn-dark-card)) !important;
    color: var(--hkn-dark-text) !important;
    border-color: var(--hkn-dark-border) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30) !important;
  }
  html.theme-dark .stat-card{
    border: 1px solid rgba(105, 190, 148, .26) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }
  html.theme-dark .stat-card:before{
    background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 46%) !important;
  }
  html.theme-dark .feature-card{
    background: linear-gradient(145deg, #173429, #10261d) !important;
    border-color: #315744 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.32) !important;
  }
  html.theme-dark .feature-card-bg{ opacity: calc(var(--feature-image-opacity,.09) * .72) !important; }
  html.theme-dark .feature-card-divider{ background: rgba(134, 214, 173, .28) !important; }
  html.theme-dark .feature-card-visual,
  html.theme-dark .feature-card-visual strong,
  html.theme-dark .feature-card-visual small,
  html.theme-dark .feature-card-content h3{ color: #75deb0 !important; }
  html.theme-dark .feature-card-content p{ color: #b3c7bb !important; }

  html.theme-dark .package-cards article{
    background:
      linear-gradient(var(--hkn-dark-card), var(--hkn-dark-card)) padding-box,
      conic-gradient(from var(--package-angle),#ff9f1c,#2ec4b6,#9d5bd2,#ff9f1c) border-box !important;
  }
  html.theme-dark .cards article h3,
  html.theme-dark .cards article b,
  html.theme-dark .reviews article,
  html.theme-dark .facebook-card b,
  html.theme-dark .google-review-head b{ color: var(--hkn-dark-text) !important; }

  /* Animal explorer */
  html.theme-dark .animal-category{
    background: #142f23 !important;
    border-color: #2c5843 !important;
    color: #eef7f2 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
  }
  html.theme-dark .animal-category.active{
    background: linear-gradient(145deg, #1d553d, #133527) !important;
    border-color: #4ad097 !important;
  }
  html.theme-dark .animal-gallery-grid article{ box-shadow: 0 16px 36px rgba(0,0,0,.36) !important; }

  /* Google / Facebook */
  html.theme-dark .google-rating-summary strong,
  html.theme-dark .google-no-key-card h3{ color: #78dfb1 !important; }
  html.theme-dark .google-g-mark{
    background: #f8faf9 !important;
    border-color: #dce7e1 !important;
    color: #4285f4 !important;
  }
  html.theme-dark .facebook-plugin-wrap iframe,
  html.theme-dark .google-live-embed iframe{
    color-scheme: light !important;
    background: #fff !important;
  }

  /* FAQ and payment text */
  html.theme-dark .faq-list summary{ color: #eaf5ee !important; }
  html.theme-dark .payment-grid div{ color: #eaf5ee !important; }

  /* Availability calendar */
  html.theme-dark .availability-section{ color: var(--hkn-dark-text) !important; }
  html.theme-dark .availability-head span{ color: #ffc56c !important; }
  html.theme-dark .availability-head p{ color: var(--hkn-dark-muted) !important; }
  html.theme-dark .calendar-month{ background: #10271d !important; }
  html.theme-dark .calendar-week b{ color: #91a99c !important; }
  html.theme-dark .calendar-day{
    background: #19372a !important;
    color: #d9f2e4 !important;
    border: 1px solid #28533e !important;
  }
  html.theme-dark .calendar-day.is-open:hover,
  html.theme-dark .calendar-day.is-selected{
    background: #16845c !important;
    color: #fff !important;
  }
  html.theme-dark .calendar-day.is-full{ background: #472621 !important; color: #ffb3a8 !important; border-color: #6d3730 !important; }
  html.theme-dark .calendar-day.is-past{ background: #18221d !important; color: #6f8278 !important; border-color: #26352e !important; }
  html.theme-dark .availability-slots span{ background: #173328 !important; color: #b9d0c3 !important; }
  html.theme-dark .session-picker{ background: #122a20 !important; color: var(--hkn-dark-text) !important; border-color: var(--hkn-dark-border) !important; }

  /* Booking section: controlled dark glass form, no browser recolouring. */
  html.theme-dark .booking-section{
    background:
      radial-gradient(circle at 10% 10%, rgba(95, 210, 151, .10), transparent 32%),
      linear-gradient(135deg, #071a12, #123d2a 58%, #0b281c) !important;
  }
  html.theme-dark .booking-form{
    color-scheme: dark !important;
    background: linear-gradient(145deg, rgba(24, 53, 40, .98), rgba(13, 36, 26, .98)) !important;
    border-color: #35624c !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  html.theme-dark .field,
  html.theme-dark .booking-form > .field,
  html.theme-dark .guest-grid .field{
    background: #1b382b !important;
    border-color: #365c49 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
  }
  html.theme-dark .field:focus-within{
    border-color: var(--hkn-dark-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,173,63,.16), 0 8px 20px rgba(0,0,0,.22) !important;
  }
  html.theme-dark .field input,
  html.theme-dark .field select,
  html.theme-dark .field textarea{
    color-scheme: dark !important;
    background: transparent !important;
    color: #f4faf6 !important;
    -webkit-text-fill-color: #f4faf6 !important;
    caret-color: #ffb34d !important;
  }
  html.theme-dark .field input::placeholder,
  html.theme-dark .field textarea::placeholder{ color: #9fb4a8 !important; opacity: 1 !important; }
  html.theme-dark .field select option{ background: #173428 !important; color: #f4faf6 !important; }
  html.theme-dark .field-label,
  html.theme-dark .guest-label{ color: #c0d2c7 !important; }
  html.theme-dark .svg-icon svg{ fill: #ffab43 !important; }
  html.theme-dark .booking-lead{ color: #d9e9df !important; }
  html.theme-dark .contact-chip{
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #fff !important;
  }
  html.theme-dark .success{ background: #153c28 !important; color: #9ff0bd !important; }
  html.theme-dark .error{ background: #472321 !important; color: #ffb5ad !important; }

  /* Map wrapper only; embedded Google map keeps its official rendering. */
  html.theme-dark .map-card{ padding: 12px !important; }
  html.theme-dark .map-card iframe{ color-scheme: light !important; background: #fff !important; }

  /* Gallery page */
  html.theme-dark .gallery-page-main{ background: var(--hkn-dark-page) !important; }
  html.theme-dark .pagination a{ background: #153126 !important; color: #dff1e7 !important; border-color: #2e5945 !important; }
  html.theme-dark .pagination a.active{ background: #1a815a !important; color: #fff !important; }

  /* Dark-mode-only mobile header and bottom navigation. */
  @media (max-width: 800px) {
    html.theme-dark .nav-links{
      background: #142b20 !important;
      color: #f4fff8 !important;
      border: 1px solid rgba(139,231,187,.30) !important;
    }
    html.system-dark .theme-switch-wrap{
      position:absolute;
      right:18px;
      top:50%;
      transform:translateY(-50%);
      z-index:2003;
    }
    html.system-dark .theme-switch-wrap.theme-switch-with-profile{ right:82px; }
    html.system-dark .theme-switch-button{
      width:44px;
      min-width:44px;
      height:44px;
      padding:0;
      border-radius:15px;
    }
    html.system-dark .theme-switch-text{ display:none; }
    html.theme-dark nav.mobile-bottom-nav .hkn-nav-shape{
      filter: drop-shadow(0 12px 26px rgba(0,0,0,.42)) !important;
    }
    html.theme-dark nav.mobile-bottom-nav .hkn-nav-shape path{
      fill: rgba(12, 36, 26, .97) !important;
      stroke: rgba(225, 255, 240, .96) !important;
      stroke-width: 3.2 !important;
    }
    html.theme-dark nav.mobile-bottom-nav > a.mobile-bottom-item:not(.mobile-bottom-home){
      color: #ffffff !important;
      text-shadow: 0 1px 5px rgba(0,0,0,.55) !important;
    }
    html.theme-dark nav.mobile-bottom-nav > a.mobile-bottom-item:not(.mobile-bottom-home) .mobile-bottom-icon,
    html.theme-dark nav.mobile-bottom-nav > a.mobile-bottom-item:not(.mobile-bottom-home) .mobile-bottom-icon svg{
      color:#ffffff !important;
      stroke:#ffffff !important;
    }
    html.theme-dark nav.mobile-bottom-nav > a.mobile-bottom-item:not(.mobile-bottom-home) .mobile-bottom-label{
      color:rgba(255,255,255,.94) !important;
    }
    html.theme-dark nav.mobile-bottom-nav > a.mobile-bottom-home{
      color: #fff !important;
      background: linear-gradient(145deg,#16845d,#08442f) !important;
      border-color: rgba(235,255,245,.98) !important;
      box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 0 2px rgba(98,224,166,.28),inset 0 1px 0 rgba(255,255,255,.28) !important;
    }
    html.theme-dark nav.mobile-bottom-nav > a.mobile-bottom-home .mobile-bottom-label{ color: #fff !important; }
  }
  @media (max-width: 390px) {
    html.system-dark .theme-switch-wrap.theme-switch-with-profile{ right:75px; }
    html.system-dark .theme-switch-button{ width:40px; min-width:40px; height:40px; border-radius:14px; }
    html.system-dark .theme-switch-button svg{ width:18px; height:18px; }
  }

/* V10: dark-mode-only attention pulse for the Light Mode switch.
   The animation stops automatically after the visitor switches to Light Mode. */
html.theme-dark.system-dark .theme-switch-button{
  position:relative;
  isolation:isolate;
  overflow:visible;
  animation:hkn-theme-button-blink 4s ease-in-out infinite;
}
html.theme-dark.system-dark .theme-switch-button::after{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border:2px solid rgba(255,255,255,.95);
  border-radius:inherit;
  pointer-events:none;
  animation:hkn-theme-button-ring 4s ease-out infinite;
}
@keyframes hkn-theme-button-blink{
  0%,5%,10%,15%,20%,100%{filter:brightness(1);}
  2.5%,7.5%,12.5%,17.5%{filter:brightness(1.38);}
}
@keyframes hkn-theme-button-ring{
  0%{opacity:.95;transform:scale(.90);}
  16%{opacity:0;transform:scale(1.36);}
  17%,100%{opacity:0;transform:scale(.90);}
}
@media (prefers-reduced-motion:reduce){
  html.theme-dark.system-dark .theme-switch-button,
  html.theme-dark.system-dark .theme-switch-button::after{
    animation:none!important;
  }
}