:root {
    --wjc-primary: #25b58c;
    --wjc-secondary: #163b3d;
    --wjc-text: #1e2426;
    --wjc-bg: #f6f7f6;
    --wjc-card: #ffffff;
    --wjc-border: #dfe5e3;
    --wjc-danger: #b42318;
    --wjc-radius: 10px;
    --wjc-shadow: 0 18px 55px rgba(20, 45, 45, 0.14);
    /* Celle giorno del calendario: normale / hover / attivo (selezionato) */
    --wjc-day-bg: transparent;
    --wjc-day-text: var(--wjc-text);
    --wjc-day-hover-bg: color-mix(in srgb, var(--wjc-primary) 13%, white);
    --wjc-day-hover-text: var(--wjc-day-text);
    --wjc-day-active-bg: var(--wjc-primary);
    --wjc-day-active-text: #ffffff;
    /* Sfondo proprio degli accordion (categorie) per dare distacco dallo sfondo generale */
    --wjc-accordion-bg: var(--wjc-card);
    /* Sfondo del pannello quando l'accordion e' aperto: separato dall'header
       cosi' lo stato aperto/chiuso e' sempre chiaro all'utente. */
    --wjc-accordion-panel-bg: var(--wjc-bg);
    /* Allineamento del titolo dell'accordion: left | center | right */
    --wjc-accordion-title-align: left;
    /* Bordo delle card prodotto dentro un accordion aperto */
    --wjc-product-border-color: var(--wjc-border);
    --wjc-product-border-width: 1px;
    /* Testo secondario/attenuato (descrizioni, date, prezzi in piccolo, ecc.) */
    --wjc-muted: #6e7779;
}

.wjc-wizard {
    box-sizing: border-box;
    color: var(--wjc-text);
    font-family: inherit;
}

/* Every icon in the wizard is a drawn SVG (never a unicode glyph), so it
   always renders at the exact same size/weight/alignment no matter what
   font the page theme loads. This rule is intentionally generic so it
   covers every button that hosts a .wjc-icon without needing one-off CSS. */
.wjc-wizard .wjc-icon {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto;
    vertical-align: middle !important;
    stroke: currentColor;
    fill: none;
    overflow: visible;
}

.wjc-wizard button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Defensive reset: the host theme's global input rules were bleeding into
   the widget (white input text on a white input background made the party
   form completely unreadable). Pin form fields back to the design tokens;
   component-specific text colors (muted grays, price accents, etc.) are
   handled by their own selectors further down and are left alone here. */
.wjc-wizard input,
.wjc-wizard select,
.wjc-wizard textarea {
    color: var(--wjc-text);
    background: #fff;
    text-shadow: none;
}

.wjc-wizard *,
.wjc-wizard *::before,
.wjc-wizard *::after {
    box-sizing: border-box;
}

.wjc-wizard {
    position: relative;
    width: 100%;
    min-height: 560px;
    border: 1px solid var(--wjc-border);
    border-radius: var(--wjc-radius);
    background: var(--wjc-bg);
}

/* v1.8: `overflow: clip` viveva qui, su .wjc-wizard. Un ancestor con overflow
   diverso da visible ritaglia visivamente anche i discendenti "position:
   fixed", anche se le loro coordinate sono calcolate rispetto al viewport
   reale: barra riepilogo mobile, modali, overlay e loader (rimasti figli
   diretti di .wjc-wizard, vedi v1.7) venivano quindi tagliati/spezzati non
   appena la loro posizione sullo schermo usciva dal rettangolo del widget
   (tipico scrollando oltre il widget, dove sotto c'e' il footer del sito).
   L'overflow:clip serve solo per ritagliare gli angoli arrotondati dei
   contenuti interni (immagini, card): spostato su .wjc-inner, che contiene
   solo il layout in-flow e non gli elementi davvero fissi. */
.wjc-inner {
    overflow: clip;
    border-radius: var(--wjc-radius);
}

.wjc-wizard button,
.wjc-wizard input,
.wjc-wizard select {
    font: inherit;
}

.wjc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--wjc-border);
    background: var(--wjc-card);
}

.wjc-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.wjc-brand > div {
    display: grid;
    min-width: 0;
}

.wjc-brand strong {
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wjc-brand span {
    color: var(--wjc-muted);
    font-size: 13px;
}

.wjc-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 8px;
    object-fit: contain;
}

.wjc-header-links {
    display: flex;
    gap: 22px;
}

.wjc-header-links a {
    font-family: inherit !important;
    color: var(--wjc-primary) !important;
    font-weight: 600 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
}

/* Elementor applica al tag <a> uno stile globale "kit" (font-family, peso e
   line-height diversi) SOLO sullo stato :hover: cambiando i metrics del testo
   provoca lo "scatto" di layout che vedi al passaggio del mouse. Ripetendo
   qui gli stessi valori dello stato normale con !important, l'hover aggiunge
   solo la sottolineatura, senza toccare font-family/peso/dimensione. */
