/* ENC funnel — built on EnDesign tokens (colors_and_type.css) */
*{box-sizing:border-box}
body{margin:0;background:#EDEFEF;font-family:var(--font-sans);color:var(--color-text-dark);-webkit-font-smoothing:antialiased}
.wrap{max-width:1320px;margin:0 auto;padding:48px 24px 96px}

/* ── doc chrome ───────────────────────────────────────────── */
.doc-head{margin-bottom:40px}
.doc-head h1{font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;color:var(--color-text-darkest)}
.doc-head p{font-size:15px;line-height:1.6;color:var(--color-text-normal);margin:0;max-width:760px}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.legend b{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--color-engray-200);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--color-text-dark)}

.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.sec-num{width:26px;height:26px;border-radius:6px;background:var(--color-text-darkest);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;transform:translateY(3px)}
.sec-head h2{font-size:21px;font-weight:800;margin:0;color:var(--color-text-darkest);letter-spacing:-.01em}
.sec-note{font-size:14px;line-height:1.6;color:var(--color-text-normal);margin:0 0 20px 38px;max-width:820px;text-wrap:pretty}
.sec-note em{color:var(--color-enc-dark);font-style:normal;font-weight:600}
.stage{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-left:38px}
.plate{background:#fff;border-radius:14px;padding:20px;border:1px solid var(--color-engray-200)}
.plate.flat{background:transparent;border:0;padding:0}
.cap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-light);margin:0 0 10px}

/* ── ENC primitives ───────────────────────────────────────── */
.coin{width:20px;height:20px;flex:none;display:block}
.coin.s16{width:16px;height:16px}.coin.s24{width:24px;height:24px}.coin.s28{width:28px;height:28px}
.coin.s40{width:40px;height:40px}.coin.s56{width:56px;height:56px}

/* compact indicator — search result, no amount */
.enc-chip{display:inline-flex;align-items:center;gap:6px;background:var(--color-enc-lighter);
  border:1px solid #E3D6FF;border-radius:999px;padding:3px 10px 3px 6px;
  font-size:12px;font-weight:700;color:var(--color-enc-dark);line-height:18px;cursor:pointer;white-space:nowrap}
.enc-chip:hover{background:#EDE3FF;border-color:var(--color-enc-light)}
.enc-chip.icon-only{padding:4px;border-radius:999px}

/* value-forward earn line — value → benefit → program */
.enc-earn{display:flex;align-items:center;gap:12px;background:var(--color-enc-lighter);
  border:1px solid #E9DEFF;border-radius:10px;padding:12px 14px}
.enc-earn .txt{flex:1;min-width:0}
.enc-earn .val{font-size:16px;font-weight:800;color:var(--color-text-darkest);line-height:1.25}
.enc-earn .val u{text-decoration:none;color:var(--color-enc-dark)}
.enc-earn .sub{font-size:12.5px;line-height:1.45;color:var(--color-text-normal);margin-top:2px}
.enc-what{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--color-enc-dark);
  cursor:pointer;white-space:nowrap;background:none;border:0;padding:0;font-family:inherit}
.enc-what:hover{text-decoration:underline}
.enc-what i{width:14px;height:14px;border-radius:50%;border:1.4px solid currentColor;font-size:9px;font-style:normal;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;line-height:1}

/* room-level compact earn */
.enc-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--color-enc-dark)}

