/**
 * Candelea Theme - Custom Styles
 * https://www.candelea.es
 *
 * Estos estilos se cargan DESPUÉS de los del tema padre (Hummingbird),
 * así que puedes sobreescribir cualquier regla CSS del padre aquí.
 */

/* ================================================================
   ALPINE.JS — prevent FOUC on x-cloak elements
   ================================================================ */
[x-cloak] { display: none !important; }

/* ================================================================
   TOPBAR — thin bar with centered message
   ================================================================ */
.candelea-topbar {
  background-color: #17bebb;
  padding: 6px 0;
  text-align: center;
  height: var(--candelea-topbar-h, 30px);
}

.candelea-topbar__text {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0;
}

.candelea-topbar__sep {
  opacity: 0.4;
  margin: 0 0.3em;
}

/* ================================================================
   NAVBAR — logo | menu | actions
   ================================================================ */
/* Override parent .header: sticky with negative top so topbar
   scrolls away but navbar stays pinned at viewport top. */
.header {
  position: sticky;
  top: calc(var(--candelea-topbar-h, 30px) * -1);
  z-index: 1030;
}

.candelea-navbar {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.candelea-navbar__row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.55rem 0;
}

/* Compact menu links (parent uses 1.25rem .5rem) */
.candelea-navbar .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
  padding: 0.5rem 0.5rem;
  color: #000;
  font-size: 14px;
}
.candelea-navbar .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle {
  padding: 0.5rem 0.125rem;
  color: #000;
}

/* ── Logo ── */
.candelea-navbar__logo {
  flex-shrink: 0;
}

.candelea-navbar__logo img {
  max-height: 28px;
  width: auto;
  display: block;
}

/* ── Menu (ps_mainmenu rendered by displayTop) ── */

/* Mobile: hamburger toggle first in the row */
.candelea-navbar__row > .ps-mainmenu--desktop {
  order: -1;
  flex-shrink: 0;
}

/* Override Bootstrap col classes that conflict with our flex row */
.candelea-navbar__row > .ps-mainmenu--desktop.col-xl,
.candelea-navbar__row > .ps-mainmenu--desktop.col-auto {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 auto;
}

