/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01D
   Glass Foundation
   File: /opt/simplpay/static/css/003-glass.css
   ========================================================== */

/* ==========================================================
   Core Glass Surface
   ========================================================== */

.sp-glass {
    position: relative;
    overflow: hidden;

    color:
        var(--sp-text-primary);

    background:
        var(--sp-glass-bg);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-md);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        )
        saturate(135%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        )
        saturate(135%);

    transform:
        translateZ(0);

    isolation:
        isolate;
}


.sp-glass::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.30
            ),
            rgba(
                255,
                255,
                255,
                0
            )
        );

    opacity:
        0.72;
}


.sp-glass > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   Glass Strength
   ========================================================== */

.sp-glass-soft {
    background:
        var(--sp-glass-bg-soft);

    border-color:
        var(--sp-glass-border-soft);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-md)
        )
        saturate(125%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-md)
        )
        saturate(125%);
}


.sp-glass-strong {
    background:
        var(--sp-glass-bg-strong);

    border-color:
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-lg);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(145%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(145%);
}


/* ==========================================================
   Reusable Glass Card
   ========================================================== */

.sp-card {
    position: relative;

    padding:
        var(--sp-space-5);

    border-radius:
        var(--sp-radius-xl);

    color:
        var(--sp-text-primary);

    background:
        var(--sp-glass-bg);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-md);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        )
        saturate(135%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        )
        saturate(135%);

    transition:
        transform
        var(--sp-transition-spring),
        box-shadow
        var(--sp-transition-normal),
        border-color
        var(--sp-transition-fast);

    transform:
        translateZ(0);
}


.sp-card:hover {
    transform:
        translateY(
            var(--sp-hover-lift)
        )
        translateZ(0);

    box-shadow:
        var(--sp-shadow-lg);

    border-color:
        rgba(
            255,
            255,
            255,
            0.72
        );
}


.sp-card:active {
    transform:
        scale(
            var(--sp-active-scale)
        );
}


/* ==========================================================
   Card Variants
   ========================================================== */

.sp-card-sm {
    padding:
        var(--sp-space-4);

    border-radius:
        var(--sp-radius-lg);
}


.sp-card-lg {
    padding:
        var(--sp-space-6);

    border-radius:
        var(--sp-radius-2xl);
}


.sp-card-xl {
    padding:
        var(--sp-space-8);

    border-radius:
        var(--sp-radius-3xl);
}


/* ==========================================================
   Glass Panel
   ========================================================== */

.sp-panel {
    position: relative;

    padding:
        var(--sp-space-6);

    border-radius:
        var(--sp-radius-2xl);

    background:
        var(--sp-glass-bg-strong);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-lg);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(145%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(145%);
}


/* ==========================================================
   Glass Input
   ========================================================== */

.sp-input {
    width: 100%;
    min-height:
        var(--sp-control-height-md);

    padding:
        0
        var(--sp-space-4);

    border-radius:
        var(--sp-radius-md);

    color:
        var(--sp-text-primary);

    background:
        var(--sp-input-bg);

    border:
        1px solid
        var(--sp-input-border);

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.26
        );

    backdrop-filter:
        blur(
            var(--sp-glass-blur-sm)
        );

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-sm)
        );

    transition:
        border-color
        var(--sp-transition-fast),
        box-shadow
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast);
}


.sp-input::placeholder {
    color:
        var(--sp-text-muted);
}


.sp-input:hover {
    border-color:
        var(--sp-border-strong);
}


.sp-input:focus {
    border-color:
        var(--sp-primary-400);

    box-shadow:
        var(--sp-focus-ring);
}


/* ==========================================================
   Glass Textarea
   ========================================================== */

textarea.sp-input {
    min-height:
        110px;

    padding-top:
        var(--sp-space-3);

    padding-bottom:
        var(--sp-space-3);

    resize:
        vertical;
}


/* ==========================================================
   Glass Select
   ========================================================== */

.sp-select {
    width: 100%;

    min-height:
        var(--sp-control-height-md);

    padding:
        0
        var(--sp-space-4);

    border-radius:
        var(--sp-radius-md);

    color:
        var(--sp-text-primary);

    background:
        var(--sp-input-bg);

    border:
        1px solid
        var(--sp-input-border);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-sm)
        );

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-sm)
        );
}


/* ==========================================================
   Glass Button
   ========================================================== */

