/**
 * Lavisa Destinations Theme — Component Styles
 *
 * Consolidated styles for all reusable components.
 * Complements ldt-main.css (which has base/utility styles).
 *
 * @package    Lavisa_Destinations_Theme
 * @since      1.0.0
 * @file       assets/css/ldt-components.css
 */


/* ═══════════════════════════════════════════════════════════════════
 * HEADER & NAVIGATION
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-header {
    position: sticky;
    top: 0;
    z-index: var(--ldt-z-sticky);
    background: var(--ldt-white);
    border-bottom: 1px solid var(--ldt-gray-200);
    height: var(--ldt-header-height);
}

.ldt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.ldt-header--transparent {
    position: absolute;
    width: 100%;
    background: transparent;
    border-bottom: none;
}

.ldt-header--transparent.ldt-header--scrolled {
    position: sticky;
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ldt-gray-200);
}

.ldt-logo { display: flex; align-items: center; gap: var(--ldt-space-sm); text-decoration: none; }
.ldt-logo__img { height: 40px; width: auto; }
.ldt-logo__text { font-size: var(--ldt-text-lg); font-weight: var(--ldt-weight-bold); color: var(--ldt-primary); }

/* Primary Nav */
.ldt-nav { display: flex; align-items: center; gap: 0; }
.ldt-nav__item { position: relative; }
.ldt-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ldt-space-xs);
    padding: var(--ldt-space-md) var(--ldt-space-lg);
    font-size: var(--ldt-text-sm);
    font-weight: var(--ldt-weight-medium);
    color: var(--ldt-dark);
    text-decoration: none;
    transition: color var(--ldt-transition-fast);
}
.ldt-nav__link:hover, .ldt-nav__link--active { color: var(--ldt-primary); text-decoration: none; }

/* Mobile Nav */
.ldt-mobile-nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: var(--ldt-white);
    box-shadow: var(--ldt-shadow-xl);
    z-index: var(--ldt-z-overlay);
    overflow-y: auto;
    transition: right var(--ldt-transition);
}
body.ldt-rtl .ldt-mobile-nav { right: auto; left: -320px; transition: left var(--ldt-transition); }
.ldt-mobile-nav--open { right: 0; }
body.ldt-rtl .ldt-mobile-nav--open { left: 0; }

.ldt-mobile-nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: calc(var(--ldt-z-overlay) - 1);
    display: none;
}
.ldt-mobile-nav__overlay--visible { display: block; }

.ldt-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--ldt-dark);
}

@media (max-width: 991px) {
    .ldt-nav { display: none; }
    .ldt-hamburger { display: flex; }
}


/* ═══════════════════════════════════════════════════════════════════
 * FOOTER
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-footer {
    background: var(--ldt-dark);
    color: rgba(255,255,255,0.7);
    padding: var(--ldt-space-3xl) 0 var(--ldt-space-xl);
}

.ldt-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--ldt-space-2xl);
}

.ldt-footer__title {
    font-size: var(--ldt-text-sm);
    font-weight: var(--ldt-weight-semibold);
    color: var(--ldt-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ldt-space-lg);
}

.ldt-footer__link {
    display: block;
    padding: var(--ldt-space-xs) 0;
    font-size: var(--ldt-text-sm);
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color var(--ldt-transition-fast);
}
.ldt-footer__link:hover { color: var(--ldt-white); text-decoration: none; }

.ldt-footer__bottom {
    margin-top: var(--ldt-space-2xl);
    padding-top: var(--ldt-space-xl);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ldt-text-xs);
    flex-wrap: wrap;
    gap: var(--ldt-space-md);
}

.ldt-footer__socials { display: flex; gap: var(--ldt-space-md); }
.ldt-footer__social {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--ldt-white); text-decoration: none;
    transition: background var(--ldt-transition-fast);
}
.ldt-footer__social:hover { background: var(--ldt-primary); }

/* WhatsApp float */
.ldt-whatsapp-float {
    position: fixed;
    bottom: var(--ldt-space-xl);
    left: var(--ldt-space-xl);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #25D366;
    color: var(--ldt-white);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--ldt-shadow-lg);
    z-index: var(--ldt-z-dropdown);
    text-decoration: none;
    transition: transform var(--ldt-transition-fast);
}
body.ldt-rtl .ldt-whatsapp-float { left: auto; right: var(--ldt-space-xl); }
.ldt-whatsapp-float:hover { transform: scale(1.1); }