/* ── hotel search card (matches live product) ─────────────── */
.hcard{width:1100px;background:#fff;border:1px solid var(--color-engray-200);border-radius:16px;display:flex;overflow:hidden;box-shadow:var(--shadow-1)}
.hcard .photo{width:272px;flex:none;position:relative;background:linear-gradient(150deg,#8FC7D8,#C9AE8E 55%,#6E5B49)}
.hcard .photo .fav{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-4)}
.hcard .photo .fav svg{width:17px;height:17px;color:var(--color-text-dark)}
.hcard .photo .cnt{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;
  padding:3px 9px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.hcard .photo .nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-4);font-size:14px;color:var(--color-text-dark)}
.hcard .photo .nav.l{left:10px}.hcard .photo .nav.r{right:10px}
.hcard .info{flex:1;padding:20px 22px;display:flex;flex-direction:column;min-width:0}
.hcard .nameline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hcard h3{font-size:22px;font-weight:800;margin:0;color:var(--color-text-darkest);letter-spacing:-.01em}
.stars{display:inline-flex;gap:1.5px;align-items:center}
.stars svg{width:13px;height:13px;display:block}
.stars.sm svg{width:11px;height:11px}
.hcard .loc{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px;flex-wrap:wrap}
.hcard .loc a{color:var(--color-secondary-normal);font-weight:600;text-decoration:none}
.hcard .loc a:hover{text-decoration:underline;color:var(--color-secondary-hover)}
.hcard .loc .dist{color:var(--color-text-normal);display:inline-flex;align-items:center;gap:6px}
.hcard .amen{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--color-text-dark);margin-bottom:auto}
.hcard .amen span{display:inline-flex;align-items:center;gap:7px}
.hcard .amen svg{width:15px;height:15px;color:var(--color-text-light)}
.hcard .tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:13.5px}
.tag-blue{display:inline-flex;align-items:center;gap:7px;background:var(--color-secondary-lighter);color:var(--color-darkBlue-normal);
  border-radius:999px;padding:7px 14px;font-weight:700;font-size:13.5px}
.tag-ok{display:inline-flex;align-items:center;gap:6px;color:var(--color-primary-dark);font-weight:700}
.tag-mut{color:var(--color-text-normal)}
.dot-sep{color:var(--color-text-lighter)}
.hcard .rail{width:288px;flex:none;border-left:1px solid var(--color-engray-100);padding:18px 20px;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.rail .score{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rail .score .t{font-size:15px;font-weight:800;color:var(--color-text-darkest);line-height:1.15}
.rail .score .n{font-size:12.5px;color:var(--color-text-normal)}
.rail .score .b{width:42px;height:42px;border-radius:8px;background:var(--color-darkBlue-normal);color:#fff;
  font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.rail .disc{background:var(--color-primary-lighter);color:var(--color-primary-dark);font-size:13px;font-weight:800;
  border-radius:6px;padding:4px 10px;margin-bottom:10px}
.rail .lbl{font-size:13px;color:var(--color-text-normal)}
.rail .price{display:flex;align-items:baseline;gap:9px;margin:2px 0 2px}
.rail .price s{font-size:14px;color:var(--color-text-light)}
.rail .price b{font-size:26px;font-weight:800;color:var(--color-text-darkest);letter-spacing:-.02em}
.rail .fine{font-size:12.5px;color:var(--color-text-normal)}
.rail .inst{font-size:13px;color:var(--color-secondary-normal);font-weight:600;margin-top:8px}
.btn-sec{margin-top:14px;width:100%;background:var(--color-primary-normal);color:#fff;border:0;border-radius:10px;
  height:50px;font-size:17px;font-weight:800;font-family:inherit;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:8px}
.btn-sec:hover{background:var(--color-primary-hover)}
.rail .enc-rail{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:flex-end;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--color-enc-dark)}

/* ── generic buttons ──────────────────────────────────────── */
.btn{height:50px;border-radius:10px;border:0;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px}
.btn.pri{background:var(--color-primary-normal);color:#fff}
.btn.pri:hover{background:var(--color-primary-hover)}
.btn.gho{background:#fff;color:var(--color-text-dark);border:1px solid var(--color-engray-200)}
.btn.enc{background:var(--color-enc);color:#fff}
.btn.enc:hover{background:var(--color-enc-dark)}
.btn.block{width:100%}
.btn.sm{height:40px;font-size:14px;border-radius:8px;padding:0 16px}

/* ── popover / tooltip (desktop) ──────────────────────────── */
.pop{position:relative;width:320px;background:#fff;border-radius:10px;padding:16px;
  box-shadow:0 6px 30px 5px rgba(0,0,0,.14)}
.pop::before{content:"";position:absolute;top:-6px;left:36px;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
.pop h4{margin:0 0 6px;font-size:15px;font-weight:800;color:var(--color-text-darkest);display:flex;align-items:center;gap:8px}
.pop p{margin:0;font-size:13px;line-height:1.55;color:var(--color-text-normal)}
.pop .foot{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ── phone frame + bottom sheet ───────────────────────────── */
.phone{width:375px;flex:none;background:#fff;border-radius:22px;border:1px solid var(--color-engray-200);
  overflow:hidden;box-shadow:var(--shadow-8);position:relative}
.phone .bar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  font-size:12px;font-weight:700;color:var(--color-text-darkest);background:#fff}
.phone .body{padding:14px;background:var(--color-engray-50);min-height:120px}
.phone.tall .body{min-height:420px}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;
  padding:8px 18px 20px;box-shadow:0 -6px 30px rgba(0,0,0,.16)}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:var(--color-engray-200);margin:0 auto 14px}
.sheet h4{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--color-text-darkest);display:flex;align-items:center;gap:9px}
.sheet p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--color-text-normal)}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.4)}

