@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

.zeevou-plan-builder {
    /* Zeevou design tokens (Sign-up Process library). Previously these four
       purples were Tailwind's violet ramp, which drifted from 01 Primary. */
    --zpb-purple: #6c1dcc !important;              /* 01 Primary/03 Main */
    --zpb-purple-dark: #5817a6 !important;         /* hover only -- no Figma token, derived */
    --zpb-purple-light: #c69bf9 !important;        /* 01 Primary/02 Light */
    --zpb-purple-bg: #f6f1fd !important;           /* 01 Primary/01 Lighter */
    --zpb-purple-8: rgba(108, 29, 204, 0.08) !important;   /* 08 Transparent/01 Primary/8% */
    --zpb-purple-12: rgba(108, 29, 204, 0.12) !important;  /* 08 Transparent/01 Primary/12% */
    --zpb-purple-16: rgba(108, 29, 204, 0.16) !important;  /* 08 Transparent/01 Primary/16% */
    --zpb-purple-48: rgba(108, 29, 204, 0.48) !important;  /* 08 Transparent/01 Primary/48% */
    --zpb-info: #3366ff !important;                /* 02 Info/03 Main */
    --zpb-error: #e30168 !important;               /* 05 Error/03 Main */
    --zpb-error-bg: #fff2f8 !important;            /* 05 Error/01 Lighter */
    --zpb-action: #637381 !important;              /* 12 Action States/Light/01 Active */
    --zpb-divider: #919eab !important;             /* 13 Others/Divider */
    --zpb-text: #212b36 !important;                /* 10 Text Color/Light/01 Text Primary */
    --zpb-muted: #596a78 !important;               /* 10 Text Color/Light/02 Text Secondary */
    --zpb-muted-light: #919eab !important;         /* 10 Text Color/Light/03 Text Disabled */
    --zpb-border: #e5e7eb !important;
    --zpb-badge-bg: #f3f4f6 !important;
    --zpb-badge-text: #4b5563 !important;
    --zpb-accent-bg: #dcfce7 !important;
    --zpb-accent-text: #007b55 !important;         /* 03 Success/04 Dark */
    --zpb-grey-100: #f9fafb !important;            /* 06 Grey/100 */
    --zpb-grey-400: #c4cdd5 !important;            /* 06 Grey/400 */
    --zpb-grey-500: #919eab !important;
    --zpb-grey-500-8: rgba(145, 158, 171, 0.08) !important;
    --zpb-grey-500-12: rgba(145, 158, 171, 0.12) !important;
    --zpb-grey-500-16: rgba(145, 158, 171, 0.16) !important;
    --zpb-grey-500-24: rgba(145, 158, 171, 0.24) !important;
    --zpb-grey-500-32: rgba(145, 158, 171, 0.32) !important;  /* 08 Transparent/06 Grey/32% */
    --zpb-grey-500-80: rgba(145, 158, 171, 0.8) !important;
    --zpb-grey-800: #212b36 !important;

    margin: 0 auto !important;
    padding: 2rem 1rem 7rem !important;
    font-size: 1rem !important;
    color: var(--zpb-text) !important;
}

.zeevou-plan-builder * {
    box-sizing: border-box !important;
}

.zpb-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.zpb-title {
    font-family: 'Nunito', sans-serif !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 56px !important;
    letter-spacing: -0.5px !important;
    color: var(--zpb-text) !important;
    margin: 0 !important;
}

.zpb-subtitle {
    color: var(--zpb-text) !important;
    /*margin: 0 !important;*/
    font-family: 'Nunito', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
}

.zpb-status {
    text-align: center !important;
    padding: 2rem 0 !important;
    color: var(--zpb-muted) !important;
}

.zpb-status--error {
    color: #b32d2e !important;
}

/* Controls */

.zpb-controls-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.zpb-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 8px !important;
}

.zpb-counters {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.zpb-controls > .zpb-counters:first-child {
    flex: 0 0 auto !important;
}

.zpb-controls > .zpb-counters:last-child {
    flex: 0 0 auto !important;
}

.zpb-counter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 226.25px !important;
    min-width: 226.25px !important;
    height: 36px !important;
    border: 1px solid var(--zpb-grey-500-16) !important;
    border-radius: 24px !important;
    padding: 6px 4px 6px 12px !important;
    background: var(--zpb-grey-100) !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, border-color 150ms ease !important;
}

.zpb-counter:focus-within {
    background: #fff !important;
    border-color: var(--zpb-grey-500-16) !important;
}

/* Validation error -- pink fill, error border, error-coloured value.
   Matches the Units/Rooms fields in 16706:56847. */
