/*
 * booking-flow.css — B&B Villa Mani Child Theme
 * Styles for the booking flow:
 *   /cerca-camere/ · /booking/ · /prenotazione-confermata/ · /pagamento-completato/
 *   + single room type availability form + MPHB integration overrides
 *
 * Enqueued conditionally via villa_enqueue_booking_flow_assets() in functions.php.
 * Uses CSS custom properties from style.css :root.
 *
 * Mobile-first: base styles for mobile, min-width queries for tablet/desktop.
 */

/* =========================================================
   PHASE 1 — DESIGN SYSTEM TOKENS (extend :root)
   ========================================================= */

:root {
    /* Radius scale */
    --vg-radius-xs:   4px;
    --vg-radius-sm:   8px;
    --vg-radius-md:   12px;
    --vg-radius-lg:   16px;
    --vg-radius-xl:   24px;
    --vg-radius-pill: 9999px;

    /* Shadow scale */
    --vg-shadow-xs:   0 1px 2px  rgba(44,42,36,0.06);
    --vg-shadow-sm:   0 2px 8px  rgba(44,42,36,0.10);
    --vg-shadow-md:   0 4px 16px rgba(44,42,36,0.12);
    --vg-shadow-lg:   0 8px 28px rgba(44,42,36,0.14);
    --vg-shadow-xl:   0 16px 48px rgba(44,42,36,0.18);
    --vg-shadow-card: 0 2px 8px  rgba(44,42,36,0.08), 0 1px 2px rgba(44,42,36,0.06);

    /* Focus rings */
    --vg-focus-ring:        0 0 0 3px rgba(79,99,86,0.40);
    --vg-focus-ring-error:  0 0 0 3px rgba(185,60,45,0.35);
    --vg-focus-ring-offset: 2px;

    /* Semantic colours — palette fredda spa */
    --vg-success:         #4F6356;
    --vg-success-bg:      #E9F0EA;
    --vg-success-border:  #BFD3C2;
    --vg-warning:         #8A5E50;
    --vg-warning-bg:      #F3EFEA;
    --vg-warning-border:  #D9CFC0;
    --vg-error:           #B93C2D;
    --vg-error-bg:        #F7ECEA;
    --vg-error-border:    #E8A89F;
    --vg-info:            #63605A;
    --vg-info-bg:         #EFEEE8;
    --vg-info-border:     #D7D3C8;

    /* Transitions */
    --vg-duration-fast:   150ms;
    --vg-duration-base:   250ms;
    --vg-duration-slow:   400ms;
    --vg-duration-reveal: 600ms;
    --vg-ease-out:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --vg-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1.00);

    /* Z-index scale */
    --vg-z-base:    1;
    --vg-z-card:    10;
    --vg-z-dropdown:100;
    --vg-z-sticky:  200;
    --vg-z-header:  300;
    --vg-z-modal:   400;
    --vg-z-toast:   500;
    --vg-z-overlay: 600;

    /* Booking spacing */
    --vg-space-form-gap:     20px;
    --vg-space-card-pad:     24px;
    --vg-space-summary-pad:  20px 24px;
    --vg-space-section:      64px;
}

/* =========================================================
   BRAND STRIPE
   ========================================================= */

.vg-brand-stripe {
    height: 1px;
    background: var(--vg-line, #E7E4DC);
    flex-shrink: 0;
    margin-bottom: 32px;
}
/* Sidebar variant (inside .vg-booking-summary) sits flush with the rounded
   container above it — no separation needed there. */
.vg-booking-summary .vg-brand-stripe {
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .vg-brand-stripe {
        margin-bottom: 20px;
    }
}

/* =========================================================
   BOOKING FORM — .vg-booking-form
   ========================================================= */

.vg-booking-form {
    background: #fff;
    border-radius: var(--vg-radius-md);
    box-shadow: var(--vg-shadow-card);
    overflow: visible;
    text-align: left;
}

.vg-booking-form--hero {
    /* Full form in homepage section */
    padding: var(--vg-space-form-gap);
}

.vg-booking-form--sticky {
    /* Horizontal bar on /cerca-camere/ */
    padding: 12px 16px;
    border-radius: var(--vg-radius-sm);
}

.vg-booking-form--compact,
.vg-booking-form--inline-room {
    padding: 20px;
}

.vg-booking-form__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--vg-space-form-gap);
}

@media (min-width: 768px) {
    .vg-booking-form--sticky .vg-booking-form__row,
    .vg-booking-form--hero .vg-booking-form__row,
    .vg-booking-form--inline-room .vg-booking-form__row {
        flex-direction: row;
        align-items: flex-end;
    }
}

/* Field wrapper */
.vg-booking-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.vg-booking-form__field label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(44,42,36,0.65);
}

.vg-booking-form__field-inner {
    position: relative;
}

.vg-booking-form__field-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
}

.vg-booking-form__field input[type="text"] {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-sm);
    font-family: var(--vg-font-body, inherit);
    font-size: 0.95rem;
    color: var(--vg-text, #2C2A24);
    background: #FAFBF8;
    transition: border-color var(--vg-duration-fast) var(--vg-ease-out),
                box-shadow  var(--vg-duration-fast) var(--vg-ease-out);
    cursor: pointer;
}

.vg-booking-form__field input[type="text"]:focus {
    outline: none;
    border-color: var(--vg-primary, #3E4F44);
    box-shadow: var(--vg-focus-ring);
}

/* Nights counter */
.vg-booking-form__nights {
    font-size: 0.8rem;
    margin-top: 4px;
}

/* L'icona dentro il button toggle è in un contesto flex, non va in absolute */
.vg-booking-form__guests-toggle .vg-booking-form__field-icon {
    position: static;
    transform: none;
    flex-shrink: 0;
}

/* Guests toggle button */
.vg-booking-form__guests-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-sm);
    background: #FAFBF8;
    font-family: var(--vg-font-body, inherit);
    font-size: 0.95rem;
    color: var(--vg-text, #2C2A24);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--vg-duration-fast) var(--vg-ease-out),
                box-shadow  var(--vg-duration-fast) var(--vg-ease-out);
}

.vg-booking-form__guests-toggle:focus {
    outline: none;
    border-color: var(--vg-primary, #3E4F44);
    box-shadow: var(--vg-focus-ring);
}

.vg-booking-form__chevron {
    margin-left: auto;
    transition: transform var(--vg-duration-fast) var(--vg-ease-out);
}

.vg-booking-form__guests-toggle[aria-expanded="true"] .vg-booking-form__chevron {
    transform: rotate(180deg);
}

/* Guests dropdown */
.vg-booking-form__guests-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-md);
    box-shadow: var(--vg-shadow-md);
    padding: 16px;
    z-index: var(--vg-z-dropdown);
    min-width: 220px;
    animation: vg-dropdown-in var(--vg-duration-base) var(--vg-ease-out);
}