@media (max-width: 767px) {
    .ldt-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
    .ldt-footer__grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
 * STICKY SECTION NAV
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-sticky-nav {
    position: sticky;
    top: var(--ldt-header-height);
    z-index: var(--ldt-z-sticky);
    background: var(--ldt-white);
    border-bottom: 1px solid var(--ldt-gray-200);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.ldt-sticky-nav__list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    gap: 0;
}
.ldt-sticky-nav__list::-webkit-scrollbar { display: none; }

.ldt-sticky-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ldt-space-xs);
    padding: var(--ldt-space-md) var(--ldt-space-lg);
    font-size: var(--ldt-text-sm);
    font-weight: var(--ldt-weight-medium);
    color: var(--ldt-gray-600);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color var(--ldt-transition-fast), border-color var(--ldt-transition-fast);
}
.ldt-sticky-nav__link:hover { color: var(--ldt-primary); text-decoration: none; }
.ldt-sticky-nav__link--active { color: var(--ldt-primary); border-bottom-color: var(--ldt-primary); font-weight: var(--ldt-weight-semibold); }


/* ═══════════════════════════════════════════════════════════════════
 * ACCORDION
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-accordion__item {
    border: 1px solid var(--ldt-gray-200);
    border-radius: var(--ldt-radius-lg);
    margin-bottom: var(--ldt-space-md);
    overflow: hidden;
}
.ldt-accordion__item--open { box-shadow: var(--ldt-shadow-sm); }

.ldt-accordion__trigger {
    display: flex;
    align-items: center;
    gap: var(--ldt-space-md);
    width: 100%;
    padding: var(--ldt-space-lg);
    font-size: var(--ldt-text-base);
    font-weight: var(--ldt-weight-semibold);
    color: var(--ldt-dark);
    background: var(--ldt-white);
    text-align: left;
    cursor: pointer;
    transition: background var(--ldt-transition-fast);
}
body.ldt-rtl .ldt-accordion__trigger { text-align: right; }
.ldt-accordion__trigger:hover { background: var(--ldt-light); }
.ldt-accordion__trigger-icon { font-size: 1.25rem; flex-shrink: 0; }
.ldt-accordion__trigger-label { flex: 1; }
.ldt-accordion__chevron { flex-shrink: 0; transition: transform var(--ldt-transition); color: var(--ldt-gray-500); }
.ldt-accordion__item--open .ldt-accordion__chevron { transform: rotate(180deg); }
.ldt-accordion__content { padding: 0 var(--ldt-space-lg) var(--ldt-space-lg); }


/* ═══════════════════════════════════════════════════════════════════
 * INFO CARDS SYSTEM
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-info-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ldt-space-md); margin-bottom: var(--ldt-space-lg); }
.ldt-info-cards--3 { grid-template-columns: repeat(3, 1fr); }

.ldt-info-card {
    padding: var(--ldt-space-md);
    background: var(--ldt-light);
    border-radius: var(--ldt-radius-md);
    border-left: 3px solid var(--ldt-gray-300);
}
body.ldt-rtl .ldt-info-card { border-left: none; border-right: 3px solid var(--ldt-gray-300); }
.ldt-info-card--success { border-left-color: var(--ldt-success); }
.ldt-info-card--info    { border-left-color: var(--ldt-info); }
.ldt-info-card--warning { border-left-color: var(--ldt-warning); }
.ldt-info-card--danger  { border-left-color: var(--ldt-danger); background: var(--ldt-danger-light); }
body.ldt-rtl .ldt-info-card--success { border-right-color: var(--ldt-success); }
body.ldt-rtl .ldt-info-card--info    { border-right-color: var(--ldt-info); }
body.ldt-rtl .ldt-info-card--warning { border-right-color: var(--ldt-warning); }
body.ldt-rtl .ldt-info-card--danger  { border-right-color: var(--ldt-danger); }
.ldt-info-card__title { font-size: var(--ldt-text-sm); font-weight: var(--ldt-weight-semibold); color: var(--ldt-dark); margin: 0 0 var(--ldt-space-xs); }
.ldt-info-card p { font-size: var(--ldt-text-sm); color: var(--ldt-gray-700); margin: 0; line-height: var(--ldt-line-relaxed); }
.ldt-info-card--compact { text-align: center; border-left: none; padding: var(--ldt-space-lg); }
body.ldt-rtl .ldt-info-card--compact { border-right: none; }
.ldt-info-card__emoji { font-size: 1.5rem; display: block; margin-bottom: var(--ldt-space-xs); }
.ldt-info-card__value { display: block; font-size: var(--ldt-text-xl); font-weight: var(--ldt-weight-bold); color: var(--ldt-dark); margin-bottom: 2px; }
.ldt-info-card__label { font-size: var(--ldt-text-xs); color: var(--ldt-gray-500); }
.ldt-info-card__big { font-size: var(--ldt-text-2xl) !important; font-weight: var(--ldt-weight-bold); letter-spacing: 0.05em; }

@media (max-width: 575px) { .ldt-info-cards, .ldt-info-cards--3 { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════
 * TAG & BADGE SYSTEM
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-tag-list { display: flex; gap: var(--ldt-space-sm); flex-wrap: wrap; margin-bottom: var(--ldt-space-lg); }

.ldt-tag {
    padding: var(--ldt-space-xs) var(--ldt-space-md);
    font-size: var(--ldt-text-sm);
    font-weight: var(--ldt-weight-medium);
    background: var(--ldt-gray-200);
    color: var(--ldt-dark-soft);
    border-radius: var(--ldt-radius-full);
}
.ldt-tag--warning { background: var(--ldt-warning-light); color: #92400e; }
.ldt-tag--success { background: var(--ldt-success-light); color: #166534; }
.ldt-tag--danger  { background: var(--ldt-danger-light);  color: #991b1b; }
.ldt-tag--info    { background: var(--ldt-info-light);    color: #1e40af; }
.ldt-tag--primary { background: rgba(0,53,128,0.1);      color: var(--ldt-primary); }

/* Dietary badges */
.ldt-dietary-badge { padding: 1px 8px; font-size: 0.6rem; font-weight: var(--ldt-weight-semibold); border-radius: var(--ldt-radius-full); }
.ldt-dietary-badge--halal       { background: #dcfce7; color: #166534; }
.ldt-dietary-badge--vegan       { background: #d1fae5; color: #065f46; }
.ldt-dietary-badge--vegetarian  { background: #fef3c7; color: #92400e; }
.ldt-dietary-badge--gluten-free { background: #dbeafe; color: #1e40af; }

/* Star ratings */
.ldt-star--on  { color: var(--ldt-warning); }
.ldt-star--off { color: var(--ldt-gray-300); }


/* ═══════════════════════════════════════════════════════════════════
 * CAROUSEL BASE
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-carousel { position: relative; overflow: hidden; }

.ldt-carousel__track {
    display: flex;
    gap: var(--ldt-space-lg);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ldt-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ldt-white);
    color: var(--ldt-dark);
    box-shadow: var(--ldt-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all var(--ldt-transition-fast);
}
.ldt-carousel__arrow:hover { background: var(--ldt-primary); color: var(--ldt-white); }
.ldt-carousel__arrow--prev { left: var(--ldt-space-sm); }
.ldt-carousel__arrow--next { right: var(--ldt-space-sm); }
body.ldt-rtl .ldt-carousel__arrow--prev { left: auto; right: var(--ldt-space-sm); }
body.ldt-rtl .ldt-carousel__arrow--next { right: auto; left: var(--ldt-space-sm); }

.ldt-carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--ldt-space-sm);
    margin-top: var(--ldt-space-lg);
}

.ldt-carousel__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ldt-gray-300);
    transition: background var(--ldt-transition-fast), transform var(--ldt-transition-fast);
    cursor: pointer;
}
.ldt-carousel__dot--active { background: var(--ldt-primary); transform: scale(1.3); }


/* ═══════════════════════════════════════════════════════════════════
 * MODAL / LIGHTBOX BASE
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--ldt-z-modal);
    align-items: center;
    justify-content: center;
}
.ldt-modal[aria-hidden="false"] { display: flex; }

.ldt-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.ldt-modal__content {
    position: relative;
    background: var(--ldt-white);
    border-radius: var(--ldt-radius-xl);
    max-width: 600px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 1;
}

.ldt-modal__close {
    position: absolute;
    top: var(--ldt-space-md);
    right: var(--ldt-space-md);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ldt-white);
    color: var(--ldt-dark);
    box-shadow: var(--ldt-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background var(--ldt-transition-fast);
}
.ldt-modal__close:hover { background: var(--ldt-gray-200); }


/* ═══════════════════════════════════════════════════════════════════
 * ARCHIVE & SINGLE LAYOUTS
 * ═══════════════════════════════════════════════════════════════════ */

/* Archive */
.ldt-archive-wrap { padding: var(--ldt-space-2xl) 0 var(--ldt-space-3xl); }
.ldt-archive-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--ldt-space-2xl); align-items: start; }
.ldt-archive-layout--full { grid-template-columns: 1fr; }

.ldt-archive-toolbar {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: var(--ldt-space-md);
    margin-bottom: var(--ldt-space-xl);
    padding-bottom: var(--ldt-space-md);
    border-bottom: 1px solid var(--ldt-gray-200);
}

/* Single */
.ldt-single-wrap { padding: var(--ldt-space-2xl) 0 var(--ldt-space-3xl); }
.ldt-single-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--ldt-space-2xl); align-items: start; }
.ldt-single-content { min-width: 0; }
.ldt-single-section { margin-bottom: var(--ldt-space-2xl); scroll-margin-top: 140px; }
.ldt-single-sidebar { position: sticky; top: 140px; }

