/* The root is shared by both layouts, so it carries only the tokens, the box
   model and the type. Every card property lives on the card modifier below,
   because the embedded layout must draw no card of its own. */
.lcc-demo {
    --lt-accent: #bee034;
    --lt-accent-hover: #b2d42c;
    --lt-focus: #93ad28;
    --lcc-radius: 6px;
    --lcc-card-radius: 32px;
    --lcc-card-bg: rgba(255, 255, 255, 0.85);
    --lcc-card-shadow: 0 12px 40px rgba(38, 39, 43, 0.08);
    --lcc-chosen-bg: rgba(190, 224, 52, 0.18);
    --lcc-notice-bg: #fff3e0;
    --lcc-notice-text: #7a4a00;
    box-sizing: border-box;
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--neutral-900, #26272b);
}

.lcc-demo * {
    box-sizing: border-box;
}

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

/* Two class names, because the theme's constrained layout sets a max-width on
   every direct child with the same weight as a single class would have. */
.lcc-demo.lcc-demo--card {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 36px 40px 32px;
    background-color: var(--lcc-card-bg);
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
    border-radius: var(--lcc-card-radius);
    box-shadow: var(--lcc-card-shadow);
}

.lcc-demo__title {
    margin: 0 0 6px;
    font-family: var(--wp--preset--font-family--headline);
    font-size: var(--wp--preset--font-size--headline-6, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
}

.lcc-demo__lead {
    margin: 0 0 20px;
    font-size: var(--wp--preset--font-size--body-2, 0.9375rem);
    color: var(--wp--preset--color--neutral-700, #878991);
}

.lcc-demo__steps {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--wp--preset--color--neutral-700, #878991);
}

.lcc-demo--card .lcc-demo__steps {
    margin-bottom: 22px;
}

.lcc-demo__steps li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lcc-demo__steps li::after {
    content: '';
    width: 24px;
    height: 1px;
    background-color: var(--wp--preset--color--neutral-300, #cccdd0);
}

.lcc-demo__steps li:last-child::after {
    display: none;
}

.lcc-demo__steps .is-current {
    color: var(--wp--preset--color--neutral-900, #26272b);
    font-weight: 600;
}

.lcc-demo__step-num {
    display: inline-flex;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.75rem;
}

.is-current .lcc-demo__step-num {
    background-color: var(--lt-accent);
    border-color: var(--lt-accent);
    color: var(--wp--preset--color--neutral-900, #26272b);
}

.is-done .lcc-demo__step-num {
    background-color: var(--wp--preset--color--neutral-900, #26272b);
    border-color: var(--wp--preset--color--neutral-900, #26272b);
    color: var(--wp--preset--color--white, #fff);
}

/* "Back" and "Continue without an appointment" are the second way out of a
   step, not a footnote. At neutral-700 on a near-white card they were the
   palest thing in it and read as disabled, so they carry the body text colour
   and the underline does the work of saying they can be clicked. */
.lcc-demo__link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--wp--preset--color--neutral-900, #26272b);
    text-decoration: underline;
    cursor: pointer;
}

.lcc-demo__link-btn:hover {
    text-decoration: none;
}

.lt-demo-form__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
}

.lt-demo-form__field {
    grid-column: span var(--columns, 12) / span var(--columns, 12);
    display: flex;
    flex-direction: column;
}

.lt-demo-form__control-wrap {
    position: relative;
}

.lt-demo-form__control {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--wp--preset--color--white, #fff);
    border: 1px solid var(--wp--preset--color--neutral-400, #bbbcc0);
    border-radius: var(--lcc-radius);
    height: 48px;
    padding: 12px 12px 12px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
}

.lt-demo-form__control:focus {
    outline: none;
    border-color: var(--lt-focus);
    box-shadow: 0 0 0 1px var(--lt-focus);
}

input.lt-demo-form__control,
textarea.lt-demo-form__control {
    cursor: text;
}

input.lt-demo-form__control::placeholder,
textarea.lt-demo-form__control::placeholder {
    color: transparent;
    opacity: 0;
}

textarea.lt-demo-form__control {
    resize: vertical;
    height: auto;
    min-height: 96px;
    padding-top: 12px;
}

.lt-demo-form__label {
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 12px;
    margin: 0;
    padding: 0 4px;
    background-color: var(--wp--preset--color--white, #fff);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wp--preset--color--neutral-700, #878991);
    transform-origin: left top;
    transition: transform 0.2s ease-out;
}

.lt-demo-form__control-wrap:has(.lt-demo-form__control:focus)
    .lt-demo-form__label,
.lt-demo-form__control-wrap:has(.lt-demo-form__control:not(:placeholder-shown))
    .lt-demo-form__label {
    transform: translateY(-22px) scale(0.85);
}

.lt-demo-form__error {
    margin: 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #e53e3e;
}

.lt-demo-form__error:empty {
    display: none;
}

.lt-demo-form__field--invalid .lt-demo-form__control {
    border-color: #e53e3e;
    box-shadow: 0 0 0 1px #e53e3e;
}

.lt-demo-form__turnstile {
    margin-top: 20px;
}

.lt-demo-form__actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.lt-demo-form__submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    background-color: var(--lt-accent);
    border: 1px solid var(--lt-accent);
    color: var(--wp--preset--color--neutral-900, #26272b);
    text-decoration: none;
    font: inherit;
    font-family: var(--wp--preset--font-family--headline);
    /* The site's own buttons are set at body-2, and `font: inherit` above has
       just reset the size to the card's body size. */
    font-size: var(--wp--preset--font-size--body-2, 0.875rem);
    font-weight: 600;
    border-radius: 50vw;
    padding: 12px 25px;
    cursor: pointer;
    transition: transform 300ms cubic-bezier(0.25, 0.4, 0.55, 1.4);
}

.lt-demo-form__submit::after {
    display: block;
    content: '';
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    mask: url('data:image/svg+xml,%3Csvg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8.18875 1.23334L14.7852 7.5L8.18876 13.7667L6.81125 12.3167L10.8288 8.5H1.66667V6.5H10.8288L6.81125 2.68333L8.18875 1.23334Z" fill="%23545762"/%3E%3C/svg%3E%0A');
    -webkit-mask: url('data:image/svg+xml,%3Csvg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8.18875 1.23334L14.7852 7.5L8.18876 13.7667L6.81125 12.3167L10.8288 8.5H1.66667V6.5H10.8288L6.81125 2.68333L8.18875 1.23334Z" fill="%23545762"/%3E%3C/svg%3E%0A');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.lt-demo-form__submit:hover {
    background-color: var(--lt-accent-hover);
    border-color: var(--lt-accent-hover);
    transform: scale(1.04, 1.02);
}

.lt-demo-form__submit:disabled {
    pointer-events: none;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
}

.lt-demo-form__status {
    margin: 16px 0 0;
    font-size: var(--wp--preset--font-size--body-2, 0.875rem);
    color: #bf5329;
}

.lt-demo-form__status:empty {
    display: none;
}

.lt-demo-form__consent {
    margin-top: 16px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--wp--preset--color--neutral-600, #989aa1);
}

.lt-demo-form__consent p {
    margin: 0 0 10px;
}

.lt-demo-form__consent p:last-child {
    margin-bottom: 0;
}

.lt-demo-form__consent--primary {
    font-size: 0.875rem;
    color: var(--wp--preset--color--neutral-900, #26272b);
}

.lt-demo-form__honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lcc-picker {
    margin: 4px 0 0;
}

.lcc-picker__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
}

.lcc-picker__label {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

/* The months of the visible page of days, under the picker's own title. Empty
   until the slot list has been answered, and empty for good against a service
   that does not send the month, so it must take no room of its own then. */
.lcc-picker__label small {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--neutral-800, #656872);
}

.lcc-picker__label small:empty {
    display: none;
}

.lcc-picker__tz {
    font-size: 0.8125rem;
    color: var(--wp--preset--color--neutral-700, #878991);
    white-space: nowrap;
}

.lcc-picker__days {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.lcc-picker__nav {
    flex: 0 0 32px;
    background-color: var(--wp--preset--color--white, #fff);
    border: 1px solid var(--wp--preset--color--neutral-300, #cccdd0);
    border-radius: var(--lcc-radius);
    font: inherit;
    font-size: 1rem;
    color: var(--wp--preset--color--neutral-900, #26272b);
    cursor: pointer;
}

.lcc-picker__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.lcc-picker__strip {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr));
    gap: 6px;
}

.lcc-picker__day,
.lcc-picker__skeleton-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px;
    background-color: var(--wp--preset--color--white, #fff);
    border: 1px solid var(--wp--preset--color--neutral-300, #cccdd0);
    border-radius: var(--lcc-radius);
    font: inherit;
    line-height: 1.2;
    color: var(--wp--preset--color--neutral-900, #26272b);
    cursor: pointer;
}

.lcc-picker__day-wd {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--neutral-700, #878991);
}

.lcc-picker__day-num {
    font-size: 1.0625rem;
    font-weight: 600;
}

.lcc-picker__day-n {
    font-size: 0.625rem;
    color: var(--wp--preset--color--neutral-700, #878991);
}

.lcc-picker__day:hover {
    border-color: var(--wp--preset--color--neutral-500, #a9abb0);
}

.lcc-picker__day[aria-pressed='true'] {
    background-color: var(--wp--preset--color--neutral-900, #26272b);
    border-color: var(--wp--preset--color--neutral-900, #26272b);
    color: var(--wp--preset--color--white, #fff);
}

.lcc-picker__day[aria-pressed='true'] .lcc-picker__day-wd,
.lcc-picker__day[aria-pressed='true'] .lcc-picker__day-n {
    color: inherit;
    opacity: 0.75;
}

.lcc-picker__day:disabled {
    opacity: 0.35;
    cursor: default;
}

.lcc-picker__times {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.lcc-picker__time,
.lcc-picker__skeleton-time {
    padding: 10px 4px;
    background-color: var(--wp--preset--color--white, #fff);
    border: 1px solid var(--wp--preset--color--neutral-400, #bbbcc0);
    border-radius: var(--lcc-radius);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--wp--preset--color--neutral-900, #26272b);
    cursor: pointer;
}

.lcc-picker__time:hover {
    border-color: var(--lt-focus);
}

.lcc-picker__time[aria-pressed='true'] {
    background-color: var(--lt-accent);
    border-color: var(--lt-accent);
    font-weight: 600;
}

.lcc-picker__more,
.lcc-picker__skeleton-more {
    margin-top: 8px;
}

.lcc-picker__more.is-hidden {
    visibility: hidden;
}

.lcc-picker__chosen {
    margin: 14px 0 0;
    padding: 12px 14px;
    background-color: var(--lcc-chosen-bg);
    border-radius: var(--lcc-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
}

.lcc-picker__chosen:empty {
    display: none;
}

.lcc-picker__chosen strong {
    font-weight: 600;
}

/* The skeleton is built out of the picker's own containers and controls, so
   the space it holds open is the space the answered picker takes. It has no
   sizes of its own on purpose. */
.lcc-picker__skeleton {
    pointer-events: none;
}

/* The real strip is laid out on a day count the script works out from the
   card's width, which it can only do once it runs. The skeleton's strip fits
   whatever tiles it has into one row at any width instead, so the count it
   shows costs nothing and the row never moves. The tile is the same height
   either way. */
.lcc-picker__skeleton .lcc-picker__strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.lcc-picker__skeleton-day,
.lcc-picker__skeleton-time,
.lcc-picker__skeleton-more {
    border-radius: var(--lcc-radius);
    background-image: linear-gradient(
        90deg,
        var(--wp--preset--color--neutral-100, #eeeeef),
        var(--wp--preset--color--neutral-50, #f6f7f7),
        var(--wp--preset--color--neutral-100, #eeeeef)
    );
    background-size: 200% 100%;
    animation: lcc-picker-skeleton 1.2s linear infinite;
}

/* A zero width space. An empty placeholder draws no line box of its own and
   would collapse to nothing, and a height written here would be the same
   height written twice. This gives it one line of its own type instead.

   A day tile keeps the three lines the real tile carries. They hold the height
   and nothing else: the shimmer is on the tile, the way it is on a time. */
.lcc-picker__skeleton-day > span::before,
.lcc-picker__skeleton-time::before,
.lcc-picker__skeleton-more::before {
    content: '\200b';
}

.lcc-picker__skeleton-more {
    display: inline-block;
    width: 12ch;
}

/* A month line is still expected while the skeleton is up, so the head holds
   its line open. A service that answers without a month gives the line back
   once, rather than the head growing into it on every visit. */
.lcc-picker:has(.lcc-picker__skeleton:not([hidden])) .lcc-picker__label small {
    display: block;
}

.lcc-picker:has(.lcc-picker__skeleton:not([hidden]))
    .lcc-picker__label
    small::before {
    content: '\200b';
}

@keyframes lcc-picker-skeleton {
    to {
        background-position: -200% 0;
    }
}

.lcc-picker__notice {
    margin: 8px 0 0;
    padding: 10px 12px;
    background-color: var(--lcc-notice-bg);
    border-radius: var(--lcc-radius);
    color: var(--lcc-notice-text);
    font-size: 0.875rem;
}

/* Requirement 3.8: a step change moves the focus to the panel itself, so the
   panel carries a ring of its own.

   :focus-visible, not :focus. A panel has tabindex="-1" for the script, and a
   click on any dead area inside it — a label, the card's padding — focuses it,
   so a plain :focus rule drew a ring around the whole form every time somebody
   clicked in it. :focus-visible answers the question that is actually being
   asked: measured in Chromium and WebKit, focus moved by the script counts as
   visible when the step was advanced from the keyboard and does not when it was
   advanced with the mouse, which is exactly who needs to see the ring. */
.lcc-demo__panel:focus-visible {
    outline: 2px solid var(--lt-focus);
    outline-offset: 4px;
}

/* Requirement 3.8: the picker has to work with the keyboard alone, so every
   control keeps a ring of its own instead of the browser's default one. */
.lcc-demo__link-btn:focus-visible,
.lcc-picker__nav:focus-visible,
.lcc-picker__day:focus-visible,
.lcc-picker__time:focus-visible,
.lt-demo-form__submit:focus-visible {
    outline: 2px solid var(--lt-focus);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .lcc-demo.lcc-demo--card {
        --lcc-card-radius: 20px;
        padding: 24px 18px;
    }

    .lcc-demo__title {
        font-size: 1.125rem;
    }

    .lt-demo-form__actions {
        justify-content: stretch;
    }

    .lt-demo-form__submit {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .lcc-picker__times {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}