/*!
 * MobileRanks v4.7 — Unified Premium UI Polish
 * Design-consistency overlay. No structural / functional changes.
 * Loaded site-wide AFTER mr-style, mr-homepage-v4, phone-frontend-v2/v45.
 */

/* ---------------- 1. Design tokens ---------------- */
:root{
  /* Brand */
  --mr-brand:            #ff6a00;
  --mr-brand-600:        #e85d00;
  --mr-brand-050:        #fff3ea;
  --mr-accent:           #ff6a00;

  /* Neutrals */
  --mr-ink:              #0f1420;
  --mr-ink-2:            #1c2233;
  --mr-muted:            #5b6478;
  --mr-muted-2:          #8791a3;
  --mr-line:             #e6e9ef;
  --mr-line-2:           #eef1f6;
  --mr-surface:          #ffffff;
  --mr-surface-2:        #f7f8fb;
  --mr-surface-3:        #f1f3f8;

  /* Semantic */
  --mr-success:          #16a34a;
  --mr-warning:          #d97706;
  --mr-danger:           #dc2626;
  --mr-info:             #2563eb;

  /* Radius scale */
  --mr-r-xs: 6px;
  --mr-r-sm: 10px;
  --mr-r-md: 14px;
  --mr-r-lg: 18px;
  --mr-r-xl: 22px;

  /* Shadow scale */
  --mr-sh-1: 0 1px 2px rgba(15,20,32,.05), 0 1px 1px rgba(15,20,32,.04);
  --mr-sh-2: 0 4px 14px rgba(15,20,32,.06), 0 2px 4px rgba(15,20,32,.04);
  --mr-sh-3: 0 12px 32px rgba(15,20,32,.10), 0 4px 10px rgba(15,20,32,.06);
  --mr-ring: 0 0 0 3px rgba(255,106,0,.28);

  /* Spacing scale (4/8) */
  --mr-s-1: 4px; --mr-s-2: 8px; --mr-s-3: 12px; --mr-s-4: 16px;
  --mr-s-5: 20px; --mr-s-6: 24px; --mr-s-7: 32px; --mr-s-8: 40px;
  --mr-s-9: 56px; --mr-s-10: 72px;

  /* Type scale */
  --mr-fs-xs: 12px;
  --mr-fs-sm: 13px;
  --mr-fs-base: 15px;
  --mr-fs-md: 16px;
  --mr-fs-lg: 18px;
  --mr-fs-xl: 22px;
  --mr-fs-2xl: 28px;
  --mr-fs-3xl: 34px;
  --mr-fs-4xl: 44px;

  /* Motion */
  --mr-ease: cubic-bezier(.2,.7,.2,1);
  --mr-dur:  .18s;

  /* Card image ratio (unified across the site — square, matches 1200×1200 masters) */
  --mr-thumb-ratio: 1 / 1;
}

/* ---------------- 2. Global normalization ---------------- */
body{
  color: var(--mr-ink);
  font-size: var(--mr-fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5{ color: var(--mr-ink); letter-spacing:-.01em; }
h1{ font-size: clamp(var(--mr-fs-2xl), 3.4vw, var(--mr-fs-4xl)); line-height:1.1; }
h2{ font-size: clamp(var(--mr-fs-xl), 2.4vw, var(--mr-fs-3xl)); line-height:1.15; }
h3{ font-size: var(--mr-fs-xl); line-height:1.2; }
h4{ font-size: var(--mr-fs-lg); line-height:1.25; }
small,.mr-meta{ color: var(--mr-muted); font-size: var(--mr-fs-xs); }

a{ transition: color var(--mr-dur) var(--mr-ease); }

/* Unified focus ring */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: none;
  box-shadow: var(--mr-ring);
  border-radius: var(--mr-r-sm);
}

/* ---------------- 3. Unified card system ---------------- */
.mr-card,
.mr-post,
.mrhp-card,
.mrhp-phone-card,
.mrhp-review-card,
.mrhp-news-card,
.mrhp-brand-card,
.mrhp-guide-card,
.mrhp-comparison-card,
.mrhp-best-card,
.mrhp-recent-card,
.pv2-card{
  background: var(--mr-surface);
  border: 1px solid var(--mr-line);
  border-radius: var(--mr-r-lg);
  box-shadow: var(--mr-sh-1);
  transition: transform var(--mr-dur) var(--mr-ease),
              box-shadow var(--mr-dur) var(--mr-ease),
              border-color var(--mr-dur) var(--mr-ease);
  overflow: hidden;
}
.mr-post:hover,
.mrhp-card:hover,
.mrhp-phone-card:hover,
.mrhp-review-card:hover,
.mrhp-news-card:hover,
.mrhp-brand-card:hover,
.mrhp-guide-card:hover,
.mrhp-comparison-card:hover,
.mrhp-best-card:hover,
.mrhp-recent-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--mr-sh-3);
  border-color: #dfe3ec;
}