.zpb-counter--error {
    background: var(--zpb-error-bg) !important;
    border-color: var(--zpb-error) !important;
}

.zpb-counter--error:focus-within {
    background: var(--zpb-error-bg) !important;
    border-color: var(--zpb-error) !important;
}

.zpb-counter--error .zpb-counter__value {
    color: var(--zpb-error) !important;
}

.zpb-counter--error:hover .zpb-counter__value,
.zpb-counter--error:focus-within .zpb-counter__value,
.zpb-counter--error .zpb-counter__value:focus {
    background: transparent !important;
    color: var(--zpb-error) !important;
}

/* Inline alert -- 16706:57995. Pink band, 8px radius, close-circle start icon. */
.zpb-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 16px 12px !important;
    border-radius: 8px !important;
    font-family: 'Nunito', sans-serif !important;
}

.zpb-alert--error {
    background: var(--zpb-error-bg) !important;
    color: var(--zpb-error) !important;
}

.zpb-alert__icon {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
}

.zpb-alert__icon svg {
    display: block !important;
}

.zpb-alert__message {
    margin: 0 !important;
    padding-left: 8px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
}

.zpb-counter--grey {
    background: var(--zpb-grey-100) !important;
}

.zpb-counter--plain {
    width: 144px !important;
    min-width: 144px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 6px 0 6px 8px !important;
    background: #fff !important;
    border-color: transparent !important;
}

.zpb-counter--plain .zpb-counter__label {
    color: var(--zpb-muted) !important;
}

.zpb-counter__info {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.zpb-counter__icon {
    color: var(--zpb-grey-500) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.zpb-counter__label {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-grey-800) !important;
    white-space: nowrap !important;
}

.zpb-counter__stepper {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    color: #000 !important;
}

.zpb-step {
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    outline: none !important;
    background: transparent !important;
    color: var(--zpb-grey-500) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.zpb-step svg {
    width: 16px !important;
    height: 16px !important;
}

.zpb-step:hover:not(:disabled) {
    background: var(--zpb-grey-500-8) !important;
}

.zpb-step:focus-visible {
    outline: 2px solid var(--zpb-grey-500-24) !important;
    outline-offset: 1px !important;
}

.zpb-step:disabled {
    color: var(--zpb-grey-400) !important;
    cursor: default !important;
}

.zpb-counter__value {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    text-align: center !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 4px !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    color: #000 !important;
    outline: none !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
    caret-color: var(--zpb-purple) !important;
    cursor: text !important;
    transition: background-color 150ms ease !important;
}

.zpb-counter:hover .zpb-counter__value {
    background: var(--zpb-purple-bg) !important;
}

.zpb-counter:focus-within .zpb-counter__value,
.zpb-counter__value:focus {
    background: #fff !important;
}

.zpb-counter__value::-webkit-outer-spin-button,
.zpb-counter__value::-webkit-inner-spin-button {
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.zpb-billing {
    display: inline-flex !important;
    align-items: center !important;
    width: 226.25px !important;
    min-width: 226.25px !important;
    height: 36px !important;
    border: solid 1px var(--zpb-grey-500-16) !important;
    border-radius: 24px !important;
    padding: 4px !important;
    gap: 0 !important;
    background: var(--zpb-grey-100) !important;
}

.zpb-billing__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 28px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 4px 4px 4px 12px !important;
    border-radius: 24px !important;
    cursor: pointer !important;
    color: var(--zpb-muted) !important;
    white-space: nowrap !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    vertical-align: middle !important;
}

.zpb-billing__btn:first-child {
    flex: 1 1 0 !important;
    align-self: stretch !important;
    padding: 6px 8px !important;
}

.zpb-billing__btn:last-child {
    flex: 0 0 auto !important;
    padding: 4px 4px 4px 12px !important;
}

.zpb-billing__btn.is-active {
    background: var(--zpb-purple-bg) !important;
    color: var(--zpb-purple) !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    vertical-align: middle !important;
}

.zpb-badge {
    display: inline-flex !important;
    align-items: center !important;
    height: 20px !important;
    background: var(--zpb-purple-8) !important;
    color: var(--zpb-purple) !important;
    padding: 2px 8px !important;
    border: 1px solid var(--zpb-purple-8) !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    text-align: center !important;
}

.zpb-plan-card:not(.is-popular) .zpb-badge {
    background: var(--zpb-grey-500-16) !important;
    border-color: var(--zpb-grey-500-8) !important;
    color: var(--zpb-muted) !important;
}

.zpb-plan-card.is-popular .zpb-badge {
    background: rgba(0, 171, 85, 0.16) !important;
    border-color: rgba(0, 171, 85, 0.08) !important;
    color: var(--zpb-accent-text) !important;
}

/* Plan cards */

.zpb-plans {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
}

.zpb-plan-card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 496px !important;
    border: 1px solid var(--zpb-grey-500-16) !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 20px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    box-shadow: 0 1px 1px var(--zpb-grey-500-12) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.zpb-plan-card.is-active {
    border-color: var(--zpb-purple-48) !important;
    box-shadow: 0 5px 14px var(--zpb-purple-12) !important;
}

.zpb-plan-card.is-popular {
    background: var(--zpb-purple-bg) !important;
    border-color: var(--zpb-purple-12) !important;
    box-shadow: 0 4px 6px rgba(74, 20, 140, 0.10) !important;
}

.zpb-ribbon {
    position: absolute !important;
    top: -11px !important;
    left: 15px !important;
    transform: none !important;
    height: 20px !important;
    background: var(--zpb-purple) !important;
    color: #fff !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16px !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.zpb-ribbon svg {
    width: 14px !important;
    height: 14px !important;
}

.zpb-plan-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 24px !important;
    margin-bottom: 0 !important;
}

.zpb-plan-card__name {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.24px !important;
    vertical-align: middle !important;
    color: var(--zpb-text) !important;
}

.zpb-plan-card__price {
    min-height: 48px !important;
    margin-top: 12px !important;
    margin-bottom: 24px !important;
}

.zpb-price-was {
    display: block !important;
    text-decoration: line-through !important;
    color: var(--zpb-muted-light) !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
}

.zpb-price-now {
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25px !important;
    color: var(--zpb-text) !important;
}

.zpb-price-now small {
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    color: var(--zpb-text) !important;
    margin-left: 4px !important;
}

.zpb-price-free {
    display: inline-block !important;
    margin-top: 16px !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    letter-spacing: 0.25px !important;
    color: var(--zpb-text) !important;
}

.zpb-plan-card__group {
    margin-bottom: 24px !important;
}

.zpb-plan-card__label {
    display: block !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--zpb-muted-light) !important;
    margin-bottom: 8px !important;
}

