/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-03H

   Contacts + Favourites + Recent Payments
   ========================================================== */


/* ==========================================================
   Shared Section Headers
   ========================================================== */

.favourites-header,
.recent-payments-header,
.contact-picker-toolbar {
    position:
        relative;

    z-index:
        2;
}


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

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

    letter-spacing:
        -.025em;
}


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


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

.favourites-section {
    position:
        relative;

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


.favourites-list {
    scroll-behavior:
        smooth;

    scrollbar-width:
        none;
}


.favourites-list::-webkit-scrollbar {
    display:
        none;
}


/* ==========================================================
   Favourite Card
   ========================================================== */

.favourite-card {
    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    min-height:
        128px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.62),
            rgba(255,255,255,.30)
        );

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

    box-shadow:
        0 10px 24px rgba(15,23,42,.07);

    backdrop-filter:
        blur(22px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(140%);

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


.favourite-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            145deg,
            rgba(99,102,241,.11),
            rgba(139,92,246,.07),
            rgba(6,182,212,.08)
        );

    transition:
        opacity
        var(--sp-transition-fast);
}


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

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

    box-shadow:
        0 18px 40px rgba(79,70,229,.14);
}


.favourite-card:hover::before {
    opacity:
        1;
}


.favourite-card.sp-person-selected {
    border-color:
        var(--sp-primary-400);

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


/* ==========================================================
   Favourite Avatar
   ========================================================== */

.favourite-avatar {
    position:
        relative;

    overflow:
        hidden;

    width:
        50px;

    height:
        50px;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #8b5cf6,
            #06b6d4
        );

    box-shadow:
        0 14px 30px rgba(79,70,229,.24);

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


.favourite-avatar::after {
    content:
        "";

    position:
        absolute;

    inset:
        1px
        1px
        auto
        1px;

    height:
        42%;

    border-radius:
        inherit;

    pointer-events:
        none;

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


/* ==========================================================
   Favourite Typography
   ========================================================== */

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

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


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

    font-family:
        var(--sp-font-mono);

    font-size:
        9px;
}


/* ==========================================================
   Favourite Menu
   ========================================================== */

.favourite-menu-button {
    width:
        30px;

    height:
        30px;

    border-radius:
        10px;

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

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

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

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

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

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


.favourite-menu-button:hover {
    color:
        var(--sp-primary);

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

    transform:
        scale(1.06);
}


/* ==========================================================
   Add Favourite Button
   ========================================================== */

.add-favourite-button {
    min-height:
        40px;

    padding:
        8px
        13px;

    border-radius:
        13px;

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


/* ==========================================================
   Empty Favourite State
   ========================================================== */

.favourites-empty {
    position:
        relative;

    padding:
        20px
        15px;

    border:
        1px dashed
        var(--sp-primary-300);

    border-radius:
        18px;

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

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

    backdrop-filter:
        blur(16px);

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


/* ==========================================================
   Contact Picker Main Button
   ========================================================== */

.contact-picker-button {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        54px;

    border-radius:
        18px;

    color:
        var(--sp-primary);

    background:
        linear-gradient(
            145deg,
            rgba(245,243,255,.64),
            rgba(239,246,255,.48)
        );

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

    box-shadow:
        0 10px 24px rgba(79,70,229,.08);

    backdrop-filter:
        blur(20px);

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


/* ==========================================================
   Contact Search
   ========================================================== */

.contact-search-wrap {
    position:
        relative;
}


.contact-search-input {
    min-height:
        54px;

    padding-left:
        48px;

    border-radius:
        17px;

    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,.28);

    backdrop-filter:
        blur(18px);

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


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

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


.contact-search-icon {
    z-index:
        3;

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


/* ==========================================================
   Contact Toolbar
   ========================================================== */

.contact-toolbar-button {
    min-height:
        46px;

    border-radius:
        14px;

    color:
        var(--sp-primary);

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

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


.contact-toolbar-button.primary {
    color:
        #ffffff;

    border-color:
        transparent;

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

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


/* ==========================================================
   Contact Results List
   ========================================================== */

.contact-results {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(99,102,241,.26)
        transparent;
}


/* ==========================================================
   Contact Result Card
   ========================================================== */

.contact-result-card {
    position:
        relative;

    overflow:
        hidden;

    border-radius:
        18px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.66),
            rgba(255,255,255,.32)
        );

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

    box-shadow:
        0 8px 22px rgba(15,23,42,.06);

    backdrop-filter:
        blur(20px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(135%);

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


.contact-result-card::after {
    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    right:
        -52px;

    top:
        50%;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    pointer-events:
        none;

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


.contact-result-card:hover {
    transform:
        translateY(-2px);

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

    box-shadow:
        0 14px 32px rgba(79,70,229,.12);
}


.contact-result-card.sp-person-selected {
    border-color:
        var(--sp-primary-400);

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


/* ==========================================================
   Contact Avatar
   ========================================================== */

.contact-result-avatar {
    width:
        46px;

    height:
        46px;

    border-radius:
        16px;

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

    box-shadow:
        0 12px 26px rgba(79,70,229,.23);

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


/* ==========================================================
   Contact Result Text
   ========================================================== */

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

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


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


/* ==========================================================
   Contact Source Badge
   ========================================================== */

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

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

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


.contact-result-source.device {
    color:
        var(--sp-cyan-700);

    background:
        rgba(6,182,212,.10);

    border-color:
        rgba(6,182,212,.20);
}


/* ==========================================================
   Source Note + Directory Count
   ========================================================== */

.contact-source-note {
    color:
        var(--sp-text-tertiary);

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

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


.contact-directory-count {
    color:
        var(--sp-text-muted);
}


/* ==========================================================
   Empty Contact Result
   ========================================================== */

.contact-results-empty {
    border-radius:
        18px;

    border:
        1px dashed
        var(--sp-primary-300);

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

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


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

.recent-payments-section {
    position:
        relative;

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


/* ==========================================================
   Clear History Button
   ========================================================== */

.clear-history-button {
    color:
        var(--sp-danger-strong);

    background:
        rgba(239,68,68,.07);

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

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


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

    background:
        rgba(239,68,68,.12);

    border-color:
        rgba(239,68,68,.34);
}


/* ==========================================================
   Recent Payment Item
   ========================================================== */

.recent-payment-item {
    position:
        relative;

    overflow:
        hidden;

    border-radius:
        19px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.66),
            rgba(255,255,255,.32)
        );

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

    box-shadow:
        0 8px 22px rgba(15,23,42,.06);

    backdrop-filter:
        blur(20px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(135%);

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


.recent-payment-item:hover {
    transform:
        translateY(-2px);

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

    box-shadow:
        0 16px 34px rgba(79,70,229,.12);
}


/* ==========================================================
   Recent Payment Avatar
   ========================================================== */

.recent-payment-avatar {
    width:
        48px;

    height:
        48px;

    border-radius:
        16px;

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

    box-shadow:
        0 12px 26px rgba(79,70,229,.23);
}


/* ==========================================================
   Recent Payment Typography
   ========================================================== */

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

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


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

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


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


/* ==========================================================
   Recent Payment Status
   ========================================================== */

.recent-payment-status {
    border:
        1px solid
        rgba(245,158,11,.18);

    color:
        var(--sp-warning-strong);

    background:
        rgba(245,158,11,.10);
}


.recent-payment-status.success,
.recent-payment-status.completed {
    color:
        var(--sp-success-strong);

    border-color:
        rgba(16,185,129,.20);

    background:
        rgba(16,185,129,.10);
}


.recent-payment-status.failed,
.recent-payment-status.error {
    color:
        var(--sp-danger-strong);

    border-color:
        rgba(239,68,68,.20);

    background:
        rgba(239,68,68,.10);
}


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

.recent-payments-empty {
    padding:
        22px
        15px;

    border-radius:
        18px;

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

    border:
        1px dashed
        var(--sp-primary-300);

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


.recent-history-note {
    color:
        var(--sp-text-muted);
}


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

html[data-sp-theme="dark"]
.favourite-card,
html[data-sp-theme="dark"]
.contact-result-card,
html[data-sp-theme="dark"]
.recent-payment-item {
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.74),
            rgba(15,23,42,.44)
        );

    border-color:
        rgba(255,255,255,.09);
}


html[data-sp-theme="dark"]
.contact-picker-button {
    background:
        linear-gradient(
            145deg,
            rgba(79,70,229,.14),
            rgba(6,182,212,.07)
        );
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 430px) {

    .favourite-card {
        flex-basis:
            108px;

        min-height:
            122px;
    }


    .favourite-avatar {
        width:
            46px;

        height:
            46px;
    }


    .contact-result-card {
        grid-template-columns:
            44px
            minmax(0,1fr);
    }


    .contact-result-avatar {
        width:
            44px;

        height:
            44px;
    }


    .recent-payment-item {
        grid-template-columns:
            44px
            minmax(0,1fr);
    }


    .recent-payment-avatar {
        width:
            44px;

        height:
            44px;
    }

}


/* ==========================================================
   Touch
   ========================================================== */

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

    .favourite-card:hover,
    .contact-result-card:hover,
    .recent-payment-item:hover {
        transform:
            none;
    }

}


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

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

    .favourite-card,
    .favourite-card::before,
    .favourite-menu-button,
    .contact-result-card,
    .recent-payment-item,
    .clear-history-button {
        transition:
            none !important;
    }

}