/**
 * BattersBox Brand Colors — Cards #1095, #1103, #1116
 *
 * Card #1095 stood up the brand-colors stylesheet with the Card #1094
 * Option A defaults. Card #1103 was John's per-element selection pass on
 * the same audit. Card #1116 enforces the FINAL brand palette site-wide:
 *
 *   --brand-red       #cd2727  (action / primary CTA)
 *   --brand-black     #000000  (heavy surface, headings)
 *   --brand-dark-gray #333333  (secondary surface, disabled)
 *   --brand-white     #ffffff  (light surface, contrast text)
 *   --brand-yellow    #fefd04  (accent / highlight)
 *
 * These are the ONLY permitted colors. No blue, green, purple, teal, or
 * other off-brand hexes are allowed anywhere in plugin CSS. The legacy
 * --bb-* variable names from #1095/#1103 are kept as aliases pointing at
 * the new brand values so prior overrides keep working.
 *
 * Loaded on every front-end page via wp_enqueue_scripts in
 * battersbox-roadmap.php at priority 999 so it overrides Elementor and
 * the gymmaster plugin's own stylesheets. The third-party gymmaster
 * plugin CSS is intentionally left untouched — those files would be
 * lost on a plugin update; we override by selector here instead.
 *
 * The PHP-side authoritative constants live in
 * assets/brand-colors-constants.php. Keep both files in sync.
 */

:root {
    /* Card #1116 canonical brand variables */
    --brand-red:       #cd2727;
    --brand-black:     #000000;
    --brand-dark-gray: #333333;
    --brand-white:     #ffffff;
    --brand-yellow:    #fefd04;

    /* Legacy aliases (Cards #1095/#1103) — re-point at the canonical brand
       palette so existing rules continue to render with approved hexes. */
    --bb-red:       var(--brand-red);
    --bb-deep-red:  var(--brand-red);
    --bb-yellow:    var(--brand-yellow);
    --bb-black:     var(--brand-black);
    --bb-white:     var(--brand-white);
    --bb-dark-gray: var(--brand-dark-gray);
}

/* ============================================================
   GymMaster login-form.css overrides
   ============================================================ */

/* login/register error message: black background, white text, red icon. */
.gymmaster-login-container .error,
.batters-box-login-container .error,
.gm-login-error,
.gm-error-message,
.gm-message.error,
.gymmaster-login-error,
.gymmaster-form .error,
.gymmaster-error {
    background: var(--brand-black) !important;
    color: var(--brand-white) !important;
    border: 1px solid var(--brand-black) !important;
    border-left: 4px solid var(--brand-black) !important;
}
.gymmaster-login-container .error::before,
.batters-box-login-container .error::before,
.gm-login-error::before,
.gm-error-message::before,
.gm-message.error::before,
.gymmaster-login-error::before,
.gymmaster-form .error::before,
.gymmaster-error::before {
    color: var(--brand-red) !important;
}

/* login/register success message: white card with red left rail. */
.gm-login-success,
.gm-success-message,
.gm-message.success,
.gymmaster-login-success,
.gymmaster-form .success,
.gymmaster-success {
    background: var(--brand-white) !important;
    color: var(--brand-dark-gray) !important;
    border: 1px solid var(--brand-dark-gray) !important;
    border-left: 4px solid var(--brand-red) !important;
}
.gm-login-success::before,
.gm-success-message::before,
.gm-message.success::before,
.gymmaster-login-success::before,
.gymmaster-form .success::before,
.gymmaster-success::before {
    color: var(--brand-red) !important;
}

/* Availability matrix cells: brand-only treatment. */
.gymmaster-availability-cell.available {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border: 1px solid var(--brand-black) !important;
    cursor: pointer;
}
.gymmaster-availability-cell.available:hover,
.gymmaster-availability-cell.available.selected {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border: 1px solid var(--brand-black) !important;
}
.gymmaster-availability-cell.reserved,
.gymmaster-availability-cell.unavailable {
    background: var(--brand-dark-gray) !important;
    color: var(--brand-white) !important;
    border: 1px solid var(--brand-black) !important;
    cursor: not-allowed;
}

/* ============================================================
   GymMaster cage-display.css overrides
   ============================================================ */

.cage-display .status-indicator,
.status-indicator {
    background: var(--brand-red) !important;
}
.cage-display .status-indicator.disconnected,
.status-indicator.disconnected {
    background: var(--brand-dark-gray) !important;
}

