/* ===============================
   GLASS MENU
================================ */
.glass-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  width: 108px;
  padding: 12px 24px;
  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(circle at 20% 0%,
      rgba(255,255,255,0.20),
      rgba(255,255,255,0) 55%
    ),
    rgba(0,0,0,0.65);

  border: 1px solid rgba(255,255,255,0.16);

  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.10),
    inset 0 -2px 4px rgba(0,0,0,0.30);


  backdrop-filter: blur(1px) saturate(160%);
  -webkit-backdrop-filter: blur(1px) saturate(160%);

  transition: width 0.65s cubic-bezier(.4,0,.2,1);
}

.glass-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* Світло з кута (-45°) */
  background:
    linear-gradient(
      -45deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.00) 55%
    );

  pointer-events: none;
}

/* ===============================
   MAIN MENU STYLE
================================ */

/* Elementor‑виджет з шорткодом (обгортка) */
.elementor-element.menu-items {
  position: static;       /* щоб не ламати флекс */
}

/* Сам nav.menu-items */
nav.menu-items {
  position: static;
}

/* Контейнер з пунктами меню */
.menu-items {
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

/* UL з WordPress */
.menu-list {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;

  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.menu-list a {
  color: #fff;
  text-decoration: none;
}

.menu-toggle {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.elementor-icon-box-description {
  color: #fff;
  margin: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.glass-menu.menu-open {
  justify-content: space-between;
}

/* показуємо меню */
.glass-menu.menu-open .menu-items {
  opacity: 1;
  pointer-events: auto;
}

/* Хрестик за замовчуванням прихований */
.menu-close {
  display: none;
  cursor: pointer;
  line-height: 0;
}

/* коли меню відкрите */
.glass-menu.menu-open .menu-toggle {
  display: none;
}

.glass-menu.menu-open .menu-close {
  display: flex;
  margin-left: auto;
  z-index: 2;
}

/* ===============================
   GLASS (containers + buttons)
================================ */
.glass {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 20% 0%,
      rgba(255,255,255,0.20),
      rgba(255,255,255,0) 55%
    ),
    rgba(0,0,0,0.65);

  border: 1px solid rgba(255,255,255,0.16);

  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.10),
    inset 0 -2px 4px rgba(0,0,0,0.30);

  backdrop-filter: blur(1px) saturate(160%);
  -webkit-backdrop-filter: blur(1px) saturate(160%);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    linear-gradient(
      -45deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.00) 55%
    );

  pointer-events: none;
}

/* ===============================
   GLASS (TABS)
================================ */
.glass-tabs .e-n-tabs-heading {
  position: relative;
  overflow: hidden;
  border-radius: 24px; /* ← ВОТ ТУТ */

  background:
    radial-gradient(circle at 20% 0%,
      rgba(255,255,255,0.20),
      rgba(255,255,255,0) 55%
    ),
    rgba(0,0,0,0.65);

  border: 1px solid rgba(255,255,255,0.16);

  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.10),
    inset 0 -2px 4px rgba(0,0,0,0.30);

  backdrop-filter: blur(1px) saturate(160%);
  -webkit-backdrop-filter: blur(1px) saturate(160%);
}

/* псевдоэлемент как у .glass */
.glass-tabs .e-n-tabs-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px; /* ← И ТУТ */

  background:
    linear-gradient(
      -45deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.00) 55%
    );

  pointer-events: none;
}


/* ===============================
   BUTTON HOVER LIGHT (only buttons)
================================ */
.glass-button::before {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: inherit;

  /* ТОНКА СВІТЛОВА СМУГА */
  background: linear-gradient(
    -25deg,
    rgba(255,255,255,0.00) 38%,
    rgba(255,255,255,0.08) 44%,
    rgba(255,255,255,0.35) 50%, /* ЯСКРАВИЙ ЦЕНТР */
    rgba(255,255,255,0.08) 56%,
    rgba(255,255,255,0.00) 62%
  );

  transform: translateX(-60%);
  opacity: 0;
  transition:
    transform 1.4s cubic-bezier(.4,0,.2,1),
    opacity 0.4s ease;

  pointer-events: none;
}

/* hover only for buttons */
.glass-button:hover::before {
  transform: translateX(60%);
  opacity: 1;
}

/* DISABLE HOVER ON TOUCH DEVICES */
@media (hover: none) {
  .glass-button::before {
    display: none;
  }
}

/* Focus button (keyboard access) */
   
