/*
 * Dashboard frame only.
 *
 * The public header/footer are styled by the real site stylesheets
 * (styles.css + auth.css). This file must not restyle the header,
 * footer, menus, user dropdown, or Listeo dashboard content.
 */

body.bookings-page-dashboard.admin-bar {
  --cdf-adminbar-h: 32px;
}

body.bookings-page-dashboard:not(.admin-bar) {
  --cdf-adminbar-h: 0px;
}

body.bookings-page-dashboard {
  --cdf-dashboard-frame-top: calc(var(--cdf-adminbar-h) + 38px + var(--header-h));
}

body.bookings-page-dashboard #dashboard {
  flex-wrap: wrap;
  padding-top: 0 !important;
}

body.bookings-page-dashboard #dashboard > .dashboard-content {
  flex: 1 1 auto;
}

body.bookings-page-dashboard #dashboard > .footer {
  clear: both;
  flex: 0 0 100%;
  margin-left: 0;
  order: 99;
  width: 100%;
}

@media (min-width: 992px) {
  body.bookings-page-dashboard #dashboard > .dashboard-nav {
    height: calc(100vh - var(--cdf-dashboard-frame-top)) !important;
    top: var(--cdf-dashboard-frame-top) !important;
  }
}

@media screen and (max-width: 782px) {
  body.bookings-page-dashboard.admin-bar {
    --cdf-adminbar-h: 46px;
  }
}

/*
 * Listeo's parent stylesheet is loaded for the dashboard content and has broad
 * `.menu` / `.dropdown` rules. Restore the child-theme header contract after it.
 */
body.bookings-page-dashboard .topbar,
body.bookings-page-dashboard .site-header,
body.bookings-page-dashboard .drawer,
body.bookings-page-dashboard .drawer-back {
  font-family: var(--sans) !important;
}

body.bookings-page-dashboard .topbar *,
body.bookings-page-dashboard .site-header *,
body.bookings-page-dashboard .drawer * {
  box-sizing: border-box !important;
}

body.bookings-page-dashboard .topbar a,
body.bookings-page-dashboard .site-header a,
body.bookings-page-dashboard .drawer a {
  color: inherit;
  text-decoration: none !important;
}

body.bookings-page-dashboard .topbar button,
body.bookings-page-dashboard .site-header button,
body.bookings-page-dashboard .drawer button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

body.bookings-page-dashboard .topbar .wrap,
body.bookings-page-dashboard .site-header .wrap {
  margin: 0 auto !important;
  max-width: var(--maxw) !important;
  padding-inline: var(--gutter) !important;
  width: 100% !important;
}

body.bookings-page-dashboard .topbar {
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  color: #cdd9e0 !important;
  font-size: 13px !important;
}

body.bookings-page-dashboard .topbar .wrap {
  align-items: center !important;
  display: flex !important;
  height: 38px !important;
  justify-content: space-between !important;
}

body.bookings-page-dashboard .topbar .tb-left {
  align-items: center !important;
  display: flex !important;
  gap: 22px !important;
}

body.bookings-page-dashboard .topbar .tb-left span,
body.bookings-page-dashboard .topbar .tb-weather > span {
  align-items: center !important;
  display: inline-flex !important;
  gap: 7px !important;
}

body.bookings-page-dashboard .topbar .tb-left svg,
body.bookings-page-dashboard .topbar .tb-weather svg {
  height: 14px !important;
  opacity: .8 !important;
  width: 14px !important;
}

