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

   File:
   /opt/simplpay/static/css/007-typography.css
   ========================================================== */


/* ==========================================================
   Root Typography
   ========================================================== */

html{
    font-family:var(--sp-font-sans);

    font-size:16px;

    line-height:1.5;

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

    text-rendering:optimizeLegibility;

    font-feature-settings:
        "liga" 1,
        "kern" 1;

    font-kerning:normal;
}


/* ==========================================================
   Body
   ========================================================== */

body{

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

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

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

    line-height:
        var(--sp-line-md);

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

}


/* ==========================================================
   Fluid Display Scale
   ========================================================== */

.sp-display-1{

    font-size:
        clamp(
            54px,
            9vw,
            84px
        );

    line-height:1;

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

    letter-spacing:
        -.045em;

}


.sp-display-2{

    font-size:
        clamp(
            44px,
            7vw,
            68px
        );

    line-height:1.02;

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

    letter-spacing:
        -.04em;

}


.sp-display-3{

    font-size:
        clamp(
            38px,
            6vw,
            56px
        );

    line-height:1.05;

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

    letter-spacing:
        -.03em;

}



/* ==========================================================
   Headings
   ========================================================== */

h1,
.sp-h1{

    margin:0;

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

    font-size:
        clamp(
            34px,
            5vw,
            46px
        );

    line-height:1.08;

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

    letter-spacing:
        -.035em;

}


h2,
.sp-h2{

    margin:0;

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

    font-size:
        clamp(
            28px,
            4vw,
            38px
        );

    line-height:1.12;

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

    letter-spacing:
        -.03em;

}


h3,
.sp-h3{

    margin:0;

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

    font-size:
        clamp(
            24px,
            3vw,
            30px
        );

    line-height:1.2;

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

}


h4,
.sp-h4{

    margin:0;

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

    font-size:
        22px;

    line-height:1.25;

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

}


h5,
.sp-h5{

    margin:0;

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

    font-size:
        18px;

    line-height:1.35;

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

}


h6,
.sp-h6{

    margin:0;

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

    font-size:
        16px;

    line-height:1.4;

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

}



/* ==========================================================
   Paragraphs
   ========================================================== */

p{

    margin:0;

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

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

    line-height:
        1.75;

}


.sp-text{

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

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

    line-height:
        1.75;

}


.sp-text-large{

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

    line-height:
        1.8;

}


.sp-text-small{

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

    line-height:
        1.65;

}



/* ==========================================================
   Caption
   ========================================================== */

.sp-caption{

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

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

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

    letter-spacing:
        .02em;

}


.sp-overline{

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

    font-size:
        11px;

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

    text-transform:
        uppercase;

    letter-spacing:
        .14em;

}



/* ==========================================================
   Labels
   ========================================================== */

.sp-label{

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

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

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

}


.sp-label-required::after{

    content:" *";

    color:
        var(--sp-danger);

}



/* ==========================================================
   Helper Text
   ========================================================== */

.sp-helper{

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

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

    line-height:
        1.55;

}


.sp-error-text{

    color:
        var(--sp-danger);

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

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

}


.sp-success-text{

    color:
        var(--sp-success);

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

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

}



/* ==========================================================
   Payment Amount
   ========================================================== */

.sp-payment-amount{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:6px;

}


.sp-payment-currency{

    font-size:
        34px;

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

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

}


.sp-payment-value{

    font-size:
        clamp(
            42px,
            9vw,
            68px
        );

    line-height:1;

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

    letter-spacing:
        -.045em;

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

}



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

.sp-dashboard-title{

    font-size:
        30px;

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

    line-height:1.15;

}


.sp-dashboard-subtitle{

    margin-top:
        6px;

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

    font-size:
        14px;

}



/* ==========================================================
   Card Typography
   ========================================================== */

.sp-card-title{

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

    font-size:
        18px;

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

    line-height:
        1.3;

}


.sp-card-subtitle{

    margin-top:
        4px;

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

    font-size:
        13px;

    line-height:
        1.55;

}



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

.sp-nav-title{

    font-size:
        12px;

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

}


.sp-nav-active{

    color:
        var(--sp-primary);

}



/* ==========================================================
   Button Typography
   ========================================================== */

.sp-button{

    font-size:
        15px;

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

    letter-spacing:
        .01em;

}



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

.sp-modal-title{

    font-size:
        24px;

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

}


.sp-modal-subtitle{

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

    font-size:
        14px;

    line-height:
        1.65;

}



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

@media (max-width:768px){

    html{

        font-size:15px;

    }

    .sp-dashboard-title{

        font-size:26px;

    }

    .sp-payment-value{

        font-size:
            clamp(
                38px,
                10vw,
                54px
            );

    }

}