.zpb-plan-card__group ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.zpb-mini-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 16px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
}

.zpb-mini-row img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.zpb-plan-card__addlink {
    border: 0 !important;
    background: none !important;
    color: var(--zpb-info) !important;
    font-family: 'Nunito', sans-serif !important;
    min-height: 24px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    padding: 4px !important;
    margin-top: -4px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

.zpb-plan-card__footer {
    margin-top: auto !important;
    padding-top: 0 !important;
}

.zpb-select-btn {
    width: 100% !important;
    height: 32px !important;
    border: 0 !important;
    background: var(--zpb-purple) !important;
    color: #fff !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 16px rgba(108, 29, 204, 0.24) !important;
}

.zpb-select-btn:hover {
    background: var(--zpb-purple-dark) !important;
}

/* Not specified in 15859:40409 / 15860:44240 -- both frames always show
   "Select Plan". Styled from tokens pending a design for the selected state. */
.zpb-selected-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    background: var(--zpb-purple-8) !important;
    color: var(--zpb-purple) !important;
    height: 32px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

/* Custom plan section */

.zpb-custom {
    margin-top: 40px !important;
}

.zpb-custom__title {
    margin: 0 !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24px !important;
    color: var(--zpb-grey-800) !important;
}

.zpb-custom__subtitle {
    margin: 0 0 24px !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-muted) !important;
}

/* Floating CTA bar -- 15998:52013 */

.zpb-cta-bar {
    position: fixed !important;
    left: 50% !important;
    width: min(1206px, calc(100% - 2rem)) !important;
    transform: translateX(-50%) !important;
    bottom: 16px !important;
    z-index: 90 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: var(--zpb-purple-8) !important;
    border: 1px solid var(--zpb-purple-16) !important;
    border-radius: 72px !important;
    padding: 16px 16px 16px 40px !important;
    margin: 0 !important;
    backdrop-filter: blur(17px) !important;
    -webkit-backdrop-filter: blur(17px) !important;
}

.zpb-cta-bar__text {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    min-width: 0 !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    color: var(--zpb-text) !important;
}

