/* ------------------------------------------------------------------ */
/* GFtheme / BUQ SDK styles — consolidated from the 3 WordPress blocks */
/* used in production (Calendario/Compra, Meeting/Membresías,          */
/* Icono+Colores). Variables tuned to the EIGHT FLOW palette.          */
/* ------------------------------------------------------------------ */

:root {
  /* EIGHT FLOW palette — warm light: gold accent on cream, dark-brown text */
  --sdk-main-color: #732a82;        /* Gold — primary actions */
  --sdk-hover-color: #5d2069;       /* Darker gold — hover */
  --sdk-text-color: #2a1633;        /* Dark brown — text inside SDK on light */
  --sdk-background-color: #ffffff;  /* Warm off-white — cards/items */
  --sdk-secondary-color: #ffffff;   /* White — text/icons on the violet main color */
  --sdk-modal-bg: #ffffff;          /* Warm off-white — every SDK popup card */
  --sdk-fancy-bg: #ffffff;          /* White — the fancy checkout/calendar modal */
  --sdk-accent-blue: #9d4edd;       /* Slate blue — Eight Flow secondary accent (hover) */
  --sdk-input-bg: #ffffff;          /* Clean white — input fill in SDK modals */
  --sdk-border-color: #e6dcf5;      /* Warm tan hairline borders in SDK modals */
  --sdk-backdrop-bg: rgba(42, 22, 51, 0.55); /* Dark-brown veil behind every modal */
  --sdk-modal-radius: 18px;         /* Card corner radius */
  --sdk-input-radius: 12px;         /* Input corner radius (brand: rounded) */
  --sdk-input-padding: 13px 16px;   /* Input inner padding (SDK ships them flush) */
  --sdk-placeholder-color: rgba(42, 22, 51, 0.5); /* Muted brown placeholder */
}

.text-danger .formErrors { color: red; }

/* ============================================================ */
/* SDK INIT FLASH FIX                                           */
/* Fancybox mounts its container at SDK init and briefly shows  */
/* it with the default "inset" close animation (4-corner fade). */
/* Hide it until Fancybox marks it open.                        */
/* ============================================================ */
.fancybox-container:not(.fancybox-is-open) {
  display: none !important;
}

/* ============================================================ */
/* CALENDAR                                                     */
/* ============================================================ */

/* Ensure the calendar container is always tall enough during load */
[data-gf-theme="meetings-calendar"] {
  position: relative;
  min-height: 440px;
}

/* Calendar loader — TRANSPARENT background with the SDK's three brand-tinted
   dots centered (same approach as the drifter / origen themes). An opaque
   skeleton box rendered as a white/empty block on first open ("no se ve bien
   la primera vez"); a transparent loader with visible violet dots reads as a
   clean, intentional loading state over the page background. Scoped to
   meetings-calendar so purchase-button / other SDK sections are unaffected. */
