/* Public vendor marketplace: vendor.html, vendor-detail.html, vendor-daftar.html. Reuses the card, chip, profile and calendar styles of vendor.css.
   Each section owns its tone (hero pale blue, categories cream, curated row pale, directory white to pale), like the landing's .ramp. */
.vp{background:#fff}
.vp .fld{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--text-3);min-width:0}
.vp .fld input,.vp .fld select,.vp .fld textarea{width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;font-size:15px;font-weight:500;color:var(--ink)}
.vp .fld textarea{padding:12px 14px;resize:vertical;min-height:84px}
.vp .fld input:focus,.vp .fld select:focus,.vp .fld textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(26,111,232,.14)}
.vp .fine{font-size:12.5px;color:var(--text-4);line-height:1.5}
.vp .err{color:#B3261E;font-size:13px;font-weight:600}
.vp .lk{min-height:44px}

/* ---------- hero ---------- */
.vh{background:linear-gradient(180deg,#E8F1FE 0%,#F2F7FF 100%);padding:clamp(28px,5vw,64px) 0 clamp(28px,4vw,56px)}
.vh-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:24px clamp(24px,5vw,72px);align-items:center}
.vh-copy .h-hero{font-size:clamp(38px,5vw,68px)}.vh-copy .accent{display:block}
.vh-copy .lead{margin-top:16px;max-width:560px}
.vh-art{position:relative;height:clamp(200px,22vw,290px)}
.vh-art img{position:absolute;object-fit:cover;border:8px solid #fff;border-radius:28px;box-shadow:0 24px 50px rgba(10,50,120,.2)}
.vh-art img:nth-child(1){left:0;top:0;width:64%;aspect-ratio:4/3;rotate:-3deg}
.vh-art img:nth-child(2){right:0;top:16%;width:50%;aspect-ratio:1;rotate:4deg}
.vh-art img:nth-child(3){left:20%;bottom:0;width:44%;aspect-ratio:4/3;rotate:-1deg}
.vs{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end;padding:18px 20px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-float)}
.vs .btn{min-height:48px}

/* ---------- sections on the shared ramp (soft seams) ---------- */
.vramp>section{--seam:120px}
.vcat{--ta:#F4EEE1;--tb:#F4EEE1;--prev:#F2F7FF;padding-block:clamp(32px,5vw,64px)}
.vfeat{--ta:#EEF3FB;--tb:#EEF3FB;--prev:#F4EEE1;padding-block:clamp(32px,5vw,64px)}
.vdir{--ta:#fff;--tb:#F2F7FF;--prev:#EEF3FB;padding-block:clamp(40px,6vw,80px) clamp(56px,8vw,110px)}
.vform{--ta:#F4EEE1;--tb:#F4EEE1;--prev:#F2F7FF;padding-block:clamp(36px,6vw,80px) clamp(64px,9vw,120px)}
.vp .sec-head{margin-bottom:clamp(20px,3vw,32px)}

/* category tiles */
.vcat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.vcat-t{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:#E9EDF3;box-shadow:var(--shadow-soft);transition:transform var(--t-med) var(--spring)}
.vcat-t:hover{transform:translateY(-4px)}
.vcat-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.vcat-t:hover img{transform:scale(1.05)}
.vcat-b{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:44px 16px 16px;color:#fff;background:linear-gradient(180deg,rgba(14,26,43,0),rgba(14,26,43,.78))}
.vcat-b b{font-size:20px;letter-spacing:-.02em}.vcat-b small{font-size:13px;line-height:1.35;color:#EAF2FE}

/* card rows */
.vfeat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.vsim-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.vfeat-row>li{min-width:0}
.vc-meta{font-size:12px;color:var(--text-4);line-height:1.4}.vk{color:var(--blue-deep);font-weight:700;margin-right:4px}
.vp .vc{display:block}
.vp .vc-n::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-md)}
.vp .vc-n:focus-visible{outline:0}.vp .vc-n:focus-visible::after{outline:3px solid var(--blue-hi);outline-offset:4px}
.vp .heart{z-index:2}
.vp .vc-b .av-c,.vp .vc-b .fit-c{margin-top:4px}
.vp .vc-b .fit-c{margin-left:6px}
/* chips carry a symbol next to the text, so status never relies on colour alone */
.av-c.ok::before{content:"✓ "}.av-c.ask::before{content:"? "}.av-c.no::before{content:"× "}
.av-c.nd{background:#fff;border:1.5px dashed var(--line-2);color:var(--text-3)}

/* ---------- directory ---------- */
.vtools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:20px}
.vcats{display:flex;flex-wrap:wrap;gap:8px}.vcats .fchip small{opacity:.65;margin-left:2px}
.vtools-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vq input{min-height:44px;width:min(240px,100%);padding:0 16px;border-radius:99px;border:1.5px solid var(--line-2);background:#fff;font-size:14px}.vq input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(26,111,232,.14)}
.vsaved small{margin-left:6px;opacity:.7}
.vfbtn{display:none}.vfbtn b{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;border-radius:99px;background:var(--blue);color:#fff;font-size:12px}
.vlayout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.vf{position:sticky;top:16px;padding:20px;border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--line)}
.vf form{display:grid;gap:16px}.vreset{margin-top:6px}
.vchips{display:flex;flex-wrap:wrap;gap:8px}.vp .fchip{min-height:44px;padding:0 14px;font-size:14px}
.vchk{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500;line-height:1.35;min-height:44px}.vchk input{flex:none;width:22px;height:22px;margin-top:1px}.vchk small{display:block;color:var(--text-4);font-size:12px}
.vhint{font-weight:400;font-size:12px;color:var(--text-4)}
.vcount{font-size:14px;font-weight:600;color:var(--text-2)}
.vtags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}.vtags:empty{display:none}
.vtag{min-height:36px;padding:0 12px 0 14px;border-radius:99px;background:#EAF2FE;color:var(--blue-deep);font-size:13px;font-weight:600;border:1.5px solid #C9DDFB}.vtag i{font-style:normal;opacity:.7;margin-left:4px}.vtag:hover{border-color:var(--blue)}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px;margin-top:14px}
.vgrid .vc{animation:vfade .5s var(--ease) both}@keyframes vfade{from{opacity:0;transform:translateY(10px)}}
.vempty{grid-column:1/-1;display:grid;gap:10px;justify-items:start;padding:28px;border-radius:var(--r-lg);background:#fff;border:1.5px dashed var(--line-2)}.vempty b{font-size:18px}.vempty p{color:var(--text-3);font-size:14px}
.vnote{margin-top:28px;font-size:12.5px;color:var(--text-4);line-height:1.5;max-width:640px}

/* bottom sheet (same openLayer dialog as the rest of the site) */
.vsheet .modal{width:min(520px,100%)}
.vsheet-in,.qs,.qs .sent-card{padding:26px 24px 0}.qs .sent-card{border:0;padding:0;max-width:none}
.vsheet-in h2,.qs h2{font-size:22px;letter-spacing:-.02em}
.vsheet-in [data-slot] form{display:grid;gap:16px;margin-top:16px}
.vsheet-f{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px -24px 0;padding:12px 24px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.qs form{display:grid;gap:14px}.qs-sub{font-size:14px;color:var(--text-3)}.qs-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.qs-note{font-size:12.5px;color:var(--text-4);line-height:1.5}.qs-note a{color:var(--blue);font-weight:600;text-decoration:underline}
.qs .sent-card h2{margin-top:2px}.qs .kvs{margin:16px 0}

/* ---------- profile ---------- */
.vdet{padding:clamp(20px,3vw,36px) 0 clamp(32px,5vw,64px);background:#fff}
.vcrumb{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-bottom:14px;font-size:13px;color:var(--text-4)}.vcrumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-weight:600}.vcrumb i{font-style:normal;opacity:.5}.vcrumb b{color:var(--ink);font-weight:600}
.vd-h{font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:700}
.vp .pgrid{margin-top:4px}
.vp .pcard .vd-date{margin:10px 0 0}
.vincl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.vincl li{padding:6px 14px;border-radius:99px;background:#EEF1F5;font-size:13px;font-weight:600}.vincl li::before{content:"✓ ";color:var(--ok)}
.vp .pc [data-incl]{margin-top:10px;font-size:14px;line-height:1.55;color:var(--text-3)}
.vsim{background:linear-gradient(180deg,#F4EEE1,#F4EEE1);padding-block:clamp(36px,6vw,80px) clamp(56px,8vw,100px)}
.stk-a{display:flex;align-items:center;gap:8px}.stk .heart{position:static;box-shadow:none;border:1.5px solid var(--line-2)}

/* ---------- join band and "Jadi vendor" ---------- */
.vjoin{padding-block:clamp(40px,6vw,72px);color:#fff;background:linear-gradient(135deg,#0F4FAE 0%,#1A6FE8 100%)}
.vjoin-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}.vjoin p{margin-top:8px;max-width:520px;color:#E3F0FF;font-size:16px}
.vd-hero{padding-bottom:clamp(36px,5vw,64px)}.vd-in{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.vsteps{display:grid;gap:12px}.vsteps li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:16px 18px;border-radius:var(--r-md);background:#fff;border:1.5px solid var(--line)}
.vsteps b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-size:14px}.vsteps h2{font-size:16px}.vsteps p{margin-top:2px;font-size:14px;color:var(--text-3);line-height:1.5}
.vform-in{max-width:640px;margin-inline:auto;padding:clamp(22px,4vw,36px);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-soft)}
.vapply{display:grid;gap:14px;margin-top:18px}.vapply .btn{justify-self:start;min-height:52px}
.vform-in .sent-card{border:0;padding:0;max-width:none}.vform-in .sent-card .acts{margin-top:6px}

/* ---------- tablet and phone ---------- */
@media (max-width:1100px){
  .vfeat-row{grid-template-columns:repeat(3,minmax(0,1fr))}.vfeat-row>li:nth-child(n+4){display:none}.vsim-row>li:nth-child(n+4){display:list-item}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs{grid-template-columns:repeat(2,minmax(0,1fr))}.vs .btn{grid-column:1/-1}
  .vh-in,.vd-in{grid-template-columns:1fr}.vh-art{display:none}
}
@media (max-width:900px){
  .vlayout{grid-template-columns:1fr}.vf{display:none}.vfbtn{display:inline-flex}
  .vcat-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px 10px;scrollbar-width:none}.vcat-row::-webkit-scrollbar{display:none}
  .vcat-row>li{flex:0 0 42%;scroll-snap-align:start}.vcat-t{aspect-ratio:4/5}
  .vfeat-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px 10px;scrollbar-width:none}.vfeat-row::-webkit-scrollbar{display:none}
  .vfeat-row>li,.vfeat-row>li:nth-child(n+4){display:list-item;flex:0 0 68%;scroll-snap-align:start}
  .vsim-row{display:flex}
  .vcats{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px;scrollbar-width:none;flex:1 0 100%}.vcats::-webkit-scrollbar{display:none}.vcats .fchip{flex:none}
  .vtools-r{width:100%}.vq{flex:1 1 160px}.vq input{width:100%}.vsort{order:3}
  .vp .stk{z-index:60}
  .vp .vdet{padding-bottom:88px}
}
@media (max-width:620px){
  .vgrid{grid-template-columns:1fr;gap:22px}
  .vs{padding:14px;gap:10px}
  .vcat-row>li{flex-basis:46%}
  .vsheet-in,.qs{padding-inline:20px}.vsheet-f{margin-inline:-20px;padding-inline:20px}
  .qs-2{grid-template-columns:1fr}
  .vjoin-in .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.vgrid .vc{animation:none}.vcat-t,.vcat-t img{transition:none}}
.vp [data-pbox]{display:grid;gap:4px}.vp [data-pbox] .big{margin:2px 0}
/* phone: results are compact rows (photo left), the page stays short */
@media (max-width:620px){
  .vgrid{gap:16px}
  .vgrid .vc{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 14px;align-items:start}
  .vgrid .vc-img{aspect-ratio:1;border-radius:18px}.vgrid .vc-b{padding:0}
  .vgrid .heart{top:6px;right:auto;left:90px;width:44px;height:44px}
  .vgrid .vc-n{font-size:15px;line-height:1.25}
}
/* phone: hero, search and the first category row fit the first screen */
@media (max-width:620px){
  .vh{padding-top:18px;padding-bottom:22px}.vh-copy .h-hero{font-size:34px}.vh-copy .lead{margin-top:10px;font-size:15px;line-height:1.45}
  .vcat{padding-top:22px;padding-bottom:28px}.vcat .sec-head{margin-bottom:14px}.vcat .sec-head p{display:none}.vcat .h-sec-m{font-size:26px}
  .vcat-t{aspect-ratio:1}.vcat-b{padding-top:30px}.vcat-b b{font-size:17px}.vcat-b small{font-size:12px}
}
.vfbtn b[hidden]{display:none}