/**
 * Account4All — Shared chrome + flow stragglers · Stage 7b (v1.11.0)
 * -------------------------------------------------------------------------
 * Global, deliberately restrained: tokens-first polish of navbar/footer and
 * the remaining old-Bulma flow surfaces (thank-you, 404, modals, order
 * tables). No structural/markup change; burger, login-modal, Turbo and
 * cart-badge contracts untouched. Token-only colors (dark-ready).
 */

/* ---- Navbar ---------------------------------------------------------------- */
.navbar.header-middle-navbar {
  border-bottom: 1px solid var(--line);
}
.navbar.header-middle-navbar .navbar-item {
  color: var(--fg-2);
  font-weight: var(--fw-bold);
  transition: color var(--dur) var(--ease);
}
.navbar.header-middle-navbar .navbar-item:hover {
  color: var(--brand-blue-accent);
  background: none;
}
.navbar.header-middle-navbar .button.is-white {
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease);
}
.navbar.header-middle-navbar .button.is-white:hover {
  background: var(--bg-lilac);
}
.navbar.header-middle-navbar .button.is-white:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.navbar.header-middle-navbar .cart_button .count {
  background: var(--danger);
  color: var(--surface);
  border-radius: var(--r-pill);
  font-weight: var(--fw-bold);
}
.navbar.header-middle-navbar .navbar-burger {
  border-radius: var(--r-md);
  color: var(--fg-1);
}

/* ---- Footer ---------------------------------------------------------------- */
.footer.has-background-white {
  border-top: 1px solid var(--line);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0 !important;
}
.footer.has-background-white,
.footer.has-background-white p {
  color: var(--fg-2);
  line-height: var(--lh-body);
}
.footer.has-background-white a {
  color: var(--fg-2);
  transition: color var(--dur) var(--ease);
}
.footer.has-background-white a:hover {
  color: var(--brand-blue-accent);
}
.footer.has-background-white .has-text-weight-bold,
.footer.has-background-white h3,
.footer.has-background-white h4 {
  color: var(--ink-900);
}

/* ---- Modals (search / login / OTP / register) ------------------------------- */
.modal .modal-content.custom_modal,
.modal .custom_modal {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card-2);
}
.modal .custom_modal input.input,
.modal .custom_modal input[type="text"],
.modal .custom_modal input[type="email"],
.modal .custom_modal input[type="password"],
.modal .custom_modal input[type="tel"] {
  min-height: 46px;
  background-color: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-family: inherit;
  color: var(--fg-1);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.modal .custom_modal input.input:focus,
.modal .custom_modal input[type="text"]:focus,
.modal .custom_modal input[type="email"]:focus,
.modal .custom_modal input[type="password"]:focus,
.modal .custom_modal input[type="tel"]:focus {
  background-color: var(--surface);
  border-color: var(--brand-blue-accent);
  box-shadow: var(--focus-ring);
  outline: none;
}
.modal .custom_modal .button.background_purple,
.modal .custom_modal .button.is-info {
  background-image: var(--grad-primary);
  border: 0;
  border-radius: var(--r-md);
  font-weight: var(--fw-bold);
  transition: box-shadow var(--dur) var(--ease);
}
.modal .custom_modal .button.background_purple::before {
  content: none;
}
.modal .custom_modal .button.background_purple:hover,
.modal .custom_modal .button.is-info:hover {
  background-image: none;
  box-shadow: none;
}

/* ---- 404 -------------------------------------------------------------------- */
body.error404 {
  background: var(--bg-soft) !important;
}
body.error404 .box.is-borderless {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  color: var(--fg-2);
}
body.error404 .box.is-borderless .has-text-weight-bold {
  color: var(--ink-900);
}
body.error404 .button.background_purple {
  background-image: var(--grad-primary);
  border: 0;
  border-radius: var(--r-md) !important;
  font-weight: var(--fw-bold);
  box-shadow: 0 10px 26px rgba(74, 104, 255, 0.32);
}
body.error404 .button.background_purple::before {
  content: none;
}
body.error404 .button.background_purple:hover {
  background-image: none;
  box-shadow: none;
}

/* ---- Order received (thank-you) + order details ------------------------------ */
body.woocommerce-order-received .box.has-text-centered,
body.woocommerce-order-received .order.box,
body.woocommerce-order-received .woocommerce-order .box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}
body.woocommerce-order-received .notification.is-success {
  background: var(--success-bg);
  color: var(--success);
  border: 0;
  border-radius: var(--r-lg);
  font-weight: var(--fw-bold);
}
body.woocommerce-order-received .notification.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 0;
  border-radius: var(--r-lg);
  font-weight: var(--fw-bold);
}
body.woocommerce-order-received .button.is-warning {
  background-color: var(--brand-blue);
  background-image: var(--grad-primary);
  color: var(--surface);
  border: 0;
  border-radius: var(--r-md);
  font-weight: var(--fw-bold);
  box-shadow: 0 10px 26px rgba(74, 104, 255, 0.32);
}
body.woocommerce-order-received .button.is-warning:hover {
  background-image: none;
  box-shadow: none;
  color: var(--surface);
}
body.woocommerce-order-received .button.is-light {
  background: var(--surface);
  border: 1.5px solid var(--pale-lilac);
  border-radius: var(--r-md);
  color: var(--brand-blue-accent);
  font-weight: var(--fw-bold);
}
.woocommerce-table--order-details,
.woocommerce-order-details table {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.woocommerce-table--order-details th,
.woocommerce-order-details table th {
  background: var(--bg-soft) !important;
  color: var(--ink-900);
}
.woocommerce-table--order-details td,
.woocommerce-order-details table td {
  border-color: var(--line);
  color: var(--fg-1);
}

/* ---- Search results page ------------------------------------------------------ */
body.search .box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

@media (prefers-reduced-motion: reduce) {
  .navbar.header-middle-navbar .navbar-item,
  .footer.has-background-white a {
    transition-duration: 0.001ms !important;
  }
}