/* ==========================================================
   WPTABS
   Standalone WordPress tabs module
   Dark theme is the default theme.
   ========================================================== */


/* ==========================================================
   MODULE VARIABLES

   Variables are attached to the tabs wrapper instead of :root.
   This prevents WPTabs variables from affecting other plugins.
   ========================================================== */

.wptabs-display-tabs {
    --wptabs-background: #151821;
    --wptabs-background-soft: #1b1f2a;
    --wptabs-background-hover: #242a36;
    --wptabs-background-active: #222b38;

    --wptabs-border: #333946;
    --wptabs-border-soft: #2a303b;

    --wptabs-primary: #4a9eff;
    --wptabs-primary-hover: #69adff;
    --wptabs-primary-soft: rgba( 74, 158, 255, 0.12 );

    --wptabs-text: #e6e8ec;
    --wptabs-text-muted: #a6acb7;
    --wptabs-text-disabled: #686f7b;

    --wptabs-focus-ring: rgba( 74, 158, 255, 0.35 );
    --wptabs-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );

    --wptabs-radius: 10px;
    --wptabs-radius-small: 7px;

    --wptabs-transition-speed: 0.25s;
    --wptabs-transition: var( --wptabs-transition-speed ) ease;

    position: relative;
    width: 100%;
    margin: 20px 0;
    padding: 20px;
    background: var( --wptabs-background );
    border: 1px solid var( --wptabs-border );
    border-radius: var( --wptabs-radius );
    box-shadow: var( --wptabs-shadow );
    color: var( --wptabs-text );
}


/* ==========================================================
   SCOPED BOX SIZING

   This applies only inside a WPTabs instance.
   It does not affect WordPress or other plugins.
   ========================================================== */

.wptabs-display-tabs,
.wptabs-display-tabs *,
.wptabs-display-tabs *::before,
.wptabs-display-tabs *::after {
    box-sizing: border-box;
}


/* ==========================================================
   HIDDEN CURRENT TAB FIELD
   ========================================================== */

.wptabs-display-tabs > .wptabs-current-tab {
    display: none !important;
}


/* ==========================================================
   TABS HEADER
   ========================================================== */

.wptabs-display-tabs > .wptabs-display-tabs-header {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 16px 16px 0;
    background: var( --wptabs-background-soft );
    border: 1px solid var( --wptabs-border );
    border-bottom: 2px solid var( --wptabs-border );
    border-radius: var( --wptabs-radius-small ) var( --wptabs-radius-small ) 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var( --wptabs-border ) var( --wptabs-background-soft );
    -webkit-overflow-scrolling: touch;
}


/* WebKit scrollbar */

.wptabs-display-tabs > .wptabs-display-tabs-header::-webkit-scrollbar {
    height: 5px;
}

.wptabs-display-tabs > .wptabs-display-tabs-header::-webkit-scrollbar-track {
    background: var( --wptabs-background-soft );
}

.wptabs-display-tabs > .wptabs-display-tabs-header::-webkit-scrollbar-thumb {
    background: var( --wptabs-border );
    border-radius: 5px;
}

.wptabs-display-tabs > .wptabs-display-tabs-header::-webkit-scrollbar-thumb:hover {
    background: var( --wptabs-text-disabled );
}


/* ==========================================================
   TAB BUTTONS
   ========================================================== */

.wptabs-display-tabs .wptabs-display-tab-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 8px;
    min-height: 48px;
    margin: 0 0 -2px;
    padding: 13px 24px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
    color: var( --wptabs-text-muted );
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var( --wptabs-transition ),
        border-color var( --wptabs-transition ),
        color var( --wptabs-transition ),
        box-shadow var( --wptabs-transition );
}

.wptabs-display-tabs .wptabs-display-tab-button:hover {
    background: var( --wptabs-background-hover );
    color: var( --wptabs-text );
}

.wptabs-display-tabs .wptabs-display-tab-button:focus {
    outline: none;
}

.wptabs-display-tabs .wptabs-display-tab-button:focus-visible {
    background: var( --wptabs-background-hover );
    color: var( --wptabs-text );
    box-shadow: 0 0 0 3px var( --wptabs-focus-ring );
}

