/**
 * Sacred Trails — Custom UI Overrides
 * 1. Navbar redesign
 * 2. Toast / booking notification redesign
 */

/* ============================================================
   1. NAVBAR — Desktop redesign
   ============================================================ */

/* Hide desktop nav on mobile — prevents flash of unstyled menu
   before our custom drawer (sacred-mobile-nav.php) initialises */
@media (max-width: 991px) {
    .staybook_nav_area .col-md-9,
    .staybook_nav_area .col-xs-8,
    .staybook_nav_area .col-sm-9 {
        display: none !important;
    }
}

/* Nav wrapper — white background, clean */
.staybook_nav_area {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0;
    transition: box-shadow .25s, background .25s;
}
.scroll-to-fixed-fixed .staybook_nav_area {
    box-shadow: 0 2px 20px rgba(0,0,0,.10) !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(8px);
}

/* Nav row height */
.staybook_nav_area .row.logo-left.align-items-center {
    min-height: 80px;
}

/* ── Nav flex: menu items left, button pushed to far right ── */
.staybook_menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100%;
}
.staybook_menu > ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    flex: 1;
}
.donate-btn-header {
    flex-shrink: 0;
    margin-left: auto !important;
}

/* ── Nav links ── */
.staybook_menu > ul > li > a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #333 !important;
    text-shadow: none !important;
    margin: 0 2px !important;
    padding: 8px 10px !important;
    border-radius: 8px;
    transition: color .2s, background .2s !important;
    position: relative;
    white-space: nowrap;
}
.staybook_menu > ul > li > a:hover,
.staybook_menu > ul > li.current > a,
.staybook_menu > ul > li.current-menu-item > a,
.staybook_menu > ul > li.current-menu-ancestor > a {
    color: #2d6a4f !important;
    background: transparent !important;
}

/* Remove old border-top highlight, replace with underline dot */
.staybook_menu > ul > li.current > a::after,
.staybook_menu > ul > li.current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2d6a4f;
}

/* ── Dropdown sub-menu ── */
.staybook_menu ul .sub-menu {
    top: calc(100% + 8px) !important;
    border-top: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
    border: 1px solid #f0f0f0 !important;
    padding: 6px !important;
    min-width: 210px !important;
    background: #fff !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.staybook_menu ul li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    top: calc(100% + 2px) !important;
}
.staybook_menu ul .sub-menu li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    transition: background .15s, color .15s;
    display: flex !important;
    align-items: center;
}
.staybook_menu ul .sub-menu li a:hover {
    background: #f0faf4 !important;
    color: #2d6a4f !important;
}
.staybook_menu ul .sub-menu li a::before {
    content: '›';
    margin-right: 8px;
    color: #6fcf97;
    font-size: 16px;
    line-height: 1;
}

/* ── "Book A Room" CTA button ── */
.donate-btn-header {
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
}
a.dtbtn {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: #2d6a4f !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    transition: background .2s, transform .15s !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
a.dtbtn:hover {
    background: #1e5037 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
a.dtbtn i.flaticon-right-arrow,
a.dtbtn i {
    font-size: 11px !important;
}

/* ── All transparent nav variants use the same white background ── */
.transprent-menu .staybook_nav_area,
.trp_nav_area,
.transparent-two .staybook_nav_area {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* ── Nav links on transparent variants — dark text, consistent with white nav ── */
.transprent-menu .staybook_menu > ul > li > a,
.transparent-two .staybook_menu > ul > li > a,
.trp_nav_area .staybook_menu > ul > li > a {
    color: #333 !important;
    text-shadow: none !important;
}

/* ── Logo alignment ── */
.logo a img,
.ts-logo a img {
    max-height: 64px !important;
    width: auto !important;
}

/* ============================================================
   2. TOAST / BOOKING NOTIFICATION — Compact & elegant
      Targets most common social proof plugins
   ============================================================ */

/* WooCommerce social proof / recent sales popup (various plugins) */
.woo-notification,
.pcrfw-notification,
.nsl_notification_bar,
.woo-sp-notice,
.fomo-notification,
.sales-popup-notification,
.recent-sales-notification,
.notification-bar-wrap,
.notificationx-notification,
[class*="sales-pop"],
[class*="recent-booking"],
[class*="proof-notification"] {
    max-width: 260px !important;
    min-width: 220px !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
    font-family: 'DM Sans', sans-serif !important;
    bottom: 24px !important;
    left: 20px !important;
    animation: sacred-slide-in .4s cubic-bezier(.4,0,.2,1) !important;
    border: 1px solid #f0f0f0 !important;
    background: #fff !important;
}

/* NotificationX plugin specifically */
.notificationx-notification .nx-notification-image img,
.notificationx-notification img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.notificationx-notification .nx-notification-text,
.notificationx-notification .nx-notification-content,
[class*="notification"] .notification-content,
[class*="notification"] .popup-content {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    padding: 0 0 0 8px !important;
}
.notificationx-notification strong,
[class*="notification"] strong,
[class*="notification"] .customer-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0a1f14 !important;
}
.notificationx-notification .nx-timer,
.notificationx-notification .nx-notification-time,
[class*="notification"] .time-ago,
[class*="notification"] .timestamp {
    font-size: 10px !important;
    color: #aaa !important;
}

/* The "✓ Booked" badge */
[class*="notification"] .booked-badge,
[class*="notification"] .notification-badge,
.notificationx-notification .conversion-text {
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    background: #2d6a4f !important;
    color: #fff !important;
    display: inline-block !important;
    margin-bottom: 3px !important;
}

/* NotificationX close button */
.notificationx-notification .nx-close,
[class*="notification"] .close-btn {
    width: 18px !important;
    height: 18px !important;
    top: 6px !important;
    right: 6px !important;
    font-size: 10px !important;
    background: #f0f0f0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Slide-in animation */
@keyframes sacred-slide-in {
    from { opacity: 0; transform: translateX(-20px) translateY(6px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* ============================================================
   3. GENERAL POLISH
   ============================================================ */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Better focus rings for accessibility */
a:focus-visible, button:focus-visible {
    outline: 2px solid #2d6a4f;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Hide nav items with no visible text (empty anchor = white-box glitch) */
.staybook_menu > ul > li > a:empty {
    display: none !important;
}
.staybook_menu > ul > li:has(> a:empty) {
    display: none !important;
}