/* =======================================
   Fulfillment Fleming – CSS
   Archivo: fulfillment-fleming.css
   Versión estilos: 1.7.8
   ======================================= */

/* ---- Reset del wrapper ---- */
.ad-fulfillment{
  border:none !important;
  padding:0 !important;
  background:transparent !important;
  overflow:visible !important;
  font-family:inherit !important;
}

/* ---- Variables ---- */
:root{
  --ad-radio-border-inactive:#64748b;
  --ad-radio-dot-inactive:transparent;

  --ad-radio-border-hover:#0ea5e9;
  --ad-radio-dot-hover:#0ea5e9;
  --ad-radio-dot-hover-scale:0.6;

  --ad-radio-border-active:#ffffff;
  --ad-radio-dot-active:#ffffff;
  --ad-radio-dot-active-scale:1;

  --ad-title-active-bg:#424242;
  --ad-title-active-fg:#fff;

  --ad-accent:#008a05;        /* verde: qty y botón */
  --ad-accent-hover:#007604;  /* tono para hover */
  --ad-focus-ring: rgba(0,138,5,.35);
}

/* =======================================
   Estructura del bloque
   ======================================= */
.ad-fulf__drawer{ border-top:1px solid #f0f2f5 }
.ad-fulf__drawer:first-child{ border-top:none }

/* Título (siempre 65px) */
.ad-fulf__title{
  display:flex; align-items:center; gap:12px;
  padding:0 16px;
  cursor:pointer;
  background:#f5f5f5 !important;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  min-height:65px; height:65px;
  border-radius:10px; /* inactivo: todas las esquinas */
}

/* Activo: solo esquinas superiores */
.ad-fulf__drawer.is-active > .ad-fulf__title{
  background:var(--ad-title-active-bg) !important;
  color:var(--ad-title-active-fg) !important;
  border-top-left-radius:10px; border-top-right-radius:10px;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}

/* Focus accesible */
.ad-fulf__title:focus{
  outline:none;
}

/* Hover del título (si no está activo) */
.ad-fulf__drawer:not(.is-active) > .ad-fulf__title:hover{
  background:#f5f5f5 !important;
}

/* ---- Radio estados ---- */
.ad-fulf__title .ad-fulf__radio{
  position:relative; width:18px; height:18px; border-radius:999px;
  border:2px solid var(--ad-radio-border-inactive) !important;
  flex:0 0 18px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ad-fulf__title .ad-fulf__radio:after{
  content:''; position:absolute; inset:3px; border-radius:999px;
  background:var(--ad-radio-dot-inactive);
  transform:scale(0);
  transition:transform .15s ease, background-color .15s ease;
}
.ad-fulf__drawer:not(.is-active) > .ad-fulf__title:hover .ad-fulf__radio{
  border-color:var(--ad-radio-border-hover) !important;
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
}
.ad-fulf__drawer:not(.is-active) > .ad-fulf__title:hover .ad-fulf__radio:after{
  background:var(--ad-radio-dot-hover);
  transform:scale(var(--ad-radio-dot-hover-scale));
}
.ad-fulf__drawer.is-active > .ad-fulf__title .ad-fulf__radio{
  border-color:var(--ad-radio-border-active) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
}
.ad-fulf__drawer.is-active > .ad-fulf__title .ad-fulf__radio:after{
  background:var(--ad-radio-dot-active);
  transform:scale(var(--ad-radio-dot-active-scale));
}

/* ---- Head, iconos, textos ---- */
.ad-fulf__head{ display:flex; align-items:center; gap:10px }

/* Íconos activo/inactivo (URLs están en PHP) */
.ad-fulf__iconwrap{ display:inline-flex; align-items:center; justify-content:center }
.ad-fulf__icon{ display:inline-block; vertical-align:middle; width:auto; height:auto }
.ad-fulf__icon--shipping{ width:32px; height:23px }
.ad-fulf__icon--pickup{   width:32px; height:30px }
.ad-fulf__icon--active{ display:none }
.ad-fulf__icon--inactive{ display:inline-block }
.ad-fulf__drawer.is-active .ad-fulf__icon--active{ display:inline-block }
.ad-fulf__drawer.is-active .ad-fulf__icon--inactive{ display:none }

.ad-fulf__label{ font-size:17px; font-weight:700; line-height:1.1; color:#0f172a }
.ad-fulf__sub{ display:block; font-size:13px; color:#475569; margin-top:2px }
.ad-fulf__inner {
    font-size: 15px;
}

/* En título: cuando está activo, ocultar el subtítulo */
.ad-fulf__drawer.is-active > .ad-fulf__title .ad-fulf__sub{
  display:none !important;
}

/* Colores del título activo */
.ad-fulf__drawer.is-active > .ad-fulf__title .ad-fulf__label,
.ad-fulf__drawer.is-active > .ad-fulf__title .ad-fulf__sub{
  color:var(--ad-title-active-fg) !important;
}

/* ---- Inner ---- */
.ad-fulf__drawer > .ad-fulf__inner{ display:none !important; }
.ad-fulf__drawer.is-active > .ad-fulf__inner{
  display:block !important;
  background:#fff !important;
  padding:12px !important;
}

/* Último drawer (p.ej. Recolección): pb=0 + mb=10 */
.ad-fulfillment .ad-fulf__drawer:last-of-type .ad-fulf__inner{
  padding-bottom:0 !important;
  margin-bottom:10px !important;
}

/* Filas (NO forzamos estilos de texto) */
.ad-fulf__row{ margin:8px 0 }

/* Enlace “Revisar otras sucursales” con subrayado */
a.ad-fulf__link.ad-fulf__stores{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =======================================
   CTA: qty + botón como una sola pastilla
   ======================================= */
.ad-fulf__cta{
  margin-top:12px; display:flex; gap:0; flex-wrap:nowrap; width:100%;
}

/* SELECT de cantidad */
.ad-fulf__qty select{
  height:46px !important;
  line-height:46px !important;
  box-sizing:border-box !important;

  background-color:var(--ad-accent) !important;
  color:#fff !important;
  border:1px solid var(--ad-accent) !important;
  border-right:none !important;

  border-top-left-radius:10px !important;
  border-bottom-left-radius:10px !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;

  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;

  padding:0 34px 0 12px !important;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7l5 5 5-5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:20px;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:filter .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Hover/Focus del select */
.ad-fulf__qty select:hover{
  background-color:var(--ad-accent-hover) !important;
  border-color:var(--ad-accent-hover) !important;
}
.ad-fulf__qty select:focus{
  outline:none !important;
  box-shadow:0 0 0 3px var(--ad-focus-ring) !important;
}

/* Popup de opciones: texto visible */
.ad-fulf__qty select{ color-scheme: light; }
.ad-fulf__qty select option{
  color:#000 !important;
  background:#fff !important;
}
.ad-fulf__qty select::-ms-value{
  color:#000 !important;
  background:#fff !important;
}

/* Botón ATC (mismo alto, radio derecho) */
.ad-fulf__btn{
  flex:1 1 auto;
  height:46px !important;
  line-height:46px !important;
  display:inline-flex; align-items:center; justify-content:left; font-size: 17px;

  padding:0 16px !important;
  background:var(--ad-accent) !important;
  color:#fff !important;
  border:1px solid var(--ad-accent) !important;
  border-left:none !important;

  border-top-right-radius:10px !important;
  border-bottom-right-radius:10px !important;
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;

  font-weight:700; text-decoration:none;
  transition:filter .15s ease, transform .03s ease, background-color .15s ease;
}
.ad-fulf__btn:hover{
  background:var(--ad-accent-hover) !important;
  border-color:var(--ad-accent-hover) !important;
  filter:brightness(0.98) !important;
}
.ad-fulf__btn:active{ transform:translateY(0.5px) !important; }
.ad-fulf__btn:focus{
  outline:none !important;
  box-shadow:0 0 0 3px var(--ad-focus-ring) !important;
}

/* Nota y warnings */
.ad-fulf__note{ margin-top:4px; font-size:13px; }
.ad-fulf__warn{
  background:#fff7ed;
  border:1px solid #fde68a; padding:8px 10px; border-radius:8px; margin-top:8px
}

/* Ocultar 'added_to_cart' de Woo solo dentro del bloque */
.ad-fulfillment a.added_to_cart.wc-forward{ display:none !important; }

/* Hover del título cuando ya está activo (mantener color activo) */
.ad-fulf__drawer.is-active > .ad-fulf__title:hover{
  background:var(--ad-title-active-bg) !important;
}

/* Etiqueta “Disponible” (puedes quitarlo si no lo usas) */
.ad-fulf__available{ color:#008a05; font-weight:bold; }

/* Responsive */
@media (max-width:768px){
  .ad-fulf__inner{ padding-left:0 !important }
}
.ad-fulf__btn.is-disabled[aria-disabled="true"],
.ad-fulf__drawer.is-out .ad-fulf__btn.is-disabled {
  pointer-events: none;
  opacity: .45;
  filter: grayscale(0.1);
}
/* Etiqueta roja para la palabra "Agotado" */
.ad-fulf__out {
  color: #d93025;           /* rojo Google-ish */
  font-weight: 700;
}

/* Grisado del selector de cantidad en Recolección cuando está agotado */
.ad-fulf__qty.is-disabled select[disabled] {
  pointer-events: none;
  opacity: .45;
  filter: grayscale(1);
  background: #f2f2f2;
  border-color: #ddd;
  color: #666;
  cursor: not-allowed;
}

/* Botón deshabilitado en Recolección */
.ad-fulf__btn.is-disabled[aria-disabled="true"],
.ad-fulf__drawer.is-out .ad-fulf__btn.is-disabled {
  pointer-events: none;
  opacity: .45;
  filter: grayscale(.1);
}