/* ============================================================================
 * RobloxPets — Site notice restyles (cosmetic only; functionality untouched)
 *
 * Two external notices that aren't part of this plugin are re-skinned to match
 * the site (dark navy #050E1B, Inter, blue accent, on-brand pill buttons):
 *
 *   1. Currency notice — WooCommerce store-notice (`.woocommerce-store-notice`)
 *      rendered by the multi-currency plugin (the geo "we switched you to EUR"
 *      bar + the "Use Pound sterling instead." switch link + the Dismiss link).
 *      It has NO inline style attribute, so ordinary CSS overrides it.
 *
 *   2. Cookie notice — the DAEXT "Lightweight Cookie Notice" plugin
 *      (`#daextlwcn-cookie-notice-*`). It injects an inline <style> block of
 *      `#id { … !important }` rules, so we override with `body #id { … !important }`
 *      (specificity 1,0,1 > 1,0,0) to win regardless of stylesheet load order.
 *
 * We DON'T change behaviour: the switch/dismiss anchors keep their href/class,
 * the cookie Accept/Settings divs keep their ids + click handlers, and the
 * notice keeps its fixed positioning. This is styling only.
 * ========================================================================== */

/* ───────────────────────────── 1. Currency notice ───────────────────────── */
.woocommerce-store-notice,
.woocommerce-store-notice.demo_store {
  /* DO NOT set `display` here. WooCommerce's store-notice script shows this bar
     with an inline display and the Dismiss link hides it via jQuery .hide()
     (inline display:none). A `display:…!important` rule beats that inline style,
     so Dismiss would set the cookie but never hide the bar (and re-show it on
     reload). The bar is a <p>; text-align centres its inline content + pills. */
  margin: 0 !important;
  padding: 11px 22px !important;
  background: linear-gradient(180deg, #0c1a33, #081223) !important;
  border-bottom: 1px solid rgba(123, 166, 255, 0.22) !important;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  color: #aab7da !important;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: center;
}

/* The currency-switch link ("Use Pound sterling instead.") → clear accent pill. */
.woocommerce-store-notice a[href*="currency="] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(123, 166, 255, 0.30);
  background: rgba(59, 130, 246, 0.16);
  color: #6db0ff !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.woocommerce-store-notice a[href*="currency="]:hover {
  background: rgba(59, 130, 246, 0.26);
  border-color: rgba(123, 166, 255, 0.5);
}

/* The Dismiss link → subtle. */
.woocommerce-store-notice .woocommerce-store-notice__dismiss-link {
  vertical-align: middle;
  margin-left: 4px;
  color: #7a89ad !important;
  font-weight: 600;
  text-decoration: none !important;
}
.woocommerce-store-notice .woocommerce-store-notice__dismiss-link:hover {
  color: #e7ecff !important;
}

@media (max-width: 600px) {
  .woocommerce-store-notice,
  .woocommerce-store-notice.demo_store { padding: 10px 14px !important; font-size: 12.5px !important; }
}

/* ───────────────────────────── 2. Cookie notice ─────────────────────────── */
/* Container: keep it a fixed bottom bar, but sane box-sizing + a clean full
   width (the plugin's default had a -10px left offset + content-box math). */
body #daextlwcn-cookie-notice-container {
  box-sizing: border-box !important;
  /* Stack BELOW the persistent corner floats so they stay visible + usable while
     the notice shows (DAEXT defaults to ~1e9, which sits above the live-chat
     bubble (~9999999) but below the sidecart/cart float (~2.14e9) — i.e. the
     cart covered the bar while the chat hid behind it). The notice's content is
     centred (max-width below), so the corner floats never overlap its buttons.
     Still well above page content + the sticky header. */
  z-index: 9999990 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 16px 22px !important;
  background: #050e1b !important;
  border-top: 1px solid rgba(123, 166, 255, 0.22) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 0 -16px 40px -18px rgba(0, 0, 0, 0.85) !important;
  color: #e7ecff !important;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body #daextlwcn-cookie-notice-container * { box-sizing: border-box !important; }

/* Inner layout: centred, message left, buttons right; stack on small screens. */
body #daextlwcn-cookie-notice-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100% !important;
  max-width: 1180px;
  margin: 0 auto !important;
}

body #daextlwcn-cookie-notice-message {
  flex: 1 1 auto;
  min-width: 0;
  color: #aab7da !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}
body #daextlwcn-cookie-notice-message a {
  color: #6db0ff !important;
  text-decoration: none !important;
  font-weight: 600;
}

body #daextlwcn-cookie-notice-button-container {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Both buttons are <div>s with the plugin's click handlers — re-skin as pills. */
body #daextlwcn-cookie-notice-button-1,
body #daextlwcn-cookie-notice-button-2 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* !important + min-height: DAEXT sets the button height with !important, so
     without these the pills collapse to ~text height (the "super thin" look). */
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

/* Settings → secondary / ghost. */
body #daextlwcn-cookie-notice-button-1 {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(123, 166, 255, 0.30) !important;
  color: #e7ecff !important;
}
body #daextlwcn-cookie-notice-button-1:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(123, 166, 255, 0.5) !important;
}

/* Accept → primary blue gradient. */
body #daextlwcn-cookie-notice-button-2 {
  background: linear-gradient(180deg, #4f93ff, #2f6fe0) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px -14px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body #daextlwcn-cookie-notice-button-2:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

@media (max-width: 720px) {
  body #daextlwcn-cookie-notice-container { padding: 14px 16px !important; }
  body #daextlwcn-cookie-notice-wrapper { flex-direction: column !important; align-items: stretch; gap: 12px; }
  body #daextlwcn-cookie-notice-button-container { width: 100%; }
  body #daextlwcn-cookie-notice-button-1,
  body #daextlwcn-cookie-notice-button-2 { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-store-notice a[href*="currency="],
  body #daextlwcn-cookie-notice-button-1,
  body #daextlwcn-cookie-notice-button-2 { transition: none !important; }
}