/* ================================================= */
/*                INFRATREND CLIENT UI               */
/* ================================================= */

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

body{
font-family:'Inter',sans-serif;
background:radial-gradient(circle at top,#111827 0%,#0b1220 60%);
color:#e5e7eb;
}

.container{
padding-top:40px;
}

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

.navbar{
background:rgba(15,23,42,0.85)!important;
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,0.08);
padding-top:10px!important;
padding-bottom:10px!important;
}

.navbar .nav-link{
color:#cbd5e1!important;
font-weight:500;
}

.navbar .nav-link:hover{
color:#ffffff!important;
}

.navbar-brand{
font-size:0!important;
display:flex;
align-items:center;
}

.navbar-brand img{
max-height:40px!important;
width:auto;
}

@media(max-width:768px){

.navbar-brand img{
max-height:30px!important;
}

}

/* ================= HERO BLOCK ================= */

.content-block .alert,
.content-block > div:first-child{

border-radius:16px;
background:linear-gradient(135deg,#1e3a8a,#2563eb);
border:none;
color:white;

}

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

.card{

background:#1f2937!important;
border-radius:18px;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 15px 35px rgba(0,0,0,0.3);
transition:all .3s ease;

}

.card:hover{

transform:translateY(-4px);
box-shadow:0 20px 45px rgba(0,0,0,0.4);

}

/* ================= ORDER CARD ================= */

.order-card{

background:#0f172a;
border-radius:16px;
padding:25px;
border:none;

}

/* ================= TITRE PRODUIT ================= */

.product-title{

font-size:24px;
font-weight:600;
margin-bottom:15px;

}

/* ================= DESCRIPTION PRODUIT ================= */

.product-description{

background:#111827;
padding:20px;
border-radius:12px;
margin-bottom:20px;
line-height:1.6;
border:1px solid rgba(255,255,255,0.05);

}

.product-description h3{

color:#60a5fa;
font-size:16px;
margin-top:10px;
margin-bottom:6px;

}

.product-description hr{

border-color:rgba(255,255,255,0.1);
margin:15px 0;

}

.product-description strong{

color:#f3f4f6;

}

.product-description ul{

padding-left:20px;

}

.product-description li{

margin-bottom:6px;

}

/* ================= BILLING BOX ================= */

.well{

background:#111827;
padding:20px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.05);

}

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

.btn-primary{

background:linear-gradient(135deg,#3b82f6,#2563eb);
border:none;
border-radius:10px;
padding:12px 26px;
font-weight:600;
transition:.2s;

}

.btn-primary:hover{

opacity:0.9;
transform:translateY(-1px);

}

.btn-outline-primary{

border-color:#3b82f6;
color:#3b82f6;

}

/* ================= FORMS ================= */

input,
select,
textarea{

background:#111827!important;
border:1px solid #374151!important;
color:#f3f4f6!important;
border-radius:8px;
padding:10px 14px;

}

input:focus,
select:focus,
textarea:focus{

border-color:#3b82f6!important;
box-shadow:0 0 0 0.2rem rgba(59,130,246,0.2);

}


/* ================= CHECKBOX PRODUITS ================= */

.form-check{

display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;

}

.form-check-input{

width:18px;
height:18px;
background:#0f172a;
border:1px solid #4b5563;
border-radius:4px;
cursor:pointer;

}

.form-check-input:checked{

background-color:#16a34a;
border-color:#16a34a;

}


.form-check-label{

cursor:pointer;
user-select:none;

}

/* ================= LISTE PRODUITS ================= */

.products-list{

background:#111827;
padding:15px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.05);

}

.products-list .form-check{

padding:6px 10px;
border-radius:8px;
transition:.2s;

}

.products-list .form-check:hover{

background:#1f2937;

}

/* ================= SIDEBAR ================= */

#sidebar,
.col-3{

background:transparent;

}

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

footer{

margin-top:60px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,0.06);
color:#94a3b8;
text-align:center;

}

footer a{

color:#94a3b8;

}

footer a:hover{

color:#ffffff;

}

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

/* Fix classes Bootstrap 2 utilisées dans le template checkout */
.row-fluid{
display:flex;
flex-wrap:wrap;
gap:1rem;
}

.row-fluid .span6{
flex:1 1 300px;
min-width:0;
}