.wptabs-display-tabs .wptabs-display-tab-button.active,
.wptabs-display-tabs .wptabs-display-tab-button[aria-selected="true"] {
    background: var( --wptabs-background-active );
    border-color: var( --wptabs-border );
    border-bottom-color: var( --wptabs-primary );
    color: var( --wptabs-primary );
}

.wptabs-display-tabs .wptabs-display-tab-button.active:hover,
.wptabs-display-tabs .wptabs-display-tab-button[aria-selected="true"]:hover {
    background: var( --wptabs-background-active );
    color: var( --wptabs-primary-hover );
}

.wptabs-display-tabs .wptabs-display-tab-button:disabled,
.wptabs-display-tabs .wptabs-display-tab-button[aria-disabled="true"] {
    background: transparent;
    color: var( --wptabs-text-disabled );
    cursor: not-allowed;
    opacity: 0.65;
}


/* ==========================================================
   TAB ICON AND LABEL
   ========================================================== */

.wptabs-display-tabs .wptabs-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: currentColor;
    font-size: 16px;
    line-height: 1;
}

.wptabs-display-tabs .wptabs-tab-icon i {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.wptabs-display-tabs .wptabs-tab-label {
    display: inline-block;
    color: inherit;
    line-height: inherit;
}


/* ==========================================================
   TABS BODY
   ========================================================== */

.wptabs-display-tabs > .wptabs-display-tabs-body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 24px 20px 20px;
    background: var( --wptabs-background );
    border: 1px solid var( --wptabs-border );
    border-top: none;
    border-radius: 0 0 var( --wptabs-radius-small ) var( --wptabs-radius-small );
    color: var( --wptabs-text );
}


/* ==========================================================
   TAB CONTENT
   ========================================================== */

.wptabs-display-tabs .wptabs-display-tab-content {
    display: none;
    width: 100%;
    margin: 0;
    padding: 15px;
    color: inherit;
}

.wptabs-display-tabs .wptabs-display-tab-content.active,
.wptabs-display-tabs .wptabs-display-tab-content:not([hidden]) {
    display: block;
    animation: wptabsFadeIn 0.3s ease;
}

.wptabs-display-tabs .wptabs-display-tab-content[hidden] {
    display: none !important;
}


/* Prevent default element margins from escaping the tab panel */

.wptabs-display-tabs .wptabs-display-tab-content > :first-child {
    margin-top: 0;
}

