/* ============================================================
   TURONDA · css/percorsi.css
   Stili della pagina "Percorsi già composti".
   Estende css/style.css, che va caricato prima.
   ============================================================ */

/* ── cartellino obiettivo di spesa ── */
.target-card{
  display:inline-flex;align-items:center;gap:16px;margin-top:30px;
  padding:16px 22px;border-radius:18px;
  background:rgba(216,169,74,.10);border:1px solid rgba(216,169,74,.32);
  box-shadow:var(--neu-out);
}
.target-ico{
  flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-lt),var(--gold));color:#231803;
}
.target-ico i{width:21px;height:21px}
.target-lbl{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.target-val{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;color:var(--gold-lt);margin-top:3px}

/* ── griglia dei percorsi ── */
.route-grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  align-items:start;
}
.route{
  position:relative;display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,rgba(24,36,47,.74),rgba(11,16,23,.88));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--edge);box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.route:hover{transform:translateY(-5px);box-shadow:var(--shadow-hi);border-color:rgba(216,169,74,.4)}
.route.tasting{border-color:rgba(216,169,74,.42);box-shadow:var(--glow-gold)}

.route-tag{
  position:absolute;inset-block-start:16px;inset-inline-start:16px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(11,16,23,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--edge);color:var(--pearl);
}
.route-tag i{width:13px;height:13px}
.tag-chef,.tag-gold{background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#231803;border-color:var(--gold);
  box-shadow:0 14px 26px -12px rgba(216,169,74,.85)}
