/* Shared blue/grey actions. Load after page and dialog styles. */
:root {
  --button-blue-rgb: 66, 169, 225;
  --button-blue-text: #8bd1f4;
  --button-blue-hover-text: #ccecff;
  --button-grey-rgb: 148, 163, 184;
  --button-grey-text: #a7b9ce;
  --button-grey-hover-text: #dce6f3;
}

body :is(
  .btn-primary, .btn-outline-primary, .btn-info, .btn-outline-info,
  .btn-secondary, .btn-outline-secondary, .btn-outline, .btn-light, .btn-dark,
  .btn[data-infinite-next], .btn[data-bs-dismiss]:not(.btn-danger, .btn-outline-danger),
  .base-btn, .second-btn, .forum-button, .forum-more, .forum-image-trigger,
  .comment-submit-btn, .contact-submit-row button, .rate-button, .site-login-link, .site-register-link, .site-account-trigger,
  .site-footer-explore, .about-button-primary, .about-button-secondary,
  .select-btn, .payment-method-btn, .control-btn, .scroll-btn, .nav-btn,
  .profile-action-button, .profile-transparent-button, .contact-edit-suffix,
  .profile-payment-table .load-more-btn, .back-btn, .ui-button-blue, .ui-button-grey
) {
  --action-rgb: var(--button-grey-rgb);
  --action-text: var(--button-grey-text);
  --action-hover-text: var(--button-grey-hover-text);
  --action-fill: 0.06;
  --action-border: 0.25;
  --action-hover-fill: 0.12;
  --action-hover-border: 0.45;
  --bs-btn-color: var(--action-text);
  --bs-btn-bg: rgba(var(--action-rgb), var(--action-fill));
  --bs-btn-border-color: rgba(var(--action-rgb), var(--action-border));
  --bs-btn-hover-color: var(--action-hover-text);
  --bs-btn-hover-bg: rgba(var(--action-rgb), var(--action-hover-fill));
  --bs-btn-hover-border-color: rgba(var(--action-rgb), var(--action-hover-border));
  --bs-btn-active-color: var(--action-hover-text);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
  --bs-btn-disabled-color: var(--action-text);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
  background: rgba(var(--action-rgb), var(--action-fill)) !important;
  border: 1px solid rgba(var(--action-rgb), var(--action-border)) !important;
  color: var(--action-text) !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

body :is(
  .btn-primary, .btn-outline-primary, .btn-info, .btn-outline-info,
  .btn[data-infinite-next], .base-btn, .forum-button, .forum-more,
  .comment-submit-btn, .contact-submit-row button, .rate-button, .site-register-link, .site-footer-explore,
  .about-button-primary, .select-btn, .profile-action-button,
  .profile-transparent-button:not(.profile-cancel-button), .contact-edit-suffix,
  .profile-payment-table .load-more-btn, .back-btn, .ui-button-blue,
  .reader-page a.control-btn:has(.bi-caret-right),
  .control-btn.active, .payment-method-btn.active
) {
  --action-rgb: var(--button-blue-rgb);
  --action-text: var(--button-blue-text);
  --action-hover-text: var(--button-blue-hover-text);
  --action-fill: 0.09;
  --action-border: 0.3;
  --action-hover-fill: 0.16;
  --action-hover-border: 0.5;
}

body :is(
  .btn-primary, .btn-outline-primary, .btn-info, .btn-outline-info,
  .btn-secondary, .btn-outline-secondary, .btn-outline, .btn-light, .btn-dark,
  .btn[data-infinite-next], .btn[data-bs-dismiss]:not(.btn-danger, .btn-outline-danger),
  .base-btn, .second-btn, .forum-button, .forum-more, .forum-image-trigger,
  .comment-submit-btn, .contact-submit-row button, .rate-button, .site-login-link, .site-register-link, .site-account-trigger,
  .site-footer-explore, .about-button-primary, .about-button-secondary,
  .select-btn, .payment-method-btn, .control-btn, .scroll-btn, .nav-btn,
  .profile-action-button, .profile-transparent-button, .contact-edit-suffix,
  .profile-payment-table .load-more-btn, .back-btn, .ui-button-blue, .ui-button-grey
):is(:hover, :focus-visible, :active):not(:disabled, .disabled, [aria-disabled="true"]) {
  background: rgba(var(--action-rgb), var(--action-hover-fill)) !important;
  border-color: rgba(var(--action-rgb), var(--action-hover-border)) !important;
  color: var(--action-hover-text) !important;
}

body :is(
  .btn-primary, .btn-outline-primary, .btn-info, .btn-outline-info,
  .btn-secondary, .btn-outline-secondary, .btn-outline, .btn-light, .btn-dark,
  .btn[data-infinite-next], .btn[data-bs-dismiss]:not(.btn-danger, .btn-outline-danger),
  .base-btn, .second-btn, .forum-button, .forum-more, .forum-image-trigger,
  .comment-submit-btn, .contact-submit-row button, .rate-button, .site-login-link, .site-register-link, .site-account-trigger,
  .site-footer-explore, .about-button-primary, .about-button-secondary,
  .select-btn, .payment-method-btn, .control-btn, .scroll-btn, .nav-btn,
  .profile-action-button, .profile-transparent-button, .contact-edit-suffix,
  .profile-payment-table .load-more-btn, .back-btn, .ui-button-blue, .ui-button-grey
):focus-visible {
  outline: 2px solid var(--action-text);
  outline-offset: 3px;
}

body :is(
  .btn-primary, .btn-outline-primary, .btn-info, .btn-outline-info,
  .btn-secondary, .btn-outline-secondary, .btn-outline, .btn-light, .btn-dark,
  .btn[data-infinite-next], .base-btn, .second-btn, .forum-button, .forum-more,
  .comment-submit-btn, .contact-submit-row button, .rate-button, .about-button-primary, .about-button-secondary,
  .select-btn, .payment-method-btn, .control-btn,
  .profile-transparent-button, .ui-button-blue, .ui-button-grey
) {
  border-radius: 10px;
}

body :is(.ui-button-blue, .ui-button-grey) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
}