@media (max-width:430px){

    html{

        font-size:14px;

    }

    .sp-display-1{

        font-size:46px;

    }

    .sp-display-2{

        font-size:38px;

    }

    .sp-display-3{

        font-size:32px;

    }

}

/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01H
   PART-02

   File:
   /opt/simplpay/static/css/007-typography.css
   Append below PART-01
   ========================================================== */


/* ==========================================================
   Font Weight Utilities
   ========================================================== */

.sp-font-regular {
    font-weight:
        var(--sp-weight-regular);
}

.sp-font-medium {
    font-weight:
        var(--sp-weight-medium);
}

.sp-font-semibold {
    font-weight:
        var(--sp-weight-semibold);
}

.sp-font-bold {
    font-weight:
        var(--sp-weight-bold);
}

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

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


/* ==========================================================
   Font Size Utilities
   ========================================================== */

.sp-text-2xs {
    font-size:
        var(--sp-font-size-2xs);
}

.sp-text-xs {
    font-size:
        var(--sp-font-size-xs);
}

.sp-text-sm {
    font-size:
        var(--sp-font-size-sm);
}

.sp-text-md {
    font-size:
        var(--sp-font-size-md);
}

.sp-text-lg {
    font-size:
        var(--sp-font-size-lg);
}

.sp-text-xl {
    font-size:
        var(--sp-font-size-xl);
}

.sp-text-2xl {
    font-size:
        var(--sp-font-size-2xl);
}

.sp-text-3xl {
    font-size:
        var(--sp-font-size-3xl);
}


/* ==========================================================
   Alignment
   ========================================================== */

.sp-text-left {
    text-align:
        left;
}

.sp-text-center {
    text-align:
        center;
}

.sp-text-right {
    text-align:
        right;
}

.sp-text-justify {
    text-align:
        justify;
}


/* ==========================================================
   Text Color Utilities
   ========================================================== */

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

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

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

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

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

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

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

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

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

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


/* ==========================================================
   Gradient Typography
   ========================================================== */

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

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

    background-clip:
        text;

    -webkit-background-clip:
        text;

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

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

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

    background-clip:
        text;

    -webkit-background-clip:
        text;

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


/* ==========================================================
   Letter Spacing
   ========================================================== */

.sp-tracking-tight {
    letter-spacing:
        var(--sp-letter-tight);
}

.sp-tracking-normal {
    letter-spacing:
        var(--sp-letter-normal);
}

.sp-tracking-wide {
    letter-spacing:
        var(--sp-letter-wide);
}

.sp-tracking-wider {
    letter-spacing:
        .08em;
}

.sp-tracking-widest {
    letter-spacing:
        .14em;
}


/* ==========================================================
   Line Height
   ========================================================== */

.sp-leading-none {
    line-height:
        1;
}

.sp-leading-tight {
    line-height:
        var(--sp-line-xs);
}

.sp-leading-snug {
    line-height:
        var(--sp-line-sm);
}

.sp-leading-normal {
    line-height:
        var(--sp-line-md);
}

.sp-leading-relaxed {
    line-height:
        var(--sp-line-lg);
}


/* ==========================================================
   Text Transformation
   ========================================================== */

.sp-uppercase {
    text-transform:
        uppercase;
}

.sp-lowercase {
    text-transform:
        lowercase;
}

.sp-capitalize {
    text-transform:
        capitalize;
}

.sp-normal-case {
    text-transform:
        none;
}


/* ==========================================================
   Decoration
   ========================================================== */

.sp-underline {
    text-decoration:
        underline;

    text-underline-offset:
        3px;
}

.sp-line-through {
    text-decoration:
        line-through;
}

.sp-no-decoration {
    text-decoration:
        none;
}


/* ==========================================================
   Wrapping
   ========================================================== */

.sp-nowrap {
    white-space:
        nowrap;
}

.sp-pre-wrap {
    white-space:
        pre-wrap;
}