.wjc-header-links a:hover {
    font-family: inherit !important;
    color: var(--wjc-primary) !important;
    font-weight: 600 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-decoration: underline !important;
}

/* v1.2: la topline replica le stesse colonne di .wjc-layout (1.75fr / 0.75fr)
   cosi' che la barra degli step risulti esattamente larga quanto il
   calendario/contenuto sottostante, invece di estendersi su tutta la
   larghezza del widget. */
.wjc-topline {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr);
    align-items: center;
    gap: 22px;
    padding: 16px 22px;
    background: var(--wjc-card);
}

.wjc-topline-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    min-width: 0;
}

.wjc-back-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50%;
    background: #f2f5f4 !important;
    color: var(--wjc-secondary) !important;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.wjc-steps {
    display: grid;
    flex: 1 1 260px;
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wjc-steps li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: #9aa4a2;
    font-size: 12px;
    font-weight: 600;
}

.wjc-steps li::before {
    position: absolute;
    top: 13px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--wjc-border);
    content: "";
    z-index: 0;
}

.wjc-steps li:first-child::before {
    display: none;
}

.wjc-steps li span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid var(--wjc-border);
    border-radius: 50%;
    background: var(--wjc-card);
    font-size: 12px;
}

.wjc-steps li.is-active {
    color: var(--wjc-secondary);
}

.wjc-steps li.is-active::before,
.wjc-steps li.is-active span {
    border-color: var(--wjc-primary);
    background-color: var(--wjc-primary);
    color: #fff;
}

.wjc-steps li.is-active::before {
    background: var(--wjc-primary);
}

.wjc-date-pill {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-left: auto;
    padding: 8px 13px;
    border: 1px solid var(--wjc-border);
    border-radius: 8px;
    background: var(--wjc-card);
    color: var(--wjc-text);
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.wjc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr);
    align-items: start;
    gap: 22px;
    padding: 22px;
}

.wjc-content {
    min-width: 0;
}

.wjc-accordion {
    overflow: hidden;
    margin: 0 0 22px !important;
    border: 0 !important;
    border-radius: var(--wjc-radius);
    background: var(--wjc-accordion-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px rgba(20, 45, 45, 0.06);
}

.wjc-accordion:last-child {
    margin-bottom: 0 !important;
}

/* La toggle (header) resta trasparente e mostra lo sfondo di .wjc-accordion;
   il pannello aperto invece ha un proprio sfondo dedicato (--wjc-accordion-panel-bg),
   cosi' che lo stato "aperto" sia visivamente distinto dall'header e dalle card. */
.wjc-accordion-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 16px;
    padding: 17px 18px;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    color: var(--wjc-text);
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    box-shadow: none !important;
}

/* Il titolo occupa tutto lo spazio disponibile: l'icona resta sempre ancorata
   a destra, mentre l'allineamento del testo (sinistra/centro/destra) e'
   controllabile da Elementor tramite --wjc-accordion-title-align. */
.wjc-accordion-toggle > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    text-align: var(--wjc-accordion-title-align, left);
}

