/* vendor-join.html — Vendor account setup: the join card (photo left, steps right) from join.css, plus the vendor
   states: 1 Account, 2 Business details, 3 Portfolio & services, and the Add service / Add package / Add video link
   sheets. Prefix .vj- ; reuses .jn- (join.css) for the card, tabs, role cards and step-1 form, .tgl/.ck/.rd (plan.css). */

/* signed-in header on steps 2 and 3 (search, saved, Messages, initials) */
.hd.vj .nav { gap: 22px; margin-left: 10px; }
.hd.vj .nav a { white-space: nowrap; }
.hd.vj .hd-r { gap: 6px; }
.vj-msg { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); padding: 0 6px; }
.vj-msg .ic { width: 22px; height: 22px; }
.hd .hd-me { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); margin-left: 6px; }
.hd .hd-me .av { width: 40px; height: 40px; font-size: 14px; font-weight: 500; }
.hd .hd-me .ic { width: 16px; height: 16px; }

/* step 1 extras */
.jn-h .sub.vj-sub { font-size: 18.5px; }
.jn-form .vj-tail { text-align: center; font-size: 14.5px; color: var(--mut); margin-top: -2px; }
.jn-form .jn-alt { margin-top: -6px; }

/* steps 2 + 3 share a left-aligned panel */
.vj-panel { padding: 22px 24px 20px 46px; }
.vj-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.vj-created { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px 0 14px; border-radius: 8px; background: #EEF5EF; color: #2E5B3A; font-size: 16px; }
.vj-created i { width: 20px; height: 20px; border-radius: 50%; background: #4F8A5E; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vj-created i .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.vj-draft { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: #F3EFEC; color: var(--ink); font-size: 15.5px; margin-left: auto; }
.vj-draft .ic { width: 18px; height: 18px; }
.vj-h { margin-top: 22px; }
.vj-h h1 { font-size: 44px; line-height: 1.05; }
.vj-h .sub { font-size: 19.5px; margin-top: 4px; }
.vj-h.s3 { margin-top: 20px; }
.vj-h.s3 h1 { font-size: 42px; }
.vj-verify { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 16px 18px; border: 1px solid var(--blush-2); background: var(--blush); border-radius: 8px; margin-top: 22px; }
.vj-verify > .ic { width: 24px; height: 24px; color: var(--rose); flex: none; margin-top: 3px; }
.vj-verify .t { flex: 1; min-width: 0; }
.vj-verify .t b { display: block; font-weight: 400; font-size: 15.5px; color: var(--ink); line-height: 1.3; white-space: nowrap; }
.vj-verify .t p { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.35; max-width: 250px; }
.vj-verify .acts { display: flex; gap: 8px; align-items: center; align-self: center; flex: none; }
.vj-verify .btn { height: 36px; padding: 0 11px; font-size: 12.5px; font-weight: 400; }
.vj-verify.s3 { padding: 16px 16px 18px 18px; }
.vj-verify.s3 .t b { font-size: 16.5px; }

/* 1 — 2 — 3 stepper */
.vj-steps { display: flex; align-items: center; margin-top: 22px; }
.vj-steps .st { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); flex: none; white-space: nowrap; }
.vj-steps .st b { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 400; font-size: 15.5px; }
.vj-steps .st.on { color: var(--rose); }
.vj-steps .st.on b { background: var(--rose); border-color: var(--rose); color: #fff; }
.vj-steps .st.done { color: var(--ink); }
.vj-steps .st.done b { background: #A96B6E; border-color: #A96B6E; color: #fff; }
.vj-steps .st.done b .ic { width: 16px; height: 16px; stroke-width: 2; }
.vj-steps .ln { flex: 1; height: 1px; background: var(--line); margin: 0 12px; min-width: 20px; }

/* step 2 form */
.vj-form { display: grid; gap: 16px; margin-top: 22px; }
.vj-form .field { gap: 7px; }
.vj-form .field label { font-size: 15.5px; font-weight: 400; }
.vj-form .field label small { font-size: 15px; }
.vj-form .field label i { margin-left: 3px; }
.vj-form .in, .vj-form .sel { height: 38px; font-size: 15px; }
.vj-form .ta { min-height: 76px; padding: 10px 14px; font-size: 15px; }
.vj-form .help { font-size: 14px; color: var(--mut); margin-top: -8px; }
.vj-form .bad .in, .vj-form .bad .sel { border-color: var(--rose); }
.vj-row { display: grid; grid-template-columns: 1fr 245px; gap: 20px; align-items: start; }
.vj-row .field + .field { margin: 0; }
.vj-loc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vj-travel { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; }
.vj-travel .ck { font-size: 15.5px; gap: 10px; }
.vj-travel .ck i { width: 20px; height: 20px; }
.vj-travel small { font-size: 14px; color: var(--ink-2); line-height: 1.35; padding-left: 30px; }
.vj-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; align-items: center; padding: 3px 36px 3px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: text; }
.vj-tags:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-t); }
.vj-tags .tag { height: 28px; font-size: 13.5px; background: var(--blush-2); color: var(--ink); }
.vj-tags .tag .ic { width: 12px; height: 12px; cursor: pointer; }
.vj-tags input { border: 0; outline: 0; flex: 1; min-width: 120px; height: 30px; padding: 0 8px; font-size: 15px; background: none; }
.vj-tags input::placeholder { color: var(--mut-2); }
.vj-ta { position: relative; }
.vj-ta .cnt { position: absolute; right: 14px; bottom: 10px; font-size: 13.5px; color: var(--mut); pointer-events: none; }
.vj-ta .ta { padding-bottom: 28px; }
.vj-acts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 4px; }
.vj-acts .btn { height: 44px; font-size: 18px; font-weight: 400; }
.vj-tail { text-align: center; font-size: 14.5px; color: var(--mut); margin-top: -2px; }

