/* ═══════════════════════════════════════════════════════════════

   PANIER — Checkout en 1 étape

   ═══════════════════════════════════════════════════════════════ */



/* Layout 2 colonnes */

.lm-onestep-cart {

    max-width: 1200px;

    margin: 0 auto;

    padding: 30px 20px;

}



.lm-cart-items {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 30px;

    align-items: start;

}



@media (max-width: 960px) {

    .lm-cart-items {

        grid-template-columns: 1fr;

    }

}



/* ── Titre de section ── */

.lm-section-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--dark);

    margin: 0 0 18px;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--border);

}



/* ── Panier vide ── */

.lm-cart-empty {

    text-align: center;

    padding: 60px 20px;

    background: var(--white);

    border-radius: var(--rlg);

    box-shadow: 0 4px 20px rgba(0,0,0,.06);

}



/* ══════════════════════════════════

   TABLEAU DES ARTICLES

══════════════════════════════════ */

.lm-cart-table {

    width: 100%;

    border-collapse: collapse;

    background: var(--white);

    border-radius: var(--rlg);

    box-shadow: 0 4px 20px rgba(0,0,0,.06);

    overflow: hidden;

}



.lm-cart-table thead tr {

    background: var(--bg);

}



.lm-cart-table th {

    padding: 14px 16px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .05em;

    color: var(--muted);

    text-align: left;

    border-bottom: 1px solid var(--border);

}



.lm-cart-table td {

    padding: 14px 16px;

    vertical-align: middle;

    border-bottom: 1px solid var(--border);

    font-size: 14px;

    color: var(--dark);

}



.lm-cart-table tr:last-child td {

    border-bottom: none;

}



.lm-cart-table .product-thumbnail img {

    width: 64px;

    height: 64px;

    object-fit: cover;

    border-radius: 8px;

    display: block;

}



.lm-cart-table .product-name a {

    color: var(--dark);

    font-weight: 600;

}

.lm-cart-table .product-name a:hover { color: var(--org); }



.lm-cart-table .product-price,

.lm-cart-table .product-subtotal {

    font-weight: 600;

    color: var(--dark);

}



.lm-cart-table .quantity input {

    width: 60px;

    text-align: center;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 6px;

    font-size: 14px;

}



.lm-remove-item {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    background: #fee2e2;

    color: #ef4444 !important;

    border-radius: 50%;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition: background .2s;

}

.lm-remove-item:hover { background: #fca5a5; }



.lm-cart-actions { background: var(--bg) !important; }



.lm-coupon {

    display: inline-flex;

    gap: 8px;

    align-items: center;

}



.lm-coupon input {

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 8px 14px;

    font-size: 13px;

    outline: none;

    transition: border-color .2s;

}

.lm-coupon input:focus { border-color: var(--org); }



.lm-btn-outline {

    background: transparent !important;

    border: 2px solid var(--org) !important;

    color: var(--org) !important;

    border-radius: 8px !important;

    padding: 8px 16px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    cursor: pointer;

    transition: all .2s;

}

.lm-btn-outline:hover {

    background: var(--org) !important;

    color: var(--dark) !important;

}



.lm-btn-update {

    float: right;

    background: var(--bg) !important;

    border: 1px solid var(--border) !important;

    color: var(--muted) !important;

    border-radius: 8px !important;

    padding: 8px 16px !important;

    font-size: 13px !important;

    cursor: pointer;

    transition: all .2s;

}

.lm-btn-update:hover {

    border-color: var(--org) !important;

    color: var(--org) !important;

}



/* ══════════════════════════════════

   SIDEBAR DROITE

══════════════════════════════════ */

.lm-onestep-sidebar {

    display: flex;

    flex-direction: column;

    gap: 20px;

    position: sticky;

    top: 20px;

}



.lm-cart-totals-box {

    background: var(--white);

    border-radius: var(--rlg);

    box-shadow: 0 4px 20px rgba(0,0,0,.06);

    padding: 22px;

}



.lm-cart-totals-box .cart_totals { margin: 0; }

.lm-cart-totals-box h2 { display: none; }



.lm-cart-totals-box table {

    width: 100%;

    border-collapse: collapse;

}



.lm-cart-totals-box table th,

.lm-cart-totals-box table td {

    padding: 10px 0;

    font-size: 14px;

    border-bottom: 1px solid var(--border);

}



.lm-cart-totals-box table tr:last-child th,

.lm-cart-totals-box table tr:last-child td {

    border-bottom: none;

    font-size: 16px;

    font-weight: 700;

    color: var(--dark);

}



/* Masquer le bouton natif "Valider la commande" dans le bloc totaux */

.lm-cart-totals-box .checkout-button,

.lm-cart-totals-box .wc-proceed-to-checkout { display: none !important; }



/* ══════════════════════════════════

   BOUTON WHATSAPP PANIER

══════════════════════════════════ */

.lm-whatsapp-cart-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: #25D366;

    color: #fff !important;

    border-radius: var(--rlg);

    padding: 16px 20px;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    transition: background .2s, transform .15s;

    box-shadow: 0 4px 14px rgba(37,211,102,.35);

    text-align: center;

}