.wjc-accordion-toggle .wjc-icon {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.wjc-accordion.is-open .wjc-accordion-toggle .wjc-icon {
    transform: rotate(180deg);
}

.wjc-accordion-panel {
    background: var(--wjc-accordion-panel-bg);
    display: grid !important;
    gap: 16px !important;
    padding: 20px 16px 18px !important;
    margin: 0 !important;
}

.wjc-product-card {
    overflow: hidden;
    margin: 0 !important;
    border: var(--wjc-product-border-width) solid var(--wjc-product-border-color) !important;
    border-radius: calc(var(--wjc-radius) - 2px);
    background: var(--wjc-card);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 6px 20px rgba(25, 45, 45, 0.08);
}

.wjc-product-image {
    aspect-ratio: 16 / 6;
    overflow: hidden;
    background: #edf0ef;
}

.wjc-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wjc-product-body {
    display: grid;
    gap: 11px;
    padding: 15px;
}

.wjc-product-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.wjc-product-title-row h4 {
    margin: 0;
    color: var(--wjc-text);
    font-size: 16px;
    line-height: 1.35;
}

.wjc-product-price {
    flex: 0 0 auto;
    color: var(--wjc-secondary);
    font-weight: 800;
}

.wjc-product-description {
    color: var(--wjc-muted);
    font-size: 14px;
    line-height: 1.5;
}

.wjc-product-description p {
    margin: 0;
}

.wjc-primary,
.wjc-secondary,
.wjc-outline {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: calc(var(--wjc-radius) - 2px);
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.wjc-primary {
    border: 1px solid var(--wjc-primary);
    background: var(--wjc-primary);
    color: #fff;
}

.wjc-secondary {
    border: 1px solid var(--wjc-border);
    background: var(--wjc-card);
    color: var(--wjc-text);
}

.wjc-outline {
    width: 100%;
    border: 1px solid var(--wjc-primary);
    background: transparent;
    color: var(--wjc-primary);
}

.wjc-primary:hover:not(:disabled),
.wjc-outline:hover:not(:disabled),
.wjc-secondary:hover:not(:disabled) {
    transform: translateY(-1px);
}

.wjc-primary:disabled,
.wjc-outline:disabled,
.wjc-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.wjc-mobile-summary-proceed:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.wjc-summary {
    position: sticky;
    top: 24px;
    overflow: hidden;
    border: 1px solid var(--wjc-border);
    border-radius: var(--wjc-radius);
    background: var(--wjc-card);
    box-shadow: 0 8px 24px rgba(25, 45, 45, 0.08);
}

.wjc-summary-head,
.wjc-summary-items,
.wjc-summary-totals {
    padding: 17px;
}

.wjc-summary-head {
    display: grid;
    gap: 2px;
    border-bottom: 1px solid var(--wjc-border);
}

.wjc-summary-head h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.wjc-summary-head span {
    color: var(--wjc-muted);
    font-size: 13px;
}

.wjc-summary-items {
    display: grid;
    max-height: 320px;
    gap: 12px;
    overflow-y: auto;
}

.wjc-empty-summary {
    margin: 0;
    color: var(--wjc-muted);
    font-size: 14px;
}

.wjc-summary-item {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--wjc-border);
}

.wjc-summary-item > div:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.wjc-summary-item strong {
    font-size: 13px;
}

.wjc-summary-item span {
    color: var(--wjc-muted);
    font-size: 12px;
}

.wjc-summary-item-side {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
}

.wjc-remove-reservation {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fbe9e7;
    color: var(--wjc-danger);
    cursor: pointer;
    font-size: 18px;
}

.wjc-summary-totals {
    display: grid;
    gap: 9px;
    border-top: 1px solid var(--wjc-border);
}

.wjc-summary-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.wjc-total-row {
    padding-top: 8px;
    border-top: 1px solid var(--wjc-border);
    font-size: 18px;
}

.wjc-summary .wjc-proceed {
    width: calc(100% - 34px);
    margin: 0 17px 17px;
}

.wjc-hold-timer {
    margin: -3px 17px 13px;
    color: var(--wjc-muted);
    font-size: 12px;
    text-align: center;
}

.wjc-notice {
    margin: 0 22px;
    padding: 12px 15px;
    border-radius: 7px;
    font-size: 14px;
}

.wjc-notice.is-error {
    border: 1px solid #f0b8b4;
    background: #fff0ef;
    color: #8f1d15;
}

.wjc-notice.is-success {
    border: 1px solid #a9ddcd;
    background: #ecfbf6;
    color: #136849;
}

.wjc-step-heading {
    margin: 0 0 17px;
    padding: 18px;
    border-left: 4px solid var(--wjc-primary);
    background: var(--wjc-card);
}

.wjc-step-heading h3,
.wjc-step-heading p {
    margin: 0;
}

.wjc-step-heading p {
    margin-top: 5px;
    color: var(--wjc-muted);
}

.wjc-extra-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wjc-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    width: 100%;
}

.wjc-segmented button {
    min-height: 42px;
    background: color-mix(in srgb, var(--wjc-primary) 8%, var(--wjc-card));
    color: var(--wjc-primary);
    cursor: pointer;
    font-weight: 700;
}

.wjc-segmented button.is-selected {
    background: var(--wjc-primary);
    color: #fff;
}

.wjc-extra-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.wjc-extra-quantity input {
    width: 72px;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--wjc-input-border) !important;
    border-radius: 7px;
    background: var(--wjc-input-bg) !important;
    color: var(--wjc-input-text) !important;
    -webkit-text-fill-color: var(--wjc-input-text);
}

.wjc-overlay {
    position: fixed;
    z-index: 999970;
    inset: 0;
    background: rgba(13, 27, 29, 0.58);
    backdrop-filter: blur(2px);
}

@supports not (backdrop-filter: blur(1px)) {
    .wjc-overlay {
        background: rgba(13, 27, 29, 0.82);
    }
}

.wjc-modal {
    position: fixed;
    z-index: 999980;
    top: 50%;
    left: 50%;
    width: min(680px, calc(100vw - 28px));
    max-height: min(820px, calc(100vh - 28px));
    overflow: auto;
    transform: translate(-50%, -50%);
    border-radius: var(--wjc-radius);
    background: var(--wjc-card);
    background-clip: padding-box;
    box-shadow: var(--wjc-shadow);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.wjc-modal {
    color: var(--wjc-text) !important;
}

.wjc-party-form h4 {
    margin: 0 0 4px;
    color: var(--wjc-text) !important;
    font-size: 15px;
}

.wjc-calendar-modal {
    width: min(650px, calc(100vw - 28px));
}

.wjc-calendar-header,
.wjc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--wjc-border);
}

.wjc-calendar-header h3,
.wjc-modal-head h3 {
    margin: 0;
    font-size: 21px;
}

.wjc-calendar-prev,
.wjc-calendar-next,
.wjc-modal-close {
    display: inline-flex !important;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50%;
    background: #f2f5f4 !important;
    color: var(--wjc-secondary) !important;
    cursor: pointer;
    padding: 0;
}

