/* BoulderCAST Premium sidebar widget. Loaded by premium-widget.html.
   Scoped to #bcpw so the theme and the rest of the page are left alone.
   No card of its own: it sits on the sidebar's background and follows
   WP Dark Mode with its own dark colors. */

/* WP Dark Mode rewrites the colors in every style rule it can read, even
   !important ones, which turned the button text light on gold. It doesn't
   read rules inside @container, so all the styling lives in one container
   query that always matches; #bcpw is only the container. */
#bcpw {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  max-width: 360px;
  margin: 0 0 1.5em;
}
@keyframes bcpw-glint {
  0%, 70% { left: -60%; }
  100% { left: 130%; }
}

@container (min-width: 0px) {

#bcpw .bcpw-in {
  --p-gold: #F9C802;
  --p-gold-hi: #FFD83A;
  --p-gold-edge: #B88F00;
  --p-on-gold: #14202C;
  --p-accent: #0B57A4;                   /* BoulderCAST logo blue */
  --p-accent-wash: rgba(11, 87, 164, 0.08);
  --p-panel: rgba(30, 42, 54, 0.05);     /* the headline features' shading */
  --p-surface: #fff;                     /* the login popup */
  --p-field: #fff;
  --p-field-line: #C9D1D9;
  --p-ink: #1E2A36;
  --p-muted: #5F6E7C;
  --p-line: rgba(0, 0, 0, 0.08);
  color: var(--p-ink);
  font-size: 16px;
  line-height: 1.4;
}
/* Dark mode, switched on by the WP Dark Mode plugin's marker on <html> */
html[data-wp-dark-mode-active] #bcpw .bcpw-in {
  --p-accent: #F9C802;
  --p-accent-wash: rgba(249, 200, 2, 0.10);
  --p-panel: rgba(255, 255, 255, 0.06);
  --p-surface: #2B2B2B;
  --p-field: #1F1F1F;
  --p-field-line: #4A4A4A;
  --p-ink: #F0F3F6;
  --p-muted: #A3B3C2;
  --p-line: rgba(255, 255, 255, 0.10);
}
#bcpw *, #bcpw *::before, #bcpw *::after { box-sizing: border-box; }
#bcpw br { display: none; }
#bcpw p:not([class*="bcpw-"]) { display: contents; }

/* Logo: the Premium nav-bar wordmark, the same in light and dark mode */
#bcpw .bcpw-head { margin: 0 0 12px; }
#bcpw .bcpw-logo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 1024 / 258;
  border: 0;
  box-shadow: none;
}

#bcpw .bcpw-title {
  margin: 0 0 4px;
  color: var(--p-ink);
  font-size: 1.2em;
  font-weight: 800;
  line-height: 1.25;
}
#bcpw .bcpw-title em { color: var(--p-accent); font-style: normal; }
#bcpw .bcpw-sub {
  margin: 0 0 12px;
  color: var(--p-muted);
  font-size: 0.85em;
}

/* Benefit list */
#bcpw .bcpw-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
#bcpw .bcpw-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: none;
}
#bcpw .bcpw-list li::before { content: none; }
#bcpw .bcpw-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--p-accent-wash);
  color: var(--p-accent);
}
#bcpw .bcpw-ico svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#bcpw .bcpw-txt { min-width: 0; }
#bcpw .bcpw-txt b {
  display: block;
  color: var(--p-ink);
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.25;
}
#bcpw .bcpw-txt span {
  display: block;
  color: var(--p-muted);
  font-size: 0.76em;
  line-height: 1.3;
}

/* Each feature's icon color, set by data-c on its <li>; the colors match
   the perks graphic on the membership page */
#bcpw .bcpw-list li { --c: var(--p-accent); }
#bcpw .bcpw-list li[data-c="red"]    { --c: #E23B3B; }
#bcpw .bcpw-list li[data-c="blue"]   { --c: #3B86D6; }
#bcpw .bcpw-list li[data-c="green"]  { --c: #2FAE45; }
#bcpw .bcpw-list li[data-c="orange"] { --c: #EE8A2C; }
#bcpw .bcpw-list li[data-c="gold"]   { --c: #D9A400; }
#bcpw .bcpw-list li[data-c="teal"]   { --c: #4C9DB8; }
/* A little brighter on the dark background */
html[data-wp-dark-mode-active] #bcpw .bcpw-list li[data-c="green"] { --c: #45C95A; }
html[data-wp-dark-mode-active] #bcpw .bcpw-list li[data-c="gold"]  { --c: #F5C518; }
html[data-wp-dark-mode-active] #bcpw .bcpw-list li[data-c="teal"]  { --c: #6FB6CC; }

/* The headline features: a neutral shaded panel with solid icon tiles */
#bcpw .bcpw-top {
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--p-panel);
}
#bcpw .bcpw-top li { padding: 9px 0; }
#bcpw .bcpw-top li + li { border-top: 1px solid var(--p-line); }
#bcpw .bcpw-top .bcpw-ico {
  background: var(--c);
  color: #fff;
}