================================ */
.glass-button:focus-visible::before {
  transform: translate(60%, 60%);
}

/* ===============================
   NEW ARTICLES
================================ */

.articles-button {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* КРИТИЧНО */

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  height: 232px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* СВЕТОВОЙ ЛУЧ */
.articles-button-animation::after {
  content: "";
  position: absolute;
  inset: -90%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;

  background: linear-gradient(
    115deg,
    rgba(255,255,255,0.0) 42%,
    rgba(255,255,255,0.15) 48%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.15) 52%,
    rgba(255,255,255,0.0) 58%
  );

  mix-blend-mode: screen;

  transform: translateY(160%);
  opacity: 0;

  animation: sun-diagonal 9s linear infinite;
}

@keyframes sun-diagonal {
  0%, 20% {
    transform: translateY(160%);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  75% {
    transform: translateY(-160%);
    opacity: 1;
  }

  100% {
    transform: translateY(-160%);
    opacity: 0;
  }
}

.last-post-button svg {
	width: 24px;
}

.last-post-button span {
	align-items: center;
}

.rating h3 {
  margin-block-end: 0rem !important;
  margin-block-start: 0rem !important;
}

.hero .e-off-canvas__main {
    bottom: 64px !important;
    top: auto !important;
}

/* ===============================
   SEARCH CONTAINER
================================ */
.search-glass {
  position: relative;
  display: flex;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  cursor: pointer;
  transition: width .45s ease;
}

.search-glass.has-value {
  box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.search-glass.active {
  width: 256px;
}

.search-icon {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 24px;
  height: 24px;
  color: #fff;
  transform: translateY(-50%) scale(.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  cursor: pointer;
}

.search-glass.has-value .search-clear {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

/* FORM + INPUT */
.search-form-inner {
  flex: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.search-glass.active .search-form-inner {
  opacity: 1;
  pointer-events: auto;
}

.search-form-inner input[type="search"],
.swp-input--search {
  width: 100%;
  height: 40px;
  padding-right: 40px;
  background: transparent !important;
  border: none;
  outline: none;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff !important;
}

/* remove native search UI */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none !important;
}

input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  background-image: none !important;
}

/* LIVE SEARCH CONTAINER (GLASS) */
.searchwp-live-search-results {
  position: absolute !important;
  z-index: 999999;
  width: 256px;
  min-width: 256px;
  transform: translate(-40px, 15px);
  overflow: hidden;
  overscroll-behavior: contain;

  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.2), rgba(255,255,255,0) 55%),
    rgba(0,0,0,.65);

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.1),
    inset 0 -2px 4px rgba(0,0,0,.3),
    0 20px 40px rgba(0,0,0,.35);

  backdrop-filter: blur(8px) saturate(160%);
}

.searchwp-live-search-results::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(-45deg, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}

.searchwp-live-search-results.searchwp-live-search-results-showing {
  min-height: 115px;
}

.searchwp-live-search-result--info p {
	margin-block-end: 0rem;
}


/* RESULTS SCROLL */
.searchwp-live-search-results-container {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
}

.searchwp-live-search-results-container::-webkit-scrollbar {
  width: 6px;
}

.searchwp-live-search-results-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.3);
  border-radius: 3px;
}

/* RESULT ITEM */
.searchwp-live-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .25s ease;
}

.searchwp-live-search-result:hover {
  background: rgba(255,255,255,.06);
}

.searchwp-live-search-result a {
  text-decoration: none;
  color: #fff;
}

/* image */
.searchwp-live-search-result--img {
  flex: 0 0 56px !important;
}

.searchwp-live-search-result--img img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
}

/* info */
.searchwp-live-search-result--info {
  flex: 1;
}

.searchwp-live-search-result--title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

/* replace excerpt */
.searchwp-live-search-result--desc {
  font-size: 0;
}

.searchwp-live-search-result--desc::after {
  content: "View destination…";
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
}

/* NO RESULTS / HELP TEXT */
.searchwp-live-search-no-results,
.searchwp-live-search-no-min-chars::after {
  padding: 14px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,.7);
  font-style: italic;
}

/* SPINNER */
.searchwp-live-search-results .spinner div div {
  background: #fff !important;
  box-shadow: 0 0 4px rgba(255,255,255,.6);
}

/* VIEW ALL RESULTS (FOOTER) */
.searchwp-view-all {
  position: relative;
  margin-top: auto;

  padding: 4px 4px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.35)
  );

  border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 0 0 16px 16px;
}




