/*
 * ============================================================
 * BISDIG UJB — BUTTON SYSTEM
 * FASE 2.2 — JANABADRA DIGITAL
 *
 * PRIMARY  : Janabadra Red
 * SECONDARY: Burgundy
 * DEPTH    : Wine / Charcoal
 * ACCENT   : Champagne Gold
 *
 * RESPONSIVE:
 *   320px → 2560px+
 *   mouse / touch / keyboard
 *
 * PREFIX:
 *   --bisdig-*
 *
 * Compatibility:
 *   .btn-* classes tetap dipertahankan karena kemungkinan
 *   sudah dipakai template PHP / sections lama.
 * ============================================================
 */


/* ============================================================
   1. BUTTON TOKENS
   ============================================================ */

:root {

    --bisdig-btn-height:
        46px;

    --bisdig-btn-height-sm:
        40px;

    --bisdig-btn-height-lg:
        52px;

    --bisdig-btn-radius:
        0.75rem;

    --bisdig-btn-radius-sm:
        0.625rem;

    --bisdig-btn-padding-x:
        1.25rem;

    --bisdig-btn-padding-x-lg:
        1.5rem;

    --bisdig-btn-gap:
        0.5rem;

    --bisdig-btn-font-size:
        0.875rem;

    --bisdig-btn-font-weight:
        700;

    --bisdig-btn-transition:
        background-color var(--bisdig-transition-fast),
        border-color var(--bisdig-transition-fast),
        color var(--bisdig-transition-fast),
        box-shadow var(--bisdig-transition-fast),
        transform var(--bisdig-transition-fast),
        opacity var(--bisdig-transition-fast);

    --bisdig-btn-focus:
        0 0 0 3px rgba(var(--color-red-rgb), 0.22);

    --bisdig-btn-focus-offset:
        2px;
}


/* ============================================================
   2. BASE BUTTON
   ============================================================ */

.btn,
.bisdig-btn {

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--bisdig-btn-gap);

    width: auto;
    max-width: 100%;
    min-width: 0;

    min-height: var(--bisdig-btn-height);

    padding:
        0.7rem
        var(--bisdig-btn-padding-x);

    border:
        1px solid transparent;

    border-radius:
        var(--bisdig-btn-radius);

    font-family:
        var(--bisdig-font-sans);

    font-size:
        var(--bisdig-btn-font-size);

    font-weight:
        var(--bisdig-btn-font-weight);

    line-height:
        1.25;

    text-align: center;
    text-decoration: none;

    white-space: normal;
    overflow-wrap: anywhere;

    vertical-align: middle;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    user-select: none;
    -webkit-user-select: none;

    touch-action: manipulation;

    transition:
        var(--bisdig-btn-transition);

    -webkit-tap-highlight-color:
        transparent;
}


/* Prevent icon/image from becoming oversized */

.btn > svg,
.btn > img,
.btn > i,
.bisdig-btn > svg,
.bisdig-btn > img,
.bisdig-btn > i {

    flex: 0 0 auto;

    width: 1.1em;
    height: 1.1em;

    max-width: 1.25rem;
    max-height: 1.25rem;
}


/* Icon-only button */

.btn-icon,
.bisdig-btn-icon {

    width:
        var(--bisdig-btn-height);

    min-width:
        var(--bisdig-btn-height);

    padding: 0;

    flex: 0 0 auto;
}


/* ============================================================
   3. PRIMARY — JANABADRA RED
   ============================================================ */

.btn-primary,
.bisdig-btn-primary {

    background:
        var(--color-red);

    color:
        var(--color-white);

    border-color:
        var(--color-red);

    box-shadow:
        var(--bisdig-shadow-red);
}

.btn-primary:hover,
.bisdig-btn-primary:hover {

    background:
        var(--color-red-dark);

    color:
        var(--color-white);

    border-color:
        var(--color-red-dark);

    transform:
        translateY(-2px);

    box-shadow:
        var(--bisdig-shadow-red-strong);
}


/* ============================================================
   4. PRIMARY LIGHT
   ============================================================ */

.btn-primary-light,
.bisdig-btn-primary-light {

    background:
        var(--color-red-light);

    color:
        var(--color-white);

    border-color:
        var(--color-red-light);

    box-shadow:
        0 8px 22px
        rgba(var(--color-red-rgb), 0.16);
}

