/* ══════════════════════════════════════════════════════════════════════════
   Circle buttons — the one place a button's colour is decided.

   Management, 2026-09-29 (via Pavel): no more big orange CTAs.
     Primary, on a light ground   Circle Navy fill, white text
     Primary, on a dark ground    white fill, Circle Navy text (Pavel, 2026-09-29;
                                  was a white stroke, changed the same afternoon)
     Secondary                    no fill, Circle Navy stroke, Circle Navy text

   Loaded AFTER each page's own stylesheet (buttonsCSSLink() in Go), so it wins
   over the colours the page rules still carry. Only colour, border and shadow
   are decided here; size, radius and spacing stay with each button.

   The page stylesheets grew one orange button class per feature, so the lists
   below name them all. A NEW button should use .circle-btn (primary),
   .circle-btn-secondary, or .circle-btn-ondark and add nothing here.

   !important is deliberate: several page rules reach these buttons through
   :hover on a parent card or a panel (specificity up to 0,4,0), and this file
   must win everywhere without a selector race.

   SWITCH BACK: set buttonsNavy = false in go_app/buttons_css.go, rebuild,
   restart — every page drops this file and the orange returns.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --btn-primary-bg:        var(--color-navy, #10293C);
  --btn-primary-bg-hover:  #1B3B53;
  --btn-primary-bg-active: #0B1E2D;
  --btn-primary-fg:        var(--color-surface, #FFFEF6);

  --btn-secondary-fg:       var(--color-navy, #10293C);
  --btn-secondary-border:   var(--color-navy, #10293C);
  --btn-secondary-bg-hover: rgba(16,41,60,0.06);

  --btn-ondark-bg:       var(--color-surface, #FFFEF6);
  --btn-ondark-fg:       var(--color-navy, #10293C);
  --btn-ondark-border:   var(--color-surface, #FFFEF6);
  --btn-ondark-bg-hover: var(--color-cream, #F4F1E2);
}

/* ── Primary ─────────────────────────────────────────────────────────────── */
:is(
  .circle-btn:not(.circle-btn-quiet):not(.circle-btn-secondary):not(.circle-btn-ondark):not(.circle-btn-ondark-secondary),
  .membership-btn,
  .thanks-btn:not(.thanks-btn-ghost),
  .dash-preview-ok,
  .loginbutton_, .loginbutton,
  .btn-primary,
  .dash-intake-cta-btn,
  .account-setup-submit,
  .dash-pathway-cta,
  .pathway-checkout-btn:not(.pathway-btn-quiet):not(.pathway-btn-cream):not(.dash-alert-secondary),
  .dash-chat-send-btn,
  .chat-new-btn,
  .dash-settings-btn:not(.dash-settings-btn-sm):not(.dash-settings-btn-danger):not(.dash-settings-btn-disabled),
  .dash-home-action-cta,
  .dash-set-btn:not(.dash-set-btn-off),
  .dash-intake-complete-btn,
  .dash-intake-section-cta,
  .dash-intake-next:not(.pathway-step-next),
  .dash-intake-unit-btn.active,
  .quiz-btn-next, .quiz-btn-cta,
  .act-inline-btn:not(.act-inline-btn-quiet),
  .dash-pharm-pop button,
  .rp-btn, .rel-phone-btn
) {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  box-shadow: 0 1px 2px rgba(16,41,60,0.14) !important;
}
@media (hover: hover) {
  :is(
    .circle-btn:not(.circle-btn-quiet):not(.circle-btn-secondary):not(.circle-btn-ondark):not(.circle-btn-ondark-secondary),
    .membership-btn, .thanks-btn:not(.thanks-btn-ghost), .dash-preview-ok,
    .loginbutton_, .loginbutton, .btn-primary, .dash-intake-cta-btn, .account-setup-submit,
    .dash-pathway-cta,
    .pathway-checkout-btn:not(.pathway-btn-quiet):not(.pathway-btn-cream):not(.dash-alert-secondary),
    .dash-chat-send-btn, .chat-new-btn,
    .dash-settings-btn:not(.dash-settings-btn-sm):not(.dash-settings-btn-danger):not(.dash-settings-btn-disabled),
    .dash-home-action-cta, .dash-set-btn:not(.dash-set-btn-off), .dash-intake-complete-btn,
    .dash-intake-section-cta, .dash-intake-next:not(.pathway-step-next),
    .quiz-btn-next, .quiz-btn-cta, .act-inline-btn:not(.act-inline-btn-quiet), .dash-pharm-pop button
  ):hover:not(:disabled):not([aria-disabled="true"]),
  .dash-intake-section-card:hover .dash-intake-section-cta,
  .botchatbubble.from_agent button:hover,
  .ins-photo-btn:hover {
    background: var(--btn-primary-bg-hover) !important;
    border-color: var(--btn-primary-bg-hover) !important;
    color: var(--btn-primary-fg) !important;
  }
}
:is(
  .circle-btn:not(.circle-btn-quiet):not(.circle-btn-secondary):not(.circle-btn-ondark):not(.circle-btn-ondark-secondary),
  .membership-btn, .thanks-btn:not(.thanks-btn-ghost),
  .pathway-checkout-btn:not(.pathway-btn-quiet):not(.pathway-btn-cream):not(.dash-alert-secondary),
  .dash-settings-btn:not(.dash-settings-btn-sm):not(.dash-settings-btn-danger):not(.dash-settings-btn-disabled),
  .dash-home-action-cta, .dash-set-btn:not(.dash-set-btn-off), .dash-intake-cta-btn, .account-setup-submit
):active:not(:disabled) {
  background: var(--btn-primary-bg-active) !important;
  border-color: var(--btn-primary-bg-active) !important;
}
/* Disabled keeps the navy but steps back, instead of the old pale orange. */
:is(
  .circle-btn, .membership-btn, .thanks-btn, .pathway-checkout-btn, .dash-intake-next,
  .dash-intake-complete-btn, .quiz-btn-next, .account-setup-submit, .dash-chat-send-btn, .loginbutton_
):is(:disabled, [aria-disabled="true"]):not(.circle-btn-quiet):not(.pathway-btn-quiet) {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  opacity: 0.38 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* ── Secondary ───────────────────────────────────────────────────────────── */
:is(
  .circle-btn-secondary,
  .circle-btn-quiet, .thanks-btn-ghost,
  .act-inline-btn-quiet,
  .pathway-checkout-btn.pathway-btn-quiet,
  .dash-alert-primary.dash-alert-secondary,
  .dash-settings-btn-sm:not(.dash-settings-btn-danger),
  .dash-pathway-btn-secondary,
  .btn-outline
) {
  background: transparent !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-fg) !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  :is(
    .circle-btn-secondary, .circle-btn-quiet, .thanks-btn-ghost, .act-inline-btn-quiet,
    .pathway-checkout-btn.pathway-btn-quiet, .dash-alert-primary.dash-alert-secondary,
    .dash-settings-btn-sm:not(.dash-settings-btn-danger), .dash-pathway-btn-secondary, .btn-outline
  ):hover {
    background: var(--btn-secondary-bg-hover) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-fg) !important;
  }
}

