/* ===========================================================================
   CUBX Theme -- theme-order-confirmation.css
   Habillage CUBX de la page de confirmation de commande.
   ---------------------------------------------------------------------------
   Scope strict : body.page-order-confirmation. Charge a priority 227 (entre
   theme-checkout 226 et theme-systempay 228).

   Pourquoi un fichier ISOLE : la page de confirmation est une surface a part
   (controller=order-confirmation), distincte du tunnel checkout (page-order).
   theme-checkout.css est scope body.page-order et ne s'applique donc PAS ici.
   Fichier isole = coherent avec theme-systempay.css, facile a desactiver.

   Template associe : templates/checkout/order-confirmation.tpl (vrai override
   Smarty, reecrit les blocs nommes en cartes creme CUBX).

   Pattern visuel : calque sur la section ORDER DETAIL de theme-account.css
   (cartes creme .cubx-oc-card, grille produits desktop -> stack mobile avec
   labels reaffiches, totaux alignes a droite, grand total accentue).

   Le parent etend page.tpl (pas customer/page.tpl) -> PAS de hero gallery.

   Variables CSS consommees : memes tokens que theme-account / theme-checkout
   (--cubx-bg / --cubx-accent / --cubx-radius / --cubx-text / --cubx-text-light).

   Commentaires ASCII pur (convention H2J).

   @author    H2J Ecosystem <info@2klove.fr>
   @copyright 2024-2026 H2J sas RCS 978391720
   @since     v2.5.289 (chantier page confirmation de commande)
   @version   v2.5.290 (fix duplication : override par sous-blocs + partial,
                        les .card natives PS deviennent les cartes creme)
   =========================================================================== */


/* ===========================================================================
   1. WRAPPER DE PAGE + CARTES NATIVES PS + MASQUAGE BREADCRUMB
   ---------------------------------------------------------------------------
   v2.5.290 : le template override ne wrappe plus le contenu dans des
   .cubx-oc-card -- il override les SOUS-BLOCS du parent (header + details)
   et le PARTIAL articles. Le contenu CUBX vit donc DANS les <section
   class="card"> natives PS. On transforme donc ces .card natives EN cartes
   creme CUBX directement (au lieu de les neutraliser).

   Les 3 sections PS de la page :
     #content-hook_order_confirmation  -> carte entete (succes)
     #content (page-order-confirmation) -> carte articles + details
     #content-hook_payment_return       -> carte retour paiement
   =========================================================================== */

body.page-order-confirmation #wrapper .container {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* Masquage breadcrumb (idem /order-detail) */
body.page-order-confirmation #wrapper .container > nav[aria-label="Breadcrumb"],
body.page-order-confirmation .breadcrumb {
  display: none !important;
}

body.page-order-confirmation #content-wrapper {
  width: 100%;
  float: none;
  padding: 0;
}

/* Les <section class="card"> natives PS DEVIENNENT les cartes creme CUBX. */
body.page-order-confirmation #content-hook_order_confirmation,
body.page-order-confirmation #content.page-order-confirmation,
body.page-order-confirmation #content-hook_payment_return {
  background: var(--cubx-bg, #fef8e9);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
  border-radius: var(--cubx-radius, 12px);
  box-shadow: none;
  padding: 20px 24px;
  margin: 0 0 18px;
}

/* Le .card-block interne et les .row Bootstrap : neutralises (inertes). */
body.page-order-confirmation .card-block,
body.page-order-confirmation #content-wrapper .row {
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  float: none;
}

/* Les sous-conteneurs articles / details : on enleve la grille Bootstrap. */
body.page-order-confirmation #order-items,
body.page-order-confirmation #order-details,
body.page-order-confirmation .cubx-oc-products-wrap,
body.page-order-confirmation .cubx-oc-details-wrap {
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  float: none;
}

/* Separateur entre la zone articles et la zone details dans la meme carte. */
body.page-order-confirmation .cubx-oc-details-wrap {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 18%, transparent);
}


/* ===========================================================================
   2. TITRES DE SECTION
   =========================================================================== */

body.page-order-confirmation .cubx-oc-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  margin: 0 0 14px;
}

