/* --- ID 330: hivepress (menu) - commandes --- */
/*************************************************
 * HOMERENTAI — COMPTE > COMMANDES (WooCommerce) — CLEAN / FINAL
 * - CSS NATIF (pas de nesting type SCSS)
 * - Desktop: tableau propre, colonnes stables, bouton non coupé
 * - Mobile: cards empilées, lisibles
 *************************************************/

/* ================================
   0) Tokens (si déjà ailleurs, OK)
   ================================ */
:root{
  --hr-blue:#4C6FFF;
  --hr-text:#0f172a;
  --hr-muted:#94a3b8;
  --hr-muted2:#9ca3af;
  --hr-card:#ffffff;
  --hr-panel:#fefefe; /* ~254/254/254 */
  --hr-line:rgba(15,23,42,.06);
  --hr-shadow:0 24px 80px rgba(15,23,42,.06);
  --hr-shadow-hover:0 22px 60px rgba(76,111,255,.22), 0 0 0 1px rgba(76,111,255,.06);
  --hr-radius:26px;
  --hr-panel-radius:32px;
}

/* ==========================================================
   1) Supprimer le H1 WP “Moyens de paiement” (uniquement ici)
   ========================================================== */
.page__text:has(.woocommerce .woocommerce-orders-table) > h1.wp-block-heading{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* ==========================================================
   2) Scope page “Commandes”
   ========================================================== */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce .woocommerce-notices-wrapper{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ==========================================================
   3) Table -> panel + cards
   ========================================================== */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table.woocommerce-MyAccount-orders{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 18px !important;
  table-layout:fixed !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  position:relative !important;
  z-index:0 !important;
}

/* Panel derrière */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table.woocommerce-MyAccount-orders::before{
  content:"";
  position:absolute;
  inset:-26px -26px -26px -26px;
  background:var(--hr-panel) !important;
  border-radius:var(--hr-panel-radius) !important;
  box-shadow:var(--hr-shadow) !important;
  z-index:-1 !important;
}

/* Head */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table thead,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table thead tr,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table thead th{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table thead th{
  padding:0 12px 12px !important;
  color:rgba(15,23,42,.55) !important;
  font-weight:600 !important;
  font-size:.85rem !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Body reset */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody th,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody td{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Row = card (IMPORTANT: pas de overflow hidden sinon le hover/bouton peut se faire “clip”) */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr{
  background:var(--hr-card) !important;
  border-radius:var(--hr-radius) !important;
  box-shadow:var(--hr-shadow) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
  overflow:visible !important;            /* ✅ évite “bouton coupé” */
  position:relative !important;
}

.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--hr-shadow-hover) !important;
  z-index:2 !important;
}

/* Cellules */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody th,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody td{
  padding:16px 18px !important;
  vertical-align:middle !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* ==========================================================
   4) Largeurs Desktop (>= 769px) — stable + “État” plus large
   ========================================================== */
@media (min-width:769px){

  /* Répartition des colonnes : utilise l’espace à droite */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-number,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-number{ width:14% !important; }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-date,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-date{ width:21% !important; }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-status,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-status{ width:17% !important; } /* ✅ plus large */

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-total,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total{ width:30% !important; }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-actions,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-actions{ width:18% !important; }

  /* Actions header centré */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-actions{
    text-align:center !important;
  }

  /* ✅ Actions cell: centre le bouton dans sa colonne */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-actions{
    text-align:center !important;
    overflow:visible !important; /* ✅ évite clipping */
  }

  /* Total: autoriser le wrap pour ne jamais chevaucher */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.25 !important;
  }

  /* Date: ellipsis propre */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-date time{
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }
}

/* ==========================================================
   5) Styles contenus (lien, total, status, bouton)
   ========================================================== */

/* Order number */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-number a{
  color:var(--hr-blue) !important;
  text-decoration:none !important;
  font-weight:700 !important;
}
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-number a:hover{
  text-decoration:underline !important;
}

/* Date */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-date time{
  color:var(--hr-muted2) !important;
  font-size:.95rem !important;
}

/* Total */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total{
  color:var(--hr-muted2) !important;
  font-size:.95rem !important;
}
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total del,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total ins{
  text-decoration:none !important;
  background:transparent !important;
}
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total ins .amount{
  color:rgba(15,23,42,.72) !important;
  font-weight:700 !important;
}
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total del{
  color:rgba(148,163,184,.9) !important;
  margin-right:6px !important;
}

/* ✅ Status badges: plus respirants (desktop + mobile) */
.hp-page__content:has(.woocommerce-orders-table) .hp-order__status.hp-status{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:600 !important;
  font-size:.95rem !important;
  color:rgba(15,23,42,.72) !important;
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
}
.hp-page__content:has(.woocommerce-orders-table) .hp-order__status.hp-status span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:4px 12px !important;
  line-height:1.12 !important;
  border-radius:999px !important;
  border-width:1.6px !important;
  white-space:nowrap !important;
}

