/* Central action components. Page styles control placement only. */
:root {
  --button-height: var(--app-control-height);
  --button-icon-size: 36px;
  --button-radius: var(--app-radius);
  --button-primary: var(--primary-color, #3f5f7d);
  --button-primary-hover: var(--primary-color-hover, #334e68);
  --button-on-primary: #fff;
  --button-soft: var(--color-action-soft);
  --button-soft-hover: var(--color-action-soft-hover);
  --button-border: var(--color-border-strong);
  --button-text: var(--color-action-text);
  --button-ring: var(--app-focus-ring);
  --button-success: #2f7d62;
  --button-success-hover: #25644f;
  --button-warning: #8a5a00;
  --button-warning-hover: #704900;
  --button-danger: #a83a38;
  --button-danger-hover: #872e2d;
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(
  .btn, .button-primary, .primary-btn, .ui-soft-btn, button[type="submit"]:not(.nav-logout-link)
) {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  box-shadow: 0 1px 2px rgba(32, 42, 51, .08);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font: var(--app-weight-semibold) .9rem/1.3 var(--app-font-family);
  gap: .42rem;
  justify-content: center;
  min-height: var(--button-height);
  padding: .48rem .78rem;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(.btn, button) > :where(i, svg) {
  color: inherit;
  display: block;
  flex: 0 0 auto;
  line-height: 1;
  margin: 0;
  text-align: center;
}

:where(body#main-body, body.booking-public, body.public-form-body) button {
  text-align: center;
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(
  .btn-primary, .button-primary, .primary-btn, button[type="submit"]:not(.nav-logout-link)
) {
  background: var(--button-primary);
  border-color: var(--button-primary);
  color: var(--button-on-primary);
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(
  .btn-primary, .button-primary, .primary-btn, button[type="submit"]:not(.nav-logout-link)
):is(:hover, :focus-visible, .active) {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
  box-shadow: var(--button-ring), 0 5px 14px rgba(32, 42, 51, .12);
  color: var(--button-on-primary);
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-success {
  background: var(--button-success);
  border-color: var(--button-success);
  color: #fff;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-success:is(:hover, :focus-visible) {
  background: var(--button-success-hover);
  border-color: var(--button-success-hover);
  box-shadow: var(--button-ring);
  color: #fff;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-outline-success {
  background: #edf7f2;
  border-color: #91bea9;
  color: #215d49;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-outline-success:is(:hover, :focus-visible) {
  background: var(--button-success);
  border-color: var(--button-success);
  color: #fff;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-warning {
  background: var(--button-warning);
  border-color: var(--button-warning);
  color: #fff;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-warning:is(:hover, :focus-visible) {
  background: var(--button-warning-hover);
  border-color: var(--button-warning-hover);
  box-shadow: 0 0 0 .2rem rgba(166, 106, 22, .2);
  color: #fff;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-outline-warning {
  background: #fff4dc;
  border-color: #dfba72;
  color: #754b00;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-outline-warning:is(:hover, :focus-visible) {
  background: var(--button-warning);
  border-color: var(--button-warning);
  color: #fff;
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(
  .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary,
  .btn-info, .btn-outline-info, .ui-soft-btn, .toolbar-control
) {
  background: var(--button-soft);
  border-color: var(--button-border);
  color: var(--button-text);
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(
  .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary,
  .btn-info, .btn-outline-info, .ui-soft-btn, .toolbar-control
):is(:hover, :focus-visible, .active, [aria-pressed="true"]) {
  background: var(--button-primary);
  border-color: var(--button-primary);
  box-shadow: var(--button-ring);
  color: var(--button-on-primary);
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(.btn-danger, .btn-outline-danger) {
  background: #fff4f2;
  border-color: #e8aaa4;
  color: #a83228;
}

:where(body#main-body, body.booking-public, body.public-form-body) .btn-danger {
  background: var(--button-danger);
  border-color: var(--button-danger);
  color: #fff;
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(.btn-danger, .btn-outline-danger):is(:hover, :focus-visible) {
  background: var(--button-danger-hover);
  border-color: var(--button-danger-hover);
  box-shadow: 0 0 0 .2rem rgba(180, 35, 24, .16);
  color: #fff;
}

/* Semantic utilities for icon buttons that are not Bootstrap buttons. */
:is(body#main-body, body.booking-public, body.public-form-body) :where(.ui-action-success, .ui-action-warning, .ui-action-danger) {
  color: #fff;
}

:is(body#main-body, body.booking-public, body.public-form-body) .ui-action-success {
  background: var(--button-success);
  border-color: var(--button-success);
}

:is(body#main-body, body.booking-public, body.public-form-body) .ui-action-success:is(:hover, :focus-visible) {
  background: var(--button-success-hover);
  border-color: var(--button-success-hover);
  box-shadow: 0 0 0 .2rem rgba(47, 125, 98, .2);
}

:is(body#main-body, body.booking-public, body.public-form-body) .ui-action-warning {
  background: var(--button-warning);
  border-color: var(--button-warning);
}

:is(body#main-body, body.booking-public, body.public-form-body) .ui-action-warning:is(:hover, :focus-visible) {
  background: var(--button-warning-hover);
  border-color: var(--button-warning-hover);
  box-shadow: 0 0 0 .2rem rgba(166, 106, 22, .2);
}

:is(body#main-body, body.booking-public, body.public-form-body) .ui-action-danger {
  background: var(--button-danger);
  border-color: var(--button-danger);
}

:is(body#main-body, body.booking-public, body.public-form-body) .ui-action-danger:is(:hover, :focus-visible) {
  background: var(--button-danger-hover);
  border-color: var(--button-danger-hover);
  box-shadow: 0 0 0 .2rem rgba(168, 58, 56, .2);
}

:root[data-app-theme="dark"] :where(body#main-body, body.booking-public, body.public-form-body) .btn-outline-success {
  background: #1a3028;
  border-color: #4b826b;
  color: #9bd8b9;
}

:root[data-app-theme="dark"] :where(body#main-body, body.booking-public, body.public-form-body) .btn-outline-warning {
  background: #342817;
  border-color: #8b692f;
  color: #efc36f;
}

:root[data-app-theme="dark"] :where(body#main-body, body.booking-public, body.public-form-body) .btn-outline-danger {
  background: #3a2021;
  border-color: #8d4c4a;
  color: #f0aaa5;
}

:where(body#main-body, body.booking-public, body.public-form-body) :where(.btn, button):is(:disabled, .disabled) {
  background: #e8f2f2;
  border-color: #d8e1e1;
  box-shadow: none;
  color: #7a898a;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

:is(body#main-body, body.booking-public, body.public-form-body) :where(.ui-action-success, .ui-action-warning, .ui-action-danger):is(:disabled, .disabled) {
  background: #e8f2f2;
  border-color: #d8e1e1;
  box-shadow: none;
  color: #7a898a;
}

.ui-icon-btn,
.icon-btn,
.settings-icon-btn,
.forms-icon-btn,
.user-action-btn,
.calendar-icon-btn,
.booking-icon-btn {
  align-items: center;
  background: var(--button-soft);
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  color: var(--button-text);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 var(--button-icon-size);
  height: var(--button-icon-size);
  justify-content: center;
  min-height: var(--button-icon-size);
  padding: 0;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
  width: var(--button-icon-size);
}

:where(.ui-icon-btn, .icon-btn, .settings-icon-btn, .forms-icon-btn, .user-action-btn, .calendar-icon-btn, .booking-icon-btn):is(:hover, :focus-visible, .active) {
  background: var(--button-primary);
  border-color: var(--button-primary);
  box-shadow: var(--button-ring);
  color: var(--button-on-primary);
  outline: 0;
}

.btn-link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--button-primary);
}

.btn-link:is(:hover, :focus-visible) {
  background: var(--button-soft);
  color: var(--button-primary-hover);
  text-decoration: none;
}

.app-search-field,
.search-wrapper,
.search-input-wrapper {
  position: relative;
}

.app-search-field > :where(i, .search-icon),
.search-wrapper > :where(i, .search-icon),
.search-input-wrapper > :where(i, .search-icon) {
  color: var(--text-secondary, var(--color-text-muted));
  left: .8rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.app-search-field > input,
.search-input-wrapper > input {
  padding-left: 2.35rem;
}

@media (max-width: 900px) {
  :root {
    --button-height: 42px;
    --button-icon-size: 40px;
  }
}