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

:root {
  /* METHOD palette mapping */
  --sdk-main-color: #B58B67;        /* Warm Bronze — primary actions */
  --sdk-hover-color: #C9A77A;       /* Lighter bronze — hover */
  --sdk-text-color: #E7DDD2;        /* Soft Ivory — text inside SDK on dark */
  --sdk-background-color: #1C1A19;  /* Warm Charcoal — cards/items */
  --sdk-secondary-color: #0B0A09;   /* Espresso Black — text on bronze */
  --sdk-modal-bg: #161311;          /* Card surface for every SDK popup */
  --sdk-input-bg: #211D1A;          /* Input fill inside SDK modals */
  --sdk-border-color: #3A332D;      /* Warm hairline borders inside modals */
  --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 */
  --sdk-input-padding: 13px 16px;   /* Input inner padding */
  --sdk-placeholder-color: rgba(231, 221, 210, 0.5); /* Muted ivory 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                                                     */
/* ============================================================ */

/* Hide the SDK's built-in three-dot loading spinner inside the calendar.
   The container already provides a dark rounded background that serves as
   the loading state visually; the extra spinner creates a double-loading
   effect. Scoped to meetings-calendar so purchase-button / other SDK
   sections are unaffected. */
[data-gf-theme="meetings-calendar"] .GFSDK-com-loading {
  background: transparent !important;
}
[data-gf-theme="meetings-calendar"] .GFSDK-com-loading span,
[data-gf-theme="meetings-calendar"] .GFSDK-com-loading div {
  background-color: #E2DDD2 !important;
  border-color: #E2DDD2 !important;
}
[data-gf-theme="meetings-calendar"] .GFSDK-com-loading * {
  color: #E2DDD2 !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 */
.GFSDK-c-Calendar__item.GFSDK-e-meeting {
  background: var(--sdk-background-color);
  color: var(--sdk-text-color);
}

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

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

/* ============================================================ */
/* 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 .GfStore__ProductsItems .add-to-card,
#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: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);
}

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

.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 > .nav-tabs > li.active .GFSDK-c-tabs__link:before,
.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-user__data {
  background-color: transparent;
}

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

.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;
  /* Relative URL (no leading slash): this CSS is served at
     /method-studio/gftheme.css, so "method-logo.png" resolves to
     /method-studio/method-logo.png. A leading slash would hit the domain
     root and 404 under the artifact base path. Use the LIGHT wordmark so it
     reads on the dark modal surface. */
  background: url("method-logo.png") no-repeat center center;
  background-size: contain;
  width: 180px;
  height: 56px;
  margin: 0 auto 24px auto;
}

/* 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 — dark, single source of truth     */
/* Covers EVERY buq.partners popup: login, register, password   */
/* recovery, profile, and the fancy checkout. The SDK ships     */
/* them white; the brand is dark, so we repaint every layer     */
/* through the --sdk-* vars. NEVER set width/padding on         */
/* [data-gf-theme="fancy"] (it shrinks the calendar modal).     */
/* ============================================================ */

/* Overlay behind every modal. */
.modal-backdrop,
.fancybox-bg {
  background-color: var(--sdk-backdrop-bg) !important;
  opacity: 1 !important;
}

/* Frame wrappers stay transparent so only the rounded card shows. */
.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;
}

/* Modal headings (SDK paints them near-black at equal specificity; out-specify). */
.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;
}

/* Text inside the modal containers — force readable light on dark */
.modal-login__container,
.modal-login__container h1,
.modal-login__container h2,
.modal-login__container h3,
.modal-login__container h4,
.modal-login__container h5,
.modal-login__container p,
.modal-login__container span,
.modal-login__container label,
.modal-login__container li,
.modal-login__container a,
.modal-register__container,
.modal-register__container h1,
.modal-register__container h2,
.modal-register__container h3,
.modal-register__container h4,
.modal-register__container h5,
.modal-register__container p,
.modal-register__container span,
.modal-register__container label,
.modal-register__container li,
.modal-register__container a,
.modal-profile__container,
.modal-profile__container h1,
.modal-profile__container h2,
.modal-profile__container h3,
.modal-profile__container h4,
.modal-profile__container h5,
.modal-profile__container p,
.modal-profile__container span,
.modal-profile__container label,
.modal-profile__container li,
.modal-profile__container a,
#CreateReservationFancyTemplate,
#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;
}

/* Footer nav links inside login/register (e.g. "¿Olvidaste tu contraseña?") */
.modal-login__footer a,
.modal-register__footer a {
  color: var(--sdk-main-color) !important;
  cursor: pointer;
}
.modal-login__footer a:hover,
.modal-register__footer a:hover {
  color: var(--sdk-hover-color) !important;
}

/* Close icon — login/register sit on the dark modal surface so use ivory;
   profile close sits on the bronze tools bar so use 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,
.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 inside the modal containers — dark fill, ivory text, brand rounding */
.modal-login__container input,
.modal-login__container select,
.modal-login__container textarea,
.modal-register__container input,
.modal-register__container select,
.modal-register__container textarea,
.modal-password__container input,
.modal-password__container select,
.modal-password__container textarea,
.modal-profile__container input,
.modal-profile__container select,
.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(181, 139, 103, 0.45) !important; /* warm bronze 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(181, 139, 103, 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: #ffffff;
  -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;
}

/* ------------------------------------------------------------------ */
/* MOBILE header login — keep the SDK login widget compact so it does  */
/* not collide with the absolutely-centered logo, and make any text it */
/* renders (user name, "Acceder", etc.) inherit the site typography at */
/* a contained size instead of the SDK's large default font.           */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  [data-gf-theme="login-register"] {
    max-width: 38vw;
    justify-content: flex-end;
  }
  [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,
  [data-gf-theme="login-register"] a,
  [data-gf-theme="login-register"] span,
  [data-gf-theme="login-register"] p,
  [data-gf-theme="login-register"] button {
    font-family: var(--app-font-sans) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The icon button stays a fixed circle — never let the text rules
     above stretch it or push it under the logo. */
  [data-gf-theme="login-register"] .GFSDK-e-buttons.is-primary {
    max-width: none;
    overflow: visible;
  }
}

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

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