/*
 * Styles for the [govetty_login] account popup (logged-in state).
 * Loaded sitewide (see Govetty_Shortcodes::maybe_enqueue_assets()) since
 * this can appear in a template, like the theme header, on every page --
 * kept deliberately small and independent of booking-app.css, which is
 * only loaded on the booking/personal-area pages themselves.
 *
 * Colors match the palette already established in booking-app.css
 * (Vetty maroon on warm white) so the popup doesn't look like a bolted-on
 * component next to the rest of the site.
 */

.gv-login-menu {
  position: relative;
}

/* Reset default <summary>/<button> chrome -- theme classes passed via the
   shortcode's `class` attribute (e.g. frame-66) supply the actual look. */
.gv-login-menu-btn {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* The theme gives .frame-66 a fixed narrow width with no side padding, so
   "Dashboard" sits flush against its edges. Match the "Talk to a Vet Now"
   button's horizontal padding and let the width follow the content. Desktop
   only: below 768px the theme swaps both buttons for icon-only squares. */
@media (min-width: 768px) {
  .gv-login-menu-btn.frame-66 {
    width: auto;
    min-width: clamp(92.5px, 5.208vw, 100px);
    box-sizing: border-box;
    padding: clamp(6.25px, .521vw, 10px) clamp(9.38px, .781vw, 15px);
    white-space: nowrap;
  }
}

.gv-login-menu-btn::-webkit-details-marker {
  display: none;
}

.gv-login-menu-btn:focus-visible {
  outline: 2px solid #8b1020;
  outline-offset: 2px;
}

.gv-login-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 100;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #dcd8d6;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(43, 7, 9, 0.04), 0 10px 30px rgba(43, 7, 9, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gv-login-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: #1a1614;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.gv-login-menu-item:hover,
.gv-login-menu-item:focus-visible {
  background: #f7e4e1;
  color: #8b1020;
  outline: none;
}

/* Call balance row at the top of the dropdown. */
.gv-login-menu-balance {
  padding: 10px 12px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #f2e7dc;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  white-space: nowrap;
}

.gv-login-menu-balance-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #525353;
}

.gv-login-menu-balance-value {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #5e0710;
}

/* On small screens, a right-anchored panel can overflow the viewport if
   the toggle sits near the left edge -- pin it to a safe inset instead of
   letting it run off-screen. */
@media (max-width: 480px) {
  .gv-login-menu-panel {
    right: -8px;
    min-width: 160px;
  }
}

/* "You've been logged out" notice -- fixed to the top of the viewport,
   centered, and only as wide as its content (capped), never full width. */
.gv-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 12px 14px 12px 18px;
  background: #5e0710;
  color: #ffffff;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(43, 7, 9, 0.28);
}

body.admin-bar .gv-toast {
  top: 48px;
}

.gv-toast-close {
  flex: 0 0 auto;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: 0.8;
}

.gv-toast-close:hover,
.gv-toast-close:focus-visible {
  opacity: 1;
}