/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01J

   File:
   /opt/simplpay/static/css/009-icons.css
   ========================================================== */


/* ==========================================================
   Icon Base
   ========================================================== */

.sp-icon {
    width: 22px;
    height: 22px;

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

    flex: 0 0 auto;

    color: currentColor;
}

.sp-icon svg {
    width: 100%;
    height: 100%;

    stroke: currentColor;
    fill: none;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}


/* ==========================================================
   Icon Sizes
   ========================================================== */

.sp-icon-xs {
    width: 14px;
    height: 14px;
}

.sp-icon-sm {
    width: 18px;
    height: 18px;
}

.sp-icon-md {
    width: 22px;
    height: 22px;
}

.sp-icon-lg {
    width: 28px;
    height: 28px;
}

.sp-icon-xl {
    width: 36px;
    height: 36px;
}

.sp-icon-2xl {
    width: 48px;
    height: 48px;
}


/* ==========================================================
   Icon Containers
   ========================================================== */

.sp-icon-box {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

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

    color:
        var(--sp-primary);

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

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

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

.sp-icon-box-sm {
    width: 36px;
    height: 36px;

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

.sp-icon-box-lg {
    width: 54px;
    height: 54px;

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

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

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

    border-color:
        rgba(
            255,
            255,
            255,
            .20
        );

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

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

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

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

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

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

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


/* ==========================================================
   Icon Color Utilities
   ========================================================== */

.sp-icon-primary {
    color:
        var(--sp-primary);
}

.sp-icon-secondary {
    color:
        var(--sp-secondary);
}

.sp-icon-accent {
    color:
        var(--sp-accent);
}

.sp-icon-success {
    color:
        var(--sp-success);
}

.sp-icon-warning {
    color:
        var(--sp-warning);
}

.sp-icon-danger {
    color:
        var(--sp-danger);
}

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


/* ==========================================================
   Icon Button Enhancements
   ========================================================== */

.sp-icon-button .sp-icon {
    transition:
        transform
        var(--sp-transition-spring),
        color
        var(--sp-transition-fast);
}

.sp-icon-button:hover .sp-icon {
    transform:
        scale(1.06);
}

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


/* ==========================================================
   Navigation Icons
   ========================================================== */

.sp-nav-icon {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    color:
        currentColor;

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

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

    transform:
        translateY(-1px);

    filter:
        drop-shadow(
            0 6px 12px
            rgba(
                79,
                70,
                229,
                .22
            )
        );
}


/* ==========================================================
   Feature Icons
   ========================================================== */

.sp-feature-icon {
    width: 48px;
    height: 48px;

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

    display: grid;
    place-items: center;

    color:
        var(--sp-white);

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

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

    position: relative;
    overflow: hidden;
}

.sp-feature-icon::before {
    content: "";

    position: absolute;
    inset: 1px 1px auto 1px;

    height: 46%;

    border-radius: inherit;

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

    pointer-events: none;
}

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


/* ==========================================================
   Payment App Icons
   ========================================================== */

.sp-payment-app-icon {
    width: 44px;
    height: 44px;

    border-radius: 12px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        var(--sp-white);

    border:
        1px solid
        rgba(
            148,
            163,
            184,
            .18
        );

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

.sp-payment-app-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 5px;
}


/* ==========================================================
   QR Icon
   ========================================================== */

.sp-icon-qr {
    position: relative;
}

.sp-icon-qr::before {
    content: "";

    width: 22px;
    height: 22px;

    display: block;

    background:
        linear-gradient(
            currentColor,
            currentColor
        )
        0 0 / 8px 2px no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        0 0 / 2px 8px no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        100% 0 / 8px 2px no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        100% 0 / 2px 8px no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        0 100% / 8px 2px no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        0 100% / 2px 8px no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        100% 100% / 8px 2px no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        100% 100% / 2px 8px no-repeat;
}


/* ==========================================================
   Biometric Icon
   ========================================================== */

.sp-icon-biometric {
    position: relative;

    width: 28px;
    height: 28px;

    border:
        2px solid
        currentColor;

    border-radius:
        50%;
}

.sp-icon-biometric::before {
    content: "";

    position: absolute;
    inset: 5px;

    border:
        2px solid
        currentColor;

    border-radius:
        50%;

    opacity: .7;
}

.sp-icon-biometric::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        currentColor;

    transform:
        translate(-50%, -50%);
}


/* ==========================================================
   Lock Icon
   ========================================================== */

.sp-icon-lock {
    position: relative;

    width: 20px;
    height: 17px;

    margin-top: 6px;

    border:
        2px solid
        currentColor;

    border-radius:
        5px;
}

.sp-icon-lock::before {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    left: 50%;
    top: -9px;

    border:
        2px solid
        currentColor;

    border-bottom:
        none;

    border-radius:
        8px 8px 0 0;

    transform:
        translateX(-50%);
}


/* ==========================================================
   Sparkle / AI Icon
   ========================================================== */

.sp-icon-ai {
    position: relative;

    width: 24px;
    height: 24px;
}

.sp-icon-ai::before,
.sp-icon-ai::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    background:
        currentColor;

    transform:
        translate(-50%, -50%);
}

.sp-icon-ai::before {
    width: 3px;
    height: 22px;

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

.sp-icon-ai::after {
    width: 22px;
    height: 3px;

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

.sp-icon-ai {
    transform:
        rotate(45deg);
}


/* ==========================================================
   Status Icon
   ========================================================== */

.sp-status-icon {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        currentColor;

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            currentColor 12%,
            transparent
        );
}

@supports not (
    background:
        color-mix(
            in srgb,
            red 10%,
            transparent
        )
) {

    .sp-status-icon {
        box-shadow:
            0 0 0 4px
            rgba(
                99,
                102,
                241,
                .10
            );
    }

}


/* ==========================================================
   Animated Icons
   ========================================================== */

.sp-icon-spin {
    animation:
        sp-icon-spin
        900ms
        linear
        infinite;
}

@keyframes sp-icon-spin {
    to {
        transform:
            rotate(360deg);
    }
}

.sp-icon-pulse {
    animation:
        sp-icon-pulse
        1.8s
        ease-in-out
        infinite;
}

@keyframes sp-icon-pulse {
    0%,
    100% {
        transform:
            scale(1);

        opacity:
            1;
    }

    50% {
        transform:
            scale(1.08);

        opacity:
            .72;
    }
}


/* ==========================================================
   Icon Groups
   ========================================================== */

.sp-icon-group {
    display: inline-flex;
    align-items: center;
}

.sp-icon-group > * {
    margin-left: -8px;

    border:
        2px solid
        var(--sp-surface-4);
}

.sp-icon-group > :first-child {
    margin-left: 0;
}


/* ==========================================================
   Icon + Text
   ========================================================== */

.sp-icon-text {
    display: inline-flex;
    align-items: center;

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

.sp-icon-text-start {
    align-items: flex-start;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 430px) {

    .sp-feature-icon {
        width: 44px;
        height: 44px;
    }

    .sp-nav-icon {
        width: 22px;
        height: 22px;
    }

}


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

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

    .sp-icon-spin,
    .sp-icon-pulse {
        animation:
            none !important;
    }

    .sp-icon-button .sp-icon,
    .sp-nav-icon {
        transition:
            none !important;
    }

}