.vg-booking-form__field--guests {
    position: relative;
}

@keyframes vg-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vg-booking-form__guests-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}

.vg-booking-form__guests-row + .vg-booking-form__guests-row {
    border-top: 1px solid var(--vg-decorative, #DFE2DA);
}

/* Counter buttons */
.vg-booking-form__counter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vg-booking-form__counter button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-pill);
    background: #FAFBF8;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--vg-text, #2C2A24);
    transition: background var(--vg-duration-fast) var(--vg-ease-out),
                border-color var(--vg-duration-fast) var(--vg-ease-out);
    flex-shrink: 0;
}

.vg-booking-form__counter button:hover {
    background: var(--vg-sand, #F7F6F2);
    border-color: var(--vg-primary, #3E4F44);
}

.vg-booking-form__counter button:focus {
    outline: none;
    box-shadow: var(--vg-focus-ring);
}

.vg-booking-form__counter output {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
}

/* Submit button */
.vg-booking-form__submit-btn {
    width: 100%;
    padding: 12px 24px;
    background: var(--vg-primary, #3E4F44);
    color: #fff;
    border: none;
    border-radius: var(--vg-radius-sm);
    font-family: var(--vg-font-body, inherit);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--vg-duration-base) var(--vg-ease-out),
                transform  var(--vg-duration-fast) var(--vg-ease-out);
    white-space: nowrap;
}

.vg-booking-form__submit-btn:hover {
    background: var(--vg-primary-dark, #33403A);
}

.vg-booking-form__submit-btn:active {
    transform: scale(0.98);
}

.vg-booking-form__submit-btn:focus {
    outline: none;
    box-shadow: var(--vg-focus-ring);
}

@media (min-width: 768px) {
    .vg-booking-form__field--submit {
        flex: 0 0 auto;
        min-width: 180px;
    }
}

/* =========================================================
   SEARCH BAR — sticky top on /cerca-camere/
   ========================================================= */

.vg-search-bar {
    background: #fff;
    border-bottom: 1px solid var(--vg-decorative, #DFE2DA);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: var(--vg-z-sticky);
    box-shadow: var(--vg-shadow-sm);
}

/* =========================================================
   SEARCH RESULTS HEADER
   ========================================================= */

.vg-search-header {
    margin-bottom: 2rem;
}

.vg-search-header__h1 {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    margin-bottom: 0.5rem;
}

.vg-search-header__range {
    font-size: 0.95rem;
    color: rgba(44,42,36,0.65);
}

/* =========================================================
   BOOKING STEPPER
   ========================================================= */

.vg-booking-stepper-wrap {
    background: #fff;
    border-bottom: 1px solid var(--vg-decorative, #DFE2DA);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: var(--vg-z-sticky);
}

.vg-booking-stepper {
    /* nav element */
}

.vg-booking-stepper__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.vg-booking-stepper__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(44,42,36,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vg-booking-stepper__item--completed {
    color: var(--vg-accent, #4F6356);
}

.vg-booking-stepper__item--active {
    color: var(--vg-primary, #3E4F44);
}

.vg-booking-stepper__item--pending {
    color: rgba(44,42,36,0.35);
}

.vg-booking-stepper__bullet {
    width: 32px;
    height: 32px;
    border-radius: var(--vg-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid currentColor;
    background: transparent;
    transition: background var(--vg-duration-base) var(--vg-ease-out);
}

.vg-booking-stepper__item--completed .vg-booking-stepper__bullet {
    background: var(--vg-accent, #4F6356);
    border-color: var(--vg-accent, #4F6356);
    color: #fff;
}

.vg-booking-stepper__item--active .vg-booking-stepper__bullet {
    background: var(--vg-primary, #3E4F44);
    border-color: var(--vg-primary, #3E4F44);
    color: #fff;
}

.vg-booking-stepper__connector {
    flex: 1;
    max-width: 60px;
    height: 2px;
    background: var(--vg-decorative, #DFE2DA);
    margin: 0 8px;
    list-style: none;
}

.vg-booking-stepper__label {
    display: none;
}

@media (min-width: 480px) {
    .vg-booking-stepper__label {
        display: inline;
    }
}

/* =========================================================
   BOOKING SUMMARY SIDEBAR
   ========================================================= */

.vg-checkout-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 992px) {
    .vg-checkout-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }

    .vg-checkout-layout__main {
        flex: 0 0 65%;
    }

    .vg-booking-summary {
        flex: 0 0 calc(35% - 3rem);
        position: sticky;
        top: 100px;
    }
}

.vg-booking-summary {
    background: #fff;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-md);
    box-shadow: var(--vg-shadow-card);
    overflow: hidden;
}

.vg-booking-summary__inner {
    padding: var(--vg-space-summary-pad);
}

.vg-booking-summary__title {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    margin-bottom: 1rem;
}

.vg-booking-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    font-size: 0.9rem;
}

.vg-booking-summary__row + .vg-booking-summary__row {
    border-top: 1px solid var(--vg-decorative, #DFE2DA);
}

.vg-booking-summary__label {
    color: rgba(44,42,36,0.6);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vg-booking-summary__value {
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    text-align: right;
}

.vg-booking-summary__divider {
    height: 1px;
    background: var(--vg-decorative, #DFE2DA);
    margin: 16px 0;
}

.vg-booking-summary__edit-link {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: var(--vg-primary, #3E4F44);
    text-decoration: underline;
    margin-bottom: 1rem;
}

.vg-booking-summary__edit-link:hover {
    color: var(--vg-primary-dark, #33403A);
}

.vg-booking-summary__trust {
    background: var(--vg-success-bg, #E9F0EA);
    border: 1px solid var(--vg-success-border, #BFD3C2);
    border-radius: var(--vg-radius-sm);
    padding: 10px 12px;
    margin-bottom: 1rem;
}

.vg-booking-summary__trust p {
    font-size: 0.8rem;
    color: var(--vg-success, #8A5E50);
    margin: 0;
    line-height: 1.4;
}

.vg-booking-summary__contact {
    text-align: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E2E4DC;
}

.vg-booking-summary__tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4F6356;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.05rem;
    padding: 6px 0;
    transition: color 0.18s ease;
}
.vg-booking-summary__tel:hover {
    color: #3E4F44;
    text-decoration: none;
}
.vg-booking-summary__tel svg {
    color: #8A5E50;
    flex-shrink: 0;
}

/* =========================================================
   TRUST STRIP — .vg-trust-strip
   ========================================================= */

.vg-trust-strip {
    margin: 1.5rem 0;
}

.vg-trust-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.vg-trust-strip__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(44,42,36,0.75);
    white-space: nowrap;
}

.vg-trust-strip__icon {
    color: var(--vg-success, #8A5E50);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* =========================================================
   EMPTY STATE — .vg-empty-state
   ========================================================= */

.vg-empty-state {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-lg);
    box-shadow: var(--vg-shadow-xs);
}

.vg-empty-state__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: rgba(44,42,36,0.35);
}

.vg-empty-state__title {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    margin-bottom: 0.75rem;
}

.vg-empty-state__body {
    font-size: 0.95rem;
    color: rgba(44,42,36,0.7);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.vg-empty-state__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

@media (min-width: 480px) {
    .vg-empty-state__actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =========================================================
   ERROR STATE — .vg-error-state
   ========================================================= */

.vg-error-state {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--vg-error-bg, #F7ECEA);
    border: 1px solid var(--vg-error-border, #E8A89F);
    border-radius: var(--vg-radius-lg);
}

.vg-error-state__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--vg-error, #B93C2D);
}

.vg-error-state__title {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    margin-bottom: 0.75rem;
}

.vg-error-state__body {
    font-size: 0.95rem;
    color: rgba(44,42,36,0.75);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.vg-error-state__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

@media (min-width: 480px) {
    .vg-error-state__actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =========================================================
   CONFIRM HERO — /prenotazione-confermata/ & /pagamento-completato/
   ========================================================= */

.vg-confirm-hero {
    text-align: center;
    padding: 3rem 0 2rem;
    overflow: hidden;
}

.vg-confirm-hero__inner {
    max-width: 640px;
    margin: 0 auto;
}

.vg-confirm-hero__check {
    width: 80px;
    height: 80px;
    border-radius: var(--vg-radius-pill);
    background: var(--vg-success-bg, #E9F0EA);
    border: 2px solid var(--vg-success-border, #BFD3C2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--vg-success, #8A5E50);
}

.vg-confirm-hero__check--payment {
    background: var(--vg-accent-bg, #F3EFEA);
    border-color: var(--vg-warning-border, #D9CFC0);
    color: var(--vg-accent, #4F6356);
}

.vg-confirm-hero__title {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--vg-text, #2C2A24);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.vg-confirm-hero__sub {
    font-size: 1.05rem;
    color: rgba(44,42,36,0.7);
    line-height: 1.5;
    margin-bottom: 0;
}

.vg-confirm-hero__booking-ref {
    font-size: 1rem;
    color: rgba(44,42,36,0.75);
    margin-top: 0.75rem;
}

/* Booking confirmation MPHB output wrapper */
.vg-confirm-details {
    max-width: 680px;
    margin: 0 auto;
}

/* =========================================================
   NEXT STEPS — ol.vg-next-steps
   ========================================================= */

.vg-next-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 680px;
    margin: 0 auto;
    counter-reset: none;
}

.vg-next-steps__item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.vg-next-steps__num {
    width: 40px;
    height: 40px;
    border-radius: var(--vg-radius-pill);
    background: var(--vg-primary, #3E4F44);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 4px;
}

.vg-next-steps__body h3 {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    margin-bottom: 0.35rem;
}

.vg-next-steps__body p {
    font-size: 0.95rem;
    color: rgba(44,42,36,0.72);
    line-height: 1.55;
    margin: 0;
}

/* =========================================================
   CHECKOUT FORM — MPHB overrides inside .vg-checkout-form
   ========================================================= */

.vg-checkout-form .mphb-checkout-form,
.vg-checkout-form .mphb_sc_checkout {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Style MPHB field labels */
.vg-checkout-form label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(44,42,36,0.65);
}

/* Style MPHB inputs */
.vg-checkout-form input[type="text"],
.vg-checkout-form input[type="email"],
.vg-checkout-form input[type="tel"],
.vg-checkout-form textarea,
.vg-checkout-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-sm);
    font-family: var(--vg-font-body, inherit);
    font-size: 0.95rem;
    color: var(--vg-text, #2C2A24);
    background: #FAFBF8;
    transition: border-color var(--vg-duration-fast),
                box-shadow  var(--vg-duration-fast);
}

.vg-checkout-form input:focus,
.vg-checkout-form textarea:focus,
.vg-checkout-form select:focus {
    outline: none;
    border-color: var(--vg-primary, #3E4F44);
    box-shadow: var(--vg-focus-ring);
}

/* MPHB submit / book button */
.vg-checkout-form .mphb-book-button,
.vg-checkout-form .button.mphb-confirm-button,
.vg-checkout-form input[type="submit"] {
    background: var(--vg-primary, #3E4F44) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--vg-radius-sm) !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: background var(--vg-duration-base) var(--vg-ease-out) !important;
}

.vg-checkout-form .mphb-book-button:hover,
.vg-checkout-form input[type="submit"]:hover {
    background: var(--vg-primary-dark, #33403A) !important;
}

/* =========================================================
   GATEWAY TILE — .vg-gateway-tile
   ========================================================= */

.vg-gateway-tiles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.5rem;
}

@media (min-width: 600px) {
    .vg-gateway-tiles {
        flex-direction: row;
    }
}

.vg-gateway-tile {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-md);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--vg-duration-fast) var(--vg-ease-out),
                box-shadow  var(--vg-duration-fast) var(--vg-ease-out);
    position: relative;
}

.vg-gateway-tile:has(input:checked),
.vg-gateway-tile.is-selected {
    border-color: var(--vg-primary, #3E4F44);
    box-shadow: var(--vg-focus-ring);
}

.vg-gateway-tile input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.vg-gateway-tile__logo {
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.vg-gateway-tile__info {
    flex: 1;
}

.vg-gateway-tile__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vg-text, #2C2A24);
    display: block;
    margin-bottom: 2px;
}

.vg-gateway-tile__desc {
    font-size: 0.8rem;
    color: rgba(44,42,36,0.6);
}

.vg-gateway-tile__badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--vg-success-bg, #E9F0EA);
    color: var(--vg-success, #8A5E50);
    padding: 2px 6px;
    border-radius: var(--vg-radius-pill);
    white-space: nowrap;
    border: 1px solid var(--vg-success-border, #BFD3C2);
}

/* =========================================================
   BOOKING PAGE — layout helpers
   ========================================================= */

.vg-booking-page__h1 {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    margin-bottom: 0;
}

/* Section variants */
.vg-section--no-top {
    padding-top: 0 !important;
}


/* =========================================================
   LEGACY MPHB BOOKING CONFIRMATION — visual polish
   ========================================================= */

.vg-confirm-details .mphb-booking-info-table,
.vg-confirm-details .mphb_sc_booking_confirmation {
    background: #fff;
    border: 1px solid var(--vg-decorative, #DFE2DA);
    border-radius: var(--vg-radius-md);
    padding: 1.5rem;
    box-shadow: var(--vg-shadow-xs);
}

/* =========================================================
   MOBILE — general booking flow tweaks
   ========================================================= */

@media (max-width: 767px) {
    .vg-booking-stepper-wrap {
        padding: 12px 0;
    }

    .vg-booking-stepper__connector {
        max-width: 24px;
    }

    .page-booking .vg-booking-summary {
        /* On mobile summary appears below form */
        order: 2;
    }
}


/* =========================================================
   VG ROOM CARD (BEM) — applicato via template override MPHB
   File template: hotel-booking/shortcodes/rooms/room-content.php
   ========================================================= */

/* Wrapper */
.vg-room-card {
    background: #fff;
    border: 1px solid var(--vg-line, #E7E4DC);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 0 1.5rem;
    position: relative;
    transition: border-color 300ms ease;
}
.vg-room-card:hover {
    border-color: var(--vg-primary, #4F6356);
}

/* Photo */
.vg-room-card__photo {
    margin: 0;
    overflow: hidden;
    background: #F7F6F2;
    line-height: 0;
}
.vg-room-card__photo p,
.vg-room-card__photo a {
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
}
.vg-room-card__photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center 35%;
    transition: transform 400ms ease;
}
.vg-room-card:hover .vg-room-card__photo img {
    transform: scale(1.02);
}

/* Content */
.vg-room-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Header (eyebrow + title) */
.vg-room-card__header {
    margin: 0;
    padding: 0;
}
.vg-room-card__eyebrow {
    display: block;
    font-family: var(--vg-font-body, 'Lato', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4F6356;
    margin: 0 0 0.2rem;
}
.vg-room-card__title {
    margin: 0;
    padding: 0;
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;
    color: #2C2A24;
    border: none;
    position: relative;
}
.vg-room-card__title::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #4F6356;
    margin-top: 0.5rem;
}
.vg-room-card__title a,
.vg-room-card__title .mphb-room-type-title {
    color: inherit !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Excerpt */
.vg-room-card__excerpt {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(44,42,36, .72);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vg-room-card__excerpt p {
    margin: 0;
}

/* Attributes (Ospiti, Vista, Mq, Letto) */
.vg-room-card__attrs ul,
.vg-room-card__attrs .mphb-loop-room-type-attributes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}
.vg-room-card__attrs li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(44,42,36, .78);
}
.vg-room-card__attrs li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    opacity: 0.75;
}
.vg-room-card__attrs .mphb-room-type-total-capacity::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6356' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/></svg>");
}
.vg-room-card__attrs .mphb-room-type-view::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6356' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m2 22 8-10 6 7 6-9'/><path d='M2 22h20'/></svg>");
}
.vg-room-card__attrs .mphb-room-type-size::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6356' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='m8 8 8 8'/></svg>");
}
.vg-room-card__attrs .mphb-room-type-bed-type::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6356' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9V6c0-.6.4-1 1-1h18c.6 0 1 .4 1 1v3'/><path d='M2 11v8'/><path d='M22 11v8'/><path d='M2 14h20'/></svg>");
}
.vg-room-card__attrs .mphb-attribute-title {
    display: none;
}
.vg-room-card__attrs .mphb-attribute-value {
    color: #2C2A24;
    font-weight: 600;
}
/* Hide titolo "Dettagli" h3 ridondante */
.vg-room-card__attrs h3,
.vg-room-card__attrs .mphb-room-type-details-title {
    display: none;
}

/* Service chips */
.vg-room-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}
.vg-room-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #EDEBE4;
    border: 1px solid #D7D3C8;
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(44,42,36, .72);
}

/* Footer (price + actions) */
.vg-room-card__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #DFE2DA;
}

/* Price */
.vg-room-card__price {
    margin: 0;
    flex: 1 1 auto;
    min-width: 140px;
}
.vg-room-card__price p,
.vg-room-card__price > * {
    margin: 0;
    padding: 0;
}
.vg-room-card__price strong {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(44,42,36, .55);
    margin-bottom: 0.15rem;
}
.vg-room-card__price .mphb-price {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.85rem;
    font-weight: 700;
    color: #4F6356;
    line-height: 1;
}
.vg-room-card__price .mphb-currency {
    font-size: 1.1rem;
    font-weight: 600;
}
.vg-room-card__price .mphb-price-period {
    display: inline-block;
    font-size: 0.78rem;
    color: rgba(44,42,36, .65);
    margin-left: 0.25rem;
}
.vg-room-card__price .mphb-tax-information {
    display: block;
    font-size: 0.68rem;
    color: rgba(44,42,36, .5);
    font-style: italic;
    margin-top: 0.15rem;
}

/* Actions */
.vg-room-card__actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 1 auto;
}
.vg-room-card__actions p,
.vg-room-card__actions div,
.vg-room-card__actions form {
    margin: 0;
    padding: 0;
}
.vg-room-card__actions a.mphb-view-details-button {
    display: inline-block;
    background: transparent;
    color: #2C2A24;
    border: 1.5px solid #DFE2DA;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 200ms ease;
    cursor: pointer;
}
.vg-room-card__actions a.mphb-view-details-button:hover {
    background: #2C2A24;
    color: #fff;
    border-color: #2C2A24;
}
.vg-room-card__actions button.mphb-button,
.vg-room-card__actions button.mphb-book-button,
.vg-room-card__actions input[type="submit"].mphb-button {
    display: inline-block;
    background: #4F6356;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(79,99,86, 0.25);
    transition: all 200ms ease;
}
.vg-room-card__actions button.mphb-button:hover {
    background: #3E4F44;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(79,99,86, 0.35);
}
.vg-room-card__actions button.mphb-button:focus-visible,
.vg-room-card__actions a.mphb-view-details-button:focus-visible {
    outline: 3px solid #4F6356;
    outline-offset: 3px;
}

/* ---- DESKTOP layout (>=992px): foto sx 320px / content dx ---- */
@media (min-width: 992px) {
    .vg-room-card {
        display: grid;
        grid-template-columns: 320px 1fr;
        align-items: stretch;
    }
    .vg-room-card {
        min-height: 280px;
    }
    .vg-room-card__photo {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        overflow: hidden;
        line-height: 0;
    }
    .vg-room-card__photo p,
    .vg-room-card__photo a {
        display: block;
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .vg-room-card__photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        aspect-ratio: auto;
        object-fit: cover;
    }
    .vg-room-card__content {
        grid-column: 2;
        grid-row: 1;
        padding: 1.5rem 1.75rem;
    }
}

/* ---- MOBILE/TABLET (<992px): stack ---- */
@media (max-width: 991px) {
    .vg-room-card {
        display: block;
    }
    .vg-room-card__photo img {
        max-height: 240px;
        aspect-ratio: 16/9;
    }
    .vg-room-card__title {
        font-size: 1.35rem;
    }
    .vg-room-card__attrs ul,
    .vg-room-card__attrs .mphb-loop-room-type-attributes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.65rem;
    }
    .vg-room-card__price .mphb-price {
        font-size: 1.55rem;
    }
    .vg-room-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .vg-room-card__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .vg-room-card__actions a.mphb-view-details-button,
    .vg-room-card__actions button.mphb-button,
    .vg-room-card__actions button.mphb-book-button,
    .vg-room-card__actions .mphb-to-book-btn-wrapper,
    .vg-room-card__actions .mphb-to-book-btn-wrapper form {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ---- BRAND override per blocco "Consigliato" + sticky form ---- */

body.page-cerca-camere .vg-booking-form .vg-booking-form__nights {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #2C2A24;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 9999px;
    margin-top: 6px;
    width: fit-content;
}
body.page-cerca-camere .vg-booking-form--sticky .vg-booking-form__nights {
    position: absolute;
    top: -10px;
    right: 12px;
    margin: 0;
}
body.page-cerca-camere .vg-booking-form--sticky .vg-booking-form__field--dates .vg-booking-form__field-inner {
    position: relative;
}
body.page-cerca-camere .vg-booking-form--sticky,
body.page-cerca-camere .vg-booking-form,
body.page-cerca-camere .vg-booking-form__row,
body.page-cerca-camere .vg-booking-form__field,
body.page-cerca-camere .vg-booking-form__field--guests {
    overflow: visible;
}
body.page-cerca-camere .vg-booking-form__guests-dropdown {
    z-index: 9999;
    box-shadow: 0 16px 48px rgba(44,42,36, 0.18);
    background: #fff;
}
body.admin-bar.page-cerca-camere .vg-booking-form--sticky {
    margin-top: 32px;
}

/* Hide elementi MPHB ridondanti vuoti */
.mphb_sc_rooms-wrapper > p:empty,
.mphb_sc_rooms-wrapper > div:empty,
.mphb_sc_search_results-wrapper > p:empty,
.mphb_sc_search_results-wrapper > div:empty,
.mphb_sc_search_results-wrapper .mphb-rooms-reservation-message-wrapper,
.themo_mphb_search_recommend_wrapper:empty,
.mphb-reservation-cart.mphb-empty-cart {
    display: none;
}

/* Wrapper "Consigliato per N adulti" come card brandata leggera */
body.page-cerca-camere .themo_mphb_search_recommend_wrapper {
    background: #fff;
    border: 1px solid #DFE2DA;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0 2rem;
    position: relative;
    overflow: hidden;
}
body.page-cerca-camere .themo_mphb_search_recommend_wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4F6356 0%, #8A5E50 100%);
}
body.page-cerca-camere .themo_mphb_search_recommend_wrapper .mphb-recommendation-title {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.3rem;
    color: #2C2A24;
    margin: 0 0 0.85rem;
}
body.page-cerca-camere .themo_mphb_search_recommend_wrapper button.mphb-button {
    background: #4F6356 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.85rem 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(79,99,86, 0.25) !important;
}

/* Booking summary minimal */
.vg-booking-summary__minimal {
    color: rgba(44,42,36, .78);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    padding: 0.75rem 0;
}

/* Sticky bar mobile più compatta */
@media (max-width: 767px) {
    body.page-cerca-camere .vg-booking-form--sticky {
        padding: 0.75rem 1rem;
    }
    body.page-cerca-camere .vg-booking-form--sticky .vg-booking-form__field label {
        font-size: 0.65rem;
    }
    body.page-cerca-camere .vg-booking-form__field input[type="text"],
    body.page-cerca-camere .vg-booking-form__guests-toggle {
        font-size: 0.85rem;
        padding: 8px 10px 8px 32px;
    }
}

/* === END VG ROOM CARD === */

/* =========================================================
   MPHB CHECKOUT — visual polish (palette terra/oro)
   ========================================================= */

/* Wrapper esterno del shortcode */
.vg-checkout-form .mphb_sc_checkout-wrapper {
    margin: 0;
    padding: 0;
}

/* Error state: data incorretta o sessione scaduta */
.vg-checkout-form .mphb-data-incorrect {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: #EFEEE8;
    border: 1px solid #D9CFC0;
    border-left: 4px solid var(--vg-primary, #3E4F44);
    border-radius: var(--vg-radius-md, 10px);
    color: var(--vg-text, #2C2A24);
    font-family: var(--vg-font-body);
    font-size: 0.95rem;
    line-height: 1.55;
}

.vg-checkout-form .mphb-data-incorrect br {
    display: block;
    content: "";
    margin-top: 0.35rem;
}

.vg-checkout-form .mphb-data-incorrect::before {
    content: "\26A0";
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.1rem;
    color: var(--vg-primary, #3E4F44);
    font-weight: 700;
}

/* Sezioni del form: separatori chiari */
.vg-checkout-form .mphb_sc_checkout-section,
.vg-checkout-form .mphb-checkout-pricing,
.vg-checkout-form .mphb-customer-info-fields,
.vg-checkout-form .mphb_sc_checkout-payment,
.vg-checkout-form .mphb-coupon-section,
.vg-checkout-form .mphb-confirm-fields {
    margin: 0 0 1.75rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--vg-decorative, #DFE2DA);
}

.vg-checkout-form > *:first-child,
.vg-checkout-form .mphb_sc_checkout-wrapper > *:first-child,
.vg-checkout-form .mphb_sc_checkout > *:first-child,
.vg-checkout-form .mphb_sc_checkout-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* Heading delle sezioni MPHB */
.vg-checkout-form h3,
.vg-checkout-form h4,
.vg-checkout-form .mphb_sc_checkout-section-title {
    font-family: var(--vg-font-heading, 'Cormorant Garamond', serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--vg-text, #2C2A24);
    margin: 0 0 0.85rem;
    line-height: 1.25;
}

/* Campi customer in 2 colonne (nome/cognome, email/tel) su desktop */
@media (min-width: 600px) {
    .vg-checkout-form .mphb-customer-info-fields .mphb-customer-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.25rem;
    }
    .vg-checkout-form .mphb-customer-info-fields .mphb-customer-fields > .mphb-required-field--full,
    .vg-checkout-form .mphb-customer-info-fields .mphb-customer-fields textarea,
    .vg-checkout-form .mphb-customer-info-fields .mphb-customer-fields .mphb-note-field {
        grid-column: 1 / -1;
    }
}

/* Riepilogo prezzo: tabella prezzi */
.vg-checkout-form .mphb-checkout-pricing table,
.vg-checkout-form table.mphb-price-breakdown {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-family: var(--vg-font-body);
    font-size: 0.95rem;
}

.vg-checkout-form .mphb-checkout-pricing table td,
.vg-checkout-form table.mphb-price-breakdown td {
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--vg-decorative, #DFE2DA);
    color: var(--vg-text, #2C2A24);
}

.vg-checkout-form .mphb-checkout-pricing table tr:last-child td,
.vg-checkout-form table.mphb-price-breakdown tr.mphb-total td {
    border-bottom: none;
    border-top: 2px solid var(--vg-text, #2C2A24);
    padding-top: 0.85rem;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Confirm button (submit finale) — può essere <button> o <input> */
.vg-checkout-form .mphb_sc_checkout-button,
.vg-checkout-form .mphb-confirm-fields .button,
.vg-checkout-form button.mphb-confirm-reservation-button,
.vg-checkout-form button[type="submit"].mphb-confirm-button {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 16px 28px !important;
    background: var(--vg-primary, #3E4F44) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--vg-radius-sm, 8px) !important;
    font-family: var(--vg-font-body) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.vg-checkout-form .mphb_sc_checkout-button:hover,
.vg-checkout-form .mphb-confirm-fields .button:hover,
.vg-checkout-form button.mphb-confirm-reservation-button:hover,
.vg-checkout-form button[type="submit"].mphb-confirm-button:hover {
    background: var(--vg-primary-dark, #33403A) !important;
}

/* Checkbox terms / privacy */
.vg-checkout-form .mphb-confirm-fields label,
.vg-checkout-form .mphb-required-field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--vg-text, #2C2A24);
    font-weight: 400;
}

.vg-checkout-form .mphb-confirm-fields input[type="checkbox"],
.vg-checkout-form .mphb-required-field-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--vg-primary, #3E4F44);
    cursor: pointer;
}

/* Required asterisk */
.vg-checkout-form .mphb-required {
    color: var(--vg-primary, #3E4F44);
    margin-left: 0.15rem;
    font-weight: 700;
}

/* Coupon section */
.vg-checkout-form .mphb-coupon-section input[type="text"] {
    max-width: 280px;
    display: inline-block;
    margin-right: 0.5rem;
}

.vg-checkout-form .mphb-coupon-section .button {
    display: inline-block;
    width: auto;
    padding: 10px 20px !important;
    margin: 0 !important;
}

/* Mobile spacing */
@media (max-width: 600px) {
    .vg-checkout-form .mphb_sc_checkout-section,
    .vg-checkout-form .mphb-checkout-pricing,
    .vg-checkout-form .mphb-customer-info-fields,
    .vg-checkout-form .mphb_sc_checkout-payment,
    .vg-checkout-form .mphb-coupon-section,
    .vg-checkout-form .mphb-confirm-fields {
        margin-bottom: 1.5rem;
        padding-top: 1rem;
    }
    .vg-checkout-form h3,
    .vg-checkout-form h4 {
        font-size: 1.2rem;
    }
}

/* =========================================================
   PAYMENT PAGE — /pagamento/ + /pagamento-in-attesa/
   ========================================================= */

.page-pagamento .vg-payment-page,
.page-pagamento-in-attesa .container > section,
.page-pagamento-in-attesa .vg-pending-hero {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Summary card */
.vg-payment-summary {
    background-color: #ffffff;
    border: 1px solid var(--vg-border, #DFE2DA);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 32px;
    box-shadow: 0 2px 8px rgba(79,99,86, 0.06);
}
.vg-payment-summary__header {
    margin-bottom: 24px;
    text-align: center;
}
.vg-payment-summary__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background-color: #F7F6F2;
    color: #4F6356;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 16px;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}
.vg-payment-summary__title {
    margin: 0 0 8px;
    font-size: 1.7rem;
    color: #2C2A24;
    font-weight: 600;
    line-height: 1.3;
}
.vg-payment-summary__lede {
    margin: 0;
    color: #6E6A5E;
    font-size: 0.95rem;
    line-height: 1.6;
}
.vg-payment-summary__grid {
    display: grid;
    gap: 14px;
}
.vg-payment-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #E2E4DC;
}
.vg-payment-summary__row:last-child {
    border-bottom: none;
}
.vg-payment-summary__row--total {
    padding-top: 18px;
    margin-top: 8px;
    border-top: 2px solid #4F6356;
    border-bottom: none;
}
.vg-payment-summary__label {
    color: #6E6A5E;
    font-size: 0.95rem;
}
.vg-payment-summary__value {
    color: #2C2A24;
    font-weight: 600;
    text-align: right;
}
.vg-payment-summary__total {
    color: #4F6356;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Gateway tiles */
.vg-gateway-section {
    margin: 40px 0 32px;
}
.vg-gateway-section__title {
    text-align: center;
    margin: 0 0 24px;
    font-size: 1.4rem;
    color: #2C2A24;
    font-weight: 600;
}
.vg-gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.vg-gateway-tile {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 2px solid #DFE2DA;
    border-radius: 12px;
    padding: 24px 22px;
    text-align: center;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    margin: 0;
}
.vg-gateway-tile:hover {
    border-color: #4F6356;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(79,99,86, 0.12);
}
.vg-gateway-tile:focus-within {
    outline: 2px solid #8A5E50;
    outline-offset: 2px;
}
.vg-gateway-tile__icon {
    color: #4F6356;
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
}
.vg-gateway-tile__body {
    flex: 1;
    margin-bottom: 18px;
}
.vg-gateway-tile__title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: #2C2A24;
    font-weight: 600;
}
.vg-gateway-tile__subtitle {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: #4F6356;
    font-weight: 500;
}
.vg-gateway-tile__description {
    margin: 0;
    font-size: 0.88rem;
    color: #6E6A5E;
    line-height: 1.55;
}
.vg-gateway-tile__cta {
    background-color: #4F6356;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.18s ease;
    width: 100%;
}
.vg-gateway-tile__cta:hover {
    background-color: #3E4F44;
}
.vg-gateway-tile__cta svg {
    transition: transform 0.18s ease;
}
.vg-gateway-tile__cta:hover svg {
    transform: translateX(3px);
}

/* Trust strip */
.vg-payment-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    padding: 22px;
    background-color: #F7F6F2;
    border-radius: 10px;
    margin-top: 28px;
}
.vg-payment-trust__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #6E6A5E;
}
.vg-payment-trust__item svg {
    color: #4F6356;
    flex-shrink: 0;
}
.vg-payment-trust__item strong {
    color: #2C2A24;
    font-size: 0.92rem;
    display: block;
    margin-bottom: 2px;
}
.vg-payment-trust__item span {
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Inline error banner */
.vg-payment-banner {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 0.95rem;
}
.vg-payment-banner--error {
    background-color: #fdf2f2;
    border-left: 4px solid #c54040;
    color: #6b3030;
}

/* Error/empty state (invalid link, cancelled) */
.vg-payment-error {
    text-align: center;
    padding: 48px 24px;
    max-width: 540px;
    margin: 0 auto;
}
.vg-payment-error__icon {
    color: #c54040;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}
.vg-payment-error__title {
    margin: 0 0 14px;
    font-size: 1.6rem;
    color: #2C2A24;
    font-weight: 600;
}
.vg-payment-error__message {
    margin: 0 0 28px;
    color: #6E6A5E;
    font-size: 1rem;
    line-height: 1.65;
}
.vg-payment-error__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Generic button shared by payment error + pending pages */
.vg-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
.vg-button--primary {
    background-color: #4F6356;
    color: #ffffff;
}
.vg-button--primary:hover {
    background-color: #3E4F44;
    color: #ffffff;
}
.vg-button--ghost {
    background-color: transparent;
    color: #4F6356;
    border-color: #4F6356;
}
.vg-button--ghost:hover {
    background-color: #4F6356;
    color: #ffffff;
}

/* Pending hero (bank transfer landing) */
.vg-pending-hero {
    text-align: center;
    padding: 32px 24px;
    margin-bottom: 28px;
}
.vg-pending-hero__icon {
    color: #8A5E50;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}
.vg-pending-hero__title {
    margin: 0 0 12px;
    font-size: 1.8rem;
    color: #2C2A24;
    font-weight: 600;
    line-height: 1.3;
}
.vg-pending-hero__lede {
    margin: 0;
    color: #6E6A5E;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Bank info card */
.vg-bank-info {
    background-color: #ffffff;
    border: 1px solid #8A5E50;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(79,99,86, 0.15);
}
.vg-bank-info__title {
    margin: 0 0 20px;
    font-size: 1.2rem;
    color: #4F6356;
    font-weight: 600;
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #E2E4DC;
}
.vg-bank-info__grid {
    margin: 0;
    display: grid;
    gap: 14px;
}
.vg-bank-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}
.vg-bank-info__row dt {
    color: #6E6A5E;
    font-size: 0.95rem;
    margin: 0;
}
.vg-bank-info__row dd {
    color: #2C2A24;
    font-weight: 600;
    text-align: right;
    margin: 0;
}
.vg-bank-info__row--highlight {
    background-color: #EFEEE8;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 4px;
}
.vg-bank-info__row--missing dd {
    color: #c54040;
    font-style: italic;
    font-weight: 400;
}
.vg-bank-info__mono {
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: #4F6356 !important;
}
.vg-bank-info__amount {
    color: #4F6356 !important;
    font-size: 1.2rem;
    font-weight: 700;
}
.vg-bank-info__note {
    margin: 20px 0 0;
    padding: 12px 16px;
    background-color: #F7F6F2;
    border-radius: 6px;
    color: #6E6A5E;
    font-size: 0.88rem;
    text-align: center;
}

/* Next steps */
.vg-next-steps {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 28px 32px;
    border: 1px solid #DFE2DA;
}
.vg-next-steps__title {
    margin: 0 0 18px;
    font-size: 1.15rem;
    color: #2C2A24;
    font-weight: 600;
    text-align: center;
}
.vg-next-steps__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: vg-step;
    display: grid;
    gap: 14px;
}
.vg-next-steps__list li {
    counter-increment: vg-step;
    padding: 16px 18px 16px 56px;
    background-color: #F7F6F2;
    border-radius: 8px;
    position: relative;
}
.vg-next-steps__list li::before {
    content: counter(vg-step);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #4F6356;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.vg-next-steps__list strong {
    display: block;
    margin-bottom: 2px;
    color: #2C2A24;
    font-weight: 600;
    font-size: 0.98rem;
}
.vg-next-steps__list span {
    color: #6E6A5E;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* =========================================================
   /booking/ — sidebar price breakdown mirror
   ========================================================= */

/* Hide the original MPHB breakdown inside the form (we mirror it into sidebar) */
.vg-checkout-form #mphb-price-details {
    display: none !important;
}

/* Hide MPHB's standalone "Total Price: €XXX" line inside the form
   (it's already shown in the sidebar breakdown total row). */
.vg-checkout-form .mphb-total-price {
    display: none !important;
}

/* Hide the duplicate "Price Breakdown" / "Ripartizione dei prezzi" h4 inside
   the mirrored breakdown — the sidebar already has "Riepilogo soggiorno"
   as heading so this is redundant. */
.vg-summary-breakdown .mphb-price-breakdown-title {
    display: none !important;
}

/* Two prominent date boxes (check-in / check-out) */
.vg-booking-summary__dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: stretch;
    margin: 8px 0 16px;
}
.vg-booking-summary__date-box {
    background: linear-gradient(135deg, #F7F6F2 0%, #EFE7D7 100%);
    border: 1px solid #DFE2DA;
    border-radius: 8px;
    padding: 14px 12px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vg-booking-summary__date-label {
    font-size: 0.7rem;
    color: #4F6356;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    margin-bottom: 4px;
}
.vg-booking-summary__date-day {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2C2A24;
    line-height: 1.1;
}
.vg-booking-summary__date-year {
    font-size: 0.78rem;
    color: #6E6A5E;
    margin-bottom: 4px;
}
.vg-booking-summary__date-time {
    font-size: 0.75rem;
    color: #4F6356;
    font-weight: 600;
    padding-top: 4px;
    border-top: 1px dashed #CFC7B5;
}
.vg-booking-summary__date-arrow {
    align-self: center;
    color: #8A5E50;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0 4px;
}
@media (max-width: 600px) {
    .vg-booking-summary__dates {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .vg-booking-summary__date-arrow {
        display: none;
    }
    .vg-booking-summary__date-box {
        padding: 12px;
    }
}

/* Compact meta strip (durata, ospiti) — without dates now */
.vg-booking-summary__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 4px 0 16px;
    border-bottom: 1px solid #E2E4DC;
    margin-bottom: 16px;
}
.vg-booking-summary__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vg-booking-summary__meta-label {
    font-size: 0.75rem;
    color: #9A9384;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.vg-booking-summary__meta-value {
    color: #2C2A24;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Flat breakdown rendered by booking-summary-breakdown.js — definition list */
.vg-summary-breakdown {
    background-color: #F7F6F2;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.vg-summary-breakdown__placeholder {
    color: #9A9384;
    font-size: 0.88rem;
    margin: 0;
    text-align: center;
    font-style: italic;
}
.vg-breakdown {
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
}
.vg-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #DFE2DA;
}
.vg-breakdown__row:last-child {
    border-bottom: none;
}
.vg-breakdown__label {
    color: #2C2A24;
    font-weight: 500;
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.35;
}
.vg-breakdown__price {
    color: #2C2A24;
    font-weight: 600;
    margin: 0;
    text-align: right;
    white-space: nowrap;
    flex: 0 0 auto;
}
.vg-breakdown__row--service .vg-breakdown__label,
.vg-breakdown__row--fee .vg-breakdown__label {
    color: #6E6A5E;
    padding-left: 12px;
    position: relative;
}
.vg-breakdown__row--service .vg-breakdown__label::before,
.vg-breakdown__row--fee .vg-breakdown__label::before {
    content: "+";
    color: #4F6356;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
}
.vg-breakdown__row--tax .vg-breakdown__label {
    color: #6E6A5E;
    font-style: italic;
    font-size: 0.88rem;
}
.vg-breakdown__row--tax .vg-breakdown__price {
    color: #6E6A5E;
    font-weight: 500;
    font-size: 0.88rem;
}
.vg-breakdown__row--total {
    border-top: 2px solid #4F6356;
    border-bottom: none !important;
    margin-top: 4px;
    padding-top: 12px;
}
.vg-breakdown__row--total .vg-breakdown__label,
.vg-breakdown__row--total .vg-breakdown__price {
    color: #4F6356;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Relocated terms + submit area inside the sidebar */
.vg-summary-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #E2E4DC;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vg-summary-actions .mphb-terms-and-conditions-accept {
    margin: 0;
    padding: 12px 14px;
    background-color: #F7F6F2;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #2C2A24;
}
.vg-summary-actions .mphb-terms-and-conditions-accept label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.vg-summary-actions .mphb-terms-and-conditions-accept input[type=checkbox] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #4F6356;
    width: 16px;
    height: 16px;
}
.vg-summary-actions .mphb-terms-and-conditions-accept a {
    color: #4F6356;
    text-decoration: underline;
}
.vg-summary-actions .mphb_sc_checkout-submit-wrapper {
    margin: 0;
}
.vg-summary-actions input[type=submit],
.vg-summary-actions .vg-summary-submit {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background-color: #4F6356;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
    text-transform: none;
}
.vg-summary-actions input[type=submit]:hover,
.vg-summary-actions .vg-summary-submit:hover {
    background-color: #3E4F44;
    transform: translateY(-1px);
}
.vg-summary-actions input[type=submit]:active,
.vg-summary-actions .vg-summary-submit:active {
    transform: translateY(0);
}

/* Hide the original terms + submit in the form body (they live in sidebar now) */
.vg-checkout-form .mphb-terms-and-conditions-accept,
.vg-checkout-form .mphb_sc_checkout-submit-wrapper {
    display: none !important;
}

/* =========================================================
   /booking/ — checkout form restructure
   ========================================================= */

/* Use flexbox on the form so we can reorder children regardless of MPHB priority */
.vg-checkout-form .mphb_sc_checkout-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.vg-checkout-form #mphb-booking-details { order: 3; }
.vg-checkout-form #mphb-customer-details { order: 2; }
.vg-checkout-form #mphb-price-details { order: 5; }
.vg-checkout-form #mphb-coupon-details { order: 6; }
.vg-checkout-form .mphb-checkout-text-wrapper { order: 4; }

/* Hide everything inside booking-details EXCEPT the services-details section.
   The customer chose room+adults+children+rate in /cerca-camere/ already. */
.vg-checkout-form #mphb-booking-details .mphb-booking-details-title,
.vg-checkout-form #mphb-booking-details .mphb-room-number,
.vg-checkout-form #mphb-booking-details .mphb-room-type-title,
.vg-checkout-form #mphb-booking-details .mphb-adults-chooser,
.vg-checkout-form #mphb-booking-details .mphb-children-chooser,
.vg-checkout-form #mphb-booking-details .mphb-guest-name-wrapper,
.vg-checkout-form #mphb-booking-details .mphb-rate-chooser,
.vg-checkout-form #mphb-booking-details .mphb-check-in-date,
.vg-checkout-form #mphb-booking-details .mphb-check-out-date {
    display: none !important;
}

/* But keep the hidden adult/children inputs functional for submission.
   MPHB renders them inside the choosers above; CSS hide preserves form data. */

/* Style the services-details that remains visible */
.vg-checkout-form .mphb-services-details {
    background-color: #ffffff;
    border: 1px solid #DFE2DA;
    border-radius: 8px;
    padding: 20px 22px;
    margin: 0;
}
.vg-checkout-form .mphb-services-details-title {
    margin: 0 0 12px;
    color: #4F6356;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #E2E4DC;
    padding-bottom: 8px;
}
.vg-checkout-form .mphb_sc_checkout-services-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vg-checkout-form .mphb_sc_checkout-services-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #E2E4DC;
}
.vg-checkout-form .mphb_sc_checkout-services-list li:last-child {
    border-bottom: none;
}

/* Style customer details ("Le tue informazioni") */
.vg-checkout-form #mphb-customer-details {
    background-color: #ffffff;
    border: 1px solid #DFE2DA;
    border-radius: 8px;
    padding: 22px 24px;
    margin: 0;
}
.vg-checkout-form #mphb-customer-details .mphb-customer-details-title,
.vg-checkout-form .mphb-customer-details-title {
    margin: 0 0 16px;
    color: #4F6356;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #E2E4DC;
    padding-bottom: 8px;
}

/* Coupon section — bottom */
.vg-checkout-form #mphb-coupon-details {
    background-color: #F7F6F2;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0;
}
.vg-checkout-form #mphb-coupon-details .mphb-coupon-code-title {
    color: #6E6A5E;
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0 0 8px;
    display: block;
}

/* Mobile tweaks for restructured form */
@media (max-width: 600px) {
    .vg-checkout-form .mphb-services-details,
    .vg-checkout-form #mphb-customer-details {
        padding: 18px 16px;
    }
}

/* Mobile: stack columns, summary FIRST (above form) so customer sees price */
@media (max-width: 900px) {
    .vg-checkout-layout {
        display: flex;
        flex-direction: column;
    }
    .vg-checkout-layout__main {
        order: 2;
    }
    .vg-booking-summary {
        order: 1;
        margin-bottom: 24px;
        position: relative !important;
        top: 0 !important;
    }
    .vg-booking-summary__inner {
        padding: 20px 18px;
    }
    .vg-booking-summary__meta {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
        padding-bottom: 12px;
    }
    .vg-booking-summary__meta-value {
        font-size: 0.92rem;
    }
    .vg-summary-breakdown {
        padding: 14px 14px;
    }
    .vg-summary-breakdown table.mphb-price-breakdown {
        font-size: 0.85rem;
    }
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .vg-payment-summary,
    .vg-bank-info,
    .vg-next-steps {
        padding: 22px 18px;
    }
    .vg-payment-summary__title {
        font-size: 1.4rem;
    }
    .vg-gateway-grid {
        grid-template-columns: 1fr;
    }
    .vg-payment-trust {
        padding: 16px;
        gap: 12px;
    }
    .vg-pending-hero__title {
        font-size: 1.5rem;
    }
    .vg-bank-info__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .vg-bank-info__row dd {
        text-align: left;
    }
}