/* Tableau panier responsive */
.accordion-body .table{
display:block;
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

/* Champ code promo Bootstrap 2 */
.input-append{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
}

.input-append input{
flex:1;
min-width:120px;
}

@media(max-width:768px){

.order-card{
padding:15px!important;
}

.well{
padding:15px;
}

}

@media(max-width:576px){

.container{
padding-top:20px;
}

.order-card{
padding:10px!important;
border-radius:12px;
}

.well{
padding:12px;
}

.accordion-body{
padding:0.75rem!important;
}

.accordion-button{
padding:0.75rem;
font-size:14px;
}

.row-fluid{
flex-direction:column;
}

.row-fluid .span6{
width:100%;
flex:0 0 100%;
}

.input-append{
flex-direction:column;
align-items:stretch;
}

.input-append input{
width:100%;
}

.input-append .btn{
width:100%;
}

.btn-primary{
width:100%;
}

.product-title{
font-size:18px!important;
}

/* Options paiement en colonne */
.control-group label.radio{
display:block;
margin-bottom:8px;
}

/* Bouton checkout pleine largeur */
#checkoutButton{
width:100%;
}

}

/* ================= FORM BUILDER CHECKBOX ================= */

input[type="checkbox"]{

appearance:none;
-webkit-appearance:none;

width:18px;
height:18px;

border:2px solid #4b5563;
border-radius:4px;

background:#0f172a;

cursor:pointer;

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

}

input[type="checkbox"]:checked{

background:#16a34a;
border-color:#16a34a;

}

input[type="checkbox"]:checked::after{

content:"✓";
color:white;
font-size:13px;
font-weight:bold;

}

.product-description ul{
list-style:none;
padding-left:0;
}

.product-description li{
padding:6px 0;
}

.product-description li::before{
content:"✓ ";
color:#22c55e;
font-weight:bold;
margin-right:6px;
}

.product-description ul{
list-style:none;
padding-left:0;
}

.product-description li{
padding:6px 0;
}

.product-description li::before{
content:"✓ ";
color:#22c55e;
font-weight:bold;
margin-right:6px;
}

.features{
list-style:none;
padding:0;
}

.features li{
padding-left:22px;
margin-bottom:6px;
position:relative;
}

.features li:before{
content:"✓";
position:absolute;
left:0;
color:#22c55e;
font-weight:bold;
}

.product-title{
font-size:26px;
font-weight:700;
margin-bottom:12px;
}

.product-description ul{
list-style:none;
padding-left:0;
margin-top:10px;
}

.product-description li{
padding-left:22px;
margin-bottom:6px;
position:relative;
}

.product-description li:before{
content:"✓";
position:absolute;
left:0;
color:#22c55e;
font-weight:bold;
}

.product-description ul{
list-style:none;
padding-left:0;
margin-top:10px;
}

.product-description li{
padding-left:22px;
margin-bottom:6px;
position:relative;
}

.product-description li:before{
content:"✓";
position:absolute;
left:0;
color:#22c55e;
font-weight:bold;
}


/* ===== SELECT ARROW FIX ===== */

select.form-select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

background-repeat:no-repeat;
background-position:right 12px center;
background-size:16px;

padding-right:40px;
cursor:pointer;
}

/* ===== FIX FLECHE SELECT FACTURATION ===== */

.form-select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
position:relative;
}

select.form-select{
background:#111827;
padding-right:40px;
cursor:pointer;
}

.form-select-wrapper{
position:relative;
}

.form-select-wrapper::after{
content:"▼";
position:absolute;
right:15px;
top:50%;
transform:translateY(-50%);
color:#94a3b8;
font-size:12px;
pointer-events:none;
}

/* ================= PERIOD CARDS (CYCLE FACTURATION) ================= */

.period-cards{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:4px;
}

.period-card{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
flex:1 1 130px;
min-width:110px;
padding:16px 14px;
border-radius:14px;
border:2px solid #374151;
background:#1f2937;
cursor:pointer;
transition:border-color .2s,background .2s,box-shadow .2s;
text-align:center;
user-select:none;
}

.period-card:hover{
border-color:#3b82f6;
background:#1e2d48;
}

.period-card:has(input:checked){
border-color:#3b82f6;
background:linear-gradient(135deg,rgba(30,58,138,0.45),rgba(37,99,235,0.25));
box-shadow:0 0 0 1px #3b82f6,0 4px 18px rgba(59,130,246,0.18);
}

.period-card-input{
position:absolute;
opacity:0;
width:0;
height:0;
pointer-events:none;
}

.period-card-name{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.07em;
color:#94a3b8;
margin-bottom:8px;
}

.period-card:has(input:checked) .period-card-name{
color:#60a5fa;
}

.period-card-price{
font-size:20px;
font-weight:700;
color:#f3f4f6;
}

.period-card:has(input:checked) .period-card-price{
color:#ffffff;
}

@media(max-width:576px){

.period-cards{
gap:8px;
}

.period-card{
padding:12px 10px;
min-width:90px;
flex:1 1 90px;
}

.period-card-price{
font-size:16px;
}

.period-card-name{
font-size:11px;
}

}