/*==============================
PRODUCT PAGE
==============================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Cairo',sans-serif;
background:#f7f7f7;
color:#111;
line-height:1.8;
}

.container{
width:min(1200px,92%);
margin:auto;
}

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

.product-header{
position:sticky;
top:0;
z-index:999;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.product-header .container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo img{
height:65px;
}

.header-icons{
display:flex;
gap:18px;
}

.header-icons a{
width:46px;
height:46px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:#f2f2f2;
font-size:20px;
color:#111;
transition:.3s;
text-decoration:none;
}

.header-icons a:hover{
background:#d4af37;
color:#fff;
transform:translateY(-4px);
}

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

.product-page{
padding:70px 0;
}

.product-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:start;
}

/*==============================
GALLERY
==============================*/

.gallery{
background:#fff;
padding:30px;
border-radius:28px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
position:sticky;
top:120px;
}

.main-image{
height:550px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
border-radius:20px;
background:#fafafa;
}

.main-image img{
max-width:100%;
max-height:100%;
transition:.45s;
cursor:zoom-in;
}

.main-image img:hover{
transform:scale(1.08);
}

.thumbs{
display:flex;
justify-content:center;
gap:14px;
margin-top:22px;
flex-wrap:wrap;
}

.thumbs img{
width:90px;
height:90px;
object-fit:contain;
background:#fff;
padding:8px;
border-radius:14px;
cursor:pointer;
border:2px solid transparent;
transition:.35s;
box-shadow:0 6px 15px rgba(0,0,0,.08);
}

.thumbs img:hover{
border-color:#d4af37;
transform:translateY(-4px);
}

.thumbs img.active{
border-color:#d4af37;
}
/*==============================
PRODUCT INFO
==============================*/

.product-info{
display:flex;
flex-direction:column;
gap:20px;
}

.category{
display:inline-block;
padding:8px 18px;
background:#FFF7DF;
color:#C89600;
border-radius:40px;
font-size:14px;
font-weight:700;
width:fit-content;
}

.product-info h1{
font-size:48px;
font-weight:800;
line-height:1.2;
color:#111;
}

.rating{
display:flex;
align-items:center;
gap:6px;
font-size:18px;
color:#FFB400;
}

.rating span{
margin-right:12px;
color:#777;
font-size:15px;
}

.price{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:15px;
}

.new-price{
font-size:42px;
font-weight:800;
color:#111;
}

.old-price{
font-size:22px;
color:#999;
text-decoration:line-through;
}

.discount{
background:#ff3b30;
color:#fff;
padding:8px 16px;
border-radius:40px;
font-size:14px;
font-weight:700;
}

.description{
font-size:18px;
line-height:2;
color:#666;
max-width:600px;
}

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

.options{
margin-top:15px;
display:flex;
flex-direction:column;
gap:18px;
}

.options label{
font-size:17px;
font-weight:700;
color:#222;
}

.options select{
width:100%;
height:58px;
padding:0 18px;
border:2px solid #eee;
border-radius:16px;
background:#fff;
font-size:16px;
outline:none;
transition:.3s;
cursor:pointer;
}

.options select:focus{
border-color:#d4af37;
box-shadow:0 0 0 4px rgba(212,175,55,.12);
}

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

.buttons{
display:flex;
gap:15px;
margin-top:25px;
}

.buy-btn{
flex:1;
height:60px;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#FFD54A,#D4AF37);
color:#111;
font-size:19px;
font-weight:700;
border-radius:50px;
text-decoration:none;
transition:.35s;
}

.buy-btn:hover{
transform:translateY(-5px);
box-shadow:0 18px 35px rgba(212,175,55,.35);
}

.outline-btn{
width:170px;
height:60px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
border:2px solid #ddd;
color:#111;
border-radius:50px;
text-decoration:none;
transition:.35s;
}

.outline-btn:hover{
background:#111;
color:#fff;
border-color:#111;
}

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