.btn-primary-light:hover,
.bisdig-btn-primary-light:hover {

    background:
        var(--color-red);

    color:
        var(--color-white);

    border-color:
        var(--color-red);

    transform:
        translateY(-2px);

    box-shadow:
        var(--bisdig-shadow-red);
}


/* ============================================================
   5. SECONDARY — BURGUNDY
   ============================================================ */

.btn-secondary,
.bisdig-btn-secondary {

    background:
        var(--color-burgundy);

    color:
        var(--color-white);

    border-color:
        var(--color-burgundy);

    box-shadow:
        0 8px 24px
        rgba(var(--color-wine-rgb), 0.16);
}

.btn-secondary:hover,
.bisdig-btn-secondary:hover {

    background:
        var(--color-burgundy-dark);

    color:
        var(--color-white);

    border-color:
        var(--color-burgundy-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(var(--color-wine-rgb), 0.22);
}


/* ============================================================
   6. OUTLINE
   ============================================================ */

.btn-outline,
.bisdig-btn-outline {

    background:
        var(--color-white);

    color:
        var(--color-text-soft);

    border:
        1px solid
        var(--color-border);

    box-shadow:
        none;
}

.btn-outline:hover,
.bisdig-btn-outline:hover {

    background:
        var(--color-red-pale);

    color:
        var(--color-red);

    border-color:
        var(--color-red);

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 20px
        rgba(var(--color-red-rgb), 0.08);
}


/* ============================================================
   7. OUTLINE RED
   ============================================================ */

.btn-outline-red,
.bisdig-btn-outline-red {

    background:
        transparent;

    color:
        var(--color-red);

    border:
        1px solid
        var(--color-red);
}

.btn-outline-red:hover,
.bisdig-btn-outline-red:hover {

    background:
        var(--color-red);

    color:
        var(--color-white);

    border-color:
        var(--color-red);

    transform:
        translateY(-1px);

    box-shadow:
        var(--bisdig-shadow-red);
}


/* ============================================================
   8. OUTLINE BURGUNDY
   ============================================================ */

.btn-outline-burgundy,
.bisdig-btn-outline-burgundy {

    background:
        transparent;

    color:
        var(--color-burgundy);

    border:
        1px solid
        var(--color-burgundy);
}

.btn-outline-burgundy:hover,
.bisdig-btn-outline-burgundy:hover {

    background:
        var(--color-burgundy);

    color:
        var(--color-white);

    border-color:
        var(--color-burgundy);

    transform:
        translateY(-1px);
}


/* ============================================================
   9. GOLD — PREMIUM ACCENT
   ============================================================ */

.btn-gold,
.bisdig-btn-gold {

    background:
        var(--color-gold);

    color:
        var(--color-charcoal-dark);

    border-color:
        var(--color-gold);

    box-shadow:
        var(--bisdig-shadow-gold);
}

.btn-gold:hover,
.bisdig-btn-gold:hover {

    background:
        var(--color-gold-dark);

    color:
        var(--color-white);

    border-color:
        var(--color-gold-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px
        rgba(var(--color-gold-rgb), 0.22);
}


/* ============================================================
   10. GOLD OUTLINE
   ============================================================ */

.btn-outline-gold,
.bisdig-btn-outline-gold {

    background:
        transparent;

    color:
        var(--color-gold-dark);

    border:
        1px solid
        var(--color-gold);
}

.btn-outline-gold:hover,
.bisdig-btn-outline-gold:hover {

    background:
        var(--color-gold);

    color:
        var(--color-charcoal-dark);

    border-color:
        var(--color-gold);
}


/* ============================================================
   11. GHOST
   ============================================================ */

.btn-ghost,
.bisdig-btn-ghost {

    background:
        transparent;

    color:
        var(--color-red);

    border-color:
        transparent;

    box-shadow:
        none;
}

.btn-ghost:hover,
.bisdig-btn-ghost:hover {

    background:
        var(--color-red-pale);

    color:
        var(--color-red-dark);

    border-color:
        var(--color-border-red);
}


/* ============================================================
   12. DARK
   ============================================================ */

.btn-dark,
.bisdig-btn-dark {

    background:
        var(--color-charcoal-dark);

    color:
        var(--color-white);

    border-color:
        var(--color-charcoal-dark);
}

.btn-dark:hover,
.bisdig-btn-dark:hover {

    background:
        var(--color-wine);

    color:
        var(--color-white);

    border-color:
        var(--color-wine);

    transform:
        translateY(-2px);

    box-shadow:
        var(--bisdig-shadow-xl);
}


/* ============================================================
   13. WINE / PREMIUM DARK
   ============================================================ */

.btn-wine,
.bisdig-btn-wine {

    background:
        var(--color-wine);

    color:
        var(--color-white);

    border-color:
        var(--color-wine);
}

.btn-wine:hover,
.bisdig-btn-wine:hover {

    background:
        var(--color-wine-dark);

    color:
        var(--color-white);

    border-color:
        var(--color-wine-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px
        rgba(var(--color-wine-rgb), 0.24);
}


/* ============================================================
   14. LIGHT
   ============================================================ */

.btn-light,
.bisdig-btn-light {

    background:
        var(--color-white);

    color:
        var(--color-charcoal-dark);

    border-color:
        var(--color-border);
}

.btn-light:hover,
.bisdig-btn-light:hover {

    background:
        var(--color-ivory);

    border-color:
        var(--color-border-dark);

    transform:
        translateY(-1px);

    box-shadow:
        var(--bisdig-shadow-md);
}


/* ============================================================
   15. LINK BUTTON
   ============================================================ */

.btn-link,
.bisdig-btn-link {

    min-height:
        auto;

    padding:
        0.25rem 0;

    background:
        transparent;

    color:
        var(--color-red);

    border-color:
        transparent;

    border-radius:
        0;

    box-shadow:
        none;
}

.btn-link:hover,
.bisdig-btn-link:hover {

    color:
        var(--color-red-dark);

    text-decoration:
        underline;

    text-underline-offset:
        3px;

    transform:
        none;
}


/* ============================================================
   16. SIZE — SMALL
   ============================================================ */

.btn-sm,
.bisdig-btn-sm {

    min-height:
        var(--bisdig-btn-height-sm);

    padding:
        0.5rem
        0.875rem;

    border-radius:
        var(--bisdig-btn-radius-sm);

    font-size:
        0.8125rem;
}


/* ============================================================
   17. SIZE — LARGE
   ============================================================ */

.btn-lg,
.bisdig-btn-lg {

    min-height:
        var(--bisdig-btn-height-lg);

    padding:
        0.8rem
        var(--bisdig-btn-padding-x-lg);

    border-radius:
        0.875rem;

    font-size:
        0.9375rem;
}


/* ============================================================
   18. FULL WIDTH
   ============================================================ */

.btn-block,
.bisdig-btn-block {

    display:
        flex;

    width:
        100%;

    max-width:
        100%;
}


/* ============================================================
   19. BUTTON GROUP
   ============================================================ */

.btn-group,
.bisdig-btn-group {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

    max-width:
        100%;
}


/* ============================================================
   20. BUTTON GROUP — STACK MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .btn-group-stack-mobile,
    .bisdig-btn-group-stack-mobile {

        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr);

        width:
            100%;
    }

    .btn-group-stack-mobile > .btn,
    .btn-group-stack-mobile > a.btn,
    .btn-group-stack-mobile > button.btn,
    .bisdig-btn-group-stack-mobile > .bisdig-btn {

        width:
            100%;
    }
}


/* ============================================================
   21. BUTTON WITH LOADING STATE
   ============================================================ */

.btn.is-loading,
.bisdig-btn.is-loading {

    position:
        relative;

    color:
        transparent !important;

    pointer-events:
        none;
}

.btn.is-loading::after,
.bisdig-btn.is-loading::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        1rem;

    height:
        1rem;

    margin:
        -0.5rem;

    border:
        2px solid
        currentColor;

    border-right-color:
        transparent;

    border-radius:
        50%;

    animation:
        bisdig-button-spin 0.7s linear infinite;
}

@keyframes bisdig-button-spin {

    to {
        transform:
            rotate(360deg);
    }
}


/* ============================================================
   22. KEYBOARD FOCUS
   ============================================================ */

.btn:focus-visible,
.bisdig-btn:focus-visible {

    outline:
        3px solid
        rgba(var(--color-red-rgb), 0.28);

    outline-offset:
        var(--bisdig-btn-focus-offset);

    box-shadow:
        var(--bisdig-btn-focus),
        var(--bisdig-shadow-md);
}


/* ============================================================
   23. DISABLED
   ============================================================ */

.btn:disabled,
.btn[disabled],
.btn.is-disabled,
.bisdig-btn:disabled,
.bisdig-btn[disabled],
.bisdig-btn.is-disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

    pointer-events:
        none;

    transform:
        none !important;

    box-shadow:
        none !important;
}


/* ============================================================
   24. TOUCH DEVICE
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    .btn,
    .bisdig-btn {

        /*
         * Tap target tetap nyaman.
         */
        min-height:
            max(
                var(--bisdig-btn-height),
                44px
            );
    }

    /*
     * Hindari animasi hover yang hanya berguna untuk mouse.
     */
    .btn:hover,
    .bisdig-btn:hover {

        transform:
            none;
    }
}


