/* Vivián — Selector de Sucursal */

:root {
  --vivian-brand:    #930b48;
  --vivian-brand-dk: #6e0836;
  --vivian-gray:     #f5f5f5;
  --vivian-border:   #e0e0e0;
  --vivian-text:     #222;
  --vivian-sub:      #777;
}

/* ── Trigger (header) ───────────────────────────────────────────────────── */

.vivian-selector {
  position:      relative;
  display:       inline-flex !important;
  align-self:    flex-end;
  margin-bottom: 3px;   /* sube la línea para quedar a la par del buscador */
  font-family:   inherit;
}

/* Desktop: estilo línea inferior (igual que el buscador de productos) */
.vivian-sel-trigger {
  display:       flex !important;
  align-items:   center !important;
  gap:           6px;
  background:    transparent !important;
  border:        none !important;
  border-bottom: 2px solid rgba(0,0,0,.2) !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  padding:       5px 0 !important;
  cursor:        pointer;
  font-size:     14px;
  font-weight:   600;
  color:         inherit;
  transition:    border-color .2s, color .2s;
  white-space:   nowrap;
  max-width:     220px;
  /* Rebote suave en desktop cuando no hay sucursal seleccionada */
  animation:     vivian-sel-attention 2.4s ease-in-out infinite;
}

.vivian-sel-trigger.vivian-sel-is-active {
  animation:    none;  /* quitar rebote cuando ya hay selección */
  border-color: var(--vivian-brand) !important;
  color:        var(--vivian-brand);
}

.vivian-sel-trigger:hover {
  border-color: var(--vivian-brand) !important;
  color:        var(--vivian-brand);
}

.vivian-sel-label {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     160px;
}

.vivian-sel-arrow {
  font-size: 10px;
  opacity:   .7;
  flex-shrink: 0;
}