.features{
margin-top:35px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.features div{
background:#fff;
padding:18px;
border-radius:16px;
font-size:16px;
font-weight:600;
box-shadow:0 8px 20px rgba(0,0,0,.06);
display:flex;
align-items:center;
gap:10px;
}

.features i{
color:#28a745;
font-size:18px;
}
/*==============================
SPECIFICATIONS
==============================*/

.specifications{
    padding:90px 0;
}

.specifications h2{
    text-align:center;
    font-size:40px;
    font-weight:800;
    margin-bottom:40px;
    color:#111;
}

.specifications ul{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    list-style:none;
}

.specifications ul li{
    background:#fff;
    padding:22px;
    border-radius:18px;
    font-size:17px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
}

.specifications ul li:hover{
    transform:translateY(-5px);
    border-right:5px solid #D4AF37;
}

/*==============================
RELATED PRODUCTS
==============================*/

.related-products{
    padding:90px 0;
}

.related-products h2{
    text-align:center;
    font-size:40px;
    margin-bottom:45px;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.related-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.related-card:hover{
    transform:translateY(-8px);
}

.related-card img{
    width:100%;
    height:260px;
    object-fit:contain;
    padding:20px;
}

.related-card-content{
    padding:20px;
    text-align:center;
}

.related-card h3{
    font-size:22px;
    margin-bottom:10px;
}

.related-card .price{
    justify-content:center;
    margin:15px 0;
}

.related-card .btn{
    width:100%;
    height:50px;
    border-radius:40px;
}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

.product-grid{
    grid-template-columns:1fr;
    gap:40px;
}

.gallery{
    position:static;
}

.main-image{
    height:420px;
}

.specifications ul{
    grid-template-columns:1fr;
}

.related-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.product-page{
    padding:40px 0;
}

.product-info h1{
    font-size:34px;
}

.new-price{
    font-size:32px;
}

.description{
    font-size:16px;
}

.buttons{
    flex-direction:column;
}

.buy-btn,
.outline-btn{
    width:100%;
}

.features{
    grid-template-columns:1fr;
}

.main-image{
    height:300px;
}

.thumbs img{
    width:70px;
    height:70px;
}

.specifications h2,
.related-products h2{
    font-size:30px;
}

.related-grid{
    grid-template-columns:1fr;
}

}
/* ===================================
   PRODUCT PAGE FINAL FIX
=================================== */

.product-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:flex-start;
}

/* Desktop */
@media (min-width:993px){

.gallery{
    position:sticky;
    top:90px;
    align-self:flex-start;
}

}

/* Mobile */
@media (max-width:992px){

.product-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
}

.gallery{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    padding:18px !important;
    border-radius:22px;
}

.main-image{
    height:320px !important;
}

.main-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.thumbs{
    justify-content:center;
    gap:10px;
}

.thumbs img{
    width:70px;
    height:70px;
}

.product-info{
    width:100%;
}

.product-info h1{
    font-size:28px;
}

.description{
    font-size:15px;
    line-height:1.9;
}

.buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.buy-btn,
.outline-btn{
    width:100%;
}

.features{
    grid-template-columns:1fr;
}

.specifications ul{
    grid-template-columns:1fr;
}

.related-grid{
    grid-template-columns:1fr;
}

}
/* ==========================
   FREE GIFT
========================== */

.gift-box{
    display:flex;
    align-items:center;
    gap:15px;
    margin:20px 0;
    padding:18px;
    background:linear-gradient(135deg,#fff8e1,#fff3c4);
    border:2px solid #d4af37;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(212,175,55,.15);
}

.gift-box i{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#d4af37;
    color:#fff;
    font-size:24px;
    animation:giftPulse 2s infinite;
}

.gift-box strong{
    display:block;
    color:#111;
    font-size:18px;
    margin-bottom:4px;
}

.gift-box p{
    margin:0;
    color:#555;
    font-size:15px;
    line-height:1.6;
}

@keyframes giftPulse{
    0%,100%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(212,175,55,.4);
    }
    50%{
        transform:scale(1.1);
        box-shadow:0 0 20px rgba(212,175,55,.6);
    }
}
/* =========================
   PRODUCT PAGE - MOBILE
========================= */