body.page-order-confirmation .cubx-oc-link {
  color: var(--cubx-accent, #c9a84c);
  font-weight: 600;
  text-decoration: none;
}

body.page-order-confirmation .cubx-oc-link:hover {
  text-decoration: underline;
}


/* ===========================================================================
   3. CARTE ENTETE -- "Votre commande est confirmee"
   ---------------------------------------------------------------------------
   La section native #content-hook_order_confirmation porte la teinte verte
   de succes. Elle contient notre bloc .cubx-oc-header__top + le <p> natif
   du parent (email / facture).
   =========================================================================== */

body.page-order-confirmation #content-hook_order_confirmation {
  border-color: color-mix(in srgb, #16a34a 28%, transparent);
  background: color-mix(in srgb, #16a34a 5%, var(--cubx-bg, #fef8e9));
}

body.page-order-confirmation .cubx-oc-header__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

body.page-order-confirmation .cubx-oc-header__check {
  font-size: 34px;
  color: #16a34a;
  flex-shrink: 0;
}

body.page-order-confirmation .cubx-oc-header__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--cubx-text, #1e293b);
  margin: 0;
  line-height: 1.3;
}

/* Le <p> email/facture du parent (non wrappe, rendu apres notre bloc). */
body.page-order-confirmation #content-hook_order_confirmation p {
  margin: 0;
  font-size: 13.5px;
  color: var(--cubx-text-light, #64748b);
  line-height: 1.55;
}

body.page-order-confirmation #content-hook_order_confirmation p a {
  color: var(--cubx-accent, #c9a84c);
  font-weight: 600;
  text-decoration: none;
}

body.page-order-confirmation #content-hook_order_confirmation p a:hover {
  text-decoration: underline;
}


/* ===========================================================================
   4. CARTE PRODUITS
   ---------------------------------------------------------------------------
   Grille desktop : vignette | description | prix unit | qte | total.
   Stack mobile avec labels reaffiches (pattern /order-detail).
   =========================================================================== */

body.page-order-confirmation .cubx-oc-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-order-confirmation .cubx-oc-product {
  display: grid;
  grid-template-columns: 64px 2.4fr 1fr 0.8fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 5%, transparent);
  border-radius: var(--cubx-radius, 8px);
}

/* Vignette produit : taille raisonnable (le Classic affichait des images
   geantes pleine colonne faute de contrainte). */
body.page-order-confirmation .cubx-oc-product__media {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

body.page-order-confirmation .cubx-oc-product__media img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  display: block;
}

body.page-order-confirmation .cubx-oc-product__desc {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.page-order-confirmation .cubx-oc-product__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  line-height: 1.4;
}

body.page-order-confirmation .cubx-oc-product__custom {
  font-size: 11.5px;
  color: var(--cubx-text-light, #94a3b8);
}

body.page-order-confirmation .cubx-oc-product__price,
body.page-order-confirmation .cubx-oc-product__qty,
body.page-order-confirmation .cubx-oc-product__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--cubx-text, #1e293b);
  text-align: right;
}

/* Label des cellules : masque en desktop (alignement colonnes suffit),
   reaffiche en mobile quand les cellules se stackent. */