.lm-whatsapp-cart-btn:hover {

    background: #1ebe5d;

    transform: translateY(-1px);

    color: #fff !important;

}



/* ══════════════════════════════════

   FORMULAIRE CHECKOUT 1 ÉTAPE

══════════════════════════════════ */

.lm-onestep-form {

    background: var(--white);

    border-radius: var(--rlg);

    box-shadow: 0 4px 20px rgba(0,0,0,.06);

    padding: 22px;

}



.lm-checkout-form .form-row { margin-bottom: 14px; }



.lm-checkout-form label {

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

    color: var(--muted);

    display: block;

    margin-bottom: 5px;

}



.lm-checkout-form input.input-text,

.lm-checkout-form select,

.lm-checkout-form textarea {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 10px 14px;

    font-size: 14px;

    font-family: var(--font);

    color: var(--dark);

    outline: none;

    transition: border-color .2s;

}

.lm-checkout-form input.input-text:focus,

.lm-checkout-form select:focus,

.lm-checkout-form textarea:focus {

    border-color: var(--org);

    box-shadow: 0 0 0 3px rgba(56,189,248,.1);

}



.lm-checkout-form .form-row-first,

.lm-checkout-form .form-row-last {

    display: inline-block;

    width: calc(50% - 6px);

}

.lm-checkout-form .form-row-first { margin-right: 10px; }



/* ═══════════════════════════

   SÉLECTEUR MODE DE PAIEMENT

═══════════════════════════ */

.lm-payment-mode-selector {

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--border);

}



.lm-payment-options {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 14px;

}



.lm-payment-option { cursor: pointer; }



.lm-payment-option input[type="radio"] {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}



.lm-payment-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 14px 10px;

    border: 2px solid var(--border);

    border-radius: var(--r);

    text-align: center;

    transition: all .2s;

    background: var(--white);

}



.lm-payment-option input:checked + .lm-payment-card {

    border-color: var(--org);

    background: var(--bg);

    box-shadow: 0 0 0 3px rgba(56,189,248,.15);

}



.lm-pay-icon { font-size: 22px; display: block; }

.lm-pay-label { font-size: 13px; font-weight: 700; color: var(--dark); }

.lm-pay-desc { font-size: 11px; color: var(--muted); }



.lm-mobile-money-field {

    background: var(--bg);

    border-radius: 8px;

    padding: 14px;

    margin-bottom: 14px;

}



.lm-mobile-money-field label {

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

    color: var(--muted);

    display: block;

    margin-bottom: 6px;

}



.lm-mobile-money-field input {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 10px 14px;

    font-size: 14px;

    font-family: var(--font);

    outline: none;

}

.lm-mobile-money-field input:focus { border-color: var(--org); }



.lm-order-notes { margin-top: 16px; }



.lm-order-notes label {

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

    color: var(--muted);

    display: block;

    margin-bottom: 6px;

}



.lm-order-notes textarea {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 10px 14px;

    font-size: 13px;

    font-family: var(--font);

    resize: vertical;

    outline: none;

    transition: border-color .2s;

}

.lm-order-notes textarea:focus { border-color: var(--org); }



#order_review {

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--border);

}



#order_review h3 {

    font-size: 14px;

    font-weight: 700;

    color: var(--dark);

    margin-bottom: 12px;

}



/* Masquer les modes de paiement WooCommerce natifs */

.lm-checkout-form #payment { display: none; }



/* Bouton Passer la commande */

.lm-checkout-form #place_order,

.lm-checkout-form .place-order .button {

    width: 100%;

    background: var(--org) !important;

    color: var(--dark) !important;

    border: none !important;

    border-radius: var(--r) !important;

    padding: 16px 20px !important;

    font-size: 16px !important;

    font-weight: 800 !important;

    cursor: pointer;

    transition: background .2s, transform .15s;

    box-shadow: 0 4px 14px rgba(56,189,248,.35);

    font-family: var(--font) !important;

    margin-top: 16px;

}

.lm-checkout-form #place_order:hover,

.lm-checkout-form .place-order .button:hover {

    background: var(--org2) !important;

    color: #fff !important;

    transform: translateY(-1px);

}



.lm-btn-primary {

    display: inline-block;

    background: var(--org);

    color: var(--dark) !important;

    border-radius: var(--r);

    padding: 12px 24px;

    font-weight: 700;

    font-size: 14px;

    text-decoration: none;

    transition: background .2s;

}

.lm-btn-primary:hover {

    background: var(--org2);

    color: #fff !important;

}


/* ═══════════════════════════════════════════════════════════
   BOUTON "Commander via WhatsApp" — page panier
   Aligné visuellement sur le bouton équivalent de chinastore.ci
   (même vert WhatsApp, mêmes proportions, même effet au survol).
═══════════════════════════════════════════════════════════ */
.lm-cart-wa-btn{
  width: 100%;
  background: #25D366;
  color: #fff;
  border: none;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 8px 20px -10px rgba(37,211,102,.55);
  transition: background .15s ease, transform .15s ease;
}
.lm-cart-wa-btn:hover{
  background: #1EBE5A;
  transform: translateY(-1px);
}
.lm-cart-wa-btn svg{ flex-shrink: 0; }