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

:root {
  /* MOV MOV palette mapping — beige accent on near-black, industrial greys */
  --sdk-main-color: #E2DDD2;        /* Beige — primary actions */
  --sdk-hover-color: #CFC8B9;       /* Darker beige — hover */
  --sdk-text-color: #E2DDD2;        /* Beige — text inside SDK on dark */
  --sdk-background-color: #141414;  /* Near-black — cards/items */
  --sdk-secondary-color: #1C1C1C;   /* Near-black — text on beige */
  --sdk-modal-bg: #0F0F0F;          /* Card surface for every SDK popup */
  --sdk-input-bg: #1A1A1A;          /* Input fill inside SDK modals */
  --sdk-border-color: #333333;      /* Hairline borders inside SDK modals */
  --sdk-accent-color: #E2DDD2;      /* Beige — prices / accents on dark cards */
  --sdk-backdrop-bg: rgba(11, 10, 9, 0.92); /* Overlay 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(226, 221, 210, 0.5); /* Muted beige 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                                                     */
/* ============================================================ */

/* Keep the calendar area tall during load so the layout doesn't jump. */
[data-gf-theme="meetings-calendar"] {
  position: relative;
  min-height: 440px;
}

/* LOADING — match ORIGEN: keep the SDK loader surface transparent (so it
   never flashes a hard block over our dark cards) and tint only the three
   dots beige. Applies to the calendar AND purchase-button loaders. */
.GFSDK-com-loading {
  background: transparent !important;
  background-color: transparent !important;
}
[data-gf-theme="meetings-calendar"] .GFSDK-com-loading,
[data-gf-theme="purchase-button"] .GFSDK-com-loading {
  background: transparent !important;
}
.GFSDK-com-loading__dot {
  background-color: var(--sdk-main-color) !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
  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 (#fafafa 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);
}

.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-main-color);
}

.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-main-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: #FFFFFF !important;
}

#CreateReservationFancyTemplate .GfStore__ProductsItems .add-to-card {
  color: #000 !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-main-color);
}

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

#CreateReservationFancyTemplate .touchpoint .gs-checkOut:hover {
  color: var(--sdk-main-color);
  background-color: var(--sdk-secondary-color);
  opacity: 0.7;
}

#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-hover-color);
}

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

/* Payment step ("Selecciona un método de pago" / "Forma de pago"): the SDK
   ships these inner panels with WHITE backgrounds, so the light beige text set
   globally for the fancy template becomes invisible (the "blanco y negro / texto
   que no se ve" the brand sees). Repaint every structural panel transparent so
   the dark modal surface shows through, keeping text legible. */
#CreateReservationFancyTemplate .SelectPaymentStep,
#CreateReservationFancyTemplate .SelectPaymentStep--left,
#CreateReservationFancyTemplate .SelectPaymentStep--right,
#CreateReservationFancyTemplate .paymentSelection,
#CreateReservationFancyTemplate .paymentSelection__method,
#CreateReservationFancyTemplate .paymentSelection__resume,
#CreateReservationFancyTemplate .gs-paymentMethod,
#CreateReservationFancyTemplate .gs-paymentMethod__header,
#CreateReservationFancyTemplate .gs-paymentMethod__body,
#CreateReservationFancyTemplate .PaymentSelection,
#CreateReservationFancyTemplate .gs-summary,
#CreateReservationFancyTemplate .gs-summary__body,
#CreateReservationFancyTemplate .gs-PromotionBox,
#CreateReservationFancyTemplate .gs-PromotionBox__container,
#CreateReservationFancyTemplate .gs-PromotionBox__header,
#CreateReservationFancyTemplate .gs-terms,
#CreateReservationFancyTemplate .gs-summary__footer,
#CreateReservationFancyTemplate .gs-totalPurchase,
#CreateReservationFancyTemplate .gs-totalPurchase__content,
#CreateReservationFancyTemplate .touchpoint {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
}

/* Hairline separators between payment panels so the now-transparent blocks
   still read as distinct sections on the dark surface. */
#CreateReservationFancyTemplate .gs-paymentMethod__header,
#CreateReservationFancyTemplate .gs-PromotionBox__header,
#CreateReservationFancyTemplate .gs-summary__footer {
  border-color: var(--sdk-border-color) !important;
}

/* Promotion-box icons (GiftCard / discount-code) use fill:currentColor; tie
   them to the beige text colour so they aren't black-on-dark. */
