/* ============================================
   WDB GRADIENT TABS
   ============================================ */

/* @property for animated gradient angle */
@property --wdb-gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ---- Container ---- */
.wdb-gradient-tabs {
    --wdb-tabs-color1: #f59e0b;
    --wdb-tabs-color2: #ea580c;
    --wdb-tabs-speed: 4s;
    display: flex;
    gap: 24px;
    width: 100%;
}

/* ---- Layout Variants ---- */
.wdb-tabs-layout-vertical-left { flex-direction: row; }
.wdb-tabs-layout-vertical-right { flex-direction: row-reverse; }
.wdb-tabs-layout-horizontal-top { flex-direction: column; }
.wdb-tabs-layout-horizontal-bottom { flex-direction: column-reverse; }

/* ---- Mobile dropdown hidden on desktop ---- */
.wdb-tabs-mobile-dropdown {
    display: none;
}

/* ============================================
   NAV
   ============================================ */
.wdb-tabs-nav {
    flex-shrink: 0;
}

.wdb-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wdb-tabs-layout-horizontal-top .wdb-tabs-list,
.wdb-tabs-layout-horizontal-bottom .wdb-tabs-list {
    flex-direction: row;
    flex-wrap: wrap;
}

/* ---- Tab Button ---- */
.wdb-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    width: 100%;
    overflow: hidden;
}

.wdb-tabs-layout-horizontal-top .wdb-tab-btn,
.wdb-tabs-layout-horizontal-bottom .wdb-tab-btn {
    width: auto;
    flex: 1;
    justify-content: center;
}

.wdb-tab-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.wdb-tab-btn.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* ---- Tab Number ---- */
.wdb-tab-number {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--wdb-tabs-color1);
    flex-shrink: 0;
    min-width: 1.8em;
}

/* ---- Tab Icon ---- */
.wdb-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wdb-tab-icon i { font-size: 18px; }
.wdb-tab-icon svg { width: 18px; height: 18px; }
.wdb-tab-icon img { width: 18px; height: auto; display: block; }

/* ---- Tab Label ---- */
.wdb-tab-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   NAV EFFECTS
   ============================================ */

/* Glass Nav */
.wdb-tabs-nav-glass .wdb-tabs-nav {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 8px;
}
.wdb-tabs-nav-glass .wdb-tab-btn {
    border: 1px solid transparent;
}
.wdb-tabs-nav-glass .wdb-tab-btn.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Bordered Nav */
.wdb-tabs-nav-bordered .wdb-tabs-nav {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
}

/* Separated Nav */
.wdb-tabs-nav-separated .wdb-tab-btn {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
}
.wdb-tabs-nav-separated .wdb-tab-btn:last-child {
    border-bottom: none;
}

/* Pill Nav */
.wdb-tabs-nav-pill .wdb-tab-btn {
    border-radius: 50px;
}
.wdb-tabs-nav-pill .wdb-tab-btn.active {
    background: var(--wdb-tabs-color1);
    color: #000;
}

/* ============================================
   INDICATORS
   ============================================ */

/* Side Bar */
.wdb-tabs-indicator-side-bar .wdb-tab-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--wdb-tabs-color1), var(--wdb-tabs-color2));
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}
.wdb-tabs-indicator-side-bar .wdb-tab-btn.active::before {
    transform: scaleY(1);
}

/* Bottom Line */
.wdb-tabs-indicator-bottom-line .wdb-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--wdb-tabs-color1);
    transition: width 0.3s ease;
}
.wdb-tabs-indicator-bottom-line .wdb-tab-btn.active::after {
    width: 70%;
}

/* Background Highlight */
.wdb-tabs-indicator-background .wdb-tab-btn.active {
    background: rgba(245, 158, 11, 0.12);
}

/* Left Accent */
.wdb-tabs-indicator-left-accent .wdb-tab-btn {
    border-left: 3px solid transparent;
}
.wdb-tabs-indicator-left-accent .wdb-tab-btn.active {
    border-left-color: var(--wdb-tabs-color1);
}

/* Gradient Line */
.wdb-tabs-indicator-gradient-line .wdb-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--wdb-tabs-color1), transparent);
    transition: width 0.4s ease;
}
.wdb-tabs-indicator-gradient-line .wdb-tab-btn.active::after {
    width: 80%;
}

