/* =========================================================
   DISHA COMPUTER EDUCATION
   PREMIUM ONLINE ADMISSION
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    min-height: 100vh;

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

    color: #fff;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,0,55,.16),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(255,30,70,.12),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #050507,
            #120309,
            #050507
        );

    overflow-x: hidden;
}



/* =========================================================
   ANIMATED BACKGROUND
   ========================================================= */

.apply-bg {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: -1;
}


.apply-bg span {

    position: absolute;

    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ff1744;

    box-shadow:
        0 0 15px #ff1744,
        0 0 35px rgba(255,0,55,.7);

    opacity: .45;

    animation:
        floatingParticle
        linear infinite;
}


.apply-bg span:nth-child(1) {
    left: 8%;
    top: 90%;
    animation-duration: 12s;
}

.apply-bg span:nth-child(2) {
    left: 20%;
    top: 80%;
    animation-duration: 17s;
}

.apply-bg span:nth-child(3) {
    left: 38%;
    top: 95%;
    animation-duration: 14s;
}

.apply-bg span:nth-child(4) {
    left: 55%;
    top: 85%;
    animation-duration: 19s;
}

.apply-bg span:nth-child(5) {
    left: 72%;
    top: 92%;
    animation-duration: 15s;
}

.apply-bg span:nth-child(6) {
    left: 87%;
    top: 75%;
    animation-duration: 18s;
}

.apply-bg span:nth-child(7) {
    left: 48%;
    top: 70%;
    animation-duration: 13s;
}


@keyframes floatingParticle {

    0% {
        transform:
            translateY(0)
            scale(.5);

        opacity: 0;
    }

    15% {
        opacity: .7;
    }

    50% {
        transform:
            translateY(-45vh)
            translateX(40px)
            scale(1);
    }

    100% {
        transform:
            translateY(-110vh)
            translateX(-40px)
            scale(.2);

        opacity: 0;
    }

}



/* =========================================================
   NAVBAR
   ========================================================= */

.apply-navbar {

    min-height: 70px;

    padding:
        12px
        4%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background:
        rgba(5,5,8,.82);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid
        rgba(255,0,55,.3);

    position: sticky;

    top: 0;

    z-index: 100;
}


.apply-logo {

    font-size: 19px;

    font-weight: 900;

    letter-spacing: .5px;

    text-shadow:
        0 0 10px rgba(255,0,55,.5);
}


.back-btn {

    text-decoration: none;

    color: #ddd;

    padding:
        9px 16px;

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

    border-radius: 30px;

    background:
        rgba(255,255,255,.04);

    transition: .3s ease;
}


.back-btn:hover {

    color: #fff;

    border-color:
        #ff1744;

    transform:
        translateX(-4px);

    box-shadow:
        0 0 20px
        rgba(255,0,55,.2);
}


.admission-status {

    padding:
        8px 14px;

    border-radius: 30px;

    color: #ff526e;

    border:
        1px solid
        rgba(255,0,55,.4);

    background:
        rgba(255,0,55,.08);

    font-size: 11px;

    font-weight: 900;

    animation:
        statusPulse
        2s infinite;
}


@keyframes statusPulse {

    0%,100% {
        box-shadow:
            0 0 5px
            rgba(255,0,55,.1);
    }

    50% {
        box-shadow:
            0 0 25px
            rgba(255,0,55,.4);
    }
}



/* =========================================================
   MAIN
   ========================================================= */

.apply-main {

    width: 92%;

    max-width: 1250px;

    margin:
        55px auto
        80px;

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 70px;

    align-items: center;
}



/* =========================================================
   INTRO
   ========================================================= */

.apply-intro {

    animation:
        introIn
        .9s ease both;
}