body.bookings-page-dashboard .topbar .socials {
  display: flex !important;
  flex: 0 1 auto !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  max-width: 45vw !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.bookings-page-dashboard .topbar .socials a {
  display: grid !important;
  opacity: .8 !important;
  place-items: center !important;
}

body.bookings-page-dashboard .topbar .socials svg {
  height: 15px !important;
  width: 15px !important;
}

body.bookings-page-dashboard .site-header {
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: sticky !important;
  top: 0 !important;
  transition: box-shadow .25s ease, background .25s ease !important;
  z-index: 60 !important;
}

body.bookings-page-dashboard .site-header.scrolled {
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.bookings-page-dashboard .site-header .nav {
  align-items: center !important;
  display: flex !important;
  gap: 28px !important;
  height: var(--header-h) !important;
  overflow: visible !important;
}

body.bookings-page-dashboard .site-header .brand {
  align-items: center !important;
  display: flex !important;
  flex-shrink: 0 !important;
  gap: 12px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.bookings-page-dashboard .site-header .brand img {
  border-radius: 50% !important;
  height: 44px !important;
  max-width: none !important;
  width: 44px !important;
}

body.bookings-page-dashboard .site-header .brand .bt {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
}

body.bookings-page-dashboard .site-header .brand .bt b {
  color: var(--navy) !important;
  font-family: var(--serif) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
}

body.bookings-page-dashboard .site-header .brand .bt small {
  color: var(--coral) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
}

body.bookings-page-dashboard .site-header .menu {
  align-items: center !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  height: auto !important;
  list-style: none !important;
  margin: 0 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
}

body.bookings-page-dashboard .site-header .menu > li {
  display: list-item !important;
  float: none !important;
  height: auto !important;
  list-style: none !important;
  margin: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  top: auto !important;
  width: auto !important;
}

body.bookings-page-dashboard .site-header .menu > li > a {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  gap: 6px !important;
  height: auto !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  transition: .18s !important;
  white-space: nowrap !important;
  width: auto !important;
}

body.bookings-page-dashboard .site-header .menu > li > a:hover {
  background: var(--coral-soft) !important;
  color: var(--coral) !important;
}

body.bookings-page-dashboard .site-header .menu > li > a .caret {
  display: block !important;
  height: 12px !important;
  opacity: .55 !important;
  transition: transform .2s !important;
  width: 12px !important;
}

body.bookings-page-dashboard .site-header .menu > li:hover > a .caret,
body.bookings-page-dashboard .site-header .menu > li:focus-within > a .caret {
  transform: rotate(180deg) !important;
}

body.bookings-page-dashboard .site-header .menu .dropdown,
body.bookings-page-dashboard .site-header .menu .sub-menu {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
  display: block !important;
  float: none !important;
  height: auto !important;
  left: 50% !important;
  margin: 0 !important;
  min-width: 244px !important;
  opacity: 0 !important;
  overflow: visible !important;
  padding: 10px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: auto !important;
  top: calc(100% + 10px) !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition: .2s ease !important;
  visibility: hidden !important;
  width: auto !important;
  z-index: 70 !important;
}

body.bookings-page-dashboard .site-header .menu > li:hover > .dropdown,
body.bookings-page-dashboard .site-header .menu > li:focus-within > .dropdown,
body.bookings-page-dashboard .site-header .menu > li:hover > .sub-menu,
body.bookings-page-dashboard .site-header .menu > li:focus-within > .sub-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  visibility: visible !important;
}

body.bookings-page-dashboard .site-header .menu .dropdown a,
body.bookings-page-dashboard .site-header .menu .sub-menu a {
  align-items: center !important;
  background: transparent !important;
  border-radius: 10px !important;
  color: var(--body) !important;
  display: flex !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  gap: 11px !important;
  height: auto !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}

body.bookings-page-dashboard .site-header .menu .dropdown a:hover,
body.bookings-page-dashboard .site-header .menu .sub-menu a:hover {
  background: var(--sand-2) !important;
  color: var(--coral) !important;
}

body.bookings-page-dashboard .site-header .nav-cta {
  align-items: center !important;
  display: flex !important;
  flex-shrink: 0 !important;
  gap: 12px !important;
  margin: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
}

body.bookings-page-dashboard .site-header .btn {
  align-items: center !important;
  border-radius: var(--pill) !important;
  display: inline-flex !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  gap: 9px !important;
  height: auto !important;
  justify-content: center !important;
  letter-spacing: .005em !important;
  line-height: 1.6 !important;
  min-height: 0 !important;
  padding: 13px 24px !important;
  transition: .22s ease !important;
  white-space: nowrap !important;
}

body.bookings-page-dashboard .site-header .btn svg {
  height: 17px !important;
  width: 17px !important;
}

body.bookings-page-dashboard .site-header .btn-primary {
  background: var(--coral) !important;
  box-shadow: var(--shadow-coral) !important;
  color: #fff !important;
}

body.bookings-page-dashboard .site-header .btn-primary:hover {
  background: var(--coral-deep) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

body.bookings-page-dashboard .site-header .cdf-user-menu {
  display: block !important;
  margin: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

body.bookings-page-dashboard .site-header .cdf-user-trigger {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--pill) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  gap: 9px !important;
  height: auto !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 6px 8px 6px 6px !important;
  transition: .18s !important;
  width: auto !important;
}

body.bookings-page-dashboard .site-header .cdf-user-trigger:hover,
body.bookings-page-dashboard .site-header .cdf-user-menu.open > .cdf-user-trigger {
  border-color: var(--coral) !important;
  color: var(--coral) !important;
}

body.bookings-page-dashboard .site-header .cdf-user-trigger .avatar {
  border-radius: 50% !important;
  display: grid !important;
  flex-shrink: 0 !important;
  height: 32px !important;
  overflow: hidden !important;
  place-items: center !important;
  width: 32px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-trigger .avatar img {
  border-radius: 50% !important;
  height: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}

body.bookings-page-dashboard .site-header .cdf-user-trigger .uname {
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.bookings-page-dashboard .site-header .cdf-user-trigger .caret {
  height: 14px !important;
  opacity: .6 !important;
  transition: transform .2s !important;
  width: 14px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-menu.open > .cdf-user-trigger .caret {
  transform: rotate(180deg) !important;
}

body.bookings-page-dashboard .site-header .cdf-user-menu > .cdf-user-dd {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  min-width: 256px !important;
  opacity: 0 !important;
  overflow: visible !important;
  padding: 8px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  transform: translateY(8px) !important;
  transition: .2s ease !important;
  visibility: hidden !important;
  width: 256px !important;
  z-index: 120 !important;
}

body.bookings-page-dashboard .site-header .cdf-user-menu.open > .cdf-user-dd {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd-head {
  align-items: center !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex !important;
  gap: 12px !important;
  margin: 0 0 6px !important;
  padding: 10px 10px 12px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd-head .avatar {
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  height: 42px !important;
  overflow: hidden !important;
  width: 42px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd-head .avatar img {
  border-radius: 50% !important;
  height: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd-head .meta {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd-head .meta b {
  font-size: 15px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd-head .meta small {
  color: var(--muted) !important;
  font-size: 12.5px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd li a {
  align-items: center !important;
  background: transparent !important;
  border-radius: 10px !important;
  color: var(--body) !important;
  display: flex !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  gap: 11px !important;
  line-height: 1.6 !important;
  padding: 10px 12px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd li a:hover {
  background: var(--sand-2) !important;
  color: var(--coral) !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd li a svg {
  flex-shrink: 0 !important;
  height: 18px !important;
  width: 18px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd li.is-logout {
  border-top: 1px solid var(--line) !important;
  margin-top: 6px !important;
  padding-top: 4px !important;
}

body.bookings-page-dashboard .site-header .cdf-user-dd li.is-logout a {
  color: var(--coral-deep) !important;
  font-weight: 600 !important;
}

@media (max-width: 1080px) {
  body.bookings-page-dashboard .site-header .menu,
  body.bookings-page-dashboard .site-header .nav-cta .signin,
  body.bookings-page-dashboard .site-header .nav-cta .cdf-user-menu,
  body.bookings-page-dashboard .site-header .nav-cta .add-desktop {
    display: none !important;
  }

  body.bookings-page-dashboard .site-header .nav-cta {
    margin-left: auto !important;
  }

  body.bookings-page-dashboard .site-header .burger {
    display: grid !important;
  }
}

@media (max-width: 720px) {
  body.bookings-page-dashboard .topbar .wrap {
    gap: 10px !important;
    min-height: 36px !important;
    padding-inline: 14px !important;
  }

  body.bookings-page-dashboard .topbar .tb-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.bookings-page-dashboard .topbar .tb-left span.hide-sm,
  body.bookings-page-dashboard .topbar .tb-weather .hide-sm {
    display: none !important;
  }

  body.bookings-page-dashboard .topbar .socials {
    flex: 0 1 auto !important;
    gap: 5px !important;
    max-width: 36vw !important;
    overflow: hidden !important;
    padding: 4px 0 !important;
    scrollbar-width: none !important;
  }

  body.bookings-page-dashboard .topbar .socials::-webkit-scrollbar {
    display: none !important;
  }

  body.bookings-page-dashboard .topbar .socials a {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 50% !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    width: 24px !important;
  }

  body.bookings-page-dashboard .topbar .socials svg {
    height: 13px !important;
    width: 13px !important;
  }

  body.bookings-page-dashboard .topbar .tb-weather {
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.bookings-page-dashboard .topbar .tb-weather .tb-day {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.bookings-page-dashboard .topbar .tb-weather .tb-day-val {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  body.bookings-page-dashboard .topbar {
    font-size: 12px !important;
  }

  body.bookings-page-dashboard .topbar .wrap {
    padding-inline: 10px !important;
  }

  body.bookings-page-dashboard .topbar .socials {
    gap: 4px !important;
    max-width: 28vw !important;
  }

  body.bookings-page-dashboard .topbar .socials a {
    height: 20px !important;
    width: 20px !important;
  }
}