.zpb-cta-bar__summary {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.zpb-cta-bar__lead,
.zpb-cta-bar__tail {
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.24px !important;
}

.zpb-cta-bar__amount {
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.zpb-link-btn {
    border: 0 !important;
    background: none !important;
    color: var(--zpb-info) !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16px !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.zpb-pay-btn {
    flex-shrink: 0 !important;
    border: 0 !important;
    background: var(--zpb-purple) !important;
    color: #fff !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    padding: 12px 24px !important;
    border-radius: 48px !important;
    box-shadow: 0 8px 8px rgba(108, 29, 204, 0.24) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.zpb-pay-btn:hover {
    background: var(--zpb-purple-dark) !important;
}

.zpb-pay-btn:disabled {
    opacity: 0.55 !important;
    cursor: wait !important;
}

/* Module grid */

.zpb-module-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.zpb-module-card {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 1px solid var(--zpb-grey-500-16) !important;
    border-radius: 16px !important;
    background: #fff !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: hidden !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    color: var(--zpb-text) !important;
    box-shadow: 0 1px 2px var(--zpb-grey-500-12) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

/* Not specified in either reference frame. */
.zpb-module-card.is-selected {
    background: rgba(108, 29, 204, 0.06) !important;
    border-color: var(--zpb-purple-48) !important;
    box-shadow: none !important;
}

.zpb-module-card.is-included {
    background: var(--zpb-grey-100) !important;
    border-color: var(--zpb-grey-500-16) !important;
    color: var(--zpb-muted) !important;
    box-shadow: none !important;
}

.zpb-module-card.is-included .zpb-module-card__name,
.zpb-module-card.is-included .zpb-module-card__price-now,
.zpb-module-card.is-included .zpb-module-card__price-now small,
.zpb-module-card.is-included .zpb-module-card__price-free,
.zpb-module-card.is-included .zpb-module-card__desc,
.zpb-module-card.is-included .zpb-module-card__more {
    color: var(--zpb-muted) !important;
}

.zpb-module-card__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
}

.zpb-module-card__icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.zpb-module-card__name {
    min-height: 24px !important;
    margin: 0 !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24px !important;
}

.zpb-module-card__price {
    min-height: 32px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
}

.zpb-module-card__price-was {
    display: block !important;
    margin: 0 !important;
    color: var(--zpb-muted-light) !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    text-decoration-line: line-through !important;
}

.zpb-module-card__price-now {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25px !important;
    color: var(--zpb-text) !important;
}

.zpb-module-card__price-now small {
    display: block !important;
    margin-left: 0 !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
}

.zpb-module-card__price-free {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25px !important;
    color: var(--zpb-text) !important;
}

.zpb-module-card__body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    min-height: 0 !important;
}

.zpb-module-card__desc {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
    flex-grow: 0 !important;
}

/* Descriptions may carry inline markup from the API -- Direct Booking Pro
   leads with a bold "Everything in Starter" run (Nunito Bold, 12/16, +0.16px). */
.zpb-module-card__desc strong,
.zpb-module-card__desc b {
    font-weight: 700 !important;
}

.zpb-module-card__desc em,
.zpb-module-card__desc i {
    font-style: italic !important;
}

.zpb-module-card__more {
    align-self: flex-start !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    color: var(--zpb-purple) !important;
    text-decoration: underline !important;
}

.zpb-module-card__more:hover {
    text-decoration: underline !important;
}

.zpb-module-card__btn {
    width: 100% !important;
    height: 32px !important;
    margin-top: 0 !important;
    border: 1px solid var(--zpb-purple-48) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--zpb-purple) !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    padding: 8px 24px 8px 12px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
}

.zpb-module-card__btn svg,
.zpb-module-card__included svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.zpb-module-card__btn:hover {
    background: var(--zpb-purple-8) !important;
}

/* Not specified in either reference frame. */
.zpb-module-card__btn.is-added {
    justify-content: space-between !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--zpb-purple-8) !important;
    color: var(--zpb-purple) !important;
    box-shadow: none !important;
    padding: 8px !important;
}

.zpb-module-card__added-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.zpb-module-card__added-check {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--zpb-purple) !important;
    color: #fff !important;
}

.zpb-module-card__added-check svg {
    width: 10px !important;
    height: 10px !important;
}

.zpb-module-card__remove {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    text-transform: none !important;
}

.zpb-module-card__included {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: 32px !important;
    margin-top: 0 !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: var(--zpb-grey-500-8) !important;
    color: var(--zpb-muted) !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 8px !important;
}

.zpb-module-card__included--standard,
.zpb-module-card__included--tier {
    line-height: 16px !important;
    letter-spacing: 0.16px !important;
    text-transform: none !important;
}

.zpb-module-card__info {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    cursor: default !important;
    outline: none !important;
}

.zpb-module-card__info::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 9px) !important;
    z-index: 10 !important;
    width: max-content !important;
    max-width: 260px !important;
    padding: 7px 8px !important;
    border-radius: 3px !important;
    background: #454f5b !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 4px) !important;
    transition: opacity 120ms ease, transform 120ms ease !important;
}

