/* ===============================
   FOKUS – Lens Wizard (v2.3 • desktop boost + tooltips)
   =============================== */
:root{
  --fw-bg:#ffffff;
  --fw-ink:#0e0e0e;
  --fw-muted:#6e6e6e;
  --fw-line:#e8e8e8;
  --fw-card:#f7f7f7;
  --fw-chip:#f0f0f0;
  --fw-ok:#111111;
  --fw-accent:#caa649;             /* Fokus zlatna  ← dugme “Sledeći korak” */
  --fw-accent-weak:rgba(202,166,73,.15);
  --fw-shadow:rgba(0,0,0,.08);
}

#lens-wizard{
  max-width:1280px;                /* još šire na desktopu */
  margin:36px auto 140px;
  background:var(--fw-bg);
  color:var(--fw-ink);
  font-size:18px;                  /* bilo 16px */
  line-height:1.55;
  padding:0 16px;
}

.fw-card{
  border:1px solid var(--fw-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 22px var(--fw-shadow);
}

.fw-header{
  position:sticky;
  top:0;
  z-index:5;
  background:#fff;
  padding:22px 24px 16px;
  border:1px solid var(--fw-line);
  border-bottom:none;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

/* step traka – može u dva reda na užim desktopima */
.fw-steps{
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:0 6px 12px;
}

.fw-step-item{
  flex:1 1 auto;
  min-width:160px;                 /* malo više mesta za tekst */
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--fw-muted);
  font-weight:600;
  white-space:nowrap;
}
.fw-step-dot{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid var(--fw-line);
  background:#fff;color:var(--fw-muted);
  font-weight:800;font-size:15px;
}
.fw-step-item.is-active .fw-step-dot{
  border-color:var(--fw-accent);
  background:var(--fw-accent);
  color:#fff;
}
.fw-step-label{ overflow:hidden;text-overflow:ellipsis; font-size:16px; }

.fw-progress-wrap{height:10px;background:#f2f2f2;border-radius:999px;overflow:hidden}
.fw-progress-bar{height:100%;width:0;background:var(--fw-accent);transition:width .35s ease}

.fw-body{padding:28px 24px}

/* grid */
.fw-grid{display:grid;gap:22px}
.fw-grid.two{grid-template-columns:1fr 1fr}
@media (max-width:900px){ .fw-grid.two{grid-template-columns:1fr} }

/* field */
.fw-field>label{display:block;font-weight:800;font-size:16px;margin-bottom:10px}

/* SELECTS (veći) */
.fw-select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--fw-line);
  background:#fff url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 16 16' fill='%23666' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center/18px 18px;
  padding:18px 54px 18px 18px;
  border-radius:12px;
  font-size:18px;line-height:1.2;font-weight:700;
}

