.customize-papan .group-field-1 .input-field {
    float: left;
    width: 100%;
    height: 317px;

    background:
        linear-gradient(
            145deg,
            #02090b 0%,
            #052f33 55%,
            #063b40 100%
        );

    border: 1px solid rgba(0, 220, 232, .30);

    box-shadow:
        inset 0 0 25px rgba(0, 220, 232, .06);
}


/* TEXTAREA */
.customize-papan .input-field textarea {
    width: 100%;
    max-width: 421px;
    min-height: 150px;

    font-weight: 400;
    font-size: 16px;
    resize: none;

    background:
        linear-gradient(
            145deg,
            rgba(2, 9, 11, .92),
            rgba(5, 47, 51, .88)
        );

    position: absolute;
    top: 50%;
    left: 50%;

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

    text-align: center;

    color: #ffffff;

    border: 1px solid rgba(0, 220, 232, .30);
    border-radius: 8px;

    outline: none;

    box-shadow:
        inset 0 0 15px rgba(0, 220, 232, .05);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.customize-papan .input-field textarea:focus {
    border-color: #ffd34e;

    background:
        linear-gradient(
            145deg,
            #02090b,
            #063b40
        );

    box-shadow:
        0 0 12px rgba(0, 220, 232, .25),
        0 0 7px rgba(255, 211, 78, .15),
        inset 0 0 15px rgba(0, 220, 232, .06);
}

.customize-papan .input-field textarea::placeholder {
    color: rgba(255, 255, 255, .55);
}


/* ==============================
   LOGO FIELD
   ============================== */

.customize-papan .field-papan.group-field-2 .input-field.field-logo {
    height: 90px;
    margin: 0;
    border-radius: 0;
    position: relative;

    -ms-flex: 0 0 174px;
    flex: 0 0 174px;
    max-width: 174px;

    background:
        linear-gradient(
            145deg,
            #02090b,
            #052f33
        );

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

    box-shadow:
        inset 0 0 15px rgba(0, 220, 232, .06);
}


/* UPLOAD ICON */
.customize-papan .btn-upload-papan svg {
    width: 21px;
    height: 25px;

    display: block;
    align-self: center;

    margin: auto;
    margin-bottom: 12px;

    fill: #00dce8;
    color: #00dce8;

    filter:
        drop-shadow(
            0 0 5px rgba(0, 220, 232, .45)
        );
}


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

.svgLogoPapan {
    position: absolute;
    width: 100%;

    top: 50%;
    left: 50%;

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

    text-align: center;
}

.svgLogoPapan p {
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

.svgLogoPapan p span {
    font-size: 12px;
    color: #ffd34e;

    text-shadow:
        0 0 7px rgba(255, 211, 78, .30);
}


/* UPLOADED IMAGE */
.customize-papan .btn-upload-papan img {
    margin: auto;
    display: block;

    position: absolute;

    width: 80px;

    top: 50%;
    left: 50%;

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

    text-align: center;

    filter:
        drop-shadow(
            0 0 7px rgba(0, 220, 232, .20)
        );
}


/* ==============================
   SUGGEST MESSAGE
   ============================== */

#suggest-messages {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

#suggest-messages a {
    border:
        1px solid rgba(255, 211, 78, .55);

    background:
        linear-gradient(
            135deg,
            #02090b,
            #063b40
        );

    color: #ffd34e;

    border-radius: 4px;

    padding: 5px 10px;

    font-size: 10px;
    font-weight: 600;

    display: inline-block;

    text-decoration: none;

    box-shadow:
        0 0 8px rgba(0, 220, 232, .12);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

#suggest-messages a:hover {
    background:
        linear-gradient(
            135deg,
            #008b95,
            #00dce8
        );

    color: #02090b;

    border-color: #ffd34e;

    box-shadow:
        0 0 12px rgba(0, 220, 232, .35),
        0 0 7px rgba(255, 211, 78, .20);
}


/* ==============================
   NICE SELECT ARROW
   ============================== */

.case-occasion .nice-select:after {
    border-bottom:
        2px solid #ffd34e;

    border-right:
        2px solid #ffd34e;

    right: 20px;
    top: 42%;

    width: 10px;
    height: 10px;

    filter:
        drop-shadow(
            0 0 3px rgba(255, 211, 78, .30)
        );
}


/* ==============================
   INPUT FIELD
   ============================== */

.customize-papan .input-field input {
    font-weight: 600;
    font-size: 16px;

    width: 100%;
    height: 90px;
    min-height: 44px !important;

    border:
        1px solid rgba(0, 220, 232, .25);

    background:
        linear-gradient(
            145deg,
            #02090b,
            #052f33
        );

    margin: 0;
    border-radius: 0;

    text-align: center;

    color: #ffffff;

    outline: none;

    box-shadow:
        inset 0 0 15px rgba(0, 220, 232, .05);

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.customize-papan .input-field input:focus {
    border-color: #ffd34e;

    background:
        linear-gradient(
            145deg,
            #031518,
            #063b40
        );

    box-shadow:
        inset 0 0 15px rgba(0, 220, 232, .07),
        0 0 10px rgba(0, 220, 232, .20);
}

.customize-papan .input-field input::placeholder {
    color: rgba(255, 255, 255, .55);
}


/* CHARACTER LIMIT */
.customize-papan .input-field .limit {
    position: absolute;
    right: 15px;
    top: 0;

    color: #00dce8;

    text-shadow:
        0 0 6px rgba(0, 220, 232, .25);
}


/* ==============================
   DECORATIVE LINES DESKTOP
   ============================== */

@media (min-width: 991px) {

    .customize-papan:before {
        content: "";

        position: absolute;

        border:
            4px solid #00dce8;

        bottom: -50px;
        left: 210px;

        width: 100px;

        display: block;

        -ms-transform: rotate(60deg);
        -webkit-transform: rotate(60deg);
        transform: rotate(-65deg);

        box-shadow:
            0 0 8px rgba(0, 220, 232, .35);
    }

    .customize-papan:after {
        content: "";

        position: absolute;

        border:
            4px solid #ffd34e;

        bottom: -52px;
        right: 240px;

        width: 100px;

        display: block;

        -ms-transform: rotate(-120deg);
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg);

        box-shadow:
            0 0 8px rgba(255, 211, 78, .35);
    }
}
/* ==========================================
   PURCHASE THEME OVERRIDE
   CYAN + GOLD + BLACK
   ========================================== */

:root {
    --buy-cyan: #00dce8;
    --buy-cyan-light: #39f4ff;
    --buy-cyan-mid: #008b95;
    --buy-cyan-dark: #052f33;
    --buy-gold: #ffd34e;
    --buy-gold-dark: #b88708;
    --buy-black: #02090b;
    --buy-black-soft: #031518;
    --buy-white: #ffffff;
}

/* BACKGROUND POPUP */
#backgroundPopup,
.purchasePopup {
    background: rgba(0, 8, 10, .82) !important;
    backdrop-filter: blur(4px);
}

/* MAIN PURCHASE CONTAINER */
.sectionPurchase {
    background:
        linear-gradient(
            145deg,
            #02090b 0%,
            #052f33 50%,
            #031518 100%
        ) !important;

    color: #ffffff;

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

    box-shadow:
        0 0 35px rgba(0, 220, 232, .20),
        0 15px 50px rgba(0, 0, 0, .60);
}

/* SCROLL CONTENT */
.purchase-content {
    background:
        linear-gradient(
            145deg,
            rgba(2, 9, 11, .98),
            rgba(5, 47, 51, .94)
        );

    color: #ffffff;
}

/* STICKY BUTTON AREA */
.purchase-button-wrapper {
    background:
        linear-gradient(
            90deg,
            #02090b,
            #063b40,
            #02090b
        ) !important;

    border-top:
        1px solid rgba(255, 211, 78, .40) !important;

    box-shadow:
        0 -5px 20px rgba(0, 220, 232, .08);
}

/* CLOSE POPUP */
.popupPurchaseClose {
    color: #ffd34e !important;

    text-shadow:
        0 0 8px rgba(255, 211, 78, .40);

    transition: .2s ease;
}

.popupPurchaseClose:hover {
    color: #00dce8 !important;

    text-shadow:
        0 0 10px rgba(0, 220, 232, .60);
}

/* HEADER */
.headerPurchase {
    border-bottom:
        1px solid rgba(255, 211, 78, .20);

    padding-bottom: 12px;
}

.headerPurchase h3 {
    color: #ffd34e;

    text-shadow:
        0 0 10px rgba(255, 211, 78, .25);
}

/* SECTION TITLE */
.purchaseArea h4 {
    color: #00dce8;

    text-shadow:
        0 0 8px rgba(0, 220, 232, .25);
}

/* ==========================================
   PURCHASE MENU
   ========================================== */

.menuPurchase ul li {
    color: #ffffff;

    border:
        1px solid rgba(0, 220, 232, .45) !important;

    background:
        rgba(0, 220, 232, .05);

    border-radius: 7px;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.menuPurchase ul li:hover {
    background:
        rgba(0, 220, 232, .16) !important;

    border-color:
        #00dce8 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 12px rgba(0, 220, 232, .18);
}

.menuPurchase ul li.selected {
    background:
        linear-gradient(
            135deg,
            #00dce8,
            #008b95
        ) !important;

    border-color:
        #ffd34e !important;

    color:
        #02090b !important;

    font-weight: 700;

    box-shadow:
        0 0 15px rgba(0, 220, 232, .30),
        0 0 8px rgba(255, 211, 78, .18);
}

/* ==========================================
   PRODUCT CARDS
   ========================================== */

.item-card,
.item-addon {
    background:
        linear-gradient(
            145deg,
            #031518,
            #052f33
        );

    border:
        1px solid rgba(0, 220, 232, .20);

    border-radius: 9px;

    overflow: hidden;

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

.item-card:hover,
.item-addon:hover {
    border:
        1px solid #00dce8 !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 0 18px rgba(0, 220, 232, .25);
}

.item-card.selected,
.item-addon.selected {
    border:
        1px solid #ffd34e !important;

    box-shadow:
        0 0 18px rgba(255, 211, 78, .25),
        0 0 12px rgba(0, 220, 232, .15);
}

/* CARD IMAGE */
.item-card .card-image,
.item-addon .card-image {
    background: #02090b;
}

/* CARD META */
.item-card .card-meta,
.item-addon .card-meta {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #02090b,
            #052f33
        );

    transition: .2s ease;
}

.item-card:hover .card-meta,
.item-addon:hover .card-meta {
    background:
        linear-gradient(
            90deg,
            #063b40,
            #008b95
        ) !important;

    color:
        #ffffff !important;
}

.item-card.selected .card-meta,
.item-addon.selected .card-meta {
    background:
        linear-gradient(
            90deg,
            #008b95,
            #00dce8
        ) !important;

    color:
        #02090b !important;
}

.item-cards .item-card h5,
.item-addons .item-addon h5 {
    color: #ffd34e;
}

.item-cards .item-card p,
.item-addons .item-addon p {
    color: inherit;
}

/* ==========================================
   QUANTITY
   ========================================== */

.card-qty {
    background:
        #031518 !important;

    border-top:
        1px solid rgba(255, 211, 78, .25);
}

.item-card.selected .card-qty,
.item-card:hover .card-qty {
    background:
        #031518 !important;

    color:
        #ffffff !important;
}

.card-qty a {
    color: #ffd34e;

    border-color:
        rgba(0, 220, 232, .35) !important;

    background:
        #052f33;

    transition: .2s ease;
}

.card-qty a:hover {
    color: #02090b;

    background:
        #00dce8;

    border-color:
        #ffd34e !important;
}

.card-qty a svg {
    fill: currentColor;
}

input.btn-qty {
    background:
        #02090b !important;

    color:
        #ffffff !important;

    border-left:
        1px solid #00dce8 !important;

    border-right:
        1px solid #00dce8 !important;

    text-align: center;
}

/* ==========================================
   BUTTONS
   ========================================== */

.purchase-button .btn {
    background:
        linear-gradient(
            135deg,
            #00dce8 0%,
            #008b95 55%,
            #ffd34e 100%
        ) !important;

    color:
        #02090b !important;

    border:
        1px solid #ffd34e;

    border-radius:
        7px;

    font-weight:
        700;

    box-shadow:
        0 0 15px rgba(0, 220, 232, .25),
        0 0 8px rgba(255, 211, 78, .15);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.purchase-button .btn:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.08);

    box-shadow:
        0 0 22px rgba(0, 220, 232, .40),
        0 0 12px rgba(255, 211, 78, .25);
}

/* DISABLED BUTTON */
.purchase-button .btn[disabled] {
    background:
        #263638 !important;

    color:
        #758789 !important;

    border-color:
        #3c5052;

    box-shadow:
        none;

    cursor:
        not-allowed;
}

/* BACK BUTTON */
.back-purchase-button,
.back-spotify {
    background:
        #02090b;

    color:
        #ffd34e;

    border:
        1px solid #ffd34e !important;

    border-radius:
        7px;

    transition:
        .2s ease;
}

.back-purchase-button:hover,
.back-spotify:hover {
    background:
        #052f33;

    color:
        #00dce8;

    border-color:
        #00dce8 !important;
}

/* ==========================================
   ERROR
   ========================================== */

#purchaseProduct .row .error {
    color:
        #ffd34e !important;

    text-shadow:
        0 0 5px rgba(255, 211, 78, .20);
}