.zpb-module-card__info::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 4px) !important;
    z-index: 11 !important;
    border: 5px solid transparent !important;
    border-top-color: #454f5b !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    transition: opacity 120ms ease !important;
}

.zpb-module-card__info:hover::after,
.zpb-module-card__info:focus::after,
.zpb-module-card__info:hover::before,
.zpb-module-card__info:focus::before {
    opacity: 1 !important;
}

.zpb-module-card__info:hover::after,
.zpb-module-card__info:focus::after {
    transform: translate(-50%, 0) !important;
}

/* Breakdown pop-up -- 16287:218463 */

.zpb-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(33, 43, 54, 0.48) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    z-index: 100 !important;
}

.zpb-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 600px !important;
    max-width: 100% !important;
    max-height: 600px !important;
    background: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    font-family: 'Nunito', 'Public Sans', sans-serif !important;
    color: var(--zpb-text) !important;
}

/* Header band -- 16287:218782 */

.zpb-modal__head {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 24px 24px 16px !important;
    background: #fff !important;
}

.zpb-modal__heading {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.zpb-modal__title {
    margin: 0 !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24px !important;
    color: var(--zpb-text) !important;
}

/* Full primary text colour in the design, not a muted grey. */
.zpb-modal__subtitle {
    margin: 0 !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
}

.zpb-modal__close {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    color: var(--zpb-action) !important;
    cursor: pointer !important;
}

.zpb-modal__close svg {
    width: 24px !important;
    height: 24px !important;
}

.zpb-modal__close:hover {
    background: var(--zpb-grey-500-8) !important;
}

.zpb-modal__close:focus-visible {
    outline: 2px solid var(--zpb-grey-500-24) !important;
    outline-offset: 1px !important;
}

/* Scrolling body -- 16287:218471 */

.zpb-modal__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 24px !important;
}

/* Order Summary card -- 16287:218473 */

.zpb-order-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    background: var(--zpb-grey-100) !important;
    border: 1px solid var(--zpb-grey-500-8) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.zpb-order-summary__lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 20px !important;
}

.zpb-order-summary__intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.zpb-order-summary__heading {
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
}

.zpb-order-summary__note {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-muted) !important;
}

.zpb-order-summary__note strong {
    font-weight: 700 !important;
}

.zpb-order-summary__group,
.zpb-order-summary__totals {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Plan row -- 16287:218480 */

.zpb-order-summary__plan {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.zpb-order-summary__plan-name {
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
    white-space: nowrap !important;
}

.zpb-order-summary__toggle {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    color: var(--zpb-action) !important;
    cursor: pointer !important;
}

.zpb-order-summary__toggle svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 140ms ease !important;
}

.zpb-order-summary__toggle[aria-expanded="false"] svg {
    transform: rotate(180deg) !important;
}

.zpb-order-summary__toggle:hover {
    background: var(--zpb-grey-500-8) !important;
}

.zpb-order-summary__plan-price {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24px !important;
    text-align: right !important;
    color: var(--zpb-text) !important;
    white-space: nowrap !important;
}

/* Module lines -- 16287:218486, indented 8px inside the plan group */

.zpb-order-summary__module-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 8px !important;
}

.zpb-order-line {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 0 !important;
}

.zpb-order-line__name {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-text) !important;
}

.zpb-order-line__meta {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    color: var(--zpb-muted) !important;
    white-space: nowrap !important;
}

.zpb-order-line__times {
    padding: 0 1px !important;
}

.zpb-order-line__total {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16px !important;
    text-align: right !important;
    color: var(--zpb-text) !important;
    white-space: nowrap !important;
}

/* Dashed leader between label and price -- Divider 820:31891 (dashed variant),
   13 Others/Divider #919EAB. Figma ships this as an image; a gradient gives
   predictable dash metrics across browsers where `border: dashed` does not. */
.zpb-leader {
    flex: 1 1 0 !important;
    min-width: 8px !important;
    height: 1px !important;
    background-image: repeating-linear-gradient(
            to right,
            var(--zpb-divider) 0,
            var(--zpb-divider) 2px,
            transparent 2px,
            transparent 4px
    );
}

/* Solid rule above Subtotal -- Divider with dashedStyle = False */
.zpb-rule {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: var(--zpb-grey-500-24) !important;
}

.zpb-order-line--subtotal .zpb-order-line__name,
.zpb-order-line--subtotal .zpb-order-line__total {
    font-weight: 600 !important;
}

