/* Slotivo Cookie Consent — all barbershop kostur templates */

#cookie-banner {
  z-index: 90 !important;
}

#cookie-banner.hidden {
  display: none !important;
}

#cookie-preferences-modal {
  z-index: 110 !important;
}

#cookie-preferences-modal.flex {
  display: flex !important;
}

#cookie-preferences-modal .relative,
#cookie-preferences-modal > div:not(#cookie-preferences-backdrop) {
  position: relative;
  z-index: 1;
}

/*
 * Manage preferences: visible checked state, stil colors via design tokens
 * (aligned with K4 Save: primary-container fill).
 */
#cookie-preferences-modal input[type='checkbox'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  border: 2px solid color-mix(in srgb, var(--outline, var(--on-surface, #fff)) 70%, transparent) !important;
  border-radius: 0.25rem !important;
  background-color: color-mix(
    in srgb,
    var(--surface-container-high, var(--surface, #111)) 90%,
    transparent
  ) !important;
  background-image: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  accent-color: var(--primary-container, var(--primary, #3b82f6));
}

#cookie-preferences-modal input[type='checkbox']:hover {
  border-color: color-mix(in srgb, var(--primary, #3b82f6) 55%, transparent) !important;
}

#cookie-preferences-modal input[type='checkbox']:checked {
  border-color: var(--primary-container, var(--primary, #3b82f6)) !important;
  background-color: var(--primary-container, var(--primary, #3b82f6)) !important;
  /* Dark check — readable on gold (S1/S2), light (S3), and cyan (S4) fills */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%23111111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 0.85rem 0.85rem !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#cookie-preferences-modal input[type='checkbox']:focus-visible {
  outline: 2px solid var(--primary, #3b82f6) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: no-preference) {
  #cookie-banner:not(.hidden) {
    animation: slotivo-cookie-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #cookie-preferences-modal.flex > div:not(#cookie-preferences-backdrop) {
    animation: slotivo-modal-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/*
 * Mobile only — tidy footer privacy / cookie prefs (PC layout untouched).
 * Beauty K1–K4 + barbershop/accommodation horizontal legal rows.
 */
@media (max-width: 767px) {
  .foot-legal,
  .sf-legal,
  .ft-bottom .legal,
  .k4-drawer-legal nav,
  .k4-book-visit-footer nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 0.85rem !important;
    row-gap: 0.5rem !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .foot-base,
  .ft-bottom-row,
  .sf-bottom-row {
    align-items: flex-start !important;
  }

  .ft-bottom-row,
  .sf-bottom-row {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .foot-legal a,
  .foot-legal button,
  .sf-legal a,
  .sf-legal button,
  .ft-bottom .legal a,
  .ft-bottom .legal button,
  .k4-drawer-legal a,
  .k4-drawer-legal button,
  .k4-book-visit-footer a,
  .k4-book-visit-footer button {
    white-space: nowrap !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Chrome reset only — keep stil font/color/uppercase (do not inherit body). */
  .foot-legal button,
  .sf-legal button,
  .ft-bottom .legal button,
  .k4-drawer-legal button,
  .k4-book-visit-footer button,
  .foot-index button[data-open-cookie-preferences],
  .ft-col button[data-open-cookie-preferences],
  button[data-open-cookie-preferences] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  /* Footers that use gap (not border-left pipes): clear default button border. */
  .foot-legal button,
  .sf-legal button,
  .ft-bottom .legal button,
  .k4-drawer-legal button,
  .k4-book-visit-footer button,
  .foot-index button[data-open-cookie-preferences],
  .ft-col button[data-open-cookie-preferences] {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Beauty K4 strip — do not override stil type; keep left pipe separator. */
  .k4-app-legal button[data-open-cookie-preferences] {
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  /* Tailwind legal rows (barbershop / accommodation) — wrap cleanly, no overflow */
  div.flex:has(> [data-open-cookie-preferences]),
  div.flex:has(> span > [data-open-cookie-preferences]) {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 0.85rem !important;
    row-gap: 0.5rem !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  div.flex:has(> [data-open-cookie-preferences]) > a,
  div.flex:has(> [data-open-cookie-preferences]) > button,
  div.flex:has(> span > [data-open-cookie-preferences]) > span {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}