.wjc-calendar-prev .wjc-icon,
.wjc-calendar-next .wjc-icon,
.wjc-modal-close .wjc-icon {
    width: 20px !important;
    height: 20px !important;
}

.wjc-calendar-prev:disabled {
    opacity: 0.3;
}

.wjc-calendar-weekdays,
.wjc-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 0 22px;
}

.wjc-calendar-weekdays {
    padding-top: 19px;
    padding-bottom: 7px;
    color: var(--wjc-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.wjc-calendar-grid {
    padding-bottom: 22px;
}

.wjc-calendar-grid button,
.wjc-calendar-empty {
    aspect-ratio: 1;
}

.wjc-calendar-grid button {
    border: 0;
    border-radius: 8px;
    background: var(--wjc-day-bg);
    color: var(--wjc-day-text);
    cursor: pointer;
    font-weight: 600;
}

.wjc-calendar-grid button:hover:not(:disabled):not(.is-selected) {
    background: var(--wjc-day-hover-bg);
    color: var(--wjc-day-hover-text);
}

.wjc-calendar-grid button.is-selected {
    background: var(--wjc-day-active-bg);
    color: var(--wjc-day-active-text);
}

.wjc-calendar-grid button.is-today:not(.is-selected) {
    outline: 1px solid var(--wjc-primary);
}

.wjc-calendar-grid button:disabled {
    color: #c6cecc;
    cursor: not-allowed;
}

.wjc-calendar-footer,
.wjc-modal-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 22px;
    border-top: 1px solid var(--wjc-border);
    background: var(--wjc-card);
}

.wjc-calendar-footer {
    display: grid;
    text-align: center;
}

.wjc-calendar-selection {
    margin: 0;
    font-size: 18px;
}

.wjc-modal-footer > div:last-child {
    display: flex;
    gap: 8px;
}

.wjc-modal-footer > div:first-child {
    display: grid;
}

.wjc-modal-footer small {
    color: var(--wjc-muted);
}

.wjc-slot-list {
    min-height: 300px;
    padding: 12px 22px calc(22px + 88px + env(safe-area-inset-bottom));
}

.wjc-slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--wjc-border);
}

.wjc-slot-row > div:first-child {
    display: grid;
    gap: 2px;
}

.wjc-slot-row span,
.wjc-slot-row small {
    color: var(--wjc-muted);
    font-size: 12px;
}

.wjc-slot-row em,
.wjc-wizard .wjc-room-card em {
    color: var(--wjc-danger);
    font-size: 12px;
    font-style: normal;
}

.wjc-slot-row.is-disabled {
    opacity: 0.55;
}

.wjc-stepper {
    display: grid;
    grid-template-columns: 38px 34px 38px;
    align-items: center;
    text-align: center;
}

.wjc-stepper button {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--wjc-primary) !important;
    border-radius: 8px !important;
    background: var(--wjc-card) !important;
    color: var(--wjc-primary) !important;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 !important;
}

.wjc-stepper button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--wjc-primary) 12%, var(--wjc-card)) !important;
}

.wjc-stepper button:disabled {
    border-color: var(--wjc-border);
    color: #aeb7b5;
    cursor: not-allowed;
}

.wjc-party-form {
    display: grid;
    gap: 20px;
    padding: 20px 22px calc(20px + 88px + env(safe-area-inset-bottom));
}

.wjc-fullday-body {
    display: grid;
    gap: 20px;
    padding: 20px 22px calc(20px + 88px + env(safe-area-inset-bottom));
}

.wjc-fullday-availability {
    margin: 0;
    color: var(--wjc-muted);
    font-size: 14px;
    font-weight: 600;
}

.wjc-fullday-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wjc-fullday-quantity > span {
    font-weight: 700;
}

.wjc-party-people {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.wjc-party-people label,
.wjc-party-time-label {
    display: grid;
    gap: 6px;
    color: var(--wjc-muted) !important;
    font-size: 13px;
    font-weight: 700;
}

.wjc-party-people input,
.wjc-party-time {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--wjc-input-border) !important;
    border-radius: 7px;
    background: var(--wjc-input-bg) !important;
    color: var(--wjc-input-text) !important;
    -webkit-text-fill-color: var(--wjc-input-text);
    appearance: auto;
}

.wjc-party-people input::placeholder {
    color: var(--wjc-muted) !important;
    opacity: 1;
}

.wjc-party-price {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 8px;
    background: var(--wjc-highlight-bg) !important;
}

.wjc-party-price > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--wjc-text) !important;
    font-size: 13px;
}

