@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}


:root {

    --green: #00ff51;
    --green-dark: #01cd15;

    --bg: #050b14;
    --card: #0d1626;

    --text: #ffffff;
    --muted: #9ca3af;

}


/* BODY */

body {

    min-height: 100vh;
    background:
        radial-gradient(circle at top,
            rgba(0, 255, 81, .15),
            transparent 35%),
        linear-gradient(135deg,
            #050b14,
            #020617);

    color: white;
}



/* MAIN */

.container {

    width: min(900px, 92%);

    margin: 60px auto;

}



.container h1 {
    text-align: center;
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 40px;
}



/* CARDS */

.card {

    background:
        rgba(13, 22, 38, .75);

    backdrop-filter: blur(15px);

    padding: 30px;

    border-radius: 25px;

    margin-bottom: 30px;


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


    box-shadow:
        0 20px 50px rgba(0, 0, 0, .35);


    transition: .35s;

}



.card:hover {

    border-color: rgba(0, 255, 81, .45);

    box-shadow:
        0 0 35px rgba(0, 255, 81, .12);

}





.card h2 {

    margin-bottom: 25px;

    font-size: 22px;

    color: var(--green);

}




/* INPUTS */


.input-group {

    margin-bottom: 20px;

}



.input-group label {

    display: block;

    margin-bottom: 8px;

    color: #d1d5db;

    font-weight: 600;

}



input,
textarea {


    width: 100%;

    padding: 15px 18px;

    border-radius: 14px;

    outline: none;

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


    background: #08111f;

    color: white;

    font-size: 15px;

    transition: .3s;

}



textarea {

    min-height: 100px;

    resize: none;

}



input:focus,
textarea:focus {


    border-color: var(--green);

    box-shadow:
        0 0 18px rgba(0, 255, 81, .25);

}



/* SELECT */




/* RECEIVER */


.receiver {


    margin-top: 20px;

    padding: 25px;



    border-radius: 20px;


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


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

}



.receiver-header h3 {

    color: white;

    margin-bottom: 20px;

}



/* BUTTONS */


.primary,
.submit-btn {


    width: 100%;

    padding: 16px;


    border: none;

    border-radius: 50px;


    cursor: pointer;


    font-size: 16px;

    font-weight: 800;


    transition: .35s;


}


.deleteReceiver {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    padding: 16px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    transition: .35s;
    color: black;
}

.primary {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #001b08;
    box-shadow: 0 0 25px rgba(0, 255, 81, .25);
}



.primary:hover {

    transform: translateY(-3px);


    box-shadow:
        0 0 40px rgba(0, 255, 81, .45);

}

.deleteReceiver:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(0, 255, 81, .45);
}


.submit-btn {


    margin-top: 15px;

    background: transparent;


    color: white;


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

}



.submit-btn:hover {


    background:
        rgba(0, 255, 81, .1);


    color: var(--green);

}



/* =========================
   SCROLLBAR
========================= */


::-webkit-scrollbar {

    width: 8px;

}


::-webkit-scrollbar-track {

    background: #050b14;

}


::-webkit-scrollbar-thumb {

    background: #01cd15;

    border-radius: 20px;

}


::-webkit-scrollbar-thumb:hover {

    background: #00ff51;

}



/* =========================
   BUTTON ICON EFFECT
========================= */


.primary {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



















/* ==========================================
   SMART DELIVERY SERVICE ZONES
========================================== */


.service-zones {

    position: relative;

    isolation: isolate;

    width: min(1050px, 95%);

    margin: 120px auto;

    padding: 65px;

    border-radius: 40px;


    background:
        linear-gradient(145deg,
            rgba(13, 22, 38, .95),
            rgba(3, 8, 18, .96));


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


    backdrop-filter: blur(20px);


    box-shadow:

        0 30px 80px rgba(0, 0, 0, .45);


    overflow: hidden;

}



/* GLOW EFFECTS */


.service-zones::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(0, 255, 81, .12);
    filter: blur(130px);
    top: -250px;
    right: -180px;
}



.service-zones::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(1, 205, 21, .10);
    filter: blur(120px);
    bottom: -200px;
    left: -150px;
}



/* ==========================================
   TITLE
========================================== */


.section-title {


    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;


}



