/* =========================================================
   DIEMFARMA · df-blockcart-modal.css
   ========================================================= */

   DiemFarma · Modal “Añadido al carrito” (PRO minimalista)
   - 1 columna
   - Modal estrecho y discreto
   - Sin precios
   - Desktop: botones centrados en una línea
   - Móvil: botones apilados
   - FIX definitivo: X a la derecha (desktop) + título a 1 línea en desktop
========================================================= */

/* ---------- Base modal ---------- */
#blockcart-modal.modal{
  z-index: 9999;
}

#blockcart-modal.modal .modal-dialog{
  max-width: 600px;
  width: calc(100% - 32px);
  margin: 18px auto;
}

#blockcart-modal.modal .modal-content{
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  background: #fff;
}

/* ---------- Header ---------- */
#blockcart-modal.modal .modal-header{
  position: relative;                 /* clave para colocar la X bien */
  padding: 12px 56px 12px 16px;       /* deja hueco real a la derecha para la X */
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Título: en desktop 1 línea sí o sí */
#blockcart-modal.modal .modal-title{
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  color: #1f2a2e;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  min-width: 0;                       /* necesario para ellipsis */
  white-space: nowrap;                /* 1 línea */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icono check dentro del título */
#blockcart-modal.modal .modal-title .material-icons{
  font-size: 18px !important;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,106,92,.12);
  color: #006a5c;

  line-height: 1 !important;
  transform: none !important;
  font-style: normal !important;
  flex: 0 0 26px;
}

/* X: posicionada SIEMPRE a la derecha en desktop */
#blockcart-modal.modal .modal-header .close{
  position: absolute !important;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) !important;

  opacity: .85;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

#blockcart-modal.modal .modal-header .close:hover{
  opacity: 1;
  background: rgba(0,0,0,.05);
}

#blockcart-modal.modal .modal-header .close .material-icons{
  font-size: 22px !important;
  line-height: 1 !important;
  transform: none !important;
  color: rgba(0,0,0,.72);
}

/* ---------- Body ---------- */
#blockcart-modal.modal .modal-body{
  padding: 12px 16px 10px;
  background: #fff;
}

/* 1 columna: apila col-md-5 / col-md-7 */
#blockcart-modal.modal .modal-body > .row{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  margin: 0 !important;
}

#blockcart-modal.modal .modal-body > .row > [class*="col-"]{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

#blockcart-modal.modal .divide-right{
  border-right: 0 !important;
}

/* Tarjeta producto */
#blockcart-modal.modal .modal-body .col-md-5{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 10px !important;
}

/* Bloque acciones: discreto */
#blockcart-modal.modal .modal-body .col-md-7{
  border: 0 !important;
  padding: 0 !important;
}

/* Layout interno producto */
#blockcart-modal.modal .modal-body .col-md-5 .row{
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
}

#blockcart-modal.modal .modal-body .col-md-5 .row > [class*="col-"]{
  padding: 0 !important;
}

#blockcart-modal.modal .modal-body .col-md-5 .row > .col-md-6:first-child{
  flex: 0 0 72px !important;
  max-width: 72px !important;
}

/* Imagen */
#blockcart-modal.modal img.product-image{
  max-width: 60px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Nombre producto (si quieres 1 línea también, lo forzamos) */
#blockcart-modal.modal .product-name{
  margin: 0 0 4px 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: #006a5c;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Oculta precio producto (minimalista) */
#blockcart-modal.modal .product-price{
  display: none !important;
}

/* Cantidad */
#blockcart-modal.modal .product-quantity{
  color: rgba(0,0,0,.70);
  font-size: 13px;
}

/* Resumen: solo contador */
#blockcart-modal.modal .cart-content{
  display: grid;
  gap: 10px;
  padding: 0 2px;
}

#blockcart-modal.modal .cart-products-count{
  margin: 0;
  color: rgba(0,0,0,.78);
  font-size: 14px;
  font-weight: 700;
}

#blockcart-modal.modal .cart-content p,
#blockcart-modal.modal .cart-content .product-total{
  display: none !important;
}

/* Botones (están en .cart-content-btn) */
#blockcart-modal.modal .cart-content-btn{
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
  padding: 0 2px;
  flex-wrap: nowrap;
}

#blockcart-modal.modal .cart-content-btn .btn,
#blockcart-modal.modal .cart-content-btn a.btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0 !important;

  width: auto !important;
  min-width: 180px;
}

#blockcart-modal.modal .cart-content-btn .btn-primary,
#blockcart-modal.modal .cart-content-btn a.btn-primary{
  background: #006a5c !important;
  border-color: #006a5c !important;
  color: #fff !important;
}

#blockcart-modal.modal .cart-content-btn .btn-secondary,
#blockcart-modal.modal .cart-content-btn .btn-outline-secondary,
#blockcart-modal.modal .cart-content-btn a.btn-secondary,
#blockcart-modal.modal .cart-content-btn a.btn-outline-secondary{
  background: #f3f5f6 !important;
  border-color: rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.78) !important;
}

/* ---------- MÓVIL: mantiene como lo tienes (perfecto) ---------- */
@media (max-width: 767px){
  #blockcart-modal.modal .modal-dialog{
    width: calc(100% - 18px);
    max-width: 520px;
    margin: 10px auto;
  }

  /* En móvil el título te gusta en 2 líneas, así que desactivamos el nowrap */
  #blockcart-modal.modal .modal-title{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 15px;
  }

  /* X mantiene su posición a la derecha */
  #blockcart-modal.modal .modal-header{
    padding: 12px 52px 12px 14px;
  }

  /* Botones apilados */
  #blockcart-modal.modal .cart-content-btn{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 0;
  }

  #blockcart-modal.modal .cart-content-btn .btn,
  #blockcart-modal.modal .cart-content-btn a.btn{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* En móvil el nombre del producto puede partir si hace falta */
  #blockcart-modal.modal .product-name{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}