/* ==========================================================================
   MobileRanks Theme v6.0.0 — Unified Premium Design System
   Global overlay. Loads LAST so it wins cascade over all previous v4.x/v5.x
   stylesheets. Applies one visual language to every page, widget, card,
   table, button, sidebar and heading site-wide.
   No template/business-logic changes — pure frontend polish.
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS -------------------------------------------- */
:root{
  /* Palette (from v6.0.0 master reference) */
  --mr6-primary:        #0A3A8A;  /* Primary Blue  — headings, links */
  --mr6-primary-700:    #082D6C;
  --mr6-primary-050:    #EEF3FB;  /* Tinted surface */
  --mr6-secondary:      #1976D2;  /* Secondary Blue — accents / active tab */
  --mr6-secondary-050:  #E7F1FB;
  --mr6-accent:         #FFB300;  /* Accent Orange — CTA */
  --mr6-accent-600:     #FF9F00;
  --mr6-success:        #16A34A;
  --mr6-bg:             #F8FAFC;  /* Light background */
  --mr6-surface:        #FFFFFF;
  --mr6-surface-alt:    #F8FAFC;
  --mr6-text:           #111827;  /* Primary text */
  --mr6-text-muted:     #6B7280;  /* Secondary text */
  --mr6-border:         #E5E7EB;  /* Divider / border */
  --mr6-border-strong:  #D1D5DB;

  /* Typography */
  --mr6-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Radius */
  --mr6-r-sm: 8px;
  --mr6-r-md: 12px;
  --mr6-r-lg: 16px;
  --mr6-r-pill: 999px;

  /* Shadows */
  --mr6-shadow-sm: 0 1px 2px rgba(17,24,39,.05);
  --mr6-shadow:    0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --mr6-shadow-md: 0 4px 6px -1px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.05);
  --mr6-shadow-lg: 0 10px 15px -3px rgba(17,24,39,.08), 0 4px 6px -4px rgba(17,24,39,.05);

  /* Spacing */
  --mr6-gap: 16px;
  --mr6-col-gap: 24px;
  --mr6-section-pad: 24px;
  --mr6-card-pad: 20px;
  --mr6-widget-pad: 16px;
}

/* ---------- 2. GLOBAL BASE ---------------------------------------------- */
html{ scroll-behavior:smooth; }
body{
  font-family: var(--mr6-font) !important;
  background: var(--mr6-bg) !important;
  color: var(--mr6-text) !important;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color: var(--mr6-secondary); text-decoration:none; transition:color .15s ease; }
a:hover{ color: var(--mr6-primary); text-decoration:underline; }

/* Unified heading system (site-wide) */
h1,h2,h3,h4,h5,h6,
.mr h1,.mr h2,.mr h3,.mr h4,
.mr-card h2,.mr-card h3,.mr-card h4,
.widget-title,.widgettitle,
.mr-sb .mr-card h3,
.pv2-section > h2, .pv2-section > h3{
  font-family: var(--mr6-font) !important;
  font-weight:700 !important;
  color: var(--mr6-primary) !important;
  letter-spacing:-0.01em;
  line-height:1.25;
  margin:0 0 12px;
}
h1{ font-size: clamp(24px, 2.2vw, 30px); font-weight:800 !important; letter-spacing:-0.02em; }
h2{ font-size: 22px; }
h3{ font-size: 18px; }
h4{ font-size: 16px; }

/* Consistent section-heading underline for widget/card titles */
.mr-sb .mr-card h3,
.widget-title,
.widgettitle,
.pv2-section > h2:first-child,
.mr-card > h2:first-child,
.mr-card > h3:first-child{
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--mr6-border);
  position:relative;
}
.mr-sb .mr-card h3::after,
.widget-title::after,
.pv2-section > h2:first-child::after,
.mr-card > h2:first-child::after,
.mr-card > h3:first-child::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  width:40px; height:2px;
  background: var(--mr6-secondary);
  border-radius:2px;
}