/* ── Primary on a dark ground ────────────────────────────────────────────── */
/* The sign-in / registration gate (prereg.css: the page is Circle Navy), the
   navy footer band, the navy program hero, and anything marked by hand. */
:is(
  .circle-btn-ondark,
  .action-btn,
  #web_login_form .loginbutton_,
  .dash-home-follow,
  .dash-home-social :is(.circle-btn, .pathway-checkout-btn),
  .pathway-hero :is(.circle-btn, .pathway-checkout-btn),
  .rel-launch :is(.circle-btn, .pathway-checkout-btn)
) {
  background: var(--btn-ondark-bg) !important;
  border: 1.5px solid var(--btn-ondark-border) !important;
  color: var(--btn-ondark-fg) !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  :is(
    .circle-btn-ondark, .action-btn, #web_login_form .loginbutton_, .dash-home-follow,
    .dash-home-social :is(.circle-btn, .pathway-checkout-btn),
    .pathway-hero :is(.circle-btn, .pathway-checkout-btn),
    .rel-launch :is(.circle-btn, .pathway-checkout-btn)
  ):hover {
    background: var(--btn-ondark-bg-hover) !important;
    border-color: var(--btn-ondark-bg-hover) !important;
    color: var(--btn-ondark-fg) !important;
  }
}

