/* ==========================================================================
   Book a Demo modal (Figma "🟡 Book a demo modal redesign", node 23041:10384)
   Typography comes from the global sd-type-* classes and buttons from
   sd-button; this file only sets layout, colour and form-control styling.
   Text rules use the doubled class (.sd-demo-modal.sd-demo-modal) instead of
   !important so they beat page CSS on any template the modal opens over.
   ========================================================================== */

@font-face { font-family: 'Google Sans Flex'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Google Sans Flex'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Google Sans Flex'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; }

.sd-demo-modal {
    --sd-demo-duration: 0.35s;
    --sd-demo-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --sd-demo-text: #262626;
    --sd-demo-text-secondary: rgba(0, 0, 0, 0.75);
    --sd-demo-text-tertiary: rgba(0, 0, 0, 0.55);
    --sd-demo-placeholder: rgba(0, 0, 0, 0.4);
    --sd-demo-border: #d9d9d9;
    --sd-demo-border-hover: #b2b2b2;
    --sd-demo-border-focus: #4d4d4d;
    --sd-demo-error: #f37171;
    --sd-demo-error-text: #b42727;

    position: fixed;
    /* 100vw, not right: 0 -- <html> reserves a scrollbar gutter
       (scrollbar-gutter: stable), which a right: 0 overlay leaves undimmed and
       which would push the dialog off the viewport centre. */
    top: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 10200;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sd-demo-modal[hidden] {
    display: none;
}

.sd-demo-modal.is-open {
    opacity: 1;
}

.sd-demo-modal,
.sd-demo-modal * {
    box-sizing: border-box;
    font-family: 'Google Sans Flex', sans-serif;
}

.sd-demo-modal p,
.sd-demo-modal h2,
.sd-demo-modal ul {
    margin: 0;
    padding: 0;
}

.sd-demo-modal ul {
    list-style: none;
}

/* The overlay itself scrolls, so a dialog taller than the viewport is never
   clipped and inline dropdowns (phone country list) are never cut off. */
.sd-demo-modal__scroller {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Symmetric so the dialog sits exactly centred (Figma); 60px also clears the avatar. */
    padding: 60px 24px;
    -webkit-overflow-scrolling: touch;
}

.sd-demo-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 928px;
    margin: auto;
    border-radius: 16px;
    background: #fff;
    outline: none;
    transform: translateY(12px) scale(0.98);
    transition: max-width var(--sd-demo-duration) var(--sd-demo-ease), border-radius var(--sd-demo-duration) var(--sd-demo-ease), transform 0.3s var(--sd-demo-ease);
}

.sd-demo-modal.is-open .sd-demo-modal__dialog {
    transform: none;
}

.sd-demo-modal[data-step="success"] .sd-demo-modal__dialog,
.sd-demo-modal[data-step="region"] .sd-demo-modal__dialog {
    max-width: 480px;
    border-radius: 20px;
}

.sd-demo-modal__viewport {
    position: relative;
    border-radius: inherit;
    transition: height var(--sd-demo-duration) var(--sd-demo-ease);
}

.sd-demo-modal__viewport.is-animating {
    overflow: hidden;
}

.sd-demo-modal__step {
    transition: opacity 0.25s ease;
}

.sd-demo-modal__step[hidden] {
    display: none !important;
}

.sd-demo-modal__step.is-entering {
    opacity: 0;
}

/* --- Shared chrome ------------------------------------------------------- */

.sd-demo-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--sd-demo-text);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sd-demo-modal__close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.sd-demo-modal__close:focus-visible,
.sd-demo-modal__back:focus-visible {
    outline: 2px solid var(--sd-demo-border-focus);
    outline-offset: 2px;
}

/* Figma: 88px ellipse with a centred 4px white stroke, so the visible ring is
   92px (2px outside the 88px box) around an 84px photo. */
.sd-demo-modal__avatar {
    position: absolute;
    top: -46px;
    left: 30px;
    z-index: 2;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #faf7f5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sd-demo-modal__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-demo-modal:not([data-step="details"]) .sd-demo-modal__avatar {
    opacity: 0;
    visibility: hidden;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__title {
    color: var(--sd-demo-text);
    outline: none;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__text {
    color: var(--sd-demo-text-tertiary);
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__text--strong {
    color: var(--sd-demo-text-secondary);
}

.sd-demo-modal__heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-demo-modal__icon {
    flex-shrink: 0;
}

/* --- 02/03 Details ------------------------------------------------------- */

.sd-demo-modal__step--details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 424px;
    border-radius: inherit;
}

.sd-demo-modal__form-panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px 32px 32px;
}

.sd-demo-modal__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
}