#CreateReservationFancyTemplate .gs-PromotionBox svg,
#CreateReservationFancyTemplate .gs-PromotionBox svg path,
#CreateReservationFancyTemplate .gs-paymentMethod svg,
#CreateReservationFancyTemplate .gs-paymentMethod svg path {
  fill: var(--sdk-text-color) !important;
  color: var(--sdk-text-color) !important;
}

/* Inactive payment-method tabs — transparent with a beige hairline so they're
   visible; the active tab keeps its beige fill (set above). */
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit,
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--menu {
  background-color: transparent !important;
  border: 0 !important;
}
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
  border: 1px solid var(--sdk-border-color) !important;
}

/* Active payment tab: the SDK paints its text WHITE on our beige fill (white
   on beige = invisible). Force dark text for contrast. */
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link.TabsGafaFit--tab-link__active,
#CreateReservationFancyTemplate .paymentSelection__method .TabsGafaFit--tab-link.TabsGafaFit--tab-link__active * {
  color: var(--sdk-secondary-color) !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);
}

#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;
}

/* Brand title on the booking/checkout fancy panel ("Mov Mov") ships in black,
   invisible on the dark modal surface. Force white. Scoped to the Fancy template
   so it can't recolor any same-named title elsewhere. */
#CreateReservationFancyTemplate .CreateReservationFancy--title {
  color: #FFFFFF !important;
}

/* Cart summary item box: the SDK ships it with a white background and faint grey
   text. Repaint to a dark surface with a highlighted white border and white text
   so it reads on the dark theme. Scoped to the Fancy checkout template only to
   avoid bleeding into any other cart-like surface. */
#CreateReservationFancyTemplate .gs-summary__cart .gs-cartItem,
#CreateReservationFancyTemplate .gs-cart .gs-cartItem {
  background-color: #0F0F0F !important;
  border: 1px solid #FFFFFF !important;
  border-radius: var(--sdk-modal-radius) !important;
}
#CreateReservationFancyTemplate .gs-summary__cart .gs-cartItem,
#CreateReservationFancyTemplate .gs-summary__cart .gs-cartItem *,
#CreateReservationFancyTemplate .gs-cart .gs-cartItem,
#CreateReservationFancyTemplate .gs-cart .gs-cartItem * {
  color: #FFFFFF !important;
}

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

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

.GFSDK-e-product {
  border: 1px solid #ccc;
  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: #ccc;
  fill: #ccc;
}

/* ============================================================ */
/* 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: #fff !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-secondary-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 = #E2DDD2; 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;
}

/* Coach avatar cell in the reservation/seat map.
   Circular crop + square cell via `height: unset !important; aspect-ratio: 1/1`.
   This MATCHES cardio-sculpt/kontrast (the sites where the map renders correctly
   on first open), which DO carry these two lines. Without them mov-mov's grid
   computed wrong row heights and the numbered cells
   (.CellGrid--position--cellNumber) rendered cut off the first time the modal
   opened (only fixed after a close+reopen). Keeping parity with the working
   sites makes the first open render correctly. */
.CellGrid--position[data-positiontype="coach"] {
  border-radius: 100%;
  background-size: cover;
  background-position-y: top;
  height: unset !important;
  aspect-ratio: 1/1;
}

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

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

/* Generic primary buttons */
.GFSDK-e-buttons.is-primary,
button.gs-checkOut,
.profile-user__tools {
  background-color: var(--sdk-main-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-main-color) !important;
  color: var(--sdk-secondary-color) !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-hover-color) !important;
  color: var(--sdk-secondary-color) !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: #3A3633 !important;
  color: #8B7E70 !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;
}

/* 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?")
   — beige accent across login/register/password. */
.modal-login__footer a,
.modal-register__footer a,
.modal-password__footer a {
  color: var(--sdk-main-color) !important;
  cursor: pointer;
}
.modal-login__footer a:hover,
.modal-register__footer a:hover,
.modal-password__footer a:hover {
  color: var(--sdk-hover-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: #FFFFFF !important;
  fill: #FFFFFF !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: #0B0A09 !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 rgba(226, 221, 210, 0.45) !important; /* beige ring */
  background-color: transparent !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: var(--sdk-main-color) !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(226, 221, 210, 0.12) !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: var(--sdk-main-color);
  -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"],
.modal-login__container input[type="checkbox"],
.modal-register__container input[type="checkbox"],
.modal-profile__container input[type="checkbox"],
#CreateReservationFancyTemplate input[type="checkbox"] {
  accent-color: var(--sdk-main-color);
  width: 18px;
  height: 18px;
  cursor: pointer;
  vertical-align: middle;
}

/* Checked checkbox — brand bronze fill/border */
[data-gf-theme="fancy"] 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-main-color) !important;
  border-color: var(--sdk-main-color) !important;
}

