/* ============================================================
   Roxana Travel — Layout (top bar, header, footer, menu)
   ============================================================ */

.rx-wrapper { overflow-x: clip; }

/* ---------- Top bar ---------- */
.rx-topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-sm);
}
.rx-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 42px; }
.rx-topbar a { color: inherit; display: inline-flex; align-items: center; gap: 7px; }
.rx-topbar a:hover { color: #fff; }
.rx-topbar__contact { display: flex; gap: var(--space-5); }
.rx-topbar__welcome { color: rgba(255, 255, 255, .65); }
.rx-topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.rx-topbar__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .2); }
.rx-topbar .rx-icon { width: 16px; height: 16px; }
@media (max-width: 900px) { .rx-topbar { display: none; } }

/* ---------- Header ---------- */
.rx-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-2); transition: box-shadow var(--dur) var(--ease); }
.rx-header.is-stuck { box-shadow: var(--shadow-sm); }
.rx-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 78px; }
.rx-header__brand { flex: 0 0 auto; display: flex; align-items: center; }
.rx-header__brand img { max-height: 32px; width: auto; }
.rx-header__name { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--ink); }

.rx-nav { margin-inline: auto; }
.rx-menu { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.rx-menu > li { position: relative; }
.rx-menu > li > a { position: relative; font-family: var(--font-heading); font-weight: var(--fw-medium); color: var(--ink); font-size: var(--fs-base); padding: 8px 0; display: inline-block; }
.rx-menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--brand-purple); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.rx-menu > li > a:hover::after, .rx-menu > li.current-menu-item > a::after, .rx-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.rx-menu > li > a:hover, .rx-menu > li.current-menu-item > a, .rx-menu > li.current-menu-ancestor > a { color: var(--brand-purple); }
.rx-menu .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: var(--space-2); list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--dur) var(--ease);
}
.rx-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.rx-menu .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--fs-sm); }
.rx-menu .sub-menu a:hover { background: var(--surface-3); color: var(--brand-purple); }

.rx-header__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.rx-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: none; border-radius: var(--radius-pill); color: var(--ink); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.rx-iconbtn:hover { background: var(--surface-3); color: var(--brand-purple); }
.rx-iconbtn .rx-icon { width: 21px; height: 21px; }
.rx-cart__count { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--brand-magenta); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 1024px) { .rx-header__cta, .rx-nav { display: none; } }

/* Burger + mobile menu */
.rx-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; }
.rx-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
@media (max-width: 1024px) { .rx-burger { display: flex; } }

.rx-mobile-menu { position: fixed; inset: 0; z-index: var(--z-modal); pointer-events: none; }
.rx-mobile-menu::before { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 31, .5); opacity: 0; transition: opacity var(--dur) var(--ease); }
.rx-mobile-menu__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw); background: #fff; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease); display: flex; flex-direction: column; padding: var(--space-5); overflow-y: auto; }
.rx-mobile-menu.is-open { pointer-events: auto; }
.rx-mobile-menu.is-open::before { opacity: 1; }
.rx-mobile-menu.is-open .rx-mobile-menu__panel { transform: none; }
.rx-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--space-5); }
.rx-mobile-menu__close { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); }
.rx-mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.rx-mobile-menu__list li { border-bottom: 1px solid var(--line-2); }
.rx-mobile-menu__list a { display: block; padding: 14px 0; font-family: var(--font-heading); font-weight: 500; color: var(--ink); }
.rx-mobile-menu__list .sub-menu { list-style: none; margin: 0; padding: 0 0 8px 14px; }
.rx-mobile-menu__list .sub-menu a { padding: 8px 0; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.rx-mobile-menu__foot { margin-top: auto; padding-top: var(--space-5); }

/* ---------- Language switcher ---------- */
.rx-lang { position: relative; }
.rx-lang__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; cursor: pointer; font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; }
.rx-lang__btn .rx-icon { width: 15px; height: 15px; }
.rx-lang__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--dur) var(--ease); z-index: var(--z-dropdown); }
.rx-lang.is-open .rx-lang__list { opacity: 1; visibility: visible; transform: none; }
.rx-lang__list a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); }
.rx-lang__list a:hover { background: var(--surface-3); color: var(--brand-purple); }
.rx-lang__list .is-active a { color: var(--brand-purple); font-weight: 600; }
.rx-topbar .rx-lang__btn { color: rgba(255, 255, 255, .82); }
.rx-topbar .rx-lang__btn:hover { color: #fff; }

/* ---------- Currency switcher ---------- */
.rx-cur { position: relative; }
.rx-cur__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: rgba(255, 255, 255, .82); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; }
.rx-cur__btn:hover { color: #fff; }
.rx-cur__btn .rx-icon { width: 15px; height: 15px; }
.rx-cur__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--dur) var(--ease); z-index: var(--z-dropdown); }
.rx-cur.is-open .rx-cur__list { opacity: 1; visibility: visible; transform: none; }
.rx-cur__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); }
.rx-cur__list a:hover { background: var(--surface-3); color: var(--brand-purple); }
.rx-cur__list .is-active a { color: var(--brand-purple); font-weight: 600; }
.rx-cur__list code { color: var(--muted); font-size: var(--fs-xs); }
.rx-cur__list .is-active code { color: var(--brand-purple); }

/* ---------- Footer ---------- */
.rx-footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding-top: var(--space-10); margin-top: var(--space-10); }
.rx-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--space-7); padding-bottom: var(--space-9); }
@media (max-width: 1024px) { .rx-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rx-footer__top { grid-template-columns: 1fr; gap: var(--space-6); } }
.rx-footer__logo { font-family: var(--font-heading); font-size: var(--fs-2xl); color: #fff; display: block; margin-bottom: var(--space-4); }
.rx-footer__logo strong { color: var(--brand-magenta); }
.rx-footer__col h4 { color: #fff; font-size: var(--fs-base); margin-bottom: var(--space-4); }
.rx-footer__col p { color: rgba(255, 255, 255, .62); font-size: var(--fs-sm); }
.rx-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rx-footer__links a { color: rgba(255, 255, 255, .72); font-size: var(--fs-sm); }
.rx-footer__links a:hover { color: #fff; }
.rx-footer__contact li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); font-size: var(--fs-sm); }
.rx-footer__contact .rx-icon { width: 16px; height: 16px; color: var(--brand-magenta); }
.rx-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.rx-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); color: #fff; }
.rx-footer__social a:hover { background: var(--brand-purple); }
.rx-footer__social .rx-icon { width: 18px; height: 18px; }
.rx-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.rx-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); font-size: var(--fs-sm); }
.rx-footer__legal { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.rx-footer__legal a { color: rgba(255, 255, 255, .72); }
.rx-footer__legal a:hover { color: #fff; }
@media (max-width: 640px) { .rx-footer__bottom-inner { flex-direction: column; text-align: center; } }

/* ---------- Header search ---------- */
.rx-header__search { display: none; border-top: 1px solid var(--line-2); background: #fff; }
.rx-header__search.is-open { display: block; }
.rx-header__search-form { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.rx-header__search-form > .rx-icon { width: 22px; height: 22px; color: var(--brand-purple); flex: 0 0 auto; }
.rx-header__search-form input { flex: 1; border: 0; background: none; outline: none; font-size: var(--fs-lg); padding: 6px 0; color: var(--ink); }

/* ---------- Top bar account ---------- */
.rx-topbar__account-text { display: inline; }
@media (max-width: 640px) { .rx-topbar__account-text { display: none; } }