/* ============================================================================
   PANIER : Relooking CSS V02 (style mockup UX)
   Mission INTEG-SUB-PANIER-CSS | DI-INTEG-A1

   RESOLUTION BREAKPOINTS :
   - max-width: 429px           (Mobile small)
   - 430px -> 767px             (Mobile / Tablet)
   - 768px -> 1023px            (Tablet landscape)
   - 1024px -> 1439px           (Desktop medium)
   - min-width: 1440px          (Desktop large)
   ============================================================================ */


/* --------------------------------------------------------------------------
   PANIER 1/5 -- Conteneur principal + Accent line + Messages Drupal
   -------------------------------------------------------------------------- */

.da-panier {
  background: white;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(136, 74, 144, 0.08);
  overflow: hidden;
  position: relative;
}

/* --- Accent line top (3px gradient) --- */
.da-panier::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #884A90, #a26daa, #c49dcc);
}

/* --- Row container rythme vertical --- */
.da-panier .row-container {
  border-bottom: 1px solid #f0edf2;
}

.da-panier .row-container:last-child {
  border-bottom: none;
}


/* --- Messages Drupal relocalises --- */

.da-panier .da--drupal-messages .messages {
  border-radius: 0 8px 8px 0;
  border: 1px solid #e5e7eb;
  border-left-width: 3px;
  color: #333;
}

.da-panier .da--drupal-messages .messages--error {
  border-left-color: #dc3545;
  background: rgba(220, 53, 69, 0.05);
}

.da-panier .da--drupal-messages .messages--warning {
  border-left-color: #e6ac00;
  background: rgba(255, 193, 7, 0.06);
}

.da-panier .da--drupal-messages .messages--status {
  border-left-color: #28a745;
  background: rgba(40, 167, 69, 0.05);
}


/* --------------------------------------------------------------------------
   PANIER 2/5 -- Entete (header colonnes) + Lignes commandes
   -------------------------------------------------------------------------- */

/* --- Header --- */