/* step 3 */
.vj-panel.s3 { padding-left: 34px; padding-right: 20px; }
.vj-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 20px; }
.vj-sec h3 { font-size: 25px; line-height: 1.1; }
.vj-sec .note { font-size: 14.5px; color: var(--ink-2); }
.vj-sec .lnk { font-size: 16px; font-weight: 400; gap: 6px; }
.vj-sec .lnk .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.vj-sec p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.vj-sec .btn.o { height: 36px; padding: 0 22px; font-size: 15.5px; font-weight: 400; gap: 8px; }
.vj-sec .btn.o .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.vj-media { display: grid; grid-template-columns: 164px 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.vj-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; height: 146px; border: 1.5px dashed var(--line); border-radius: 8px; background: #fff; cursor: pointer; padding: 10px 12px; }
.vj-upload:hover { border-color: var(--rose); }
.vj-upload .ic { width: 30px; height: 30px; color: var(--rose); margin-bottom: 4px; }
.vj-upload b { font-weight: 400; font-size: 15.5px; color: var(--rose); }
.vj-upload small { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.vj-upload.over { background: var(--blush); border-color: var(--rose); }
.vj-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; min-height: 132px; }
.vj-tile { position: relative; width: auto; height: 132px; border-radius: 8px; overflow: hidden; background: var(--line-2); cursor: grab; flex: none; }
.vj-tile img { width: 100%; height: 100%; object-fit: cover; }
.vj-tile .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.vj-tile .x .ic { width: 13px; height: 13px; stroke-width: 2; }
.vj-tile .lab { position: absolute; left: 6px; bottom: 6px; height: 26px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,.88); font-size: 12.5px; color: var(--ink); display: inline-flex; align-items: center; }
.vj-tile.cover .lab { background: var(--rose); color: #fff; }
.vj-tile .play { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.vj-tile .play .ic { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.vj-tile.video .bg { position: absolute; inset: 0; background: #2A2528; }
.vj-tile.drag { opacity: .4; }
.vj-tile.over { outline: 2px solid var(--rose); outline-offset: -2px; }
.vj-media .hint { grid-column: 2; font-size: 14px; color: var(--ink-2); margin-top: -2px; }
.vj-empty { grid-column: 2; font-size: 14px; color: var(--mut); align-self: center; }
.vj-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vj-check { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.vj-check i { width: 19px; height: 19px; border-radius: 4px; border: 1.5px solid var(--mut-2); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; background: #fff; }
.vj-check.on i { background: var(--rose); border-color: var(--rose); }
.vj-check i .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.vj-check span { overflow: hidden; text-overflow: ellipsis; }
.vj-addsvc { margin-top: 8px; }
.vj-addsvc .btn.o { height: 32px; padding: 0 22px; font-size: 14px; font-weight: 400; gap: 8px; }
.vj-addsvc .btn.o .ic { width: 13px; height: 13px; stroke-width: 1.8; }
.vj-radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.vj-radio { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 15px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; }
.vj-radio i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--mut-2); display: inline-flex; align-items: center; justify-content: center; flex: none; background: #fff; }
.vj-radio.on { background: var(--blush); border-color: var(--rose); color: var(--rose); }
.vj-radio.on i { border-color: var(--rose); background: var(--rose); }
.vj-radio.on i::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.vj-amount { display: grid; grid-template-columns: 1fr 240px; gap: 12px; margin-top: 10px; }
.vj-amount.range { grid-template-columns: 1fr 1fr 240px; }
.vj-money { position: relative; }
.vj-money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 15px; }
.vj-money .in { padding-left: 30px; }
.vj-amount .in, .vj-amount .sel { height: 36px; font-size: 15px; }
.vj-help { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.vj-pkgs { display: grid; gap: 8px; margin-top: 12px; }
.vj-pkg { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.vj-pkg .ic { width: 20px; height: 20px; color: var(--rose); flex: none; }
.vj-pkg b { font-weight: 500; font-size: 15px; display: block; }
.vj-pkg small { font-size: 13px; color: var(--ink-2); display: block; }
.vj-pkg .x { margin-left: auto; width: 30px; height: 30px; }
.vj-pkg .x .ic { width: 16px; height: 16px; color: var(--ink-2); }
.vj-acts3 { display: grid; grid-template-columns: 120px 1fr 185px; gap: 10px; margin-top: 18px; }
.vj-acts3 .btn { height: 38px; font-size: 17px; font-weight: 400; }
.vj-tail3 { text-align: center; font-size: 14px; color: var(--mut); margin-top: 10px; }

/* step 3: Review your listing (drawn) */
.jn.tall { height: auto; min-height: 930px; }
.jn.tall .jn-panel { overflow: visible; }
.vj-steps.four .st { font-size: 14px; gap: 9px; }
.vj-steps.four .st b { width: 32px; height: 32px; font-size: 14.5px; }
.vj-steps.four .ln { margin: 0 8px; min-width: 14px; }
.vj-panel.rv .vj-h.s3 h1 { font-size: 44px; }
.vj-rsec { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 14px; margin-top: 8px; }
.vj-rsec .h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vj-rsec h3 { font-size: 21px; }
.vj-rsec .edit { color: var(--rose); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.vj-rbiz { display: grid; grid-template-columns: 116px 1fr 1fr; gap: 16px; align-items: start; }
.vj-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 116px; height: 116px; background: #F6F1EE; border-radius: 4px; color: var(--ink); line-height: 1; }
.vj-logo b { font-family: var(--serif); font-weight: 400; font-size: 40px; letter-spacing: -.06em; }
.vj-logo span { font-size: 6.5px; letter-spacing: .24em; text-transform: uppercase; margin-top: 6px; font-weight: 500; }
.vj-logo small { font-size: 4.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
.vj-logo.img img { width: 100%; height: 100%; object-fit: contain; }
.vj-rbiz .t h4 { font-family: var(--serif); font-size: 19px; margin-bottom: 6px; }
.vj-rbiz .t p { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); margin-top: 5px; }
.vj-rbiz .t p .ic { width: 15px; height: 15px; }
.vj-rbiz .soc { display: flex; gap: 12px; margin-top: 10px; color: var(--ink); }
.vj-rbiz .soc .ic { width: 20px; height: 20px; }
.vj-rbiz .intro { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; border-left: 1px solid var(--line); padding-left: 14px; }
.vj-rtiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vj-rtiles img { width: 100%; aspect-ratio: 105 / 84; object-fit: cover; border-radius: 4px; }
.vj-rtiles .more { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F6F1EE; border-radius: 4px; font-size: 12.5px; color: var(--ink-2); gap: 2px; }
.vj-rtiles .more b { font-weight: 400; font-size: 15px; color: var(--ink); }
.vj-rtiles .more.add { color: var(--rose); border: 1px dashed var(--line); background: #fff; }
.vj-rsvcs { display: flex; flex-wrap: wrap; gap: 8px; }
.vj-rsvcs span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.vj-rsvcs span i { width: 17px; height: 17px; border-radius: 4px; background: var(--rose); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vj-rsvcs span i .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.vj-rsvcs .none, .vj-rpkgs .none { color: var(--mut); font-size: 14px; border: 0; }
.vj-rprice { display: flex; align-items: center; gap: 0; font-size: 14px; flex-wrap: wrap; }
.vj-rprice span { padding: 0 16px; white-space: nowrap; border-left: 1px solid var(--line); color: var(--ink-2); }
.vj-rprice span:first-child { padding-left: 0; border-left: 0; }
.vj-rprice b { font-weight: 400; color: var(--rose); }
.vj-rpkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vj-rpkgs > div { padding: 2px 16px; border-left: 1px solid var(--line); }
.vj-rpkgs > div:first-child { padding-left: 12px; border-left: 0; }
.vj-rpkgs b { display: block; font-weight: 400; font-size: 15.5px; }
.vj-rpkgs .price { display: block; font-family: var(--serif); font-size: 20px; color: var(--rose); margin: 2px 0; }
.vj-rpkgs small { font-size: 13px; color: var(--ink-2); }
.vj-racts { display: grid; grid-template-columns: 130px 1fr 178px; gap: 10px; margin-top: 12px; }
.vj-racts .btn { height: 38px; font-size: 17px; font-weight: 400; }
.vj-racts .btn.p { background: #A3353A; border-color: #A3353A; }
.vj-tail3 a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }

/* step 4: Thank you (drawn) */
.vj-thanks { text-align: center; margin-top: 8px; }
.vj-thanks .ring { position: relative; width: 92px; height: 92px; border-radius: 50%; background: #F3E6E3; color: var(--rose); display: inline-flex; align-items: center; justify-content: center; margin: 6px 0 14px; }
.vj-thanks .ring .ic { width: 44px; height: 44px; }
.vj-thanks .ring i { position: absolute; width: 8px; height: 3px; border-radius: 2px; background: var(--rose); }
.vj-thanks .ring .c1 { left: -46px; top: 24px; transform: rotate(-30deg); } .vj-thanks .ring .c2 { left: -38px; top: 58px; transform: rotate(40deg); width: 6px; } .vj-thanks .ring .c3 { left: -24px; top: 6px; transform: rotate(70deg); width: 5px; }
.vj-thanks .ring .c4 { right: -44px; top: 20px; transform: rotate(30deg); } .vj-thanks .ring .c5 { right: -36px; top: 62px; transform: rotate(-40deg); width: 6px; } .vj-thanks .ring .c6 { right: -22px; top: 4px; transform: rotate(-70deg); width: 5px; }
.vj-thanks h1 { font-size: 52px; line-height: 1; }
.vj-thanks .sub { font-size: 22px; color: #6E6E96; margin-top: 8px; }
.vj-thanks .body { font-size: 16px; color: var(--ink-2); margin: 10px auto 0; max-width: 440px; line-height: 1.5; }
.vj-steps.four.stacked { margin: 24px 0 18px; align-items: flex-start; }
.vj-steps.four.stacked .st { flex-direction: column; gap: 10px; font-size: 14.5px; }
.vj-steps.four.stacked .st b { width: 36px; height: 36px; }
.vj-steps.four.stacked .ln { margin-top: 18px; }
.vj-nexth { font-size: 22px; margin-top: 22px; }
.vj-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.vj-next > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 16px 0; border-left: 1px solid var(--line); }
.vj-next > div:first-child { border-left: 0; }
.vj-next .ic { width: 32px; height: 32px; color: var(--rose); margin-bottom: 10px; }
.vj-next b { font-family: var(--serif); font-weight: 400; font-size: 18.5px; line-height: 1.15; }
.vj-next small { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; max-width: 170px; }
.vj-dacts { display: grid; gap: 10px; width: min(324px, 100%); margin: 0 auto; }
.vj-dacts .btn { height: 42px; font-size: 17px; font-weight: 400; }
.vj-dacts .btn.p { background: #A3353A; border-color: #A3353A; }
@media (max-width: 820px) {
  .vj-rbiz { grid-template-columns: 1fr; }
  .vj-rbiz .intro { border-left: 0; padding-left: 0; }
  .vj-rtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vj-rprice span { padding: 4px 0; border: 0; flex-basis: 100%; }
  .vj-rpkgs { grid-template-columns: 1fr; }
  .vj-rpkgs > div { padding: 8px 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .vj-racts { grid-template-columns: 1fr; }
  .vj-steps.four.stacked .st span { display: none; } .vj-steps.four.stacked .st.on span { display: inline; }
  .vj-next { grid-template-columns: 1fr; }
  .vj-next > div { border-left: 0; border-top: 1px solid var(--line-2); padding: 14px 0; }
  .vj-thanks h1 { font-size: 38px; } .vj-thanks .sub { font-size: 18px; }
}

/* ---- sheets ---- */
.vj-modal { width: min(604px, 100%); padding: 32px 38px 28px; border-radius: 10px; }
.vj-modal .x { top: 22px; right: 22px; }
.vj-modal h2 { font-size: 44px; margin-top: 0; line-height: 1; }
.vj-modal .sub { font-size: 20px; margin-top: 6px; color: var(--ink-2); }
.vj-modal form { display: grid; gap: 16px; margin-top: 22px; }
.vj-modal .field { gap: 7px; }
.vj-modal .field label { font-size: 16px; font-weight: 400; }
.vj-modal .field label small { font-size: 15px; }
.vj-modal .field label i { margin-left: 3px; }
.vj-modal .in, .vj-modal .sel { height: 40px; font-size: 15px; }
.vj-modal .ta { min-height: 92px; font-size: 15px; padding: 10px 14px; }
.vj-modal .bad .in, .vj-modal .bad .sel { border-color: var(--rose); }
.vj-modal .vj-radios { margin-top: 0; }
.vj-modal .vj-radio { height: 40px; font-size: 15.5px; gap: 14px; }
.vj-modal .vj-help { margin-top: -6px; }
.vj-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rose); border-radius: 6px; overflow: hidden; background: var(--blush); }
.vj-seg button { height: 38px; border: 0; background: none; font-size: 15.5px; color: var(--ink); }
.vj-seg button.on { background: var(--rose); color: #fff; border-radius: 5px; }
.vj-inline { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.vj-inline label { font-size: 16px; }
.vj-tglrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vj-tglrow b { font-weight: 400; font-size: 16px; }
.vj-tglrow .tgl { width: 40px; height: 22px; }
.vj-tglrow .tgl::after { width: 16px; height: 16px; }
.vj-tglrow .tgl.on::after { left: 21px; }
.vj-tglrow small { flex-basis: 100%; font-size: 14px; color: var(--ink-2); margin-top: -8px; }
.vj-modal .ck i, .vj-perm .ck i, .vj-travel .ck i, .vj-incl .ck i { color: #fff; }
.vj-modal .hr { height: 1px; background: var(--line); }
.vj-info { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; color: var(--ink-2); margin: -4px 0; }
.vj-info .ic { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.vj-macts { display: grid; grid-template-columns: 138px 202px 1fr; gap: 12px; }
.vj-macts .btn { height: 44px; font-size: 17px; font-weight: 400; padding: 0 12px; }
.vj-macts .btn.o { color: var(--rose); }
.vj-macts .btn.p.dim { background: #D7A8A8; border-color: #D7A8A8; }
.vj-mtail { text-align: right; font-size: 14px; color: var(--mut); margin-top: -4px; }
.vj-mtail.c { text-align: center; }
.vj-macts.r { display: flex; justify-content: flex-end; }
.vj-macts.r .btn { min-width: 160px; }
.vj-macts.r .btn.p { min-width: 228px; }

/* Add package: two columns */
.vj-modal.pkg { width: min(862px, 100%); padding: 32px 30px 26px; }
.vj-modal.pkg .hr.top { margin-top: 18px; }
.vj-cols { display: grid; grid-template-columns: 1fr 1px 1.2fr; gap: 0 20px; margin-top: 14px; }
.vj-cols .vr { background: var(--line-2); }
.vj-col { display: grid; gap: 16px; align-content: start; }
.vj-col h3 { font-size: 24px; margin-bottom: -4px; }
.vj-col .vj-radio { font-size: 13.5px; gap: 8px; padding: 0 8px; }
.vj-col .vj-radios { gap: 8px; }
.vj-incl { display: grid; gap: 12px; }
.vj-incl .ck { align-items: flex-start; gap: 14px; font-size: 16px; }
.vj-incl .ck i { width: 24px; height: 24px; margin-top: 1px; }
.vj-incl .ck i .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.vj-incl .ck small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.vj-col .btn.o.sm { height: 38px; padding: 0 20px; font-size: 15px; font-weight: 400; gap: 8px; justify-self: start; }
.vj-col .btn.o.sm .ic { width: 13px; height: 13px; stroke-width: 1.8; }
.vj-cover { display: grid; grid-template-columns: 140px 1fr; gap: 20px; }
.vj-cover .field label { font-size: 15.5px; }
.vj-deliv { display: grid; gap: 10px; }
.vj-deliv .row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px 4px 8px; background: #fff; }
.vj-deliv .row .drag { color: var(--ink-2); display: inline-flex; cursor: grab; }
.vj-deliv .row .drag .ic { width: 16px; height: 16px; }
.vj-deliv .row .in { flex: 1; height: 36px; }
.vj-deliv .row .del { width: 32px; height: 32px; border: 0; background: none; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.vj-deliv .row .del:hover { background: var(--cream); color: var(--rose); }
.vj-deliv .row .del .ic { width: 18px; height: 18px; }
.vj-pfoot { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; margin-top: 14px; }
.vj-pfoot .vj-tglrow { flex-wrap: nowrap; align-items: flex-start; }
.vj-pfoot .vj-tglrow .tgl { width: 56px; height: 30px; margin-top: 2px; }
.vj-pfoot .vj-tglrow .tgl::after { width: 24px; height: 24px; }
.vj-pfoot .vj-tglrow .tgl.on::after { left: 29px; }
.vj-pfoot .vj-tglrow div b { display: block; }
.vj-pfoot .vj-tglrow div small { display: block; font-size: 14px; color: var(--ink-2); margin: 0; }
.vj-pfoot .legal { font-size: 13.5px; color: var(--ink-2); max-width: 350px; line-height: 1.35; }
.vj-pfoot .vj-macts { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-end; }
.vj-pfoot .vj-macts .btn { min-width: 122px; height: 40px; font-size: 16px; }
.vj-pfoot .vj-macts .btn.p { min-width: 134px; }

/* Add video link */
.vj-modal.vid { width: min(622px, 100%); padding: 30px 35px 24px; }
.vj-url { display: grid; grid-template-columns: 1fr 153px; gap: 12px; }
.vj-url .btn { height: 40px; font-size: 15.5px; font-weight: 400; gap: 8px; background: #F1EDEA; border-color: var(--line); color: var(--mut); }
.vj-url .btn .ic { width: 18px; height: 18px; fill: currentColor; }
.vj-url .btn.ready { background: #fff; color: var(--rose); border-color: var(--rose); }
.vj-url .btn.ready .ic { fill: var(--rose); }
.vj-preview { position: relative; height: 197px; border-radius: 8px; background: #F1ECE8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--ink-2); font-size: 16px; overflow: hidden; }
.vj-preview .pc { width: 70px; height: 70px; border-radius: 50%; background: #CFC9C5; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vj-preview .pc .ic { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.vj-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vj-preview.has .pc { position: relative; background: rgba(255,255,255,.9); color: var(--ink); }
.vj-preview.has span { display: none; }
.vj-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vj-modal .vj-radios.two { grid-template-columns: 1fr 1fr; gap: 18px; }
.vj-modal .vj-radios.two .vj-radio { font-size: 14.5px; gap: 12px; }
.vj-perm { display: flex; flex-direction: column; gap: 2px; }
.vj-perm .ck { font-size: 16px; gap: 12px; }
.vj-perm .ck i { width: 24px; height: 24px; }
.vj-perm .ck i .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.vj-perm small { font-size: 14px; color: var(--ink-2); padding-left: 36px; }

@media (max-width: 1080px) {
  .vj-panel { padding: 20px 22px; }
  .vj-h h1 { font-size: 36px; } .vj-h .sub { font-size: 18px; }
  .vj-row { grid-template-columns: 1fr; }
  .vj-travel { padding-top: 0; }
  .vj-media { grid-template-columns: 1fr; }
  .vj-media .hint, .vj-empty { grid-column: 1; }
  .vj-checks { grid-template-columns: 1fr 1fr; }
  .vj-cols { grid-template-columns: 1fr; }
  .vj-cols .vr { display: none; }
  .vj-col + .vj-col { margin-top: 20px; }
}
@media (max-width: 820px) {
  .hd.vj .hd-r { gap: 0; }
  .vj-msg span { display: none; }
  .hd.vj #dshSearch { display: none; }
  .hd .hd-me { margin-left: 0; }
  .hd .hd-me .ic { display: none; }
  .vj-panel.s3 { padding-left: 16px; padding-right: 16px; }
  .vj-panel { padding: 18px 16px 22px; }
  .vj-top { flex-wrap: wrap; }
  .vj-created { font-size: 14px; height: 36px; }
  .vj-draft { height: 36px; font-size: 14px; }
  .vj-h h1, .vj-h.s3 h1 { font-size: 32px; } .vj-h .sub { font-size: 17px; }
  .vj-verify { flex-wrap: wrap; }
  .vj-verify .t p { max-width: none; }
  .vj-verify .acts { width: 100%; padding-left: 38px; }
  .vj-steps .st span { display: none; }
  .vj-steps .st.on span { display: inline; }
  .vj-steps .ln { margin: 0 10px; }
  .vj-loc { grid-template-columns: 1fr; }
  .vj-acts, .vj-acts3 { grid-template-columns: 1fr; }
  .vj-sec { flex-wrap: wrap; align-items: flex-start; }
  .vj-sec h3 { font-size: 22px; }
  .vj-check { width: 100%; }
  .vj-radios { grid-template-columns: 1fr; }
  .vj-amount, .vj-amount.range { grid-template-columns: 1fr; }
  .vj-tiles { gap: 8px; }
  .vj-tiles { grid-template-columns: 1fr 1fr; }
  .vj-tile { height: 140px; }
  .vj-upload { width: 100%; }
  .vj-modal, .vj-modal.pkg, .vj-modal.vid { padding: 24px 18px 20px; border-radius: var(--r); }
  .vj-modal h2 { font-size: 34px; }
  .vj-modal .sub { font-size: 17px; }
  .vj-macts, .vj-macts.r { display: grid; grid-template-columns: 1fr; }
  .vj-macts.r .btn, .vj-macts.r .btn.p { min-width: 0; }
  .vj-mtail { text-align: center; }
  .vj-inline { grid-template-columns: 1fr; gap: 6px; }
  .vj-cover { grid-template-columns: 1fr; }
  .vj-url { grid-template-columns: 1fr; }
  .vj-modal .vj-radios.two { grid-template-columns: 1fr; gap: 10px; }
  .vj-pfoot { grid-template-columns: 1fr; }
  .vj-pfoot .vj-macts { grid-column: 1; grid-row: auto; }
  .vj-pfoot .vj-macts .btn, .vj-pfoot .vj-macts .btn.p { min-width: 0; }
}