/*
Theme Name: RMIPayy Elementor
Theme URI: https://www.rmipayments.com
Author: RMI IMPEX Pvt Ltd
Description: Elementor-friendly enterprise fintech WordPress theme for RMIPayy. Includes PayPal-inspired colors, M2P-style mega navigation structure, seeded page content, responsive layouts, SEO-ready markup, and full-width Elementor editing support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: rmipayy-elementor
*/

:root {
  --rmi-primary: #003087;
  --rmi-secondary: #0070e0;
  --rmi-accent: #009cff;
  --rmi-navy: #0a0f1c;
  --rmi-ink: #111827;
  --rmi-muted: #64748b;
  --rmi-soft: #f5f7fa;
  --rmi-white: #ffffff;
  --rmi-border: rgba(0, 48, 135, 0.12);
  --rmi-shadow: 0 24px 70px rgba(10, 15, 28, 0.12);
  --rmi-glow: 0 24px 90px rgba(0, 112, 224, 0.24);
  --rmi-radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rmi-white);
  color: var(--rmi-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
body.rmi-dark {
  background: var(--rmi-navy);
  color: #f8fafc;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

.rmi-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.rmi-site-header {
  position: sticky;
  top: 0;
  z-index: 99;
  border-bottom: 1px solid var(--rmi-border);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}
body.rmi-dark .rmi-site-header { background: rgba(10,15,28,.88); border-color: rgba(255,255,255,.12); }
.rmi-header-row { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.rmi-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; color: var(--rmi-primary); }
.rmi-brand img { width: 170px; height: 54px; object-fit: contain; }
.rmi-brand span { color: var(--rmi-primary); letter-spacing: 0; }
body.rmi-dark .rmi-brand span { color: #fff; }

.rmi-main-nav { display: flex; align-items: center; gap: 4px; }
.rmi-nav-item { position: relative; }
.rmi-nav-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-radius: 999px;
  padding: 0 14px;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}
body.rmi-dark .rmi-nav-link { color: #e2e8f0; }
.rmi-nav-link:hover { background: rgba(0,112,224,.1); color: var(--rmi-primary); }
.rmi-mega {
  position: absolute;
  left: 50%;
  top: 54px;
  display: grid;
  width: min(920px, calc(100vw - 40px));
  transform: translateX(-50%);
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  border: 1px solid var(--rmi-border);
  border-radius: 28px;
  background: #fff;
  padding: 22px;
  box-shadow: var(--rmi-shadow);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.rmi-nav-item:hover .rmi-mega, .rmi-nav-item:focus-within .rmi-mega { opacity: 1; pointer-events: auto; }
body.rmi-dark .rmi-mega { background: #0d1628; border-color: rgba(255,255,255,.12); }
.rmi-mega-card { border-radius: 22px; background: var(--rmi-soft); padding: 18px; }
body.rmi-dark .rmi-mega-card { background: rgba(255,255,255,.06); }
.rmi-mega-card strong { display: block; margin-bottom: 10px; color: var(--rmi-primary); }
body.rmi-dark .rmi-mega-card strong { color: var(--rmi-accent); }
.rmi-mega-card a { display: block; padding: 7px 0; color: var(--rmi-muted); font-size: 14px; font-weight: 700; }
body.rmi-dark .rmi-mega-card a { color: #cbd5e1; }
.rmi-header-actions { display: flex; align-items: center; gap: 9px; }
.rmi-icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0,112,224,.09);
  color: var(--rmi-primary);
  cursor: pointer;
}
.rmi-menu-button { display: none; }
.rmi-button,
.elementor-widget-button .elementor-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--rmi-primary), var(--rmi-secondary));
  color: #fff !important;
  font-weight: 900;
  box-shadow: var(--rmi-glow);
  transition: .25s ease;
}
.rmi-button:hover,
.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); }
.rmi-button.rmi-secondary { background: #fff; color: var(--rmi-primary) !important; border: 1px solid var(--rmi-border); box-shadow: var(--rmi-shadow); }

.rmi-section { padding: 96px 0; }
.rmi-section-soft { background: var(--rmi-soft); }
.rmi-section-dark {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 18% 20%, rgba(0,156,255,.25), transparent 30%), radial-gradient(circle at 80% 18%, rgba(0,112,224,.22), transparent 28%), linear-gradient(135deg, #0a0f1c, #071a36 55%, #0a0f1c);
  color: #fff;
}
.rmi-section-dark:before, .rmi-network-bg:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .36;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.rmi-kicker {
  margin: 0 0 14px;
  color: var(--rmi-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.rmi-h1, .rmi-h2, .elementor-heading-title {
  letter-spacing: 0 !important;
}
.rmi-h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 82px);
  line-height: 1.02;
  font-weight: 900;
}
.rmi-h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 900;
}
.rmi-lead {
  color: var(--rmi-muted);
  font-size: 18px;
  line-height: 1.8;
}
.rmi-section-dark .rmi-lead { color: #cbd5e1; }
.rmi-grid { display: grid; gap: 20px; }
.rmi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rmi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rmi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rmi-card,
.elementor-widget-rmi_card,
.rmi-page-content .elementor-widget-container {
  border-radius: var(--rmi-radius);
}
.rmi-card {
  border: 1px solid var(--rmi-border);
  background: #fff;
  padding: 28px;
  box-shadow: var(--rmi-shadow);
  transition: .25s ease;
}
.rmi-card:hover { transform: translateY(-4px); border-color: rgba(0,112,224,.35); }
body.rmi-dark .rmi-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.rmi-card h3 { margin: 18px 0 10px; font-size: 22px; line-height: 1.2; }
.rmi-card p, .rmi-card li { color: var(--rmi-muted); line-height: 1.7; }
body.rmi-dark .rmi-card p, body.rmi-dark .rmi-card li { color: #cbd5e1; }
.rmi-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 18px;
  background: rgba(0,112,224,.1);
  color: var(--rmi-secondary);
  font-weight: 900;
}
.rmi-hero-grid { position: relative; display: grid; min-height: calc(100vh - 82px); grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; padding: 80px 0; }
.rmi-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.rmi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.rmi-stat-pill { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.08); padding: 13px; color: #e2e8f0; font-size: 13px; font-weight: 800; }
.rmi-visual {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background: rgba(255,255,255,.07);
  box-shadow: var(--rmi-glow);
}
.rmi-float {
  position: absolute;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.12);
  padding: 18px;
  backdrop-filter: blur(18px);
  animation: rmi-float 3s ease-in-out infinite alternate;
}
.rmi-float strong { display: block; font-size: 30px; }
.rmi-float p { margin: 0 0 8px; color: #cbd5e1; }
.rmi-float.one { left: 24px; top: 30px; width: 235px; }
.rmi-float.two { right: 24px; bottom: 30px; width: 270px; animation-delay: .4s; }
.rmi-float.three { right: 40px; top: 92px; width: 210px; animation-delay: .8s; }
@keyframes rmi-float { to { transform: translateY(-14px); } }

.rmi-map {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: 34px;
  background: radial-gradient(circle at 40% 44%, rgba(0,156,255,.25), transparent 34%), linear-gradient(135deg, #0a0f1c, #071a36);
  box-shadow: var(--rmi-glow);
}
.rmi-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.rmi-route path { fill: none; stroke: var(--rmi-accent); stroke-width: .32; stroke-dasharray: 8 12; animation: rmi-route 8s linear infinite; }
@keyframes rmi-route { to { stroke-dashoffset: -160; } }
.rmi-dot { position: absolute; width: 12px; height: 12px; border-radius: 999px; background: var(--rmi-accent); box-shadow: 0 0 0 9px rgba(0,156,255,.12), 0 0 24px rgba(0,156,255,.7); }
.rmi-dot span { position: absolute; top: 22px; left: -20px; white-space: nowrap; border-radius: 999px; background: rgba(255,255,255,.1); padding: 7px 10px; color: #fff; font-size: 12px; font-weight: 900; }
.rmi-footer { background: var(--rmi-navy); color: #fff; padding: 64px 0 24px; }
.rmi-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 42px; }
.rmi-footer img { width: 168px; height: 54px; object-fit: contain; }
.rmi-footer p, .rmi-footer a { color: #cbd5e1; line-height: 1.7; }
.rmi-footer a { display: block; margin: 8px 0; }
.rmi-copyright { margin-top: 42px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; text-align: center; color: #94a3b8; }
.rmi-whatsapp { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 999px; background: #25d366; color: #fff; font-weight: 900; box-shadow: var(--rmi-shadow); }
.rmi-search-modal { position: fixed; inset: 0; z-index: 120; display: none; background: rgba(10,15,28,.72); padding: 80px 20px; backdrop-filter: blur(14px); }
.rmi-search-modal.open { display: block; }
.rmi-search-box { max-width: 720px; margin: 0 auto; border-radius: 30px; background: #fff; padding: 22px; box-shadow: var(--rmi-shadow); }
.rmi-search-box input { width: 100%; border: 0; border-bottom: 1px solid var(--rmi-border); padding: 14px 0; outline: none; font-size: 20px; }
.rmi-search-result { display: block; border-radius: 16px; padding: 14px; color: var(--rmi-muted); font-weight: 800; }
.rmi-search-result:hover { background: var(--rmi-soft); color: var(--rmi-primary); }
.rmi-cookie { position: fixed; left: 20px; bottom: 20px; z-index: 90; max-width: 430px; border: 1px solid var(--rmi-border); border-radius: 24px; background: #fff; padding: 20px; box-shadow: var(--rmi-shadow); }
.rmi-cookie p { color: var(--rmi-muted); line-height: 1.6; }
.rmi-page-content > .elementor { overflow: hidden; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1200px; }

@media (max-width: 1020px) {
  .rmi-main-nav, .rmi-header-actions .rmi-button { display: none; }
  .rmi-main-nav.open {
    position: absolute;
    top: 86px;
    left: 20px;
    right: 20px;
    display: grid;
    border: 1px solid var(--rmi-border);
    border-radius: 24px;
    background: #fff;
    padding: 14px;
    box-shadow: var(--rmi-shadow);
  }
  body.rmi-dark .rmi-main-nav.open { background: #0d1628; border-color: rgba(255,255,255,.12); }
  .rmi-menu-button { display: inline-grid; }
  .rmi-mega { position: static; width: 100%; transform: none; grid-template-columns: 1fr; opacity: 1; pointer-events: auto; margin: 8px 0 14px; box-shadow: none; }
  .rmi-hero-grid, .rmi-grid-2, .rmi-footer-grid { grid-template-columns: 1fr; }
  .rmi-grid-3, .rmi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .rmi-container { width: min(100% - 28px, 1200px); }
  .rmi-brand img { width: 145px; }
  .rmi-brand span { display: none; }
  .rmi-section { padding: 68px 0; }
  .rmi-hero-grid { padding: 54px 0; }
  .rmi-grid-3, .rmi-grid-4, .rmi-stats { grid-template-columns: 1fr; }
  .rmi-visual { min-height: 410px; }
  .rmi-float { position: relative; inset: auto !important; width: auto !important; margin: 16px; }
}
