.mm-bkform__field + .mm-bkform__field, .mm-bkform__dates + .mm-bkform__field { margin-top: 20px; } .mm-bkform__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: var(--mm-fw-semibold); line-height: 20px; color: var(--mm-text); } .mm-bkform__input { width: 100%; height: 48px; padding: 0 12px; background: transparent; border: 1px solid var(--mm-border); border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: var(--mm-fw-light); color: var(--mm-text); text-align: start; } .mm-bkform__input::placeholder { font-size: 12px; font-weight: var(--mm-fw-light); color: var(--mm-text-muted); } .mm-bkform__input:focus { outline: none; border-color: var(--mm-primary); } .mm-bkform__input--area { height: auto; min-height: 84px; padding: 12px; resize: vertical; line-height: 22px; } input.mm-bkform__input[readonly] { cursor: pointer; background: var(--mm-surface-soft); } .mm-bkform__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mm-bkform__dates .mm-bkform__field + .mm-bkform__field { margin-top: 0; } .mm-bkform__field, .mm-bkform__dates .mm-bkform__field { position: relative; } .mm-bkform__slots { display: flex; flex-wrap: wrap; gap: 8px; } .mm-bkform__slot { cursor: pointer; } .mm-bkform__slot input { position: absolute; opacity: 0; pointer-events: none; } .mm-bkform__slot span { display: inline-flex; align-items: center; height: 36px; padding-inline: 14px; border: 1px solid var(--mm-border); border-radius: 10px; font-size: 13px; color: var(--mm-text-muted); transition: border-color var(--mm-transition), color var(--mm-transition), background var(--mm-transition); } .mm-bkform__slot input:checked + span { border-color: var(--mm-primary); background: rgba(37, 99, 235, .06); color: var(--mm-primary); font-weight: var(--mm-fw-semibold); } .mm-bkform__slot input:focus-visible + span { outline: 2px solid var(--mm-primary); outline-offset: 2px; } .mm-bkform__sum { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--mm-surface-soft); font-size: 14px; font-weight: var(--mm-fw-semibold); line-height: 22px; color: var(--mm-text); unicode-bidi: plaintext; text-align: start; } .mm-bkform__submit { width: 100%; height: 48px; margin-top: 20px; background: var(--mm-primary); border: 1px solid var(--mm-primary); border-radius: 16px; font-family: inherit; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; color: var(--mm-white); cursor: pointer; transition: opacity var(--mm-transition); } .mm-bkform__submit:hover { opacity: .9; } .mm-bkform__submit[disabled] { opacity: .6; pointer-events: none; } .mm-bkform__note { margin: 12px 0 0; font-size: 14px; line-height: 22px; } .mm-bkform__note.is-ok { color: var(--mm-success); } .mm-bkform__note.is-bad { color: var(--mm-danger); } .mm-bkform__hint { margin: 10px 0 0; font-size: 12px; line-height: 20px; color: var(--mm-text-muted); } .mm-cal { position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + 6px); width: 268px; padding: 12px; background: var(--mm-white); border: 1px solid var(--mm-border); border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 23, 42, .12); } .mm-cal[hidden] { display: none; } .mm-bkform__dates .mm-bkform__field:last-child .mm-cal { inset-inline-start: auto; inset-inline-end: 0; } .mm-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mm-cal__title { font-size: 14px; font-weight: var(--mm-fw-semibold); color: var(--mm-text); } .mm-cal__nav { width: 28px; height: 28px; border: 1px solid var(--mm-border); border-radius: 8px; background: transparent; font-size: 16px; line-height: 1; color: var(--mm-text-muted); cursor: pointer; } .mm-cal__nav:hover { border-color: var(--mm-primary); color: var(--mm-primary); } .mm-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .mm-cal__dow { display: flex; align-items: center; justify-content: center; height: 26px; font-size: 11px; color: var(--mm-text-muted); } .mm-cal__pad { height: 32px; } .mm-cal__day { height: 32px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-size: 13px; color: var(--mm-text); cursor: pointer; transition: background var(--mm-transition), color var(--mm-transition); } .mm-cal__day:hover:not(:disabled) { background: var(--mm-surface-soft); } .mm-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--mm-border); } .mm-cal__day.is-between { background: rgba(37, 99, 235, .08); } .mm-cal__day.is-picked { background: var(--mm-primary); color: var(--mm-white); font-weight: var(--mm-fw-semibold); } .mm-cal__day.is-off { color: var(--mm-text-muted); opacity: .38; cursor: not-allowed; text-decoration: line-through; } @media (max-width: 420px) { .mm-cal { width: 100%; min-width: 240px; } .mm-bkform__dates { grid-template-columns: 1fr; } } .mm-bkbox { padding: 32px; background: var(--mm-white); border: 1px solid var(--mm-border); border-radius: 24px; } .mm-bkbox--plain { padding: 0; background: transparent; border: 0; border-radius: 0; } .mm-bkbox__title { margin: 0 0 8px; font-size: 22px; font-weight: var(--mm-fw-semibold); line-height: 34px; color: var(--mm-text); } .mm-bkbox__text { margin: 0 0 24px; font-size: 14px; line-height: 24px; color: var(--mm-text-muted); } .mm-bkbox__warn { padding: 12px 16px; border: 1px dashed var(--mm-danger); border-radius: 12px; font-size: 13px; color: var(--mm-danger); } @media (min-width: 768px) { .mm-bkbox .mm-bkform__dates { gap: 16px; } }