[data-gf-theme="meetings-calendar"] .GFSDK-com-loading {
  position: absolute !important;
  inset: 0 !important;
  min-height: 440px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Tint the SDK's three loading dots to the brand violet so they're visible
   against the light page (mirrors drifter/origen). */
.GFSDK-com-loading__dot {
  background-color: var(--sdk-main-color) !important;
  box-shadow: 0 0 8px rgba(115, 42, 130, 0.45);
  width: 12px !important;
  height: 12px !important;
}

.GFSDK-c-Calendar__header_vertical,
.GFSDK-e-product__head h3,
.GFSDK-e-product__head p,
.GFSDK-e-product__body h3,
.GFSDK-e-product__body p,
.GFSDK-e-meeting__body > .this-time,
.GFSDK-e-meeting__body > .this-staff,
.GFSDK-e-meeting__body > .this-location,
.GFSDK-e-form__label,
.GFSDK-e-form__select,
.GFSDK-c-filter__item {
  color: var(--sdk-text-color);
}

.GFSDK-c-filter__item {
  border-color: var(--sdk-text-color);
}

/* Meeting cards — !important needed: SDK injects its own <style> after this
   file with identical selectors (#faf7ff bg), so we must out-prioritize it. */
.GFSDK-c-Calendar__item.GFSDK-e-meeting {
  background: var(--sdk-background-color) !important;
  color: var(--sdk-text-color) !important;
}

.GFSDK-e-meeting__body > .this-staff {
  text-transform: capitalize;
}

.horizontal .GFSDK-e-meeting,
.vertical .vertical-calendar--mobile .GFSDK-e-meeting {
  background-color: var(--sdk-background-color) !important;
}

.horizontal .GFSDK-e-meeting__body .this-staff,
.vertical .vertical-calendar--mobile .GFSDK-e-meeting__body .this-staff {
  font-size: 15px;
  color: var(--sdk-text-color);
}

/* ALL text inside a meeting/service card → force the dark-brown text color.
   On mobile the SDK injects its own <style> after this file that recolors the
   card's text (only .this-time / .this-staff / .this-location were covered
   above), so .this-availability, .this-service, .this-description and the
   header .this-time / .label-bj turned near-invisible on our warm card bg.
   Listing every text node (and prefixing with the mobile wrapper) wins the
   specificity + source-order battle on small screens. */
.GFSDK-c-Calendar__item.GFSDK-e-meeting .GFSDK-e-meeting__header,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .GFSDK-e-meeting__body,
.GFSDK-c-Calendar__item.GFSDK-e-meeting p,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .this-time,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .label-bj,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .this-availability,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .this-staff,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .this-service,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .this-location,
.GFSDK-c-Calendar__item.GFSDK-e-meeting .this-description,
.vertical-calendar--mobile .GFSDK-c-Calendar__item.GFSDK-e-meeting p,
.vertical-calendar--mobile .GFSDK-c-Calendar__item.GFSDK-e-meeting .this-time,
.vertical-calendar--mobile .GFSDK-c-Calendar__item.GFSDK-e-meeting .this-availability,
.vertical-calendar--mobile .GFSDK-c-Calendar__item.GFSDK-e-meeting .this-service,
.vertical-calendar--mobile .GFSDK-c-Calendar__item.GFSDK-e-meeting .this-location {
  color: var(--sdk-text-color) !important;
}

/* The <hr> divider inside the card — keep it a subtle brown tint, not the
   SDK's default near-white line that vanishes on the warm card. */
.GFSDK-c-Calendar__item.GFSDK-e-meeting hr {
  border: none !important;
  border-top: 1px solid color-mix(in srgb, var(--sdk-text-color) 18%, transparent) !important;
  background: transparent !important;
}

.GFSDK-e-meeting:hover {
  border-color: var(--sdk-main-color);
}

button.GFSDK-c-Calendar__body-weeksSection {
  color: var(--sdk-text-color);
  padding: 0;
}

.GFSDK-c-Calendar__day-dots li.slick-active a .this-date {
  color: var(--sdk-text-color);
  font-weight: 600;
}

.GFSDK-c-Calendar__head-vertical {
  text-align: center;
  margin-right: 0 !important;
}

.GFSDK-e-meeting:hover > hr,
.GFSDK-c-Calendar__day-dots li.slick-active a .this-number,
.GFSDK-e-form__radio > .this-radio.checked:before {
  background-color: var(--sdk-main-color);
}

.GFSDK-c-Calendar__head-vertical .GFSDK-e-form__label,
select.GFSDK-e-form__select {
  font-size: 16px;
}

.GFSDK-c-Calendar__head-vertical p.GFSDK-e-form__label {
  display: none;
}

.vertical .GFSDK-e-meeting__body .this-staff {
  font-size: 18px;
}

/* ============================================================ */
/* CALENDAR — MOBILE DARK OVERRIDE                              */
/* At the mobile breakpoint the SDK switches to a different set  */
/* of class names: .is-mobile on the body, single-dash          */
/* .GFSDK-c-Calendar__column_meeting, and wraps everything in   */
/* .vertical-calendar--mobile. Without explicit rules these     */
/* areas show the browser default white background.             */
/* ============================================================ */

/* Outer mobile wrapper and slick track/list — keep dark.
   !important required: SDK injects <style> after this file. */
.vertical-calendar--mobile,
.vertical-calendar--mobile .slick-list,
.vertical-calendar--mobile .slick-track,
.vertical-calendar--mobile .slick-slide,
.vertical-calendar--mobile .slick-slide > div {
  background-color: var(--sdk-background-color) !important;
}

/* Body weeks container in mobile mode */
.GFSDK-c-Calendar__body_weeks.is-mobile,
.GFSDK-c-Calendar__body_weeks.is-mobile .slick-list,
.GFSDK-c-Calendar__body_weeks.is-mobile .slick-track,
.GFSDK-c-Calendar__body_weeks.is-mobile .slick-slide,
.GFSDK-c-Calendar__body_weeks.is-mobile .slick-slide > div {
  background-color: var(--sdk-background-color) !important;
  color: var(--sdk-text-color) !important;
}

/* Single-dash column variant used in mobile layout */
.GFSDK-c-Calendar__column_meeting,
.GFSDK-c-Calendar__column_meeting .GFSDK-c-Calendar__item,
.GFSDK-c-Calendar__column_meeting .GFSDK-e-meeting {
  background-color: var(--sdk-background-color) !important;
  color: var(--sdk-text-color) !important;
}

/* Day label column in mobile */
.GFSDK-c-Calendar__column__day,
.GFSDK-c-Calendar__column__day a,
.GFSDK-c-Calendar__column__day .this-date,
.GFSDK-c-Calendar__column__day .this-number {
  background-color: var(--sdk-background-color) !important;
  color: var(--sdk-text-color) !important;
}

/* Day dots navigation row */
.GFSDK-c-Calendar__day-dots {
  background-color: var(--sdk-background-color) !important;
}

/* ============================================================ */
/* RESERVATION / CHECKOUT FANCY                                 */
/* ============================================================ */

#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link.TabsGafaFit--tab-link__active,
#CreateReservationFancyTemplate .productSelection__content .SelectProductsStepNav ul > li.active div,
#CreateReservationFancyTemplate .productSelection__content .products-container .GfStore__ProductsItems .add-to-card {
  background-color: var(--sdk-text-color);
}

#CreateReservationFancyTemplate .productSelection__content .SelectProductsStepNav ul > li.active div,
#CreateReservationFancyTemplate .productSelection__content .SelectProductsStepNav ul > li.active div *,
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link.TabsGafaFit--tab-link__active,
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link.TabsGafaFit--tab-link__active * {
  color: var(--sdk-main-color) !important;
}

#CreateReservationFancyTemplate .GfStore__ProductsItems .add-to-card {
  color: #ffffff !important;
}

#CreateReservationFancyTemplate .productSelection__content .SelectProductsStepNav ul > li div {
  border-radius: 0;
}

#CreateReservationFancyTemplate .productSelection__content .SelectProductsStepNav ul > li.active div {
  border-bottom: 1px solid;
  border-radius: 0;
}

#CreateReservationFancyTemplate .GfStore__ProductsItems .add-to-card:hover,
#CreateReservationFancyTemplate .productSelection__content .SelectProductsStepNav ul > li:hover div,
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link:hover {
  color: var(--sdk-fancy-bg);
}

#CreateReservationFancyTemplate .touchpoint .gs-checkOut {
  color: #ffffff;
  font-size: 15px;
  text-transform: uppercase;
  background-color: var(--sdk-text-color);
  border: 2px solid var(--sdk-text-color);
  border-radius: 0;
}

#CreateReservationFancyTemplate .touchpoint .gs-checkOut:hover {
  color: var(--sdk-fancy-bg);
  background-color: var(--sdk-accent-blue);
}

#CreateReservationFancyTemplate .productSelection__content .SelectProductsStepNav ul > li:hover div,
#CreateReservationFancyTemplate .productSelection__content .products-container .GfStore__ProductsItems .add-to-card:hover,
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link:hover {
  background-color: var(--sdk-accent-blue);
}