/* Animación de atención: doble rebote suave (solo cuando sin sucursal seleccionada) */
@keyframes vivian-sel-attention {
  0%,  100% { transform: translateY(0); }
  12%        { transform: translateY(-5px); }
  22%        { transform: translateY(0); }
  32%        { transform: translateY(-3px); }
  42%        { transform: translateY(0); }
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */

.vivian-sel-dropdown {
  position:   absolute;
  top:        calc(100% + 8px);
  right:      0;
  z-index:    9999;
  background: #fff;
  border:     1px solid var(--vivian-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  width:      280px;
  max-height: 480px;
  overflow-y: auto;
  padding:    8px 0;
}

.vivian-sel-dropdown[hidden] { display: none; }

.vivian-sel-list,
.vivian-sel-list ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

/* Ciudad header */
.vivian-sel-city-name {
  display:     block;
  font-size:   11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:       var(--vivian-sub);
  padding:     10px 16px 4px;
}

/* Opción de sucursal */
.vivian-sel-option {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     8px 16px;
  cursor:      pointer;
  transition:  background .15s;
  border-radius: 6px;
  margin:      0 4px;
}

.vivian-sel-option:hover {
  background: var(--vivian-gray);
}

.vivian-sel-option.vivian-sel-active {
  background: rgba(147, 11, 72, .08);
  color:      var(--vivian-brand);
}

.vivian-sel-option.vivian-sel-active .vivian-sel-branch-name {
  color:       var(--vivian-brand);
  font-weight: 600;
}

.vivian-sel-icon-wrap { display: flex; align-items: center; flex-shrink: 0; color: var(--vivian-brand); }

.vivian-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.vivian-sel-branch-info {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  text-align:     left;
  flex:           1;
}

.vivian-sel-branch-name {
  font-size:   14px;
  font-weight: 500;
  color:       var(--vivian-text);
  line-height: 1.2;
}

.vivian-sel-branch-sub {
  display:   block;
  font-size: 11px;
  color:     var(--vivian-sub);
  text-align: left;
}

.vivian-sel-foreign .vivian-sel-branch-sub {
  color: #c8912d;
}

/* Entrega a domicilio */
.vivian-sel-domicilio .vivian-sel-branch-name { color: var(--vivian-brand); }

/* Separador entre ciudades */
.vivian-sel-city + .vivian-sel-city {
  border-top: 1px solid var(--vivian-border);
  padding-top: 4px;
  margin-top: 4px;
}

/* ── Aviso de sucursal en página de producto ─────────────────────────────── */

.vivian-product-notice {
  display:       flex;
  align-items:   center;
  font-size:     13px;
  line-height:   1.5;
  margin-top:    10px;
  border-radius: 8px;
  padding:       8px 12px;
}

.vivian-product-notice strong {
  margin: 0 3px;
}

.vivian-notice-ok-product {
  background: rgba(147, 11, 72, .06);
  color:      #5a0830;
}

.vivian-notice-no-branch {
  background: #fff8f0;
  color:      #7a5000;
  border-left: 3px solid #c8912d;
}

/* ── Icono de búsqueda (lupa) en color Vivián — Flatsome header ──────────── */

.header .icon-search,
.header .icon-search::before,
.header-search .icon-search,
.header-search button .icon,
.header-search-form .icon-search,
.header-search-form button,
.header-search-form button svg,
.header-search-form .search-icon,
.header-search-form .search-icon svg,
.search-field-icon,
.nav-search .icon-search {
  color: var(--vivian-brand) !important;
  fill:  var(--vivian-brand) !important;
}

/* ── Nota de fecha pickup (ODD plugin) ───────────────────────────────────── */

.vivian-delivery-note { font-size: 13px; line-height: 1.5; }

.vivian-pickup-note {
  background:    #fff8f0;
  border-left:   3px solid #c8912d;
  border-radius: 6px;
  padding:       8px 12px;
  color:         #6b4a0e;
  margin-top:    6px;
}

.vivian-domicilio-note { color: var(--vivian-sub); }

/* ── Checkout notices ────────────────────────────────────────────────────── */

.vivian-checkout-notice {
  padding:       12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size:     14px;
  line-height:   1.5;
}

.vivian-notice-ok   { background: #f0faf4; border-left: 3px solid #2e9e5b; }
.vivian-notice-warn { background: #fffbf0; border-left: 3px solid #c8912d; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .vivian-sel-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,.15);
  }

  /* Móvil: sin línea inferior, texto blanco completo */
  .vivian-sel-trigger {
    border-bottom: none !important;
    max-width:     none !important;
    color:         #fff !important;
    font-size:     15px;
    font-weight:   700;
    padding:       6px 4px !important;
  }

  .vivian-sel-trigger .vivian-sel-label {
    max-width:     none;
    overflow:      visible;
    text-overflow: unset;
    white-space:   nowrap;
  }

  /* Rebote heredado de desktop — no repetir la declaración */
  /* La animación ya está definida arriba en .vivian-sel-trigger */
}

/* ── Selector embebido en carrito, checkout y mini-carrito ───────────────── */

/* Anular inline-flex del .vivian-selector base para ocupar el ancho completo. */
.vivian-selector.vivian-sel-embedded {
  display:    block !important;
  align-self: auto;
  width:      100%;
  box-sizing: border-box;
}

.vivian-sel-embedded {
  position:      relative;      /* para el dropdown absolute */
  background:    rgba(147,11,72,.04);
  border:        1.5px solid rgba(147,11,72,.25);
  border-radius: 12px;
  padding:       14px 16px 16px;
  margin-bottom: 20px;
}

.vivian-sel-embedded-heading {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin:      0 0 10px;
  font-size:   13px;
  font-weight: 400;
  color:       var(--vivian-sub);
}

/* En contexto embebido: estilo de botón (no de línea) sin rebote */
.vivian-sel-embedded .vivian-sel-trigger {
  border:        1.5px solid var(--vivian-border) !important;
  border-bottom: 1.5px solid var(--vivian-border) !important;
  border-radius: 8px !important;
  padding:       10px 14px !important;
  width:         100%;
  max-width:     none !important;
  animation:     none !important;
  color:         var(--vivian-text) !important;
  font-weight:   500;
  justify-content: space-between;
  background:    #fff !important;
}

.vivian-sel-embedded .vivian-sel-trigger:hover,
.vivian-sel-embedded .vivian-sel-trigger.vivian-sel-is-active {
  border-color: var(--vivian-brand) !important;
  color:        var(--vivian-brand) !important;
}

/* Dropdown embebido: siempre absolute (no fixed en mobile) */
.vivian-sel-embedded .vivian-sel-dropdown {
  position:   absolute !important;
  top:        calc(100% + 4px) !important;
  bottom:     auto !important;
  left:       0 !important;
  right:      0 !important;
  width:      auto !important;
  max-height: 55vh !important;
  border-radius: 10px !important;
  z-index:    9999;
}

/* ── Footer nav móvil: links con ícono + texto ───────────────────────────── */

.jh-sticky-footer-nav .vivian-fnav-link {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  color:           var(--vivian-brand) !important;
  text-decoration: none !important;
  padding:         0 4px;
  line-height:     1;
  height:          100%;
  box-sizing:      border-box;
}

/* SVG image icons (Inicio, Categorías) */
.jh-sticky-footer-nav .vivian-fnav-link img {
  display:    block !important;
  width:      30px !important;
  height:     30px !important;
  max-width:  30px !important;
  max-height: 30px !important;
  object-fit: contain;
}

/* Font icon (Mi Cuenta — icon-user de Flatsome, mismo que header) */
.jh-sticky-footer-nav .vivian-fnav-link .icon-user {
  font-size:   30px !important;
  color:       var(--vivian-brand) !important;
  line-height: 1 !important;
  display:     block !important;
}

.jh-sticky-footer-nav .vivian-fnav-link:hover {
  opacity: .7;
}

/* Badge del carrito en footer — Flatsome lo renderiza via [data-icon-label]:after automáticamente.
   Solo sobreescribimos la posición para que quede sobre el ícono de 30×30px. */
.jh-sticky-footer-nav .vivian-fnav-cart-icon {
  position: relative;
  display:  inline-block;
}
.jh-sticky-footer-nav .vivian-fnav-cart-icon::after {
  top:   -4px  !important;
  right: -6px  !important;
}

/* En móvil: ocultar carrito del header (se mueve al footer nav) */
@media (max-width: 849px) {
  .header-nav-main .cart-item.has-icon,
  .header-nav .cart-item.has-icon,
  li.cart-item.has-icon {
    display: none !important;
  }
}

/* Altura compacta del nav */
@media (max-width: 849px) {
  .footer-widgets.footer.footer-1 {
    height: 64px !important;
  }
  footer#footer {
    margin-bottom: 64px !important;
  }
  .woocommerce-cart   footer#footer,
  .woocommerce-checkout footer#footer {
    margin-bottom: 0 !important;
  }
}