.sd-demo-modal__fields,
.sd-demo-modal__team {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-demo-modal__team[hidden] {
    display: none;
}

.sd-demo-modal__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sd-demo-modal__field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__label {
    display: flex;
    gap: 2px;
    margin: 0;
    color: var(--sd-demo-text);
    cursor: pointer;
}

.sd-demo-modal__required {
    color: #e85f5f;
}

/* Scoped one step above the global input:not(...) primitive in style.min.css
   (0,3,1 / 0,4,1 on :focus) so these rules win on every template. */
.sd-demo-modal .sd-demo-modal__form .sd-demo-modal__input.sd-demo-modal__input {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    /* Same metrics and transition as the /book-a-demo/ fields (20.10, design call 19.10). */
    padding: 0 16px;
    border: 1px solid var(--sd-demo-border);
    border-radius: 10px;
    background-color: #fff;
    box-shadow: none;
    color: var(--sd-demo-text);
    outline: none;
    transition: background-color 0.3s, border-color 0.3s;
    -webkit-appearance: none;
    appearance: none;
}

/* The global ::placeholder rule in style.min.css forces 16px, which made the phone
   placeholder digits larger than the typed 14px text. */
.sd-demo-modal .sd-demo-modal__form .sd-demo-modal__input::placeholder {
    color: var(--sd-demo-placeholder);
    font-size: inherit;
    letter-spacing: inherit;
    opacity: 1;
}

.sd-demo-modal .sd-demo-modal__form .sd-demo-modal__input.sd-demo-modal__input:hover {
    border-color: var(--sd-demo-border-hover);
}

/* UI Kit focus: 1px border + 1px inset ring (= 2px #4D4D4D) so the control
   never changes size and the text never shifts. */
.sd-demo-modal .sd-demo-modal__form .sd-demo-modal__input.sd-demo-modal__input:focus {
    border-color: var(--sd-demo-border-focus);
    box-shadow: inset 0 0 0 1px var(--sd-demo-border-focus);
}

.sd-demo-modal .sd-demo-modal__form .sd-demo-modal__select.sd-demo-modal__input {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.5524 6.94757C15.8575 7.25267 15.8575 7.74721 15.5524 8.05231L10.5524 13.0523C10.2473 13.3574 9.75279 13.3574 9.44769 13.0523L4.44769 8.05231C4.14259 7.74721 4.14259 7.25267 4.44769 6.94757C4.75279 6.64248 5.24733 6.64248 5.55243 6.94757L10.0001 11.3952L14.4477 6.94757C14.7528 6.64248 15.2473 6.64248 15.5524 6.94757Z' fill='black' fill-opacity='0.55'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 20px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.sd-demo-modal .sd-demo-modal__form .sd-demo-modal__select.sd-demo-modal__input.is-empty {
    color: var(--sd-demo-placeholder);
}

.sd-demo-modal .sd-demo-modal__select option {
    color: var(--sd-demo-text);
}

.sd-demo-modal .sd-demo-modal__form .is-invalid .sd-demo-modal__input.sd-demo-modal__input,
.sd-demo-modal .sd-demo-modal__form .is-invalid .iti__country-container {
    border-color: var(--sd-demo-error);
}

.sd-demo-modal .sd-demo-modal__form .is-invalid .sd-demo-modal__input.sd-demo-modal__input:focus {
    box-shadow: inset 0 0 0 1px var(--sd-demo-error);
}

/* Same error tip as the /book-a-demo/ CF7 form. */
.sd-demo-modal.sd-demo-modal .sd-demo-modal__error {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -2px 0 0;
    color: var(--sd-demo-error-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
}

.sd-demo-modal__error::before {
    content: "";
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background: url("/wp-content/themes/simplydepo/images/book-a-demo-new/form-alert-icon.svg") center / contain no-repeat;
}

.sd-demo-modal__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sd-demo-modal__form-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__form-error {
    margin: 0;
    color: var(--sd-demo-error-text);
    text-align: center;
}

.sd-demo-modal__form-error[hidden] {
    display: none;
}

.sd-demo-modal__submit {
    position: relative;
}

.sd-demo-modal__spinner,
.sd-demo-modal__calendar-loader {
    display: none;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.sd-demo-modal__spinner > span,
.sd-demo-modal__calendar-loader > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: sd-demo-modal-bounce 1s infinite ease-in-out;
}

.sd-demo-modal__spinner > span:nth-child(2),
.sd-demo-modal__calendar-loader > span:nth-child(2) { animation-delay: 0.15s; }
.sd-demo-modal__spinner > span:nth-child(3),
.sd-demo-modal__calendar-loader > span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sd-demo-modal-bounce {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.sd-demo-modal__submit.is-loading {
    pointer-events: none;
}

.sd-demo-modal__submit.is-loading .sd-demo-modal__submit-label {
    visibility: hidden;
}

.sd-demo-modal__submit.is-loading .sd-demo-modal__spinner {
    position: absolute;
    inset: 0;
    display: flex;
}

.sd-demo-modal__assurances {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__assurance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sd-demo-text-tertiary);
    white-space: nowrap;
}

.sd-demo-modal__proof-panel {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 64px 32px 32px;
    border-radius: 0 16px 16px 0;
    background: #f5f5f5;
}

.sd-demo-modal__benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__benefits-title {
    color: #000;
}

.sd-demo-modal__benefits-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--sd-demo-text);
}

/* Figma icon wrapper: 20px icon + 3px top/bottom = 26px row. */
.sd-demo-modal__benefit .sd-demo-modal__icon {
    margin: 3px 0;
    color: #006746;
}