#CreateReservationFancyTemplate .ReservationBody--flex {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

div#CreateReservationFancyTemplate,
.search-products input {
  font-size: 14px;
  padding-top: 10px;
}

#CreateReservationFancyTemplate .search-products input[type="text"] {
  background-color: transparent;
  font-size: 14px;
}

#CreateReservationFancyTemplate .gs-summary__header {
  background-color: var(--sdk-main-color) !important;
  color: #ffffff !important;
  padding: 12px;
}
#CreateReservationFancyTemplate .gs-summary__header h3,
#CreateReservationFancyTemplate .gs-summary__header span,
#CreateReservationFancyTemplate .gs-summary__header svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

#CreateReservationFancyTemplate .paymentSelection__resume .gs-summary__body {
  max-width: 95%;
}

#CreateReservationFancyTemplate .gs-PromotionBox {
  grid-template-columns: 1fr;
}

#CreateReservationFancyTemplate .gs-summary__footer .gs-totalPurchase__total {
  font-size: 1.6em;
}

#CreateReservationFancyTemplate .gs-button.is-return {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.gs-cartItem__header h4 {
  font-size: 14px;
}

.gs-table th,
.gs-table td {
  border: 0;
  background: transparent !important;
}

/* Inner checkout/payment panels. The SDK ships these structural wrappers
   (payment-method selector, tabs strip, promotion box, terms, order summary
   body/footer, totals, touchpoint) with a DARK fill, so once we forced the
   modal text to dark-brown the result was dark-on-dark text on the
   "Selecciona un método de pago" step. Repaint every structural wrapper to
   transparent so the light card surface shows through. The bronze accents
   (summary HEADER, active tab, checkout button, add-to-card) keep their own
   fills set elsewhere — they are deliberately omitted from this list. */
#CreateReservationFancyTemplate .SelectPaymentStep,
#CreateReservationFancyTemplate .SelectPaymentStep--left,
#CreateReservationFancyTemplate .SelectPaymentStep--right,
#CreateReservationFancyTemplate .paymentSelection,
#CreateReservationFancyTemplate .paymentSelection__method,
#CreateReservationFancyTemplate .paymentSelection__resume,
#CreateReservationFancyTemplate .PaymentSelection,
#CreateReservationFancyTemplate .gs-paymentMethod,
#CreateReservationFancyTemplate .gs-paymentMethod__header,
#CreateReservationFancyTemplate .gs-paymentMethod__body,
#CreateReservationFancyTemplate .TabsGafaFit,
#CreateReservationFancyTemplate .TabsGafaFit--menu,
#CreateReservationFancyTemplate .gs-PromotionBox,
#CreateReservationFancyTemplate .gs-PromotionBox__container,
#CreateReservationFancyTemplate .gs-PromotionBox__header,
#CreateReservationFancyTemplate .gs-terms,
#CreateReservationFancyTemplate .gs-summary__body,
#CreateReservationFancyTemplate .gs-summary__footer,
#CreateReservationFancyTemplate .gs-totalPurchase,
#CreateReservationFancyTemplate .gs-totalPurchase__content,
#CreateReservationFancyTemplate .touchpoint,
#CreateReservationFancyTemplate .ThankyouStep,
#CreateReservationFancyTemplate .ProductSummary,
#CreateReservationFancyTemplate .gs-cartItem,
#CreateReservationFancyTemplate .gs-cartItem__header,
#CreateReservationFancyTemplate .MapMeeting,
#CreateReservationFancyTemplate .MapMeeting--left,
#CreateReservationFancyTemplate .MapMeeting--right {
  background-color: transparent !important;
}

/* Inactive payment tabs: transparent fill + a warm hairline so they read on
   the light card. The active tab (two-class selector above) out-specifies
   this and keeps its bronze fill. */
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link:not(.TabsGafaFit--tab-link__active) {
  background-color: transparent !important;
  border: 1px solid var(--sdk-border-color) !important;
}

/* ============================================================ */
/* PRODUCTS / MEMBERSHIPS                                       */
/* ============================================================ */

.GFSDK-e-product {
  border: 1px solid var(--sdk-border-color);
  border-radius: 30px;
  background-color: transparent;
  width: 95%;
}

.GFSDK-e-product__head,
.GFSDK-e-product__body {
  color: var(--sdk-text-color);
}

.GFSDK-e-product__body .this-price p {
  color: var(--sdk-text-color);
}

/* Slick pagination inside SDK carousels */
.slick-slider .GFSDK-e-pagination__controls {
  z-index: 10;
}

.slick-slider .GFSDK-e-pagination__controls button {
  padding: 10px;
  background-color: transparent;
  display: contents;
}

.slick-slider .GFSDK-e-pagination__controls:not(.slick-disabled) button {
  color: var(--sdk-text-color);
  fill: var(--sdk-text-color);
}

.slick-slider .GFSDK-e-pagination__controls.slick-disabled button {
  color: #c9bedd;
  fill: #c9bedd;
}

/* ============================================================ */
/* FANCY POPUP — global resets                                  */
/* ============================================================ */

[data-gf-theme="fancy"] [type="button"],
[data-gf-theme="fancy"] [type="submit"],
[data-gf-theme="fancy"] button {
  border: none;
}

[data-gf-theme="fancy"] input[type="checkbox"]:not([type="button"]):not([type="submit"]) {
  padding: 0;
}

[data-gf-theme="fancy"] button {
  padding: 5px;
}

.modal-register__container {
  padding: 30px;
}

/* ============================================================ */
/* PROFILE                                                      */
/* ============================================================ */

.profile-tabs #ProfileTabs > .tab-content::-webkit-scrollbar-thumb,
.profile-tabs #ProfileTabs > .nav-tabs > li .GFSDK-c-tabs__link:hover:before,
.profile-user__tools .profile-user__tools-container {
  background-color: var(--sdk-main-color);
}