.tag-veg,.tag-vegan{background:rgba(89,201,165,.2);border-color:rgba(89,201,165,.5);color:#7FE0C4}
.tag-halal{background:rgba(89,201,165,.16);border-color:rgba(89,201,165,.42);color:#7FE0C4}
.tag-gf,.tag-lf{background:rgba(216,169,74,.16);border-color:rgba(216,169,74,.42);color:var(--gold-lt)}

.route-media{position:relative;height:170px;overflow:hidden;background:#0E141C}
.route-media img,.route-media svg{width:100%;height:100%;object-fit:cover;display:block}
.route-fade{position:absolute;inset:auto 0 0 0;height:110px;
  background:linear-gradient(180deg,rgba(11,16,23,0),rgba(11,16,23,.96))}

.route-body{padding:22px;display:flex;flex-direction:column;flex:1;margin-top:-12px}
.route.tasting .route-body{margin-top:0;padding-top:58px}
.route-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.08}
.route-sub{color:var(--muted);font-size:13px;margin-top:6px}

.chef-note{
  margin-top:16px;padding:14px 16px;border-radius:14px;
  background:rgba(216,169,74,.08);border:1px solid rgba(216,169,74,.24);
  border-inline-start:3px solid var(--gold);
}
.chef-note-h{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:var(--gold-lt)}
.chef-note-h i{width:13px;height:13px}
.chef-note p{margin:8px 0 0;font-size:13.4px;line-height:1.6;color:rgba(232,238,242,.82)}

/* ── tappe del percorso ── */
.steps{margin-top:20px;display:flex;flex-direction:column}
.stepline{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 0;position:relative}
.stepline:not(:last-child):before{
  content:'';position:absolute;inset-inline-start:16px;top:44px;bottom:-14px;width:2px;
  background:linear-gradient(180deg,var(--edge),transparent);
}
.step-dot{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:var(--gold-lt);
}
.step-dot i{width:15px;height:15px;color:var(--muted)}
.stepline.is-gap .step-dot{border-style:dashed;border-color:rgba(226,84,59,.5)}
.step-course{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.step-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.step-head h4{margin:0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:16.5px;line-height:1.25}
.step-price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;color:var(--gold-lt);white-space:nowrap}
.step-desc{margin:6px 0 0;font-size:13px;line-height:1.55;color:rgba(232,238,242,.62)}
.step-allerg{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.06em;color:rgba(232,238,242,.4)}

.swap-btn{
  margin-top:10px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);
  color:var(--muted);font-size:12px;font-weight:600;transition:.2s;
}
.swap-btn i{width:13px;height:13px}
.swap-btn:hover{border-color:var(--gold);color:var(--gold-lt);transform:translateY(-2px)}

.gap-box{
  padding:13px 15px;border-radius:13px;
  background:rgba(226,84,59,.09);border:1px solid rgba(226,84,59,.3);
}
.gap-box strong{display:block;font-family:'Montserrat',sans-serif;font-size:13px;color:#F5947F;margin-bottom:5px}
.gap-box p{margin:0;font-size:12.8px;line-height:1.55;color:#EBD5CE}

/* ── bevanda opzionale ── */
.drink-row{
  display:flex;align-items:center;gap:11px;width:100%;text-align:start;cursor:pointer;
  margin-top:14px;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px dashed var(--edge);
  color:var(--pearl);transition:.22s;
}
.drink-row i{width:17px;height:17px;color:var(--muted);flex:none}
.drink-row:hover{border-color:var(--gold);transform:translateY(-2px)}
.drink-row.is-on{background:rgba(89,201,165,.10);border-style:solid;border-color:rgba(89,201,165,.45)}
.drink-row.is-on i{color:var(--mint)}
.drink-name{font-weight:600;font-size:13.5px}
.drink-txt{font-size:11.5px;color:var(--muted);margin-inline-start:auto}
.drink-price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:var(--gold-lt);white-space:nowrap}

/* ── barra dell'obiettivo ── */
.meter{margin-top:18px}
.meter-bar{
  position:relative;height:8px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.07);box-shadow:var(--neu-in);
}
.meter-bar span{display:block;height:100%;border-radius:999px;transition:width .4s cubic-bezier(.2,.7,.3,1)}
.meter.on    .meter-bar span{background:linear-gradient(90deg,#7FE0C4,var(--mint))}
.meter.under .meter-bar span{background:linear-gradient(90deg,#8FA3B0,#5F7482)}
.meter.over  .meter-bar span{background:linear-gradient(90deg,#F1907B,var(--chili))}
.meter-mark{
  position:absolute;top:-3px;inset-inline-start:62.5%;width:2px;height:14px;border-radius:2px;
  background:var(--gold);box-shadow:0 0 8px rgba(216,169,74,.9);
}
.meter-txt{display:block;margin-top:8px;font-size:11.5px;font-weight:600;letter-spacing:.04em}
.meter.on    .meter-txt{color:var(--mint)}
.meter.under .meter-txt{color:var(--muted)}
.meter.over  .meter-txt{color:#F5947F}

.route-total{
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rt-lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rt-amt{font-family:'Montserrat',sans-serif;font-weight:800;font-size:30px;color:var(--gold-lt);line-height:1}

/* ── selettore 5 / 6 portate ── */
.size-switch{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.size-switch button{
  flex:1;min-width:132px;padding:12px 14px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--pearl);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;transition:.22s;
}
.size-switch button:hover{border-color:var(--gold);transform:translateY(-2px)}
.size-switch button.is-on{
  background:linear-gradient(150deg,var(--gold-lt),var(--gold));color:#231803;border-color:var(--gold);
  box-shadow:0 12px 24px -12px rgba(216,169,74,.85);
}

/* ── modale sostituzioni ── */
.swap-list{display:flex;flex-direction:column;gap:10px}
.swap-opt{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:100%;text-align:start;cursor:pointer;
  padding:15px 16px;border-radius:15px;
  background:rgba(255,255,255,.045);border:1px solid var(--edge);color:var(--pearl);transition:.2s;
}
.swap-opt:hover{border-color:var(--gold);transform:translateY(-2px)}
.swap-opt.is-on{background:rgba(216,169,74,.13);border-color:var(--gold)}
.so-main b{display:inline;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px}
.so-main span{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.so-price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;color:var(--gold-lt);white-space:nowrap}

/* ── RTL ── */
html[dir="rtl"] .route-name,
html[dir="rtl"] .step-head h4,
html[dir="rtl"] .so-main b,
html[dir="rtl"] .target-val,
html[dir="rtl"] .size-switch button{font-family:'Noto Kufi Arabic','Montserrat',sans-serif;letter-spacing:0}
html[dir="rtl"] .step-course,
html[dir="rtl"] .rt-lbl,
html[dir="rtl"] .route-tag,
html[dir="rtl"] .chef-note-h,
html[dir="rtl"] .target-lbl{letter-spacing:0}
html[dir="rtl"] .rt-amt,
html[dir="rtl"] .step-price,
html[dir="rtl"] .so-price,
html[dir="rtl"] .drink-price{direction:ltr;unicode-bidi:embed}
html[dir="rtl"] .meter-mark{inset-inline-start:auto;inset-inline-end:62.5%}
html[dir="rtl"] .chef-note{border-inline-start:0;border-inline-end:3px solid var(--gold)}

@media(max-width:768px){
  .route-grid{grid-template-columns:1fr}
  .rt-amt{font-size:26px}
  .target-card{width:100%}
}