/*
 * GEO Category Widget — Estilos del módulo geocategorywidget
 * BEM namespace: geo-sdd__* (configurable via cssPrefix en el JSON)
 * Scoped a .geo-sdd para evitar conflictos con el tema de PrestaShop.
 */

.geo-sdd {
  --t:   #33cccc;
  --td:  #0F6E6E;
  --tl:  #e1f5f5;
  --tm:  #1ab8b8;
  --bg:  #ffffff;
  --bgs: #f5f5f5;
  --tx:  #333333;
  --txs: #777777;
  --bd:  #dddddd;
  --rmd: 8px;
  --rlg: 12px;
  --grn: #22c55e;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.geo-sdd * { box-sizing: border-box; }

/* ── Calculadora ── */
.geo-sdd__calc {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: var(--rlg);
  border: 1px solid var(--bd);
  padding: 2rem 1.75rem 2.5rem;
}
.geo-sdd__prog-outer { height: 4px; background: #e5e5e5; border-radius: 2px; margin-bottom: 1.5rem; }
.geo-sdd__prog-inner { height: 4px; background: var(--t); border-radius: 2px; transition: width .4s ease; }
.geo-sdd__counter     { font-size: 13px; color: var(--txs); margin-bottom: .4rem; }
.geo-sdd__question    { font-size: 20px; font-weight: 500; color: var(--tx); margin-bottom: .3rem; line-height: 1.4; }
.geo-sdd__question-sub { font-size: 14px; color: var(--txs); margin-bottom: 1.5rem; }

/* ── Grids ── */
.geo-sdd__g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.geo-sdd__g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.geo-sdd__g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 520px) {
  .geo-sdd__g2, .geo-sdd__g3, .geo-sdd__g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── Botones de opción ── */
.geo-sdd__opt {
  background: var(--bg); border: 1px solid var(--bd); border-radius: var(--rmd);
  padding: 14px 12px 12px; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  position: relative; width: 100%; font-family: inherit;
}
.geo-sdd__opt:hover   { border-color: var(--t); background: var(--tl); }
.geo-sdd__opt--sel    { border: 2px solid var(--t) !important; background: var(--tl); }
.geo-sdd__check {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
  border-radius: 50%; border: 1.5px solid var(--bd); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.geo-sdd__opt--sel .geo-sdd__check { background: var(--grn); border-color: var(--grn); }
.geo-sdd__check svg { display: none; }
.geo-sdd__opt--sel .geo-sdd__check svg { display: block; }
.geo-sdd__opt-icon {
  width: 30px; height: 30px; border-radius: 50%; background: var(--tl);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.geo-sdd__opt-icon svg { width: 16px; height: 16px; }
.geo-sdd__opt-label { font-size: 13px; font-weight: 500; color: var(--tx); line-height: 1.3; padding-right: 22px; }
.geo-sdd__opt-desc  { font-size: 12px; color: var(--txs); line-height: 1.3; }

/* ── Navegación ── */
.geo-sdd__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.geo-sdd__back {
  background: none; border: 1px solid var(--bd); border-radius: var(--rmd);
  padding: 9px 20px; cursor: pointer; font-size: 14px; color: var(--txs); font-family: inherit;
}
.geo-sdd__back:hover { background: var(--bgs); }
.geo-sdd__next {
  background: var(--t); border: none; border-radius: var(--rmd);
  padding: 10px 24px; cursor: pointer; font-size: 14px; font-weight: 500;
  color: #fff; opacity: .35; pointer-events: none;
  transition: opacity .2s; font-family: inherit;
}
.geo-sdd__next--on          { opacity: 1 !important; pointer-events: all !important; }
.geo-sdd__next--on:hover    { background: var(--tm); }

/* ── Resultado ── */
.geo-sdd__res-card  { background: var(--bg); border: 2px solid var(--t); border-radius: var(--rlg); padding: 1.5rem; margin-bottom: 1.5rem; }
.geo-sdd__res-badge { display: inline-block; background: var(--tl); color: var(--td); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--rmd); margin-bottom: .75rem; }
.geo-sdd__res-title { font-size: 20px; font-weight: 500; color: var(--tx); margin-bottom: .5rem; }
.geo-sdd__res-desc  { font-size: 14px; color: var(--txs); line-height: 1.6; margin-bottom: 1rem; }
.geo-sdd__res-why   { font-size: 13px; color: var(--txs); background: var(--bgs); border-radius: var(--rmd); padding: 10px 14px; margin-bottom: 1rem; }
.geo-sdd__res-why strong { color: var(--tx); font-weight: 500; }
.geo-sdd__res-feats { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-sdd__pill      { background: var(--tl); color: var(--td); font-size: 12px; padding: 4px 10px; border-radius: 20px; }

/* ── Productos ── */
.geo-sdd__prod-label { font-size: 15px; font-weight: 500; color: var(--tx); margin-bottom: .75rem; }
.geo-sdd__prod-grid  { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 1.25rem; }
@media (max-width: 560px) { .geo-sdd__prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.geo-sdd__prod-card  {
  background: var(--bg); border: 1px solid var(--bd); border-radius: var(--rmd);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .15s; display: flex; flex-direction: column;
}
.geo-sdd__prod-card:hover { border-color: var(--t); }
.geo-sdd__prod-card img   { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #f9f9f9; }
.geo-sdd__prod-body  { padding: 10px 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.geo-sdd__prod-name  { font-size: 12px; font-weight: 500; color: var(--tx); line-height: 1.35; }
.geo-sdd__prod-price { font-size: 14px; font-weight: 500; color: var(--td); }
.geo-sdd__prod-cta   { margin-top: auto; padding-top: 4px; font-size: 11px; color: var(--t); font-weight: 500; }

/* ── Reinicio / alternativas ── */
.geo-sdd__restart {
  display: block; background: none; border: 1px solid var(--bd); border-radius: var(--rmd);
  padding: 10px 20px; cursor: pointer; font-size: 14px; color: var(--txs);
  width: 100%; text-align: center; font-family: inherit; margin-bottom: 1.25rem;
}
.geo-sdd__restart:hover { background: var(--bgs); }
.geo-sdd__alt-title { font-size: 13px; font-weight: 500; color: var(--txs); margin-bottom: .5rem; }
.geo-sdd__alt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-sdd__alt-chip  {
  background: var(--bgs); border: 1px solid var(--bd); border-radius: 20px;
  padding: 5px 14px; font-size: 12px; color: var(--txs); cursor: pointer; font-family: inherit;
}
.geo-sdd__alt-chip:hover { border-color: var(--t); color: var(--td); background: var(--tl); }

/* ── Acordeones FAQ ── */
.geo-sdd__faq      { width: 100%; max-width: 720px; margin: 1rem auto 0; }
.geo-sdd__faq-item { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--rmd); margin-bottom: 8px; overflow: hidden; }
.geo-sdd__faq-item[open] { border-color: var(--t); }
.geo-sdd__faq-sum {
  list-style: none; display: flex; justify-content: space-between;
  align-items: center; padding: 14px 18px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--tx);
  user-select: none; gap: 12px;
}
.geo-sdd__faq-q {
  margin: 0; padding: 0; font-size: 14px; font-weight: 500;
  color: var(--tx); line-height: 1.4; flex: 1;
}
.geo-sdd__faq-sum::-webkit-details-marker { display: none; }
.geo-sdd__faq-sum:hover { background: var(--bgs); }
.geo-sdd__faq-icon {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--bd);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--t); font-size: 16px; font-weight: 400; line-height: 1;
  transition: transform .25s ease, background .15s, border-color .15s;
}
.geo-sdd__faq-item[open] .geo-sdd__faq-icon {
  transform: rotate(45deg); background: var(--tl); border-color: var(--t);
}
.geo-sdd__faq-body { padding: 0 18px 18px; border-top: 1px solid var(--bd); }
.geo-sdd__faq-body p { font-size: 14px; color: var(--txs); line-height: 1.7; margin-top: 14px; }
.geo-sdd__faq-body p strong { color: var(--tx); font-weight: 500; }
h2.geo-sdd__faq-h2 { font-size: 22px; font-weight: 500; color: var(--tx); margin: 2rem 0 1.25rem; text-align: center; width: 100%; max-width: 720px; line-height: 1.3; }

/* ── Tabla guía rápida ── */
.geo-sdd__tbl { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.geo-sdd__tbl th { background: var(--bgs); color: var(--tx); font-weight: 500; text-align: left; padding: 9px 12px; border: 1px solid var(--bd); white-space: nowrap; }
.geo-sdd__tbl td { padding: 9px 12px; border: 1px solid var(--bd); color: var(--txs); vertical-align: top; line-height: 1.5; }
.geo-sdd__tbl tr:nth-child(even) td { background: var(--bgs); }
.geo-sdd__tbl td:nth-child(2) { color: var(--td); font-weight: 500; }
@media (max-width: 560px) {
  .geo-sdd__tbl, .geo-sdd__tbl thead, .geo-sdd__tbl tbody,
  .geo-sdd__tbl th, .geo-sdd__tbl td, .geo-sdd__tbl tr { display: block; }
  .geo-sdd__tbl thead { display: none; }
  .geo-sdd__tbl td { border-top: none; padding: 6px 12px; }
  .geo-sdd__tbl td:first-child { padding-top: 12px; font-weight: 500; color: var(--tx); border-top: 1px solid var(--bd); }
  .geo-sdd__tbl tr { margin-bottom: 4px; }
}