body {
  background: radial-gradient(circle at center, #123e45 0%, #0b262c 100%);
  font-family: "Pirata One", serif;
  color: #fff;
}




/* WRAPPER */
.commande-wrapper {
  max-width: 1100px;
  margin: 60px auto;
  background: rgba(12, 46, 51, 0.95);
  border: 2px solid #d4af37;
  border-radius: 20px;
  padding: 40px;
}

/* TITRES */
h1 {
  text-align: center;
  color: #f8c42d;
}

h2 {
  color: #ffd700;
}

/* GRID */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* BOX */
.client-box,
.payment-box {
  background: #0c2e33;
  border-radius: 15px;
  padding: 25px;
}

/* INPUTS */
input,
select {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d4af37;
  background: #072025;
  color: #ffd700;
  font-size: 14px;
}

/* TABLE */
.commande-table {
  width: 100%;
}

.commande-table img {
  width: 60px;
  border-radius: 6px;
}

/* TOTAL */
.commande-total {
  text-align: right;
  font-size: 22px;
  color: #ffd700;
  margin-top: 10px;
}

/* BUTTON */
.btn-commander {
  width: 100%;
  background: linear-gradient(145deg,#c59b00,#8a6e00);
  padding: 15px;
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  margin-top:1rem!important;
}

.btn-commander:hover {
  transform: scale(1.03);
}

/* PAYPAL */
#paypal-zone {
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  margin-top: 20px;
}

/* ABEILLES */
.abeille-container {
  margin-top: 15px;
}

.abeille-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.abeille-line input {
  width: auto !important;
  transform: scale(1.2);
}

.bee-message {
  font-size: 14px;
  color: #f8c42d;
  margin-top: 5px;
}

.bee-count {
  font-size: 13px;
  color: #ccc;
  margin-top: 5px;
}

/* ============================= */
/* 📱 TABLETTE */
/* ============================= */
@media(max-width: 900px){

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

  .commande-wrapper {
    margin: 30px 15px;
    padding: 25px;
  }

}

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

@media(max-width:700px){

.commande-wrapper{
    margin:80px 10px;
    padding:20px;
}

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

.client-box,
.payment-box{
    padding:18px;
}

.commande-table{
    display:block;
}

.commande-table tbody{
    display:block;
}

.commande-table tr{
    display:block;
    background:#12343a;
    border:2px solid #d4af37;
    border-radius:15px;
    padding:15px;
    margin-bottom:20px;
}

.commande-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:none;
    padding:10px 0;
}

.commande-table td::before{
    content:attr(data-label);
    color:#ffd700;
    font-weight:bold;
}

.commande-table td:first-child{
    display:block;
    text-align:center;
}

.commande-table td:first-child::before{
    display:none;
}

.commande-table thead{
    display:none;
}
.commande-table img{

    width:100%;

    max-width:260px;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:15px;

    display:block;

    margin:0 auto 20px;

    border:2px solid #d4af37;

}

.commande-total{
    text-align:center;
    font-size:30px;
    margin-top:20px;
}

.btn-commander{
    font-size:20px;
    padding:16px;
}

.delete-checkout{
    width:55px;
    height:55px;
    font-size:26px;
}

input,
select{
    font-size:16px;
}

}


.livraison-offerte{

    margin:25px 0;
    padding:25px;

    border:2px solid #D4AF37;
    border-radius:18px;

    background:linear-gradient(
        180deg,
        rgba(212,175,55,.08),
        rgba(212,175,55,.02)
    );

}

.livraison-title{

    text-align:center;
    color:#D4AF37;
    font-size:28px;
    font-weight:700;
    margin-bottom:25px;

}

.livraison-bar{

    position:relative;

    width:100%;
    height:22px;

    background:#17323a;

    border-radius:50px;

    overflow:visible;

}

.livraison-fill{

    position:relative;

    height:100%;

    background:linear-gradient(
        90deg,
        #d4af37,
        #f8d86b
    );

    border-radius:50px;

    transition:.4s ease;

}

.livraison-camion{

    position:absolute;

    right:-18px;

    top:50%;

    transform:translateY(-50%) scaleX(-1);

    font-size:42px;

    z-index:20;

    line-height:1;

}

.livraison-text{

    margin-top:25px;

    text-align:center;

    color:#fff;

    font-size:22px;

    line-height:1.4;

}

.livraison-text strong{

    color:#D4AF37;

}

.livraison-text span{

    color:#55d87d;

    font-weight:bold;

}