@import url('./pages.css');

.wizard-progress { display: flex; position: relative; margin-bottom: 38px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow-x: auto; }
.wizard-progress::before { content: ''; position: absolute; left: 8%; right: 8%; top: 43px; height: 1px; background: var(--line); }
.wizard-progress button { min-width: 145px; flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; color: #899592; background: transparent; text-align: center; }
.wizard-progress button > span { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-weight: 700; }
.wizard-progress button strong { max-width: 130px; font-size: .72rem; font-weight: 700; }
.wizard-progress button.is-active { color: var(--primary); }
.wizard-progress button.is-active > span { color: var(--paper); border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 5px rgba(18,60,56,.08); }
.wizard-progress button.is-complete > span { color: var(--primary); border-color: var(--accent); background: var(--accent); }

.builder-layout { display: flex; align-items: flex-start; gap: 32px; }
.wizard-form { flex: 1; min-width: 0; padding: 42px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--paper); box-shadow: 0 16px 48px rgba(20,35,33,.06); }
.wizard-step[hidden] { display: none; }
.wizard-heading { margin-bottom: 34px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.wizard-heading > span { display: block; margin-bottom: 9px; color: var(--accent-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.wizard-heading h2 { margin-bottom: 14px; font-size: 1.85rem; font-weight: 700; }
.wizard-heading p { font-size: .9rem; }
.large-textarea { min-height: 210px !important; }
.field small { color: var(--ink-soft); font-size: .72rem; text-align: right; }
.wizard-options { margin: 0 0 26px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.wizard-options legend { padding: 0 9px; font-weight: 700; }
.option-list { display: flex; flex-wrap: wrap; gap: 10px; }
.option-item { width: calc(50% - 5px); display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.option-item:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.option-item input { width: 17px; min-height: 17px; accent-color: var(--primary); }
.option-item span { font-size: .82rem; }

.map-picker { overflow: hidden; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.map-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; }
.map-picker-head strong { font-weight: 700; }
.map-picker-head p { font-size: .76rem; }
.map-picker iframe { width: 100%; height: 350px; display: block; border: 0; }

.media-limits { display: flex; gap: 10px; margin-bottom: 25px; }
.media-limits > div { flex: 1; display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.media-limits .is-current { color: var(--paper); border-color: var(--primary); background: var(--primary); }
.media-limits strong { font-size: .8rem; font-weight: 800; }
.media-limits span { margin-top: 3px; color: var(--ink-soft); font-size: .7rem; }
.media-limits .is-current span { color: rgba(255,255,255,.65); }
.upload-zone { padding: 26px; border: 1px dashed #a8b8b4; border-radius: var(--radius); background: var(--canvas); text-align: center; }
.upload-zone > label { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.upload-zone > label .icon { width: 30px; height: 30px; color: var(--primary); transform: rotate(-90deg); }
.upload-zone > label strong { font-weight: 700; }
.upload-zone > label span { color: var(--ink-soft); font-size: .74rem; }
.upload-zone > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wizard-image-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.wizard-image-preview img { width: calc(20% - 8px); aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
.upload-zone > p { margin-top: 12px; color: #a4493d; font-size: .78rem; font-weight: 700; }
.locked-feature { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 22px; border: 1px solid rgba(198,111,46,.2); border-radius: var(--radius); background: #fff8f1; }
.lock-symbol { flex: 0 0 auto; padding: 7px 10px; color: var(--paper); background: var(--primary); border-radius: 8px; font-size: .65rem; font-weight: 800; }
.locked-feature > div { flex: 1; }
.locked-feature h3 { margin-bottom: 4px; font-size: .95rem; font-weight: 700; }
.locked-feature p { font-size: .76rem; }
.locked-feature > input { display: none; }

.listing-preview { display: flex; flex-wrap: wrap; gap: 17px; }
.preview-gallery { width: 100%; min-height: 190px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; overflow: hidden; color: var(--ink-soft); background: var(--canvas); border-radius: var(--radius); }
.preview-gallery img { width: calc(33.333% - 6px); height: 190px; object-fit: cover; }
.preview-block { width: calc(50% - 9px); padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); }
.preview-block > span { color: var(--accent-dark); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.preview-block h3 { margin: 8px 0; font-size: 1.05rem; font-weight: 700; }
.preview-block p { font-size: .8rem; }
.preview-block dl div { display: flex; justify-content: space-between; gap: 15px; padding-top: 10px; }
.preview-block dt { color: var(--ink-soft); font-size: .76rem; }
.preview-block dd { margin: 0; font-size: .76rem; font-weight: 700; text-align: right; }
.preview-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.preview-tags span { padding: 6px 9px; background: var(--primary-light); border-radius: 20px; font-size: .7rem; }
.preview-video a { color: var(--accent-dark); font-weight: 700; }
.review-notice { width: 100%; display: flex; align-items: center; gap: 10px; padding: 17px; color: var(--success); background: #edf6f2; border-radius: 11px; }
.review-notice p { color: inherit; font-size: .8rem; }

.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 35px; padding-top: 25px; border-top: 1px solid var(--line); }
.wizard-actions > span { color: var(--ink-soft); font-size: .76rem; }
.wizard-message { margin-top: 15px; color: var(--success); font-weight: 700; }
.active-plan-card { width: 290px; flex: 0 0 auto; position: sticky; top: 105px; padding: 28px; color: var(--paper); background: linear-gradient(145deg, #123c38, #1d554e); border-radius: var(--radius-large); box-shadow: 0 18px 48px rgba(18,60,56,.18); }
.active-plan-badge { display: inline-flex; margin-bottom: 20px; padding: 7px 11px; color: var(--primary); background: var(--accent); border-radius: 20px; font-size: .72rem; font-weight: 800; }
.active-plan-card h2 { margin-bottom: 15px; font-size: 1.35rem; font-weight: 700; }
.active-plan-card > p { color: rgba(255,255,255,.62); font-size: .8rem; }
.active-plan-card ul { display: flex; flex-direction: column; gap: 11px; margin: 24px 0; }
.active-plan-card li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.7); font-size: .78rem; }
.active-plan-card li:nth-last-child(-n+2) .icon { color: #ff8a7e; }
.active-plan-card .button { margin-bottom: 13px; }
.plan-link { display: block; color: rgba(255,255,255,.66); font-size: .75rem; text-align: center; }

@media (max-width: 1000px) {
    .builder-layout { flex-direction: column-reverse; }
    .active-plan-card { width: 100%; position: static; }
    .active-plan-card ul { flex-direction: row; flex-wrap: wrap; }
    .active-plan-card li { width: calc(50% - 6px); }
}
@media (max-width: 700px) {
    .wizard-progress { padding: 15px; }
    .wizard-progress button { min-width: 105px; }
    .wizard-progress button strong { font-size: .65rem; }
    .wizard-form { padding: 27px 20px; }
    .option-item { width: 100%; }
    .map-picker-head, .locked-feature { align-items: flex-start; flex-direction: column; }
    .media-limits { flex-direction: column; }
    .wizard-image-preview img { width: calc(33.333% - 7px); }
    .preview-block { width: 100%; }
    .wizard-actions { flex-wrap: wrap; }
    .wizard-actions > span { width: 100%; order: -1; text-align: center; }
    .wizard-actions .button { flex: 1; }
}