body.page-order-confirmation .cubx-oc-product__label {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--cubx-text-light, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.page-order-confirmation .cubx-oc-product__value {
  font-size: 13px;
}

body.page-order-confirmation .cubx-oc-product__value--strong {
  font-weight: 700;
}


/* ===========================================================================
   5. TOTAUX
   ---------------------------------------------------------------------------
   Lignes alignees a droite, ligne grand total accentuee (idem /order-detail).
   =========================================================================== */

body.page-order-confirmation .cubx-oc-totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.page-order-confirmation .cubx-oc-totals__line {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 24px;
  font-size: 13px;
  color: var(--cubx-text-light, #64748b);
}

body.page-order-confirmation .cubx-oc-totals__label {
  text-align: right;
}

body.page-order-confirmation .cubx-oc-totals__value {
  min-width: 90px;
  text-align: right;
  font-weight: 600;
  color: var(--cubx-text, #1e293b);
}

body.page-order-confirmation .cubx-oc-totals__line--grand {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--cubx-accent, #c9a84c) 30%, transparent);
  font-size: 15px;
}

body.page-order-confirmation .cubx-oc-totals__line--grand .cubx-oc-totals__label {
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
}

body.page-order-confirmation .cubx-oc-totals__line--grand .cubx-oc-totals__value {
  font-weight: 800;
  color: var(--cubx-accent, #c9a84c);
}


/* ===========================================================================
   6. CARTE DETAILS DE LA COMMANDE
   ---------------------------------------------------------------------------
   Liste icone + libelle (pattern .cubx-od-infos__list de /order-detail).
   =========================================================================== */

body.page-order-confirmation .cubx-oc-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-order-confirmation .cubx-oc-details li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--cubx-text-light, #64748b);
  line-height: 1.5;
}

body.page-order-confirmation .cubx-oc-details .material-icons {
  font-size: 17px;
  color: var(--cubx-accent, #c9a84c);
  flex-shrink: 0;
  margin-top: 1px;
}

body.page-order-confirmation .cubx-oc-details strong {
  color: var(--cubx-text, #1e293b);
  font-weight: 600;
}

body.page-order-confirmation .cubx-oc-details__delay {
  color: var(--cubx-text-light, #94a3b8);
  font-size: 12px;
}


/* ===========================================================================
   7. CARTE HOOK PAYMENT RETURN (SystemPay / Colissimo)
   ---------------------------------------------------------------------------
   v2.5.290 : la section native PS #content-hook_payment_return EST la carte
   (deja stylee creme en section 1). On laisse le module rendre son markup
   interne tel quel (inline-styles SystemPay) en alignant juste la typo.

   NOTE : le bandeau jaune SystemPay ("validation auto n'a pas fonctionne" +
   "PASSAGE EN PRODUCTION") visible en dev est le mode TEST du module. C'est
   un point de config SystemPay a corriger separement, PAS un sujet CSS.
   =========================================================================== */

body.page-order-confirmation #content-hook_payment_return p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--cubx-text-light, #64748b);
}

body.page-order-confirmation #content-hook_payment_return a {
  color: var(--cubx-accent, #c9a84c);
  font-weight: 600;
  text-decoration: none;
}

body.page-order-confirmation #content-hook_payment_return a:hover {
  text-decoration: underline;
}


/* ===========================================================================
   8. CARTE CREATION DE COMPTE (client invite)
   ---------------------------------------------------------------------------
   Le bloc account_transformation_form est laisse au parent : il rend un
   <div class="card"> propre. On le transforme en carte creme + on aligne
   les champs et le bouton sur le design system CUBX.
   =========================================================================== */

body.page-order-confirmation .page-order-confirmation ~ .card,
body.page-order-confirmation #content-wrapper .card:not(#content-hook_order_confirmation):not(#content-hook_payment_return) {
  background: var(--cubx-bg, #fef8e9);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
  border-radius: var(--cubx-radius, 12px);
  box-shadow: none;
  padding: 20px 24px;
  margin: 0 0 18px;
}

body.page-order-confirmation #content-wrapper .card h3,
body.page-order-confirmation #content-wrapper .card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  margin: 0 0 12px;
}

body.page-order-confirmation #content-wrapper .card .form-control {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 25%, transparent);
  border-radius: var(--cubx-radius, 8px);
  font-size: 13.5px;
  padding: 10px 12px;
}

body.page-order-confirmation #content-wrapper .card .btn,
body.page-order-confirmation #content-wrapper .card button[type="submit"] {
  background: var(--cubx-accent, #c9a84c);
  border: none;
  border-radius: var(--cubx-radius, 8px);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 11px 24px;
  transition: opacity 0.15s;
}

body.page-order-confirmation #content-wrapper .card .btn:hover,
body.page-order-confirmation #content-wrapper .card button[type="submit"]:hover {
  opacity: 0.88;
}


/* ===========================================================================
   9. RESPONSIVE
   =========================================================================== */

@media (max-width: 768px) {
  /* Produits : vignette + desc en haut, prix/qte/total stackes avec labels */
  body.page-order-confirmation .cubx-oc-product {
    grid-template-columns: 64px 1fr 1fr;
    gap: 10px 14px;
  }
  body.page-order-confirmation .cubx-oc-product__media {
    grid-row: 1 / 3;
  }
  body.page-order-confirmation .cubx-oc-product__desc {
    grid-column: 2 / 4;
  }
  body.page-order-confirmation .cubx-oc-product__label {
    display: block;
  }
  body.page-order-confirmation .cubx-oc-product__price,
  body.page-order-confirmation .cubx-oc-product__qty,
  body.page-order-confirmation .cubx-oc-product__total {
    text-align: left;
  }
}

@media (max-width: 480px) {
  body.page-order-confirmation #wrapper .container {
    padding: 16px 12px 36px;
  }
  body.page-order-confirmation .cubx-oc-card {
    padding: 16px 16px;
  }

  /* Produits : vignette en haut, desc dessous, puis prix/qte/total en ligne */
  body.page-order-confirmation .cubx-oc-product {
    grid-template-columns: 1fr 1fr;
  }
  body.page-order-confirmation .cubx-oc-product__media {
    grid-row: auto;
    grid-column: 1 / 3;
  }
  body.page-order-confirmation .cubx-oc-product__desc {
    grid-column: 1 / 3;
  }
  body.page-order-confirmation .cubx-oc-product__price,
  body.page-order-confirmation .cubx-oc-product__qty,
  body.page-order-confirmation .cubx-oc-product__total {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  body.page-order-confirmation .cubx-oc-header__title {
    font-size: 18px;
  }
  body.page-order-confirmation .cubx-oc-totals__line {
    gap: 16px;
  }
}


/* ===========================================================================
   FIN theme-order-confirmation.css
   =========================================================================== */