.wjc-room-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.wjc-wizard .wjc-room-card {
    /* !important su queste proprieta': .wjc-room-card e' un elemento <button>,
       e il tema/WooCommerce/Elementor applicano stili globali a TUTTI i bottoni
       del sito (es. .elementor-kit-XX button) che possono caricarsi DOPO il
       nostro CSS e usare anch'essi !important. Per questo motivo il selettore
       e' stato reso piu' specifico (".wjc-wizard .wjc-room-card" invece del
       semplice ".wjc-room-card"): a parita' di !important vince la specificita'
       piu' alta, quindi la nostra regola resta stabile a prescindere
       dall'ordine di caricamento dei fogli di stile. Senza questa combinazione
       (specificita' + !important) lo stile globale vince su display/padding/
       border-radius/background e la card smette di essere una grid: a quel
       punto grid-template-columns (la larghezza immagine) non ha piu' alcun
       effetto, mentre l'altezza continua a funzionare perche' e' impostata
       direttamente sull'<img>, non sul layout del genitore. */
    display: grid !important;
    grid-template-columns: var(--wjc-room-image-width, 96px) minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100%;
    min-width: 0;
    gap: 14px !important;
    /* La card ora ha un padding proprio: la foto diventa una miniatura "inset",
       staccata dai bordi su tutti e 4 i lati, invece di riempire tutta
       l'altezza della card a filo bordo (bleed). Questo e' il layout richiesto
       dal wireframe: immagine contenuta + testo accanto, con aria intorno. */
    padding: 12px 16px 12px 12px !important;
    border: 0 !important;
    border-radius: var(--wjc-radius) !important;
    /* --wjc-room-card-bg e' il nuovo controllo dedicato "Sfondo card sala" in
       Elementor: se l'utente non lo imposta, ricade su --wjc-card (colore
       generale "Sfondo card"), quindi il comportamento di default non cambia. */
    background: var(--wjc-room-card-bg, var(--wjc-card)) !important;
    color: var(--wjc-text) !important;
    cursor: pointer;
    text-align: left !important;
    transition: background 0.15s ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 4px 14px rgba(25, 45, 45, 0.08) !important;
}

.wjc-wizard .wjc-room-card img {
    display: block !important;
    width: 100% !important;
    /* Larghezza e altezza sono due variabili indipendenti (configurabili in
       Elementor): l'immagine non e' piu' forzata ad essere quadrata. */
    height: var(--wjc-room-image-height, 96px) !important;
    /* Un <img> ha di default un min-width implicito pari alla sua dimensione
       intrinseca: senza azzerarlo, la colonna verrebbe forzata ad allargarsi
       per ospitare la foto alla sua dimensione naturale, schiacciando il
       testo a destra. */
    min-width: 0 !important;
    /* "cover" ritaglia la foto per riempire sempre il riquadro, senza mai
       stirarla o deformarla, qualunque sia il rapporto larghezza/altezza
       scelto in Elementor. */
    object-fit: cover !important;
    /* Ora che l'immagine e' una miniatura staccata dai bordi (non piu' a filo
       card), il fallback arrotonda tutti e 4 gli angoli come nel wireframe,
       non solo il lato sinistro. Resta comunque personalizzabile dai 4 campi
       separati in Elementor. */
    border-radius: var( --wjc-room-image-radius, var(--wjc-radius) ) !important;
}

.wjc-wizard .wjc-room-card > span {
    display: grid !important;
    align-content: center;
    gap: 4px;
    min-width: 0;
    color: var(--wjc-text) !important;
}

.wjc-wizard .wjc-room-card strong,
.wjc-wizard .wjc-room-card small {
    overflow-wrap: break-word;
}

/* Titolo della sala (es. "Pokémon"): colore dedicato e indipendente dal resto
   del testo della card. Specificita' superiore a ".wjc-room-card > span" cosi'
   da vincere sempre su di esso; fallback su --wjc-text se il nuovo controllo
   Elementor "Colore titolo sala" non viene impostato. */
.wjc-wizard .wjc-room-card strong {
    color: var(--wjc-room-card-title-color, var(--wjc-text)) !important;
}

.wjc-wizard .wjc-room-card small {
    color: var(--wjc-muted) !important;
}

.wjc-wizard .wjc-room-card:hover:not(.is-disabled):not(.is-selected) {
    background: var(--wjc-room-card-bg-hover, var(--wjc-room-card-bg, var(--wjc-card))) !important;
}

.wjc-wizard .wjc-room-card.is-selected {
    background: var(--wjc-room-card-bg-active, var(--wjc-room-card-bg, var(--wjc-card))) !important;
    border: 2px solid var(--wjc-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wjc-primary) 13%, transparent);
}

.wjc-wizard .wjc-room-card.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.wjc-skeleton {
    height: 62px;
    margin: 10px 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #eef1f0 25%, #f8f9f9 45%, #eef1f0 65%);
    background-size: 200% 100%;
    animation: wjc-shimmer 1.2s infinite linear;
}

@keyframes wjc-shimmer {
    to { background-position: -200% 0; }
}

.wjc-loading {
    position: fixed;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--wjc-shadow);
}

.wjc-loading span:first-child {
    width: 26px;
    height: 26px;
    border: 3px solid var(--wjc-border);
    border-top-color: var(--wjc-primary);
    border-radius: 50%;
    animation: wjc-spin 0.8s linear infinite;
}

@keyframes wjc-spin {
    to { transform: rotate(360deg); }
}