.section-badge {


    display: inline-flex;


    align-items: center;

    gap: 8px;


    padding: 11px 24px;


    border-radius: 50px;


    background:

        rgba(0, 255, 81, .10);


    border:

        1px solid rgba(0, 255, 81, .3);


    color: #00ff51;


    font-weight: 800;


    font-size: 14px;


    margin-bottom: 22px;


}



.section-title h2 {


    font-size: 48px;


    font-weight: 900;


    color: white;


    letter-spacing: -1px;


}



.section-title h2::after {


    content: "";


    display: block;


    width: 100px;


    height: 5px;


    margin: 20px auto;


    border-radius: 50px;


    background:

        linear-gradient(90deg,
            #00ff51,
            #01cd15);


}



.section-title p {


    max-width: 650px;


    margin: auto;


    color: #aeb8c5;


    font-size: 17px;


    line-height: 1.8;


}



/* ==========================================
   SELECT AREA
========================================== */


.zone-selector {


    width: min(600px, 100%);

    margin: 0 auto 40px;


}



.zone-selector label {


    display: block;


    margin-bottom: 12px;


    color: white;


    font-weight: 800;


    font-size: 16px;


}







/* ==========================================
   PLACEHOLDER
========================================== */


.placeholder {


    text-align: center;

    padding: 35px;


}



.placeholder-icons {


    font-size: 45px;


    margin-bottom: 25px;


    letter-spacing: 8px;


}



.placeholder h3 {


    color: white;


    font-size: 25px;


    margin-bottom: 12px;


}



.placeholder p {


    color: #9ca3af;


    line-height: 1.7;


}






/* ==========================================
   ZONES STATS
========================================== */


.zones-stats {


    display: flex;


    justify-content: center;


    gap: 25px;


    margin-top: 35px;


}



.stat-box {


    flex: 1;


    max-width: 220px;


    padding: 22px;


    text-align: center;


    border-radius: 22px;


    background:

        rgba(0, 255, 81, .06);



    border:

        1px solid rgba(0, 255, 81, .18);



    transition: .35s;



}



.stat-box:hover {


    transform: translateY(-5px);


    border-color: #00ff51;



    box-shadow:

        0 0 30px rgba(0, 255, 81, .15);


}



.stat-box strong {


    display: block;


    color: #00ff51;


    font-size: 32px;


    font-weight: 900;


    margin-bottom: 8px;


}



.stat-box span {


    color: #cbd5e1;


    font-size: 14px;


    font-weight: 600;


}






/* ==========================================
   RECOMMENDED TRANSPORT
========================================== */


.transport-card.recommended {


    border-color: #00ff51;


    box-shadow:

        0 0 35px rgba(0, 255, 81, .20);


}



.best-choice {


    display: inline-flex;


    margin-top: 12px;


    padding: 7px 15px;


    border-radius: 50px;


    background:

        linear-gradient(135deg,
            #00ff51,
            #01cd15);


    color: #001b08;


    font-size: 13px;


    font-weight: 900;


    animation: pulseChoice 2s infinite;


}



@keyframes pulseChoice {


    0% {

        box-shadow:
            0 0 0 0 rgba(0, 255, 81, .5);

    }


    70% {

        box-shadow:
            0 0 0 12px rgba(0, 255, 81, 0);

    }


    100% {

        box-shadow:
            0 0 0 0 rgba(0, 255, 81, 0);

    }


}










/* =====================================
   SMART CUSTOM ZONE SELECT
===================================== */


.custom-zone-select {
    position: relative;
    width: 100%;
    z-index: 100;
}



/* =========================
   MAIN SELECT BOX
========================= */


.zone-select-box {


    height: 62px;


    width: 100%;


    padding: 0 22px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    background:

        linear-gradient(135deg,
            rgba(13, 22, 38, .95),
            rgba(8, 17, 31, .95));



    border:

        1px solid rgba(0, 255, 81, .25);



    border-radius: 18px;



    color: white;


    cursor: pointer;



    font-size: 16px;


    font-weight: 700;



    transition: .35s;



    box-shadow:

        0 15px 35px rgba(0, 0, 0, .25);



    backdrop-filter: blur(15px);



}





.zone-select-box span {


    color: #ffffff;


    transition: .3s;


}



.zone-select-box i {


    font-style: normal;


    color: #00ff51;


    font-size: 18px;


    transition: .35s;


}





/* HOVER */


.zone-select-box:hover {


    border-color: #00ff51;


    box-shadow:

        0 0 30px rgba(0, 255, 81, .25);



}






/* ACTIVE */


.custom-zone-select.active .zone-select-box {


    border-color: #00ff51;


    box-shadow:

        0 0 35px rgba(0, 255, 81, .35);



}



.custom-zone-select.active .zone-select-box i {


    transform: rotate(180deg);


}






/* =========================
   OPTIONS LIST
========================= */


.zone-options {


    position: absolute;



    top: 72px;


    left: 0;



    width: 100%;



    max-height: 330px;



    overflow-y: auto;



    padding: 10px;



    display: none;



    background:


        linear-gradient(180deg,
            rgba(13, 22, 38, .98),
            rgba(5, 11, 20, .98));



    border:

        1px solid rgba(0, 255, 81, .25);



    border-radius: 22px;



    box-shadow:

        0 25px 70px rgba(0, 0, 0, .65);



    backdrop-filter: blur(20px);



    animation:

        zoneOpen .25s ease;



}






.custom-zone-select.active .zone-options {


    display: block;


}







/* OPTION ITEM */


.zone-options div {


    padding:

        14px 18px;



    border-radius: 14px;



    color: #e5e7eb;



    cursor: pointer;



    font-size: 15px;



    font-weight: 600;



    transition: .25s;



    margin-bottom: 3px;



}





.zone-options div:hover {


    background:

        rgba(0, 255, 81, .12);



    color: #00ff51;



    transform: translateX(5px);



}





.zone-options div:first-child {


    color: #00ff51;


}






/* =========================
   SCROLLBAR
========================= */


.zone-options::-webkit-scrollbar {


    width: 7px;


}



.zone-options::-webkit-scrollbar-track {


    background: #050b14;


    border-radius: 20px;


}



.zone-options::-webkit-scrollbar-thumb {


    background: #01cd15;


    border-radius: 20px;


}



.zone-options::-webkit-scrollbar-thumb:hover {


    background: #00ff51;


}







/* =========================
   OPEN ANIMATION
========================= */


@keyframes zoneOpen {


    from {


        opacity: 0;


        transform:

            translateY(-12px);



    }


    to {


        opacity: 1;


        transform:

            translateY(0);



    }


}











/* ==========================================
   TRANSPORT RESULT NEW DESIGN
========================================== */





/* SELECTED ZONE */

.zone-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    color: white;

    font-size: 26px;

    font-weight: 900;

    margin-bottom: 35px;

}



.zone-title strong {

    color: #00ff51;

}





/* ==========================================
   TRANSPORT CARD
========================================== */


.transport-card {
    position: relative;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: start;
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(0, 255, 81, .05));
    border: 1px solid rgba(0, 255, 81, .18);
    transition: .35s;
    overflow: hidden;
}

