/* Travelo Products Showcase — Frontend CSS v1.3 */

/* ── CSS Variables (defaults, overridden by inline style) ── */
.travelo-showcase {
    --tp-border-color: #f97316;
    --tp-radius: 16px;
    --tp-img-height: 240px;
    --tp-title-color: #1e293b;
    --tp-price-color: #f97316;
    --tp-vd-color: #fff;
    --tp-vd-bg: #1e293b;
    --tp-bn-color: #fff;
    --tp-bn-bg: #f97316;
    font-family: inherit;
    width: 100%;
}

/* ── Grid ── */
.tp-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--tp-cols, 3), 1fr) !important;
    gap: 24px !important;
}
@media (max-width: 1023px) { .tp-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 599px)  { .tp-grid { grid-template-columns: 1fr !important; } }

/* ── Swiper core resets (scoped inline <style> handles positioning) ── */
.travelo-showcase .swiper { overflow: hidden !important; width: 100% !important; padding-bottom: 48px !important; }
.travelo-showcase .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; }
.travelo-showcase .swiper-slide  { flex-shrink: 0 !important; height: auto !important; }

/* ── Card ── */
.tp-card {
    background: #fff;
    border: 1.5px solid var(--tp-border-color);
    border-radius: var(--tp-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
    box-sizing: border-box;
}
.tp-has-shadow .tp-card { box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.tp-has-shadow .tp-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(249,115,22,.18); }

/* ── Image ── */
.tp-card__image-wrap {
    position: relative;
    overflow: hidden;
    height: var(--tp-img-height);
    min-height: var(--tp-img-height);
    flex-shrink: 0;
}
.tp-card__image-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.tp-card:hover .tp-card__image-wrap img { transform: scale(1.06); }

/* ── Badges ── */
.tp-badge {
    position: absolute; top: 12px; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; line-height: 1; z-index: 2;
}
.tp-badge--sale { left: 12px; background: #ef4444; color: #fff; }
.tp-badge--cat  { right: 12px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }

/* ── Body ── */
.tp-card__body { padding: 16px 18px 8px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tp-card__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--tp-title-color); }
.tp-card__title a { color: inherit; text-decoration: none; }
.tp-card__title a:hover { color: var(--tp-border-color); }
.tp-card__rating { display: flex; align-items: center; gap: 2px; font-size: 14px; }
.tp-star { color: #d1d5db; }  .tp-star.filled { color: #f59e0b; }
.tp-rating-count { margin-left: 4px; font-size: 12px; color: #94a3b8; }
.tp-card__price { font-size: 17px; font-weight: 700; color: var(--tp-price-color); margin-top: auto; }
.tp-card__price del { color: #94a3b8; font-weight: 400; font-size: 13px; margin-right: 4px; }
.tp-card__price ins { text-decoration: none; }

/* ── Footer ── */
.tp-card__footer { padding: 0 18px 18px; margin-top: auto; }
.tp-card__divider { height: 1px; background: #f1f5f9; margin-bottom: 14px; }
.tp-card__buttons { display: flex; gap: 10px; }

/* ── Buttons ── */
.tp-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 700;
    cursor: pointer; border: none; text-decoration: none;
    transition: filter .2s, transform .15s; line-height: 1; white-space: nowrap;
    box-sizing: border-box;
}
.tp-btn:hover { filter: brightness(1.1); transform: translateY(-1px); text-decoration: none; }
.tp-btn--details { background: var(--tp-vd-bg) !important; color: var(--tp-vd-color) !important; }
.tp-btn--book    { background: var(--tp-bn-bg) !important; color: var(--tp-bn-color) !important; }
.tp-btn.tp-loading { opacity: .7; pointer-events: none; }

/* ── Nav Arrows (positioned by scoped <style>) ── */
.tp-nav {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--tp-border-color) !important;
    background: #fff !important; cursor: pointer;
    font-size: 20px; color: var(--tp-border-color);
    display: flex !important; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    padding: 0; line-height: 1;
}
.tp-nav:hover { background: var(--tp-border-color) !important; color: #fff; }
/* Disabled state */
.tp-nav.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ── Dots ── */
.tp-dots.swiper-pagination {
    display: flex !important; justify-content: center; align-items: center;
    gap: 6px; width: 100% !important; height: 20px;
}
.tp-dots .swiper-pagination-bullet {
    width: 8px; height: 8px; background: #cbd5e1; opacity: 1;
    border-radius: 4px; display: inline-block; margin: 0 !important;
    transition: background .2s, width .3s;
}
.tp-dots .swiper-pagination-bullet-active {
    background: var(--tp-border-color); width: 24px;
}

/* ── Toast ── */
.tp-cart-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 99999;
    background: #1e293b; color: #fff; padding: 14px 20px; border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2); display: flex; flex-direction: column;
    gap: 10px; min-width: 240px; max-width: 320px;
}
.tp-toast-msg { font-size: 14px; font-weight: 600; }
.tp-toast-actions { display: flex; gap: 10px; }
.tp-toast-link { font-size: 13px; padding: 6px 14px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.tp-toast-link:hover { background: rgba(255,255,255,.22); color: #fff; }
.tp-toast-link--checkout { background: #f97316; }
.tp-toast-link--checkout:hover { background: #ea6c0e; }

.travelo-no-products { padding: 24px; text-align: center; color: #94a3b8; border: 2px dashed #e2e8f0; border-radius: 12px; }