/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED COMPONENTS (E22)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-components.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.23  (E22 — Visual Enhancement Roadmap v2 — opens Stage 8)
 * @depends     ldt-tokens-enhanced.css                  (E1)
 *              ldt-enhanced-base.css                    (E2)
 *              ldt-enhanced-animations.css              (E3 — keyframes:
 *                                                            ldt-pulse-glow,
 *                                                            ldt-shimmer,
 *                                                            ldt-fade-up)
 *
 *   Polishes the reusable components — utility cards, badges, and UI
 *   primitives that compose into bigger surfaces. These show up everywhere:
 *
 *     components/cards/card-deal.php           Deal card (discount + countdown)
 *     components/cards/card-guide.php          Editorial card (image + meta + CTA)
 *     components/cards/card-visa-result.php    Visa status card (PHP-injected color)
 *
 *     components/badges/badge-type.php         Type pill (gradient bg per type)
 *     components/badges/badge-classification.php  Outline pill (multi-chip rows)
 *     components/badges/badge-rating.php       Rating: numeric/compact/stars
 *     components/badges/badge-price.php        $/$$/$$$/$$$$ pill
 *     components/badges/badge-status.php       Status dot + label, "live" pulse
 *
 *     components/ui/save-button.php            Heart bookmark with bounce
 *     components/ui/share-buttons.php          6-platform share rail
 *     components/ui/back-to-top.php            Bottom-right scroll-to-top
 *     components/ui/loading-spinner.php        Spinner + dots + skeleton
 *     components/ui/language-toggle.php        EN | AR segmented pill
 *     components/ui/empty-state.php            Empty/no-results state
 *
 *   PURE CSS LAYER — no PHP partial is touched.
 *   Opens Stage 8 (Components & Polish).
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. SAVE BUTTON (.ldt-save) — heart bookmark with bounce on save
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 53, 128, 0.12);
    border-radius: var(--ldt-radius-pill, 9999px);
    color: var(--ldt-gray-700, #334155);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-save:hover {
    background: rgba(255, 140, 0, 0.06);
    border-color: rgba(255, 140, 0, 0.30);
    color: var(--ldt-accent-dark, #e07a00);
}

body .ldt-save__icon {
    flex-shrink: 0;
    transition:
        color 250ms var(--ldt-ease-portal, ease),
        fill 250ms var(--ldt-ease-portal, ease),
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

body .ldt-save:hover .ldt-save__icon {
    color: var(--ldt-accent, #ff8c00);
}

/* Saved state — heart fills with accent gradient + bounce keyframe */
body .ldt-save.is-saved,
body .ldt-save[aria-pressed="true"] {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.16) 0%,
        rgba(255, 140, 0, 0.04) 100%
    );
    border-color: rgba(255, 140, 0, 0.40);
    color: var(--ldt-accent-dark, #e07a00);
}

body .ldt-save.is-saved .ldt-save__icon,
body .ldt-save[aria-pressed="true"] .ldt-save__icon {
    color: var(--ldt-accent, #ff8c00);
    fill: var(--ldt-accent, #ff8c00);
    animation: ldt-save-bounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ldt-save-bounce {
    0%   { transform: scale(1);    }
    35%  { transform: scale(1.40); }
    65%  { transform: scale(0.92); }
    100% { transform: scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-save.is-saved .ldt-save__icon,
    body .ldt-save[aria-pressed="true"] .ldt-save__icon {
        animation: none;
    }
}

/* Icon-only variant */
body .ldt-save--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}

body .ldt-save--icon .ldt-save__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. SHARE BUTTONS (.ldt-share) — 6-platform rail with platform-color hover
 *
 * The PHP file ships its own inline <style> with platform background colors.
 * We layer hover lifts + a green pulse on the copy-link success state.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-share__btn {
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease),
        opacity 250ms var(--ldt-ease-portal, ease) !important;
}

body .ldt-share__btn:hover {
    transform: translateY(-2px) scale(1.10) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20);
    opacity: 1 !important;
}

/* Platform-specific hover shadows (matches platform brand color) */
body .ldt-share__btn--whatsapp:hover  { box-shadow: 0 6px 14px rgba(37, 211, 102, 0.40); }
body .ldt-share__btn--twitter:hover   { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.40); }
body .ldt-share__btn--facebook:hover  { box-shadow: 0 6px 14px rgba(24, 119, 242, 0.40); }
body .ldt-share__btn--linkedin:hover  { box-shadow: 0 6px 14px rgba(10, 102, 194, 0.40); }
body .ldt-share__btn--email:hover     { box-shadow: 0 6px 14px rgba(100, 116, 139, 0.40); }

/* Copy button — different vibe (gray default → accent on hover) */
body .ldt-share__btn--copy {
    background: rgba(0, 53, 128, 0.10) !important;
    color: var(--ldt-primary, #003580) !important;
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        background 250ms var(--ldt-ease-portal, ease),
        color 250ms var(--ldt-ease-portal, ease) !important;
}

body .ldt-share__btn--copy:hover {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(255, 140, 0, 0.40);
}

/* Copy success state — green pulse */
body .ldt-share__copied {
    color: rgb(21, 128, 61) !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body .ldt-share__copied:not(:empty) {
    animation: ldt-share-pulse 600ms ease;
}

@keyframes ldt-share-pulse {
    0%   { opacity: 0; transform: translateX(-6px); }
    20%  { opacity: 1; transform: translateX(0);    }
    100% { opacity: 1; transform: translateX(0);    }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-share__copied:not(:empty) { animation: none; }
}

/* Label gets brand-soft polish */
body .ldt-share__label {
    color: var(--ldt-gray-700, #334155) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. BACK TO TOP (.ldt-back-top) — circular gradient button bottom-right
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-back-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(255, 140, 0, 0.40);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.92);
    transition:
        opacity 300ms var(--ldt-ease-portal, ease),
        visibility 300ms var(--ldt-ease-portal, ease),
        transform 300ms var(--ldt-ease-portal, ease),
        box-shadow 300ms var(--ldt-ease-portal, ease),
        filter 300ms var(--ldt-ease-portal, ease);
}

[dir="rtl"] body .ldt-back-top,
.ldt-rtl body .ldt-back-top {
    right: auto;
    left: 24px;
}

/* Visible state (toggled via JS adding .is-visible) */
body .ldt-back-top.is-visible,
body .ldt-back-top[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-back-top:hover {
        transform: translateY(-3px) scale(1.06);
        box-shadow: 0 12px 28px rgba(255, 140, 0, 0.55);
        filter: brightness(1.08);
    }
}

@media (max-width: 600px) {
    body .ldt-back-top {
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    [dir="rtl"] body .ldt-back-top,
    .ldt-rtl body .ldt-back-top {
        right: auto;
        left: 16px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. LOADING SPINNER + SKELETON (.ldt-loading, .ldt-skeleton)
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Three-dot loader */
body .ldt-loading--dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body .ldt-loading__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ldt-accent, #ff8c00);
    animation: ldt-dot-bounce 1.2s ease-in-out infinite both;
}

body .ldt-loading__dot:nth-child(1) { animation-delay: -0.32s; }
body .ldt-loading__dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes ldt-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-loading__dot { animation: none; opacity: 1; }
}

body .ldt-loading__text {
    color: var(--ldt-gray-600, #64748b);
    font-size: 13px;
    font-weight: 600;
    margin-left: 8px;
}

[dir="rtl"] body .ldt-loading__text,
.ldt-rtl body .ldt-loading__text {
    margin-left: 0;
    margin-right: 8px;
}

/* Spinner circle */
body .ldt-loading--overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

body .ldt-loading__spinner-circle {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 140, 0, 0.20);
    border-top-color: var(--ldt-accent, #ff8c00);
    border-right-color: var(--ldt-accent-dark, #e07a00);
    border-radius: 50%;
    animation: ldt-spinner-rotate 0.8s linear infinite;
}

@keyframes ldt-spinner-rotate {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-loading__spinner-circle {
        animation: none;
        border-top-color: var(--ldt-accent, #ff8c00);
    }
}

/* Skeleton placeholders */
body .ldt-skeleton {
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    border-radius: var(--ldt-radius-card, 1.25rem);
    padding: 16px;
    border: 1px solid rgba(0, 53, 128, 0.06);
}

body .ldt-skeleton__image,
body .ldt-skeleton__line {
    background: linear-gradient(
        90deg,
        rgba(0, 53, 128, 0.06) 0%,
        rgba(0, 53, 128, 0.10) 50%,
        rgba(0, 53, 128, 0.06) 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: ldt-skeleton-shimmer 1.6s linear infinite;
}

body .ldt-skeleton__image {
    height: 160px;
    margin-bottom: 12px;
    border-radius: var(--ldt-radius-input, 0.75rem);
}

body .ldt-skeleton__line {
    height: 12px;
    margin-bottom: 8px;
}

@keyframes ldt-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-skeleton__image,
    body .ldt-skeleton__line {
        animation: none;
        background: rgba(0, 53, 128, 0.08);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. LANGUAGE TOGGLE (.ldt-lang-toggle)
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Pill (segmented) variant */
body .ldt-lang-toggle--pill {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-pill, 9999px);
    padding: 3px;
    gap: 2px;
}

body .ldt-lang-toggle__seg {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: var(--ldt-radius-pill, 9999px);
    color: var(--ldt-gray-600, #64748b);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-lang-toggle__seg:not(.ldt-lang-toggle__seg--active):hover {
        background: rgba(0, 53, 128, 0.06);
        color: var(--ldt-primary, #003580);
    }
}

body .ldt-lang-toggle__seg--active {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(255, 140, 0, 0.30);
}

/* Flags variant */
body .ldt-lang-toggle--flags {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body .ldt-lang-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.55;
    transition:
        opacity 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        transform 200ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-lang-toggle__btn:hover {
        opacity: 0.85;
        transform: scale(1.06);
    }
}

body .ldt-lang-toggle__btn--active {
    opacity: 1;
    border-color: var(--ldt-accent, #ff8c00);
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.30);
}

/* Dropdown variant */
body .ldt-lang-toggle--dropdown .ldt-lang-toggle__select {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 53, 128, 0.12);
    border-radius: var(--ldt-radius-pill, 9999px);
    padding: 6px 12px;
    color: var(--ldt-primary, #003580);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. EMPTY STATE (.ldt-empty-state) — already partly in E12; add polish
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px dashed rgba(0, 53, 128, 0.16);
    border-radius: var(--ldt-radius-card, 1.25rem);
    max-width: 520px;
    margin: 24px auto;
}

body .ldt-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.10) 0%,
        rgba(0, 53, 128, 0.06) 100%
    );
    border: 1px solid rgba(255, 140, 0, 0.20);
    color: var(--ldt-accent, #ff8c00);
    font-size: 2.5rem;
    margin-bottom: 16px;
}

body .ldt-empty-state__title {
    color: var(--ldt-dark, #1e293b);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

body .ldt-empty-state__message {
    color: var(--ldt-gray-600, #64748b);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 18px;
}

body .ldt-empty-state__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
}

body .ldt-empty-state__suggestions {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px dashed rgba(0, 53, 128, 0.08);
}

body .ldt-empty-state__try-label {
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}

body .ldt-empty-state__try-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

body .ldt-empty-state__try-links a {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(0, 53, 128, 0.06);
    color: var(--ldt-primary, #003580);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-empty-state__try-links a:hover {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, rgba(255, 140, 0, 0.16) 0%, rgba(224, 122, 0, 0.16) 100%));
    color: var(--ldt-accent-dark, #e07a00);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. CARD-DEAL (.ldt-card-deal) — gradient discount + countdown + CTA glow
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-card-deal {
    position: relative;
}

body .ldt-card-deal__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

body .ldt-card-deal__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

body .ldt-card-deal__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-card-deal:hover .ldt-card-deal__img {
        transform: scale(1.08);
    }
}

/* Discount badge — accent gradient with glow */
body .ldt-card-deal__discount {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(
        135deg,
        #dc2626 0%,
        #ef4444 50%,
        #ff8c00 100%
    );
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.40);
    animation: ldt-pulse-glow 2.4s ease-in-out infinite;
}

[dir="rtl"] body .ldt-card-deal__discount,
.ldt-rtl body .ldt-card-deal__discount {
    left: auto;
    right: 12px;
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-card-deal__discount { animation: none; }
}

/* Expires chip — top right with countdown */
body .ldt-card-deal__expires {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.70);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: #ffffff;
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

[dir="rtl"] body .ldt-card-deal__expires,
.ldt-rtl body .ldt-card-deal__expires {
    right: auto;
    left: 12px;
}

body .ldt-card-deal__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body .ldt-card-deal__title {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    transition: color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-card-deal:hover .ldt-card-deal__title {
        color: var(--ldt-primary, #003580);
    }
}

body .ldt-card-deal__desc {
    color: var(--ldt-gray-600, #64748b);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}

body .ldt-card-deal__pricing {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

body .ldt-card-deal__price-original {
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 13px;
    text-decoration: line-through;
}

body .ldt-card-deal__price-sale {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-accent, #ff8c00);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

body .ldt-card-deal__price-from {
    color: var(--ldt-primary, #003580);
    font-size: 14px;
    font-weight: 700;
}

/* CTA "Book Deal →" with glow */
body .ldt-card-deal__cta {
    color: var(--ldt-accent, #ff8c00);
    font-weight: 800;
    font-size: 13px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 53, 128, 0.06);
    letter-spacing: 0.02em;
    transition:
        color 250ms var(--ldt-ease-portal, ease),
        letter-spacing 250ms var(--ldt-ease-portal, ease),
        text-shadow 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-card-deal:hover .ldt-card-deal__cta {
        color: var(--ldt-accent-dark, #e07a00);
        letter-spacing: 0.06em;
        text-shadow: 0 0 12px rgba(255, 140, 0, 0.40);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. CARD-GUIDE (.ldt-card-guide) — editorial card
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-card-guide__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

body .ldt-card-guide__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

body .ldt-card-guide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-card-guide:hover .ldt-card-guide__img {
        transform: scale(1.08);
    }
}

/* Featured/save badge — top right */
body .ldt-card-guide__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: var(--ldt-accent-dark, #e07a00);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

[dir="rtl"] body .ldt-card-guide__badge,
.ldt-rtl body .ldt-card-guide__badge {
    right: auto;
    left: 12px;
}

/* Type pill — color set by PHP inline style; we add pill polish */
body .ldt-card-guide__type {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    color: #ffffff;
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

[dir="rtl"] body .ldt-card-guide__type,
.ldt-rtl body .ldt-card-guide__type {
    left: auto;
    right: 12px;
}

body .ldt-card-guide__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body .ldt-card-guide__title {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    transition: color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-card-guide:hover .ldt-card-guide__title {
        color: var(--ldt-primary, #003580);
    }
}

body .ldt-card-guide__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 12px;
    font-weight: 500;
}

body .ldt-card-guide__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body .ldt-card-guide__cta {
    color: var(--ldt-accent, #ff8c00);
    font-weight: 700;
    font-size: 13px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 53, 128, 0.06);
    transition:
        color 250ms var(--ldt-ease-portal, ease),
        letter-spacing 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-card-guide:hover .ldt-card-guide__cta {
        color: var(--ldt-accent-dark, #e07a00);
        letter-spacing: 0.04em;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. CARD-VISA (.ldt-card-visa) — preserves PHP-injected color
 *
 * The PHP partial sets `border-left: 3px solid <color>` and `background:<bg>;
 * color:<color>` inline on the label. We layer the card frame around it.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-card-visa {
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 53, 128, 0.06);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 4px 14px rgba(0, 53, 128, 0.06);
    padding: 16px 18px;
    /* border-left preserved via PHP inline style */
}

body .ldt-card-visa__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body .ldt-card-visa__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.10);
    border: 1px solid rgba(255, 140, 0, 0.20);
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Label color comes from PHP inline style — we add pill rounding */
body .ldt-card-visa__label {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

body .ldt-card-visa__dest {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}

body .ldt-card-visa__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body .ldt-card-visa--compact {
    padding: 12px 14px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. BADGES — type / classification / rating / price / status
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Badge — type (PHP-injected background-color) */
body .ldt-badge-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    color: #ffffff;
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

body .ldt-badge-type--sm { font-size: 10px; padding: 2px 8px; }
body .ldt-badge-type--lg { font-size: 12px; padding: 4px 12px; }

/* Badge — classification (outline style) */
body .ldt-badge-class {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.16);
    color: var(--ldt-primary, #003580);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

body .ldt-badge-class--accent {
    background: rgba(255, 140, 0, 0.08);
    border-color: rgba(255, 140, 0, 0.30);
    color: var(--ldt-accent-dark, #e07a00);
}

body .ldt-badge-class--success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.30);
    color: rgb(21, 128, 61);
}

/* Badge — rating numeric */
body .ldt-badge-rating--numeric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 140, 0, 0.30);
    border-radius: var(--ldt-radius-pill, 9999px);
    box-shadow: 0 2px 6px rgba(255, 140, 0, 0.10);
}

/* High rating (≥ 4.5) — accent gradient pill */
body .ldt-badge-rating--numeric.is-high,
body .ldt-badge-rating--numeric[data-rating="4.5"],
body .ldt-badge-rating--numeric[data-rating="4.6"],
body .ldt-badge-rating--numeric[data-rating="4.7"],
body .ldt-badge-rating--numeric[data-rating="4.8"],
body .ldt-badge-rating--numeric[data-rating="4.9"],
body .ldt-badge-rating--numeric[data-rating="5.0"] {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.30);
}

body .ldt-badge-rating--numeric.is-high .ldt-badge-rating__score,
body .ldt-badge-rating--numeric.is-high .ldt-badge-rating__label {
    color: #ffffff;
}

body .ldt-badge-rating__score {
    color: var(--ldt-accent-dark, #e07a00);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
}

body .ldt-badge-rating__label {
    color: var(--ldt-gray-600, #64748b);
    font-weight: 600;
    font-size: 11px;
}

/* Stars variant */
body .ldt-badge-rating--stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

body .ldt-badge-rating__star {
    color: var(--ldt-gray-300, #cbd5e1);
    font-size: 14px;
    line-height: 1;
}

body .ldt-badge-rating__star--full {
    color: var(--ldt-accent, #ff8c00);
    filter: drop-shadow(0 1px 1px rgba(255, 140, 0, 0.30));
}

body .ldt-badge-rating__star--half {
    background: linear-gradient(
        90deg,
        var(--ldt-accent, #ff8c00) 0%,
        var(--ldt-accent, #ff8c00) 50%,
        var(--ldt-gray-300, #cbd5e1) 50%,
        var(--ldt-gray-300, #cbd5e1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body .ldt-badge-rating__star--empty {
    color: var(--ldt-gray-300, #cbd5e1);
}

/* Compact rating (small inline pill) */
body .ldt-badge-rating--compact {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ldt-accent-dark, #e07a00);
    font-weight: 700;
    font-size: 12px;
}

/* Badge — price ($/$$/$$$) */
body .ldt-badge-price {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.10);
    color: var(--ldt-primary, #003580);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-family: var(--ldt-font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

body .ldt-badge-price--budget {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.30);
    color: rgb(21, 128, 61);
}

body .ldt-badge-price--mid {
    background: rgba(0, 53, 128, 0.06);
    border-color: rgba(0, 53, 128, 0.20);
    color: var(--ldt-primary, #003580);
}

body .ldt-badge-price--high {
    background: rgba(255, 140, 0, 0.10);
    border-color: rgba(255, 140, 0, 0.30);
    color: var(--ldt-accent-dark, #e07a00);
}

body .ldt-badge-price--luxury {
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.10) 0%,
        rgba(168, 85, 247, 0.10) 100%
    );
    border-color: rgba(124, 58, 237, 0.30);
    color: rgb(109, 40, 217);
}

/* Badge — status (with dot, --badge-color CSS variable) */
body .ldt-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-pill, 9999px);
    color: var(--ldt-gray-700, #334155);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

body .ldt-badge-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--badge-color, #94a3b8);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.50);
    flex-shrink: 0;
}

/* Live status — pulse glow on dot */
body .ldt-badge-status--live .ldt-badge-status__dot,
body .ldt-badge-status[data-status="live"] .ldt-badge-status__dot {
    animation: ldt-status-pulse 1.6s ease-in-out infinite;
}

@keyframes ldt-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.50); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-badge-status--live .ldt-badge-status__dot,
    body .ldt-badge-status[data-status="live"] .ldt-badge-status__dot {
        animation: none;
    }
}


/* ─── END OF ldt-enhanced-components.css ──────────────────────────────────── */