/* ═══════════════════════════════════════════════
   Tab Slider Pro v2 — Frontend CSS
   Author: Al Islam | Softbeez
   ═══════════════════════════════════════════════ */

/* ── CSS defaults (overridden per instance via inline vars) ── */
.tsp-slider-wrap {
    --tsp-tab-text:         #3d1a0a;
    --tsp-tab-active-bg:    #3d1a0a;
    --tsp-tab-active-text:  #ffffff;
    --tsp-tab-hover-bg:     #3d1a0a;
    --tsp-tab-hover-text:   #ffffff;
    --tsp-tab-font-size:    13px;
    --tsp-tab-font-weight:  700;
    --tsp-tab-pad-h:        22px;
    --tsp-tab-pad-v:        10px;
    --tsp-bar-max-width:    900px;
    --tsp-bar-border-width: 2px;
    --tsp-bar-border-color: #3d1a0a;
    --tsp-bar-bg:           transparent;
    --tsp-bar-padding:      5px;
    --tsp-arrow-color:      #3d1a0a;
    --tsp-arrow-bg:         #ffffff;
    --tsp-transition:       500ms;

    position: relative;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* ════════════════════════════════════
   SLIDE PANELS
   ════════════════════════════════════ */

/* Full-width outer — breaks out of any container */
.tsp-panels-outer {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
    line-height: 0; /* remove inline-block gap */
}

.tsp-panels-track {
    display: flex;
    width: 100%;
    will-change: transform;
    /* transition set by JS so it can be toggled on/off */
}

.tsp-panel {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    line-height: 0;
}

/* Clickable banner */
.tsp-panel-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Media fills the panel */
.tsp-media {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.tsp-media picture,
.tsp-media picture img {
    display: block;
    width: 100%;
    height: auto;
}

picture.tsp-media img {
    width: 100%;
    height: auto;
    display: block;
}

.tsp-panel-empty {
    width: 100%;
    height: 300px;
    background: #f0f0f0;
    display: block;
}

/* ════════════════════════════════════
   ARROWS
   ════════════════════════════════════ */
.tsp-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: var(--tsp-arrow-bg);
    color: var(--tsp-arrow-color);
    border: 2px solid var(--tsp-arrow-color);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    outline: none;
}
.tsp-arrow:hover {
    background: var(--tsp-arrow-color);
    color: var(--tsp-arrow-bg);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.tsp-arrow:focus-visible { outline: 3px solid var(--tsp-arrow-color); outline-offset: 2px; }
.tsp-arrow-prev { left: 16px; }
.tsp-arrow-next { right: 16px; }
.tsp-arrow svg  { pointer-events: none; flex-shrink: 0; }

/* ════════════════════════════════════
   TAB BAR
   ════════════════════════════════════ */

/* Outer row — full width, centers the pill */
.tsp-tabbar-outer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px 12px;
    box-sizing: border-box;
}

/* The pill container — bordered capsule */
.tsp-tabbar-pill {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--tsp-bar-max-width);
    border: var(--tsp-bar-border-width) solid var(--tsp-bar-border-color);
    background: var(--tsp-bar-bg);
    border-radius: 999px; /* full pill */
    padding: var(--tsp-bar-padding);
    box-sizing: border-box;
    overflow: hidden; /* hide scrollbar overflow behind pill */
    position: relative;
}

/* Inner scrollable track of buttons */
.tsp-tabs-track {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    justify-content: center; /* center when tabs fit */
    flex-wrap: nowrap;
    padding: 2px 0;
}
.tsp-tabs-track::-webkit-scrollbar { display: none; }

/* When tabs overflow, left-align so scrolling makes sense */
.tsp-tabs-track.tsp-overflows {
    justify-content: flex-start;
}

/* Individual tab button */
.tsp-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--tsp-tab-text);
    font-size: var(--tsp-tab-font-size);
    font-weight: var(--tsp-tab-font-weight);
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: var(--tsp-tab-pad-v) var(--tsp-tab-pad-h);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    outline: none;
    line-height: 1;
}
.tsp-tab-btn:hover {
    background: var(--tsp-tab-hover-bg);
    color: var(--tsp-tab-hover-text);
}
.tsp-tab-btn.tsp-active {
    background: var(--tsp-tab-active-bg);
    color: var(--tsp-tab-active-text);
}
.tsp-tab-btn:focus-visible {
    outline: 3px solid var(--tsp-bar-border-color);
    outline-offset: 2px;
}

/* ════════════════════════════════════
   TRANSITIONS
   ════════════════════════════════════ */
.tsp-panels-track.tsp-animating {
    transition: transform var(--tsp-transition) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .tsp-panels-track { transition: none !important; }
    .tsp-tab-btn      { transition: none; }
    .tsp-arrow        { transition: none; }
}