/* ---------- 3. HEADER --------------------------------------------------- */
.mr-header, .site-header, header.mr-header{
  background: var(--mr6-primary) !important;
  color:#fff !important;
  box-shadow: var(--mr6-shadow-md);
}
.mr-header a, .mr-header .mr-brand, .mr-header nav a{ color:#fff !important; }
.mr-header .mr-brand strong{ color:#fff !important; }
.mr-header .mr-brand em{ color:rgba(255,255,255,.75) !important; font-style:normal; font-size:12px; }
.mr-menu-inline{
  display:flex !important;
  justify-content:center !important;
  gap:28px !important;
  flex:1 1 auto;
}
.mr-menu-inline a{
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.03em;
  opacity:.92;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition: all .15s ease;
}
.mr-menu-inline a:hover,
.mr-menu-inline a.active{ opacity:1; border-bottom-color: var(--mr6-accent); text-decoration:none; }

/* Header currency switcher pill */
.mr-cur-switch{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius: var(--mr6-r-pill);
  padding:3px;
  gap:2px;
}
.mr-cur-switch button,
.mr-cur-switch [data-mr-currency-set]{
  border:0; background:transparent; color:#fff;
  font-weight:700; font-size:12px;
  padding:5px 14px; border-radius: var(--mr6-r-pill);
  cursor:pointer; transition: all .15s ease;
}
.mr-cur-switch button.is-active,
.mr-cur-switch [data-mr-currency-set].is-active,
html[data-mr-currency="usd"] .mr-cur-switch [data-mr-currency-set="usd"],
html[data-mr-currency="inr"] .mr-cur-switch [data-mr-currency-set="inr"]{
  background:#fff; color: var(--mr6-primary);
  box-shadow: var(--mr6-shadow-sm);
}
/* Phone-page (light) variant of currency switcher */
.pv2-hero .mr-cur-switch,
.pv2-price .mr-cur-switch{
  background: var(--mr6-primary-050);
  border-color: var(--mr6-border);
}
.pv2-hero .mr-cur-switch button,
.pv2-price .mr-cur-switch button{ color: var(--mr6-primary); }

/* ---------- 4. CARDS / SURFACES ----------------------------------------- */
.mr-card, .card, .widget, .mr-sb .mr-card, .pv2-card{
  background: var(--mr6-surface) !important;
  border:1px solid var(--mr6-border) !important;
  border-radius: var(--mr6-r-md) !important;
  box-shadow: var(--mr6-shadow-sm) !important;
  padding: var(--mr6-card-pad) !important;
}
.mr-sb .mr-card + .mr-card{ margin-top:16px; }

/* ---------- 5. BUTTONS -------------------------------------------------- */
.mr-btn, .button, button.mr-btn, a.mr-btn,
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--mr6-font);
  font-weight:600; font-size:14px;
  padding:10px 18px;
  border-radius: var(--mr6-r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition: all .15s ease;
  line-height:1.2;
}
.mr-btn.primary, .mr-btn-primary, .mr-cta, .btn-primary,
a.mr-btn.primary{
  background: var(--mr6-accent);
  color:#1a1a1a !important;
  box-shadow: var(--mr6-shadow-sm);
}
.mr-btn.primary:hover, .mr-btn-primary:hover, .mr-cta:hover, .btn-primary:hover{
  background: var(--mr6-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--mr6-shadow-md);
  text-decoration:none;
}
.mr-btn.secondary, .mr-btn-secondary{
  background: var(--mr6-surface);
  color: var(--mr6-primary) !important;
  border-color: var(--mr6-border-strong);
}
.mr-btn.secondary:hover, .mr-btn-secondary:hover{
  background: var(--mr6-primary-050);
  border-color: var(--mr6-secondary);
  text-decoration:none;
}

/* Big check-price CTA on phone card */
.pv2-cta, .pv2-price .mr-btn.primary, .pv2-price a.mr-btn{
  width:100%;
  background: var(--mr6-accent) !important;
  color:#1a1a1a !important;
  padding:14px 20px;
  font-size:15px; font-weight:700;
}

/* ---------- 6. TABLES / SPEC LISTS -------------------------------------- */
.mr-table, table.mr-specs, .pv2-specs, .pv2-table,
.mr-card table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}
.mr-table th, .mr-table td,
.pv2-specs td, .pv2-table td,
.mr-card table th, .mr-card table td{
  padding:11px 14px;
  border-bottom:1px solid var(--mr6-border);
  text-align:left; vertical-align:top;
}
.mr-table tr:nth-child(even) td,
.pv2-specs tr:nth-child(even) td{ background: var(--mr6-surface-alt); }
.mr-table th,
.pv2-specs td:first-child, .pv2-table td:first-child{
  color: var(--mr6-text-muted);
  font-weight:600;
  width:35%;
}
.pv2-specs td:last-child, .pv2-table td:last-child{
  color: var(--mr6-text); font-weight:500;
}