.cage-display .cage-header,
.cage-header {
    background: var(--brand-red) !important;
    border-bottom: 4px solid var(--brand-yellow) !important;
}

.cage-display .active-session,
.active-session {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-yellow) !important;
}

.cage-display .announcements-section,
.announcements-section {
    background: var(--brand-black) !important;
    color: var(--brand-white) !important;
}
.cage-display .announcement-priority-high,
.announcement-priority-high {
    border-left-color: var(--brand-red) !important;
}
.cage-display .announcement-priority-high .announcement-title,
.announcement-priority-high .announcement-title {
    color: var(--brand-yellow) !important;
}

.cage-display .booking-item.next,
.booking-item.next {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-left: 4px solid var(--brand-yellow) !important;
}

.cage-display .promotions-footer,
.promotions-footer {
    background: var(--brand-black) !important;
    border-top: 4px solid var(--brand-yellow) !important;
}

.cage-display .emergency-alert,
.emergency-alert {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
}

/* cage status pills: black border, white for available, dark-gray for in-use. */
.gm-cage-status.available,
.gym-cage-status.available,
.cage-status-available,
.cage-display .status.available,
.cage-display-available {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border: 1px solid var(--brand-black) !important;
}
.gm-cage-status.in-use,
.gm-cage-status.unavailable,
.gm-cage-status.reserved,
.gym-cage-status.in-use,
.cage-status-inuse,
.cage-status-reserved,
.cage-display .status.in-use,
.cage-display .status.reserved,
.cage-display-unavailable {
    background: var(--brand-dark-gray) !important;
    color: var(--brand-white) !important;
    border: 1px solid var(--brand-black) !important;
}

/* ============================================================
   Generic Elementor / theme guards
   ============================================================ */

.elementor-button-success { background-color: var(--brand-red) !important; color: var(--brand-white) !important; }
.elementor-button-danger  { background-color: var(--brand-red) !important; color: var(--brand-white) !important; }
.elementor-button-info    { background-color: var(--brand-dark-gray) !important; color: var(--brand-white) !important; }
.elementor-message-success {
    background-color: var(--brand-white) !important;
    color: var(--brand-dark-gray) !important;
    border-left: 4px solid var(--brand-red) !important;
}
.elementor-message-danger  {
    background-color: var(--brand-black) !important;
    color: var(--brand-white) !important;
    border-left: 4px solid var(--brand-black) !important;
}

/* ============================================================
   Account button (Member Dashboard header)
     Default — Red bg + white text
     Hover   — White bg + black text
   ============================================================ */
.bb-account-btn,
.member-dashboard-account-btn,
a.elementor-button-link.account-button,
.elementor-widget-button.bb-account-button .elementor-button {
    background-color: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-red) !important;
}
.bb-account-btn:hover,
.bb-account-btn:focus,
.bb-account-btn.active,
.member-dashboard-account-btn:hover,
.member-dashboard-account-btn:focus,
a.elementor-button-link.account-button:hover,
a.elementor-button-link.account-button:focus,
.elementor-widget-button.bb-account-button .elementor-button:hover,
.elementor-widget-button.bb-account-button .elementor-button:focus {
    background-color: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border-color: var(--brand-black) !important;
}

/* ============================================================
   X / Close buttons (modals + booking flow)
   ============================================================ */
#gymmaster-close-modal,
.gm-modal-close,
.bb-lesson-close,
.gym-x-close,
.bb-modal-x,
.bb-x-close {
    background-color: var(--brand-dark-gray) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-dark-gray) !important;
}
#gymmaster-close-modal:hover,
#gymmaster-close-modal:focus,
.gm-modal-close:hover,
.gm-modal-close:focus,
.bb-lesson-close:hover,
.bb-lesson-close:focus,
.gym-x-close:hover,
.gym-x-close:focus,
.bb-modal-x:hover,
.bb-modal-x:focus,
.bb-x-close:hover,
.bb-x-close:focus {
    background-color: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-red) !important;
}

/* ============================================================
   Options / Booking-mode buttons
   ============================================================ */