.da-panier .row-container .da-panier--header {
  background: linear-gradient(135deg, #884A90 0%, #9b64a5 100%);
  border-radius: 12px;
}

.da-panier .row-container .da-panier--header .da-label {
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.da-panier .row-container .da-panier--header .da-prix {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* --- Lignes commande --- */

.da-panier .row-container .da-panier--cmd {
  border-bottom: 1px solid #f0edf2;
  transition: all 0.2s ease;
  border-radius: 0;
}

.da-panier .row-container .da-panier--cmd:hover {
  background: rgba(136, 74, 144, 0.03);
  border-radius: 10px;
}

.da-panier .row-container .da-panier--cmd .da-label {
  color: #2d2d2d;
  font-weight: 500;
}

.da-panier .row-container .da-panier--cmd .da-prix {
  color: #2d2d2d;
  font-weight: 600;
  text-align: right;
}


/* --------------------------------------------------------------------------
   PANIER 3/5 -- Coupons (cmd + global) + Separateurs
   -------------------------------------------------------------------------- */

/* --- Ligne coupon --- */

.da-panier .row-container .da-panier--coupon {
  background: #faf8fb;
  border-bottom: 1px solid #f0edf2;
}

.da-panier .da-coupon {
  position: relative;
  overflow: hidden;
}

/* clearfix pour composer avec les floats .da-right */
.da-panier .da-coupon::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Badge coupon code (violet au lieu de jaune) --- */
.da-panier .row-container .coupon-code {
  background: #884A90;
  color: white;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.da-panier .da-coupon .coupon-rabais {
  color: #884A90;
  font-weight: 600;
}

.da-panier .da-coupon .coupon-name {
  color: #999;
}

/* --- Bouton Supprimer coupon --- */
.da-panier .da-coupon .da-button {
  background: transparent;
  color: #cc4455;
  border: 1px solid #cc4455;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  float: right;
}

.da-panier .da-coupon .da-button:hover {
  background: #cc4455;
  color: white;
}


/* --- Cumul --- */

.da-panier .row-container .da-panier--cumul .da-label {
  color: #666;
  font-weight: 500;
}

.da-panier .row-container .da-panier--cumul .da-prix {
  color: #555;
  font-weight: 500;
  text-align: right;
}


/* --- Separateurs --- */

.da-panier hr {
  border: none;
  border-top: 1px solid #ece8ef;
}


/* --------------------------------------------------------------------------
   PANIER 4/5 -- Prix final + Zone ajout coupon + Bouton action
   -------------------------------------------------------------------------- */

/* --- Prix final (fond sombre aubergine) --- */

.da-panier .row-container .da-panier--final {
  background: #2d2040;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(45, 32, 64, 0.15);
}

.da-panier .row-container .da-panier--final .da-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.da-panier .row-container .da-panier--final .da-prix {
  color: white;
  font-weight: 700;
  text-align: right;
}


/* --- Zone ajout coupon --- */

.da-panier .da-panier--add-coupon {
  background: #fcfbfd;
  border-top: 1px solid #f0edf2;
}

.da-panier .da-panier--add-coupon .da-label {
  color: #888;
}

.da-panier .da-panier--add-coupon .coupon-name {
  color: #888;
}

/* Input textfield coupon (.da-field) */
.da-panier .da-panier--add-coupon .da-field input,
.da-panier .da-panier--add-coupon input.da-field,
.da-panier .da-panier--add-coupon input[type="text"] {
  border: 2px solid #e5e0ea;
  border-radius: 10px;
  background: white;
  color: #333;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.da-panier .da-panier--add-coupon .da-field input:focus,
.da-panier .da-panier--add-coupon input.da-field:focus,
.da-panier .da-panier--add-coupon input[type="text"]:focus {
  border-color: #884A90;
  box-shadow: 0 0 0 3px rgba(136, 74, 144, 0.1);
}

/* Bouton Ajouter coupon (.da-button dans add_coupon) */
.da-panier .da-panier--add-coupon .da-button {
  background: linear-gradient(135deg, #884A90 0%, #9b64a5 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(136, 74, 144, 0.2);
}

.da-panier .da-panier--add-coupon .da-button:hover {
  box-shadow: 0 4px 14px rgba(136, 74, 144, 0.35);
}


/* --- Zone confirmer collision coupon (radios Oui/Non) --- */

.da-panier .da-panier--add-coupon .form-radios {
  display: inline-block;
}


/* --- Bouton action principal (Poursuivre) --- */

.da-group.da-group-action {
  text-align: center;
}

.da-group-button {
  display: inline-block;
}

.da-submit--accepted {
  background: #2d2040;
  color: white;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(45, 32, 64, 0.2);
}

.da-submit--accepted:hover {
  box-shadow: 0 8px 28px rgba(45, 32, 64, 0.35);
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   PANIER 5/5 -- MEDIA QUERIES
   -------------------------------------------------------------------------- */


/* --- Mobile small : max 429px --- */
@media (max-width: 429px) {

  .da-panier {
    padding: 12px;
    border-radius: 14px;
    margin: 0 -4px;
  }

  .da-panier .da--drupal-messages { margin-bottom: 12px; }
  .da-panier .da--drupal-messages .messages { padding: 10px 12px; font-size: 1.4rem; line-height: 1.4; }

  .da-panier .row-container .da-panier--header { padding: 12px 14px; margin: 6px 0 10px; }
  .da-panier .row-container .da-panier--header .da-label { font-size: 1.3rem; letter-spacing: 1px; }
  .da-panier .row-container .da-panier--header .da-prix { font-size: 1.0rem; }

  .da-panier .row-container .da-panier--cmd { padding: 12px 6px; }
  .da-panier .row-container .da-panier--cmd .da-label { font-size: 1.5rem; line-height: 1.3; }
  .da-panier .row-container .da-panier--cmd .da-prix { font-size: 1.5rem; }

  .da-panier .row-container .da-panier--coupon { padding: 8px 6px; }
  .da-panier .da-coupon .da-element { padding: 4px; }
  .da-panier .row-container .coupon-code { padding: 3px 8px; font-size: 1.2rem; }
  .da-panier .da-coupon .coupon-rabais { font-size: 1.2rem; }
  .da-panier .da-coupon .coupon-name { font-size: 1.1rem; }
  .da-panier .da-coupon .da-button { padding: 4px 10px; font-size: 1.2rem; }

  .da-panier .row-container .da-panier--cumul { padding: 10px 6px; }
  .da-panier .row-container .da-panier--cumul .da-label { font-size: 1.3rem; }
  .da-panier .row-container .da-panier--cumul .da-prix { font-size: 1.3rem; }

  .da-panier hr { margin: 6px 0; }

  .da-panier .row-container .da-panier--final { padding: 14px; margin: 10px 0 6px; }
  .da-panier .row-container .da-panier--final .da-label { font-size: 1.3rem; letter-spacing: 1px; }
  .da-panier .row-container .da-panier--final .da-prix { font-size: 1.6rem; }

  .da-panier .da-panier--add-coupon { padding: 12px 8px; }
  .da-panier .da-panier--add-coupon .da-label { font-size: 1.3rem; }
  .da-panier .da-panier--add-coupon input[type="text"] { padding: 8px 10px; font-size: 1.4rem; width: 100%; }
  .da-panier .da-panier--add-coupon .da-button { padding: 8px 14px; font-size: 1.3rem; }

  .da-group.da-group-action { padding: 16px 0 8px; }
  .da-submit--accepted { padding: 14px 32px; font-size: 1.5rem; width: 100%; }

  .da-panier .row-container { padding: 0; }
}


/* --- Mobile / Tablet : 430px -> 767px --- */
@media (min-width: 430px) and (max-width: 767px) {

  .da-panier {
    padding: 16px;
    border-radius: 16px;
  }

  .da-panier .da--drupal-messages { margin-bottom: 14px; }
  .da-panier .da--drupal-messages .messages { padding: 12px 14px; font-size: 1.4rem; line-height: 1.4; }

  .da-panier .row-container .da-panier--header { padding: 14px 18px; margin: 8px 0 12px; }
  .da-panier .row-container .da-panier--header .da-label { font-size: 1.4rem; }
  .da-panier .row-container .da-panier--header .da-prix { font-size: 1.1rem; }

  .da-panier .row-container .da-panier--cmd { padding: 14px 8px; }
  .da-panier .row-container .da-panier--cmd .da-label { font-size: 1.6rem; line-height: 1.3; }
  .da-panier .row-container .da-panier--cmd .da-prix { font-size: 1.5rem; }

  .da-panier .row-container .da-panier--coupon { padding: 8px; }
  .da-panier .da-coupon .da-element { padding: 5px; }
  .da-panier .row-container .coupon-code { padding: 3px 10px; font-size: 1.3rem; }
  .da-panier .da-coupon .coupon-rabais { font-size: 1.3rem; }
  .da-panier .da-coupon .coupon-name { font-size: 1.2rem; }
  .da-panier .da-coupon .da-button { padding: 5px 12px; font-size: 1.2rem; }

  .da-panier .row-container .da-panier--cumul { padding: 12px 8px; }
  .da-panier .row-container .da-panier--cumul .da-label { font-size: 1.4rem; }
  .da-panier .row-container .da-panier--cumul .da-prix { font-size: 1.4rem; }

  .da-panier hr { margin: 8px 0; }

  .da-panier .row-container .da-panier--final { padding: 16px 18px; margin: 12px 0 8px; }
  .da-panier .row-container .da-panier--final .da-label { font-size: 1.4rem; }
  .da-panier .row-container .da-panier--final .da-prix { font-size: 1.7rem; }

  .da-panier .da-panier--add-coupon { padding: 14px 10px; }
  .da-panier .da-panier--add-coupon .da-label { font-size: 1.3rem; }
  .da-panier .da-panier--add-coupon input[type="text"] { padding: 8px 12px; font-size: 1.4rem; }
  .da-panier .da-panier--add-coupon .da-button { padding: 9px 16px; font-size: 1.3rem; }

  .da-group.da-group-action { padding: 20px 0 10px; }
  .da-submit--accepted { padding: 14px 44px; font-size: 1.5rem; }

  .da-panier .row-container { padding: 0; }
}


/* --- Tablet landscape : 768px -> 1023px --- */
@media (min-width: 768px) and (max-width: 1023px) {

  .da-panier { padding: 20px; }

  .da-panier .da--drupal-messages { margin-bottom: 16px; }
  .da-panier .da--drupal-messages .messages { padding: 12px 16px; font-size: 1.4rem; line-height: 1.5; }

  .da-panier .row-container .da-panier--header { padding: 14px 20px; margin: 8px 0 14px; }
  .da-panier .row-container .da-panier--header .da-label { font-size: 1.4rem; }
  .da-panier .row-container .da-panier--header .da-prix { font-size: 1.1rem; }

  .da-panier .row-container .da-panier--cmd { padding: 14px 12px; }
  .da-panier .row-container .da-panier--cmd .da-label { font-size: 1.5rem; line-height: 1.4; }
  .da-panier .row-container .da-panier--cmd .da-prix { font-size: 1.4rem; }

  .da-panier .row-container .da-panier--coupon { padding: 8px 12px; }
  .da-panier .da-coupon .da-element { padding: 5px; }
  .da-panier .row-container .coupon-code { padding: 3px 10px; font-size: 1.3rem; }
  .da-panier .da-coupon .coupon-rabais { font-size: 1.3rem; }
  .da-panier .da-coupon .coupon-name { font-size: 1.2rem; }
  .da-panier .da-coupon .da-button { padding: 5px 14px; font-size: 1.2rem; }

  .da-panier .row-container .da-panier--cumul { padding: 14px 12px; }
  .da-panier .row-container .da-panier--cumul .da-label { font-size: 1.4rem; }
  .da-panier .row-container .da-panier--cumul .da-prix { font-size: 1.4rem; }

  .da-panier hr { margin: 10px 0; }

  .da-panier .row-container .da-panier--final { padding: 16px 20px; margin: 14px 0 8px; }
  .da-panier .row-container .da-panier--final .da-label { font-size: 1.4rem; }
  .da-panier .row-container .da-panier--final .da-prix { font-size: 1.6rem; }

  .da-panier .da-panier--add-coupon { padding: 14px 12px; }
  .da-panier .da-panier--add-coupon .da-label { font-size: 1.3rem; }
  .da-panier .da-panier--add-coupon input[type="text"] { padding: 8px 12px; font-size: 1.4rem; }
  .da-panier .da-panier--add-coupon .da-button { padding: 9px 18px; font-size: 1.3rem; }

  .da-group.da-group-action { padding: 22px 0 12px; }
  .da-submit--accepted { padding: 14px 52px; font-size: 1.4rem; }
}


/* --- Desktop medium : 1024px -> 1439px --- */
@media (min-width: 1024px) and (max-width: 1439px) {

  .da-panier { padding: 24px; }

  .da-panier .da--drupal-messages { margin-bottom: 18px; }
  .da-panier .da--drupal-messages .messages { padding: 14px 18px; font-size: 1.4rem; line-height: 1.5; }

  .da-panier .row-container .da-panier--header { padding: 14px 20px; margin: 8px 0 16px; }
  .da-panier .row-container .da-panier--header .da-label { font-size: 1.5rem; }
  .da-panier .row-container .da-panier--header .da-prix { font-size: 1.1rem; }

  .da-panier .row-container .da-panier--cmd { padding: 16px 14px; }
  .da-panier .row-container .da-panier--cmd .da-label { font-size: 1.6rem; line-height: 1.4; }
  .da-panier .row-container .da-panier--cmd .da-prix { font-size: 1.5rem; }

  .da-panier .row-container .da-panier--coupon { padding: 10px 14px; }
  .da-panier .da-coupon .da-element { padding: 5px; }
  .da-panier .row-container .coupon-code { padding: 4px 12px; font-size: 1.3rem; }
  .da-panier .da-coupon .coupon-rabais { font-size: 1.3rem; }
  .da-panier .da-coupon .coupon-name { font-size: 1.2rem; }
  .da-panier .da-coupon .da-button { padding: 6px 16px; font-size: 1.2rem; }

  .da-panier .row-container .da-panier--cumul { padding: 16px 14px; }
  .da-panier .row-container .da-panier--cumul .da-label { font-size: 1.4rem; }
  .da-panier .row-container .da-panier--cumul .da-prix { font-size: 1.4rem; }

  .da-panier hr { margin: 12px 0; }

  .da-panier .row-container .da-panier--final { padding: 18px 24px; margin: 16px 0 8px; }
  .da-panier .row-container .da-panier--final .da-label { font-size: 1.5rem; }
  .da-panier .row-container .da-panier--final .da-prix { font-size: 1.7rem; }

  .da-panier .da-panier--add-coupon { padding: 16px 14px; }
  .da-panier .da-panier--add-coupon .da-label { font-size: 1.4rem; }
  .da-panier .da-panier--add-coupon input[type="text"] { padding: 9px 14px; font-size: 1.4rem; }
  .da-panier .da-panier--add-coupon .da-button { padding: 10px 20px; font-size: 1.3rem; }

  .da-group.da-group-action { padding: 26px 0 14px; }
  .da-submit--accepted { padding: 16px 56px; font-size: 1.5rem; }
}


/* --- Desktop large : 1440px+ --- */
@media (min-width: 1440px) {

  form.adsone-form{ padding: 0 200px;}
  form.adsone-form .col-md-10{ width: 80% !important;}
  form.adsone-form .col-md-1{width: 10% !important;}

  .da-panier { padding: 28px; }

  .da-panier .da--drupal-messages { margin-bottom: 20px; }
  .da-panier .da--drupal-messages .messages { padding: 16px 20px; font-size: 1.5rem; line-height: 1.5; }

  .da-panier .row-container .da-panier--header { padding: 14px 24px; margin: 8px 0 18px; }
  .da-panier .row-container .da-panier--header .da-label { font-size: 1.5rem; }
  .da-panier .row-container .da-panier--header .da-prix { font-size: 1.2rem; }

  .da-panier .row-container .da-panier--cmd { padding: 16px 16px; }
  .da-panier .row-container .da-panier--cmd .da-label { font-size: 1.7rem; line-height: 1.4; }
  .da-panier .row-container .da-panier--cmd .da-prix { font-size: 1.6rem; }

  .da-panier .row-container .da-panier--coupon { padding: 10px 16px; }
  .da-panier .da-coupon .da-element { padding: 6px; }
  .da-panier .row-container .coupon-code { padding: 4px 14px; font-size: 1.4rem; width: 150px; line-height: 2.3rem;}
  .da-panier .da-coupon .coupon-rabais { font-size: 1.4rem; }
  .da-panier .da-coupon .coupon-name { font-size: 1.3rem; }
  .da-panier .da-coupon .da-button { padding: 6px 18px; font-size: 1.3rem; }

  .da-panier .row-container .da-panier--cumul { padding: 16px 16px; }
  .da-panier .row-container .da-panier--cumul .da-label { font-size: 1.5rem; }
  .da-panier .row-container .da-panier--cumul .da-prix { font-size: 1.5rem; }

  .da-panier hr { margin: 14px 0; }

  .da-panier .row-container .da-panier--final { padding: 20px 28px; margin: 18px 0 8px; }
  .da-panier .row-container .da-panier--final .da-label { font-size: 1.6rem; }
  .da-panier .row-container .da-panier--final .da-prix { font-size: 1.65rem; }

  .da-panier .da-panier--add-coupon { padding: 18px 16px; }
  .da-panier .da-panier--add-coupon .da-label { font-size: 1.4rem; }
  .da-panier .da-panier--add-coupon input[type="text"] { padding: 10px 16px; font-size: 1.5rem; }
  .da-panier .da-panier--add-coupon .da-button { padding: 10px 24px; font-size: 1.4rem; }

  .da-group.da-group-action { padding: 28px 0 16px; }
  .da-submit--accepted { padding: 18px 64px; font-size: 1.6rem; }
}