/* =========================
GLOBAL
========================= */

.cva-wrapper{

max-width:1250px;
margin:auto;
padding:50px 20px;
background:#1C2A3A;
font-family:Inter,sans-serif;
color:white;

}


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


.cva-tier-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;

}




.cva-tier-card{

background:
linear-gradient(
145deg,
#263b50,
#152536
);

border:1px solid rgba(156,175,136,.25);

border-radius:24px;

padding:38px 30px;

display:flex;

flex-direction:column;

position:relative;

overflow:hidden;

transition:.35s ease;

}



.cva-tier-card:hover{

transform:translateY(-10px);

border-color:#E57E25;

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

}



.cva-tier-card.popular{

border-color:#E57E25;

}



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


.popular-badge{

position:absolute;

top:20px;

right:-45px;

width:180px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

background:#E57E25;

color:white;

font-size:12px;

font-weight:800;

letter-spacing:.6px;

transform:rotate(45deg);

z-index:10;

white-space:nowrap;

}





/* =========================
TIER CONTENT
========================= */


.cva-tier-label{

color:#9CAF88;

font-size:13px;

letter-spacing:3px;

margin-bottom:15px;

}



.cva-tier-card h3{

font-size:27px;

line-height:1.3;

}



.cva-tier-price{

font-size:38px;

font-weight:800;

color:#E57E25;

margin:15px 0;

}



.cva-tier-tag{

background:rgba(156,175,136,.15);

color:#9CAF88;

padding:8px 15px;

border-radius:50px;

width:max-content;

font-size:13px;

margin-bottom: 10px;

}



.cva-tier-card p{

color:#d5dbe2;

line-height:1.7;

}



.cva-tier-card ul{

list-style:none;

padding:20px 0;

}



.cva-tier-card li{

margin-bottom:10px;

}



.cva-tier-card li:before{

content:"✓";

color:#E57E25;

margin-right:10px;

}



.cva-best{

margin-top:auto;

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

padding:15px;

border-radius:14px;

font-size:14px;

line-height:1.5;

}



.cva-select-btn{

margin-top:25px;

padding:15px;

border-radius:12px;

border:none;

background:#E57E25;

color:white;

font-weight:700;

cursor:pointer;

transition:.3s;

}



.cva-select-btn:hover{

background:white;

color:#1C2A3A;

}
/* =========================
DIVIDER
========================= */


.cva-divider{

height:1px;

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

margin:70px 0;

}




/* =========================
ADDONS SHOWCASE
========================= */


.cva-addon-grid{

display:grid;

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

gap:25px;

}



.cva-addon-card{

background:#F8F6EF;

padding:35px;

border-radius:22px;

color:#1C2A3A;

transition:.35s ease;

cursor:pointer;

}



.cva-addon-card:hover{

transform:translateY(-12px);

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

}



.addon-price{

font-size:32px;

font-weight:800;

color:#E57E25;

}





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


.cva-modal{

display:none;

position:fixed;

inset:0;

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

backdrop-filter:blur(8px);

z-index:999999;

align-items:center;

justify-content:center;

padding:20px;

}



.cva-modal-box{

width:100%;

max-width:760px;

max-height:90vh;
max-height:90dvh;

overflow:hidden;
display:flex;
flex-direction:column;
box-sizing:border-box;

background:#1C2A3A;

border-radius:28px;

padding:52px 0 0;

position:relative;

box-shadow:
0 30px 80px rgba(0,0,0,.5);

}



.cva-modal .cva-close{

position:absolute;

right:20px;

top:10px;
z-index:2;
width:40px;
height:40px;
padding:0;
line-height:1;
display:grid;
place-items:center;
border-radius:50%;

background:#1C2A3A;

border:none;

font-size:35px;

color:white;

cursor:pointer;

}



.selected-tier{

font-size:28px;

line-height:1.3;

}



.selected-price{

font-size:36px;

font-weight:800;

color:#E57E25;

}



.cva-modal-divider{

height:1px;

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

margin:30px 0;

}



/* =========================
FINAL ADDON FIX
========================= */


.addon-option {

display:flex !important;

align-items:center;

gap:15px;

width:100%;

max-width:100%;

box-sizing:border-box;

padding:18px;

overflow:hidden;

}


.addon-option input {

flex:0 0 20px;

width:20px;

height:20px;

margin:0;

}


.addon-option > div {

flex:1 1 auto;

min-width:0;

overflow:hidden;

}


.addon-option strong {

display:block;

color:white;

font-size:16px;

line-height:1.4;

white-space:normal;

overflow-wrap:break-word;

}


