/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL CHROME — Bottom Navigation, Header Overrides, Footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Body padding for fixed bottom nav ── */
body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ── Bottom Navigation Bar (PRD 5.1) ── */
.kx-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--kx-bg);
  border-top: 1px solid var(--kx-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
}

.kx-bottom-nav__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 44px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--kx-text-hint);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.kx-bottom-nav__tab--active {
  color: var(--kx-accent);
}

.kx-bottom-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.kx-bottom-nav__icon svg {
  width: 22px;
  height: 22px;
}

.kx-bottom-nav__label {
  font-family: var(--kx-font-body);
  font-size: var(--kx-fs-tab);
  font-weight: 400;
  line-height: 1;
}

.kx-bottom-nav__tab--active .kx-bottom-nav__label {
  font-weight: 600;
}

.kx-bottom-nav__dot {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--kx-accent);
}

/* ── Hide bottom nav on desktop ── */
@media (min-width: 768px) {
  .kx-bottom-nav {
    display: none;
  }
  body {
    padding-bottom: 0 !important;
  }
}

/* ── Override Blocksy header colors ── */
header[data-id="type-1"],
.ct-header,
[data-header] {
  background-color: var(--kx-surface) !important;
  border-bottom: 1px solid var(--kx-border);
}

/* ── Override Blocksy footer ── */
footer.ct-footer,
[data-footer] {
  background-color: var(--kx-bg) !important;
  border-top: 1px solid var(--kx-border);
}

/* ── WooCommerce breadcrumbs styling ── */
.woocommerce-breadcrumb {
  font-size: var(--kx-fs-caption);
  color: var(--kx-text-hint);
  padding: 12px var(--kx-page-padding);
}

.woocommerce-breadcrumb a {
  color: var(--kx-text-secondary);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--kx-accent);
}

/* ── Global link color ── */
a {
  color: var(--kx-accent);
}

a:hover {
  color: var(--kx-accent-dark);
}

/* ── WooCommerce notices ── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--kx-accent) !important;
  background-color: var(--kx-accent-light);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--kx-accent) !important;
}

.woocommerce-error {
  border-top-color: var(--kx-danger) !important;
}

/* ── Override Blocksy primary button colors globally ── */
.ct-button,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  background-color: var(--kx-accent) !important;
  border-radius: var(--kx-radius-btn) !important;
  font-family: var(--kx-font-body) !important;
  font-weight: 600 !important;
}

.ct-button:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--kx-accent-dark) !important;
}