/* Rows like the "6.8" | Tensor G5 | 16GB RAM…" pill row */
.pv2-quickspecs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:8px; margin:14px 0;
}
.pv2-quickspecs > *{
  background: var(--mr6-surface-alt);
  border:1px solid var(--mr6-border);
  border-radius: var(--mr6-r-sm);
  padding:10px 12px;
  font-size:13px;
}

/* ---------- 7. STICKY TABS (phone page) --------------------------------- */
.pv2-tabs, .mr-tabs{
  background: var(--mr6-surface);
  border:1px solid var(--mr6-border);
  border-radius: var(--mr6-r-md);
  padding:6px;
  box-shadow: var(--mr6-shadow-sm);
  display:flex; flex-wrap:wrap; gap:4px;
  position:sticky; top:0; z-index:20;
}
.pv2-tab, .mr-tab{
  padding:9px 16px;
  border-radius: var(--mr6-r-sm);
  font-size:14px; font-weight:600;
  color: var(--mr6-text-muted);
  cursor:pointer;
  border:0; background:transparent;
  transition: all .15s ease;
}
.pv2-tab:hover, .mr-tab:hover{ color: var(--mr6-primary); background: var(--mr6-primary-050); }
.pv2-tab.is-active, .mr-tab.is-active, .pv2-tab[aria-selected="true"]{
  background: var(--mr6-secondary);
  color:#fff !important;
  box-shadow: var(--mr6-shadow-sm);
}