.wptabs-display-tabs .wptabs-display-tab-content > :last-child {
    margin-bottom: 0;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

.wptabs-display-tabs .wptabs-placeholder {
    width: 100%;
    padding: 28px 24px;
    background: var( --wptabs-background-soft );
    border: 1px dashed var( --wptabs-border );
    border-radius: var( --wptabs-radius-small );
    color: var( --wptabs-text-muted );
    text-align: center;
}

.wptabs-display-tabs .wptabs-placeholder-title {
    margin: 0 0 8px;
    color: var( --wptabs-text );
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.wptabs-display-tabs .wptabs-placeholder-message {
    margin: 0;
    color: var( --wptabs-text-muted );
    font-size: 14px;
    line-height: 1.6;
}

.wptabs-display-tabs .wptabs-placeholder-message a {
    color: var( --wptabs-primary );
    text-decoration: none;
}

.wptabs-display-tabs .wptabs-placeholder-message a:hover {
    color: var( --wptabs-primary-hover );
    text-decoration: underline;
}


/* ==========================================================
   OPTIONAL BADGES

   A badge can later be placed inside a tab button:
   <span class="wptabs-tab-badge">4</span>
   ========================================================== */

.wptabs-display-tabs .wptabs-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var( --wptabs-primary-soft );
    border: 1px solid rgba( 74, 158, 255, 0.25 );
    border-radius: 10px;
    color: var( --wptabs-primary );
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}


/* ==========================================================
   LOADING STATE

   JavaScript or another module can add:
   .wptabs-is-loading
   ========================================================== */

.wptabs-display-tabs.wptabs-is-loading > .wptabs-display-tabs-body {
    min-height: 100px;
    pointer-events: none;
    opacity: 0.65;
}

.wptabs-display-tabs.wptabs-is-loading > .wptabs-display-tabs-body::after {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 18px;
    height: 18px;
    border: 2px solid var( --wptabs-border );
    border-top-color: var( --wptabs-primary );
    border-radius: 50%;
    content: "";
    animation: wptabsSpin 0.75s linear infinite;
}


/* ==========================================================
   CUSTOM THEME SUPPORT

   Add class "wptabs-light-theme" through the PHP class argument.
   Dark theme remains the default.
   ========================================================== */

.wptabs-display-tabs.wptabs-light-theme {
    --wptabs-background: #ffffff;
    --wptabs-background-soft: #f5f7fa;
    --wptabs-background-hover: #e9eef5;
    --wptabs-background-active: #edf5ff;

    --wptabs-border: #d4dae3;
    --wptabs-border-soft: #e2e6ec;

    --wptabs-primary: #2271b1;
    --wptabs-primary-hover: #135e96;
    --wptabs-primary-soft: rgba( 34, 113, 177, 0.1 );

    --wptabs-text: #1d2327;
    --wptabs-text-muted: #50575e;
    --wptabs-text-disabled: #8c8f94;

    --wptabs-focus-ring: rgba( 34, 113, 177, 0.3 );
    --wptabs-shadow: 0 8px 24px rgba( 0, 0, 0, 0.08 );
}


/* ==========================================================
   COMPACT MODE

   Add class "wptabs-compact" through the PHP class argument.
   ========================================================== */

.wptabs-display-tabs.wptabs-compact {
    padding: 12px;
}

.wptabs-display-tabs.wptabs-compact > .wptabs-display-tabs-header {
    padding: 10px 10px 0;
}

.wptabs-display-tabs.wptabs-compact .wptabs-display-tab-button {
    min-height: 40px;
    padding: 10px 17px;
    font-size: 13px;
}

.wptabs-display-tabs.wptabs-compact > .wptabs-display-tabs-body {
    padding: 16px 12px 12px;
}

.wptabs-display-tabs.wptabs-compact .wptabs-display-tab-content {
    padding: 10px;
}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes wptabsFadeIn {

    from {
        opacity: 0;
        transform: translateY( 6px );
    }

    to {
        opacity: 1;
        transform: translateY( 0 );
    }

}

@keyframes wptabsSpin {

    from {
        transform: rotate( 0deg );
    }

    to {
        transform: rotate( 360deg );
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media ( prefers-reduced-motion: reduce ) {

    .wptabs-display-tabs .wptabs-display-tab-button {
        transition: none;
    }

    .wptabs-display-tabs .wptabs-display-tab-content.active,
    .wptabs-display-tabs .wptabs-display-tab-content:not([hidden]) {
        animation: none;
    }

    .wptabs-display-tabs.wptabs-is-loading > .wptabs-display-tabs-body::after {
        animation-duration: 1.5s;
    }

}


/* ==========================================================
   TABLET AND MOBILE
   ========================================================== */

@media ( max-width: 768px ) {

    .wptabs-display-tabs {
        margin: 14px 0;
        padding: 12px;
        border-radius: 8px;
    }

    .wptabs-display-tabs > .wptabs-display-tabs-header {
        gap: 2px;
        padding: 12px 12px 0;
    }

    .wptabs-display-tabs .wptabs-display-tab-button {
        min-height: 42px;
        padding: 10px 17px;
        font-size: 13px;
    }

    .wptabs-display-tabs .wptabs-tab-icon {
        width: 16px;
        height: 16px;
        font-size: 14px;
    }

    .wptabs-display-tabs > .wptabs-display-tabs-body {
        padding: 16px 12px 12px;
    }

    .wptabs-display-tabs .wptabs-display-tab-content {
        padding: 10px;
    }

    .wptabs-display-tabs .wptabs-placeholder {
        padding: 22px 16px;
    }

}


/* ==========================================================
   SMALL MOBILE DEVICES
   ========================================================== */

@media ( max-width: 480px ) {

    .wptabs-display-tabs {
        padding: 8px;
    }

    .wptabs-display-tabs > .wptabs-display-tabs-header {
        padding: 8px 8px 0;
    }

    .wptabs-display-tabs .wptabs-display-tab-button {
        gap: 6px;
        min-height: 40px;
        padding: 9px 14px;
        font-size: 12px;
    }

    .wptabs-display-tabs > .wptabs-display-tabs-body {
        padding: 12px 8px 8px;
    }

    .wptabs-display-tabs .wptabs-display-tab-content {
        padding: 8px;
    }

}