.profile-tabs #ProfileTabs > .nav-tabs > li.active .GFSDK-c-tabs__link:before {
  background-color: var(--sdk-main-color) !important;
}

.profile-user__data {
  background-color: transparent;
}

.profile-info {
  border: 0 !important;
}

.profile-user__content {
  border: 0 !important;
}

.profile-tabs {
  border-radius: 0 !important;
}

ul.GFSDK-c-tabs.nav.nav-tabs {
  width: 100%;
}

li.GFSDK-c-tabs__items div {
  font-size: 15px !important;
  margin-top: 10px !important;
  text-align: center !important;
}

.profile-tabs #ProfileTabs > .nav-tabs > li .GFSDK-c-tabs__link,
.GFSDK-c-profile__section.is-futureClass .is-empty h3,
.GFSDK-c-profile__section.is-futureClass .is-empty p,
.GFSDK-c-profile__section.is-pastClass .is-empty h3,
.GFSDK-c-profile__section.is-pastClass .is-empty p,
.GFSDK-c-profile__section.is-buyOverall .is-empty h3,
.GFSDK-c-profile__section.is-buyOverall .is-empty p {
  color: var(--sdk-text-color);
}

.modal-profile .GFSDK-e-buttons.is-primary[type="submit"]:hover,
.modal-profile .GFSDK-e-buttons.is-primary[type="submit"] {
  background-color: var(--sdk-main-color);
}

#ProfileTabs .purchase-item,
#ProfileTabs .futureClasses-item,
#ProfileTabs .pastClass-item {
  background-color: transparent;
}

#ProfileTabs .GFSDK-e-buttons__close .svg-icon {
  color: var(--sdk-main-color);
}

#ProfileTabs .GFSDK-e-buttons__close:hover .svg-icon {
  color: var(--sdk-text-color);
}

#ProfileTabs .UserCredit__credits,
#ProfileTabs .UserMembership__credits {
  background-color: var(--sdk-main-color);
}

.modal-profile__body .profile-user__name {
  font-size: 18px;
}

#ProfileTabs-pane-1 button.GFSDK-e-buttons__close {
  padding: unset;
  border-radius: 0 5px 0 0;
}

#ProfileTabs-pane-1 .GFSDK-e-buttons__close .svg-icon {
  position: absolute;
  right: 5px;
  max-width: 10px;
}

/* Logout icon on the ivory tools bar — needs dark color for contrast
   (the bar bg is --sdk-main-color = #ece5f5; inherited color matches = invisible) */
.profile-user__tools-container .svg-icon,
.profile-user__tools-container svg,
.profile-user__tools-container svg path,
.this-logOut .svg-icon,
.this-logOut svg,
.this-logOut svg path {
  color: var(--sdk-secondary-color) !important;
  fill: var(--sdk-secondary-color) !important;
}

.CellGrid--position[data-positiontype="coach"] {
  border-radius: 100%;
  background-size: cover;
  background-position-y: top;
  height: unset !important;
  aspect-ratio: 1/1;
}

/* Profile modal inner panels. Same trap as the checkout: the modal CARD is
   light, but the SDK paints the inner content wrapper, tab bar, tab panes and
   profile sections with their OWN dark fills, so the body reads as black with
   dark-brown text. Repaint every structural wrapper transparent so the light
   card shows through. Accent elements (gold tools bar, credits chips,
   active-tab indicator) are coloured elsewhere and deliberately excluded. */
.modal-profile .profile-content,
.modal-profile .modal-profile__content,
.modal-profile .profile,
.modal-profile .profile-user,
.modal-profile .profile-user__header,
.modal-profile .profile-user__content,
.modal-profile .profile-info,
.modal-profile .profile-tabs,
.modal-profile #ProfileTabs,
.modal-profile #ProfileTabs > .tab-content,
.modal-profile #ProfileTabs .tab-content,
.modal-profile #ProfileTabs .tab-pane,
.modal-profile .GFSDK-c-profile__section,
.modal-profile ul.GFSDK-c-tabs.nav.nav-tabs,
.modal-profile .profile-tabs #ProfileTabs > .nav-tabs > li .GFSDK-c-tabs__link {
  background-color: transparent !important;
}

/* ============================================================ */
/* LOGIN / REGISTER POPUP                                       */
/* ============================================================ */

.modal-login__container::before,
.modal-register__container::before {
  content: "";
  display: block;
  width: 320px;
  height: 100px;
  margin: 10px auto 20px auto;
  /* Relative URL (no leading slash): this CSS is served at /cardio-sculpt/gftheme.css,
     so "logo-modal.png" resolves to /cardio-sculpt/logo-modal.png. A leading slash
     would hit the domain root and 404 under the artifact base path. */
  background: url("logo-modal.png") center / contain no-repeat;
}

/* Generic primary buttons */
.GFSDK-e-buttons.is-primary,
button.gs-checkOut,
.profile-user__tools {
  background-color: var(--sdk-text-color);
  border: 0 !important;
}

/* ============================================================ */
/* PRIMARY ACTION BUTTONS — bronze background + ivory text      */
/* High specificity + !important to defeat Tailwind preflight   */
/* and any inline/inherited styles inside the fancy modals.     */
/* ============================================================ */