@keyframes introIn {

    from {
        opacity: 0;

        transform:
            translateX(-40px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


.intro-badge {

    display: inline-block;

    padding:
        9px 15px;

    border:
        1px solid
        rgba(255,0,55,.5);

    border-radius: 30px;

    color: #ff526e;

    background:
        rgba(255,0,55,.08);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.5px;

    box-shadow:
        0 0 25px
        rgba(255,0,55,.08);
}


.apply-intro h1 {

    margin:
        25px 0 15px;

    font-size:
        clamp(40px,5vw,68px);

    line-height: 1;

    font-weight: 950;
}


.apply-intro h1 span {

    display: block;

    color: #ff1744;

    text-shadow:
        0 0 12px
        rgba(255,0,55,.8),

        0 0 40px
        rgba(255,0,55,.25);
}


.apply-intro > p {

    max-width: 500px;

    color: #aaa;

    line-height: 1.8;

    font-size: 15px;
}



/* =========================================================
   FEATURES
   ========================================================= */

.intro-features {

    margin-top: 35px;

    display: grid;

    gap: 13px;
}


.intro-features > div {

    display: grid;

    grid-template-columns:
        45px 1fr;

    column-gap: 12px;

    padding: 12px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.035);

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

    transition: .3s ease;
}


.intro-features > div:hover {

    transform:
        translateX(8px);

    border-color:
        rgba(255,0,55,.35);

    background:
        rgba(255,0,55,.05);
}


.intro-features span {

    grid-row: span 2;

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        rgba(255,0,55,.12);

    border:
        1px solid
        rgba(255,0,55,.3);

    font-size: 20px;
}


.intro-features b {

    font-size: 13px;
}


.intro-features small {

    color: #888;

    margin-top: 4px;

    font-size: 11px;
}


.secure-note {

    margin-top: 25px;

    color: #777;

    font-size: 11px;
}



/* =========================================================
   APPLICATION CARD
   ========================================================= */

.application-card {

    position: relative;

    padding: 34px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(25,7,12,.96),
            rgba(8,7,10,.96)
        );

    border:
        1px solid
        rgba(255,0,55,.4);

    box-shadow:

        0 30px 80px
        rgba(0,0,0,.65),

        0 0 50px
        rgba(255,0,55,.08),

        inset 0 0 40px
        rgba(255,0,55,.025);

    overflow: hidden;

    animation:
        formIn
        .9s
        .15s
        ease
        both;
}


@keyframes formIn {

    from {

        opacity: 0;

        transform:
            translateY(35px)
            scale(.97);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.form-glow {

    position: absolute;

    width: 280px;
    height: 280px;

    right: -140px;
    top: -140px;

    background:
        radial-gradient(
            circle,
            rgba(255,0,55,.22),
            transparent 68%
        );

    pointer-events: none;
}



/* =========================================================
   FORM HEADER
   ========================================================= */

.application-header {

    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 28px;
}


.application-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #d90429,
            #ff1744
        );

    font-size: 25px;

    box-shadow:
        0 0 30px
        rgba(255,0,55,.3);

    animation:
        iconFloat
        3s
        ease-in-out
        infinite;
}


@keyframes iconFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


.application-header span {

    color: #ff526e;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.application-header h2 {

    margin:
        4px 0;

    font-size: 27px;
}


.application-header p {

    margin: 0;

    color: #777;

    font-size: 11px;
}



/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {

    position: relative;

    margin-bottom: 17px;
}


.form-group label {

    display: block;

    margin-bottom: 7px;

    color: #ccc;

    font-size: 11px;

    font-weight: 700;
}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding:
        13px 15px;

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

    border-radius: 11px;

    outline: none;

    background:
        rgba(0,0,0,.35);

    color: #fff;

    font-family: inherit;

    font-size: 12px;

    transition:
        .3s ease;
}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color: #555;
}


.form-group select option {

    background: #12070a;

    color: #fff;
}


.form-group textarea {

    resize: vertical;

    min-height: 82px;
}


.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {

    border-color:
        rgba(255,0,55,.35);
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        #ff1744;

    background:
        rgba(255,0,55,.035);

    box-shadow:
        0 0 0 3px
        rgba(255,0,55,.07),

        0 0 20px
        rgba(255,0,55,.08);

    transform:
        translateY(-1px);
}



/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.submit-application {

    width: 100%;

    margin-top: 7px;

    padding:
        16px 20px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #fff;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .7px;

    background:
        linear-gradient(
            100deg,
            #b00020,
            #ff1744,
            #ff365c
        );

    background-size:
        200% 100%;

    box-shadow:
        0 12px 30px
        rgba(255,0,55,.25);

    transition: .35s ease;

    animation:
        buttonGradient
        4s
        linear
        infinite;
}


@keyframes buttonGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.submit-application:hover {

    transform:
        translateY(-3px)
        scale(1.01);

    box-shadow:
        0 18px 40px
        rgba(255,0,55,.4);
}


.submit-arrow {

    font-size: 18px;

    transition: .3s ease;
}


.submit-application:hover
.submit-arrow {

    transform:
        translateX(6px);
}


.submit-application.sending {

    pointer-events: none;

    animation:
        sendingPulse
        .7s
        infinite alternate;
}