/* ── Modo Regalo (checkout) ──────────────────────────────────────────────── */

.vivian-regalo-wrap {
  background:    rgba(147,11,72,.04);
  border:        1.5px solid rgba(147,11,72,.22);
  border-radius: 12px;
  padding:       16px 18px 20px;
  margin:        24px 0;
}

.vivian-regalo-toggle {
  display:     flex;
  align-items: center;
  gap:         10px;
  cursor:      pointer;
  font-size:   15px;
  font-weight: 600;
  color:       var(--vivian-text);
  user-select: none;
}

.vivian-regalo-toggle input[type="checkbox"] {
  width:        18px;
  height:       18px;
  accent-color: var(--vivian-brand);
  cursor:       pointer;
  flex-shrink:  0;
}

#vivian-regalo-fields {
  margin-top: 14px;
}

.vivian-regalo-card-notice {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     13px;
  background:    rgba(147,11,72,.06);
  border-left:   3px solid var(--vivian-brand);
  border-radius: 6px;
  padding:       8px 12px;
  margin-bottom: 14px;
  color:         #5a0830;
  line-height:   1.4;
}

.vivian-regalo-wrap .form-row label {
  font-size:   13px;
  font-weight: 500;
}

.vivian-regalo-wrap textarea.input-text {
  min-height:  80px;
  resize:      vertical;
}

.vivian-char-counter {
  display:    block;
  font-size:  11px;
  color:      var(--vivian-sub);
  text-align: right;
  margin-top: 3px;
}

.vivian-char-counter.vivian-chars-low {
  color: #c8912d;
  font-weight: 600;
}

.vivian-destinatario-heading {
  font-size:   13px;
  font-weight: 600;
  color:       var(--vivian-text);
  margin:      14px 0 6px;
  padding-top: 12px;
  border-top:  1px solid rgba(147,11,72,.12);
}

.vivian-regalo-pickup-note {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     13px;
  background:    #fff8f0;
  border-left:   3px solid #c8912d;
  border-radius: 6px;
  padding:       8px 12px;
  margin-top:    12px;
  color:         #6b4a0e;
  line-height:   1.4;
}

/* ── Recordatorio de factura (página de gracias) ─────────────────────────── */

.vivian-invoice-reminder {
  background:    #f0faf4;
  border-left:   3px solid #2e9e5b;
  border-radius: 8px;
  padding:       12px 16px;
  margin-top:    20px;
  font-size:     14px;
  line-height:   1.5;
}