button.gs-checkOut,
button.add-to-card,
.GfStore__ProductsItems .add-to-card,
.GFSDK-e-buttons.is-primary,
[data-gf-theme="fancy"] button.gs-checkOut,
[data-gf-theme="fancy"] button.add-to-card,
[data-gf-theme="fancy"] .GFSDK-e-buttons.is-primary {
  background-color: var(--sdk-text-color) !important;
  color: #ffffff !important;
  border: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

button.gs-checkOut:hover:not(:disabled),
button.add-to-card:hover,
.GfStore__ProductsItems .add-to-card:hover,
.GFSDK-e-buttons.is-primary:hover,
[data-gf-theme="fancy"] button.gs-checkOut:hover:not(:disabled),
[data-gf-theme="fancy"] button.add-to-card:hover {
  background-color: var(--sdk-accent-blue) !important;
  color: var(--sdk-fancy-bg) !important;
  opacity: 1;
}

/* Disabled state — keep contrast readable instead of bronze-on-bronze */
button.gs-checkOut:disabled,
button.gs-checkOut[disabled],
[data-gf-theme="fancy"] button.gs-checkOut:disabled,
[data-gf-theme="fancy"] button.gs-checkOut[disabled] {
  background-color: #e6dcf5 !important;
  color: #6b5b85 !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

/* ============================================================ */
/* SDK MODAL / POPUP THEMING — single source of truth          */
/* Covers EVERY buq.partners popup: login, register, password   */
/* recovery, profile, and the fancy checkout                    */
/* (#CreateReservationFancyTemplate). The SDK ships them white;  */
/* the brand is dark, so we repaint every layer — overlay,      */
/* frame, card, headings, inputs, links, close — ONLY through    */
/* the --sdk-* vars in :root, so colours stay consistent and     */
/* tunable in one place. NEVER set width/padding on             */
/* [data-gf-theme="fancy"] (it shrinks the calendar modal).     */
/* ============================================================ */

/* Overlay behind every modal (the SDK default is a light blue-grey). */
.modal-backdrop,
.fancybox-bg {
  background-color: var(--sdk-backdrop-bg) !important;
  opacity: 1 !important;
}

/* Frame wrappers stay transparent so only the rounded card shows — this
   is what "make the WHOLE fancy dark" needs, not just the inner container. */
.modal-content,
.modal-dialog {
  background-color: transparent !important;
  border: 0 !important;
}

/* The card surface — dark + brand radius, for every popup type. */
.modal-login__container,
.modal-register__container,
.modal-password__container,
.modal-profile,
.modal-profile__container,
.modal-profile__body,
.fancybox-content,
#CreateReservationFancyTemplate {
  background-color: var(--sdk-modal-bg) !important;
  color: var(--sdk-text-color) !important;
  border-radius: var(--sdk-modal-radius) !important;
}

/* The fancy checkout/calendar modal uses the SITE cream (#f3eefb) as its
   surface so it reads as part of the site, not an off-white card. Its inner
   panels are repainted transparent above, so they inherit this cream; the text
   inside is already forced dark-brown via the FancyTemplate text rule below. */
#CreateReservationFancyTemplate {
  background-color: var(--sdk-fancy-bg) !important;
}

/* Text: force light on the dark card. login/register/password/profile use a
   `*` catch-all (their primary buttons out-specify it). The fancy uses an
   explicit tag list that DELIBERATELY omits <a>/<button> so the checkout
   button keeps its beige fill (an ID-level `*` would override it). */
.modal-login__container, .modal-login__container *,
.modal-register__container, .modal-register__container *,
.modal-password__container, .modal-password__container *,
.modal-profile, .modal-profile *,
.modal-profile__container, .modal-profile__container *,
#CreateReservationFancyTemplate h1,
#CreateReservationFancyTemplate h2,
#CreateReservationFancyTemplate h3,
#CreateReservationFancyTemplate h4,
#CreateReservationFancyTemplate h5,
#CreateReservationFancyTemplate p,
#CreateReservationFancyTemplate span,
#CreateReservationFancyTemplate label,
#CreateReservationFancyTemplate li,
#CreateReservationFancyTemplate td,
#CreateReservationFancyTemplate th,
#CreateReservationFancyTemplate div {
  color: var(--sdk-text-color) !important;
}

/* Modal headings ("Iniciar sesión", "Recuperar contraseña", "Crear cuenta")
   live in .modal-*__header as <h4 class="section-title container modal-title">
   and the SDK paints them near-black. The SDK stylesheet loads AFTER this file
   at EQUAL specificity, so out-specify it (element + multiple classes). */
.modal-login__header, .modal-login__header *,
.modal-register__header, .modal-register__header *,
.modal-password__header, .modal-password__header *,
.modal-profile__header, .modal-profile__header *,
.modal-header, .modal-header * {
  color: var(--sdk-text-color) !important;
}
h4.section-title.container.modal-title,
.modal-header h4.section-title.modal-title,
.modal-login__header h4.section-title.modal-title,
.modal-register__header h4.section-title.modal-title,
.modal-password__header h4.section-title.modal-title,
.modal-profile__header h4.section-title.modal-title {
  color: var(--sdk-text-color) !important;
}

/* Footer nav links ("¿Olvidaste tu contraseña?", "¿Aún no tienes una cuenta?")
   — readable brown + underline on the light card (gold-on-cream was too
   faint); gold accent on hover. */
.modal-login__footer a,
.modal-register__footer a,
.modal-password__footer a {
  color: var(--sdk-text-color) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  cursor: pointer;
}
.modal-login__footer a:hover,
.modal-register__footer a:hover,
.modal-password__footer a:hover {
  color: var(--sdk-main-color) !important;
}

/* Close icons. login/register/password sit on the dark card → light icon
   (plus the fancybox close button); profile close sits on the bronze tools
   bar → white. */
.modal-login__close,
.modal-login__close .svg-icon,
.modal-register__close,
.modal-register__close .svg-icon,
.modal-password__close,
.modal-password__close .svg-icon,
.fancybox-button,
.fancybox-button svg,
.fancybox-button svg path {
  color: var(--sdk-text-color) !important;
  fill: var(--sdk-text-color) !important;
  stroke: var(--sdk-text-color) !important;
}

.modal-profile__close {
  background-color: transparent !important;
  border: 0 !important;
}
.modal-profile__close,
.modal-profile__close .svg-icon,
.modal-profile__close svg {
  color: var(--sdk-text-color) !important;
  fill: var(--sdk-text-color) !important;
}
.modal-profile__close:hover .svg-icon,
.modal-profile__close:hover svg {
  color: var(--sdk-text-color) !important;
  fill: var(--sdk-text-color) !important;
}

