/* Pekoe Lanka Tours – CMS additions to the original design (theme toggle, consent, credit, dark theme). */
:root { --pl-green: #38E54D; --pl-green-2: #9CFF2E; --pl-ink: #111; --pl-paper: #fff; }

/* ---- floating theme toggle (bottom-left; WhatsApp stays bottom-right) */
.pl-theme-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 9990; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12); background: #fff; color: #111; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); padding: 0; }
.pl-theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pl-theme-toggle .pl-i-moon { display: none; }
html[data-pl-theme="dark"] .pl-theme-toggle .pl-i-sun { display: none; }
html[data-pl-theme="dark"] .pl-theme-toggle .pl-i-moon { display: block; fill: currentColor; stroke: none; }
.pl-theme-toggle:focus-visible, .pl-btn:focus-visible, .pl-consent-reopen:focus-visible { outline: 3px solid #1a7f2b; outline-offset: 2px; }

/* ---- consent banner */
.pl-consent { position: fixed; left: 16px; right: 16px; bottom: 72px; z-index: 9995; display: flex; justify-content: center; }
.pl-consent[hidden] { display: none; }
.pl-consent__inner { max-width: 720px; width: 100%; background: #fff; color: #111; border-radius: 10px; padding: 18px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); font-family: "Poppins", sans-serif; font-size: 14px; line-height: 1.5; }
.pl-consent__title { font-weight: 600; font-size: 16px; margin: 0 0 6px; }
.pl-consent__text { margin: 0 0 12px; }
.pl-consent__text a { color: #0b6b1c; text-decoration: underline; }
.pl-consent__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pl-btn { font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 6px; padding: 10px 16px; cursor: pointer;
  border: 2px solid var(--pl-green); background: var(--pl-green); color: #000; min-height: 44px; }
.pl-btn--ghost { background: #fff; }
.pl-consent-reopen { position: fixed; left: 70px; bottom: 22px; z-index: 9989; font: 500 12px "Poppins", sans-serif; background: rgba(255,255,255,.92);
  color: #111; border: 1px solid rgba(0,0,0,.15); border-radius: 16px; padding: 6px 12px; cursor: pointer; min-height: 32px; }
.pl-consent-reopen[hidden] { display: none; }

/* ---- copyright / developer credit (below the original footer) */
.cms-credit { background: #2fc441; color: #000; text-align: center; font: 500 13px/1.5 "Poppins", sans-serif; padding: 10px 16px; }
.cms-credit p { margin: 0; }
.cms-credit a { color: #000; text-decoration: underline; }

/* ---- admin preview bar */
.cms-preview-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 99999; background: #111; color: #fff;
  font: 600 12px "Poppins", sans-serif; padding: 6px 14px; border-radius: 0 0 8px 8px; }

/* ---- public dark theme
   The original Elementor design is light. Dark mode inverts lightness while keeping hues (brand green stays green)
   and re-inverts photos, videos, maps and background images so they look natural. */
html[data-pl-theme="dark"] { filter: invert(.9) hue-rotate(180deg); background: #fff; }
html[data-pl-theme="dark"] img,
html[data-pl-theme="dark"] video,
html[data-pl-theme="dark"] iframe,
html[data-pl-theme="dark"] picture,
html[data-pl-theme="dark"] .pl-bgimg,
html[data-pl-theme="dark"] .chaty-widget,
html[data-pl-theme="dark"] [class*="chaty-"] img,
html[data-pl-theme="dark"] .pl-theme-toggle { filter: invert(1) hue-rotate(180deg); }
html[data-pl-theme="dark"] .pl-bgimg img, html[data-pl-theme="dark"] .pl-bgimg picture, html[data-pl-theme="dark"] .pl-bgimg video,
html[data-pl-theme="dark"] picture img { filter: none; }
@media (prefers-reduced-motion: reduce) {
  html, html * { scroll-behavior: auto !important; }
  .pl-theme-toggle { transition: none; }
}
@media print { .pl-theme-toggle, .pl-consent, .pl-consent-reopen, .cms-preview-bar { display: none !important; } }

/* ---- "Admin Panel" entry in the main navigation
   Desktop horizontal bar: compact icon button (the original menu has no spare width; items are tightened by 2px each side).
   Mobile / flyout / dropdown menus: icon + full "Admin Panel" label. */
.cms-admin-icon { width: 18px; height: 18px; fill: currentColor; vertical-align: -3px; flex: 0 0 auto; }
.cms-admin-link > a { gap: 8px; }
@media (min-width: 1025px) {
  .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a.hfe-menu-item,
  .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item { padding-left: 13px !important; padding-right: 13px !important; }
  .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.cms-admin-link > a.hfe-menu-item { padding-left: 9px !important; padding-right: 9px !important; }
  .hfe-nav-menu__layout-horizontal .cms-admin-link .cms-admin-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hfe-nav-menu > li.cms-admin-link > a.hfe-menu-item { display: flex; align-items: center; justify-content: flex-start !important; }
.hfe-nav-menu > li.cms-admin-link > a .cms-admin-text { flex: 0 0 auto; margin: 0 !important; }
.hfe-nav-menu > li.cms-admin-link > a .cms-admin-icon { vertical-align: middle; }