/* Promotion / discount code box — bronze check icon when toggled */
.gs-PromotionBox__container .iconCheckout {
  color: #CCCCCC;
  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;
  }

  /* Staff name (e.g. "pauchavez@buq.mx") renders black on mobile and gets
     lost on the dark card — force it white. The earlier rule
     `.vertical .vertical-calendar--mobile .GFSDK-e-meeting__body .this-staff`
     paints `color: var(--sdk-text-color)` WITHOUT !important but with high
     specificity (5 classes); to beat it in production we reuse that exact
     full selector here WITH !important so both specificity and importance win. */
  .vertical .vertical-calendar--mobile .GFSDK-e-meeting__body .this-staff,
  .GFSDK-e-meeting__body .this-staff,
  .GFSDK-e-meeting__body > .this-staff {
    color: #ffffff !important;
  }

  /* 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;
  }
}

/* ============================================================ */
/* ORIGEN-PARITY — extra SDK coverage ported from the ORIGEN     */
/* theme, recolored to MOV MOV's dark palette via the --sdk-*    */
/* vars. Covers checkout/popup surfaces the base theme didn't    */
/* reach so they read as completely as ORIGEN: the separate      */
/* (card-entry) payment fancybox step, store product items,      */
/* cart items, terms, the return button, the close (X) glyph,    */
/* robust checkboxes, and profile credit pills.                  */
/* ============================================================ */

/* Generalize the dark fancy look to ANY .fancybox-content surface so the
   card-entry (payment) step — not always wrapped in
   #CreateReservationFancyTemplate — gets the same dark chrome + readable text
   instead of flashing white boxes. */
.fancybox-content p,
.fancybox-content span,
.fancybox-content h1,
.fancybox-content h2,
.fancybox-content h3,
.fancybox-content h4,
.fancybox-content h5,
.fancybox-content label,
.fancybox-content small,
.fancybox-content li,
.fancybox-content td,
.fancybox-content th {
  color: var(--sdk-text-color) !important;
}
.fancybox-content input:not([type="checkbox"]):not([type="radio"]),
.fancybox-content select,
.fancybox-content textarea {
  background-color: var(--sdk-input-bg) !important;
  color: var(--sdk-text-color) !important;
  border-color: var(--sdk-border-color) !important;
  border-radius: var(--sdk-input-radius) !important;
}
.fancybox-content select option {
  background-color: var(--sdk-input-bg) !important;
  color: var(--sdk-text-color) !important;
}
.fancybox-content .panel,
.fancybox-content .panel-default,
.fancybox-content .card {
  background-color: var(--sdk-background-color) !important;
  border-color: var(--sdk-border-color) !important;
  color: var(--sdk-text-color) !important;
  border-radius: 16px !important;
}

/* STORE PRODUCT ITEMS — dark cards, readable text, beige price + accents,
   bordered quantity stepper. */
#CreateReservationFancyTemplate .GfStore__ProductsItems,
.GfStore__ProductsItems {
  background-color: var(--sdk-background-color) !important;
  border: 1px solid var(--sdk-border-color) !important;
  border-radius: 14px !important;
}
#CreateReservationFancyTemplate .GfStore__ProductsItems .product,
#CreateReservationFancyTemplate .GfStore__ProductsItems .product *,
.GfStore__ProductsItems .product,
.GfStore__ProductsItems .product * {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
}
.GfStore__ProductsItems .product .value,
.GfStore__ProductsItems .CombosSelector--combo--price,
.GfStore__ProductsItems .CombosSelector--combo--price * {
  color: var(--sdk-accent-color) !important;
}
.GfStore__ProductsItems .amount,
.GfStore__ProductsItems .amount span {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
}
.GfStore__ProductsItems .amount .minus,
.GfStore__ProductsItems .amount .plus {
  background-color: var(--sdk-background-color) !important;
  color: var(--sdk-text-color) !important;
  border: 1px solid var(--sdk-border-color) !important;
}
.GfStore__ProductsItems .amount .minus:hover,
.GfStore__ProductsItems .amount .plus:hover {
  background-color: var(--sdk-main-color) !important;
  color: var(--sdk-secondary-color) !important;
  border-color: var(--sdk-main-color) !important;
}