/* Inputs — dark fill, brand rounding + comfortable padding (the SDK ships
   them square and flush). */
.modal-login__container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.modal-register__container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.modal-password__container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.modal-profile__container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.modal-login__container select,
.modal-register__container select,
.modal-password__container select,
.modal-profile__container select,
.modal-login__container textarea,
.modal-register__container textarea,
.modal-password__container textarea,
.modal-profile__container textarea,
#CreateReservationFancyTemplate input[type="text"],
#CreateReservationFancyTemplate input[type="email"],
#CreateReservationFancyTemplate input[type="password"],
#CreateReservationFancyTemplate input[type="tel"],
#CreateReservationFancyTemplate input[type="number"],
#CreateReservationFancyTemplate select,
#CreateReservationFancyTemplate textarea {
  background-color: var(--sdk-input-bg) !important;
  color: var(--sdk-text-color) !important;
  border: 1px solid var(--sdk-border-color) !important;
  border-radius: var(--sdk-input-radius) !important;
  padding: var(--sdk-input-padding) !important;
}

.modal-login__container input::placeholder,
.modal-register__container input::placeholder,
.modal-password__container input::placeholder,
.modal-profile__container input::placeholder,
#CreateReservationFancyTemplate input::placeholder,
#CreateReservationFancyTemplate textarea::placeholder {
  color: var(--sdk-placeholder-color) !important;
}

/* Summary header inside reservation — keep bronze accent but ensure
   its inner text stays readable on bronze background. */
#CreateReservationFancyTemplate .gs-summary__header,
#CreateReservationFancyTemplate .gs-summary__header * {
  color: var(--sdk-secondary-color) !important;
}

/* ============================================================ */
/* Header profile icon — replace SDK's default key-shaped SVG    */
/* with a clean user-silhouette icon in a bronze ring. The SDK   */
/* injects a fixed <svg> we can't change, so we hide it and      */
/* render our own icon via a CSS mask on the button container.   */
/* ============================================================ */
[data-gf-theme="login-register"] .GFSDK-c-login__menu,
[data-gf-theme="login-register"] .GFSDK-c-login__menu-nav,
[data-gf-theme="login-register"] .GFSDK-c-login__menu-nav > div {
  display: inline-flex;
  align-items: center;
  background: transparent;
  padding: 0;
  margin: 0;
}

[data-gf-theme="login-register"] .GFSDK-e-buttons.is-primary {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  border-radius: 9999px !important;
  border: 1px solid currentColor !important; /* follows header color: white at top, violet on scroll */
  background-color: transparent !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: inherit !important;
  transition: border-color 200ms ease, background-color 200ms ease,
    transform 200ms ease;
}

[data-gf-theme="login-register"] .GFSDK-e-buttons.is-primary:hover {
  border-color: var(--sdk-main-color) !important;
  background-color: rgba(115, 42, 130, 0.14) !important;
}

/* Hide the SDK's built-in (key-shaped) SVG entirely. */
[data-gf-theme="login-register"] .GFSDK-e-buttons.is-primary > svg,
[data-gf-theme="login-register"] .GFSDK-e-buttons.is-primary .svg-icon {
  display: none !important;
}

/* Render our own user icon via CSS mask (lucide-style user). */
[data-gf-theme="login-register"] .GFSDK-e-buttons.is-primary::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0 1 16 0v1'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0 1 16 0v1'/></svg>")
    center / contain no-repeat;
}

.GFSDK-e-buttons.not-logged.is-primary,
.GFSDK-e-buttons.not-logged.is-primary:hover {
  background-color: transparent;
}

/* ============================================================ */
/* CHECKBOXES — bronze accent when checked                      */
/* ============================================================ */

[data-gf-theme="fancy"] input[type="checkbox"],
.fancybox-content input[type="checkbox"],
.gs-terms input[type="checkbox"],
.modal-login__container input[type="checkbox"],
.modal-register__container input[type="checkbox"],
.modal-profile__container input[type="checkbox"],
#CreateReservationFancyTemplate input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid grey;
  border-radius: 50%;
  background-color: #ffffff !important;
  background-image: none !important;
  display: inline-block;
  height: 15px;
  width: 15px;
  min-width: 15px;
  outline: none;
  margin: 0;
  margin-right: 0.5rem;
  left: initial;
  transition: 0.3s ease-in-out;
  transition-property: background-color;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Strip the SDK's stray check glyph pseudo-elements so the box paints clean
   (ported from the osmos theme — the SDK ships a ::after/::before tick that
   renders as noise over the appearance:none box). */
[data-gf-theme="fancy"] input[type="checkbox"]::after,
[data-gf-theme="fancy"] input[type="checkbox"]::before,
.fancybox-content input[type="checkbox"]::after,
.fancybox-content input[type="checkbox"]::before,
.gs-terms input[type="checkbox"]::after,
.gs-terms input[type="checkbox"]::before,
#CreateReservationFancyTemplate input[type="checkbox"]::after,
#CreateReservationFancyTemplate input[type="checkbox"]::before {
  content: none !important;
  display: none !important;
}

/* Checked checkbox — brown fill. appearance:none above makes background-color
   the property that paints the box, so this is what turns it brown on click. */
[data-gf-theme="fancy"] input[type="checkbox"]:checked,
.fancybox-content input[type="checkbox"]:checked,
.gs-terms input[type="checkbox"]:checked,
.modal-login__container input[type="checkbox"]:checked,
.modal-register__container input[type="checkbox"]:checked,
.modal-profile__container input[type="checkbox"]:checked,
#CreateReservationFancyTemplate input[type="checkbox"]:checked {
  background-color: var(--sdk-text-color) !important;
  border-color: var(--sdk-text-color) !important;
}

/* Promotion / discount code box — bronze check icon when toggled */
.gs-PromotionBox__container .iconCheckout {
  color: #c9bedd;
  width: 20px;
  height: 20px;
  transition: color 0.15s ease;
}

