/* Unified pagination across patient, report, and administration pages. */
nav.pager {
  width: 100%;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-top: 1px solid #e4ebf2;
  background: #fff;
  box-sizing: border-box;
}

/* CLINIVOR blue treatment for the appointment blocking controls. */
.newcal-form input.block-button {
  border-color: transparent !important;
  background-color: #087eea !important;
  background-image: linear-gradient(110deg, #0755c7 0%, #087eea 55%, #19b8d7 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(17, 104, 193, 0.20) !important;
}

.newcal-form input.block-button:hover,
.newcal-form input.block-button:focus {
  background-image: linear-gradient(110deg, #0648ac 0%, #096ed1 55%, #14a8c6 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(17, 104, 193, 0.28) !important;
}

.newcal-form .calendar-block-note input:focus {
  border-color: #087eea !important;
  box-shadow: 0 0 0 3px rgba(8, 126, 234, 0.16) !important;
}

/* Match Calendar Print/Export actions to the Show Clinics primary button. */
.newcal-form .calendar-control-action {
  border-color: transparent !important;
  background-color: #087eea !important;
  background-image: linear-gradient(110deg, #0755c7 0%, #087eea 55%, #19b8d7 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(17, 104, 193, 0.20) !important;
}

.newcal-form .calendar-control-action:hover,
.newcal-form .calendar-control-action:focus {
  border-color: transparent !important;
  background-color: #096ed1 !important;
  background-image: linear-gradient(110deg, #0648ac 0%, #096ed1 55%, #14a8c6 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(17, 104, 193, 0.28) !important;
}

/* Unified CLINIVOR blue palette for all calendar view controls. */
.newcal-form .calendar-today-action a,
.calendar-period__today,
.newcal-form .calendar-view-switcher a,
.calendar-period__views a {
  border-color: #8fc3f2 !important;
  background: #fff !important;
  color: #0755c7 !important;
  box-shadow: none !important;
}

.newcal-form .calendar-today-action a:hover,
.calendar-period__today:hover,
.newcal-form .calendar-view-switcher a:hover,
.calendar-period__views a:hover {
  border-color: #087eea !important;
  background: #eef6ff !important;
  color: #0648ac !important;
}

.newcal-form .calendar-view-switcher .is-active,
.calendar-period__views .is-active {
  border-color: transparent !important;
  background-color: #087eea !important;
  background-image: linear-gradient(110deg, #0755c7 0%, #087eea 55%, #19b8d7 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(17, 104, 193, 0.20) !important;
}

.newcal-form > a.link,
.newcal-form .float-right.link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  border-radius: 9px;
  background-color: #087eea !important;
  background-image: linear-gradient(110deg, #0755c7 0%, #087eea 55%, #19b8d7 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(17, 104, 193, 0.20) !important;
  text-decoration: none;
}

/* Footer palette aligned with the CLINIVOR blue/cyan identity. */
.footer,
.footerwidget,
.copyright {
  background-color: #0755c7 !important;
  background-image: linear-gradient(110deg, #063b93 0%, #087eea 58%, #19b8d7 100%) !important;
  border-top-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.footer :is(h1, h2, h3, h4, p, span),
.footerwidget :is(h1, h2, h3, h4, p, span),
.copyright :is(h1, h2, h3, h4, p, span) {
  color: inherit !important;
}

.footer a,
.footerwidget a,
.copyright a,
.copyright .social-media a {
  color: rgba(255, 255, 255, 0.88) !important;
}

.footer a:hover,
.footer a:focus,
.footerwidget a:hover,
.footerwidget a:focus,
.copyright a:hover,
.copyright a:focus {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.42);
}

/* Unified CLINIVOR button palette, matching the public Sign In action. */
.content_layout :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .btn,
  a.link
):not(.close):not(.popup-close):not(.tabledrag-handle):not(.dropbutton-toggle):not(.clinic-delete-action):not(.delete-button):not(.delete_task):not(.credit-allocation-add):not(.credit-allocation-remove-control):not(.credit-allocation-save):not(.credit-allocation-delete):not(.credit-allocation-global-toggle):not(.tabledrag-toggle-weight) {
  border-color: transparent !important;
  background-color: #087eea !important;
  background-image: linear-gradient(110deg, #0755c7 0%, #087eea 55%, #19b8d7 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(17, 104, 193, 0.20) !important;
}

.content_layout :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .btn,
  a.link
):not(.close):not(.popup-close):not(.tabledrag-handle):not(.dropbutton-toggle):not(.clinic-delete-action):not(.delete-button):not(.delete_task):not(.credit-allocation-add):not(.credit-allocation-remove-control):not(.credit-allocation-save):not(.credit-allocation-delete):not(.credit-allocation-global-toggle):not(.tabledrag-toggle-weight):hover,
.content_layout :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .btn,
  a.link
):not(.close):not(.popup-close):not(.tabledrag-handle):not(.dropbutton-toggle):not(.clinic-delete-action):not(.delete-button):not(.delete_task):not(.credit-allocation-add):not(.credit-allocation-remove-control):not(.credit-allocation-save):not(.credit-allocation-delete):not(.credit-allocation-global-toggle):not(.tabledrag-toggle-weight):focus {
  background-image: linear-gradient(110deg, #0648ac 0%, #096ed1 55%, #14a8c6 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(17, 104, 193, 0.28) !important;
}

.content_layout :is(button, input, .button, .btn)[disabled],
.content_layout :is(button, input, .button, .btn).is-disabled {
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Keep account-form actions visually consistent, including link buttons. */
.content_layout .user-form :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  a.button,
  .button
):not(.tabledrag-handle):not(.dropbutton-toggle) {
  min-width: 150px;
  min-height: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

.content_layout .user-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.content_layout .user-form .form-actions :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  a.button,
  .button
) {
  margin: 0;
}

/* Use the established CLINIVOR blue for the account status heading. */
.content_layout .user-form #edit-status--wrapper > legend {
  background-color: #087eea !important;
  background-image: linear-gradient(110deg, #0755c7 0%, #087eea 58%, #19b8d7 100%) !important;
  color: #fff !important;
}

.content_layout .user-form #edit-status--wrapper > legend .fieldset-legend {
  color: inherit;
}

/* Match bulk WhatsApp actions to the site's shared action-button sizing. */
.content_layout .calendar-bulk-whatsapp-form .form-actions :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  a.button,
  .button
) {
  width: auto;
  min-width: 220px;
  min-height: 48px;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 26px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: normal;
}

@media (max-width: 520px) {
  .content_layout .calendar-bulk-whatsapp-form .form-actions :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.button,
    .button
  ) {
    width: 100%;
  }
}

/* Lightweight shared page background (8 KB WebP, no fixed attachment). */
body:not(.path-home) .main-content {
  min-height: calc(100vh - 95px);
  background-color: #fff;
  background-image: url('../images/clinivor-page-background.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Reveal the full page artwork behind the login form. */
.page-user-login .content_layout {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 767px) {
  body:not(.path-home) .main-content {
    min-height: calc(100vh - 72px);
    background-position: 68% center;
    background-size: cover;
  }
}

@media print {
  body:not(.path-home) .main-content {
    background-image: none;
  }
}

nav.pager .pager__items,
nav.pager ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: right !important;
}

nav.pager .pager__item,
nav.pager li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

nav.pager .pager__item::before,
nav.pager .pager__item::after,
nav.pager li::before,
nav.pager li::after,
nav.pager li::marker {
  content: none !important;
  display: none !important;
}

nav.pager .pager__item a,
nav.pager .pager__item.is-active,
nav.pager .pager__item.is-active a,
nav.pager li > a,
nav.pager li > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid #d7e1eb !important;
  border-radius: 9px !important;
  color: #132b50 !important;
  background: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

nav.pager .pager__item a:hover,
nav.pager .pager__item a:focus-visible {
  border-color: #1680df !important;
  color: #086cc5 !important;
  background: #f2f8ff !important;
  outline: none !important;
}

nav.pager .pager__item.is-active,
nav.pager .pager__item.is-active a,
nav.pager li.is-active,
nav.pager li.is-active > a,
nav.pager li[aria-current="page"] > a {
  border-color: #1981df !important;
  color: #fff !important;
  background: #1981df !important;
  box-shadow: 0 6px 14px rgba(25, 129, 223, .18) !important;
}

nav.pager .pager__item--first a,
nav.pager .pager__item--previous a,
nav.pager .pager__item--next a,
nav.pager .pager__item--last a {
  min-width: 104px !important;
  padding-inline: 17px !important;
}

nav.pager .pager__item--ellipsis {
  min-width: 24px !important;
  min-height: 48px !important;
  color: #344963 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

html[dir="rtl"] nav.pager .pager__items,
html[dir="rtl"] nav.pager ul {
  direction: rtl;
}

@media (max-width: 700px) {
  nav.pager {
    padding: 12px 8px !important;
    overflow-x: auto;
  }

  nav.pager .pager__items,
  nav.pager ul {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: max-content;
    min-width: 100%;
  }

  nav.pager .pager__item a,
  nav.pager .pager__item.is-active,
  nav.pager .pager__item.is-active a,
  nav.pager li > a,
  nav.pager li > span {
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 7px 11px !important;
    font-size: 14px !important;
  }

  nav.pager .pager__item--first a,
  nav.pager .pager__item--previous a,
  nav.pager .pager__item--next a,
  nav.pager .pager__item--last a {
    min-width: 82px !important;
  }
}