/* mobile hotel card */
.mcard{background:#fff;border-radius:12px;border:1px solid var(--color-engray-200);overflow:hidden}
.mcard .ph{height:132px;background:linear-gradient(150deg,#8FC7D8,#C9AE8E 55%,#6E5B49);position:relative}
.mcard .bd{padding:12px 13px 13px}
.mcard .nm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.mcard h4{margin:0;font-size:16px;font-weight:800;color:var(--color-text-darkest)}
.mcard .lo{font-size:12.5px;color:var(--color-secondary-normal);font-weight:600;margin-bottom:9px}
.mcard .pr{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:11px;border-top:1px solid var(--color-engray-100)}
.mcard .pr .p b{font-size:19px;font-weight:800;color:var(--color-text-darkest);display:block;letter-spacing:-.01em}
.mcard .pr .p s{font-size:12px;color:var(--color-text-light)}
.mcard .pr .p i{font-style:normal;font-size:11.5px;color:var(--color-text-normal);display:block}

/* ── detail / room / checkout blocks ──────────────────────── */
.panel{background:#fff;border:1px solid var(--color-engray-200);border-radius:12px;padding:18px;width:480px}
.panel h3{margin:0 0 4px;font-size:19px;font-weight:800;color:var(--color-text-darkest)}
.panel .muted{font-size:13px;color:var(--color-text-normal);margin:0}
.bigprice{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px}
.bigprice b{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--color-text-darkest)}
.bigprice s{font-size:15px;color:var(--color-text-light)}
.hr{height:1px;background:var(--color-engray-100);margin:16px 0}

.room{border:1px solid var(--color-engray-200);border-radius:10px;padding:14px;display:flex;gap:16px;align-items:center;background:#fff}
.room + .room{margin-top:10px}
.room.pick{border-color:var(--color-primary-normal);box-shadow:0 0 0 1px var(--color-primary-normal) inset}
.room .rl{flex:1;min-width:0}
.room .rn{font-size:15px;font-weight:800;color:var(--color-text-darkest);margin-bottom:5px}
.room .rf{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--color-text-normal)}
.room .rf .ok{color:var(--color-primary-dark);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.room .rr{text-align:right;flex:none;width:190px}
.room .rr b{font-size:20px;font-weight:800;color:var(--color-text-darkest);display:block;letter-spacing:-.01em}
.room .rr .encline{margin-top:6px;display:flex;justify-content:flex-end}

.sumrow{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:7px 0;color:var(--color-text-dark)}
.sumrow.tot{font-size:17px;font-weight:800;color:var(--color-text-darkest);padding-top:12px;margin-top:6px;
  border-top:1px solid var(--color-engray-200)}
.sumrow .k{color:var(--color-text-normal)}
.reward-block{margin-top:14px;border:1px dashed var(--color-enc-light);background:var(--color-enc-lighter);
  border-radius:10px;padding:13px 14px}
.reward-block .rh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.reward-block .rh span{font-size:13px;font-weight:700;color:var(--color-enc-dark);display:inline-flex;align-items:center;gap:8px}
.reward-block .rh b{font-size:17px;font-weight:800;color:var(--color-enc-dark);white-space:nowrap}
.reward-block p{margin:6px 0 0;font-size:12.5px;color:var(--color-text-normal);line-height:1.5}

.cta-zone{width:480px}
.reinforce{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:11px;
  font-size:13.5px;color:var(--color-text-dark)}
.reinforce b{color:var(--color-enc-dark);font-weight:800}

/* ── confirmation ─────────────────────────────────────────── */
.confirm{width:520px;background:#fff;border:1px solid var(--color-engray-200);border-radius:14px;overflow:hidden}
.confirm .top{padding:22px;display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid var(--color-engray-100)}
.confirm .tick{width:44px;height:44px;border-radius:12px;background:var(--color-primary-lighter);color:var(--color-primary-dark);
  display:flex;align-items:center;justify-content:center;flex:none}
.confirm .tick svg{width:26px;height:26px}
.confirm .top h3{margin:0 0 3px;font-size:19px;font-weight:800;color:var(--color-text-darkest)}
.confirm .top p{margin:0;font-size:13.5px;color:var(--color-text-normal);line-height:1.5}
.enc-moment{padding:22px;background:linear-gradient(180deg,var(--color-enc-lighter),#FBF9FF);text-align:center}
.enc-moment .amt{font-size:30px;font-weight:800;color:var(--color-text-darkest);letter-spacing:-.02em;margin:12px 0 2px}
.enc-moment .amt u{text-decoration:none;color:var(--color-enc-dark)}
.enc-moment .sb{font-size:14px;color:var(--color-text-normal);margin:0 0 16px;line-height:1.5}
.enc-moment.pending{background:linear-gradient(180deg,#F6F2FF,#FCFBFF)}
.pending-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--color-enc-light);
  color:var(--color-enc-dark);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;margin-bottom:4px}
.timeline{display:flex;align-items:center;gap:0;margin:16px auto 0;max-width:340px}
.timeline .st{flex:1;text-align:center;font-size:11px;color:var(--color-text-normal);line-height:1.35}
.timeline .st .d{width:11px;height:11px;border-radius:50%;background:var(--color-engray-300);margin:0 auto 6px}
.timeline .st.on .d{background:var(--color-enc)}
.timeline .st.on{color:var(--color-enc-dark);font-weight:700}
.timeline .ln{height:2px;background:var(--color-engray-200);flex:1;margin-bottom:20px}

/* ── ENC nedir? content ───────────────────────────────────── */
.rate-line{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;
  border:1px solid #E9DEFF;border-radius:10px;padding:12px;font-size:16px;font-weight:800;color:var(--color-text-darkest);margin:12px 0}
.rate-line em{font-style:normal;color:var(--color-enc-dark)}
.steps{display:flex;flex-direction:column;gap:11px;margin:14px 0 0}
.steps li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--color-text-dark);list-style:none}
.steps li b{display:block;font-weight:800;color:var(--color-text-darkest);margin-bottom:1px}
.steps .n{width:22px;height:22px;border-radius:50%;background:var(--color-enc-lighter);color:var(--color-enc-dark);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.steps ul{margin:0;padding:0}

/* differentiation reference strip */
.diffgrid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tag-disc{background:var(--color-primary-lighter);color:var(--color-primary-dark);border-radius:6px;padding:4px 10px;font-size:13px;font-weight:800}
.tag-coup{background:var(--color-secondary-lighter);color:var(--color-darkBlue-normal);border-radius:6px;padding:4px 10px;font-size:13px;font-weight:700}
.tag-camp{background:#FFF1E8;color:#B3541E;border-radius:6px;padding:4px 10px;font-size:13px;font-weight:700}