/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-02
   Legacy -> Aurora Compatibility Layer

   File:
   /opt/simplpay/static/css/011-legacy-aurora.css

   Existing class names preserved intentionally.
   ========================================================== */


/* ==========================================================
   Application Background
   ========================================================== */

body.sp-page {
    color:
        var(--sp-text-primary);

    background:
        transparent;

    font-family:
        var(--sp-font-sans);
}


/* ==========================================================
   Existing Shell
   ========================================================== */

.shell {
    position:
        relative;

    z-index:
        1;
}


/* ==========================================================
   Hero
   ========================================================== */

.hero {
    position:
        relative;
}

.brand {
    position:
        relative;
}

.brand-icon {
    border:
        1px solid
        var(--sp-glass-border);

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

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

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

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

.brand-name {
    color:
        var(--sp-text-primary);

    letter-spacing:
        var(--sp-letter-tight);
}

.hero h1 {
    color:
        var(--sp-text-primary);
}

.hero p {
    color:
        var(--sp-text-secondary);
}

.gradient-text {
    color:
        var(--sp-primary);

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

    background-clip:
        text;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


/* ==========================================================
   Feature Chips
   ========================================================== */

.feature {
    color:
        var(--sp-primary-700);

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

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

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

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

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


/* ==========================================================
   Main Existing Card
   Existing .card is heavily used by current SimplPay.
   ========================================================== */

.card {
    position:
        relative;

    overflow:
        hidden;

    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(145%);

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

    transform:
        translateZ(0);
}

.card::before {
    content:
        "";

    position:
        absolute;

    top:
        -100px;

    right:
        -85px;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(
                99,
                102,
                241,
                .18
            ),
            transparent 68%
        );

    filter:
        blur(12px);
}


/* ==========================================================
   Dashboard Summary
   ========================================================== */

.dashboard-stat {
    color:
        var(--sp-text-primary);

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

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

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

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

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

.dashboard-stat-value {
    color:
        var(--sp-primary);
}

.dashboard-stat-label {
    color:
        var(--sp-text-tertiary);
}


/* ==========================================================
   Headers
   ========================================================== */

.card-header h2,
.favourites-title-wrap h3,
.recent-payments-title-wrap h3 {
    color:
        var(--sp-text-primary);
}

.card-header p,
.favourites-title-wrap p,
.recent-payments-title-wrap p {
    color:
        var(--sp-text-tertiary);
}


/* ==========================================================
   Primary Buttons
   ========================================================== */

.scan-button,
.pay-button {
    position:
        relative;

    overflow:
        hidden;

    color:
        var(--sp-white);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .20
        );

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

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

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

.scan-button::before,
.pay-button::before {
    content:
        "";

    position:
        absolute;

    inset:
        1px
        1px
        auto
        1px;

    height:
        46%;

    border-radius:
        inherit;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,
            rgba(
                255,
                255,
                255,
                .32
            ),
            transparent
        );
}

.scan-button:hover,
.pay-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0
        20px
        46px
        rgba(
            79,
            70,
            229,
            .28
        );
}

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


/* ==========================================================
   Secondary Feature Buttons
   ========================================================== */

.deep-link-import-button,
.contact-picker-button,
.split-payment-button,
.add-favourite-button,
.contact-toolbar-button,
.quick-amount,
.split-add-person-button {
    color:
        var(--sp-primary);

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

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

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

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

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

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

.deep-link-import-button:hover,
.contact-picker-button:hover,
.split-payment-button:hover,
.add-favourite-button:hover,
.contact-toolbar-button:hover,
.quick-amount:hover,
.split-add-person-button:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--sp-primary-400);

    background:
        var(--sp-surface-2);

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


/* ==========================================================
   Inputs
   ========================================================== */

.input-wrap input,
.deep-link-input,
.contact-search-input,
.split-participant-name,
.split-participant-amount {
    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,
            .24
        );

    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);
}

.input-wrap input:focus,
.deep-link-input:focus,
.contact-search-input:focus,
.split-participant-name:focus,
.split-participant-amount:focus {
    border-color:
        var(--sp-primary-400);

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

.field label {
    color:
        var(--sp-text-secondary);
}

.input-icon,
.contact-search-icon {
    color:
        var(--sp-primary);
}


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

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

.divider::before,
.divider::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--sp-border-default),
            transparent
        );
}


/* ==========================================================
   Mobile Bottom Navigation
   ========================================================== */

.mobile-bottom-navigation {
    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%);
}

