/* ===========================================================
   Tipping the Dealer — Let It Ride guide, Part 8
   ---------------------------------------------------------
   Shared components come from guide.css and are deliberately
   NOT redefined here:
     .felt / .mini-felt / .felt__row / .felt__lbl / .dealer
     .bspot family, .gchip family, .lock-tag, .tag
     .panel-box family, .states, .state__spots
     .chart / .chart-wrap, .compare family, .paths / .path
     .remain family, .refcard family, .ref-list / .ref-item
     .notice, .callout, .prose, .pc / .hand, .next family
   Everything below is new to this page and prefixed .tip- ,
   apart from five modifiers added to shared components
   (.tip-spots, .panel-box__head--wrap, .path--no,
    .compare__side--risk, .compare__eq--word).
   =========================================================== */

/* ---- hero: a direct tip beside a dealer wager ---- */
.tip-hero__pair{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%}
.tip-hero__col{flex:1 1 250px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 12px;border-radius:18px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.2)}
.tip-hero__who{color:#dff3ea;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-align:center;line-height:1.45}
.tip-hero__move{display:flex;align-items:center;gap:12px}
.tip-hero__stack{display:flex;align-items:center}
.tip-hero__stack .gchip+.gchip{margin-left:-34px}
.tip-hero__arrow{width:28px;height:28px;color:var(--yellow);flex:none}

/* ---- modifiers on shared components ---- */
.tip-spots{flex-wrap:wrap;row-gap:16px}
.panel-box__head--wrap{flex-wrap:wrap;row-gap:8px}

/* ---- horizontal amount chain ---- */
.tip-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.tip-flow__arrow{width:24px;height:24px;color:#9db5c4;flex:none}
.tip-outs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tip-out{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 18px;border-radius:14px;border:2px solid var(--line);background:#f7fbfa;min-width:132px;text-align:center}
.tip-out b{font-size:1.3rem;font-weight:800;color:var(--navy);line-height:1.15}
.tip-out span{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);line-height:1.45}
.tip-out--sure{border-color:#7fdcc4;background:#dbf6ee}
.tip-out--sure b{color:#0a5744}
.tip-out--win{border-color:var(--yellow);background:#fdf3d8}
.tip-out--win b{color:#6b4700}
.tip-out--lose{border-color:#efaba5;background:#fdecea}
.tip-out--lose b{color:#7a241d}

/* ---- sub-heading inside a section ---- */
.tip-sub{margin:32px 0 14px;color:var(--navy);font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.3}

/* ---- card ranks shown as text rather than a card graphic ---- */
.tip-ranks{display:inline-flex;align-items:center;gap:12px;padding:10px 18px;border-radius:12px;background:#fff;color:var(--navy);font-weight:800;font-size:1.2rem;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.tip-ranks i{font-style:normal}
.tip-ranks__r{color:#e02a2a}

/* ---- three-up situation / amount cards (inside the shared .remain grid) ---- */
.tip-card__body{padding:18px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tip-card__ico{width:48px;height:48px;border-radius:50%;background:#c9efe6;color:var(--teal);display:grid;place-items:center;flex:none}
.tip-card__ico svg{width:24px;height:24px}
.tip-card__amt{font-weight:800;color:var(--navy);font-size:1.3rem;line-height:1.15}
.tip-card__body p{margin:0;color:var(--text);font-size:1rem;line-height:1.55}

/* ---- what a tip does not change ---- */
.tip-nochange{margin-top:26px;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.tip-nochange__from{display:flex;flex-direction:column;align-items:center;gap:9px}
.tip-nochange__from b{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--navy)}
.tip-nochange__bar{display:flex;flex-direction:column;align-items:center;gap:7px;color:#7a241d;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;text-align:center;line-height:1.35;max-width:96px}
.tip-nochange__bar svg{width:30px;height:30px;color:#e05a52}
.tip-nochange__list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tip-nochange__item{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border-radius:12px;background:#f4f9f7;border:1px solid var(--line);color:var(--navy);font-weight:700;font-size:.96rem;line-height:1.45}
.tip-nochange__item svg{width:18px;height:18px;color:#e05a52;flex:none}

/* ---- session budget ---- */
.tip-budget{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.tip-budget__total{margin:0 0 14px;color:var(--navy);font-weight:800;font-size:1.05rem;line-height:1.4}
.tip-budget__bar{display:flex;height:54px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tip-budget__seg{display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem;padding:0 6px;text-align:center;line-height:1.2}
.tip-budget__seg--play{background:var(--navy);flex:1 1 auto}
.tip-budget__seg--tip{background:var(--coral);flex:0 0 6.7%;min-width:64px}
.tip-budget__key{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0}
.tip-budget__k{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:.98rem;line-height:1.55}
.tip-budget__sw{width:15px;height:15px;border-radius:4px;flex:none;margin-top:5px}
.tip-budget__sw--play{background:var(--navy)}
.tip-budget__sw--tip{background:var(--coral)}
.tip-budget__foot{margin:16px 0 0;color:var(--muted);font-size:.93rem;line-height:1.6}

/* ---- the idea that gets struck out ---- */
.path--no{border-color:#e05a52}
.path--no .path__head{background:#fdecea;color:#7a241d}
.tip-strike{display:inline-block;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#c0392f;color:var(--muted);font-weight:800;font-size:1.05rem}
.tip-nope{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:7px 14px;border-radius:999px;background:#fdecea;color:#7a241d;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;box-shadow:inset 0 0 0 1.5px #e0857c}
.tip-nope svg{width:14px;height:14px;flex:none}

/* ---- bottom-line headline inside the shared .compare card ---- */
.tip-want{margin:0 0 20px;text-align:center;color:#5c3f00;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem;line-height:1.45}
.compare__side--risk>span{background:#fdecea;color:#7a241d}

/* ---- responsive ---- */
@media (max-width:899px){
  .tip-nochange{grid-template-columns:1fr;gap:16px;padding:20px}
  .tip-nochange__bar{flex-direction:row;max-width:none;gap:10px}
  .tip-nochange__bar svg{transform:rotate(90deg)}
  .compare__eq--word{transform:none}
  .tip-sub{margin-top:26px}
}
@media (max-width:560px){
  .tip-nochange__list{grid-template-columns:1fr}
  .tip-out{min-width:114px;padding:12px 14px}
  .tip-out b{font-size:1.15rem}
  .tip-flow{gap:10px}
  .tip-hero__stack .gchip+.gchip{margin-left:-28px}
  .tip-budget{padding:18px}
  .tip-budget__seg{font-size:.86rem}
  .tip-ranks{font-size:1.05rem;gap:9px;padding:9px 14px}
  .tip-card__amt{font-size:1.2rem}
}