body.wjc-modal-open {
    overflow: hidden;
}

.wjc-mobile-summary {
    display: none;
}

[hidden] {
    display: none !important;
}

@media (max-width: 820px) {
    .wjc-header {
        align-items: flex-start;
        padding: 14px;
    }

    .wjc-header-links {
        gap: 12px;
        font-size: 13px;
    }

    .wjc-topline {
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        gap: 10px 14px;
        padding: 12px;
    }

    .wjc-date-pill {
        padding: 7px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .wjc-steps li {
        font-size: 10px;
    }

    .wjc-steps li span {
        width: 24px;
        height: 24px;
    }

    .wjc-steps li::before {
        top: 11px;
    }

    .wjc-layout {
        display: block;
        padding: 12px 12px 92px;
    }

    .wjc-summary {
        display: none;
    }

    /* v1.10: la barra riepilogo mobile e il pannello che apre erano
       "position: fixed" rispetto alla viewport, tenuti "agganciati" alla
       fine del widget via JS (IntersectionObserver su un elemento
       sentinel + classe wjc-is-near-end che li nascondeva). Quel
       meccanismo si basava su "il sentinel deve risalire sopra la
       viewport", condizione che su pagine con footer piu' basso di una
       viewport non si verifica mai (lo scroll finisce prima): la barra
       restava fissa sopra il footer per sempre. "position: sticky" ottiene
       lo stesso effetto (resta ancorata al fondo della viewport durante lo
       scroll) in modo nativo: si stacca automaticamente e scorre via con
       la pagina non appena si esce dal blocco che la contiene
       (.wjc-wizard, di cui questi elementi sono figli diretti con
       overflow:visible), senza JS e senza dipendere dall'altezza della
       pagina.

       v1.11: lo "sticky" del pannello espanso (.wjc-summary.is-mobile-open)
       era indipendente da quello della barra (.wjc-mobile-summary): ognuno
       si "aggancia" al fondo del viewport solo quando lo scroll lo richiede,
       quindi su pagine/step corti il pannello poteva restare nella sua
       posizione naturale nel flusso invece che appena sopra la barra,
       sovrapponendosi ad essa. Ora solo il wrapper .wjc-mobile-dock e'
       sticky (ancora la barra come prima); il pannello, spostato via JS
       dentro il dock quando si apre, e' "position: absolute" rispetto ad
       esso (un elemento sticky resta comunque "positioned" e fa da
       containing block) e si aggancia sempre appena sopra la barra,
       qualunque sia lo stato di scroll. */
    .wjc-mobile-dock {
        position: sticky;
        z-index: 900;
        bottom: 12px;
        margin: 0 12px;
        margin-bottom: 20px;
    }

    .wjc-summary.is-mobile-open {
        position: absolute;
        z-index: 910;
        top: auto;
        left: 0;
        right: 0;
        bottom: calc(100% + 12px);
        margin: 0;
        display: block;
        max-height: min(70vh, 580px);
        overflow-y: auto;
        box-shadow: 0 18px 48px rgba(12, 42, 34, 0.28);
    }

    .wjc-summary.is-mobile-open .wjc-proceed {
        margin-bottom: 26px;
    }

    .wjc-mobile-summary:not([hidden]) {
        display: grid;
        /* v1.18: il prezzo (colonna sinistra) non deve avere un tetto fisso al 40%:
           con totali a 4 cifre (es. "1.044,00 €") veniva tagliato dall'ellissi.
           Il pulsante "Procedi" (colonna destra) prende solo lo spazio che gli
           serve (auto), il resto va sempre al prezzo (1fr). */
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        min-height: 62px;
        overflow: hidden;
        border-radius: 13px;
        background: var(--wjc-primary);
        color: #fff;
        box-shadow: 0 12px 35px rgba(12, 42, 34, 0.28);
    }

    .wjc-mobile-summary button {
        min-width: 0;
        padding: 10px 16px;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font: inherit;
        font-weight: 800;
    }

    .wjc-mobile-summary-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px;
        text-align: left;
    }

    .wjc-mobile-summary-toggle > span {
        display: grid;
        min-width: 0;
    }

    .wjc-mobile-summary-toggle > span strong,
    .wjc-mobile-summary-toggle > span small {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .wjc-mobile-summary-toggle .wjc-icon {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px;
        opacity: 0.85;
        transition: transform 0.2s ease;
    }

    .wjc-mobile-summary-toggle[aria-expanded="true"] .wjc-icon {
        transform: rotate(180deg);
    }

    .wjc-mobile-summary-proceed {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px;
        text-align: right;
        line-height: 1.15;
        border-left: 1px solid rgba(255,255,255,.28) !important;
    }

    .wjc-mobile-summary-proceed-text {
        white-space: nowrap;
    }

    .wjc-mobile-summary small {
        opacity: 0.85;
    }

    .wjc-product-image {
        aspect-ratio: 16 / 7;
    }

    .wjc-modal {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 92vh;
        transform: none;
        border-radius: 18px 18px 0 0;
    }

    .wjc-calendar-modal {
        width: 100%;
    }

    .wjc-modal-footer {
        padding-bottom: calc(17px + env(safe-area-inset-bottom));
    }

    /* Card sala festa (es. "Pokemon") su mobile: da riga orizzontale
       (miniatura + testo accanto) a card verticale con foto grande a tutta
       larghezza in alto e titolo/sottotitolo centrati sotto, come da
       screenshot di riferimento. */
    .wjc-wizard .wjc-room-card {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 12px 12px 16px !important;
        gap: 12px !important;
    }

    .wjc-wizard .wjc-room-card img {
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }

    .wjc-wizard .wjc-room-card > span {
        justify-items: center;
    }
}

@media (max-width: 520px) {
    /* Duplica via @media la regola che in origine viveva solo dentro
       @container (max-width: 520px): .wjc-modal-head non e' piu' discendente
       di .wjc-inner (vedi v1.7 sopra), quindi quella @container non lo
       raggiunge piu'. */
    .wjc-modal-head {
        padding: 14px;
    }

    .wjc-brand strong {
        max-width: 165px;
    }

    .wjc-header-links {
        display: grid;
        gap: 5px;
        text-align: right;
    }

    .wjc-topline {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .wjc-date-pill {
        flex: 1 1 100%;
        justify-content: center;
        width: 100%;
    }

    .wjc-product-title-row {
        display: grid;
        gap: 4px;
    }

    .wjc-party-people {
        grid-template-columns: 1fr;
    }

    .wjc-calendar-weekdays,
    .wjc-calendar-grid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .wjc-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .wjc-modal-footer > div:last-child {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
    }

    .wjc-segmented {
        grid-template-columns: 1fr;
    }

    .wjc-segmented button + button {
        border-top: 1px solid var(--wjc-primary);
        border-left: 0;
    }
}

/* v1.1: isolamento tema/Elementor 4 e calendario come primo step */
.wjc-wizard { position: relative; --wjc-primary:#25b58c; --wjc-secondary:#163b3d; --wjc-text:#1e2426; --wjc-muted:#6e7779; --wjc-bg:#f6f7f6; --wjc-card:#fff; --wjc-border:#dfe5e3; --wjc-danger:#b42318; --wjc-radius:10px; --wjc-shadow:0 18px 55px rgba(20,45,45,.14); }
/* v1.7: container-type vive solo su .wjc-inner (contenuto in-flow con query
   @container), non su .wjc-wizard. Un elemento con container-type diventa
   containing block anche per i discendenti "position: fixed" (come un
   transform): tenendolo su .wjc-wizard, la barra riepilogo mobile, i modali,
   l'overlay e il loader restavano agganciati al box del widget invece che
   alla viewport reale, finendo per sovrapporsi al contenuto sotto di loro
   invece di restare fissi durante lo scroll. Vedi anche la regola
   `.wjc-inner` in cima al file (overflow:clip + border-radius, v1.8). */
.wjc-inner { container-type: inline-size; }
/* v1.8: rimossa `isolation: isolate` da .wjc-wizard. Creava una stacking
   context: gli z-index enormi (999900+) di barra mobile/modali/overlay/loader
   restavano vinti/confinati DENTRO quella stacking context invece di competere
   con lo stacking a livello di intera pagina, quindi footer/menu del tema
   potevano comunque comparire sopra o "dentro" i modali anche a posizionamento
   ormai corretto rispetto al viewport (fix v1.7). Senza isolamento, gli
   z-index già altissimi bastano da soli a stare sopra qualsiasi cosa nella
   pagina reale. */
.wjc-wizard :where(h1,h2,h3,h4,p,figure) { margin: 0; }
.wjc-wizard :where(button,input,select,textarea) { box-shadow: none; text-transform: none; letter-spacing: normal; }
.wjc-wizard button::before,.wjc-wizard button::after { content:none !important; }
.wjc-calendar-step { display:grid; gap:16px; }
.wjc-calendar-modal.is-inline { position:static; width:100%; max-width:none; padding:22px; border:1px solid var(--wjc-border); border-radius:var(--wjc-radius); background:var(--wjc-card); box-shadow:none; transform:none; }
.wjc-calendar-modal.is-inline .wjc-calendar-footer { margin-top:18px; }
.wjc-accordion-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wjc-product-image { aspect-ratio:16/9; }
.wjc-product-price { display:grid; justify-items:end; }
.wjc-product-price small { max-width:150px; color:var(--wjc-muted); font-size:10px; font-weight:500; line-height:1.2; text-align:right; }
@container (max-width: 760px) {
  .wjc-layout { grid-template-columns:1fr; }
  .wjc-summary { position:static; }
  .wjc-accordion-panel { grid-template-columns:1fr; }
}

/* v1.3: stato robusto, UX responsive e controlli Elementor */
.wjc-wizard {
    --wjc-border-width: 1px;
    --wjc-primary-hover: #1d9675;
    --wjc-button-text: #fff;
    --wjc-heading-accent: var(--wjc-primary);
    --wjc-input-bg: #ffffff;
    --wjc-input-text: #1e2426;
    --wjc-input-border: var(--wjc-border);
    --wjc-highlight-bg: #f3f7f6;
}

.wjc-wizard,
.wjc-accordion,
.wjc-summary,
.wjc-calendar-modal.is-inline,
.wjc-date-pill {
    border-width: var(--wjc-border-width);
}

.wjc-calendar-step,
.wjc-calendar-modal.is-inline {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
}

.wjc-step-heading {
    border-left-color: var(--wjc-heading-accent);
}

.wjc-primary {
    color: var(--wjc-button-text);
}

.wjc-primary:hover:not(:disabled),
.wjc-segmented button.is-selected:hover,
.wjc-mobile-summary button:hover {
    border-color: var(--wjc-primary-hover);
    background: var(--wjc-primary-hover);
    color: var(--wjc-button-text);
}

.wjc-outline:hover:not(:disabled) {
    border-color: var(--wjc-primary-hover);
    background: color-mix(in srgb, var(--wjc-primary-hover) 9%, transparent);
    color: var(--wjc-primary-hover);
}

.wjc-notice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    border: var(--wjc-border-width) solid var(--wjc-border);
}

.wjc-notice.is-info {
    background: var(--wjc-card);
    color: var(--wjc-text);
}

.wjc-notice-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: currentColor !important;
    cursor: pointer;
}

.wjc-notice-close:hover {
    background: rgba(0,0,0,.07);
}

.wjc-segmented {
    align-items: stretch;
    overflow: visible;
    border: 0;
    border-radius: calc(var(--wjc-radius) - 2px);
    gap: 8px;
}

.wjc-segmented button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 12px;
    border: var(--wjc-border-width) solid var(--wjc-primary);
    border-radius: calc(var(--wjc-radius) - 2px);
    background: color-mix(in srgb, var(--wjc-primary) 8%, var(--wjc-card));
    color: var(--wjc-primary);
    line-height: 1.25;
    white-space: normal;
}