/* ============================================================
   25. MOBILE — <= 600px
   ============================================================ */

@media (max-width: 600px) {

    .btn,
    .bisdig-btn {

        min-height:
            46px;

        padding:
            0.7rem
            1rem;

        font-size:
            0.8125rem;

        border-radius:
            0.7rem;
    }

    .btn-lg,
    .bisdig-btn-lg {

        min-height:
            48px;

        padding:
            0.75rem
            1.125rem;

        font-size:
            0.875rem;
    }

    .btn-group,
    .bisdig-btn-group {

        gap:
            0.625rem;
    }
}


/* ============================================================
   26. SMALL MOBILE — <= 400px
   ============================================================ */

@media (max-width: 400px) {

    .btn,
    .bisdig-btn {

        min-height:
            44px;

        padding-inline:
            0.875rem;

        font-size:
            0.8rem;
    }

    .btn-group,
    .bisdig-btn-group {

        gap:
            0.5rem;
    }
}


/* ============================================================
   27. VERY SMALL MOBILE — <= 360px
   ============================================================ */

@media (max-width: 360px) {

    .btn,
    .bisdig-btn {

        width:
            100%;

        max-width:
            100%;
    }

    /*
     * Icon-only buttons remain square.
     */
    .btn.btn-icon,
    .bisdig-btn.bisdig-btn-icon {

        width:
            44px;

        min-width:
            44px;

        max-width:
            44px;
    }

    .btn-group,
    .bisdig-btn-group {

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr);
    }

    .btn-group > .btn,
    .bisdig-btn-group > .bisdig-btn {

        width:
            100%;
    }
}