/* ---------- 8. SIDEBAR WIDGETS ----------------------------------------- */
.mr-sb{ display:flex; flex-direction:column; gap:16px; }
.mr-sb .mr-card,
.widget{
  padding: var(--mr6-widget-pad) !important;
}
.mr-sb .mr-card h3, .widget-title, .widgettitle{
  font-size:15px !important;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Quick Links list */
.mr-sb ul, .widget ul{ list-style:none; padding:0; margin:0; }
.mr-sb ul li, .widget ul li{
  padding:8px 0;
  border-bottom:1px solid var(--mr6-border);
  font-size:14px;
}
.mr-sb ul li:last-child, .widget ul li:last-child{ border-bottom:0; }
.mr-sb ul li a, .widget ul li a{
  color: var(--mr6-secondary);
  font-weight:500;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.mr-sb ul li a:hover{ color: var(--mr6-primary); text-decoration:none; }

/* All Mobile Brands list */
.mr-brandlist li, .mr-brands li{
  display:flex; align-items:center; gap:10px;
  padding:10px 8px;
  border-radius: var(--mr6-r-sm);
  border-bottom:1px solid var(--mr6-border);
  transition:background .15s ease;
}
.mr-brandlist li:hover, .mr-brands li:hover{ background: var(--mr6-primary-050); }
.mr-brandlist li img, .mr-brands li img{
  width:24px; height:24px; object-fit:contain; flex-shrink:0;
}
.mr-brandlist li a, .mr-brands li a{
  flex:1; color: var(--mr6-text); font-weight:600; font-size:14px;
}
.mr-brandlist li .count, .mr-brands li .count,
.mr-brandlist li span.mr-count{
  color: var(--mr6-text-muted); font-size:13px; font-weight:500;
}

/* Shop by Budget chips */
.mr-budget, .mr-budget-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.mr-budget a, .mr-budget-grid a, .mr-chip{
  display:block; text-align:center;
  padding:11px 10px;
  border:1px solid var(--mr6-border-strong);
  border-radius: var(--mr6-r-sm);
  background: var(--mr6-surface);
  color: var(--mr6-primary) !important;
  font-weight:600; font-size:13px;
  transition: all .15s ease;
}
.mr-budget a:hover, .mr-budget-grid a:hover, .mr-chip:hover{
  background: var(--mr6-secondary);
  color:#fff !important;
  border-color: var(--mr6-secondary);
  transform: translateY(-1px);
  box-shadow: var(--mr6-shadow-sm);
  text-decoration:none;
}

/* Popular Phones list */
.mr-poplist li, .mr-popular li{
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--mr6-border);
}
.mr-poplist li:last-child, .mr-popular li:last-child{ border-bottom:0; }
.mr-poplist li img, .mr-popular li img{
  width:44px; height:44px; object-fit:contain;
  border:1px solid var(--mr6-border); border-radius: var(--mr6-r-sm);
  padding:2px; background:#fff;
}
.mr-poplist .title, .mr-popular .title{ font-weight:600; font-size:14px; color: var(--mr6-text); display:block; }
.mr-poplist .price, .mr-popular .price{ color: var(--mr6-secondary); font-weight:600; font-size:13px; }

/* ---------- 9. PHONE PAGE PRICE CARD ------------------------------------ */
.pv2-price, .mr-price-card{
  background: var(--mr6-surface);
  border:1px solid var(--mr6-border);
  border-radius: var(--mr6-r-md);
  padding:20px;
  box-shadow: var(--mr6-shadow-sm);
}
.pv2-price .mr-price-label, .mr-price-card .label{
  font-size:13px; color: var(--mr6-text-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; margin:0 0 4px;
}
.pv2-price .mr-money, .mr-price-card .amount{
  font-size:32px; font-weight:800; color: var(--mr6-primary); line-height:1.1;
  letter-spacing:-0.02em;
}
.pv2-price .mr-updated, .mr-price-card .updated{
  font-size:12px; color: var(--mr6-text-muted); margin-top:8px;
}

/* ---------- 10. HERO / BREADCRUMB --------------------------------------- */
.mr-breadcrumb, .breadcrumb, .mr-crumbs{
  font-size:13px; color: var(--mr6-text-muted);
  padding:12px 0; display:flex; gap:6px; flex-wrap:wrap;
}
.mr-breadcrumb a, .breadcrumb a, .mr-crumbs a{ color: var(--mr6-secondary); }
.mr-breadcrumb a:hover, .breadcrumb a:hover{ color: var(--mr6-primary); text-decoration:none; }
.mr-breadcrumb .sep, .breadcrumb .sep{ color: var(--mr6-border-strong); }

/* AI Summary highlight box */
.pv2-ai, .mr-ai-summary{
  background: var(--mr6-secondary-050);
  border:1px solid #cfe1f7;
  border-left:3px solid var(--mr6-secondary);
  border-radius: var(--mr6-r-md);
  padding:16px 18px;
}
.pv2-ai h3, .mr-ai-summary h3{
  color: var(--mr6-secondary) !important;
  font-size:15px !important;
  text-transform:uppercase; letter-spacing:.04em;
  border-bottom:0 !important; margin-bottom:8px !important;
}
.pv2-ai h3::after, .mr-ai-summary h3::after{ display:none !important; }

/* Editor's Verdict / rating strip */
.pv2-verdict, .mr-verdict{
  background:#F0FDF4;
  border:1px solid #BBF7D0;
  border-left:3px solid var(--mr6-success);
  border-radius: var(--mr6-r-md);
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.pv2-verdict .score, .mr-verdict .score{
  background: var(--mr6-success); color:#fff;
  padding:4px 10px; border-radius: var(--mr6-r-pill);
  font-weight:700; font-size:13px;
}

/* ---------- 11. FOOTER -------------------------------------------------- */
.site-footer, footer.mr-footer, .mr-footer{
  background:#0B1220 !important;
  color:#CBD5E1 !important;
  padding:40px 0 24px !important;
  margin-top:48px;
}
.mr-footer h3, .mr-footer h4, .site-footer h3, .site-footer h4{
  color:#fff !important;
  font-size:14px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:14px;
  border-bottom:0 !important;
}
.mr-footer h3::after, .site-footer h3::after, .mr-footer h4::after{ display:none !important; }
.mr-footer a, .site-footer a{ color:#CBD5E1 !important; font-size:14px; }
.mr-footer a:hover, .site-footer a:hover{ color:#fff !important; text-decoration:none; }
.mr-footer ul, .site-footer ul{ list-style:none; padding:0; margin:0; }
.mr-footer ul li, .site-footer ul li{ padding:5px 0; border:0 !important; }
.mr-footer .mr-brand strong{ color:#fff !important; font-size:20px; }
.mr-footer-bottom, .site-footer .mr-copy{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:28px; padding-top:18px;
  font-size:13px; color:#94A3B8;
  text-align:center;
}

/* ---------- 12. FORMS --------------------------------------------------- */
input[type="text"], input[type="search"], input[type="email"],
input[type="number"], input[type="url"], select, textarea,
.mr-input, .search-field{
  width:100%;
  font-family: var(--mr6-font);
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--mr6-border-strong);
  border-radius: var(--mr6-r-sm);
  background:#fff;
  color: var(--mr6-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
select:focus, textarea:focus{
  outline:0;
  border-color: var(--mr6-secondary);
  box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}
label{ font-size:13px; font-weight:600; color: var(--mr6-text); }

/* ---------- 13. LAYOUT / GRID ------------------------------------------- */
.mr-container, .container, .site-container{
  max-width:1280px; margin:0 auto; padding:0 20px;
}
.mr-two-col, .pv2-layout, .mr-content-sidebar{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--mr6-col-gap);
  align-items:start;
}
@media (max-width: 1024px){
  .mr-two-col, .pv2-layout, .mr-content-sidebar{ grid-template-columns:1fr; }
}
@media (max-width: 768px){
  h1{ font-size:22px; }
  h2{ font-size:19px; }
  .mr-menu-inline{ display:none !important; }
  .pv2-tabs{ overflow-x:auto; flex-wrap:nowrap; }
  .pv2-tab{ white-space:nowrap; }
  .mr-budget, .mr-budget-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- 14. HOMEPAGE CARDS / PHONE TILES ---------------------------- */
.mr-phone-card, .mr-tile, .mrh4-card{
  background: var(--mr6-surface);
  border:1px solid var(--mr6-border);
  border-radius: var(--mr6-r-md);
  overflow:hidden;
  transition: all .18s ease;
  box-shadow: var(--mr6-shadow-sm);
}
.mr-phone-card:hover, .mr-tile:hover, .mrh4-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--mr6-shadow-lg);
  border-color: var(--mr6-secondary);
}
.mr-phone-card img, .mr-tile img, .mrh4-card img{
  width:100%; height:auto; display:block; background:#fff;
}
.mr-phone-card .title, .mr-tile .title, .mrh4-card .title,
.mr-phone-card h3, .mr-tile h3, .mrh4-card h3{
  font-size:15px !important;
  padding:10px 14px 4px;
  margin:0 !important;
  border:0 !important;
}
.mr-phone-card h3::after, .mr-tile h3::after, .mrh4-card h3::after{ display:none !important; }
.mr-phone-card .price, .mr-tile .price, .mrh4-card .price{
  padding:0 14px 14px;
  font-weight:700; color: var(--mr6-secondary); font-size:15px;
}

/* ---------- 15. BADGES / PILLS ----------------------------------------- */
.mr-badge, .badge, .mr-pill{
  display:inline-block;
  background: var(--mr6-primary-050);
  color: var(--mr6-primary);
  font-size:11px; font-weight:700;
  padding:3px 10px;
  border-radius: var(--mr6-r-pill);
  text-transform:uppercase; letter-spacing:.04em;
}
.mr-badge.success, .badge.success{ background:#DCFCE7; color:#166534; }
.mr-badge.accent,  .badge.accent { background:#FFF3D1; color:#8A5A00; }

/* ---------- 16. ICON CONSISTENCY ---------------------------------------- */
svg{ vertical-align:middle; }
.mr-icon, [data-mr-icon]{
  width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75;
}

/* ---------- 17. UTILITY MICRO-POLISH ------------------------------------ */
::selection{ background: var(--mr6-secondary); color:#fff; }
hr{ border:0; border-top:1px solid var(--mr6-border); margin:20px 0; }
img{ max-width:100%; height:auto; }