.gs-PromotionBox__container.PromotionBox--content__checked .iconCheckout,
.gs-PromotionBox__header input[type="checkbox"]:checked ~ .iconCheckout {
  color: var(--sdk-main-color) !important;
  fill: var(--sdk-main-color) !important;
}

.gs-PromotionBox__header label {
  cursor: pointer;
  margin-left: 6px;
}

/* Generic radio buttons — bronze when selected */
[data-gf-theme="fancy"] input[type="radio"],
#CreateReservationFancyTemplate input[type="radio"] {
  accent-color: var(--sdk-main-color);
  cursor: pointer;
}

.GFSDK-e-form__radio > .this-radio.checked,
.GFSDK-e-form__radio > .this-radio.checked:before {
  background-color: var(--sdk-main-color) !important;
  border-color: var(--sdk-main-color) !important;
}

/* ============================================================ */
/* MOBILE RESPONSIVE — SDK modals & calendar                    */
/* ============================================================ */

@media (max-width: 768px) {
  /* Login / register / profile containers — full width, smaller padding */
  .modal-login__container,
  .modal-register__container,
  .modal-profile__container {
    padding: 20px !important;
    max-width: 100vw;
    width: 100%;
    box-sizing: border-box;
  }

  .modal-login__container::before,
  .modal-register__container::before {
    width: 160px;
    height: 70px;
    margin: 0 auto 16px auto;
  }

  .modal-login__body .GFSDK-e-form__section,
  .modal-register__body .GFSDK-e-form__section {
    margin-bottom: 12px;
  }

  .modal-login__footer .nav ul,
  .modal-register__footer .nav ul {
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 12px 0 0;
  }

  /* Reservation fancy — stack columns vertically on mobile */
  #CreateReservationFancyTemplate {
    padding: 12px !important;
  }

  #CreateReservationFancyTemplate .ReservationBody--flex {
    flex-direction: column !important;
    gap: 16px;
  }

  #CreateReservationFancyTemplate .MapMeeting,
  #CreateReservationFancyTemplate .MapMeeting--left,
  #CreateReservationFancyTemplate .MapMeeting--right,
  #CreateReservationFancyTemplate .productSelection__content,
  #CreateReservationFancyTemplate .paymentSelection__resume {
    width: 100% !important;
    max-width: 100%;
  }

  /* Step nav scroll horizontally if it overflows */
  #CreateReservationFancyTemplate .SelectProductsStepNav ul {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }

  #CreateReservationFancyTemplate .SelectProductsStepNav ul > li {
    flex: 0 0 auto;
  }

  /* Action buttons full-width and easier to tap on mobile */
  #CreateReservationFancyTemplate .touchpoint .gs-checkOut,
  button.gs-checkOut,
  button.add-to-card {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
  }

  /* Calendar — switch filter row to wrap on small screens */
  .GFSDK-c-filter {
    flex-wrap: wrap;
    gap: 8px;
  }

  .GFSDK-c-filter__item {
    flex: 1 1 auto;
    font-size: 13px;
  }

  /* Vertical calendar — tighter spacing */
  .vertical .GFSDK-e-meeting,
  .vertical .vertical-calendar--mobile .GFSDK-e-meeting {
    padding: 8px;
  }

  .vertical .GFSDK-e-meeting__body .this-staff {
    font-size: 14px;
  }

  /* Profile modal — taller tabs for tap targets */
  .profile-tabs #ProfileTabs > .nav-tabs > li .GFSDK-c-tabs__link {
    min-height: 44px;
    font-size: 13px;
  }

  /* Summary card on checkout — full width */
  #CreateReservationFancyTemplate .gs-summary__header,
  #CreateReservationFancyTemplate .gs-summary__body,
  #CreateReservationFancyTemplate .gs-summary__footer {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .modal-login__container::before,
  .modal-register__container::before {
    width: 140px;
    height: 60px;
  }

  .modal-login__header h4,
  .modal-register__header h4,
  .modal-profile__header h4 {
    font-size: 18px;
  }
}

/* ============================================================ */
/* CALENDAR LOADING SKELETON                                    */
/* The SDK injects the calendar asynchronously (downloads a      */
/* ~1.3MB bundle, then fetches the catalog/availability). Until  */
/* it injects its first child node, show a shimmer so the area   */
/* never looks dead. :empty stops matching the instant the SDK   */
/* adds a child, so the skeleton disappears on its own.          */
/* ============================================================ */
[data-gf-theme="meetings-calendar"]:empty {
  display: block;
  min-height: 440px;
  border-radius: 16px;
  background-color: #efe9f7;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: gf-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes gf-skeleton-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* ============================================================ */
/* SDK LOADING OVERLAY — single clean dark veil, no spinner      */
/* While the SDK boots and fetches the catalog it covers every   */
/* purchase-button card with .GFSDK-com-loading (default: white  */
/* bg, opacity .7, plus grey dot-spinner children). On a dark    */
/* brand this reads as a white flash + a second spin animation   */
/* ("doble carga"). Fix: make the overlay fully opaque + solid   */
/* dark (so it matches the page bg), and hide all child          */
/* elements (dots/spinner) — leaving ONE clean dark veil that    */
/* appears during load and disappears when the card is ready.    */
/* Scoped only to purchase-button; the generic calendar loader   */
/* is already transparent and unaffected.                        */
/* ============================================================ */
[data-gf-theme="purchase-button"] .GFSDK-com-loading {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* ============================================================ */
/* EIGHT FLOW — "Estilo Adaptado": brand-coloured replica of the */
/* reference SDK theme. Buttons/accents use a DARK brown surface  */
/* with GOLD text and a SLATE-BLUE hover, on the cream site bg.   */
/*   dark primary bg → brown  var(--sdk-text-color)   (#2a1633)   */
/*   accent on dark  → gold   var(--sdk-main-color)   (#732a82)   */
/*   hover bg        → slate  var(--sdk-accent-blue)  (#9d4edd)   */
/*   text on hover   → cream  var(--sdk-fancy-bg)     (#f3eefb)   */
/*   light surface   → cream  var(--sdk-fancy-bg)                 */
/*   disabled        → tan    var(--sdk-border-color) (#e6dcf5)   */
/* The reference `body { ... }` rule is intentionally OMITTED:    */
/* this file loads site-wide, so restyling <body> bg + font would */
/* hijack the whole Eight Flow page, not just the SDK chrome.     */
/* The summary header, active tab, add-to-card, touchpoint        */
/* checkout and their hovers are flipped to this scheme in the    */
/* "RESERVATION / CHECKOUT FANCY" section above; the rules below   */
/* cover the selectors that did not already exist.                */
/* ============================================================ */

#CreateReservationFancyTemplate button.gs-link {
  padding: 5% !important;
  background-color: var(--sdk-text-color) !important;
  color: var(--sdk-main-color) !important;
}
#CreateReservationFancyTemplate button.gs-link:hover {
  background-color: var(--sdk-accent-blue) !important;
  color: var(--sdk-fancy-bg) !important;
}