/* ============================================================
   28. REDUCED MOTION
   ============================================================ */

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

    .btn,
    .bisdig-btn {

        transition:
            none;
    }

    .btn:hover,
    .bisdig-btn:hover {

        transform:
            none;
    }

    .btn.is-loading::after,
    .bisdig-btn.is-loading::after {

        animation:
            none;
    }
}


/* ============================================================
   29. FORCED COLORS / HIGH CONTRAST
   ============================================================ */

@media (forced-colors: active) {

    .btn,
    .bisdig-btn {

        border:
            1px solid ButtonText;
    }

    .btn:focus-visible,
    .bisdig-btn:focus-visible {

        outline:
            2px solid Highlight;
    }
}


/* ============================================================
   30. LEGACY SAFETY
   ============================================================ */

/*
 * Primary button selalu mengikuti master Janabadra Red,
 * meskipun selector lain sebelumnya memberikan warna lama.
 */

.btn-primary,
a.btn-primary,
button.btn-primary,
.bisdig-btn-primary,
a.bisdig-btn-primary,
button.bisdig-btn-primary {

    background-color:
        var(--bisdig-brand-primary);

    border-color:
        var(--bisdig-brand-primary);

    color:
        var(--bisdig-white);
}


.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.bisdig-btn-primary:hover,
a.bisdig-btn-primary:hover,
button.bisdig-btn-primary:hover {

    background-color:
        var(--bisdig-brand-primary-hover);

    border-color:
        var(--bisdig-brand-primary-hover);

    color:
        var(--bisdig-white);
}


/* ============================================================
   31. SAFE TEXT / ICON ALIGNMENT
   ============================================================ */

.btn > span,
.bisdig-btn > span {

    min-width:
        0;

    max-width:
        100%;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   32. SAFE SVG
   ============================================================ */

.btn svg,
.bisdig-btn svg {

    flex:
        0 0 auto;

    stroke:
        currentColor;
}


/* ============================================================
   END
   ============================================================ */