.sp-break-word {
    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ==========================================================
   Truncation
   ========================================================== */

.sp-truncate {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.sp-line-clamp-1,
.sp-line-clamp-2,
.sp-line-clamp-3,
.sp-line-clamp-4 {
    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;
}

.sp-line-clamp-1 {
    -webkit-line-clamp:
        1;
}

.sp-line-clamp-2 {
    -webkit-line-clamp:
        2;
}

.sp-line-clamp-3 {
    -webkit-line-clamp:
        3;
}

.sp-line-clamp-4 {
    -webkit-line-clamp:
        4;
}


/* ==========================================================
   Numbers / Financial Data
   ========================================================== */

.sp-number {
    font-variant-numeric:
        tabular-nums;

    font-feature-settings:
        "tnum" 1,
        "lnum" 1;
}

.sp-currency {
    font-variant-numeric:
        tabular-nums;

    font-feature-settings:
        "tnum" 1,
        "lnum" 1;

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

    letter-spacing:
        -.02em;
}

.sp-currency-positive {
    color:
        var(--sp-success-strong);
}

.sp-currency-negative {
    color:
        var(--sp-danger-strong);
}


/* ==========================================================
   UPI Typography
   ========================================================== */

.sp-upi-id {
    color:
        var(--sp-text-secondary);

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

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

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

    overflow-wrap:
        anywhere;

    font-variant-ligatures:
        none;
}


/* ==========================================================
   Monospace
   ========================================================== */

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

    font-variant-ligatures:
        none;
}


/* ==========================================================
   Payment Status Typography
   ========================================================== */

.sp-status {
    display:
        inline-flex;

    align-items:
        center;

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

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

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

    letter-spacing:
        .03em;
}

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

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

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

.sp-status-info {
    color:
        var(--sp-cyan-700);
}


/* ==========================================================
   Timestamp
   ========================================================== */

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

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

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

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   Navigation Label
   ========================================================== */

.sp-nav-label {
    max-width:
        72px;

    overflow:
        hidden;

    color:
        currentColor;

    font-size:
        10px;

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

    line-height:
        1.15;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ==========================================================
   Button Text Protection
   ========================================================== */

.sp-button-text {
    position:
        relative;

    z-index:
        2;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ==========================================================
   Glass Heading
   ========================================================== */

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

    text-shadow:
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .24
        );
}

html[data-sp-theme="dark"]
.sp-glass-heading {
    text-shadow:
        0
        1px
        18px
        rgba(
            99,
            102,
            241,
            .12
        );
}


/* ==========================================================
   Brand Wordmark
   ========================================================== */

.sp-wordmark {
    font-size:
        22px;

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

    line-height:
        1;

    letter-spacing:
        -.045em;
}

.sp-wordmark-ai {
    margin-left:
        4px;

    color:
        var(--sp-primary);

    font-size:
        11px;

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

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


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

.sp-hero-title {
    max-width:
        640px;

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

    font-size:
        clamp(
            32px,
            7vw,
            52px
        );

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

    line-height:
        1.04;

    letter-spacing:
        -.04em;
}

.sp-hero-copy {
    max-width:
        560px;

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

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

    font-size:
        clamp(
            14px,
            2.5vw,
            17px
        );

    line-height:
        1.7;
}


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

.sp-sr-only {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}

.sp-not-sr-only {
    position:
        static;

    width:
        auto;

    height:
        auto;

    padding:
        initial;

    margin:
        initial;

    overflow:
        visible;

    clip:
        auto;

    white-space:
        normal;
}


/* ==========================================================
   High Contrast
   ========================================================== */

@media (prefers-contrast: more) {

    body {
        font-weight:
            var(--sp-weight-medium);
    }

    .sp-caption,
    .sp-helper,
    .sp-text-muted,
    .sp-timestamp {
        color:
            var(--sp-text-secondary);
    }

}


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

@media (max-width: 768px) {

    .sp-modal-title {
        font-size:
            22px;
    }

    .sp-card-title {
        font-size:
            16px;
    }

    .sp-hero-title {
        font-size:
            clamp(
                30px,
                8vw,
                44px
            );
    }

}

@media (max-width: 430px) {

    .sp-payment-currency {
        font-size:
            28px;
    }

    .sp-dashboard-title {
        font-size:
            24px;
    }

    .sp-nav-label {
        font-size:
            9px;
    }

}


/* ==========================================================
   Print Typography
   ========================================================== */

@media print {

    html,
    body {
        color:
            #000000 !important;

        background:
            #ffffff !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size:
            11pt;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .sp-card-title,
    .sp-dashboard-title,
    .sp-modal-title {
        color:
            #000000 !important;

        text-shadow:
            none !important;
    }

    p,
    .sp-text,
    .sp-caption,
    .sp-helper,
    .sp-card-subtitle,
    .sp-text-secondary,
    .sp-text-tertiary,
    .sp-text-muted {
        color:
            #333333 !important;
    }

    .sp-text-gradient,
    .sp-text-gradient-success {
        color:
            #000000 !important;

        background:
            none !important;

        -webkit-text-fill-color:
            currentColor !important;
    }

}


/* ==========================================================
   End PATCH-SIMPLPAY-022G-01H
   ========================================================== */