.transport-left {

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;
}

.transport-right {

    display: flex;
    flex-direction: column;
    gap: 18px;
}

.transport-card::before {


    content: "";


    position: absolute;


    left: 0;

    top: 0;


    width: 5px;

    height: 100%;


    background:
        linear-gradient(180deg,
            #00ff51,
            #01cd15);


}







/* HEADER */





.transport-header h2 {


    margin-bottom: 1rem;


    color: #00ff51;


    font-size: 26px;


    font-weight: 900;


}



/* ==========================================
   SMART DELIVERY TRANSPORT PREMIUM CARDS
========================================== */


.transport-result {

    padding: 40px;

    border-radius: 40px;

    background:
        linear-gradient(145deg,
            rgba(13, 22, 38, .95),
            rgba(5, 11, 20, .95));

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

    backdrop-filter: blur(25px);

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

}



/* ZONE TITLE */






.zone-pin {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;


    background:
        radial-gradient(circle,
            rgba(0, 255, 81, .25),
            rgba(0, 255, 81, .05));


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


    box-shadow:

        0 0 25px rgba(0, 255, 81, .25);

}




/* CARD */









.transport-card:hover {


    transform:

        translateY(-8px);


    border-color: #00ff51;


    box-shadow:

        0 25px 60px rgba(0, 255, 81, .18);


}



/* LEFT LINE */


.transport-card::after {


    content: "";


    position: absolute;


    left: 0;

    top: 0;


    width: 6px;


    height: 100%;


    background:

        linear-gradient(180deg,
            #00ff51,
            #01cd15);

}



/* ICON */


.transport-icon {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;

    justify-content: center;
    border-radius: 30px;
    font-size: 50px;
    background: rgba(0, 255, 81, .12);
    border: 1px solid rgba(0, 255, 81, .35);
    box-shadow: inset 0 0 20px rgba(0, 255, 81, .15);
}




/* CONTENT */


.transport-header {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}



.transport-header h2 {


    width: 100%;


    color: #00ff51;


    font-size: 28px;


    font-weight: 900;


}





/* STATUS */


.transport-status {


    padding: 8px 18px;


    border-radius: 50px;


    background:


        linear-gradient(135deg,
            #00ff51,
            #01cd15);


    color: #001b08;


    font-size: 13px;


    font-weight: 900;


}



/* BEST */




/* BODY */


.transport-body {
    position: relative;
    margin-top: 25px;
}



.transport-item {


    display: flex;

    align-items: center;


    padding: 15px 20px;


    margin-bottom: 12px;


    border-radius: 18px;


    background:

        rgba(0, 0, 0, .18);


    color: #f1f5f9;


    font-weight: 700;


    border:

        1px solid rgba(255, 255, 255, .06);


}




/* RECOMMENDATION */


.recommendation {


    margin-top: 25px;


    padding: 25px;


    border-radius: 25px;


    background:

        linear-gradient(135deg,
            rgba(0, 255, 81, .12),
            rgba(0, 255, 81, .04));


    border:

        1px solid rgba(0, 255, 81, .25);


}



.recommendation h4 {


    display: flex;


    align-items: center;


    gap: 8px;


    color: #00ff51;


    font-size: 17px;


    margin-bottom: 12px;


}



.recommendation p {


    color: #d1d5db;


    line-height: 1.8;


}





/* CAR SPECIAL */


.transport-card.car {


    border-color:

        rgba(0, 255, 81, .45);


}



.transport-card.car .transport-icon {


    background:

        rgba(0, 255, 81, .18);


}











/* ================================
   SMART CUSTOM SELECT V2
================================ */


.custom-select {

    position: relative;

    width: 100%;
}



/* დამალული რეალური select */

.custom-select select {
    display: none;
}




/* მთავარი ღილაკი */

.select-box {
    height: 62px;
    width: 100%;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(13, 22, 38, .95), rgba(8, 17, 31, .95));
    border: 1px solid rgba(0, 255, 81, .25);
    border-radius: 18px;
    color: white;
    cursor: pointer;
    transition: .35s;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
    backdrop-filter: blur(20px);
}




.select-box span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}


.select-box i {
    color: #00ff51;
    font-size: 18px;
    transition: .35s;
}





.select-box:hover {
    border-color: #00ff51;
    box-shadow: 0 0 30px rgba(0, 255, 81, .25);
}





/* ACTIVE */


.custom-select.active .select-box {
    border-color: #00ff51;
    box-shadow: 0 0 35px rgba(0, 255, 81, .35);
}


.custom-select.active .select-box i {
    transform: rotate(180deg);
}







/* DROPDOWN */


.select-options {
    top: 72px;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    display: none;
    background: linear-gradient(180deg, rgba(13, 22, 38, .98), rgba(5, 11, 20, .98));
    border: 1px solid rgba(0, 255, 81, .25);
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .65);
    backdrop-filter: blur(20px);
    animation: selectOpen .25s ease;
}