@keyframes sendingPulse {

    from {
        box-shadow:
            0 0 15px
            rgba(255,0,55,.25);
    }

    to {
        box-shadow:
            0 0 40px
            rgba(255,0,55,.65);
    }
}



/* =========================================================
   STATUS
   ========================================================= */

#applicationStatus {

    text-align: center;

    margin-top: 12px;

    color: #ff526e;

    font-size: 11px;
}


.whatsapp-hint {

    margin:
        15px 0 0;

    text-align: center;

    color: #666;

    font-size: 10px;
}



/* =========================================================
   FOOTER
   ========================================================= */

.apply-footer {

    padding:
        25px;

    text-align: center;

    color: #555;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    font-size: 11px;
}


.apply-footer span {

    color: #ff1744;

    padding:
        0 7px;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .apply-main {

        grid-template-columns: 1fr;

        gap: 40px;

        max-width: 650px;
    }

    .apply-intro {

        text-align: center;
    }

    .apply-intro > p {

        margin-left: auto;
        margin-right: auto;
    }

    .intro-features {

        text-align: left;
    }
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .apply-navbar {

        flex-wrap: wrap;

        justify-content: center;
    }

    .apply-logo {

        order: -1;

        width: 100%;

        text-align: center;

        font-size: 16px;
    }

    .apply-main {

        width: 92%;

        margin-top: 35px;
    }

    .application-card {

        padding: 22px;

        border-radius: 22px;
    }

    .apply-intro h1 {

        font-size: 42px;
    }

    .application-header h2 {

        font-size: 23px;
    }

    .admission-status {

        font-size: 9px;
    }
}
/* =========================================================
   APPLICATION SUCCESS OVERLAY
========================================================= */

.success-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, .82);

    backdrop-filter:
        blur(18px);

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

    animation:
        successOverlayIn
        .45s
        ease
        both;

}


@keyframes successOverlayIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}



/* =========================================================
   SUCCESS CARD
========================================================= */

.success-card {

    position: relative;

    width: 100%;

    max-width: 440px;

    padding: 42px 32px 30px;

    text-align: center;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(35, 7, 14, .98),
            rgba(8, 6, 10, .98)
        );

    border:
        1px solid
        rgba(255, 23, 68, .55);

    box-shadow:

        0 40px 100px
        rgba(0, 0, 0, .8),

        0 0 80px
        rgba(255, 0, 55, .18),

        inset 0 0 50px
        rgba(255, 0, 55, .04);

    overflow: hidden;

    animation:
        successCardIn
        .65s
        cubic-bezier(.17,.67,.25,1.25)
        both;

}


@keyframes successCardIn {

    0% {

        opacity: 0;

        transform:
            translateY(50px)
            scale(.75)
            rotateX(12deg);

    }

    70% {

        transform:
            translateY(-8px)
            scale(1.03);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotateX(0);

    }

}



/* =========================================================
   CARD GLOW
========================================================= */

.success-card::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -160px;
    left: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255, 23, 68, .35),
            transparent 70%
        );

    pointer-events: none;

}


.success-card::after {

    content: "";

    position: absolute;

    width: 100%;
    height: 1px;

    top: 0;
    left: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff1744,
            transparent
        );

    box-shadow:
        0 0 25px
        #ff1744;

}



/* =========================================================
   SUCCESS RING
========================================================= */

.success-ring {

    position: relative;

    width: 92px;
    height: 92px;

    margin:
        0 auto 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        2px solid
        rgba(255, 23, 68, .25);

    animation:
        successRingPulse
        2s
        ease-in-out
        infinite;

}


.success-ring::before {

    content: "";

    position: absolute;

    inset: -9px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 23, 68, .25);

    animation:
        ringRotate
        4s
        linear
        infinite;

}


.success-ring::after {

    content: "";

    position: absolute;

    inset: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 23, 68, .18),
            transparent 65%
        );

    z-index: -1;

}


@keyframes successRingPulse {

    0%, 100% {

        box-shadow:
            0 0 15px
            rgba(255, 23, 68, .2);

    }

    50% {

        box-shadow:
            0 0 45px
            rgba(255, 23, 68, .65);

    }

}


@keyframes ringRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}



/* =========================================================
   CHECK MARK
========================================================= */

.success-check {

    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: white;

    font-size: 40px;

    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            #b00020,
            #ff1744,
            #ff526e
        );

    box-shadow:
        0 0 35px
        rgba(255, 23, 68, .55);

    animation:
        checkPop
        .7s
        .2s
        cubic-bezier(.17,.67,.25,1.4)
        both;

}


