/* ═══════════════════════════════════════════
   Jeep Tabs Widget – Styles
   ═══════════════════════════════════════════ */

/* ── Reset ── */
.jeep-tabs *,
.jeep-tabs *::before,
.jeep-tabs *::after {
    box-sizing: border-box;
}

/* ═══ DESKTOP TAB HEADERS ═══ */

.jeep-tabs__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.jeep-tabs__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Icon container — gets the background, border, shadow. SVG fill handled by JS. */
.jeep-tabs__tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jtab-bg, transparent);
    transition: all 0.25s ease;
}

.jeep-tabs__tab-label {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.25s ease;
    color: var(--jtab-label, #1B365D);
}

/* Hover — icon container background only */
.jeep-tabs__tab:not(.jeep-tabs__tab--active):hover .jeep-tabs__tab-icon {
    background: var(--jtab-bg-hover, #1B365D);
    border-color: var(--jtab-bg-hover, #1B365D);
}

.jeep-tabs__tab:not(.jeep-tabs__tab--active):hover .jeep-tabs__tab-label {
    color: var(--jtab-label-hover, #1B365D);
}

/* Active — icon container background only */
.jeep-tabs__tab--active .jeep-tabs__tab-icon {
    background: var(--jtab-bg-active, #1B365D);
    border-color: var(--jtab-bg-active, #1B365D);
}

.jeep-tabs__tab--active .jeep-tabs__tab-label {
    color: var(--jtab-label-active, #ffffff);
}


/* ═══ ICON SWAP: NORMAL / ACTIVE ═══ */

.jeep-tabs__icon-normal,
.jeep-tabs__icon-active {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Active icon hidden by default. JS shows it when tab is active. */
.jeep-tabs__icon-active {
    display: none;
}


/* ═══ MOBILE TOGGLE ═══ */

.jeep-tabs__toggle {
    display: none;
    width: 100%;
    background: var(--jtab-bg, #ffffff);
    cursor: pointer;
    align-items: center;
    transition: all 0.25s ease;
    margin-bottom: 0;
}

.jeep-tabs__toggle-icon {
    display: flex;
    align-items: center;
    font-size: 22px;
    transition: all 0.25s ease;
}

.jeep-tabs__toggle-icon i,
.jeep-tabs__toggle-icon svg {
    width: 24px;
    height: 24px;
}

.jeep-tabs__toggle-label {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--jtab-label, #1B365D);
    text-align: left;
    transition: color 0.25s ease;
}

.jeep-tabs__chevron {
    display: flex;
    align-items: center;
    line-height: 0;
    transition: transform 0.3s ease;
}

.jeep-tabs__toggle--active .jeep-tabs__chevron {
    transform: rotate(180deg);
}

/* Toggle hover (non-active only) */
.jeep-tabs__toggle:not(.jeep-tabs__toggle--active):hover {
    background: var(--jtab-bg-hover, #1B365D);
    border-color: var(--jtab-bg-hover, #1B365D);
}

.jeep-tabs__toggle:not(.jeep-tabs__toggle--active):hover .jeep-tabs__toggle-label {
    color: var(--jtab-label-hover, #1B365D);
}

.jeep-tabs__toggle:not(.jeep-tabs__toggle--active):hover .jeep-tabs__chevron {
    color: var(--jtab-label-hover, #1B365D);
}

/* Toggle active */
.jeep-tabs__toggle--active {
    background: var(--jtab-bg-active, #1B365D);
    border-color: var(--jtab-bg-active, #1B365D);
}

.jeep-tabs__toggle--active .jeep-tabs__toggle-label {
    color: var(--jtab-label-active, #ffffff);
}


/* ═══ CONTENT PANEL ═══ */

.jeep-tabs__content-panel {
    display: none;
    animation: jeepFadeIn 0.35s ease;
}

.jeep-tabs__content-panel--active {
    display: block;
}

@keyframes jeepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jeep-tabs__content-inner {
    display: flex;
}

/* Image */
.jeep-tabs__content-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.jeep-tabs__content-image img {
    width: 100%;
    height: auto;
}

/* Text */
.jeep-tabs__content-text {
    flex: 1;
    min-width: 0;
}

.jeep-tabs__content-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.jeep-tabs__content-title-icon {
    font-size: 28px;
    display: flex;
    align-items: center;
}

.jeep-tabs__content-title-icon i,
.jeep-tabs__content-title-icon svg {
    width: 32px;
    height: 32px;
}

.jeep-tabs__content-title {
    font-size: 28px;
    font-weight: 700;
    color: #1B365D;
    margin: 0;
    line-height: 1.3;
}

.jeep-tabs__content-subtitle {
    font-size: 17px;
    color: #1B365D;
    margin: 4px 0 16px;
    line-height: 1.5;
}

.jeep-tabs__content-desc {
    font-size: 15px;
    color: #4A5568;
    margin: 0 0 24px;
    line-height: 1.7;
}

/* List Box */
.jeep-tabs__list-box {
}

.jeep-tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jeep-tabs__list-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jeep-tabs__list-icon {
    flex-shrink: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.jeep-tabs__list-icon i,
.jeep-tabs__list-icon svg {
    width: 20px;
    height: 20px;
}

.jeep-tabs__list-text {
    font-size: 15px;
    color: #2D3748;
    font-weight: 500;
}


/* ═══ BUTTON ═══ */

.jeep-tabs__btn {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

/* Icon position: before text (reverses flex order) */
.jeep-tabs__btn--icon-before {
    flex-direction: row-reverse;
}

/* Button icon wrapper */
.jeep-tabs__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Normal icon: visible */
.jeep-tabs__btn-icon-normal {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Hover icon: ALWAYS hidden by default */
.jeep-tabs__btn-icon-hover {
    display: none !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* On button hover: swap icons */
.jeep-tabs__btn:hover .jeep-tabs__btn-icon-normal {
    display: none !important;
}
.jeep-tabs__btn:hover .jeep-tabs__btn-icon-hover {
    display: flex !important;
}

/* ── Hover-only icon mode ──
   No normal icon uploaded, only hover icon exists.
   The entire icon wrapper is hidden by default. */
.jeep-tabs__btn--hover-only-icon .jeep-tabs__btn-icon {
    display: none !important;
}
/* On hover: show wrapper + hover icon inside it */
.jeep-tabs__btn--hover-only-icon:hover .jeep-tabs__btn-icon {
    display: inline-flex !important;
}
.jeep-tabs__btn--hover-only-icon:hover .jeep-tabs__btn-icon-hover {
    display: flex !important;
}

.jeep-tabs__btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}


/* ═══ RESPONSIVE ═══ */

.jeep-tabs--mobile .jeep-tabs__nav {
    display: none !important;
}

.jeep-tabs--mobile .jeep-tabs__toggle {
    display: flex !important;
}

.jeep-tabs--mobile .jeep-tabs__content-panel {
    border-radius: 0;
    margin-bottom: 0;
}

.jeep-tabs--mobile .jeep-tabs__content-inner {
    flex-direction: column;
}

.jeep-tabs--mobile .jeep-tabs__content-image {
    flex: none;
}

/* Toggle border treatment */
.jeep-tabs--mobile .jeep-tabs__toggle:first-of-type {
    border-radius: 8px 8px 0 0;
}

.jeep-tabs--mobile .jeep-tabs__toggle + .jeep-tabs__content-panel + .jeep-tabs__toggle {
    border-top: none;
}