.custom-select.active .select-options {
    display: block;
}







/* OPTION */


.select-options div {
    padding: 14px 18px;
    border-radius: 14px;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: .25s;
    margin-bottom: 4px;
}


.select-options div:hover {
    background: rgba(0, 255, 81, .12);
    color: #00ff51;
    transform: translateX(5px);
}







/* SCROLL */


.select-options::-webkit-scrollbar {
    width: 7px;
}



.select-options::-webkit-scrollbar-track {
    background: #050b14;
}


.select-options::-webkit-scrollbar-thumb {
    background: #01cd15;
    border-radius: 20px;
}





@keyframes selectOpen {


    from {


        opacity: 0;


        transform: translateY(-12px);


    }


    to {


        opacity: 1;


        transform: translateY(0);


    }


}

































/* =========================================================
   PAYMENT QR SECTION
========================================================= */

.payment-qr-section {
    width: 100%;
    max-width: 1000px;
    margin: 35px auto;
    padding: 28px;
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(12px);
}


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

.payment-qr-header {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;
}

.payment-qr-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: rgba(0, 255, 81, 0.10);
    border: 1px solid rgba(0, 255, 81, 0.18);

    color: #00ff51;
    font-size: 25px;

    flex-shrink: 0;
}

.payment-qr-header h2 {
    margin: 0;

    font-size: 1.35rem;
    font-weight: 700;
}