@media (max-width: 767px) {

    .product-page {
        padding: 20px 10px !important;
    }

    .product-page .product-card,
    .product-page .product-gallery {
        width: 90% !important;
        max-width: 330px !important;
        margin: 15px auto !important;
    }

    /* تصغير مساحة صورة المنتج */
    .product-page .main-image,
    .product-page .product-image {
        height: 330px !important;
        min-height: 330px !important;
        padding: 10px !important;
    }

    .product-page .main-image img,
    .product-page .product-image img {
        max-height: 290px !important;
        width: auto !important;
        max-width: 90% !important;
        object-fit: contain !important;
    }

    /* الصور الصغيرة */
    .product-page .thumbnails img,
    .product-page .thumb img {
        width: 55px !important;
        height: 55px !important;
    }

    .product-page .thumbnails,
    .product-page .thumbs {
        gap: 7px !important;
    }
}
/* =========================
   ORDER MODAL
========================= */

.order-modal {
    position: fixed;

    inset: 0;

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

    backdrop-filter: blur(6px);

    display: none;

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

    padding: 15px;

    z-index: 99999;

    direction: rtl;
}

.order-modal.active {
    display: flex;
}


.order-box {

    width: 100%;

    max-width: 480px;

    max-height: 92vh;

    overflow-y: auto;

    background: #fff;

    border-radius: 25px;

    padding: 28px;

    position: relative;

    box-shadow: 0 25px 70px rgba(0,0,0,.25);

    animation: orderPopup .3s ease;
}


@keyframes orderPopup {

    from {
        opacity: 0;
        transform: translateY(30px) scale(.95);
    }

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


/* زر الإغلاق */

.close-order {

    position: absolute;

    top: 12px;
    left: 15px;

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 50%;

    background: #f3f3f3;

    color: #222;

    font-size: 25px;

    cursor: pointer;
}


/* العنوان */

.order-header {

    text-align: center;

    margin-bottom: 20px;
}

.order-header i {

    font-size: 35px;

    color: #25D366;

    margin-bottom: 8px;
}

.order-header h2 {

    margin: 0;

    color: #142744;

    font-size: 27px;

    font-weight: 900;
}

.order-header p {

    margin: 5px 0 0;

    color: #777;

    font-size: 13px;
}


/* المنتج */

.order-product {

    background: #f8f9fb;

    border-radius: 15px;

    padding: 14px 16px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;
}

.order-product strong {

    color: #142744;

    font-size: 15px;
}

.order-product span {

    color: #c49a24;

    font-weight: 900;
}


/* الحقول */

.input-group {

    margin-bottom: 14px;
}

.input-group label {

    display: block;

    margin-bottom: 6px;

    color: #142744;

    font-size: 14px;

    font-weight: 800;
}

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

    width: 100%;

    border: 1.5px solid #e2e5e9;

    background: #fff;

    border-radius: 13px;

    padding: 13px;

    font-family: 'Cairo', sans-serif;

    font-size: 14px;

    color: #222;

    outline: none;

    transition: .3s;

    box-sizing: border-box;
}

.input-group textarea {

    height: 80px;

    resize: none;
}

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

    border-color: #c49a24;

    box-shadow: 0 0 0 3px rgba(196,154,36,.10);
}


/* زر التأكيد */

.confirm-order {

    width: 100%;

    height: 55px;

    border: none;

    border-radius: 30px;

    background: #25D366;

    color: white;

    font-family: 'Cairo', sans-serif;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    transition: .3s;

    margin-top: 5px;
}

.confirm-order:hover {

    background: #1ebe5d;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(37,211,102,.25);
}


/* موبايل */

@media (max-width: 500px) {

    .order-modal {

        padding: 10px;
    }

    .order-box {

        padding: 22px 16px;

        border-radius: 20px;

        max-height: 94vh;
    }

    .order-header h2 {

        font-size: 23px;
    }

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

        padding: 11px;

        font-size: 13px;
    }
}
/* =========================
   WHATSAPP FLOATING BUTTON
========================= */

.whatsapp-float {
    position: fixed !important;
    bottom: 22px !important;
    right: 20px !important;

    width: 52px !important;
    height: 52px !important;

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

    background: #25D366 !important;
    color: #fff !important;

    border-radius: 50% !important;

    text-decoration: none !important;

    font-size: 27px !important;

    z-index: 99999 !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.25),
        0 0 15px rgba(37, 211, 102, 0.35) !important;

    transition: all 0.3s ease !important;
}