.zpb-order-line--discount .zpb-order-line__name,
.zpb-order-line--discount .zpb-order-line__meta,
.zpb-order-line--discount .zpb-order-line__total {
    color: var(--zpb-accent-text) !important;
}

.zpb-order-line--discount .zpb-order-line__total {
    font-weight: 600 !important;
}

/* Total band -- 16287:218750. Full-bleed, square corners, clipped by the card. */

.zpb-order-summary__total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: var(--zpb-purple-8) !important;
    color: var(--zpb-text) !important;
}

.zpb-order-summary__total-label {
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24px !important;
}

.zpb-order-summary__total-amount {
    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* Footer band -- 16287:218753 */

.zpb-modal__footer {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px !important;
    padding: 24px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 var(--zpb-grey-500-24) !important;
}

.zpb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.zpb-btn--outline {
    background: #fff !important;
    border: 1px solid var(--zpb-grey-500-32) !important;
    color: var(--zpb-text) !important;
}

.zpb-btn--primary {
    background: var(--zpb-purple) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 8px 8px rgba(108, 29, 204, 0.24) !important;
}

.zpb-btn--primary:hover {
    background: var(--zpb-purple-dark) !important;
}

@media (max-width: 1199px) {
    .zpb-plans {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .zpb-module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 599px) {
    .zpb-modal-overlay {
        padding: 12px !important;
    }
    .zpb-modal__head {
        padding: 20px 16px 12px !important;
    }
    .zpb-modal__body {
        padding: 12px 16px !important;
    }
    .zpb-modal__footer {
        gap: 12px !important;
        padding: 16px !important;
    }
    .zpb-controls {
        align-items: stretch !important;
        padding-right: 0 !important;
    }
    .zpb-controls > .zpb-counters:first-child {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .zpb-controls > .zpb-counters:last-child,
    .zpb-counter,
    .zpb-counter--plain,
    .zpb-billing {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 899px) {
    .zpb-plans {
        grid-template-columns: 1fr !important;
    }
    /* Below the design's 1366px reference width the bar has to stack. */
    .zpb-cta-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 24px !important;
        text-align: center !important;
        width: calc(100% - 1rem) !important;
        bottom: 8px !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .zpb-cta-bar__text,
    .zpb-cta-bar__summary {
        justify-content: center !important;
    }
    .zpb-cta-bar__amount {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .zpb-pay-btn {
        width: 100% !important;
    }
    .zpb-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    .zpb-module-card {
        padding: 24px 16px !important;
    }
    .zpb-module-card__price-now {
        flex-wrap: wrap !important;
    }
}

@media (min-width: 900px) {
    .zpb-title,
    .zpb-subtitle {
        white-space: nowrap !important;
    }
}


/* ==========================================================================
   THEME OVERRIDE SHIELD
   --------------------------------------------------------------------------
   When embedded in the WordPress theme, the theme's generic button/input/link
   rules override our component colours (teal accent bleeding onto buttons,
   pills, counter fields, the modal close and the breakdown link). Those are
   the only properties that lose, so we re-assert *only* colour / background /
   border here with !important, scoped under .zeevou-plan-builder. Layout,
   spacing and typography are untouched and stay overridable.

   If the stylesheet is later enqueued after the theme (or with a dependency),
   this whole block can be deleted -- it exists solely to win specificity wars
   with theme CSS, not because these values differ from the design.
   ========================================================================== */

/* Primary solid buttons -- purple fill, white text */
.zeevou-plan-builder .zpb-select-btn,
.zeevou-plan-builder .zpb-pay-btn,
.zeevou-plan-builder .zpb-btn--primary {
    background: var(--zpb-purple) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.zeevou-plan-builder .zpb-select-btn:hover,
.zeevou-plan-builder .zpb-pay-btn:hover,
.zeevou-plan-builder .zpb-btn--primary:hover {
    background: var(--zpb-purple-dark) !important;
    color: #fff !important;
}

/* Outline button (breakdown Close) -- white fill, grey border, dark text */
.zeevou-plan-builder .zpb-btn--outline {
    background: #fff !important;
    color: var(--zpb-text) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--zpb-grey-500-32) !important;
}

/* Module "Add" -- purple outline on white; "Added" -- tinted purple */
.zeevou-plan-builder .zpb-module-card__btn {
    background: #fff !important;
    color: var(--zpb-purple) !important;
    border-color: var(--zpb-purple-48) !important;
}

.zeevou-plan-builder .zpb-module-card__btn:hover {
    background: var(--zpb-purple-8) !important;
}

.zeevou-plan-builder .zpb-module-card__btn.is-added {
    background: var(--zpb-purple-8) !important;
    color: var(--zpb-purple) !important;
    border-color: transparent !important;
}

.zeevou-plan-builder .zpb-module-card__added-check {
    background: var(--zpb-purple) !important;
    color: #fff !important;
}

/* Text / link buttons -- keep their own accent, not the theme's */
.zeevou-plan-builder .zpb-plan-card__addlink {
    background: none !important;
    color: var(--zpb-info) !important;
}

.zeevou-plan-builder .zpb-link-btn {
    background: none !important;
    color: var(--zpb-info) !important;
}

.zeevou-plan-builder .zpb-module-card__more {
    background: none !important;
    color: var(--zpb-purple) !important;
}

/* "Selected" pill and "Included" pill -- tinted, not solid teal */
.zeevou-plan-builder .zpb-selected-pill {
    background: var(--zpb-purple-8) !important;
    color: var(--zpb-purple) !important;
}

.zeevou-plan-builder .zpb-module-card__included {
    background: var(--zpb-grey-500-8) !important;
    color: var(--zpb-muted) !important;
}

/* Counter fields -- grey/white surface, not a solid block. The value and the
   +/- steppers must not inherit a theme button background. */
.zeevou-plan-builder .zpb-counter {
    background: var(--zpb-grey-100) !important;
    border-color: var(--zpb-grey-500-16) !important;
}

.zeevou-plan-builder .zpb-counter--plain {
    background: #fff !important;
    border-color: transparent !important;
}

.zeevou-plan-builder .zpb-counter--error {
    background: var(--zpb-error-bg) !important;
    border-color: var(--zpb-error) !important;
}

.zeevou-plan-builder .zpb-step {
    background: transparent !important;
    color: var(--zpb-grey-500) !important;
}

.zeevou-plan-builder .zpb-step:hover:not(:disabled) {
    background: var(--zpb-grey-500-8) !important;
}

.zeevou-plan-builder .zpb-step:disabled {
    color: var(--zpb-grey-400) !important;
}

.zeevou-plan-builder .zpb-counter__value {
    background: transparent !important;
    color: #000 !important;
}

.zeevou-plan-builder .zpb-counter--error .zpb-counter__value {
    color: var(--zpb-error) !important;
}

/* Billing toggle -- inactive transparent, active tinted purple */
.zeevou-plan-builder .zpb-billing {
    background: var(--zpb-grey-100) !important;
    border-color: var(--zpb-grey-500-16) !important;
}

.zeevou-plan-builder .zpb-billing__btn {
    background: transparent !important;
    color: var(--zpb-muted) !important;
}

.zeevou-plan-builder .zpb-billing__btn.is-active {
    background: var(--zpb-purple-bg) !important;
    color: var(--zpb-purple) !important;
}

/* Badges -- Save % chips */
.zeevou-plan-builder .zpb-badge {
    background: var(--zpb-purple-8) !important;
    color: var(--zpb-purple) !important;
}

.zeevou-plan-builder .zpb-plan-card:not(.is-popular) .zpb-badge {
    background: var(--zpb-grey-500-16) !important;
    color: var(--zpb-muted) !important;
}

.zeevou-plan-builder .zpb-plan-card.is-popular .zpb-badge {
    background: rgba(0, 171, 85, 0.16) !important;
    color: var(--zpb-accent-text) !important;
}

/* Most Popular ribbon */
.zeevou-plan-builder .zpb-ribbon {
    background: var(--zpb-purple) !important;
    color: #fff !important;
}

/* Modal close -- transparent, action-grey icon, not a solid teal square */
.zeevou-plan-builder .zpb-modal__close {
    background: none !important;
    color: var(--zpb-action) !important;
}

.zeevou-plan-builder .zpb-modal__close:hover {
    background: var(--zpb-grey-500-8) !important;
}

.zeevou-plan-builder .zpb-order-summary__toggle {
    background: none !important;
    color: var(--zpb-action) !important;
}

.zeevou-plan-builder .zpb-order-summary__toggle:hover {
    background: var(--zpb-grey-500-8) !important;
}

/* Total band tint */
.zeevou-plan-builder .zpb-order-summary__total {
    background: var(--zpb-purple-8) !important;
}

/* ==========================================================================
   BUTTON BOX RESET (part of the theme override shield)
   --------------------------------------------------------------------------
   Elementor's global kit (.elementor-kit-30 button, input[type=button],
   input[type=submit], .elementor-button) forces padding: 10px 30px and
   border-radius: 5px onto EVERY button on the page. Our base component rules
   are single-class (specificity 0,1,0) and lose to that (0,1,1), so the box
   metrics leak even though colours are already shielded. Re-assert the
   intended padding / radius / border for the button family only, scoped and
   !important. Values are copied from the base rules above -- keep them in sync.
   ========================================================================== */

.zeevou-plan-builder .zpb-select-btn {
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

.zeevou-plan-builder .zpb-pay-btn {
    padding: 12px 24px !important;
    border-radius: 48px !important;
}

.zeevou-plan-builder .zpb-btn {
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

.zeevou-plan-builder .zpb-module-card__btn {
    padding: 8px 24px 8px 12px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.zeevou-plan-builder .zpb-module-card__btn.is-added {
    padding: 8px !important;
    border-radius: 8px !important;
}

.zeevou-plan-builder .zpb-billing__btn {
    padding: 4px 4px 4px 12px !important;
    border-radius: 24px !important;
}

.zeevou-plan-builder .zpb-billing__btn:first-child {
    padding: 6px 8px !important;
}

.zeevou-plan-builder .zpb-billing__btn:last-child {
    padding: 4px 4px 4px 12px !important;
}

.zeevou-plan-builder .zpb-billing {
    padding: 4px !important;
    border-radius: 24px !important;
}

.zeevou-plan-builder .zpb-badge {
    padding: 2px 8px !important;
    border-radius: 16px !important;
}

.zeevou-plan-builder .zpb-selected-pill {
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

.zeevou-plan-builder .zpb-module-card__included {
    padding: 8px !important;
    border-radius: 8px !important;
}

.zeevou-plan-builder .zpb-ribbon {
    padding: 2px 8px !important;
    border-radius: 8px !important;
}

.zeevou-plan-builder .zpb-step {
    padding: 0 !important;
    border-radius: 50% !important;
}

.zeevou-plan-builder .zpb-modal__close {
    padding: 0 !important;
    border-radius: 50% !important;
}

.zeevou-plan-builder .zpb-order-summary__toggle {
    padding: 4px !important;
    border-radius: 50% !important;
}

.zeevou-plan-builder .zpb-counter {
    padding: 6px 4px 6px 12px !important;
    border-radius: 24px !important;
}

.zeevou-plan-builder .zpb-counter--plain {
    padding: 6px 0 6px 8px !important;
}


/* ==========================================================================
   MODAL HEADER CLEARANCE (appended)
   --------------------------------------------------------------------------
   The Zeevou header is fixed/sticky. The overlay above centres the modal in
   the full viewport (align-items: center), so on a short screen the modal top
   is pushed up behind the header. These rules override ONLY the modal's
   position and height: anchor it below the header with a top gap, cap its
   height to the space that remains, and let the body scroll internally so the
   header/footer/top edge stay put. Nothing else in the file is changed.

   Tune --zpb-modal-top-gap to your real header height if 120px isn't exact.
   ========================================================================== */
.zeevou-plan-builder {
    --zpb-modal-top-gap: 120px;
}

.zeevou-plan-builder .zpb-modal-overlay {
    align-items: flex-start !important;
    padding: 0 24px 24px !important;
    overflow: hidden !important;
}

.zeevou-plan-builder .zpb-modal {
    margin: var(--zpb-modal-top-gap) auto 0 !important;
    max-height: calc(100vh - var(--zpb-modal-top-gap) - 24px) !important;
    max-height: calc(100dvh - var(--zpb-modal-top-gap) - 24px) !important;
}

.zeevou-plan-builder .zpb-modal__body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
}

@media (max-width: 599px) {
    .zeevou-plan-builder {
        --zpb-modal-top-gap: 84px;
    }
    .zeevou-plan-builder .zpb-modal-overlay {
        padding: 0 12px 12px !important;
    }
    .zeevou-plan-builder .zpb-modal {
        max-height: calc(100vh - var(--zpb-modal-top-gap) - 12px) !important;
        max-height: calc(100dvh - var(--zpb-modal-top-gap) - 12px) !important;
    }
}


/* ==========================================================================
   COMPONENT SIDE MARGINS (appended)
   142px left/right margin on the whole widget. Overrides the root rule's
   `margin: 0 auto`. Uses margin (not padding) as requested; width falls back
   to auto so the 142px is honoured on each side. On narrower viewports the
   fixed 142px would squeeze the layout, so it tapers down below 1200px and is
   removed on mobile.
   ========================================================================== */
.zeevou-plan-builder {
    margin-left: 142px !important;
    margin-right: 142px !important;
}

@media (max-width: 1200px) {
    .zeevou-plan-builder {
        margin-left: 48px !important;
        margin-right: 48px !important;
    }
}

@media (max-width: 599px) {
    .zeevou-plan-builder {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}