.gm-options-button,
.bb-booking-mode-btn {
    background: var(--brand-white) !important;
    color: var(--brand-dark-gray) !important;
    border: 1px solid var(--brand-dark-gray) !important;
}
.gm-options-button:hover,
.gm-options-button:focus,
.bb-booking-mode-btn:hover,
.bb-booking-mode-btn:focus {
    background: var(--brand-white) !important;
    color: var(--brand-dark-gray) !important;
    border-color: var(--brand-red) !important;
}
.gm-options-button.gm-active,
.gm-options-button[aria-pressed="true"],
.gm-options-button.active,
.bb-booking-mode-btn.active,
.bb-booking-mode-btn[aria-pressed="true"] {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-red) !important;
}
.gm-options-choice.gm-active {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-red) !important;
}

/* ============================================================
   Date selection pills (booking flow scroller)
   ============================================================ */
.gymmaster-mobile-day-pill,
.bb-date-pill {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border: 2px solid var(--brand-black) !important;
}
.gymmaster-mobile-day-pill .gm-pill-weekday,
.gymmaster-mobile-day-pill .gm-pill-day,
.gymmaster-mobile-day-pill .gm-pill-month {
    color: var(--brand-black) !important;
}
.gymmaster-mobile-day-pill:hover,
.gymmaster-mobile-day-pill:focus,
.bb-date-pill:hover,
.bb-date-pill:focus {
    background: var(--brand-white) !important;
    border-color: var(--brand-black) !important;
}
.gymmaster-mobile-day-pill.unavailable,
.gymmaster-mobile-day-pill[aria-disabled="true"],
.gymmaster-mobile-day-pill.disabled,
.gymmaster-mobile-day-pill.past,
.bb-date-pill.unavailable,
.bb-date-pill.disabled {
    background: var(--brand-dark-gray) !important;
    color: var(--brand-white) !important;
    border: 2px solid var(--brand-black) !important;
    cursor: not-allowed !important;
}
.gymmaster-mobile-day-pill.unavailable .gm-pill-weekday,
.gymmaster-mobile-day-pill.unavailable .gm-pill-day,
.gymmaster-mobile-day-pill.unavailable .gm-pill-month,
.gymmaster-mobile-day-pill.past .gm-pill-weekday,
.gymmaster-mobile-day-pill.past .gm-pill-day,
.gymmaster-mobile-day-pill.past .gm-pill-month {
    color: var(--brand-white) !important;
}
.gymmaster-mobile-day-pill.selected,
.bb-date-pill.selected,
.bb-date-pill.active {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border: 2px solid var(--brand-black) !important;
}
.gymmaster-mobile-day-pill.selected .gm-pill-weekday,
.gymmaster-mobile-day-pill.selected .gm-pill-day,
.gymmaster-mobile-day-pill.selected .gm-pill-month {
    color: var(--brand-white) !important;
}

/* ============================================================
   Cage selection (available / unavailable / selected)
   ============================================================ */
.bb-cage-pill,
.bb-cage-tile,
.gym-cage-pill,
.gymmaster-cage-cell {
    background: var(--brand-white) !important;
    color: var(--brand-black) !important;
    border: 1px solid var(--brand-black) !important;
}
.bb-cage-pill.unavailable,
.bb-cage-tile.unavailable,
.gym-cage-pill.unavailable,
.gymmaster-cage-cell.unavailable,
.bb-cage-pill[aria-disabled="true"],
.bb-cage-pill.disabled,
.gymmaster-cage-cell.disabled {
    background: var(--brand-dark-gray) !important;
    color: var(--brand-white) !important;
    border: 1px solid var(--brand-black) !important;
    cursor: not-allowed !important;
}
.bb-cage-pill.selected,
.bb-cage-pill.active,
.bb-cage-tile.selected,
.bb-cage-tile.active,
.gym-cage-pill.selected,
.gym-cage-pill.active,
.gymmaster-cage-cell.selected,
.gymmaster-cage-cell.active {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border: 1px solid var(--brand-black) !important;
}

/* ============================================================
   Duration selection toggle (30 / 60)
   ============================================================ */
.paid-duration-btn,
.bb-duration-btn {
    background: var(--brand-white) !important;
    color: var(--brand-dark-gray) !important;
    border: 2px solid var(--brand-dark-gray) !important;
}
.paid-duration-btn:hover,
.paid-duration-btn:focus,
.bb-duration-btn:hover,
.bb-duration-btn:focus {
    border-color: var(--brand-red) !important;
}
.paid-duration-btn.selected,
.paid-duration-btn.active,
.paid-duration-btn[aria-pressed="true"],
.bb-duration-btn.selected,
.bb-duration-btn.active,
.bb-duration-btn[aria-pressed="true"] {
    background: var(--brand-red) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-red) !important;
}