/* ====================================================================

   FTS Destination V2 - Trip Card

   ==================================================================== */



.fts-dest-v2-card {

    background: var(--v2-bg) !important;

    border-radius: var(--v2-radius-lg) !important;

    overflow: hidden !important;

    box-shadow: var(--v2-shadow-sm) !important;

    border: 1px solid var(--v2-border) !important;

    transition: transform 0.3s ease !important, box-shadow 0.3s ease !important, border-color 0.3s ease !important;

    opacity: 0;

    animation: ftsCardIn 0.4s ease forwards;

    position: relative;

}



.fts-dest-v2-card:hover {

    transform: translateY(-6px) !important;

    box-shadow: var(--v2-shadow-lg) !important;

}



/* ─── Featured card special styling ─── */

.fts-dest-v2-card.is-featured {

    border-color: rgba(6, 214, 160, 0.3) !important;

    box-shadow: var(--v2-shadow-sm) !important;

}



.fts-dest-v2-card.is-featured:hover {

    border-color: rgba(6, 214, 160, 0.4) !important;

    box-shadow: var(--v2-shadow-lg) !important;

}



@keyframes ftsCardIn {

    from { opacity: 0; transform: translateY(20px); }

    to   { opacity: 1; transform: translateY(0); }

}



.fts-dest-v2-card:nth-child(1) { animation-delay: 0.05s; }

.fts-dest-v2-card:nth-child(2) { animation-delay: 0.1s; }

.fts-dest-v2-card:nth-child(3) { animation-delay: 0.15s; }

.fts-dest-v2-card:nth-child(4) { animation-delay: 0.2s; }

.fts-dest-v2-card:nth-child(5) { animation-delay: 0.25s; }

.fts-dest-v2-card:nth-child(6) { animation-delay: 0.3s; }

.fts-dest-v2-card:nth-child(7) { animation-delay: 0.35s; }

.fts-dest-v2-card:nth-child(8) { animation-delay: 0.4s; }

.fts-dest-v2-card:nth-child(9) { animation-delay: 0.45s; }



/* --- Link reset --- */

.fts-dest-v2-card-link {

    display: flex !important;

    flex-direction: column !important;

    text-decoration: none !important;

    color: inherit !important;

    height: 100% !important;

}



.fts-dest-v2-card-link:hover,

.fts-dest-v2-card-link:focus {

    text-decoration: none !important;

    color: inherit !important;

}



/* --- Media --- */

.fts-dest-v2-card-media {

    position: relative !important;

    overflow: hidden !important;

    aspect-ratio: 4 / 3;

    background: var(--v2-bg-gray) !important;

}



.fts-dest-v2-card-img,

.fts-dest-v2-card-media img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    transition: transform 0.5s ease !important;

}



.fts-dest-v2-card:hover .fts-dest-v2-card-img,

.fts-dest-v2-card:hover .fts-dest-v2-card-media img {

    transform: scale(1.06) !important;

}



.fts-dest-v2-card-no-img {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--v2-text-muted);

    font-size: 10px !important;

}



/* Badges (top-left stack) */

.fts-dest-v2-card-badges {

    position: absolute !important;

    top: 8px !important;

    left: 8px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

    z-index: 2;

}



.fts-dest-v2-badge {

    display: inline-flex !important;

    align-items: center !important;

    padding: 3px 8px !important;

    border-radius: 5px !important;

    font-family: var(--v2-font-heading) !important;

    font-size: 9px !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.04em !important;

    line-height: 1.3 !important;

}