/* ADDONS */
.addon-itm-line-price {
    color:
        #00dce8 !important;
}

.propsAddonSpotify p {
    color:
        rgba(255, 255, 255, .85);
}

.propsAddonSpotify p span:first-child {
    color:
        #ffd34e;
}

/* ==========================================
   LOADING
   ========================================== */

.btn .loading:after {
    background:
        #00dce8 !important;

    --_m:
        conic-gradient(#0000 10%, #ffffff),
        linear-gradient(#ffffff 0 0) content-box;
}

/* ==========================================
   QR / SCAN CARD
   ========================================== */

.scanCard {
    border:
        1px solid rgba(255, 211, 78, .45) !important;

    background:
        linear-gradient(
            135deg,
            #02090b,
            #052f33
        ) !important;

    color:
        #ffffff;

    border-radius:
        8px;

    box-shadow:
        0 0 12px rgba(0, 220, 232, .12);
}

.t-preview p {
    color:
        rgba(255, 255, 255, .80);
}

.t-preview .h3 {
    color:
        #ffd34e;

    text-shadow:
        0 0 8px rgba(255, 211, 78, .20);
}

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

.purchase-content::-webkit-scrollbar,
#itemCards::-webkit-scrollbar,
.addonsPurchase .addons::-webkit-scrollbar {
    width: 6px;
}

.purchase-content::-webkit-scrollbar-track,
#itemCards::-webkit-scrollbar-track,
.addonsPurchase .addons::-webkit-scrollbar-track {
    background:
        #02090b;
}

.purchase-content::-webkit-scrollbar-thumb,
#itemCards::-webkit-scrollbar-thumb,
.addonsPurchase .addons::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            #00dce8,
            #008b95,
            #ffd34e
        );

    border-radius:
        10px;
}

/* ==========================================
   DESKTOP FIX
   Original CSS sets white background again
   ========================================== */

@media (min-width: 991px) {
    .sectionPurchase {
        background:
            linear-gradient(
                145deg,
                #02090b 0%,
                #052f33 52%,
                #031518 100%
            ) !important;
    }
}

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

@media (max-width: 992px) {

    .purchasePopup {
        background:
            rgba(0, 8, 10, .94) !important;
    }

    .purchase-content {
        background:
            linear-gradient(
                180deg,
                #02090b,
                #052f33
            );
    }

    .purchase-button-wrapper {
        background:
            #02090b !important;

        box-shadow:
            0 -4px 15px rgba(0, 220, 232, .12);
    }
}

@media (max-width: 576px) {

    .purchase-button .btn {
        width:
            100% !important;
    }
}