/* Consent v1 (Figma 291:2967). Logical properties only: the site is ar (RTL) and en (LTR). */
:root {
    --mr-mkt-pri: #480684;
    --mr-mkt-pri-2: #6d28b0;
    --mr-mkt-soft: #f3ecfa;
    --mr-mkt-ink: #172033;
    --mr-mkt-mut: #667085;
    --mr-mkt-line: #e4e0eb;
    --mr-mkt-ok: #480684;
    --mr-mkt-ok-soft: #f3ecfa;
}

.mr-mkt-pill {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mr-mkt-soft);
    color: var(--mr-mkt-pri);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.mr-mkt-pill--light {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* 1. Booking page box */
.mr-mkt-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block-start: 12px;
    padding: 16px;
    border: 1px solid var(--mr-mkt-line);
    border-radius: 16px;
    background: #fff;
}

.mr-mkt-box:has(.mr-mkt-box__check:checked) {
    border: 2px solid var(--mr-mkt-pri);
    background: var(--mr-mkt-soft);
}

.mr-mkt-box:has(.mr-mkt-box__check:checked) .mr-mkt-pill {
    background: #fff;
}

.mr-mkt-box__check {
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    margin: 2px 0 0;
    accent-color: var(--mr-mkt-pri);
    cursor: pointer;
}

.mr-mkt-box__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-inline-size: 0;
}

.mr-mkt-box__title {
    margin: 0;
    color: var(--mr-mkt-ink);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.mr-mkt-box__hint {
    margin: 0;
    color: var(--mr-mkt-mut);
    font-size: 12px;
    line-height: 1.7;
}

/* 2. Thank-you page cards */
.mr-mkt-offer,
.mr-mkt-done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-block: 16px;
    padding: 20px;
    border-radius: 16px;
    text-align: start;
}

.mr-mkt-offer {
    background: linear-gradient(135deg, var(--mr-mkt-pri), var(--mr-mkt-pri-2));
    color: #fff;
}

.mr-mkt-offer__title,
.mr-mkt-done__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.mr-mkt-offer__title {
    color: #fff;
}

.mr-mkt-offer__text {
    margin: 0;
    color: #e9dcf7;
    font-size: 14px;
}

.mr-mkt-offer__form {
    align-self: stretch;
    margin: 0;
}

.mr-mkt-offer__btn {
    inline-size: 100%;
    min-block-size: 50px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--mr-mkt-pri);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.mr-mkt-offer__btn:focus-visible,
.mr-mkt-join__btn:focus-visible,
.mr-mkt-join__link:focus-visible {
    outline: 3px solid #d9c7ee;
    outline-offset: 2px;
}

.mr-mkt-offer__small {
    align-self: center;
    margin: 0;
    color: #d9c7ee;
    font-size: 11px;
}

.mr-mkt-done {
    border: 1px solid #e4d6f2;
    background: var(--mr-mkt-ok-soft);
}

.mr-mkt-done__title {
    color: var(--mr-mkt-ok);
}

.mr-mkt-done__text {
    margin: 0;
    color: var(--mr-mkt-ink);
    font-size: 14px;
}

.mr-mkt-done__small {
    margin: 0;
    color: var(--mr-mkt-ok);
    font-size: 12px;
    font-weight: 500;
}

/* 4. Studio QR page */
.mr-mkt-join {
    display: flex;
    justify-content: center;
    padding: 24px 16px 48px;
    background: #f4f3f7;
}

.mr-mkt-join__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    inline-size: 100%;
    max-inline-size: 440px;
    padding: 24px 20px;
    border: 1px solid var(--mr-mkt-line);
    border-radius: 20px;
    background: #fff;
}

.mr-mkt-join__step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: start;
}

.mr-mkt-join__step[hidden],
.mr-mkt-join__name[hidden],
.mr-mkt-join [hidden] {
    display: none;
}

.mr-mkt-join__step--done {
    align-items: center;
    text-align: center;
}

.mr-mkt-join__step .mr-mkt-pill {
    align-self: flex-start;
}

.mr-mkt-join__count {
    margin: 0;
    color: var(--mr-mkt-mut);
    font-size: 12px;
    font-weight: 500;
}

.mr-mkt-join__title {
    margin: 0;
    color: var(--mr-mkt-ink);
    font-size: 22px;
    font-weight: 700;
}

.mr-mkt-join__lead {
    margin: 0;
    color: var(--mr-mkt-mut);
    font-size: 14px;
}

.mr-mkt-join__label {
    margin: 0;
    color: var(--mr-mkt-ink);
    font-size: 13px;
    font-weight: 600;
}

.mr-mkt-join__input {
    inline-size: 100%;
    min-block-size: 50px;
    padding-inline: 14px;
    border: 1px solid var(--mr-mkt-line);
    border-radius: 12px;
    background: #fff;
    color: var(--mr-mkt-ink);
    font-size: 16px;
}

.mr-mkt-join__input:focus {
    border-color: var(--mr-mkt-pri);
    outline: none;
}

.mr-mkt-join__input--code {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-align: center;
}

.mr-mkt-join__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 52px;
    border: 0;
    border-radius: 14px;
    background: var(--mr-mkt-pri);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.mr-mkt-join__btn:hover {
    color: #fff;
}

.mr-mkt-join__btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.mr-mkt-join__link {
    align-self: center;
    border: 0;
    background: none;
    color: var(--mr-mkt-pri);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mr-mkt-join__small {
    margin: 0;
    color: var(--mr-mkt-mut);
    font-size: 11px;
    line-height: 1.7;
}

.mr-mkt-join__error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdecec;
    color: #b42318;
    font-size: 13px;
}

@media (min-width: 768px) {
    .mr-mkt-join {
        padding-block: 64px;
    }

    .mr-mkt-join__card {
        padding: 32px 28px;
    }
}