/* Sidebar */
.ldt-sidebar { position: sticky; top: 88px; }
.ldt-widget { background: var(--ldt-white); border-radius: var(--ldt-radius-lg); padding: var(--ldt-space-lg); margin-bottom: var(--ldt-space-lg); box-shadow: var(--ldt-shadow-sm); }
.ldt-widget__title { font-size: var(--ldt-text-base); font-weight: var(--ldt-weight-semibold); color: var(--ldt-dark); margin: 0 0 var(--ldt-space-md); padding-bottom: var(--ldt-space-sm); border-bottom: 2px solid var(--ldt-primary); }

@media (max-width: 991px) {
    .ldt-archive-layout { grid-template-columns: 1fr; }
    .ldt-single-layout  { grid-template-columns: 1fr; }
    .ldt-sidebar, .ldt-single-sidebar { position: static; }
}


/* ═══════════════════════════════════════════════════════════════════
 * MAP STYLES
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-inline-map { border-radius: var(--ldt-radius-xl); overflow: hidden; box-shadow: var(--ldt-shadow-md); }

.ldt-map-popup { display: flex; gap: var(--ldt-space-md); max-width: 280px; font-family: var(--ldt-font-en); }
.ldt-map-popup__img { width: 72px; height: 54px; border-radius: var(--ldt-radius-sm); object-fit: cover; flex-shrink: 0; }
.ldt-map-popup__name { font-size: var(--ldt-text-sm); font-weight: var(--ldt-weight-semibold); color: var(--ldt-dark); margin: 0 0 4px; }
.ldt-map-popup__type { font-size: 0.65rem; text-transform: uppercase; color: var(--ldt-gray-500); margin-bottom: 6px; display: block; }
.ldt-map-popup__link { font-size: var(--ldt-text-xs); font-weight: var(--ldt-weight-semibold); color: var(--ldt-primary); text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════
 * BREADCRUMB
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0; margin: 0;
    font-size: var(--ldt-text-sm);
    flex-wrap: wrap;
}
.ldt-breadcrumb__link { color: var(--ldt-gray-600); text-decoration: none; }
.ldt-breadcrumb__link:hover { color: var(--ldt-primary); text-decoration: underline; }
.ldt-breadcrumb__current { color: var(--ldt-dark); font-weight: var(--ldt-weight-medium); }
.ldt-breadcrumb__sep { color: var(--ldt-gray-400); margin: 0 var(--ldt-space-xs); }


/* ═══════════════════════════════════════════════════════════════════
 * FILTER PILLS
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-filter-pills { display: flex; gap: var(--ldt-space-sm); flex-wrap: wrap; align-items: center; }

.ldt-filter-pills__pill {
    display: inline-flex; align-items: center; gap: var(--ldt-space-xs);
    padding: var(--ldt-space-sm) var(--ldt-space-md);
    font-size: var(--ldt-text-sm); font-weight: var(--ldt-weight-medium);
    border-radius: var(--ldt-radius-full);
    background: var(--ldt-gray-200); color: var(--ldt-dark-soft);
    border: 1.5px solid transparent;
    transition: all var(--ldt-transition-fast); white-space: nowrap;
}
.ldt-filter-pills__pill:hover { background: var(--ldt-gray-300); color: var(--ldt-dark); }
.ldt-filter-pills__pill--active { background: var(--ldt-primary); color: var(--ldt-white); border-color: var(--ldt-primary); }

.ldt-filter-pills__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    font-size: 0.65rem; font-weight: var(--ldt-weight-bold);
    border-radius: var(--ldt-radius-full);
    background: rgba(0,0,0,0.1);
}
.ldt-filter-pills__pill--active .ldt-filter-pills__count { background: rgba(255,255,255,0.25); }


/* ═══════════════════════════════════════════════════════════════════
 * PAGINATION
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-pagination { display: flex; flex-direction: column; align-items: center; gap: var(--ldt-space-lg); margin-top: var(--ldt-space-xl); }
.ldt-pagination__showing { font-size: var(--ldt-text-sm); color: var(--ldt-gray-600); }
.ldt-pagination__nav { display: flex; align-items: center; gap: var(--ldt-space-xs); }

.ldt-pagination__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 var(--ldt-space-sm);
    font-size: var(--ldt-text-sm); font-weight: var(--ldt-weight-medium);
    color: var(--ldt-dark-soft); background: var(--ldt-white);
    border: 1px solid var(--ldt-gray-300); border-radius: var(--ldt-radius-md);
    transition: all var(--ldt-transition-fast);
}
.ldt-pagination__btn:hover { background: var(--ldt-gray-200); color: var(--ldt-primary); border-color: var(--ldt-primary); }
.ldt-pagination__btn--active { background: var(--ldt-primary); color: var(--ldt-white); border-color: var(--ldt-primary); }


/* ═══════════════════════════════════════════════════════════════════
 * EMPTY STATE
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-empty-state { text-align: center; padding: var(--ldt-space-3xl) var(--ldt-space-lg); max-width: 480px; margin: 0 auto; }
.ldt-empty-state__icon { color: var(--ldt-gray-400); margin-bottom: var(--ldt-space-lg); }
.ldt-empty-state__title { font-size: var(--ldt-text-xl); font-weight: var(--ldt-weight-semibold); color: var(--ldt-dark); margin-bottom: var(--ldt-space-sm); }
.ldt-empty-state__message { font-size: var(--ldt-text-sm); color: var(--ldt-gray-600); margin-bottom: var(--ldt-space-xl); }