.addon-option small {

display:block;

color:#cbd5df;

font-size:13px;

line-height:1.5;

margin-top:5px;

white-space:normal;

overflow-wrap:break-word;

}


.addon-option span {

flex:0 0 auto;

margin-left:auto;

white-space:nowrap;

color:#E57E25;

font-weight:700;

}


.cva-modal-box {

overflow-x:hidden;

}


.cva-modal-box * {

max-width:100%;

box-sizing:border-box;

}
/* =========================
TOTAL BOX
========================= */


.cva-total{

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(156,175,136,.12);

padding:20px;

border-radius:16px;

margin:25px 0;

}



.total-price{

color:#E57E25;

font-size:30px;

font-weight:800;

}




/* =========================
INPUTS
========================= */


.cva-modal input:not([type="checkbox"]){

width:100%;

box-sizing:border-box;

padding:15px;

margin-bottom:15px;

border-radius:12px;

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

background:#101c28;

color:white;

font-size:15px;

}




.cva-modal .review-btn,
.cva-modal .confirm-btn,
.cva-modal .cva-apply-coupon{

width:100%;

padding:16px;

border:none;

border-radius:12px;

background:#E57E25;

color:white;

font-weight:700;

cursor:pointer;

}



.cva-modal .back-btn,
.cva-modal .cva-remove-coupon{

width:100%;

padding:16px;

border-radius:12px;

margin-bottom:15px;

background:none;

border:1px solid #9CAF88;

color:white;

cursor:pointer;

}



.cva-review-step{

display:none;

}



.review-content{

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

padding:20px;

border-radius:16px;

line-height:1.8;

}



.review-content span{

color:#E57E25;

}





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


@media(max-width:1000px){


.cva-tier-grid{

grid-template-columns:1fr;

}


}





@media(max-width:600px){


.cva-modal{

padding:15px;

}



.cva-modal-box{

width:100%;

padding:52px 0 0;

}



.selected-tier{

font-size:24px;

}



.cva-addon-grid{

grid-template-columns:1fr;

}



.addon-option{

gap:10px;

padding:16px;

}


.addon-option strong{

font-size:14px;

}


.addon-option small{

font-size:12px;

}


.addon-option span{

font-size:14px;

}


}

/* Modal layout: keep the close control outside the scrolling content. */
.cva-modal-content {
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 36px 32px;
}
.cva-modal .selected-tier { margin:12px 0; }
.cva-modal .selected-price { margin:0; }
.cva-modal .cva-modal-divider { margin:24px 0; }
.cva-modal button {
    font-family:inherit;
    font-size:15px;
    line-height:1.4;
    text-transform:none;
    letter-spacing:normal;
}
.cva-modal .cva-close:hover,
.cva-modal .cva-close:focus {
    background:#1C2A3A;
    color:white;
}
.cva-coupon-controls {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto auto;
    gap:12px;
    align-items:center;
    margin-top:24px;
}
.cva-coupon-controls > label,
.cva-coupon-message {
    grid-column:1 / -1;
    margin:0;
}
.cva-modal .cva-coupon-code { margin:0; min-width:0; }
.cva-modal .cva-apply-coupon,
.cva-modal .cva-remove-coupon {
    width:auto;
    margin:0;
    padding:14px 18px;
    white-space:nowrap;
}
.cva-modal [hidden],
.cva-coupon-message:empty { display:none !important; }
.cva-modal .review-btn:hover,
.cva-modal .confirm-btn:hover,
.cva-modal .cva-apply-coupon:hover {
    background:white;
    color:#1C2A3A;
}
.cva-modal .back-btn:hover,
.cva-modal .cva-remove-coupon:hover {
    background:rgba(156,175,136,.12);
    color:white;
}
.cva-modal button:focus-visible {
    outline:2px solid #E57E25;
    outline-offset:3px;
}
.cva-modal button:disabled { opacity:.65; cursor:wait; }
.cva-customer-fields {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:15px;
    margin-bottom:20px;
}
.cva-modal .cva-customer-fields input { min-width:0; margin:0; }
.cva-customer-fields .user-email { grid-column:1 / -1; }
@media(max-width:600px) {
    .cva-modal-content { padding:0 20px 24px; }
    .cva-coupon-controls { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .cva-modal .cva-coupon-code { grid-column:1 / -1; }
    .cva-modal .cva-apply-coupon,
    .cva-modal .cva-remove-coupon { white-space:normal; padding:12px; }
    .cva-customer-fields { grid-template-columns:minmax(0, 1fr); }
}