/* Hover */
.whatsapp-float:hover {
    transform: scale(1.12) !important;
    color: #fff !important;

    box-shadow:
        0 7px 25px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(37, 211, 102, 0.65) !important;
}

/* حركة خفيفة */
.whatsapp-float i {
    animation: whatsappPulse 2s infinite;
}

@keyframes whatsappPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* Mobile */
@media (max-width: 600px) {

    .whatsapp-float {
        width: 46px !important;
        height: 46px !important;

        right: 14px !important;
        bottom: 16px !important;

        font-size: 24px !important;
    }

}
/* =========================================
   VAPOR INVOICE POPUP
========================================= */

#vaporInvoiceBox {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

    backdrop-filter: blur(8px);
}


.vapor-invoice-popup {

    position: relative;

    width: min(380px, 95%);

    padding: 35px 25px;

    background: #fff;

    border-radius: 25px;

    text-align: center;

    box-shadow:
        0 25px 80px rgba(0,0,0,.35);

    animation:
        vaporInvoicePop .4s ease;
}


.vapor-invoice-close {

    position: absolute;

    top: 12px;

    left: 15px;

    width: 35px;

    height: 35px;

    border: 0;

    border-radius: 50%;

    background: #eee;

    color: #333;

    font-size: 24px;

    cursor: pointer;
}


.vapor-success-icon {

    width: 65px;

    height: 65px;

    margin: auto auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #d4af37;

    color: white;

    font-size: 32px;

    font-weight: bold;
}


.vapor-invoice-popup h2 {

    color: #142d4c;

    margin: 10px 0;

}


.vapor-invoice-popup p {

    color: #777;

}


.vapor-download-invoice {

    width: 100%;

    margin-top: 20px;

    padding: 15px;

    border: 0;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d66d
        );

    color: #111;

    font-size: 17px;

    font-weight: 800;

    cursor: pointer;

    transition: .3s;
}


.vapor-download-invoice:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(212,175,55,.35);
}


@keyframes vaporInvoicePop {

    from {

        opacity: 0;

        transform:
            scale(.8)
            translateY(30px);
    }

    to {

        opacity: 1;

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

}
/* =========================
   VAPOR CART
========================= */

#vaporCartButton {
    position: fixed !important;
    right: 25px !important;
    bottom: 25px !important;
    width: 62px !important;
    height: 62px !important;
    border: 1px solid #d4af37 !important;
    border-radius: 50% !important;
    background: #071426 !important;
    color: #d4af37 !important;
    font-size: 22px !important;
    cursor: pointer !important;
    z-index: 99990 !important;
    box-shadow: 0 0 25px rgba(212,175,55,.35) !important;
    transition: .3s !important;
}

#vaporCartButton:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 0 35px rgba(212,175,55,.65) !important;
}

#vaporCartCount {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 23px !important;
    height: 23px !important;
    padding: 0 5px !important;
    border-radius: 20px !important;
    background: #d4af37 !important;
    color: #071426 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* OVERLAY */

#vaporCartOverlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.7) !important;
    backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: .35s !important;
    z-index: 99998 !important;
}

#vaporCartOverlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}


/* DRAWER */

#vaporCartDrawer {
    position: fixed !important;
    top: 0 !important;
    right: -460px !important;
    width: 440px !important;
    max-width: 94vw !important;
    height: 100vh !important;
    background: #071426 !important;
    border-left: 1px solid rgba(212,175,55,.35) !important;
    z-index: 99999 !important;
    transition: .4s cubic-bezier(.4,0,.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -15px 0 50px rgba(0,0,0,.5) !important;
}

#vaporCartDrawer.active {
    right: 0 !important;
}


/* HEADER */

.vapor-cart-header {
    padding: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(212,175,55,.2) !important;
}

.vapor-cart-header h2 {
    margin: 0 !important;
    color: #d4af37 !important;
    font-size: 22px !important;
}

.vapor-cart-header span {
    color: #aaa !important;
    font-size: 13px !important;
}

.vapor-cart-close,
.vapor-checkout-close {
    border: 0 !important;
    background: transparent !important;
    color: #d4af37 !important;
    font-size: 32px !important;
    cursor: pointer !important;
}