.payment-qr-header p {
    margin: 4px 0 0;

    opacity: 0.65;
    font-size: 0.9rem;
}


/* ================= GRID ================= */

.payment-qr-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}


/* ================= BANK CARD ================= */

.payment-bank-card {
    position: relative;

    padding: 20px;

    border-radius: 18px;

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

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

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

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

    border-color: rgba(0, 255, 81, 0.22);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);
}


/* ================= BANK HEADER ================= */

.bank-card-header {
    margin-bottom: 18px;
}

.bank-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-name h3 {
    margin: 0;

    font-size: 1rem;
    font-weight: 700;
}

.bank-name span:not(.bank-logo-placeholder) {
    display: block;

    margin-top: 3px;

    font-size: 0.78rem;
    opacity: 0.55;
}


/* ================= BANK LOGO PLACEHOLDER ================= */

.bank-logo-placeholder {
    width: 48px;
    height: 48px;

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

    border-radius: 12px;

    font-size: 0.8rem;
    font-weight: 800;

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

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


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

.qr-wrapper {
    width: 100%;

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

    padding: 15px 0;
}

.qr-image-button {
    position: relative;

    width: min(100%, 240px);
    aspect-ratio: 1 / 1;

    padding: 12px;

    border: 0;
    outline: none;

    background: #ffffff;

    border-radius: 16px;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.qr-image-button:hover {
    transform: scale(1.025);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20);
}

.qr-image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 8px;
}




/* ================= ACCOUNT ================= */

.bank-account {
    margin-top: 12px;
}

.bank-account > span {
    display: block;

    margin-bottom: 6px;

    font-size: 0.76rem;

    opacity: 0.55;
}

.account-row {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}

.account-row strong {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.2px;
}

.copy-account {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border: 0;
    border-radius: 9px;

    cursor: pointer;

    background: rgba(0, 255, 81, 0.08);

    color: #00ff51;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.copy-account:hover {
    background: rgba(0, 255, 81, 0.15);

    transform: scale(1.05);
}

.copy-account i {
    font-size: 17px;
}

.copy-status {
    display: block;

    min-height: 15px;

    margin-top: 5px;

    font-size: 0.7rem;

    color: #00ff51;
}


/* ================= INFO ================= */

.payment-qr-note {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 20px;
    padding-top: 17px;

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

    font-size: 0.78rem;

    opacity: 0.65;
}

.payment-qr-note i {
    color: #00ff51;

    font-size: 18px;

    flex-shrink: 0;
}









::selection {
    background-color: #003d00;
    color: #00ff51;
}












/* =========================================
   SUCCESS MODAL
========================================= */


.success-modal {

    position: fixed;

    inset: 0;

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

    backdrop-filter: blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

}



.success-modal.active {

    opacity:1;

    visibility:visible;

}



/* =========================================
   SUCCESS BOX
========================================= */


.success-box {

    width:90%;

    max-width:420px;

    background:#111;

    border-radius:25px;

    padding:35px;

    text-align:center;

    color:white;

    border:1px solid #00ff51;

    box-shadow:
    0 0 40px rgba(0,255,81,.35);


    transform:
    translateY(40px)
    scale(.9);


    opacity:0;


    transition:
    .45s cubic-bezier(.34,1.56,.64,1);

}



.success-modal.active .success-box {

    transform:
    translateY(0)
    scale(1);


    opacity:1;

}



/* =========================================
   SUCCESS ICON
========================================= */