/* ---------------- 4. Unified phone thumbnail container ---------------- */
.mr-thumb,
.mrhp-phone-card .mrhp-thumb,
.mrhp-best-card .mrhp-thumb,
.mrhp-recent-card .mrhp-thumb,
.mrhp-review-card .mrhp-thumb,
.mrhp-news-card .mrhp-thumb,
.mrhp-guide-card .mrhp-thumb,
.mr-post > a:first-child{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio: var(--mr-thumb-ratio);
  background: linear-gradient(180deg,#fafbfd 0%, #f2f4f8 100%);
  overflow:hidden;
}
.mr-thumb > img,
.mrhp-thumb > img,
.mr-post > a:first-child img{
  width:100% !important;
  height:100% !important;
  object-fit: contain;
  object-position: center;
  display:block;
  transition: transform .3s var(--mr-ease);
}
.mrhp-phone-card:hover .mrhp-thumb > img,
.mr-post:hover > a:first-child img{
  transform: scale(1.03);
}

/* ---------------- 5. Section rhythm ---------------- */
.mrhp-section,
.pv2-card + .pv2-card{
  margin-top: clamp(var(--mr-s-7), 4vw, var(--mr-s-9));
}
.mrhp-section-head,
.pv2-card > h2:first-child,
.pv2-h2{
  margin: 0 0 var(--mr-s-5);
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--mr-s-4);
}
.mrhp-section-head h2{ margin:0; }
.mrhp-section-head .mrhp-eyebrow,
.mrhp-eyebrow{
  color: var(--mr-brand);
  text-transform: uppercase;
  letter-spacing:.12em;
  font-size: var(--mr-fs-xs);
  font-weight:700;
}

/* ---------------- 6. Buttons ---------------- */
.mr-btn,
.mrhp-btn,
.pv2-btn,
button.mr-finder-submit,
.mr-view-all{
  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--mr-s-2);
  padding: 10px 18px;
  min-height: 42px;
  border-radius: 999px;
  font-weight:600;
  font-size: var(--mr-fs-sm);
  line-height:1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--mr-dur) var(--mr-ease),
              color var(--mr-dur) var(--mr-ease),
              border-color var(--mr-dur) var(--mr-ease),
              transform var(--mr-dur) var(--mr-ease);
  text-decoration: none;
}
.mr-btn.primary, .mrhp-btn.primary, .pv2-btn.primary,
button.mr-finder-submit{
  background: var(--mr-brand); color:#fff;
}
.mr-btn.primary:hover, .mrhp-btn.primary:hover, .pv2-btn.primary:hover,
button.mr-finder-submit:hover{
  background: var(--mr-brand-600);
  transform: translateY(-1px);
}
.mr-btn.ghost, .mrhp-btn.ghost, .pv2-btn.ghost,
.mr-view-all{
  background:#fff; color: var(--mr-ink);
  border-color: var(--mr-line);
}
.mr-btn.ghost:hover, .mrhp-btn.ghost:hover, .pv2-btn.ghost:hover,
.mr-view-all:hover{
  border-color: var(--mr-brand);
  color: var(--mr-brand);
}