.wjc-segmented button:hover:not(.is-selected) {
    border-color: var(--wjc-primary-hover);
    background: color-mix(in srgb, var(--wjc-primary-hover) 16%, var(--wjc-card));
    color: var(--wjc-primary-hover);
}

.wjc-segmented button.is-selected {
    border-color: var(--wjc-primary);
    background: var(--wjc-primary);
    color: #fff;
}

.wjc-extra-choice {
    align-items: stretch;
    flex-direction: column;
}

.wjc-ticket-step,
.wjc-extra-step {
    min-width: 0;
}

@container (min-width: 761px) {
    .wjc-calendar-step .wjc-calendar-modal.is-inline {
        min-height: 520px;
    }
}

@container (max-width: 980px) {
    .wjc-layout {
        grid-template-columns: minmax(0, 1fr) minmax(240px, .62fr);
        gap: 16px;
        padding: 16px;
    }
    .wjc-product-title-row {
        display: grid;
        gap: 7px;
    }
    .wjc-product-price {
        justify-items: start;
    }
    .wjc-product-price small {
        text-align: left;
    }
}

@container (max-width: 760px) {
    .wjc-layout {
        display: block;
        padding: 12px 12px 88px;
    }
    .wjc-summary {
        display: none;
    }
    /* v1.15: rimosse da qui le regole `.wjc-summary.is-mobile-open` e
       `.wjc-mobile-summary:not([hidden])` con `position: fixed`. Erano gia'
       morte (questa @container si applica solo dentro `.wjc-inner`, ma
       entrambi gli elementi ne escono via JS non appena assumono questi
       stati) e duplicavano/contraddicevano, con coordinate diverse, le
       regole equivalenti in `@media (max-width: 820px)` che gestiscono
       davvero questi stati tramite `.wjc-mobile-dock`. Lasciarle era un
       rischio: una futura modifica al punto in cui vive `.wjc-mobile-dock`
       le avrebbe riattivate applicando `position: fixed` senza alcuna
       conoscenza del wrapper, rompendo l'ancoraggio pannello/barra. */
    .wjc-calendar-modal.is-inline {
        padding: 14px;
    }
}

@container (max-width: 520px) {
    .wjc-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .wjc-header-links {
        justify-content: flex-start;
        text-align: left;
    }
    .wjc-steps {
        grid-template-columns: repeat(4, minmax(54px, 1fr));
    }
    .wjc-calendar-header,
    .wjc-modal-head {
        padding: 14px;
    }
    .wjc-calendar-weekdays,
    .wjc-calendar-grid {
        gap: 2px;
        padding-right: 4px;
        padding-left: 4px;
    }
    .wjc-calendar-grid button {
        min-width: 0;
        min-height: 38px;
        padding: 4px;
    }
    .wjc-segmented {
        grid-template-columns: 1fr;
    }
    .wjc-segmented button + button {
        border-top: var(--wjc-border-width) solid var(--wjc-primary);
        border-left: var(--wjc-border-width) solid var(--wjc-primary);
    }
}