.success-icon {

    width:80px;

    height:80px;


    margin:0 auto 20px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:45px;

    font-weight:bold;


    color:white;


    border-radius:50%;


    background:
    linear-gradient(
        135deg,
        #00ff51,
        #01cd15
    );

    animation:
    successPulse 1.5s infinite;
}



@keyframes successPulse {

    0% {
        transform:scale(1);
        box-shadow:
        0 0 0 0 rgba(0,255,81,.5);
    }


    70% {
        transform:scale(1.05);
        box-shadow:
        0 0 0 20px rgba(0,255,81,0);
    }

    100% {
        transform:scale(1);
    }
}


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


.success-box h2 {
    margin-block:20px;
    color:var(--green);
}


/* =========================================
   ORDER NUMBER
========================================= */


.order-number {
    margin:25px 0;
    padding:15px;
    background:#1b1b1b;
    border-radius:15px;
    animation:
    idShow .6s ease .3s both;
}


.order-number strong {
    display:block;
    margin-top:10px;
    color:#00ff51;
    font-size:24px;
}


@keyframes idShow {

    from {
        opacity:0;
        transform:
        translateY(15px);
    }

    to {
        opacity:1;
        transform:
        translateY(0);
    }
}


/* =========================================
   CLOSE BUTTON
========================================= */


#closeSuccessModal {
    width:100%;
    padding:12px;
    border:none;
    border-radius:12px;
    background:#00ff51;
    color:#000;
    font-weight:bold;
    cursor:pointer;
    transition:.3s ease;
}


#closeSuccessModal:hover {
    transform:translateY(-3px);
}













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

@media (max-width: 768px) {

    .payment-qr-section {
        padding: 22px;

        margin: 25px auto;
    }

    .payment-qr-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .payment-bank-card {
        padding: 18px;
    }

    .qr-image-button {
        width: min(100%, 220px);
    }

}


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

@media (max-width: 480px) {

    .payment-qr-section {
        padding: 16px;

        border-radius: 17px;
    }

    .payment-qr-header {
        gap: 10px;

        margin-bottom: 18px;
    }

    .payment-qr-icon {
        width: 42px;
        height: 42px;

        border-radius: 11px;

        font-size: 21px;
    }

    .payment-qr-header h2 {
        font-size: 1.15rem;
    }

    .payment-qr-header p {
        font-size: 0.78rem;
    }

    .payment-bank-card {
        padding: 15px;

        border-radius: 15px;
    }

    .bank-logo-placeholder {
        width: 42px;
        height: 42px;

        border-radius: 10px;
    }

    .bank-name h3 {
        font-size: 0.92rem;
    }

    .qr-image-button {
        width: min(100%, 200px);

        padding: 10px;

        border-radius: 14px;
    }

    .account-row strong {
        font-size: 0.7rem;
    }

    .payment-qr-note {
        align-items: flex-start;

        font-size: 0.72rem;
    }

}


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


@media(max-width:768px) {



    .select-box {
        height: 58px;
        border-radius: 16px;
        padding: 0 18px;
    }


    .select-options {
        border-radius: 18px;
    }


    .transport-result {
        padding: 20px;
    }



    .transport-card {
        flex-direction: column;
        padding: 25px;
    }


    .transport-icon {
        width: 80px;
        height: 80px;
        font-size: 40px;
    }


    .transport-header h2 {
        font-size: 23px;
    }



    .zone-title {
        font-size: 22px;
    }


    .transport-card {
        flex-direction: column;
        padding: 22px;
    }


    .transport-header {
        flex-direction: column;
    }

    .transport-icon {
        width: 75px;
        height: 75px;
        font-size: 38px;
    }


    .transport-header h2 {
        font-size: 22px;
    }

    .zone-title {
        font-size: 21px;
    }

    .zones-stats {
        flex-direction: column;
    }


    .stat-box {
        max-width: none;
    }


    .service-zones {
        padding: 30px 20px;
        margin: 70px auto;
    }


    .section-title h2 {
        font-size: 32px;
    }

    .section-title p {
        font-size: 15px;
    }

    .transport-result {
        padding: 20px;
    }


    .transport-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }


    .transport-icon {
        width: 70px;
        height: 70px;
        padding: 22px;
        margin: 10px auto;
    }


    .transport-card {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .transport-left {
        align-items: center;
        text-align: center;
    }

    .transport-right {
        width: 100%;
    }
}