.sp-button {
    position: relative;

    min-height:
        var(--sp-control-height-md);

    padding:
        0
        var(--sp-space-5);

    border-radius:
        var(--sp-radius-md);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--sp-space-2);

    overflow:
        hidden;

    font-weight:
        var(--sp-weight-extrabold);

    color:
        var(--sp-text-primary);

    background:
        var(--sp-glass-bg);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-sm);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-md)
        )
        saturate(135%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-md)
        )
        saturate(135%);

    transition:
        transform
        var(--sp-transition-spring),
        box-shadow
        var(--sp-transition-normal),
        border-color
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast);
}


.sp-button::before {
    content: "";

    position: absolute;

    inset:
        1px
        1px
        auto
        1px;

    height:
        45%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            to bottom,
            rgba(
                255,
                255,
                255,
                0.34
            ),
            rgba(
                255,
                255,
                255,
                0
            )
        );

    pointer-events:
        none;
}


.sp-button:hover {
    transform:
        translateY(-1px);

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


.sp-button:active {
    transform:
        scale(
            var(--sp-active-scale)
        );
}


/* ==========================================================
   Primary Glass Button
   ========================================================== */

.sp-button-primary {
    color:
        var(--sp-white);

    background:
        var(--sp-gradient-primary);

    border-color:
        rgba(
            255,
            255,
            255,
            0.24
        );

    box-shadow:
        var(--sp-shadow-glow-primary);
}


.sp-button-primary:hover {
    box-shadow:
        0
        18px
        46px
        rgba(
            79,
            70,
            229,
            0.30
        );
}


/* ==========================================================
   Success Button
   ========================================================== */

.sp-button-success {
    color:
        var(--sp-white);

    background:
        var(--sp-gradient-success);

    border-color:
        rgba(
            255,
            255,
            255,
            0.20
        );
}


/* ==========================================================
   Danger Button
   ========================================================== */

.sp-button-danger {
    color:
        var(--sp-white);

    background:
        var(--sp-gradient-danger);

    border-color:
        rgba(
            255,
            255,
            255,
            0.20
        );
}


/* ==========================================================
   Ghost Button
   ========================================================== */

.sp-button-ghost {
    color:
        var(--sp-text-secondary);

    background:
        transparent;

    border-color:
        transparent;

    box-shadow:
        none;
}


.sp-button-ghost:hover {
    background:
        var(--sp-surface-1);

    border-color:
        var(--sp-glass-border-soft);
}


/* ==========================================================
   Glass Chip
   ========================================================== */

.sp-chip {
    min-height:
        32px;

    padding:
        0
        var(--sp-space-3);

    border-radius:
        var(--sp-radius-pill);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--sp-space-2);

    color:
        var(--sp-text-secondary);

    background:
        var(--sp-glass-bg-soft);

    border:
        1px solid
        var(--sp-glass-border-soft);

    font-size:
        var(--sp-font-size-xs);

    font-weight:
        var(--sp-weight-bold);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-sm)
        );

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-sm)
        );
}


/* ==========================================================
   Glass Badge
   ========================================================== */

.sp-badge {
    min-width:
        22px;

    min-height:
        22px;

    padding:
        0
        7px;

    border-radius:
        var(--sp-radius-pill);

    display:
        inline-grid;

    place-items:
        center;

    font-size:
        var(--sp-font-size-2xs);

    font-weight:
        var(--sp-weight-black);

    color:
        var(--sp-white);

    background:
        var(--sp-gradient-primary);

    box-shadow:
        var(--sp-shadow-glow-primary);
}


/* ==========================================================
   Glass Avatar
   ========================================================== */

.sp-avatar {
    width:
        44px;

    height:
        44px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    color:
        var(--sp-white);

    background:
        var(--sp-gradient-primary);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-sm);
}


.sp-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* ==========================================================
   Glass Divider
   ========================================================== */

.sp-divider {
    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--sp-border-default),
            transparent
        );
}


/* ==========================================================
   Glass Modal Surface
   ========================================================== */

.sp-modal-surface {
    position:
        relative;

    width:
        min(
            100%,
            520px
        );

    max-height:
        min(
            86vh,
            760px
        );

    overflow-y:
        auto;

    padding:
        var(--sp-space-6);

    border-radius:
        var(--sp-radius-2xl);

    color:
        var(--sp-text-primary);

    background:
        var(--sp-glass-bg-strong);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-xl);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(150%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(150%);
}


/* ==========================================================
   Glass Overlay
   ========================================================== */