/* ── Shape ───────────────────────────────────────────────────────────────── */
/* Every button is fully rounded (Pavel, 2026-09-29). */
:is(
  .circle-btn, .circle-btn-secondary, .circle-btn-ondark, .circle-btn-quiet,
  .membership-btn, .thanks-btn, .thanks-btn-ghost, .dash-preview-ok,
  .loginbutton_, .loginbutton, .btn-primary, .btn-outline,
  .dash-intake-cta-btn, .account-setup-submit, .dash-pathway-cta, .pathway-checkout-btn,
  .dash-chat-send-btn, .chat-new-btn, .dash-settings-btn, .dash-home-action-cta, .dash-set-btn,
  .dash-intake-complete-btn, .dash-intake-section-cta, .dash-intake-next,
  .quiz-btn-next, .quiz-btn-cta, .act-inline-btn, .act-inline-btn-quiet,
  .dash-pharm-pop button, .rp-btn, .rel-phone-btn, .action-btn, .dash-home-follow,
  .dash-pathway-btn-secondary, .dash-alert-primary
) {
  border-radius: 999px !important;
}

/* ── Secondary on a dark ground or a photo ───────────────────────────────── */
/* No fill, 2px white stroke, white text (Pavel, 2026-09-29). The Treatment Program
   tiles' Open / Explore buttons sit on a darkened photo and take this style. */
:is(.circle-btn-ondark-secondary, .dash-pathway-tile-cta) {
  background: transparent !important;
  border: 2px solid var(--color-surface, #FFFEF6) !important;
  color: var(--color-surface, #FFFEF6) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  :is(.circle-btn-ondark-secondary, .dash-pathway-tile-cta):hover,
  .dash-pathway-tile:hover .dash-pathway-tile-cta {
    background: rgba(255,254,246,0.14) !important;
    border-color: var(--color-surface, #FFFEF6) !important;
  }
}

/* ── Text links inside copy ──────────────────────────────────────────────── */
/* Circle Black and underlined, not orange (Mike, 2026-09-29: "Read the membership FAQ ...
   do this for similar patterns"). No !important: the navy sign-up gate keeps its own,
   more specific link colours, and the auth-page links below only change on pages that do
   not load the navy prereg.css. */
.thanks-receipt a,
.dash-set-linkrow a,
.dash-settings-link,
.chat-list-pager-link,
.quiz-link,
.quiz-results-login a,
html:not(:has(link[href*="/dashboard/prereg.css"])) :is(.login-signup-link a, #yubikeysetup a, .forgot-link, .signup-consent a, .sso-terms-note a) {
  color: var(--color-font, #292626);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
:is(.thanks-receipt a, .dash-set-linkrow a, .dash-settings-link, .chat-list-pager-link, .quiz-link, .quiz-results-login a, .dash-set-receipt-acts a, .footer-col a):hover,
html:not(:has(link[href*="/dashboard/prereg.css"])) :is(.login-signup-link a, #yubikeysetup a, .forgot-link, .signup-consent a, .sso-terms-note a):hover {
  color: var(--color-font, #292626);
  text-decoration-thickness: 2px;
}

/* Home social band ("Your clinic, now open."): the Follow button in Circle Cream with Circle
   Navy text, matching the title (Pavel, 2026-09-30). Overrides the on-dark primary above. */
.dash-home-social .dash-home-follow {
  background: var(--color-cream, #F4F1E2) !important;
  border-color: var(--color-cream, #F4F1E2) !important;
  color: var(--color-navy, #10293C) !important;
}
@media (hover: hover) {
  .dash-home-social .dash-home-follow:hover {
    background: var(--cream-deep, #E6E2D1) !important;
    border-color: var(--cream-deep, #E6E2D1) !important;
    color: var(--color-navy, #10293C) !important;
  }
}