/* Dot */
.wdb-tabs-indicator-dot .wdb-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 6px;
    height: 6px;
    background: var(--wdb-tabs-color1);
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.wdb-tabs-indicator-dot .wdb-tab-btn.active::after {
    transform: translateX(-50%) scale(1);
}

/* Top Line */
.wdb-tabs-indicator-top-line .wdb-tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--wdb-tabs-color1);
    transition: width 0.3s ease;
}
.wdb-tabs-indicator-top-line .wdb-tab-btn.active::before {
    width: 70%;
}

/* ============================================
   PANELS
   ============================================ */
.wdb-tabs-panels {
    flex: 1;
    min-width: 0;
}

.wdb-tab-panel {
    display: none;
    border-radius: 16px;
    position: relative;
}
.wdb-tab-panel.active {
    display: block;
}

.wdb-tab-panel-inner {
    border-radius: 16px;
    padding: 40px;
    min-height: 200px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.wdb-tab-panel-inner h1,
.wdb-tab-panel-inner h2,
.wdb-tab-panel-inner h3,
.wdb-tab-panel-inner h4,
.wdb-tab-panel-inner h5,
.wdb-tab-panel-inner h6 {
    color: #fff;
    margin-bottom: 12px;
}

.wdb-tab-panel-inner p {
    margin-bottom: 16px;
}

.wdb-tab-panel-inner p:last-child {
    margin-bottom: 0;
}

/* ============================================
   PANEL BORDER STYLES
   - Uses CSS vars for border colors & width
   - panel_bg from Elementor applied to inner
   - Gradient styles use padding trick
   - Other styles use real border
   ============================================ */

/* Base: all panels inherit bg from Elementor control */
.wdb-tab-panel {
    --wdb-panel-border-w: 2px;
}

.wdb-tab-panel-inner {
    border-radius: inherit;
}

/* None — no border at all */
.wdb-tabs-border-none .wdb-tab-panel {
    padding: 0;
    border: none;
}

/* Solid */
.wdb-tabs-border-solid .wdb-tab-panel {
    border: var(--wdb-panel-border-w) solid var(--wdb-tabs-color1);
    padding: 0;
}

/* Dashed */
.wdb-tabs-border-dashed .wdb-tab-panel {
    border: var(--wdb-panel-border-w) dashed var(--wdb-tabs-color1);
    padding: 0;
}

/* Double */
.wdb-tabs-border-double .wdb-tab-panel {
    border: calc(var(--wdb-panel-border-w) * 2) double var(--wdb-tabs-color1);
    padding: 0;
}

/* Glow */
.wdb-tabs-border-glow .wdb-tab-panel {
    border: 1px solid var(--wdb-tabs-color1);
    padding: 0;
    box-shadow:
        0 0 15px rgba(245, 158, 11, 0.15),
        inset 0 0 15px rgba(245, 158, 11, 0.05);
}

/* Glass Panel */
.wdb-tabs-border-glass .wdb-tab-panel {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
}
.wdb-tabs-border-glass .wdb-tab-panel-inner {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Gradient styles: use padding trick --- */

/* Gradient Static */
.wdb-tabs-border-gradient-static .wdb-tab-panel {
    background: linear-gradient(135deg, var(--wdb-tabs-color1), var(--wdb-tabs-color2)) !important;
    padding: var(--wdb-panel-border-w);
    border: none;
}
.wdb-tabs-border-gradient-static .wdb-tab-panel-inner {
    border-radius: calc(16px - var(--wdb-panel-border-w));
}

/* Gradient Rotating — the hero effect! */
.wdb-tabs-border-gradient-rotating .wdb-tab-panel {
    background: conic-gradient(
        from var(--wdb-gradient-angle),
        var(--wdb-tabs-color1),
        var(--wdb-tabs-color2),
        var(--wdb-tabs-color1)
    ) !important;
    padding: var(--wdb-panel-border-w);
    border: none;
    animation: wdb-gradient-rotate var(--wdb-tabs-speed) linear infinite;
}
.wdb-tabs-border-gradient-rotating .wdb-tab-panel-inner {
    border-radius: calc(16px - var(--wdb-panel-border-w));
}

@keyframes wdb-gradient-rotate {
    to { --wdb-gradient-angle: 360deg; }
}

/* ============================================
   PANEL ANIMATIONS
   ============================================ */
.wdb-tabs-anim-fade .wdb-tab-panel.active {
    animation: wdb-tab-fade 0.4s ease;
}
@keyframes wdb-tab-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.wdb-tabs-anim-slide-up .wdb-tab-panel.active {
    animation: wdb-tab-slide-up 0.4s ease;
}
@keyframes wdb-tab-slide-up {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.wdb-tabs-anim-slide-left .wdb-tab-panel.active {
    animation: wdb-tab-slide-left 0.4s ease;
}
@keyframes wdb-tab-slide-left {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}

.wdb-tabs-anim-zoom .wdb-tab-panel.active {
    animation: wdb-tab-zoom 0.4s ease;
}
@keyframes wdb-tab-zoom {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.wdb-tabs-anim-slide-down .wdb-tab-panel.active {
    animation: wdb-tab-slide-down 0.4s ease;
}
@keyframes wdb-tab-slide-down {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

.wdb-tabs-anim-scale-fade .wdb-tab-panel.active {
    animation: wdb-tab-scale-fade 0.5s ease;
}
@keyframes wdb-tab-scale-fade {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.wdb-tabs-anim-flip .wdb-tab-panel.active {
    animation: wdb-tab-flip 0.5s ease;
}
@keyframes wdb-tab-flip {
    from { opacity: 0; transform: rotateX(-10deg); }
    to { opacity: 1; transform: rotateX(0); }
}

/* ============================================
   MOBILE DROPDOWN
   ============================================ */
.wdb-tabs-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}
.wdb-tabs-dropdown-trigger:hover,
.wdb-tabs-dropdown-trigger[aria-expanded="true"] {
    border-color: var(--wdb-tabs-color1);
}

.wdb-dropdown-current {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wdb-dropdown-arrow {
    display: inline-flex;
    transition: transform 0.3s ease;
}
.wdb-tabs-dropdown-trigger[aria-expanded="true"] .wdb-dropdown-arrow {
    transform: rotate(180deg);
}

.wdb-tabs-dropdown-list {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    margin-top: 6px;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    max-height: 280px;
    overflow-y: auto;
}
.wdb-tabs-dropdown-list.open {
    display: flex;
}

.wdb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: left;
    width: 100%;
}
.wdb-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.wdb-dropdown-item.active {
    color: var(--wdb-tabs-color1);
    background: rgba(245, 158, 11, 0.08);
}
.wdb-dropdown-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 3px;
    background: var(--wdb-tabs-color1);
    border-radius: 2px;
}

.wdb-dropdown-item .wdb-tab-number {
    font-size: 0.9em;
    min-width: 1.5em;
}
.wdb-dropdown-item .wdb-tab-icon i { font-size: 16px; }
.wdb-dropdown-item .wdb-tab-icon svg { width: 16px; height: 16px; }
.wdb-dropdown-item .wdb-tab-icon img { width: 16px; height: auto; }

/* ---- Dropdown Styles ---- */

/* Glass Dropdown */
.wdb-tabs-dd-glass .wdb-tabs-dropdown-trigger {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.wdb-tabs-dd-glass .wdb-tabs-dropdown-list {
    background: rgba(26, 26, 46, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Gradient Dropdown */
.wdb-tabs-dd-gradient .wdb-tabs-dropdown-trigger {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 88, 12, 0.1));
    border-color: rgba(245, 158, 11, 0.2);
}

/* Minimal Dropdown */
.wdb-tabs-dd-minimal .wdb-tabs-dropdown-trigger {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}
.wdb-tabs-dd-minimal .wdb-tabs-dropdown-list {
    border-radius: 8px;
}

/* ============================================
   RESPONSIVE — Mobile switches to dropdown
   ============================================ */
@media (max-width: 767px) {
    .wdb-gradient-tabs {
        flex-direction: column !important;
        gap: 16px;
    }

    .wdb-tabs-nav {
        display: none !important;
    }

    .wdb-tabs-mobile-dropdown {
        display: block;
    }

    /* Dropdown below: reorder */
    .wdb-tabs-dropdown-below .wdb-tabs-mobile-dropdown {
        order: 2;
    }
    .wdb-tabs-dropdown-below .wdb-tabs-panels {
        order: 1;
    }

    .wdb-tab-panel-inner {
        padding: 24px 20px;
    }

    /* Smaller border for mobile */
    .wdb-tabs-border-gradient-rotating .wdb-tab-panel,
    .wdb-tabs-border-gradient-static .wdb-tab-panel {
        --wdb-panel-border-w: 1px;
    }
}