/* ---------------- 7. Homepage grid equalization ---------------- */
.mrhp-grid,
.mrhp-cards,
.mrhp-reviews-grid,
.mrhp-news-grid,
.mrhp-brands-grid,
.mrhp-comparisons-grid,
.mrhp-guides-grid,
.mrhp-recent-grid,
.mrhp-best-grid{
  display:grid;
  gap: var(--mr-s-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.mrhp-phone-card,
.mrhp-review-card,
.mrhp-news-card,
.mrhp-brand-card,
.mrhp-guide-card,
.mrhp-comparison-card,
.mrhp-best-card,
.mrhp-recent-card{
  display:flex; flex-direction:column; height:100%;
}
.mrhp-phone-card .mrhp-body,
.mrhp-review-card .mrhp-body,
.mrhp-news-card .mrhp-body,
.mrhp-brand-card .mrhp-body,
.mrhp-guide-card .mrhp-body,
.mrhp-comparison-card .mrhp-body,
.mrhp-best-card .mrhp-body,
.mrhp-recent-card .mrhp-body{
  padding: var(--mr-s-5);
  display:flex; flex-direction:column; gap: var(--mr-s-3);
  flex:1 1 auto;
}
.mrhp-phone-card .mrhp-title,
.mrhp-review-card .mrhp-title,
.mrhp-news-card .mrhp-title,
.mrhp-best-card .mrhp-title,
.mrhp-recent-card .mrhp-title{
  font-size: var(--mr-fs-md);
  font-weight:700;
  line-height:1.3;
  color: var(--mr-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.3em * 2);
}
.mrhp-phone-card .mrhp-cta,
.mrhp-review-card .mrhp-cta,
.mrhp-news-card .mrhp-cta,
.mrhp-best-card .mrhp-cta,
.mrhp-recent-card .mrhp-cta{
  margin-top:auto;
}

/* Prices */
.mrhp-price, .mr-price, .pv2-price{
  font-weight:800;
  color: var(--mr-ink);
  font-size: var(--mr-fs-lg);
}
.mrhp-price .mrhp-currency{ color: var(--mr-muted); font-weight:600; margin-right:2px; }

/* Ratings */
.mrhp-rating, .pv2-rating{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--mr-brand-050);
  color: var(--mr-brand-600);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight:700;
  font-size: var(--mr-fs-xs);
}

/* ---------------- 8. Hero polish ---------------- */
.mrhp-hero{
  border-radius: var(--mr-r-xl);
  overflow:hidden;
  padding: clamp(var(--mr-s-6), 4vw, var(--mr-s-9));
  background: linear-gradient(135deg,#0f1420 0%, #1c2233 60%, #2a3350 100%);
  color:#fff;
}
.mrhp-hero h1{ color:#fff; }
.mrhp-hero p{ color: rgba(255,255,255,.78); }
.mrhp-hero .mrhp-hero-grid{
  display:grid; gap: clamp(var(--mr-s-5), 3vw, var(--mr-s-7));
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  align-items:stretch;
}
.mrhp-hero .mrhp-hero-media,
.mrhp-hero .mrhp-hero-card{
  min-height: 100%;
  display:flex; flex-direction:column; justify-content:center;
}
.mrhp-hero .mrhp-hero-media img{
  width:100%; height:100%; object-fit:cover;
  border-radius: var(--mr-r-lg);
}
@media (max-width: 900px){
  .mrhp-hero .mrhp-hero-grid{ grid-template-columns: 1fr; }
}

/* ---------------- 9. Brand cards ---------------- */
.mrhp-brand-card{
  align-items:center; text-align:center; padding: var(--mr-s-5);
}
.mrhp-brand-card .mrhp-brand-logo{
  width:64px; height:64px; border-radius: 50%;
  background: var(--mr-surface-2);
  border:1px solid var(--mr-line);
  display:grid; place-items:center;
  margin-bottom: var(--mr-s-3);
  font-weight:800; color: var(--mr-ink);
}
.mrhp-brand-card .mrhp-brand-name{ font-weight:700; color: var(--mr-ink); }
.mrhp-brand-card .mrhp-brand-count{ color: var(--mr-muted); font-size: var(--mr-fs-xs); }

/* ---------------- 10. Sidebar redesign ---------------- */
.mr-sb .mr-card{
  margin-bottom: var(--mr-s-5);
  border-radius: var(--mr-r-lg);
  box-shadow: var(--mr-sh-1);
  border-color: var(--mr-line);
}
.mr-sb .mr-card-title{
  font-size: var(--mr-fs-sm);
  text-transform: uppercase;
  letter-spacing:.1em;
  color: var(--mr-ink-2);
  padding: 14px 16px;
  border-bottom: 1px solid var(--mr-line-2);
  background: linear-gradient(180deg,#fafbfd 0%,#f4f6fa 100%);
  font-weight:800;
}
.mr-sb .mr-card-body{ padding: var(--mr-s-4) var(--mr-s-4) var(--mr-s-5); }

.mr-brand-cloud, .mr-trend-cloud{
  display:flex; flex-wrap:wrap; gap:6px;
}
.mr-brand-chip, .mr-trend-cloud a{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius: 999px;
  background: var(--mr-surface-2);
  color: var(--mr-ink-2);
  font-size: var(--mr-fs-xs);
  font-weight:600;
  border:1px solid var(--mr-line);
  text-decoration:none;
  transition: all var(--mr-dur) var(--mr-ease);
}
.mr-brand-chip:hover, .mr-trend-cloud a:hover{
  background: var(--mr-brand);
  color:#fff; border-color: var(--mr-brand);
}

.mr-hot-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--mr-s-3); }
.mr-hot-list li{ display:flex; gap: var(--mr-s-3); align-items:flex-start; }
.mr-hot-num{
  flex:0 0 24px; height:24px; border-radius:6px;
  background: var(--mr-brand-050); color: var(--mr-brand-600);
  display:grid; place-items:center;
  font-weight:800; font-size: var(--mr-fs-xs);
}
.mr-hot-list a{ color: var(--mr-ink); font-weight:600; font-size: var(--mr-fs-sm); line-height:1.35; text-decoration:none; }
.mr-hot-list a:hover{ color: var(--mr-brand); }

.mr-budget-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.mr-budget-list a{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius: var(--mr-r-sm);
  background: var(--mr-surface-2); text-decoration:none;
  transition: all var(--mr-dur) var(--mr-ease);
}
.mr-budget-list a:hover{ background: var(--mr-brand-050); }
.mr-budget-name{ color: var(--mr-ink); font-weight:600; font-size: var(--mr-fs-sm); }
.mr-budget-tag{ color: var(--mr-brand-600); font-size: var(--mr-fs-xs); font-weight:700; }

.mr-finder-form{ display:flex; flex-direction:column; gap: var(--mr-s-3); }
.mr-finder-form label{
  display:flex; flex-direction:column; gap:4px;
  font-size: var(--mr-fs-xs); font-weight:700; color: var(--mr-muted);
  text-transform: uppercase; letter-spacing:.08em;
}
.mr-finder-form select{
  padding:10px 12px; border-radius: var(--mr-r-sm);
  border:1px solid var(--mr-line); background:#fff;
  font-size: var(--mr-fs-sm); color: var(--mr-ink);
}
.mr-finder-form select:hover{ border-color: var(--mr-brand); }

/* Sticky where useful (desktop only) */
@media (min-width: 1100px){
  .mr-sb{ position: sticky; top: 90px; align-self: flex-start; }
}

/* ---------------- 11. Footer polish ---------------- */
.mr-footer{
  background: linear-gradient(180deg,#0f1420 0%, #0a0e18 100%);
  color: #cfd4de;
  margin-top: var(--mr-s-10);
}
.mr-footer .container{ padding-top: var(--mr-s-9); padding-bottom: var(--mr-s-6); }
.mr-footer .cols{
  display:grid; gap: var(--mr-s-7);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
.mr-footer h4{
  color:#fff; font-size: var(--mr-fs-xs);
  text-transform: uppercase; letter-spacing:.14em;
  margin: 0 0 var(--mr-s-4);
}
.mr-footer .mr-menu{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.mr-footer .mr-menu a{
  color: rgba(255,255,255,.72);
  font-size: var(--mr-fs-sm);
  text-decoration:none;
  transition: color var(--mr-dur) var(--mr-ease);
}
.mr-footer .mr-menu a:hover{ color: var(--mr-brand); }
.mr-footer .mr-footer-brand{
  font-weight:900; font-size: var(--mr-fs-xl); color:#fff; text-decoration:none;
}
.mr-footer .mr-footer-brand span{ color: var(--mr-brand); }
.mr-footer .bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top: var(--mr-s-7);
  padding-top: var(--mr-s-4);
  font-size: var(--mr-fs-xs); color: rgba(255,255,255,.5);
}
@media (max-width: 900px){
  .mr-footer .cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .mr-footer .cols{ grid-template-columns: 1fr; }
}

/* ---------------- 12. Phone page polish ---------------- */
.pv2-wrap{ padding-top: var(--mr-s-5); }
.pv2-card{
  padding: clamp(var(--mr-s-5), 2.4vw, var(--mr-s-7));
  margin-bottom: var(--mr-s-5);
}
.pv2-h2{
  font-size: var(--mr-fs-xl);
  font-weight:800;
  margin: 0 0 var(--mr-s-5);
  padding-bottom: var(--mr-s-3);
  border-bottom: 1px solid var(--mr-line-2);
}
.pv2-crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size: var(--mr-fs-xs);
  color: var(--mr-muted);
  margin: var(--mr-s-4) 0 var(--mr-s-5);
}
.pv2-crumb a{ color: var(--mr-muted); text-decoration:none; }
.pv2-crumb a:hover{ color: var(--mr-brand); }
.pv2-crumb .sep{ opacity:.5; }

/* ---------------- 13. Utility polish ---------------- */
img{ max-width:100%; height:auto; }

::selection{ background: var(--mr-brand); color:#fff; }

/* ---------------- 14. Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
  .mrhp-phone-card:hover, .mr-post:hover, .mrhp-card:hover{ transform:none; }
}

/* ---------------- 15. Touch targets ---------------- */
@media (max-width: 700px){
  .mr-btn, .mrhp-btn, .pv2-btn, button.mr-finder-submit{ min-height:44px; padding:12px 18px; }
  .mr-brand-chip, .mr-trend-cloud a{ padding:8px 12px; }
}

/* ---------------- 16. v8.3.1 — Uniform phone image footprint ----------------
   Every phone tile is a square with the phone contained at ~88% of the box,
   so all phones appear visually the same size regardless of PNG dimensions. */
.mr-thumb,
.mrhp-phone-card .mrhp-thumb,
.mrhp-best-card .mrhp-thumb,
.mrhp-recent-card .mrhp-thumb,
.mrhp-review-card .mrhp-thumb,
.mrhp-news-card .mrhp-thumb,
.mrhp-guide-card .mrhp-thumb,
.mr-post > a:first-child{
  background: #fff;
  padding: 6%;
  box-sizing: border-box;
}
.mr-thumb > img,
.mrhp-thumb > img,
.mr-post > a:first-child img{
  object-fit: contain !important;
  object-position: center;
}