/* Desktop (≥xl): menu takes remaining space and centres its items */
@media (min-width: 1200px) {
  .candelea-navbar__row > .ps-mainmenu--desktop {
    order: 0;
    flex: 1 1 0% !important;
  }

  .candelea-navbar__row .ps-mainmenu__desktop {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  .candelea-navbar__row .ps-mainmenu__tree {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
}

/* Search icon: visually group with actions (order after menu) */
.candelea-navbar__row > .candelea-search {
  order: 5;
  margin-right: -0.25rem;
}

/* Mobile search icon: group with actions */
.candelea-navbar__row > .ps-searchbar--mobile {
  order: 5;
  margin-right: -0.25rem;
}

/* ── Actions (search + user + cart) ── */
.candelea-navbar__actions {
  display: flex;
  align-items: center;
  gap: 0;
  order: 6;
  flex-shrink: 0;
}

/* Hide ALL text labels in navbar — icon-only minimalist.
   Must be inside the SAME media queries as Bootstrap utilities
   so we win the cascade (same specificity, same !important → last wins). */
.candelea-navbar .header-block__title {
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}
@media (min-width: 768px) {
  .candelea-navbar .header-block__title,
  .candelea-navbar .header-block__title.d-md-block,
  .candelea-navbar .header-block__title.d-md-flex,
  .candelea-navbar .header-block__title.d-md-inline {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .candelea-navbar .header-block__title,
  .candelea-navbar .header-block__title.d-lg-inline,
  .candelea-navbar .header-block__title.d-lg-block,
  .candelea-navbar .header-block__title.d-lg-flex {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .candelea-navbar .header-block__title,
  .candelea-navbar .header-block__title.d-xl-inline,
  .candelea-navbar .header-block__title.d-xl-block,
  .candelea-navbar .header-block__title.d-xl-flex {
    display: none !important;
  }
}

/* displayNav2 wrapper */
.candelea-navbar__nav2 {
  gap: 0;
}

/* Tighten icon button padding so search/user/cart sit closer */
.candelea-navbar__actions .header-block__action-btn,
.candelea-navbar__nav2 .header-block__action-btn,
.candelea-search__btn {
  padding: 0.3rem;
}

/* Override parent desktop button padding (.5rem .75rem → compact) */
@media (min-width: 768px) {
  .candelea-navbar .header-block__action-btn {
    padding: 0.3rem;
  }
}

/* ── Modern SVG icons (Lucide-style) ── */
.candelea-icon {
  display: block;
  color: #000;
  transition: color 0.2s ease;
}

.header-block__action-btn:hover .candelea-icon,
.candelea-search__btn:hover .candelea-icon {
  color: #31b6b6;
}

/* Hide old material-icons inside navbar when SVG is present */
.candelea-navbar .header-block__action-btn > .material-icons,
.candelea-navbar .header-block__action-btn > .header-block__icon,
.candelea-search__btn > .header-block__icon {
  display: none;
}

/* ================================================================
   SEARCH — icon + expandable dropdown (desktop)
   ================================================================ */
.candelea-search {
  position: relative;
}

.candelea-search__btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.5rem;
}

.candelea-search__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 380px;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 0.75rem;
  z-index: 1060;
}

.candelea-search__panel .ps-searchbar__form {
  position: relative;
  display: flex;
  align-items: center;
}

.candelea-search__panel .ps-searchbar__input {
  width: 100%;
  font-size: 0.875rem;
}

.candelea-search__panel .ps-searchbar__clear {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem;
}

.candelea-search__panel .ps-searchbar__dropdown {
  margin-top: 0.5rem;
  max-height: 360px;
  overflow-y: auto;
}

/* ================================================================
   MENU — tweaks for centered layout
   ================================================================ */

/* Remove full-width wrapper styles from parent */
.header-nav-full-width {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Menu item hover colour */
.candelea-navbar__row .ps-mainmenu__tree > li a:hover,
.candelea-navbar__row .ps-mainmenu__tree > li button:hover {
  color: #31b6b6;
}

/* ================================================================
   IMAGE SLIDER — contained with rounded corners
   ================================================================ */
.ps-imageslider .carousel {
  border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
  overflow: hidden;
}

/* ================================================================
   HIDE OLD HEADER SECTIONS — the old top bar/banner are no longer
   used but parent CSS may still reference them.
   ================================================================ */
.header-top,
.header-banner {
  display: none !important;
}

/* === Color primario: #31b6b6 (teal) — reemplaza el #0b69f6 (azul) del padre ===
 *
 * Los valores derivados se calculan con las funciones Sass de Bootstrap:
 *   tint-color($color, $weight) = mix(white, $color, $weight)
 *   shade-color($color, $weight) = mix(black, $color, $weight)
 *
 *   #31b6b6 shade 15% → #2a9b9b   (btn hover bg)
 *   #31b6b6 shade 20% → #279292   (btn hover border / active bg)
 *   #31b6b6 shade 25% → #258989   (btn active border)
 */

/* --- Botones filled (btn-primary) --- */
.btn-primary {
  --bs-btn-bg:                  #31b6b6;
  --bs-btn-border-color:        #31b6b6;
  --bs-btn-hover-bg:            #2a9b9b;
  --bs-btn-hover-border-color:  #279292;
  --bs-btn-focus-shadow-rgb:    49, 182, 182;
  --bs-btn-active-bg:           #279292;
  --bs-btn-active-border-color: #258989;
  --bs-btn-disabled-bg:         #31b6b6;
  --bs-btn-disabled-border-color: #31b6b6;
}

/* --- Botones outline (btn-outline-primary) --- */
.btn-outline-primary {
  --bs-btn-color:               #31b6b6;
  --bs-btn-border-color:        #31b6b6;
  --bs-btn-hover-bg:            #31b6b6;
  --bs-btn-hover-border-color:  #31b6b6;
  --bs-btn-focus-shadow-rgb:    49, 182, 182;
  --bs-btn-active-bg:           #31b6b6;
  --bs-btn-active-border-color: #31b6b6;
  --bs-btn-disabled-color:      #31b6b6;
  --bs-btn-disabled-border-color: #31b6b6;
}

:root,
[data-bs-theme="light"] {
  --bs-primary:              #31b6b6;
  --bs-primary-rgb:          49, 182, 182;
  --bs-primary-text-emphasis: #31b6b6;
  --bs-primary-bg-subtle:    #d6f0f0; /* tint 80% */
  --bs-primary-border-subtle: #ade2e2; /* tint 60% */

  /* Links (Bootstrap usa $primary como color de enlace por defecto) */
  --bs-link-color:           #31b6b6;
  --bs-link-color-rgb:       49, 182, 182;
  --bs-link-hover-color:     #279292; /* shade 20% */
  --bs-link-hover-color-rgb: 39, 146, 146;
}

[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #83d3d3; /* tint 40% */
  --bs-primary-bg-subtle:    #0a2424; /* shade 80% */
  --bs-primary-border-subtle: #1d6d6d; /* shade 40% */

  /* Links en dark mode */
  --bs-link-color:            #83d3d3;
  --bs-link-color-rgb:        131, 211, 211;
  --bs-link-hover-color:      #9cdcdc; /* tint 20% del link-color dark */
  --bs-link-hover-color-rgb:  156, 220, 220;
}

@media (min-width: 768px) {
    .header-block--active .header-block, .header-block--active .header-block__icon {
        color: #000000;
    }
}

a.ps-mainmenu__tree-link {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* ================================================================
   CART SUMMARY — PayPal buttons side by side
   ================================================================ */
.cart-summary__actions .d-grid [data-container-express-checkout],
.cart-summary__actions .d-grid [data-container-bnpl] {
    width: 100%;
    margin: 10px 0 0;
}

.cart-summary__actions .d-grid [data-container-express-checkout] [paypal-button-container],
.cart-summary__actions .d-grid [data-container-bnpl] [paypal-bnpl-button-container] {
    width: 100% !important;
}

/* ================================================================
   CHECKOUT — Payment options list
   ================================================================ */

/* Card-style payment options */
.payment-options__list .payment-option {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.payment-options__list .payment-option:last-child {
    margin-bottom: 0;
}

/* Radio + label row takes available space */
.payment-option .payment-option__form-check {
    display: flex !important;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 10px;
}

/* PayPal mark sits inline next to label */
.payment-option > [paypal-mark-container] {
    display: flex !important;
    align-items: center;
}

/* PayPal info icon inline */
.payment-option [data-paypal-info] {
    display: inline-flex !important;
    align-items: center;
    padding-left: 4px;
}

/* Full-width sections when expanded */
.payment-option .payment-option__additional-information,
.payment-option .js-payment-option-form,
.payment-option .payment-option__no-js-form {
    flex-basis: 100%;
}

/* Remove PayPal's clearfix gaps */
.payment-option > .clearfix {
    display: none;
}

/* Consistent logo sizing across all options */
.payment-option .payment-option__label img.img-fluid {
    max-height: 22px;
    width: auto;
}

/* Clean PayPal mark badges */
.payment-option .paypal-mark {
    margin: 2px;
    padding: 3px 5px;
}

.payment-option .paypal-mark img {
    height: 18px;
}