/* Everything else: a compact list, each icon on a small tile tinted with
   its own color */
#bcpw .bcpw-plus {
  margin: 0 0 2px;
  color: var(--p-muted);
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#bcpw .bcpw-more li {
  gap: 10px;
  padding: 5px 0;
}
#bcpw .bcpw-more svg {
  box-sizing: content-box;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 5px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  fill: none;
  stroke: var(--c);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#bcpw .bcpw-more .bcpw-txt b { font-size: 0.86em; }

/* Price, right above the button */
#bcpw .bcpw-price {
  color: var(--p-ink);
  font-size: 0.95em;
  text-align: center;
}
#bcpw .bcpw-price b {
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: -0.02em;
}
#bcpw .bcpw-price-alt {
  margin: 0 0 10px;
  color: var(--p-muted);
  font-size: 0.78em;
  text-align: center;
}

/* Call to action: the one bright thing in the widget */
#bcpw .bcpw-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  overflow: hidden;
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--p-gold-hi), var(--p-gold));
  box-shadow: 0 4px 0 var(--p-gold-edge), 0 8px 18px rgba(249, 200, 2, 0.25);
  color: var(--p-on-gold) !important;
  font-size: 1.02em;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#bcpw .bcpw-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
#bcpw .bcpw-cta:hover,
#bcpw .bcpw-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--p-gold-edge), 0 12px 24px rgba(249, 200, 2, 0.35);
}
#bcpw .bcpw-cta:hover svg { transform: translateX(3px); }
#bcpw .bcpw-cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--p-gold-edge), 0 4px 10px rgba(249, 200, 2, 0.2);
}
#bcpw .bcpw-cta:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
/* A soft glint that sweeps across the button now and then */
#bcpw .bcpw-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: bcpw-glint 5s ease-in-out 1.5s infinite;
}
@media (prefers-reduced-motion: reduce) {
  #bcpw .bcpw-cta::after { animation: none; display: none; }
  #bcpw .bcpw-cta, #bcpw .bcpw-cta svg { transition: none; }
}

#bcpw .bcpw-note {
  margin: 12px 0 0;
  color: var(--p-muted);
  font-size: 0.78em;
  text-align: center;
}
#bcpw .bcpw-note svg {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#bcpw .bcpw-login {
  display: block;
  margin-top: 6px;
  color: var(--p-muted);
  font-size: 0.82em;
  text-align: center;
}
#bcpw .bcpw-login a {
  color: var(--p-ink) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--p-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#bcpw .bcpw-login a:hover { color: var(--p-accent) !important; }

/* Login popup (built by premium-widget.js). A <dialog> shown with
   showModal(), so it sits above the whole page but stays inside #bcpw
   for these styles. Fields are reset because the theme styles inputs. */
#bcpw .bcpw-dialog {
  width: calc(100% - 32px);
  max-width: 360px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--p-surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  color: var(--p-ink);
}
#bcpw .bcpw-dialog::backdrop { background: rgba(10, 16, 24, 0.55); }
#bcpw .bcpw-dialog-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 24px 22px 20px;
}
#bcpw .bcpw-dialog-title {
  margin: 0 28px 2px 0;
  color: var(--p-ink);
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.25;
}
#bcpw .bcpw-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--p-muted);
  cursor: pointer;
}
#bcpw .bcpw-dialog-close:hover { background: var(--p-panel); color: var(--p-ink); }
#bcpw .bcpw-dialog-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
#bcpw .bcpw-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  color: var(--p-ink);
  font-size: 0.85em;
  font-weight: 700;
}
#bcpw .bcpw-field input {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--p-field-line);
  border-radius: 8px;
  background: var(--p-field);
  box-shadow: none;
  color: var(--p-ink);
  font: inherit;
  font-size: 16px;               /* 16px keeps phones from zooming in */
  font-weight: 400;
}
#bcpw .bcpw-field input:focus {
  border-color: var(--p-accent);
  outline: 2px solid var(--p-accent);
  outline-offset: -1px;
}
#bcpw .bcpw-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--p-muted);
  font-size: 0.85em;
  cursor: pointer;
}
#bcpw .bcpw-remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--p-accent);
}
#bcpw .bcpw-dialog-submit {
  width: 100%;
  margin: 4px 0 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--p-gold-hi), var(--p-gold));
  box-shadow: 0 3px 0 var(--p-gold-edge);
  color: var(--p-on-gold);
  font: inherit;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
#bcpw .bcpw-dialog-submit:hover { filter: brightness(1.04); }
#bcpw .bcpw-dialog-submit:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
#bcpw .bcpw-dialog-submit:disabled { cursor: progress; opacity: 0.75; }
#bcpw .bcpw-dialog-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  font-size: 0.8em;
}
#bcpw .bcpw-dialog-links a {
  color: var(--p-muted) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#bcpw .bcpw-dialog-links a:hover { color: var(--p-ink) !important; }

} /* end @container */