/* ITEMS */

#vaporCartItems {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 15px !important;
}

.vapor-cart-item {
    position: relative !important;
    display: flex !important;
    gap: 13px !important;
    padding: 15px 5px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.vapor-cart-image {
    width: 78px !important;
    height: 78px !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(212,175,55,.3) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vapor-cart-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.vapor-cart-image i {
    color: #d4af37 !important;
    font-size: 25px !important;
}

.vapor-cart-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.vapor-cart-info h3 {
    margin: 0 0 5px !important;
    color: #fff !important;
    font-size: 15px !important;
}

.vapor-cart-info strong {
    display: block !important;
    margin-top: 5px !important;
    color: #d4af37 !important;
}

.vapor-cart-details {
    color: #aaa !important;
    font-size: 11px !important;
    line-height: 1.7 !important;
}


/* QTY */

.vapor-qty {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.vapor-qty button {
    width: 27px !important;
    height: 27px !important;
    border: 1px solid rgba(212,175,55,.5) !important;
    background: transparent !important;
    color: #d4af37 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.vapor-qty span {
    color: #fff !important;
    min-width: 20px !important;
    text-align: center !important;
}


/* REMOVE */

.vapor-remove {
    position: absolute !important;
    top: 10px !important;
    right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #777 !important;
    cursor: pointer !important;
}

.vapor-remove:hover {
    color: #e74c3c !important;
}


/* FOOTER */

.vapor-cart-footer {
    padding: 20px !important;
    border-top: 1px solid rgba(212,175,55,.2) !important;
}

.vapor-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    color: #fff !important;
}

.vapor-total strong {
    color: #d4af37 !important;
    font-size: 20px !important;
}

.vapor-checkout-btn {
    width: 100% !important;
    padding: 15px !important;
    border: 1px solid #d4af37 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg,#d4af37,#a98218) !important;
    color: #071426 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.vapor-clear-btn {
    width: 100% !important;
    margin-top: 10px !important;
    padding: 10px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #999 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}


/* EMPTY */

.vapor-empty-cart {
    text-align: center !important;
    padding: 80px 20px !important;
    color: #777 !important;
}

.vapor-empty-cart i {
    font-size: 50px !important;
    color: #d4af37 !important;
    margin-bottom: 15px !important;
}

.vapor-empty-cart h3 {
    color: #fff !important;
}


/* CHECKOUT */

#vaporCheckout {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    background: rgba(0,0,0,.8) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: .3s !important;
    padding: 20px !important;
}

#vaporCheckout.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.vapor-checkout-box {
    position: relative !important;
    width: 500px !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 30px !important;
    background: #071426 !important;
    border: 1px solid rgba(212,175,55,.4) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.7) !important;
}

.vapor-checkout-box h2 {
    margin: 0 0 5px !important;
    color: #d4af37 !important;
}

.vapor-checkout-box p {
    color: #999 !important;
    margin-bottom: 20px !important;
}

.vapor-checkout-box input,
.vapor-checkout-box textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(212,175,55,.2) !important;
    border-radius: 9px !important;
    outline: none !important;
    background: #0c1d32 !important;
    color: #fff !important;
}

.vapor-checkout-box textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

.vapor-send-order {
    width: 100% !important;
    padding: 15px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #25D366 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}


/* TOAST */

#vaporCartToast {
    position: fixed !important;
    left: 50% !important;
    bottom: 30px !important;
    transform: translate(-50%,20px) !important;
    background: #071426 !important;
    border: 1px solid #d4af37 !important;
    color: #fff !important;
    padding: 13px 22px !important;
    border-radius: 30px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 100001 !important;
    transition: .3s !important;
}

#vaporCartToast.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%,0) !important;
}


/* MOBILE */

@media (max-width: 600px) {

    #vaporCartButton {
        right: 15px !important;
        bottom: 15px !important;
        width: 56px !important;
        height: 56px !important;
    }

    #vaporCartDrawer {
        width: 100% !important;
        max-width: 100% !important;
        right: -100% !important;
    }

    .vapor-checkout-box {
        padding: 22px !important;
    }

}