/* CART ITEMS — transparent surface, readable text, beige price, plain links. */
#CreateReservationFancyTemplate .gs-cartItem,
.gs-cartItem,
.gs-cartItem__container,
.gs-cartItem__header,
.gs-cartItem__footer {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
}
.gs-cartItem {
  border: 1px solid var(--sdk-border-color) !important;
  border-radius: 12px !important;
}
.gs-cartItem__header h4,
.gs-cartItem .gs-amount,
.gs-cartItem li,
.gs-cartItem span {
  color: var(--sdk-text-color) !important;
}
.gs-cartItem .gs-price {
  color: var(--sdk-accent-color) !important;
}
.gs-cartItem button.gs-link,
.gs-cartItem .gs-link {
  background-color: transparent !important;
  color: var(--sdk-accent-color) !important;
  border: none !important;
  padding: 0 !important;
}
.gs-cartItem button.gs-link:hover,
.gs-cartItem .gs-link:hover {
  color: var(--sdk-hover-color) !important;
  text-decoration: underline !important;
}

/* Cart / summary cart container. */
#CreateReservationFancyTemplate .gs-summary__cart,
#CreateReservationFancyTemplate .gs-cart,
.gs-summary__cart,
.gs-cart {
  background-color: var(--sdk-modal-bg) !important;
  color: var(--sdk-text-color) !important;
}

/* TERMS BLOCK — keep it transparent on the dark card. */
#CreateReservationFancyTemplate .gs-terms,
.gs-terms,
.gs-terms > div,
.gs-terms p,
.gs-terms span,
.gs-terms label {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
}

/* "Regresar al calendario" return button — keep readable text on hover
   (the SDK default flips it to an invisible colour). */
#CreateReservationFancyTemplate .gs-button.is-return,
.gs-button.is-return,
.gs-button.is-return * {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
}
#CreateReservationFancyTemplate .gs-button.is-return:hover,
.gs-button.is-return:hover,
.gs-button.is-return:hover * {
  background-color: transparent !important;
  color: var(--sdk-hover-color) !important;
  fill: var(--sdk-hover-color) !important;
}

/* CLOSE (X) on the reservation/fancy — the SDK ships a near-black glyph that
   vanishes on the dark modal. Force a beige glyph on a transparent wrapper. */
#CreateReservationFancyTemplate--Close,
.fancybox-content #CreateReservationFancyTemplate--Close,
.fancybox-content .fancybox-close-small,
.fancybox-content button[data-fancybox-close] {
  background-color: transparent !important;
  color: var(--sdk-text-color) !important;
}
#CreateReservationFancyTemplate--Close svg,
#CreateReservationFancyTemplate--Close path,
.fancybox-content #CreateReservationFancyTemplate--Close svg,
.fancybox-content #CreateReservationFancyTemplate--Close path,
.fancybox-content .fancybox-close-small svg,
.fancybox-content .fancybox-close-small path,
.fancybox-content button[data-fancybox-close] svg,
.fancybox-content button[data-fancybox-close] path {
  color: var(--sdk-text-color) !important;
  fill: var(--sdk-text-color) !important;
  stroke: var(--sdk-text-color) !important;
  opacity: 1 !important;
}

/* CHECKBOXES — the SDK ships them unstyled, so on a dark surface they read as
   invisible. Force a visible bordered box that fills beige when checked
   (ORIGEN parity — more robust than accent-color alone). */
[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: 1.5px solid var(--sdk-main-color) !important;
  border-radius: 6px !important;
  background-color: var(--sdk-input-bg) !important;
  background-image: none !important;
  display: inline-block;
  height: 18px;
  width: 18px;
  min-width: 18px;
  outline: none;
  margin: 0;
  margin-right: 0.5rem;
  left: initial;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}
[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-main-color) !important;
  border-color: var(--sdk-main-color) !important;
}
[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;
}

/* PROFILE — beige credit pills with dark text/icon. */
.UserCredit__credits,
.UserMembership__credits {
  background-color: var(--sdk-main-color) !important;
  color: var(--sdk-secondary-color) !important;
  border-radius: 999px !important;
}
.UserCredit__credits svg,
.UserMembership__credits svg {
  color: var(--sdk-secondary-color) !important;
}

/* ============================================================ */
/* LOGIN / REGISTER / PASSWORD / PROFILE — ORIGEN parity        */
/* Pronounced floating card: hairline border + a deep soft       */
/* shadow over the dark backdrop (the base theme already sets     */
/* the dark surface, text and inputs above). MOV MOV keeps its    */
/* own nav-icon.png wordmark (set earlier via ::before).          */
/* ============================================================ */
.modal-login__container,
.modal-register__container,
.modal-password__container,
.modal-profile__container {
  border: 1px solid var(--sdk-border-color) !important;
  box-shadow:
    0 28px 64px -16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.4) !important;
  padding: 30px 28px !important;
}