/* Mancsos Cuccok – online tervező */
.mvd { --t:#0E5B58; --td:#093f3d; --g:#8AA437; --c:#B9732C; --cd:#A2601F; --ink:#17302f; --mu:#587270;
  --fh:"Montserrat","Segoe UI",system-ui,sans-serif; position:relative; font-family:"Open Sans","Segoe UI",system-ui,sans-serif; color:var(--ink); }
.mvd *, .mvd *::before, .mvd *::after { box-sizing:border-box; }
.mvd button { font:inherit; }

.mvd-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 16px; }
.mvd-tab { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px 10px; border:2px solid transparent; border-radius:18px; background:#fff;
  font-family:var(--fh) !important; font-weight:700 !important; font-size:.92rem !important; color:var(--ink); cursor:pointer; box-shadow:0 6px 18px rgba(14,91,88,.08); transition:transform .2s, border-color .2s, box-shadow .2s; }
.mvd-tab span { font-size:1.6rem; line-height:1.1; }
.mvd-tab small { font-weight:600; font-size:.72rem; color:var(--mu); }
.mvd-tab:hover { transform:translateY(-2px); }
.mvd-tab.is-on { border-color:var(--t); box-shadow:0 10px 24px rgba(14,91,88,.18); color:var(--t); }

.mvd-panel { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:26px; background:#fff; border-radius:28px; padding:24px; box-shadow:0 10px 30px rgba(14,91,88,.12); }
.mvd-stagecol { display:flex; flex-direction:column; align-items:center; gap:10px; }
.mvd-stage { width:100%; max-width:520px; aspect-ratio:1/1; border-radius:22px; touch-action:none; user-select:none;
  background:radial-gradient(circle at 50% 42%, #fffdf8 0%, #f6efe1 55%, #e9dfc9 100%); box-shadow:inset 0 0 0 1px rgba(120,90,40,.08); }
.mvd-stage svg { display:block; width:100%; height:100%; }
.mvd.has-photo .mvd-stage { cursor:grab; } .mvd.has-photo .mvd-stage:active { cursor:grabbing; }
.mvd-hint { margin:0; font-size:.78rem; color:var(--mu); text-align:center; }

.mvd-side { display:flex; flex-direction:column; gap:4px; }
.mvd-step { padding:12px 0 14px; border-bottom:1px solid #efeae0; }
.mvd-step h3 { display:flex; align-items:center; gap:.55em; margin:0 0 .65em !important; font-family:var(--fh) !important; font-size:.92rem !important; color:var(--td) !important; letter-spacing:0; }
.mvd-step h3 b { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--t); color:#fff; font-size:.72rem; }
.mvd-step h3 em { font-style:normal; font-weight:600; font-size:.74rem; color:var(--mu); }

.mvd-upload { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px; border:2px dashed #cfdcc2; border-radius:16px; background:#fbfaf5; cursor:pointer; text-align:center; transition:border-color .2s, background .2s; }
.mvd-upload:hover { border-color:var(--g); background:#f6f8ec; }
.mvd-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.mvd-upbtn { display:inline-flex; padding:.7em 1.4em; border-radius:999px; background:linear-gradient(135deg,var(--t),#15908a); color:#fff; font-family:var(--fh); font-weight:700; font-size:.88rem; box-shadow:0 8px 20px rgba(14,91,88,.28); }
.mvd-upload small { font-size:.74rem; color:var(--mu); }

.mvd-sw { display:flex; flex-wrap:wrap; gap:8px 10px; }
.mvd-sw button { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:52px; padding:0; border:0; background:none; cursor:pointer; font-size:.68rem; font-weight:600; color:var(--mu); line-height:1.2; }
.mvd-sw i { display:block; width:34px; height:34px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); transition:box-shadow .15s, transform .15s; }
.mvd-sw button:hover i { transform:scale(1.08); }
.mvd-sw button.is-on { color:var(--td); }
.mvd-sw button.is-on i { box-shadow:inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 3px #fff, 0 0 0 5px var(--t); }

.mvd-text { width:100%; padding:.7em 1em; border:1.5px solid #dfe6d6; border-radius:12px; font-size:.95rem; background:#fbfaf5; color:var(--ink); }
.mvd-text:focus { outline:none; border-color:var(--t); background:#fff; }

.mvd-range { margin-bottom:10px; }
.mvd-range label { display:flex; justify-content:space-between; font-family:var(--fh); font-weight:700; font-size:.8rem; margin-bottom:.2em; }
.mvd-range label span { color:var(--mu); font-weight:600; }
.mvd-range input { width:100%; accent-color:var(--t); }
.mvd-reset { padding:.45em 1em; border:0; border-radius:999px; background:#eef3e0; color:var(--td); font-family:var(--fh) !important; font-weight:700; font-size:.78rem !important; cursor:pointer; }

.mvd-buy { padding-top:14px; }
.mvd-price strong { display:block; font-family:var(--fh); font-weight:800; font-size:1.45rem; color:var(--td); line-height:1.1; }
.mvd-price span { font-size:.78rem; color:var(--mu); }
.mvd-btns { display:flex; gap:10px; margin-top:12px; }
.mvd-btns button { flex:1; padding:.85em 1em; border:0; border-radius:999px; font-family:var(--fh) !important; font-weight:700; font-size:.88rem; cursor:pointer; transition:transform .2s, opacity .2s; }
.mvd-btns button:hover:not([disabled]) { transform:translateY(-2px); }
.mvd-btns button[disabled] { opacity:.45; cursor:not-allowed; }
.mvd-dl { background:#eef3e0; color:var(--td); }
.mvd-order { background:linear-gradient(135deg,var(--c),#cd8a45); color:#fff; box-shadow:0 8px 18px rgba(185,115,44,.3); }
.mvd-soonnote { margin:.7em 0 0; font-size:.74rem; color:var(--mu); }

.mvd-toast { position:fixed; left:50%; bottom:90px; z-index:9999; max-width:min(92vw,520px); transform:translate(-50%,16px); opacity:0; pointer-events:none;
  padding:.9em 1.5em; border-radius:999px; background:var(--td); color:#fff; font-family:var(--fh); font-weight:700; font-size:.86rem; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.25); transition:.3s; }
.mvd-toast.is-on { opacity:1; transform:translate(-50%,0); }

@media (max-width:860px) {
  .mvd-panel { grid-template-columns:1fr; padding:16px; gap:10px; }
  .mvd-tabs { gap:6px; }
  .mvd-tab { padding:9px 4px 8px; font-size:.8rem; border-radius:14px; }
  .mvd-tab span { font-size:1.3rem; }
  .mvd-stagecol { position:sticky; top:8px; z-index:2; background:#fff; padding-bottom:6px; }
  .mvd-stage { max-width:300px; }
}