.fts-dest-v2-badge-featured {

    background: linear-gradient(135deg, #06d6a0, #0ac593) !important;

    color: #fff !important;

    gap: 4px !important;

    padding: 4px 9px !important;

    border-radius: 6px !important;

    box-shadow: 0 2px 10px rgba(6, 214, 160, 0.4) !important;

    animation: ftsBadgePulse 2.5s ease-in-out infinite;

}



.fts-dest-v2-badge-icon {

    flex-shrink: 0;

    animation: ftsStarSpin 3s ease-in-out infinite;

}



@keyframes ftsBadgePulse {

    0%, 100% { box-shadow: 0 2px 10px rgba(6, 214, 160, 0.4); }

    50%      { box-shadow: 0 2px 18px rgba(6, 214, 160, 0.65); }

}



@keyframes ftsStarSpin {

    0%, 100% { transform: rotate(0deg) scale(1); }

    25%      { transform: rotate(-12deg) scale(1.15); }

    50%      { transform: rotate(12deg) scale(1); }

    75%      { transform: rotate(-5deg) scale(1.08); }

}



/* Glow overlay behind image for featured cards */

.fts-dest-v2-featured-glow {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #06d6a0, #0ac593, #06d6a0);

    background-size: 200% 100%;

    animation: ftsGlowSlide 2s linear infinite;

    z-index: 3;

}



@keyframes ftsGlowSlide {

    0%   { background-position: -200% 0; }

    100% { background-position: 200% 0; }

}



.fts-dest-v2-badge-discount {

    background: var(--v2-accent) !important;

    color: #fff !important;

}



/* Duration pill (bottom-right of image) */

.fts-dest-v2-card-duration {

    position: absolute !important;

    bottom: 8px !important;

    right: 8px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 3px !important;

    background: rgba(0, 0, 0, 0.65) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;

    color: #fff !important;

    border-radius: 16px !important;

    padding: 4px 10px !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    font-family: var(--v2-font-body) !important;

    z-index: 2;

    transition: background 0.2s ease !important;

}



.fts-dest-v2-card-duration svg {

    width: 11px !important;

    height: 11px !important;

}



/* --- Card Body --- */

.fts-dest-v2-card-body {

    padding: 10px 12px 8px !important;

    flex: 1;

}



.fts-dest-v2-card-dest {

    display: inline-block !important;

    font-family: var(--v2-font-body) !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.06em !important;

    color: var(--v2-primary) !important;

    margin-bottom: 3px !important;

}



.fts-dest-v2-card-title {

    font-family: var(--v2-font-heading) !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 1.35 !important;

    margin: 0 0 4px !important;

    color: var(--v2-text) !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden !important;

    transition: color 0.2s ease !important;

}



.fts-dest-v2-card:hover .fts-dest-v2-card-title {

    color: var(--v2-primary) !important;

}



/* ─── Trustindex widget in card ─── */

.fts-dest-v2-card-tidx {

    margin: 2px 0 4px !important;

    line-height: 1 !important;

    max-height: 20px !important;

    overflow: hidden !important;

    transform: scale(0.8) !important;

    transform-origin: left center !important;

}



.fts-dest-v2-card-tidx * {

    font-size: 10px !important;

    line-height: 1.2 !important;

}



.fts-dest-v2-card-tidx img {

    height: 14px !important;

    width: auto !important;

}



/* Meta row */

.fts-dest-v2-card-meta {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 8px !important;

    margin-bottom: 4px !important;

}



.fts-dest-v2-card-meta span {

    display: inline-flex !important;

    align-items: center !important;

    gap: 3px !important;

    font-size: 10px !important;

    font-family: var(--v2-font-body) !important;

    color: var(--v2-text-light) !important;

}



.fts-dest-v2-card-meta svg {

    color: var(--v2-text-muted) !important;

    width: 10px !important;

    height: 10px !important;

}



/* Rating */

.fts-dest-v2-card-rating {

    display: flex !important;

    align-items: center !important;

    gap: 1px !important;

    margin-bottom: 2px !important;

}



.fts-dest-v2-card-rating .star {

    font-size: 11px !important;

    line-height: 1 !important;

}



.fts-dest-v2-card-rating .star.full {

    color: var(--v2-secondary) !important;

}



.fts-dest-v2-card-rating .star.half {

    color: var(--v2-secondary) !important;

    opacity: 0.6;

}



.fts-dest-v2-card-rating .star.empty {

    color: var(--v2-border) !important;

}



.fts-dest-v2-card-review-count {

    font-size: 9px !important;

    color: var(--v2-text-muted) !important;

    margin-left: 3px !important;

    font-family: var(--v2-font-body) !important;

}



/* --- Card Footer --- */

.fts-dest-v2-card-footer {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 8px 12px 10px !important;

    border-top: 1px solid var(--v2-border) !important;

}



.fts-dest-v2-card-price {

    display: flex !important;

    flex-direction: column !important;

}



.fts-dest-v2-card-from {

    font-size: 9px !important;

    color: var(--v2-text-muted) !important;

    font-weight: 400 !important;

    margin-right: 3px !important;

}



.fts-dest-v2-card-price-current {

    font-family: var(--v2-font-heading) !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    color: #1a1a5e !important;

}



.fts-dest-v2-card-price-old {

    font-size: 10px !important;

    color: var(--v2-text-muted) !important;

    text-decoration: line-through !important;

    font-family: var(--v2-font-body) !important;

}



/* CTA */

.fts-dest-v2-card-cta {

    font-family: var(--v2-font-heading) !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    color: var(--v2-primary) !important;

    white-space: nowrap !important;

    transition: color 0.2s ease !important, transform 0.2s ease !important;

}



.fts-dest-v2-card:hover .fts-dest-v2-card-cta {

    color: var(--v2-primary-dark) !important;

    transform: translateX(2px) !important;

}



/* ─── Mobile-only elements (hidden on desktop) ─── */

.fts-dest-v2-card-mobile-meta {

    display: none !important;

    align-items: center !important;

    gap: 12px !important;

    margin-bottom: 6px !important;

    flex-wrap: wrap !important;

}



.fts-dest-v2-card-mobile-meta span {

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    font-family: var(--v2-font-body) !important;

    font-size: 12px !important;

    font-weight: 500 !important;

    color: var(--v2-text-light) !important;

    white-space: nowrap !important;

}



.fts-dest-v2-card-mobile-meta svg {

    color: var(--v2-text-muted) !important;

    flex-shrink: 0 !important;

}



.fts-dest-v2-card-discount-inline {

    display: none !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 2px 6px !important;

    border-radius: 4px !important;

    background: var(--v2-accent) !important;

    color: #fff !important;

    font-family: var(--v2-font-heading) !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    white-space: nowrap !important;

    margin-left: 6px !important;

}



/* --- No results --- */

.fts-dest-v2-no-results {

    grid-column: 1 / -1;

    text-align: center;

    padding: 60px 20px;

}



.fts-dest-v2-no-results svg {

    margin-bottom: 16px;

}



.fts-dest-v2-no-results h3 {

    font-family: var(--v2-font-heading) !important;

    font-size: 20px !important;

    font-weight: 700 !important;

    color: var(--v2-text) !important;

    margin: 0 0 8px !important;

}



.fts-dest-v2-no-results p {

    font-family: var(--v2-font-body) !important;

    font-size: 15px !important;

    color: var(--v2-text-light) !important;

    margin: 0 0 20px !important;

}



.fts-dest-v2-no-results-clear {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    background: var(--v2-primary) !important;

    color: #fff !important;

    border: none !important;

    border-radius: var(--v2-radius-sm) !important;

    padding: 10px 24px !important;

    font-family: var(--v2-font-heading) !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: background 0.2s ease !important;

    box-shadow: none !important;

    outline: none !important;

}



.fts-dest-v2-no-results-clear:hover {

    background: var(--v2-primary-dark) !important;

}