.sp-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        var(--sp-z-overlay);

    display:
        grid;

    place-items:
        center;

    padding:
        var(--sp-page-gutter);

    background:
        rgba(
            15,
            23,
            42,
            0.28
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* ==========================================================
   Glass Bottom Sheet
   ========================================================== */

.sp-sheet {
    position:
        fixed;

    left:
        max(
            var(--sp-page-gutter),
            var(--sp-safe-left)
        );

    right:
        max(
            var(--sp-page-gutter),
            var(--sp-safe-right)
        );

    bottom:
        max(
            var(--sp-page-gutter),
            var(--sp-safe-bottom)
        );

    z-index:
        var(--sp-z-modal);

    padding:
        var(--sp-space-5);

    border-radius:
        var(--sp-radius-2xl);

    background:
        var(--sp-glass-bg-strong);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-xl);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(150%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(150%);
}


/* ==========================================================
   Glass Navigation
   ========================================================== */

.sp-navbar {
    position:
        relative;

    min-height:
        var(--sp-bottom-nav-height);

    padding:
        var(--sp-space-2)
        var(--sp-space-3);

    border-radius:
        var(--sp-radius-2xl);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-around;

    gap:
        var(--sp-space-2);

    background:
        var(--sp-glass-bg-strong);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-lg);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(145%);

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-xl)
        )
        saturate(145%);
}


/* ==========================================================
   Glass Nav Item
   ========================================================== */

.sp-nav-item {
    min-width:
        58px;

    min-height:
        54px;

    padding:
        var(--sp-space-2);

    border-radius:
        var(--sp-radius-lg);

    display:
        grid;

    place-items:
        center;

    gap:
        2px;

    color:
        var(--sp-text-tertiary);

    transition:
        color
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast),
        transform
        var(--sp-transition-spring);
}


.sp-nav-item:hover {
    color:
        var(--sp-primary);

    background:
        var(--sp-surface-1);
}


.sp-nav-item.active {
    color:
        var(--sp-primary);

    background:
        var(--sp-gradient-primary-soft);

    box-shadow:
        inset
        0
        0
        0
        1px
        var(--sp-border-primary);
}


/* ==========================================================
   Glass Toast
   ========================================================== */

.sp-toast {
    position:
        fixed;

    left:
        50%;

    bottom:
        calc(
            var(--sp-bottom-nav-height)
            +
            var(--sp-safe-bottom)
            +
            var(--sp-space-6)
        );

    z-index:
        var(--sp-z-toast);

    width:
        min(
            calc(
                100%
                -
                32px
            ),
            460px
        );

    padding:
        var(--sp-space-4);

    border-radius:
        var(--sp-radius-lg);

    transform:
        translateX(-50%);

    color:
        var(--sp-text-primary);

    background:
        var(--sp-glass-bg-strong);

    border:
        1px solid
        var(--sp-glass-border);

    box-shadow:
        var(--sp-shadow-lg);

    backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        );

    -webkit-backdrop-filter:
        blur(
            var(--sp-glass-blur-lg)
        );
}


/* ==========================================================
   Glass Skeleton
   ========================================================== */

.sp-skeleton {
    position:
        relative;

    overflow:
        hidden;

    border-radius:
        var(--sp-radius-md);

    background:
        var(--sp-surface-1);
}


.sp-skeleton::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.34
            ),
            transparent
        );

    animation:
        sp-glass-shimmer
        1.8s
        infinite;
}


@keyframes sp-glass-shimmer {
    100% {
        transform:
            translateX(100%);
    }
}


/* ==========================================================
   Glass Reflection
   ========================================================== */

.sp-reflect {
    position:
        relative;

    overflow:
        hidden;
}


.sp-reflect::after {
    content:
        "";

    position:
        absolute;

    top:
        -80%;

    left:
        -60%;

    width:
        45%;

    height:
        260%;

    transform:
        rotate(18deg);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.18
            ),
            transparent
        );

    transition:
        left
        var(--sp-duration-slower)
        var(--sp-ease-spring);
}


.sp-reflect:hover::after {
    left:
        130%;
}


/* ==========================================================
   Performance / Accessibility
   ========================================================== */

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

    .sp-card,
    .sp-button,
    .sp-nav-item,
    .sp-reflect::after {
        transition:
            none !important;
    }

    .sp-skeleton::after {
        animation:
            none !important;
    }

}


@supports not (
    backdrop-filter:
        blur(10px)
) {

    .sp-glass,
    .sp-glass-soft,
    .sp-glass-strong,
    .sp-card,
    .sp-panel,
    .sp-button,
    .sp-input,
    .sp-select,
    .sp-modal-surface,
    .sp-sheet,
    .sp-navbar,
    .sp-toast {
        background:
            var(--sp-surface-4);
    }

}