@keyframes checkPop {

    0% {

        transform:
            scale(0)
            rotate(-45deg);

        opacity: 0;

    }

    70% {

        transform:
            scale(1.15)
            rotate(8deg);

    }

    100% {

        transform:
            scale(1)
            rotate(0);

        opacity: 1;

    }

}



/* =========================================================
   BADGE
========================================================= */

.success-badge {

    display: inline-block;

    padding:
        7px 14px;

    margin-bottom: 13px;

    border-radius: 30px;

    color: #ff526e;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.8px;

    background:
        rgba(255, 23, 68, .08);

    border:
        1px solid
        rgba(255, 23, 68, .3);

}



/* =========================================================
   HEADING
========================================================= */

.success-card h2 {

    margin:
        0 0 10px;

    color: #fff;

    font-size: 28px;

    font-weight: 900;

    text-shadow:
        0 0 20px
        rgba(255, 255, 255, .15);

}


.success-card > p {

    margin:
        0 auto 22px;

    max-width: 330px;

    color: #999;

    font-size: 12px;

    line-height: 1.7;

}



/* =========================================================
   WHATSAPP BOX
========================================================= */

.success-whatsapp {

    display: flex;

    align-items: center;

    gap: 14px;

    text-align: left;

    padding: 15px;

    margin-top: 10px;

    border-radius: 15px;

    background:
        rgba(255, 23, 68, .06);

    border:
        1px solid
        rgba(255, 23, 68, .2);

    box-shadow:
        inset 0 0 25px
        rgba(255, 23, 68, .025);

    animation:
        whatsappGlow
        1.5s
        ease-in-out
        infinite alternate;

}


.success-whatsapp > span {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        rgba(255, 23, 68, .12);

    font-size: 21px;

}


.success-whatsapp b {

    display: block;

    color: #fff;

    font-size: 12px;

}


.success-whatsapp small {

    display: block;

    margin-top: 5px;

    color: #777;

    font-size: 10px;

    line-height: 1.5;

}


@keyframes whatsappGlow {

    from {

        border-color:
            rgba(255, 23, 68, .15);

    }

    to {

        border-color:
            rgba(255, 23, 68, .5);

        box-shadow:
            0 0 25px
            rgba(255, 23, 68, .08);

    }

}



/* =========================================================
   LOADER DOTS
========================================================= */

.success-loader {

    display: flex;

    justify-content: center;

    gap: 7px;

    margin-top: 23px;

}


.success-loader span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff1744;

    box-shadow:
        0 0 12px
        rgba(255, 23, 68, .8);

    animation:
        successDots
        1s
        ease-in-out
        infinite;

}


.success-loader span:nth-child(2) {

    animation-delay:
        .15s;

}


.success-loader span:nth-child(3) {

    animation-delay:
        .30s;

}


@keyframes successDots {

    0%, 100% {

        opacity: .25;

        transform:
            translateY(0)
            scale(.7);

    }

    50% {

        opacity: 1;

        transform:
            translateY(-6px)
            scale(1);

    }

}



/* =========================================================
   SMALL TEXT
========================================================= */

.success-small {

    margin:
        10px 0 0 !important;

    color: #555 !important;

    font-size: 9px !important;

    letter-spacing: 1px;

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 500px) {

    .success-card {

        padding:
            34px 20px 25px;

        border-radius: 23px;

    }

    .success-ring {

        width: 82px;
        height: 82px;

    }

    .success-check {

        width: 60px;
        height: 60px;

        font-size: 34px;

    }

    .success-card h2 {

        font-size: 24px;

    }

}
/* ================= AI PAYMENT ================= */

.ai-payment-section {
    display: none;
    margin-top: 22px;
    padding: 22px;
    border: 1px solid #ff1744;
    border-radius: 18px;
    background: linear-gradient(
        145deg,
        rgba(255, 0, 55, 0.10),
        rgba(15, 0, 10, 0.75)
    );
    box-shadow:
        0 0 25px rgba(255, 0, 55, 0.18),
        inset 0 0 30px rgba(255, 0, 55, 0.04);
    animation: aiPaymentIn .5s ease;
}

.ai-payment-section.show {
    display: block !important;
}

.payment-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.payment-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg,#ff1744,#ff4569);
    box-shadow: 0 0 18px rgba(255,23,68,.45);
    font-size: 20px;
}