.sd-demo-modal__awards {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.sd-demo-modal__awards img {
    display: block;
    width: 70px;
    height: 81px;
}

.sd-demo-modal__ratings {
    display: flex;
    justify-content: center;
}

/* Fully self-contained (Figma "reviews-badge"): css/solutions-landing-v2.css
   styles the bare .business-socials classes on Solutions pages (white pill,
   20px logos, semibold text, #e4e4e4 divider), which must not leak in here. */
.sd-demo-modal.sd-demo-modal .business-socials--demo-modal {
    display: flex;
    width: auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__logo,
.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__logo img {
    display: block;
    width: 16px;
    height: 16px;
    background: transparent;
}

.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__text {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--sd-demo-text-tertiary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.12px;
}

.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__divider {
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
}

.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__rating,
.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__link {
    color: var(--sd-demo-text-tertiary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.12px;
    text-decoration: none;
}

.sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__rating span {
    color: var(--sd-demo-text);
    font-weight: 400;
}

.sd-demo-modal .business-socials--demo-modal .business-socials__link:hover {
    color: var(--sd-demo-text);
}

/* --- Phone (intl-tel-input, loaded on first open) ------------------------ */

.sd-demo-modal .iti {
    display: flex;
    width: 100%;
}

/* Figma "code-select" hugs its content (86px for "+1"): 14px to the flag,
   6px flag to code, 8px code to chevron, 8px chevron to the edge. A fixed
   width squeezed the chevron against the edge for longer codes (+31, +971). */
.sd-demo-modal .iti__country-container {
    position: relative !important;
    flex-shrink: 0;
    width: auto;
    padding: 0;
    border: 1px solid var(--sd-demo-border);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sd-demo-modal .iti__country-container:hover {
    border-color: var(--sd-demo-border-hover);
}

.sd-demo-modal .iti__country-container:has(.iti__dropdown-content:not(.iti__hide)) {
    background: #f5f5f5;
}

.sd-demo-modal .iti__selected-country {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 0 8px 0 13px;
    border-radius: 10px 0 0 10px;
    background: transparent !important;
}

/* Figma flag slot is 17px; the library flag is 16px, so the code lands at 37px like the design. */
.sd-demo-modal .iti__selected-country-primary {
    flex-shrink: 0;
    width: 17px;
    padding: 0;
    background: transparent !important;
}

.sd-demo-modal .iti__selected-country::after {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.5524 6.94757C15.8575 7.25267 15.8575 7.74721 15.5524 8.05231L10.5524 13.0523C10.2473 13.3574 9.75279 13.3574 9.44769 13.0523L4.44769 8.05231C4.14259 7.74721 4.14259 7.25267 4.44769 6.94757C4.75279 6.64248 5.24733 6.64248 5.55243 6.94757L10.0001 11.3952L14.4477 6.94757C14.7528 6.64248 15.2473 6.64248 15.5524 6.94757Z' fill='black' fill-opacity='0.55'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.sd-demo-modal .iti__arrow,
.sd-demo-modal .iti__country-check,
.sd-demo-modal .iti__search-clear {
    display: none;
}

.sd-demo-modal.sd-demo-modal .iti__selected-dial-code {
    margin: 0;
    color: var(--sd-demo-text);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.105px;
}

.sd-demo-modal .iti__flag {
    height: 12px;
}

.sd-demo-modal .sd-demo-modal__form .iti .sd-demo-modal__input.sd-demo-modal__input {
    flex: 1;
    width: auto;
    min-width: 0;
    padding-left: 16px !important;
    border-radius: 0 10px 10px 0;
}

.sd-demo-modal .iti--inline-dropdown .iti__dropdown-content {
    top: calc(100% + 8px);
    left: -1px;
    z-index: 5;
    width: calc(var(--sd-demo-phone-width, 440px));
    max-height: 300px;
    padding: 0 16px;
    border: 1px solid #d4d4d4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.sd-demo-modal .iti--inline-dropdown .iti__dropdown-content:not(.iti__hide) {
    display: flex;
    flex-direction: column;
}

.sd-demo-modal .iti--inline-dropdown .iti__country-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

/* Doubled class: global input rules in style.min.css otherwise win and draw a
   boxed field over the library's search icon. */
.sd-demo-modal .sd-demo-modal__form .iti__search-input.iti__search-input,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__search-input.iti__search-input {
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 4px 28px 0 0;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sd-demo-text, #262626);
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.12px;
    outline: none;
}

.sd-demo-modal .sd-demo-modal__form .iti__search-input.iti__search-input:focus,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__search-input.iti__search-input:focus {
    border-color: transparent;
    border-bottom-color: #4d4d4d;
    box-shadow: none;
    outline: none;
}

/* UI Kit (as on /book-a-demo/): search icon on the right. */
.sd-demo-modal .iti__search-icon,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__search-icon {
    right: 0;
    left: auto;
}

.sd-demo-modal .iti__search-input-wrapper:focus-within,
body.sd-demo-modal-open .iti__search-input-wrapper:focus-within {
    outline: none;
    box-shadow: none;
}

.sd-demo-modal .iti__country,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__country {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fafafa;
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.105px;
}

.sd-demo-modal .iti__country.iti__highlight,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__country.iti__highlight {
    background: #e5e5e5;
}

.sd-demo-modal .iti__country-name,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__country-name {
    color: #1a1a1a;
}

.sd-demo-modal .iti__dial-code,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__dial-code {
    color: rgba(0, 0, 0, 0.55);
}

.sd-demo-modal .iti__divider--priority,
body.sd-demo-modal-open .iti--fullscreen-popup .iti__divider--priority {
    display: block;
    height: 1px;
    margin: 16px 0;
    background: #efefef;
    list-style: none;
    pointer-events: none;
}

/* The mobile country list is appended to <body>; keep it above the modal. */
body.sd-demo-modal-open .iti--container {
    z-index: 10300;
}

body.sd-demo-modal-open .iti--fullscreen-popup .iti__dropdown-content {
    padding: 0 16px;
    border-radius: 16px;
}

/* Phones: the country list bottom sheet comes from the shared component
   template-parts/components/phone-country-sheet/ (same as /book-a-demo/). */

/* --- 04 Calendar --------------------------------------------------------- */

.sd-demo-modal__step--calendar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
}

.sd-demo-modal__heading--calendar {
    gap: 8px;
    padding-right: 40px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sd-demo-text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__back:hover {
    color: var(--sd-demo-text);
}

/* No frame of our own: the HubSpot widget draws its own card border, and a
   second one around it read as a frame-in-a-frame. */
.sd-demo-modal__calendar {
    position: relative;
    min-height: 554px;
    overflow: hidden;
}

/* Desktop: Figma "image 1" block, 864x550. demo-modal.js scales the whole HubSpot
   card down into it (and lower when the screen is shorter), so nothing scrolls inside
   the calendar and the dialog fits the screen (20.10 feedback). */
@media (min-width: 1024px) {
    .sd-demo-modal__calendar {
        height: 550px;
        min-height: 0;
        overflow: hidden;
    }
}

/* Starting size of HubSpot's own embed; the calendar then posts its real height. */
.sd-demo-modal__calendar-frame {
    display: block;
    width: 100%;
    min-width: 312px;
    min-height: 615px;
    height: 756px;
    border: 0;
}

.sd-demo-modal__calendar-loader {
    position: absolute;
    inset: 0;
    color: rgba(0, 0, 0, 0.3);
}

.sd-demo-modal__calendar.is-loading .sd-demo-modal__calendar-loader {
    display: flex;
}

/* --- 05/06 Status -------------------------------------------------------- */

.sd-demo-modal__step--status {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sd-demo-modal__step--success {
    padding: 32px 20px;
}

.sd-demo-modal__success-icon {
    display: flex;
    padding: 24px;
    border-radius: 999px;
    /* Inset strokes like Figma, so the rings stay 160/112px. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.sd-demo-modal__success-ring {
    display: flex;
    padding: 24px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}

.sd-demo-modal__success-core {
    display: flex;
    padding: 16px;
    border-radius: 999px;
    background: #409a65;
    color: #fff;
}

.sd-demo-modal__status-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Figma "done-button" is 428px, inset 6px inside the 440px content column. */
.sd-demo-modal__status-body .sd-demo-modal__done {
    width: calc(100% - 12px);
    align-self: center;
}

.sd-demo-modal__heading--status {
    gap: 8px;
}

.sd-demo-modal__summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    background: #fafafa;
}

.sd-demo-modal__summary[hidden] {
    display: none;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__summary p {
    color: var(--sd-demo-text-secondary);
}

.sd-demo-modal__step--region {
    gap: 24px;
    padding: 32px;
}

.sd-demo-modal__region-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: #f5f5f5;
}

.sd-demo-modal__region-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__region-text p {
    color: var(--sd-demo-text-secondary);
}

.sd-demo-modal.sd-demo-modal .sd-demo-modal__region-text a {
    color: #006746;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {
    .sd-demo-modal__scroller {
        padding: 56px 16px 16px;
    }

    .sd-demo-modal__avatar {
        top: -38px;
        left: 18px;
        width: 76px;
        height: 76px;
        border-width: 3px;
    }

    .sd-demo-modal__step--details {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-demo-modal__form-panel {
        gap: 24px;
        padding: 52px 20px 24px;
    }

    .sd-demo-modal__form {
        gap: 24px;
    }

    .sd-demo-modal__heading {
        gap: 8px;
        padding-right: 0;
    }

    /* Mobile keeps the trust line only: benefits and badges would push the
       form's submit button far below the fold. */
    .sd-demo-modal__proof-panel {
        gap: 0;
        padding: 20px;
        border-radius: 0 0 16px 16px;
    }

    .sd-demo-modal__benefits,
    .sd-demo-modal__awards {
        display: none;
    }

    .sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__rating,
    .sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__link {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.105px;
    }

    /* Fields keep 14px on phones like /book-a-demo/ (design call 19.10: no bigger text on
       mobile); demo-modal.js stops iOS from zooming into them while the modal is open. */

    .sd-demo-modal__step--calendar {
        gap: 16px;
        padding: 24px 16px 16px;
    }

    .sd-demo-modal__calendar {
        min-height: 615px;
        margin: 0 -4px;
    }

    .sd-demo-modal__step--success {
        padding: 24px 20px;
    }

    .sd-demo-modal__step--region {
        padding: 24px 20px;
    }
}

/* --- Tablet + mobile: full-screen sheet (19.10 daily) ---------------------
   Figma "Demo booking / Tablet flow" 23288:3543 (834px) and "Mobile flow"
   23277:3565 (390px): no overlay or radius, the whole sheet scrolls, a top bar
   with the logo (back link on the calendar step) and the close button, the
   avatar centred above the heading, G2/Capterra right under Continue.
   Desktop (1024px+) keeps the centred dialog above. */

.sd-demo-modal__logo {
    display: none;
}

@media (max-width: 1023px) {
    .sd-demo-modal {
        background: #fff;
    }

    /* No rubber-band at the ends, so a swipe never drags the sheet away from the
       screen edge (20.10 feedback "it starts to collapse but never does"). */
    .sd-demo-modal__scroller {
        padding: 0;
        overscroll-behavior: none;
    }

    .sd-demo-modal[data-step] .sd-demo-modal__dialog {
        max-width: none;
        min-height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .sd-demo-modal .sd-demo-modal__logo {
        position: absolute;
        top: 25px;
        left: 20px;
        z-index: 3;
        display: block;
        width: 152px;
        height: 22px;
    }

    .sd-demo-modal[data-step="calendar"] .sd-demo-modal__logo {
        display: none;
    }

    .sd-demo-modal__close {
        top: 20px;
        right: 20px;
    }

    .sd-demo-modal__avatar {
        top: 72px;
        left: 50%;
        width: 80px;
        height: 80px;
        border-width: 2px;
        box-shadow: none;
        transform: translateX(-50%);
    }

    .sd-demo-modal__step--details {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-demo-modal__form-panel {
        gap: 20px;
        padding: 172px 20px 0;
    }

    .sd-demo-modal__heading {
        gap: 4px;
        text-align: center;
    }

    .sd-demo-modal__heading .sd-demo-modal__title,
    .sd-demo-modal__heading .sd-demo-modal__text {
        margin-right: auto;
        margin-left: auto;
    }

    .sd-demo-modal__form {
        gap: 20px;
    }

    .sd-demo-modal__fields,
    .sd-demo-modal__team {
        gap: 12px;
    }

    .sd-demo-modal__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Figma keeps only the G2/Capterra line under Continue. */
    .sd-demo-modal__assurances,
    .sd-demo-modal__benefits,
    .sd-demo-modal__awards {
        display: none;
    }

    .sd-demo-modal__proof-panel {
        gap: 0;
        padding: 16px 20px 24px;
        border-radius: 0;
        background: none;
    }

    /* Figma reviews-badge stays 16/24 on mobile too (the old mobile rule made it 14/20). */
    .sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__rating,
    .sd-demo-modal.sd-demo-modal .business-socials--demo-modal .business-socials__link {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.12px;
    }

    .sd-demo-modal__step--calendar {
        gap: 20px;
        padding: 26px 20px 24px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-modal__back {
        margin-bottom: 6px;
    }

    .sd-demo-modal__heading--calendar {
        padding: 8px 0;
    }

    .sd-demo-modal__calendar {
        margin: 0;
    }

    /* Calendar step (20.10 feedback "scroll inside a scroll"). On phones HubSpot posts
       no height and draws a fixed ~663px card; below ~690px the widget gets two
       scrollbars of its own. So the frame is exactly that tall (no scroll inside on
       the month view, only HubSpot's own time list scrolls), and the heading is
       compact so the step fits a regular phone without the sheet scrolling either.
       The empty green space under the dates is part of HubSpot's card. */
    .sd-demo-modal .sd-demo-modal__step--calendar {
        gap: 12px;
        padding-bottom: 16px;
    }

    .sd-demo-modal .sd-demo-modal__heading--calendar {
        padding: 0;
    }

    .sd-demo-modal .sd-demo-modal__step--calendar .sd-demo-modal__calendar {
        min-height: 690px;
    }

    .sd-demo-modal .sd-demo-modal__step--calendar .sd-demo-modal__calendar-frame {
        height: 690px !important;
        min-height: 0;
    }

    /* Team size list instead of the native picker (20.10 feedback, no open state in
       Figma): full field width, 8px above the 44px control, UI Kit input tokens. */
    .sd-demo-modal .sd-demo-modal__form select[name="teamsize"] {
        pointer-events: none;
    }

    .sd-demo-modal__field[data-field="teamsize"] {
        cursor: pointer;
    }

    .sd-demo-modal .sd-demo-modal__options {
        position: absolute;
        right: 0;
        bottom: 52px;
        left: 0;
        z-index: 5;
        margin: 0;
        padding: 4px;
        border: 1px solid var(--sd-demo-border);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        list-style: none;
    }

    .sd-demo-modal .sd-demo-modal__options.is-below {
        top: calc(100% + 8px);
        bottom: auto;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-modal__option {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 12px;
        border-radius: 8px;
        color: var(--sd-demo-text);
        cursor: pointer;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-modal__option:active,
    .sd-demo-modal.sd-demo-modal .sd-demo-modal__option[aria-selected="true"] {
        background: #f5f5f5;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-modal__option[aria-selected="true"] {
        font-weight: 500;
    }

    /* Status steps: content starts under the 72px top bar with 80px of air. */
    .sd-demo-modal__step--success,
    .sd-demo-modal__step--region {
        padding: 152px 20px 24px;
    }

    .sd-demo-modal__status-body .sd-demo-modal__done {
        width: 100%;
    }
}

@media (max-width: 767px) {
    /* Figma mobile calendar title is 20/28 semibold; sd-type-heading-sm has no mobile step. */
    .sd-demo-modal.sd-demo-modal .sd-demo-modal__heading--calendar .sd-demo-modal__title {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 28px !important;
        letter-spacing: -0.2px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sd-demo-modal .sd-demo-modal__logo {
        top: 37px;
        left: 32px;
    }

    .sd-demo-modal__close {
        top: 32px;
        right: 32px;
    }

    .sd-demo-modal__avatar {
        top: 88px;
    }

    .sd-demo-modal__form-panel,
    .sd-demo-modal__proof-panel,
    .sd-demo-modal__step--calendar,
    .sd-demo-modal__step--success,
    .sd-demo-modal__step--region {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    /* 560px content column (Figma "form-panel"), 32px side padding. */
    .sd-demo-modal__form-panel {
        max-width: 624px;
        gap: 24px;
        padding: 192px 32px 0;
    }

    .sd-demo-modal__heading {
        gap: 8px;
    }

    .sd-demo-modal__form {
        gap: 24px;
    }

    .sd-demo-modal__fields,
    .sd-demo-modal__team {
        gap: 16px;
    }

    .sd-demo-modal__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .sd-demo-modal__proof-panel {
        max-width: 624px;
        padding: 16px 32px 32px;
    }

    .sd-demo-modal__step--calendar {
        max-width: 834px;
        gap: 24px;
        padding: 38px 32px 32px;
    }

    .sd-demo-modal__heading--calendar,
    .sd-demo-modal__calendar {
        width: 100%;
        max-width: 560px;
        margin-right: auto;
        margin-left: auto;
    }

    .sd-demo-modal__heading--calendar {
        margin-top: 0;
    }

    /* 480px content column (Figma "modal-content"). */
    .sd-demo-modal__step--success,
    .sd-demo-modal__step--region {
        max-width: 544px;
        padding: 168px 32px 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-demo-modal,
    .sd-demo-modal__dialog,
    .sd-demo-modal__viewport,
    .sd-demo-modal__step {
        transition: none !important;
    }
}

/* Keep the scrollbar's space reserved on pages that carry the modal, so locking the
   page scroll on open never shifts the layout (fixed header, promo bar and the sticky
   CTA included, which body padding-right compensation cannot reach). */
html {
    scrollbar-gutter: stable;
}

/* ==========================================================================
   Book a Demo CTAs rendered as <button> by simplydepo_demo_cta() (2026-10-16).
   Strips the browser's own button look with ZERO specificity (:where), so the
   component's existing classes (sd-button, button-v2, header-menu-v2__...)
   keep styling it exactly as they styled the old <a>. Never add specificity here.
   ========================================================================== */
:where(button.sd-demo-cta) {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    text-transform: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* ==========================================================================
   Our own calendar (.sd-demo-cal, step 04), instead of the HubSpot Meetings
   iframe where root[data-calendar="own"] (includes/demo-modal-calendar.php).
   Built on the Dev test page /demo-calendar-test/ (23.10.2026).
   Base rules: grid, month, slots, loading/error card and the full-screen flow
   up to 1023px (one column at a time, dates then times, data-view). The
   .sd-demo-cal--own block further down gives it the Figma 23097:13466 look;
   some base values are only defaults that .sd-demo-cal--own overrides.
   ========================================================================== */

.sd-demo-cal {
    --sd-demo-cal-green: #409a66;
    --sd-demo-cal-ink: #33475b;
    --sd-demo-cal-line: #dfe3eb;
    --sd-demo-cal-slot-line: #cbd6e2;
    --sd-demo-cal-link: #0091ae;
    --sd-demo-cal-row: 44px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 550px;
}

.sd-demo-cal button {
    font-family: inherit;
}

/* --- dates --- */

.sd-demo-cal__dates {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 36px 24px 20px;
    background: var(--sd-demo-cal-green);
    color: #fff;
}

.sd-demo-cal__month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__month-label {
    min-width: 170px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

.sd-demo-cal__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.sd-demo-cal__nav svg {
    width: 18px;
    height: 18px;
}

.sd-demo-cal__nav--next svg {
    transform: rotate(180deg);
}

.sd-demo-cal__nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
}

.sd-demo-cal__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.sd-demo-cal__weekdays,
.sd-demo-cal__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}

.sd-demo-cal__weekdays {
    margin-top: 22px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__weekdays span {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: uppercase;
}

.sd-demo-cal__days {
    grid-auto-rows: var(--sd-demo-cal-row);
    margin-top: 6px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__day:hover:not(:disabled):not(.is-selected) {
    background: rgba(255, 255, 255, 0.18);
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__day:disabled {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    cursor: default;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__day.is-selected {
    background: #fff;
    color: var(--sd-demo-cal-green);
}

.sd-demo-cal__day--blank {
    pointer-events: none;
}

.sd-demo-cal__day:focus-visible,
.sd-demo-cal__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- times --- */

.sd-demo-cal__times {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    min-height: 0;
    padding: 28px 32px 24px;
    border: 1px solid var(--sd-demo-cal-line);
    border-left: 0;
    background: #fff;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__back {
    display: none;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sd-demo-text-tertiary);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.sd-demo-cal__tz {
    position: relative;
    display: block;
    max-width: 100%;
}

.sd-demo-cal__tz .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__tz-select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    /* As wide as the chosen zone, like HubSpot's link-style picker (not the longest option). */
    field-sizing: content;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 4px 22px 4px 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%230091ae'/%3E%3C/svg%3E") no-repeat right 4px center;
    box-shadow: none;
    color: var(--sd-demo-cal-link);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.sd-demo-cal__tz-select:focus-visible {
    outline: 2px solid var(--sd-demo-cal-link);
    outline-offset: 2px;
}

.sd-demo-cal__slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 40px;
    align-content: start;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    /* Safety net only: fitSlots() densifies the grid before this could ever scroll. */
    overflow-y: auto;
}

.sd-demo-cal__slots.is-dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-demo-cal__slots.is-denser {
    grid-auto-rows: 34px;
    gap: 6px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--sd-demo-cal-slot-line);
    border-radius: 3px;
    background: #fff;
    color: var(--sd-demo-cal-green);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__slots.is-dense .sd-demo-cal__slot {
    font-size: 14px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__slot:hover {
    border-color: var(--sd-demo-cal-green);
    background: #f2f8f4;
}

.sd-demo-cal__slot:focus-visible {
    outline: 2px solid var(--sd-demo-cal-green);
    outline-offset: 2px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__empty {
    color: var(--sd-demo-text-tertiary);
    font-size: 14px;
    line-height: 20px;
}

.sd-demo-cal__empty[hidden] {
    display: none;
}

/* --- loading / error over the whole block --- */

.sd-demo-cal__status {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    background: #fff;
    text-align: center;
}

/* Before the first answer (loading) and on a message there is nothing to show behind it:
   a clean white card with the block's border instead of an empty, faded calendar. */
.sd-demo-cal.is-loading .sd-demo-cal__dates,
.sd-demo-cal.is-loading .sd-demo-cal__times,
.sd-demo-cal.has-status .sd-demo-cal__dates,
.sd-demo-cal.has-status .sd-demo-cal__times {
    visibility: hidden;
}

.sd-demo-cal.has-status .sd-demo-cal__status {
    border: 1px solid var(--sd-demo-cal-line);
}

.sd-demo-cal__status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.sd-demo-cal.is-loading .sd-demo-cal__status,
.sd-demo-cal.has-status .sd-demo-cal__status {
    display: flex;
}

.sd-demo-cal.is-loading .sd-demo-cal__status .sd-demo-modal__calendar-loader {
    display: flex;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal__status-text {
    max-width: 360px;
    color: var(--sd-demo-text-secondary);
    font-size: 16px;
    line-height: 24px;
}

.sd-demo-cal__status-text[hidden],
.sd-demo-cal__retry[hidden] {
    display: none;
}

.sd-demo-cal__book-error {
    margin-top: -8px;
}

/* Short desktop screens: a more compact block instead of an inner scroll. */
@media (min-width: 1024px) and (max-height: 860px) {
    .sd-demo-cal {
        --sd-demo-cal-row: 38px;
        height: 500px;
    }

    .sd-demo-cal__dates {
        padding-top: 24px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__day {
        width: 36px;
        height: 36px;
    }

    .sd-demo-cal__times {
        gap: 14px;
        padding-top: 22px;
    }
}

/* --- full-screen sheet (tablet + mobile): dates, then times --- */

@media (max-width: 1023px) {
    .sd-demo-cal {
        --sd-demo-cal-row: 71px;
        display: block;
        height: auto;
        min-height: 0;
    }

    .sd-demo-cal[data-view="dates"] .sd-demo-cal__times,
    .sd-demo-cal[data-view="times"] .sd-demo-cal__dates {
        display: none;
    }

    .sd-demo-cal.is-loading,
    .sd-demo-cal.has-status {
        min-height: 420px;
    }

    .sd-demo-cal__dates {
        padding: 56px 24px 28px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__month-label {
        font-size: 28px;
        line-height: 36px;
    }

    .sd-demo-cal__weekdays {
        margin-top: 28px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__weekdays span {
        font-size: 17px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__day {
        width: 64px;
        height: 64px;
        font-size: 18px;
    }

    .sd-demo-cal__times {
        gap: 20px;
        padding: 24px;
        border-left: 1px solid var(--sd-demo-cal-line);
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__back {
        display: inline-flex;
    }

    .sd-demo-cal__slots {
        grid-auto-rows: 48px;
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .sd-demo-cal {
        --sd-demo-cal-row: 50px;
    }

    .sd-demo-cal__dates {
        padding: 44px 0 20px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__month-label {
        min-width: 150px;
        font-size: 20px;
        line-height: 28px;
    }

    .sd-demo-cal__weekdays {
        margin-top: 24px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__weekdays span {
        font-size: 13px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal__day {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .sd-demo-cal__times {
        padding: 20px;
        border-right: 0;
        border-left: 0;
    }

    .sd-demo-cal__book-error {
        margin-top: 0;
    }
}

/* ==========================================================================
   The calendar step's look, Figma 23097:13466 "calendar-layout", 928x512,
   grid 251 | 426 | 251: grey info panel, white month grid (available #f5f5f5,
   selected #171717), times list (36px, r8, picked #262626). No mobile frame in
   Figma: up to 1023px dates first, then times.
   Every rule is prefixed .sd-demo-modal.sd-demo-modal .sd-demo-cal--own so it beats the
   base rules above, inside and outside their media queries.
   ========================================================================== */

@media (min-width: 1024px) {
    .sd-demo-modal[data-calendar="own"][data-step="calendar"] .sd-demo-modal__close {
        top: 8px;
        right: 8px;
    }
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own {
    --sd-demo-b-text: rgba(0, 0, 0, 0.75);
    --sd-demo-b-muted: rgba(0, 0, 0, 0.55);
    --sd-demo-b-line: #e5e5e5;

    grid-template-columns: 251px minmax(0, 1fr) 251px;
    height: 512px;
    overflow: hidden;
    border-radius: 16px;
    color: var(--sd-demo-b-text);
}

/* --- which calendar the step shows (root data-calendar, set by demo-modal.js) --- */

.sd-demo-modal__hubspot {
    display: contents;
}

.sd-demo-modal[data-calendar="own"] .sd-demo-modal__hubspot,
.sd-demo-modal:not([data-calendar="own"]) .sd-demo-cal {
    display: none;
}

/* Our block brings its own padding and fills the step edge to edge; beats the iframe
   step's padding/gap/max-width rules in every media query. */
.sd-demo-modal[data-calendar="own"] .sd-demo-modal__step--calendar {
    gap: 0;
    max-width: none;
    padding: 0;
}

/* --- info panel --- */

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-width: 0;
    padding: 32px;
    background: #f5f5f5;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-avatar {
    display: block;
    width: 72px;
    height: 72px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #faf7f5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-title {
    margin: 0;
    color: #262626;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.12px;
    outline: none;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-desc,
.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-meta li {
    color: var(--sd-demo-b-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-icon {
    flex: 0 0 16px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__tz {
    min-width: 0;
}

/* The zone reads as plain text ("Eastern Time (New York)") with a small chevron. */
.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__tz-select {
    padding: 0 18px 0 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23737373' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center;
    color: var(--sd-demo-b-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__tz-select:focus-visible {
    outline-color: #262626;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sd-demo-b-muted);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-back:hover {
    color: #262626;
}

/* --- month --- */

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__dates {
    align-items: stretch;
    padding: 24px;
    background: #fff;
    color: inherit;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__month {
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__month-label {
    min-width: 0;
    color: var(--sd-demo-b-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.12px;
    text-align: left;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__navs {
    display: flex;
    gap: 4px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__nav {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    color: var(--sd-demo-b-text);
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__nav svg {
    width: 20px;
    height: 20px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__nav:hover:not(:disabled) {
    background: #f5f5f5;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__nav:focus-visible,
.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__day:focus-visible {
    outline: 2px solid #262626;
    outline-offset: 2px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__weekdays {
    gap: 6px;
    align-items: center;
    height: 56px;
    margin-top: 6px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__weekdays span {
    color: var(--sd-demo-b-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.7px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__days {
    gap: 6px;
    grid-auto-rows: 49px;
    margin-top: 6px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__day {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 6px;
    background: #f5f5f5;
    color: var(--sd-demo-b-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__day:hover:not(:disabled):not(.is-selected) {
    background: #ebebeb;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__day:disabled,
.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__day--blank {
    background: none;
    color: var(--sd-demo-b-muted);
    font-weight: 400;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__day.is-selected {
    background: #171717;
    color: #fff;
}

/* --- times --- */

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__times {
    gap: 16px;
    padding: 24px;
    border: 0;
    border-left: 1px solid var(--sd-demo-b-line);
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__selected-date {
    color: var(--sd-demo-b-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.12px;
}

/* Grows with its list, shrinks when the column is full, so fitSlots() can see the
   overflow and switch a long day to 2 columns (Confirm stays right under the list). */
.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slots {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 36px;
    flex: 0 1 auto;
    gap: 10px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slots.is-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slots.is-denser {
    grid-auto-rows: 32px;
    gap: 6px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slot {
    padding: 0 8px;
    border: 1px solid var(--sd-demo-b-line);
    border-radius: 8px;
    background: #fff;
    color: var(--sd-demo-b-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slot:hover {
    border-color: #b2b2b2;
    background: #fff;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slot.is-picked {
    border-color: #262626;
    background: #262626;
    color: #fff;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slot:focus-visible {
    outline: 2px solid #262626;
    outline-offset: 2px;
}

.sd-demo-cal__confirm-b {
    position: relative;
    flex: 0 0 auto;
}

.sd-demo-cal__confirm-b[hidden] {
    display: none;
}

.sd-demo-cal__confirm-b .sd-demo-modal__spinner {
    position: absolute;
    inset: 0;
}

.sd-demo-cal__confirm-b.is-loading .sd-demo-cal__confirm-label {
    visibility: hidden;
}

.sd-demo-cal__confirm-b.is-loading .sd-demo-modal__spinner {
    display: flex;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__book-error {
    margin: 0;
}

.sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__status {
    border: 0;
}

/* Short desktop screens: the 512px block still fits, nothing to change. */

/* --- full-screen sheet (tablet + mobile): no Figma frame, dates then times --- */

@media (max-width: 1023px) {
    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own {
        display: block;
        height: auto;
        overflow: visible;
        border-radius: 0;
    }

    /* 22.10 feedback: the picked time's button sticks to the bottom of the screen so a
       long times list never hides it. The white spread shadow masks the slots behind. */
    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__confirm-b {
        position: sticky;
        bottom: 16px;
        z-index: 2;
        box-shadow: 0 0 0 16px #fff, 0 -16px 24px 12px rgba(255, 255, 255, 0.9);
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info {
        position: static;
        gap: 0;
        padding: 72px 20px 20px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-main {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 6px 14px;
        align-items: center;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-avatar {
        width: 56px;
        height: 56px;
        grid-row: span 1;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-desc {
        display: none;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-meta {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 20px;
        margin-top: 10px;
    }

    /* In the top bar, left (the close button sits on the right). */
    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-back {
        position: absolute;
        top: 26px;
        left: 20px;
        z-index: 3;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__dates,
    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__times {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__times {
        border: 0;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__weekdays {
        height: 40px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__weekdays span {
        font-size: 12px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__days {
        grid-auto-rows: 48px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__day {
        width: 100%;
        height: 100%;
        font-size: 15px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 44px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__slot {
        font-size: 15px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own.is-loading,
    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own.has-status {
        min-height: 420px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* The grey info panel runs edge to edge (22.10 feedback); its content and the
       dates/times keep their own columns. */
    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info {
        padding: 96px 32px 24px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-main {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-back {
        top: 38px;
        left: 32px;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__info-desc {
        display: block;
    }

    .sd-demo-modal.sd-demo-modal .sd-demo-cal--own .sd-demo-cal__days {
        grid-auto-rows: 64px;
    }
}

/* In-text Book a Demo triggers: <a role="button"> without href keeps the content's own link styles. */
:where(a.sd-demo-cta--inline) {
    cursor: pointer;
}