<!-- ============================================================
     RADCE VYBERU LEZECEK - Smichoff
     CMS snippet - vlozit pres HTML editor Shoptetu
     ============================================================ -->
.smf-advisor *, .smf-advisor *::before, .smf-advisor *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.smf-advisor {
  --sg: #2a5c3f; --sgd: #1e4530; --sgl: #edf4ef; --sgm: #c8dece;
  --so: #f05a00; --sol: #fff3ec; --som: #ffd9c2;
  --st: #1a1a1a; --sm: #555; --smu: #888;
  --sb: #e0e0e0; --sw: #ffffff;
  --sr: 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--st);
  width: 100%;
  margin: 0 0 28px 0;
}

/* Header — slim single row */
.smf-header {
  background: var(--sg); color: #fff;
  border-radius: 0;
  padding: 12px 18px;
  margin-bottom: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.smf-header::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.smf-header-text { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.smf-eyebrow {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.smf-header h2 {
  font-size: 15px; font-weight: 800; line-height: 1; color: #fff; font-family: inherit;
}
.smf-header h2 em { font-style: normal; color: var(--so); }
.smf-header-meta { display: none; } /* skryto v kompaktnim rezimu */

/* Progress — integrovan pod header bez vlastní karty */
.smf-progress {
  background: var(--sgl); border: 1px solid var(--sb); border-top: none;
  padding: 8px 16px 6px;
  margin-bottom: 8px;
}
.smf-pb-row {
  display: flex; align-items: center; margin-bottom: 5px;
}
.smf-pl-row {
  display: flex;
}
.smf-pl-row .smf-plabel {
  flex: 1; text-align: center;
}
.smf-ps {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.smf-ps:not(:last-child)::after {
  content: ''; position: absolute;
  top: 50%; left: calc(50% + 10px); right: calc(-50% + 10px);
  height: 2px; background: var(--sb);
  transform: translateY(-50%);
  transition: background .4s;
}
.smf-ps.smf-done:not(:last-child)::after { background: var(--sg); }
.smf-bubble {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sb); background: var(--sw);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--smu);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  position: relative; z-index: 1; flex-shrink: 0;
}
.smf-ps.smf-active .smf-bubble { border-color: var(--sg); color: var(--sg); transform: scale(1.15); box-shadow: 0 0 0 3px rgba(42,92,63,.12); }
.smf-ps.smf-done .smf-bubble   { background: var(--sg); border-color: var(--sg); color: #fff; }
.smf-plabel { font-size: 8px; text-transform: uppercase; letter-spacing: .5px; color: var(--smu); font-weight: 600; text-align: center; line-height: 1.2; }
.smf-ps.smf-active .smf-plabel, .smf-ps.smf-done .smf-plabel { color: var(--sg); }
.smf-plabel.smf-active, .smf-plabel.smf-done { color: var(--sg); }

/* Card */
.smf-card {
  background: var(--sw); border: 1px solid var(--sb);
  border-radius: 0; padding: 14px 18px;
  animation: smfRise .3s ease both;
}
@keyframes smfRise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.smf-step-num {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--sg);
  background: var(--sgl); padding: 2px 8px;
  border-radius: 100px; margin-bottom: 4px;
}
.smf-card h3 {
  font-size: 15px; font-weight: 800;
  margin-bottom: 2px; color: var(--st); font-family: inherit;
}
.smf-desc { font-size: 11px; color: var(--sm); margin-bottom: 10px; line-height: 1.45; }

/* Options */
.smf-opts { display: grid; gap: 6px; }
.smf-col1 { grid-template-columns: 1fr; }
.smf-col2 { grid-template-columns: 1fr 1fr; }
.smf-col3 { grid-template-columns: repeat(3, 1fr); }

/* Kroky s 3 moznostmi v col1 → 2 sloupce */
.smf-col1-to2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 500px) {
  .smf-col2, .smf-col3, .smf-col1-to2 { grid-template-columns: 1fr; }
  .smf-card { padding: 12px 12px; }
}

.smf-opt {
  border: 2px solid var(--sb); border-radius: 0;
  padding: 8px 10px; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  display: flex; align-items: center; gap: 8px;
  background: var(--sw); user-select: none;
}
.smf-opt:hover   { border-color: #aac4b4; box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.smf-opt.smf-sel { border-color: var(--sg); background: var(--sgl); box-shadow: 0 0 0 2px rgba(42,92,63,.1); }

.smf-oi { font-size: 18px; line-height: 1; flex-shrink: 0; }
.smf-ob { flex: 1; }
.smf-ob strong { display: block; font-size: 12px; font-weight: 700; margin-bottom: 0; color: var(--st); line-height: 1.3; }
.smf-ob span   { font-size: 10px; color: var(--smu); line-height: 1.35; display: block; }
.smf-check {
  width: 14px; height: 14px; border: 2px solid var(--sb); border-radius: 0;
  flex-shrink: 0; position: relative; transition: all .18s;
}
.smf-opt.smf-sel .smf-check { background: var(--sg); border-color: var(--sg); }
.smf-opt.smf-sel .smf-check::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 6px; height: 6px; background: #fff; border-radius: 50%;
}

/* col3 (sirka) centered */
.smf-col3 .smf-opt { flex-direction: column; align-items: center; text-align: center; padding: 10px 6px; }
.smf-col3 .smf-oi  { font-size: 20px; margin-bottom: 4px; }
.smf-col3 .smf-check { margin-top: 5px; }

/* col1-to2 - hide description text to save space */
.smf-col1-to2 .smf-ob span { display: none; }

/* Foot illustration — kompaktni */
.smf-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.smf-foot-opt {
  border: 2px solid var(--sb); border-radius: 0;
  padding: 10px 10px; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  user-select: none; position: relative;
  background: var(--sw); display: flex; align-items: center; gap: 10px;
}
.smf-foot-opt:hover   { border-color: #aac4b4; box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.smf-foot-opt.smf-sel { border-color: var(--sg); background: var(--sgl); box-shadow: 0 0 0 2px rgba(42,92,63,.1); }

.smf-foot-opt svg { width: 38px; height: 52px; flex-shrink: 0; display: block; }
.smf-foot-text { flex: 1; text-align: left; }
.smf-foot-text strong { display: block; font-size: 12px; font-weight: 700; margin-bottom: 2px; color: var(--st); }
.smf-foot-text span   { font-size: 10px; color: var(--smu); line-height: 1.35; }
.smf-fcheck {
  position: absolute; top: 8px; right: 8px;
  width: 14px; height: 14px; border: 2px solid var(--sb); border-radius: 50%; transition: all .18s;
}
.smf-foot-opt.smf-sel .smf-fcheck { background: var(--sg); border-color: var(--sg); }
.smf-foot-opt.smf-sel .smf-fcheck::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 6px; height: 6px; background: #fff; border-radius: 50%;
}

@media (max-width: 500px) {
  .smf-foot-opt { flex-direction: column; align-items: center; }
  .smf-foot-text { text-align: center; }
  .smf-foot-opt svg { width: 34px; height: 46px; }
}

/* Tip — jednořádkový */
.smf-tip {
  background: var(--sol); border: 1px solid var(--som);
  border-radius: 0; padding: 7px 11px; margin-top: 8px;
  font-size: 10px; color: #a83800; line-height: 1.45;
  display: flex; gap: 7px; align-items: flex-start;
}
.smf-tip-i { flex-shrink: 0; font-size: 12px; margin-top: 1px; }

/* Actions */
.smf-actions { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.smf-btn {
  padding: 7px 16px; border-radius: 0;
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; border: none; transition: all .18s;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
}
.smf-btn-primary { background: var(--sg); color: #fff; }
.smf-btn-primary:hover:not([disabled]) { background: var(--sgd); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(42,92,63,.3); }
.smf-btn-primary[disabled] { opacity: .35; cursor: not-allowed; }
.smf-btn-back { background: transparent; border: 2px solid var(--sb); color: var(--sm); font-family: inherit; }
.smf-btn-back:hover { border-color: #aaa; color: var(--st); }
.smf-btn-skip {
  margin-left: auto; background: none; border: none; font-family: inherit;
  font-size: 10px; color: var(--smu); cursor: pointer; padding: 4px 0;
  transition: color .18s; text-decoration: underline; text-underline-offset: 2px;
}
.smf-btn-skip:hover { color: var(--sm); }

/* Summary bar */
.smf-summary {
  background: var(--sw); border: 1px solid var(--sgm);
  border-radius: 0; overflow: hidden;
  animation: smfRise .3s ease both; margin-bottom: 4px;
}
.smf-summary-top {
  background: var(--sg); padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.smf-summary-top-left { display: flex; align-items: center; gap: 8px; }
.smf-summary-eyebrow {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.smf-summary-title { font-size: 13px; font-weight: 800; color: #fff; }
.smf-btn-change {
  background: #fff; border: none; color: var(--sg);
  padding: 5px 13px; border-radius: 0;
  font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .18s; white-space: nowrap; flex-shrink: 0;
}
.smf-btn-change:hover { background: var(--sgl); }
.smf-summary-bottom {
  padding: 9px 16px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.smf-summary-bottom-label {
  font-size: 10px; color: var(--smu); font-weight: 600;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .8px;
}
.smf-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.smf-pill {
  background: var(--sgl); border: 1px solid var(--sgm);
  color: var(--sg); padding: 2px 9px; border-radius: 100px; font-size: 10px; font-weight: 600;
}
.smf-pill-none { font-size: 11px; color: var(--smu); font-style: italic; }
@media (max-width: 500px) {
  .smf-summary-top { flex-direction: column; align-items: flex-start; }
  .smf-btn-change { width: 100%; text-align: center; }
}

.smf-hidden { display: none !important; }