.payment-heading h3 {
    margin: 0;
    color: #fff;
}

.payment-heading p {
    margin: 4px 0 0;
    color: #aaa;
    font-size: 12px;
}

.fee-display,
.upi-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 9px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
}

.fee-display strong {
    color: #ff3157;
    font-size: 20px;
}

.upi-info b {
    color: #fff;
    font-size: 13px;
}

.qr-area {
    text-align: center;
    margin-top: 18px;
}

.qr-title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}

.qr-frame {
    display: inline-flex;
    padding: 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 0 30px rgba(255,23,68,.3);
}

.qr-frame img {
    width: 220px;
    height: 220px;
    display: block;
}

.qr-note {
    color: #aaa;
    font-size: 12px;
    line-height: 1.5;
}

.qr-note b {
    color: #ff3157;
}

.upi-pay-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    margin-top: 15px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    background: linear-gradient(90deg,#d50032,#ff1744,#ff3157);
    box-shadow: 0 8px 25px rgba(255,23,68,.25);
    transition: .3s;
}

.upi-pay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255,23,68,.45);
}

.payment-proof {
    margin-top: 20px;
}

.proof-title {
    color: #fff;
    font-weight: 700;
}

.payment-proof p {
    color: #aaa;
    font-size: 12px;
}

.upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 110px;
    padding: 15px;
    border: 1px dashed rgba(255,23,68,.7);
    border-radius: 14px;
    background: rgba(255,23,68,.04);
    cursor: pointer;
    transition: .3s;
    text-align: center;
}

.upload-box:hover {
    background: rgba(255,23,68,.10);
    box-shadow: 0 0 20px rgba(255,23,68,.15);
}

.upload-box input {
    display: none;
}

.upload-icon {
    font-size: 25px;
}

.upload-box strong {
    color: #fff;
    font-size: 13px;
}

.upload-box small {
    color: #888;
}

.preview-card {
    margin-top: 12px;
    text-align: center;
}

.preview-card img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 12px;
    border: 1px solid #ff1744;
}

.preview-card span {
    display: block;
    margin-top: 5px;
    color: #4cff88;
    font-size: 12px;
}

@keyframes aiPaymentIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* =====================================================
   AI TRANSACTION ID - PROFESSIONAL INPUT
===================================================== */

#transactionId {
    display: block;
    width: 100%;
    box-sizing: border-box;

    height: 52px;
    padding: 0 18px;

    margin-top: 10px;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid rgba(255, 31, 77, 0.45);
    border-radius: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 500;

    outline: none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}


/* Placeholder */

#transactionId::placeholder {
    color: rgba(255, 255, 255, 0.45);
}


/* Focus */

#transactionId:focus {

    border-color: #ff1744;

    background: rgba(255, 23, 68, 0.08);

    box-shadow:
        0 0 0 3px rgba(255, 23, 68, 0.12),
        0 0 25px rgba(255, 23, 68, 0.18);

    transform: translateY(-1px);
}


/* Hover */

#transactionId:hover {

    border-color: rgba(255, 23, 68, 0.75);

}


/* Label */

label[for="transactionId"] {

    display: block;

    margin-top: 14px;
    margin-bottom: 6px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

}


/* AI payment section transaction area */

#aiPaymentSection #transactionId {

    width: 100%;
    max-width: 100%;
}


/* Mobile */

@media (max-width: 600px) {

    #transactionId {

        height: 50px;
        font-size: 13px;
        padding: 0 15px;

    }

}
/* =====================================================
   TRANSACTION BOX
===================================================== */

.transaction-box {

    width: 100%;
    margin-top: 18px;

    padding: 16px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            rgba(255, 23, 68, 0.10),
            rgba(255, 255, 255, 0.025)
        );

    border: 1px solid rgba(255, 23, 68, 0.28);

    border-radius: 15px;

    position: relative;

    overflow: hidden;
}


.transaction-box::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #ff1744;

    box-shadow:
        0 0 15px #ff1744;
}


.transaction-box label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0 0 9px 0;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;
}


.transaction-box label span {

    color: #ff3158;

    font-size: 10px;

    letter-spacing: .5px;
}


.transaction-box small {

    display: block;

    margin-top: 8px;

    color: rgba(255,255,255,.52);

    font-size: 10px;

    line-height: 1.5;
}


.transaction-box #transactionId {

    margin: 0;

    width: 100%;

    height: 50px;

    box-sizing: border-box;
}