/* ============================================================ */
/* BK Wireless · /trade-in/model.css                            */
/* The trade-in model pages (/trade-in/<brand>/<model>/).       */
/* Loaded after global.css and /repairs/model.css.              */
/*                                                              */
/* Source of the look: variants/tradein-model/a.html (option A, */
/* approved 2026-10-11). The phone picture on a white tile, a   */
/* dark headline panel and a white "value by condition" card    */
/* over the tile's lower edge, then the page sections, a red    */
/* closing band, and on phones a slim bar fixed to the bottom.  */
/*                                                              */
/* The pages reuse the repair pages' rmf- classes as they are   */
/* (/repairs/model.css). Everything here is trade-in specific,  */
/* starts with tif- and sits under the .rmf wrapper, so nothing */
/* collides. Colors and fonts are the global.css tokens only.   */
/* Pages are written by convert-tradein-model-pages.py.         */
/* ============================================================ */

/* ---------- small shared pieces ---------- */
/* the words beside a dollar figure ("Up to", "to", "Around"): the page's own text, drawn smaller */
.rmf .tif-q{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em}
/* FAQ title: break before "trade-in", never inside it */
.rmf.tif .rmf-split > h2{text-wrap:balance}
.rmf .tif-label{font-family:var(--font-mono);font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.06em;color:var(--red)}

/* ============================================================ */
/* TOP: picture tile, dark panel, white value card              */
/* (the panel, card and rows are the repair pages' own classes) */
/* ============================================================ */
/* The top picture: this model's all-colors picture (/img/devices/colors/<model>.png) or the page's
   own device picture, on a white tile with a thin border. Always shown whole and in its own shape,
   whatever that shape is: the width is set, the height follows from the picture's real width and
   height (written on the <img> by the converter). Never cropped, never stretched.
   --tif-s     the most the picture's height may be
   --tif-ar    the picture's width divided by its height        (written on the tile by the converter)
   --tif-blank how much of the picture's height is empty background under the device(s)   (same)
   --tif-lap   how far the headline panel and the value card climb onto the tile (set by /repairs/model.css)
   --tif-w     the room the tile has for a picture, at the least: screen or page width, less 18px for a
               scrollbar, the page gutters, the tile's own padding (24px) and its border (2px)
   --tif-h     the picture's height on screen, at the least
   The panel may sit over the empty strip under the device(s), never over a phone: the tile's bottom
   padding makes up whatever that strip does not cover. --tif-h is never more than the real height,
   so the padding is never too little. */
.rmf .tif-pic{--tif-s:240px;--tif-lap:52px;--tif-gap:14px;
              --tif-w:calc(min(100vw - 18px,var(--container-max)) - 2*var(--container-pad) - 26px);
              --tif-h:min(var(--tif-s),calc(var(--tif-w)/var(--tif-ar,1)));
              border:1px solid var(--border);border-radius:var(--rmf-r);background:var(--white);
              padding:12px 12px max(0px,calc(var(--tif-lap) + var(--tif-gap) - var(--tif-blank,0)*var(--tif-h)))}
.rmf .tif-pic img{display:block;margin:0 auto;width:min(100%,calc(var(--tif-s)*var(--tif-ar,1)));height:auto;object-fit:contain}
/* an all-colors picture is wider than tall and brings a little white margin of its own */
.rmf .tif-pic--colors{--tif-s:420px;padding-top:6px}

/* a page with no picture: no tile, so the panel and the card do not climb onto anything */
.rmf .tif-hero--bare .rmf-cards{margin-top:0}
.rmf .tif-hero--bare .rmf-panel{margin:0}

.rmf .tif-amt{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.rmf .tif-amt .tif-q{font-size:13px;color:var(--grey)}

/* ============================================================ */
/* THE SECTIONS UNDER THE TOP                                   */
/* ============================================================ */
/* the cash tiles in the fact strip: figures in DM Mono */
.rmf .tif-fact--cash b{font-family:var(--font-mono);font-weight:500;letter-spacing:-.06em}

/* "Repair it or trade it in?": one charcoal tile, with the "Compare" note as a white card inside it */
.rmf .tif-rot{display:grid;gap:20px;padding:26px 22px;border-radius:var(--rmf-r);background:var(--rmf-dark);color:var(--rmf-dim)}
.rmf .tif-rot h2{color:var(--rmf-ink)}
.rmf .tif-rot__main > p{max-width:60ch;margin-top:8px;font-size:15.5px}
.rmf .tif-rot__list{display:grid;gap:9px;margin-top:16px}
.rmf .tif-rot__list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--rmf-ink)}
.rmf .tif-rot__list li::before{content:"\2713";display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;
                               border-radius:50%;background:var(--soft-red);color:var(--red);font-size:11px;font-weight:900}
.rmf .tif-rot__list strong{font-weight:700}
.rmf .tif-rot__side{display:flex;flex-direction:column;align-items:flex-start;padding:20px;border-radius:10px;background:var(--white);color:var(--charcoal)}
.rmf .tif-rot__text{margin-top:8px;font-size:15.5px;line-height:1.5}
.rmf .tif-rot__side .rmf-btn{margin-top:16px}

/* the market value note under the spec rows (label kept exactly as the page has it) */
.rmf .tif-market{display:grid;gap:12px;margin-top:22px;padding:20px;border-radius:10px;background:var(--light)}
.rmf .tif-market__val{margin-top:4px;font-family:var(--font-mono);font-size:32px;line-height:1.1;letter-spacing:-.05em;white-space:nowrap;color:var(--black)}
.rmf .tif-market__note{max-width:72ch;font-size:13.5px;color:var(--grey)}
.rmf .tif-market .rmf-btn{justify-self:start}

/* red closing band: two buttons where the repair pages have the booking form */
.rmf .tif-close__btns{display:grid;gap:8px}
.rmf .tif-btn--white{background:var(--white);color:var(--black)}
.rmf .tif-btn--white:hover{background:var(--soft-red);color:var(--black)}
.rmf .tif-btn--ghost{border-color:var(--white);color:var(--white)}
.rmf .tif-btn--ghost:hover{background:var(--white);color:var(--black)}

/* ---------- phone bar: by screen width only (the bar itself and the room under the footer come from /repairs/model.css) ---------- */
@media(max-width:759px){
  .rmf .tif-bar span{font-size:12.5px;color:var(--charcoal)}
  .rmf .tif-bar b{display:flex;align-items:baseline;gap:5px;margin-left:0;font-size:19px;line-height:1.15;letter-spacing:-.04em;white-space:nowrap;color:var(--black)}
  .rmf .tif-bar b .tif-q{font-size:12.5px;line-height:1.15;color:var(--charcoal)}
}

/* ---------- wider screens ---------- */
@media(min-width:760px){
  /* both kinds of picture, device and all-colors, are at most 400px high here */
  .rmf .tif-pic{--tif-s:400px;--tif-lap:84px;--tif-gap:18px}
  .rmf .tif-hero--bare .rmf-cards{margin:0}

  .rmf .tif-rot{grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;padding:32px}
  .rmf .tif-close__btns{display:flex;flex-wrap:wrap}
}
@media(min-width:900px){
  .rmf .rmf-main > .tif-rot{grid-column:1/-1}
  .rmf .tif-market{grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:22px 24px}
  .rmf .tif-close .rmf-cta__in{grid-template-columns:1fr auto;align-items:center}
}