.mobile-nav-button {
    color:
        var(--sp-text-tertiary);

    background:
        transparent;

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

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

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

.mobile-nav-button.active {
    color:
        var(--sp-white);

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

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

.mobile-nav-button:active {
    transform:
        scale(.95);
}

.mobile-nav-badge {
    border-color:
        var(--sp-surface-4);

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


/* ==========================================================
   More Menu
   ========================================================== */

.more-menu-card {
    color:
        var(--sp-text-primary);

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

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

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

    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),
        border-color
        var(--sp-transition-fast),
        box-shadow
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast);
}

.more-menu-card:hover {
    transform:
        translateY(-3px);

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

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

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

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

.more-menu-icon {
    color:
        var(--sp-white);

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

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

.more-version-card {
    color:
        var(--sp-text-tertiary);

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

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


/* ==========================================================
   Modal Overlay
   ========================================================== */

.modal {
    background:
        rgba(
            15,
            23,
            42,
            .26
        );

    backdrop-filter:
        blur(10px);

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


/* ==========================================================
   Existing Modal Card
   ========================================================== */

.modal-card {
    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%);
}

.modal-head h3 {
    color:
        var(--sp-text-primary);
}


/* ==========================================================
   Contact Cards
   ========================================================== */

.contact-result-card {
    color:
        var(--sp-text-primary);

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

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

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

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

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

.contact-result-card:hover {
    border-color:
        var(--sp-border-primary);

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

.contact-result-avatar {
    background:
        var(--sp-gradient-primary);

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

.contact-result-name {
    color:
        var(--sp-text-primary);
}

.contact-result-detail {
    color:
        var(--sp-text-tertiary);
}

.contact-result-source {
    color:
        var(--sp-primary);

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

.contact-results-empty,
.favourites-empty,
.recent-payments-empty {
    color:
        var(--sp-text-tertiary);

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

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


/* ==========================================================
   Favourites
   ========================================================== */

.favourite-card {
    color:
        var(--sp-text-primary);

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

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

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

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

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

.favourite-card:hover {
    border-color:
        var(--sp-border-primary);

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

.favourite-avatar {
    background:
        var(--sp-gradient-primary);

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

.favourite-name {
    color:
        var(--sp-text-primary);
}

.favourite-upi {
    color:
        var(--sp-text-tertiary);
}

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

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

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


/* ==========================================================
   Recent Payments
   ========================================================== */

.recent-payment-item {
    color:
        var(--sp-text-primary);

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

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

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

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

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

.recent-payment-item:hover {
    border-color:
        var(--sp-border-primary);

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

.recent-payment-avatar {
    background:
        var(--sp-gradient-primary);

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

.recent-payment-name,
.recent-payment-amount {
    color:
        var(--sp-text-primary);
}

.recent-payment-upi {
    color:
        var(--sp-text-tertiary);
}

.recent-payment-meta {
    color:
        var(--sp-text-muted);
}

.recent-payment-status {
    color:
        var(--sp-warning-strong);

    background:
        color-mix(
            in srgb,
            var(--sp-warning)
            14%,
            transparent
        );
}


/* ==========================================================
   Split Payment
   ========================================================== */

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

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

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

.split-summary-item {
    background:
        var(--sp-surface-2);

    border:
        1px solid
        var(--sp-border-success);
}

.split-summary-value {
    color:
        var(--sp-success-strong);
}

.split-summary-label {
    color:
        var(--sp-text-tertiary);
}

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

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

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

.split-mode-button.active {
    color:
        var(--sp-success-strong);

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

    background:
        color-mix(
            in srgb,
            var(--sp-success)
            12%,
            transparent
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            16,
            185,
            129,
            .10
        );
}

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

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

.split-balance-message {
    color:
        var(--sp-success-strong);

    background:
        color-mix(
            in srgb,
            var(--sp-success)
            12%,
            transparent
        );
}

.split-balance-message.error {
    color:
        var(--sp-danger-strong);

    background:
        color-mix(
            in srgb,
            var(--sp-danger)
            12%,
            transparent
        );
}

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

    border:
        1px solid
        var(--sp-border-success);
}


/* ==========================================================
   Deep-Link / Preview Cards
   ========================================================== */

.deep-link-example,
.contact-source-note {
    color:
        var(--sp-text-tertiary);

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

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

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

    border:
        1px solid
        var(--sp-border-primary);
}

.deep-link-preview-header {
    color:
        var(--sp-primary);

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

.deep-link-preview-row {
    border-color:
        var(--sp-border-subtle);
}

.deep-link-preview-label {
    color:
        var(--sp-text-tertiary);
}

.deep-link-preview-value {
    color:
        var(--sp-text-primary);
}


/* ==========================================================
   Install Area
   ========================================================== */

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

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

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

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

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

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

.ios-install-note {
    color:
        var(--sp-primary);

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

    border:
        1px solid
        var(--sp-border-primary);
}


/* ==========================================================
   Dark Theme Corrections
   ========================================================== */

html[data-sp-theme="dark"]
.card,
html[data-sp-theme="dark"]
.modal-card,
html[data-sp-theme="dark"]
.more-menu-card,
html[data-sp-theme="dark"]
.favourite-card,
html[data-sp-theme="dark"]
.recent-payment-item,
html[data-sp-theme="dark"]
.contact-result-card,
html[data-sp-theme="dark"]
.split-participant-row {
    color:
        var(--sp-text-primary);
}

html[data-sp-theme="dark"]
.scan-button,
html[data-sp-theme="dark"]
.pay-button,
html[data-sp-theme="dark"]
.mobile-nav-button.active {
    color:
        var(--sp-white);
}


/* ==========================================================
   Reduced Motion
   ========================================================== */

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

    .scan-button,
    .pay-button,
    .more-menu-card,
    .favourite-card,
    .recent-payment-item,
    .contact-result-card,
    .mobile-nav-button {
        transition:
            none !important;
    }

}


/* ==========================================================
   End PATCH-SIMPLPAY-022G-02
   ========================================================== */