/* Bouton Voir */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-actions .woocommerce-button.button.view{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  background:var(--hr-blue) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 14px 30px rgba(76,111,255,.18) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-actions .woocommerce-button.button.view:hover{
  filter:brightness(0.98);
  box-shadow:0 18px 40px rgba(76,111,255,.22) !important;
}

/* ==========================================================
   6) Mobile (<= 768px) — cards empilées
   ========================================================== */
@media (max-width:768px){

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table.woocommerce-MyAccount-orders::before{
    inset:-18px -18px -18px -18px !important;
    border-radius:28px !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table thead{
    display:none !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table.woocommerce-MyAccount-orders{
    border-spacing:0 16px !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr{
    display:block !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr > th,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr > td{
    display:block !important;
    width:100% !important;
    padding:14px 18px !important;
    text-align:left !important;
    overflow:visible !important;
  }

  /* “Titre” */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-number{
    padding-bottom:10px !important;
  }

  /* compact */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-date,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-status,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  /* Footer actions */
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-actions{
    border-top:1px solid var(--hr-line) !important;
    padding-top:12px !important;
    padding-bottom:14px !important;
  }
}

/* ==========================================================
   7) Petit fix header "Commande" qui se coupe parfois
   ========================================================== */
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-number .nobr,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-date .nobr,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-status .nobr,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-total .nobr,
.hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__header-order-actions .nobr{
  white-space:nowrap !important;
}












/* ==========================================================
   COMMANDES — élargir la colonne "Commande"
   ========================================================== */
@media (min-width:769px){

  /* Colonne Commande plus large */
  .hp-page__content:has(.woocommerce-orders-table)
  .woocommerce-orders-table__header-order-number,
  .hp-page__content:has(.woocommerce-orders-table)
  .woocommerce-orders-table__cell-order-number{
    width:18% !important; /* avant 14% */
  }

  /* On reprend un peu sur Total pour compenser */
  .hp-page__content:has(.woocommerce-orders-table)
  .woocommerce-orders-table__header-order-total,
  .hp-page__content:has(.woocommerce-orders-table)
  .woocommerce-orders-table__cell-order-total{
    width:26% !important; /* avant 30% */
  }
}













/* ==========================================================
   COMMANDES — MOBILE FINAL POLISH
   - Supprime les labels WC (Date / État / Actions)
   - Ajoute une vraie card avec ombre visible
   ========================================================== */
@media (max-width:768px){

  .hp-page__content:has(.woocommerce-orders-table){
    .woocommerce,
    .woocommerce-MyAccount-content,
    .woocommerce-orders-table.woocommerce-MyAccount-orders,
    .woocommerce-orders-table.woocommerce-MyAccount-orders tbody{
      overflow: visible !important;
    }

    /* ===== 1) Card visible (ombre + arrondi) ===== */
    .woocommerce-orders-table.woocommerce-MyAccount-orders tbody tr{
      background:#fff !important;
      border-radius:22px !important;
      box-shadow:
        0 10px 26px rgba(15,23,42,.09),
        0 0 0 1px rgba(15,23,42,.04) !important;
      overflow:visible !important;
    }

    /* ===== 2) Supprimer les labels WC "Date:", "État:", etc. ===== */
    .woocommerce-orders-table__cell::before{
      display:none !important;
      content:none !important;
    }

    /* ===== 3) Nettoyage typographique ===== */
    .woocommerce-orders-table__cell-order-date time{
      color:var(--hr-muted2) !important;
      font-size:.95rem !important;
    }

    .woocommerce-orders-table__cell-order-status{
      font-weight:600 !important;
      color:rgba(15,23,42,.75) !important;
    }

    /* ===== 4) Actions : bouton bien détaché ===== */
    .woocommerce-orders-table__cell-order-actions{
      border-top:1px solid var(--hr-line) !important;
      margin-top:6px !important;
      padding-top:14px !important;
      display:flex !important;
      justify-content:flex-start !important;
    }
  }
}

/* ==========================================================
   COMMANDES — MOBILE COMPACT LAYOUT
   - réduit l'espace vertical des cards
   - desktop/tablette inchangés
   ========================================================== */
@media (max-width:768px){
  .hp-page__content:has(.woocommerce-orders-table) .hp-page__title,
  .hp-page__content:has(.woocommerce-orders-table) h1.entry-title{
    position:relative !important;
    z-index:3 !important;
    line-height:1.14 !important;
    margin:0 0 18px !important;
    overflow:visible !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table.woocommerce-MyAccount-orders{
    border-spacing:0 10px !important;
    margin-top:6px !important;
    overflow: visible !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table.woocommerce-MyAccount-orders::before{
    inset:-6px -16px -24px -16px !important;
    border-radius:25px !important;
    box-shadow:0 18px 44px rgba(15,23,42,.07) !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "number date"
      "status total"
      "actions actions" !important;
    column-gap:10px !important;
    row-gap:6px !important;
    padding:12px 14px !important;
    border-radius:20px !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr > th,
  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table tbody tr > td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    line-height:1.25 !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-number{
    grid-area:number !important;
    padding-top:2px !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-date{
    grid-area:date !important;
    text-align:right !important;
    white-space:nowrap !important;
    align-self:start !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-status{
    grid-area:status !important;
    padding-top:2px !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total{
    grid-area:total !important;
    text-align:right !important;
    padding-top:2px !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-actions{
    grid-area:actions !important;
    margin-top:4px !important;
    padding-top:10px !important;
    border-top:1px solid var(--hr-line) !important;
    display:flex !important;
    justify-content:flex-start !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-actions .woocommerce-button.button.view{
    min-height:38px !important;
    padding:8px 14px !important;
    font-size:.9rem !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-date time{
    font-size:.88rem !important;
  }

  .hp-page__content:has(.woocommerce-orders-table) .woocommerce-orders-table__cell-order-total{
    font-size:.9rem !important;
  }
}