body :is(.btn-primary, .btn-secondary, .forum-button, .comment-submit-btn,
  .select-btn, .payment-method-btn, .control-btn, .ui-button-blue, .ui-button-grey
):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: 0.5;
  cursor: default;
}

/* Keep joined form controls and icon-only navigation in their original shape. */
body .modal-content :is(.btn-secondary, .modal-footer .btn[data-bs-dismiss]) {
  color: var(--action-text, var(--button-grey-text)) !important;
}
body .modal-content :is(.btn-secondary, .modal-footer .btn[data-bs-dismiss]):is(:hover, :focus-visible, :active) {
  color: var(--action-hover-text, var(--button-grey-hover-text)) !important;
}
body .contact-edit-suffix { border-left: 0 !important; }
body .nav-btn::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  body :is(.btn, .forum-button, .base-btn, .second-btn, .control-btn,
    .ui-button-blue, .ui-button-grey) { transition: none; }
}

/* Bookmark states remain distinct from ordinary grey actions. */
body .btn.btn-secondary.bookmark-saved,
body .chapter-btn.bookmark-saved {
  --action-rgb: 66, 169, 225;
  --action-text: #a8e3ff;
  --action-hover-text: #e0f5ff;
  --action-fill: .2;
  --action-border: .65;
  --action-hover-fill: .3;
  --action-hover-border: .9;
  background: rgba(66,169,225,.2) !important;
  border: 1px solid rgba(66,169,225,.65) !important;
  color: #a8e3ff !important;
}
body .btn.btn-secondary.bookmark-saved:is(:hover,:focus-visible,:active),
body .chapter-btn.bookmark-saved:is(:hover,:focus-visible,:active) {
  background: rgba(66,169,225,.3) !important;
  border-color: #69c8fa !important;
  color: #e0f5ff !important;
}
body .btn.btn-secondary.bookmark-unsaved,
body .chapter-btn.bookmark-unsaved {
  background: rgba(148,163,184,.04) !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  color: #a7b9ce !important;
}
body .btn.btn-secondary.bookmark-unsaved:is(:hover,:focus-visible,:active),
body .chapter-btn.bookmark-unsaved:is(:hover,:focus-visible,:active) {
  background: rgba(148,163,184,.12) !important;
  border-color: rgba(148,163,184,.45) !important;
  color: #dce6f3 !important;
}

body .btn.btn-secondary.collection-added {
  --action-rgb: 94, 224, 184;
  --action-text: #89ebcc;
  --action-hover-text: #b5f5e2;
  --action-fill: .14;
  --action-border: .5;
  --action-hover-fill: .22;
  --action-hover-border: .75;
  background: rgba(94,224,184,.14) !important;
  border-color: rgba(94,224,184,.5) !important;
  color: #89ebcc !important;
}
body .btn.btn-secondary.collection-added:is(:hover,:focus-visible,:active) {
  background: rgba(94,224,184,.22) !important;
  border-color: rgba(94,224,184,.75) !important;
  color: #b5f5e2 !important;
}