/* ============================================================
   Travel Destinations Slider — tds-slider.css
   ============================================================ */

.tds-wrapper {
    width: 100%;
    padding: 30px 0 30px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

/* ---- Track container: clips horizontal overflow only ---- */
.tds-track-container {
    width: 100%;
    overflow: hidden;          /* clips slides left/right */
    padding-top: 30px;         /* room for taller active card */
    padding-bottom: 10px;
    box-sizing: border-box;
}

/* ---- Flex row ---- */
.tds-track {
    display: flex;
    align-items: flex-end;     /* bottom-align all cards */
    gap: 18px;
    transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
    /* wide side padding so edge cards never get clipped */
    padding: 0 calc(50% - 85px);  /* half container minus half normal-card-width */
}

/* ---- Each slide ---- */
.tds-slide {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.tds-slide a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* ---- Card (oval pill) ---- */
.tds-card {
    width: 150px;
    height: 320px;
    border-radius: 110px;
    border: 3px solid #C9A84C;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition:
        width  0.5s cubic-bezier(.25,.46,.45,.94),
        height 0.5s cubic-bezier(.25,.46,.45,.94),
        border-color 0.4s ease,
        box-shadow   0.4s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}

.tds-card.tds-active {
    width: 230px;
    height: 430px;
    border-color: #D4AF37;
    box-shadow: 0 16px 55px rgba(212,175,55,.35), 0 6px 20px rgba(0,0,0,.2);
}

.tds-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.22) 100%);
    border-radius: inherit;
    transition: opacity 0.4s;
}
.tds-card:hover .tds-card-overlay { opacity: 0.65; }

/* ---- Badge ---- */
.tds-badge {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #D4AF37;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 4px 13px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 2;
    text-transform: uppercase;
}

/* ---- Info below card ---- */
.tds-info {
    margin-top: 14px;
    text-align: center;
    padding: 0 6px;
    max-width: 230px;
    opacity: 0.6;
    transition: opacity 0.4s;
}
.tds-slide.tds-slide-active .tds-info { opacity: 1; }

.tds-dest-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
    line-height: 1.2;
}
.tds-slide.tds-slide-active .tds-dest-name { font-size: 18px; }

.tds-dest-country {
    font-size: 13px;
    color: #666688;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
}
.tds-pin-icon { color: #D4AF37; font-size: 8px; line-height: 1; }

.tds-dest-desc {
    font-size: 12px;
    color: #444466;
    line-height: 1.55;
    max-width: 210px;
    display: none;
}
.tds-slide.tds-slide-active .tds-dest-desc { display: block; }

/* ---- Arrows ---- */
.tds-track-outer {
    position: relative;
}

.tds-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);   /* slightly above center (cards bottom-align) */
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #D4AF37;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 20;
    box-shadow: 0 4px 14px rgba(212,175,55,.45);
    transition: background .22s, box-shadow .22s, transform .15s;
    line-height: 1;
}
.tds-nav-btn.tds-prev { left: 8px;  }
.tds-nav-btn.tds-next { right: 8px; }
.tds-nav-btn:hover    { background: #b8941f; box-shadow: 0 6px 20px rgba(212,175,55,.6); }
.tds-nav-btn.tds-prev:hover { transform: translateY(-60%) scale(1.1); }
.tds-nav-btn.tds-next:hover { transform: translateY(-60%) scale(1.1); }

/* ---- Dots ---- */
.tds-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.tds-dot {
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background: #ccc;
    cursor: pointer;
    transition: background .3s, width .3s;
}
.tds-dot.tds-dot-active { background: #D4AF37; width: 26px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- Tablet ≤ 1024px ---- */
@media (max-width: 1024px) {
    .tds-card           { width: 130px; height: 270px; border-radius: 90px; }
    .tds-card.tds-active{ width: 195px; height: 360px; }
    .tds-track          { gap: 14px; padding: 0 calc(50% - 65px); }
    .tds-dest-name      { font-size: 14px; }
    .tds-slide.tds-slide-active .tds-dest-name { font-size: 16px; }
}

/* ---- Mobile landscape ≤ 768px ---- */
@media (max-width: 768px) {
    .tds-wrapper        { padding: 20px 0; }
    .tds-card           { width: 105px; height: 215px; border-radius: 70px; border-width: 2px; }
    .tds-card.tds-active{ width: 155px; height: 295px; }
    .tds-track          { gap: 11px; padding: 0 calc(50% - 52px); }
    .tds-nav-btn        { width: 36px; height: 36px; font-size: 15px; border-radius: 8px; }
    .tds-dest-name      { font-size: 13px; }
    .tds-slide.tds-slide-active .tds-dest-name { font-size: 15px; }
    .tds-dest-country   { font-size: 11px; }
    .tds-dest-desc      { font-size: 11px; }
}

/* ---- Mobile portrait ≤ 480px ---- */
@media (max-width: 480px) {
    .tds-wrapper        { padding: 15px 0; }
    .tds-card           { width: 82px; height: 170px; border-radius: 55px; border-width: 2px; }
    .tds-card.tds-active{ width: 122px; height: 240px; }
    .tds-track          { gap: 8px; padding: 0 calc(50% - 41px); }
    .tds-nav-btn        { width: 30px; height: 30px; font-size: 13px; border-radius: 7px; }
    .tds-nav-btn.tds-prev { left: 4px; }
    .tds-nav-btn.tds-next { right: 4px; }
    .tds-dest-name      { font-size: 12px; }
    .tds-slide.tds-slide-active .tds-dest-name { font-size: 13px; }
    .tds-dest-country   { font-size: 10px; }
    .tds-dest-desc      { font-size: 10px; max-width: 130px; }
    .tds-badge          { font-size: 9px; padding: 3px 8px; top: 10px; }
    .tds-info           { margin-top: 10px; }
    .tds-dot            { width: 8px; height: 8px; }
    .tds-dot.tds-dot-active { width: 20px; }
}

/* ---- Very small ≤ 360px ---- */
@media (max-width: 360px) {
    .tds-card           { width: 70px; height: 150px; border-radius: 45px; }
    .tds-card.tds-active{ width: 105px; height: 210px; }
    .tds-track          { gap: 6px; padding: 0 calc(50% - 35px); }
    .tds-nav-btn        { width: 26px; height: 26px; font-size: 11px; }
}