#CreateReservationFancyTemplate .CombosSelector--combo--budget,
.CombosSelector--combo--budget {
  background-color: var(--sdk-text-color) !important;
  color: var(--sdk-main-color) !important;
}

/* NOTE: the reference theme's `.GFSDK-e-meeting` (service/slot card) rule is
   intentionally NOT replicated here — the calendar meeting cards already carry a
   complete, higher-specificity bespoke dark theme above (search
   `.GFSDK-c-Calendar__item.GFSDK-e-meeting`). Re-adding a generic
   `.GFSDK-e-meeting` rule here would lose the specificity battle on calendar
   cards and override the intentional dark styling everywhere else. */

#CreateReservationFancyTemplate .GFSDK-e-buttons--submit.is-primary,
.GFSDK-e-buttons--submit.is-primary {
  background-color: var(--sdk-text-color) !important;
  color: var(--sdk-main-color) !important;
  border: none !important;
}
#CreateReservationFancyTemplate .GFSDK-e-buttons--submit.is-primary:hover:enabled,
.GFSDK-e-buttons--submit.is-primary:hover:enabled {
  background-color: var(--sdk-accent-blue) !important;
  color: var(--sdk-fancy-bg) !important;
}
#CreateReservationFancyTemplate .GFSDK-e-buttons--submit.is-primary:disabled,
.GFSDK-e-buttons--submit.is-primary:disabled {
  background-color: var(--sdk-border-color) !important;
  color: var(--sdk-text-color) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

#CreateReservationFancyTemplate .CreateReservationFancy--title,
.CreateReservationFancy--title {
  color: var(--sdk-text-color) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
}

/* Confirm button on the reservation steps bar */
#CreateReservationFancyTemplate .AppReservation--steps .gs-checkOut,
.AppReservation--steps .gs-checkOut {
  background-color: var(--sdk-text-color) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: background-color 0.25s ease, transform 0.15s ease !important;
}
#CreateReservationFancyTemplate .AppReservation--steps .gs-checkOut:hover:enabled,
.AppReservation--steps .gs-checkOut:hover:enabled {
  background-color: var(--sdk-accent-blue) !important;
  color: var(--sdk-fancy-bg) !important;
}
#CreateReservationFancyTemplate .AppReservation--steps .gs-checkOut:active,
.AppReservation--steps .gs-checkOut:active {
  transform: scale(0.98) !important;
}
#CreateReservationFancyTemplate .AppReservation--steps .gs-checkOut:disabled,
.AppReservation--steps .gs-checkOut:disabled {
  background-color: var(--sdk-border-color) !important;
  color: var(--sdk-text-color) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ── User-requested SDK overrides ─────────────────────────────────────── */

/* Meeting map: let it scroll horizontally instead of squashing */
.MapMeeting--canvas {
  width: fit-content !important;
  min-width: 100% !important;
}
.gs-mapMeeting {
  overflow-x: auto !important;
}

/* Store product items: brown hairline border */
.GfStore__ProductsItems {
  border: 1px solid var(--sdk-text-color) !important;
}

/* Promotion box checked icon: brown */
#CreateReservationFancyTemplate .PromotionBox--content__checked .iconCheckout {
  color: var(--sdk-text-color) !important;
}

/* User credit counter: brown circular badge, cream credits */
.UserCredit__amount {
  background-color: #2a1633 !important;
  border-radius: 50% !important;
}
.UserCredit__credits {
  color: #f3eefb !important;
  font-weight: 600 !important;
}

/* Profile modal: white body text, brown credits on light badge */
body .modal-profile p {
  color: #ffffff !important;
}
body .modal-profile .UserCredit__credits {
  color: #ffffff !important;
}

/* ── Seat-map (MapMeeting) layout fixes ───────────────────────────────── */

/* Right summary column: stretch the summary / checkout container to fill the
   column so no lilac gap shows below it (forceFancyDark() also paints the
   column white to match the inner container). */
#CreateReservationFancyTemplate .MapMeeting--right {
  display: flex;
  flex-direction: column;
}
#CreateReservationFancyTemplate .MapMeeting--right .check-out-container,
#CreateReservationFancyTemplate .MapMeeting--right .MapMeeting__summary {
  flex: 1 1 auto;
}

/* Position number badge: TRANSPARENT (bg forced transparent in
   forceFancyDark()) so the seat background-image shows through, with a readable
   number instead of the tiny default. */
.CellGrid--position--cellNumber {
  width: auto !important;
  height: auto !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.CellGrid--position--cellNumber span {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Close (×) buttons: show only the icon, no square button box. The path uses
   fill="currentColor", so colouring the icon purple recolours the ×. */
.GFSDK-e-buttons__close {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.GFSDK-e-buttons__close .svg-icon,
.GFSDK-e-buttons__close svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--sdk-main-color) !important;
}
.GFSDK-e-buttons__close .svg-icon path,
.GFSDK-e-buttons__close svg path {
  fill: currentColor !important;
}