/* chips */
.fw-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.fw-chip{
  background:var(--fw-chip);
  border:1px solid var(--fw-line);
  padding:12px 16px;border-radius:999px;
  font-weight:800;cursor:pointer;
  transition:all .15s ease;
}
.fw-chip:hover{border-color:var(--fw-accent)}
.fw-chip.is-active{background:var(--fw-accent);color:#fff;border-color:var(--fw-accent)}

/* cards – products/layers */
/* 3 kolone na širokom desktopu, 2 na užem */
.fw-cards{
  display:grid;gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1200px){ .fw-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .fw-cards{grid-template-columns:1fr} }

.fw-card-item{
  border:1px solid var(--fw-line);
  border-radius:14px;background:#fff;
  padding:20px;
  cursor:pointer;transition:box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.fw-card-item:hover{box-shadow:0 10px 30px var(--fw-shadow)}
.fw-card-item.is-active{border-color:var(--fw-accent);box-shadow:0 12px 36px var(--fw-shadow); transform:translateY(-1px)}
.fw-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fw-name{font-weight:900;font-size:18px}
.fw-price{font-weight:900;color:var(--fw-ok)}
.fw-muted{color:var(--fw-muted);font-size:15px;margin-top:6px}

/* color swatches */
.fw-swatches{display:flex;flex-wrap:wrap;gap:14px}
.fw-swatch{
  width:48px;height:48px;border-radius:50%;
  border:3px solid transparent;box-shadow:0 0 0 1px var(--fw-line);
  cursor:pointer;transition:all .15s ease
}
.fw-swatch.is-active{border-color:var(--fw-accent);box-shadow:0 0 0 1px var(--fw-accent)}
.fw-swatch.gray{background:#b9b9b9}
.fw-swatch.brown{background:#8c6b4a}
.fw-swatch.green{background:#4b7a5b}

/* footer nav */
.fw-nav{
  position:sticky;bottom:0;z-index:5;
  display:flex;justify-content:space-between;gap:14px;
  padding:16px; background:#fff;border:1px solid var(--fw-line);
  border-bottom-left-radius:16px;border-bottom-right-radius:16px;
}
.fw-btn{
  border:none;border-radius:999px;padding:16px 22px;
  font-weight:900;font-size:18px;cursor:pointer
}
.fw-btn.prev{background:#ededed;color:#111}
.fw-btn.next{background:var(--fw-accent);color:#fff}
.fw-btn:disabled{opacity:.55;cursor:not-allowed}

/* helper & hint */
.fw-hint{margin-top:10px;font-size:15px;color:var(--fw-muted)}
.fw-mini{font-weight:900;margin:14px 0 8px}

/* ===================== */
/*   CUSTOM TOOLTIPI     */
/* ===================== */
.fw-help{
  display:inline-grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--fw-accent-weak);color:#aa7e22;font-weight:900;font-size:13px;margin-left:8px;
  position:relative; cursor:help;
}
.fw-help::after{
  content: attr(title);                 /* koristi tekst iz title="" */
  position:absolute;
  left:50%; transform:translateX(-50%) translateY(calc(-100% - 14px));
  min-width:260px; max-width:420px;
  background:#fff; color:#111;
  border:1px solid var(--fw-line);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  padding:14px 16px; border-radius:12px;
  font-size:15px; line-height:1.45;
  white-space:normal;
  opacity:0; pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:50;
}
.fw-help::before{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%) translateY(-10px) rotate(45deg);
  width:12px; height:12px;
  background:#fff; border-left:1px solid var(--fw-line); border-top:1px solid var(--fw-line);
  opacity:0; z-index:49;
}
.fw-help:hover::after,
.fw-help:hover::before{
  opacity:1;
  transform:translateX(-50%) translateY(calc(-100% - 10px));
}

/* =============== */
/*   MOBILNI VIEW  */
/* (ne diramo logiku, samo ostavljamo postojeće optimizacije) */
@media (max-width:600px){
  #lens-wizard{margin:16px auto 80px}
  .fw-select{font-size:16px;padding:14px 40px 14px 14px}
  .fw-step-item{min-width:120px}
}

/* === MOBILE FIXES (postojeći) === */
html, body { overflow-x: hidden; }

@media (max-width: 640px) {
  #lens-wizard{
    margin: 16px 12px 80px;
    font-size: 15px;
  }
  .fw-card{ border-radius: 12px; }
  .fw-header{
    position: static;
    padding: 12px 12px 8px;
    border-left-color: transparent;
    border-right-color: transparent;
  }
  .fw-steps{
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 6px;
  }
  .fw-step-dot{ width: 24px; height: 24px; font-size: 12px; }
  .fw-step-label{ font-size: 14px; white-space: nowrap; }
  .fw-progress-wrap{ height: 6px; }
  .fw-body{ padding: 12px; }
  .fw-grid.two{ grid-template-columns: 1fr; }
  .fw-field>label{ font-size: 14px; margin-bottom: 6px; }
  .fw-select{
    font-size: 16px;
    padding: 14px 40px 14px 14px;
    border-radius: 10px;
  }
  .fw-cards{ grid-template-columns: 1fr; }
  .fw-card-item{ padding: 14px; }
  .fw-swatches{ gap: 10px; }
  .fw-swatch{ width: 40px; height: 40px; }
  .fw-chips{ gap: 8px; }
  .fw-nav{
    position: sticky;
    bottom: 0;
    padding: 10px;
    gap: 8px;
    border-left-color: transparent;
    border-right-color: transparent;
  }
  .fw-btn{ width: 100%; padding: 14px 16px; font-size: 16px; }

  /* zaštita od horizontalnog skrola */
  html, body { overflow-x: hidden; }
}
/* Fokus Lens Wizard - stronger Blocksy select fix */
#lens-wizard select.fw-select {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  line-height: 1.4 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 16px !important;
  padding-right: 44px !important;

  color: #111 !important;
  background-color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #111 !important;

  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
}

#lens-wizard select.fw-select option {
  color: #111 !important;
  background: #fff !important;
  font-size: 16px !important;
}