.mm-sf-wrap { max-width: calc(1320px + 2 * var(--mm-container-pad)); padding-bottom: 64px; } .mm-sf { padding: 24px; background: var(--mm-white); border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } .mm-sf__head { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--mm-border); } .mm-sf__head-icon { display: block; width: 48px; height: 48px; flex: none; } .mm-sf__head-icon svg, .mm-sf__head-icon img { width: 48px; height: 48px; display: block; } .mm-sf__head-title { margin: 0; font-size: 20px; font-weight: var(--mm-fw-semibold); line-height: 32px; color: var(--mm-text); } .mm-sf__steps { justify-content: center; gap: 0; display: flex; justify-content: center; gap: 0; margin: 49px 0 0; padding: 0; list-style: none; } .mm-sf__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 214px; text-align: center; } .mm-sf__step + .mm-sf__step::after { content: ''; position: absolute; top: 24px; inset-inline-end: calc(50% + 32px); width: 150px; height: 1px; background: var(--mm-border); } .mm-sf__step.is-done + .mm-sf__step::after, .mm-sf__step.is-active + .mm-sf__step::after { background: var(--mm-primary); } .mm-sf__step-icon { display: block; width: 48px; height: 48px; flex: none; position: relative; z-index: 1; } .mm-sf__step-icon svg, .mm-sf__step-icon img { width: 48px; height: 48px; display: block; } .mm-sf__step-label { font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; color: var(--mm-text-muted); white-space: nowrap; } .mm-sf__step.is-active .mm-sf__step-label, .mm-sf__step.is-done .mm-sf__step-label { font-weight: var(--mm-fw-semibold); color: var(--mm-text); } .mm-sf__step:not(.is-active):not(.is-done) .mm-sf__step-icon { filter: grayscale(1) opacity(.55); } .mm-sf__panel { width: 872px; max-width: 100%; margin: 32px auto 0; } .mm-sf__panel[hidden] { display: none !important; } .mm-sf__grid { display: grid; gap: 24px; margin-bottom: 24px; } .mm-sf__grid--2 { grid-template-columns: repeat(2, 1fr); } .mm-sf__grid--3 { grid-template-columns: repeat(3, 1fr); } .mm-sf__field { position: relative; margin-bottom: 24px; } .mm-sf__field + .mm-sf__field { margin-top: 32px; } .mm-sf__grid .mm-sf__field, .mm-sf__grid .mm-sf__field + .mm-sf__field { margin-top: 0; margin-bottom: 0; } .mm-sf__field.is-wide { grid-column: 1 / -1; } .mm-sf__label { position: absolute; top: -10px; inset-inline-start: 12px; z-index: 2; padding-inline: 6px; background: var(--mm-white); font-size: 14px; font-weight: var(--mm-fw-semibold); line-height: 20px; color: var(--mm-text); white-space: nowrap; } .mm-sf__label i { color: var(--mm-danger); font-style: normal; } .mm-sf .mm-sf__input { width: 100%; height: 48px; padding: 0 12px; background: transparent; border: 1px solid var(--mm-border); border-radius: 12px; font-family: inherit; font-size: 12px; font-weight: var(--mm-fw-light); color: var(--mm-text); transition: border-color var(--mm-transition); } .mm-sf .mm-sf__input::placeholder { font-size: 12px; font-weight: var(--mm-fw-light); color: var(--mm-text-muted); } .mm-sf .mm-sf__input:focus { outline: none; border-color: var(--mm-primary); } .mm-sf .mm-sf__input--area { display: block; height: 200px; padding: 14px 12px; resize: vertical; line-height: 24px; } select.mm-sf__input, .mm-sf select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23828282' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; background-size: 16px; padding-inline-end: 12px; padding-inline-start: 34px; } .mm-sf__field.has-error .mm-sf__input { border-color: var(--mm-danger); } .mm-sf__error { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--mm-danger); } .mm-sf__hint { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--mm-text-muted); } .mm-sf__hint--block { margin: 12px 0 0; font-size: 14px; font-weight: var(--mm-fw-semibold); line-height: 20px; color: var(--mm-text-muted); } .mm-sf__words { display: block; margin-top: 6px; font-size: 12px; font-weight: var(--mm-fw-regular); line-height: 18px; color: var(--mm-primary); min-height: 18px; } .mm-sf__section { margin: 24px 0 12px; font-size: 20px; font-weight: var(--mm-fw-semibold); line-height: 32px; color: var(--mm-text); } .mm-sf__section--first { margin-top: 0; } .mm-sf__images { display: flex; flex-wrap: wrap-reverse; justify-content: flex-start; gap: 12px; } .mm-sf__addimg { width: 88px; height: 88px; flex: none; padding: 0; background: none; border: 0; cursor: pointer; order: -1; } .mm-sf__addimg svg, .mm-sf__addimg img { width: 88px; height: 88px; display: block; } .mm-sf__thumb { position: relative; width: 88px; height: 88px; flex: none; border-radius: 8px; overflow: hidden; background: var(--mm-gray-200); } .mm-sf__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mm-sf__thumb-del, .mm-sf__thumb-star { position: absolute; top: 4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; font-size: 13px; line-height: 1; cursor: pointer; color: var(--mm-white); } .mm-sf__thumb-del { inset-inline-end: 4px; background: var(--mm-danger); } .mm-sf__thumb-star { inset-inline-start: 4px; background: rgba(0, 0, 0, .55); } .mm-sf__thumb.is-cover .mm-sf__thumb-star { background: var(--mm-accent); } .mm-sf__thumb-badge { position: absolute; inset-inline: 0; bottom: 0; padding: 2px 0; background: var(--mm-accent); font-size: 10px; line-height: 14px; text-align: center; color: var(--mm-white); } .mm-sf__thumb:not(.is-cover) .mm-sf__thumb-badge { display: none; } .mm-sf__video { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 152px; padding: 20px 24px; background: var(--mm-gray-100, #f7f7f7); border: 1px solid var(--mm-primary); border-radius: 12px; cursor: pointer; text-align: center; } .mm-sf__video-icon { display: block; width: 40px; height: 40px; flex: none; } .mm-sf__video-icon svg, .mm-sf__video-icon img { width: 40px; height: 40px; display: block; } .mm-sf__video-title { font-size: 16px; font-weight: var(--mm-fw-semibold); line-height: 24px; color: var(--mm-text); } .mm-sf__video-hint { font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; color: var(--mm-text-muted); } .mm-sf__video.is-busy { opacity: .7; pointer-events: none; } .mm-sf .mm-sf__videoinput { width: 100%; max-width: 420px; height: 44px; padding: 0 12px; background: var(--mm-white); border: 1px solid var(--mm-border); border-radius: 10px; font-family: inherit; font-size: 12px; color: var(--mm-text); direction: ltr; text-align: left; } .mm-sf__group { margin-bottom: 32px; } .mm-sf__grouplabel { display: block; margin-bottom: 12px; font-size: 14px; font-weight: var(--mm-fw-semibold); line-height: 20px; color: var(--mm-text); } .mm-sf__checks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 16px; } .mm-sf__checks--4 { grid-template-columns: repeat(4, 1fr); max-width: 480px; margin-inline-start: auto; } .mm-sf__check { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; color: var(--mm-text); cursor: pointer; } .mm-sf__check input { position: absolute; opacity: 0; width: 0; height: 0; } .mm-sf__checkbox { position: relative; width: 20px; height: 20px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--mm-border); transition: background-color var(--mm-transition), box-shadow var(--mm-transition); } .mm-sf__check input:checked + .mm-sf__checkbox { background: var(--mm-primary); box-shadow: inset 0 0 0 1px var(--mm-primary); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 20px 20px; } .mm-sf__check input:focus-visible + .mm-sf__checkbox { outline: 2px solid var(--mm-primary); outline-offset: 2px; } .mm-sf__map { padding: 20px; background: var(--mm-gray-100, #f7f7f7); border-radius: 12px; } .mm-sf__maphint { margin: 0 0 20px; font-size: 14px; line-height: 22px; color: var(--mm-text-muted); } .mm-picker { margin-bottom: 20px; } .mm-picker__canvas { position: relative; height: 320px; overflow: hidden; border: 1px solid var(--mm-border); border-radius: 12px; background: #e8eaed; cursor: grab; touch-action: none; user-select: none; } .mm-picker__canvas.is-dragging { cursor: grabbing; } .mm-picker__tiles { position: absolute; inset: 0; } .mm-picker__tile { position: absolute; top: 0; inset-inline-start: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; direction: ltr; } .mm-picker__pin { position: absolute; top: 50%; left: 50%; width: 28px; height: 40px; margin: -40px 0 0 -14px; pointer-events: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40' viewBox='0 0 28 40'%3E%3Cpath d='M14 0C6.8 0 1 5.8 1 13c0 9.2 11.2 25.2 11.7 25.9a1.6 1.6 0 0 0 2.6 0C15.8 38.2 27 22.2 27 13 27 5.8 21.2 0 14 0Z' fill='%230638BE'/%3E%3Ccircle cx='14' cy='13' r='5' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); } .mm-picker__zoom { position: absolute; top: 12px; inset-inline-end: 12px; display: flex; flex-direction: column; gap: 6px; } .mm-picker__zoom button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--mm-border); border-radius: 10px; background: var(--mm-white); font-size: 18px; line-height: 1; color: var(--mm-text); cursor: pointer; } .mm-picker__zoom button:hover { border-color: var(--mm-primary); color: var(--mm-primary); } .mm-picker__credit { position: absolute; bottom: 6px; inset-inline-start: 8px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .8); font-size: 10px; color: #444; direction: ltr; } .mm-picker__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; } .mm-picker__search { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; } .mm-picker__search input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--mm-border); border-radius: 12px; background: var(--mm-white); font: inherit; font-size: 13px; color: var(--mm-text); } .mm-picker__search input:focus { outline: none; border-color: var(--mm-primary); } .mm-picker__note { margin: 8px 0 0; font-size: 12px; line-height: 18px; color: var(--mm-text-muted); } @media (max-width: 640px) { .mm-picker__canvas { height: 260px; } } .mm-sf__map .mm-sf__label { background: var(--mm-gray-100, #f7f7f7); } .mm-sf__geo { height: 44px; padding: 0 20px; background: transparent; border: 1px solid var(--mm-primary); border-radius: 12px; font-family: inherit; font-size: 14px; color: var(--mm-primary); cursor: pointer; } .mm-sf__geo:hover { background: var(--mm-primary); color: var(--mm-white); } .mm-sf__actions { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; } .mm-sf__next, .mm-sf__back { width: 312px; height: 48px; border-radius: 16px; font-family: inherit; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; cursor: pointer; transition: background-color var(--mm-transition), color var(--mm-transition); } .mm-sf__next { order: 2; background: var(--mm-primary); border: 1px solid var(--mm-primary); color: var(--mm-white); } .mm-sf__next:hover { background: var(--mm-primary-hover); } .mm-sf__back { order: 1; background: transparent; border: 1px solid var(--mm-border); color: var(--mm-primary); } .mm-sf__back:hover { border-color: var(--mm-primary); } .mm-sf__actions > .mm-sf__next:only-child { margin-inline-start: auto; } .mm-sf__next[disabled] { opacity: .6; pointer-events: none; } .mm-sf__editnote { margin: 24px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(234, 179, 8, .1); border: 1px solid rgba(234, 179, 8, .35); font-size: 14px; line-height: 24px; color: #a16207; } .mm-sf__notice { margin: 24px auto 0; width: 872px; max-width: 100%; padding: 12px 16px; border-radius: 12px; background: rgba(239, 68, 68, .08); font-size: 14px; line-height: 22px; color: var(--mm-danger); } .mm-sf__notice.is-ok { background: rgba(0, 163, 42, .08); color: var(--mm-success); } @media (max-width: 1200px) { .mm-sf__steps { flex-wrap: wrap; gap: 16px; } .mm-sf__step { width: auto; flex: 1 1 160px; } .mm-sf__step + .mm-sf__step::after { display: none; } } @media (max-width: 900px) { .mm-sf__panel { width: 100%; } .mm-sf__checks { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .mm-sf { padding: 16px; } .mm-sf__grid--2, .mm-sf__grid--3 { grid-template-columns: 1fr; } .mm-sf__checks, .mm-sf__checks--4 { grid-template-columns: repeat(2, 1fr); max-width: none; } .mm-sf__actions { flex-direction: column; } .mm-sf__next, .mm-sf__back { width: 100%; } } [data-mm-images] { display: flex; flex-wrap: wrap; gap: 12px; } [data-mm-images] .mm-sf__addimg, [data-mm-images] [data-mm-addimg] { order: 99; } .mm-sf__addimg, [data-mm-addimg] { border: 0; background: none; outline: none; } .mm-sf__checks { display: flex; flex-wrap: wrap; justify-content: flex-start; direction: rtl; gap: 12px 24px; } .mm-sf select.mm-sf__input { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23828282' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left 12px center !important; background-size: 16px 16px !important; }