/* ===================================
    MPOWER TRAVEL & FOREX PVT. LTD.
    Demo style layer (based on the licensed Crafto
    theme stylesheet), recolored to the Mpower crest
    palette: black, charcoal, and white — no navy/gold.
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&display=swap');

:root {
    --base-color: #1A1A1A;
    --dark-gray: #0D0D0D;
    --medium-gray: #6E6E6E;
    --yellow: #1A1A1A;           /* kept var name for theme compatibility; used for CTA fills */
    --extra-medium-gray: #E2E2E2;
    --alt-font: 'Space Grotesk', sans-serif;
    --primary-font: 'Inter', sans-serif;
    --gold-light: #4A4A4A;       /* kept var name; used for secondary accents on dark bg */
    --silver: #C7C7C7;
    --up-green: #2E7D4F;
    --down-red: #B23A3A;
}
body { font-size: 17px; line-height: 30px; overflow-x: hidden; }
a:hover { color: var(--dark-gray); }
.mt-minus-12 { margin-top: -12%; }
.mt-minus-1 { margin-top: -1%; }
.bottom-minus-320px { bottom: -320px; }
.border-color-transparent-white-very-light { border-color: rgba(255, 255, 255, 0.18) !important; }
.border-color-transparent-dark-very-light { border-color: var(--extra-medium-gray) !important; }
.bg-gradient-deep-zuccini-green,
.bg-gradient-aztec-green { background-image: linear-gradient(to right bottom, #1F1F1F, #191919, #131313, #0D0D0D, #050505); }
.bg-gradient-tranquil-white { background-image: linear-gradient(to bottom, #ffffff, #fafafa, #f5f5f5, #f0f0f0, #ececec); }
.bg-yellow { background-color: var(--base-color); }
.bg-tranquil { background-color: #F7F7F7; }
.bg-gradient-dark-transparent { background: linear-gradient(to top, #0D0D0D 0%, transparent 100%); }

/* header */
.navbar .navbar-nav .nav-link { font-size: 18px; }
header .navbar-brand img { max-height: 46px; }
header .navbar-brand { padding: 14px 0; }
.icon-extra-medium { font-size: 22px; }
.medium-icon li, .small-icon li { margin: 0 3px; }

/* btn */
.btn { font-family: var(--primary-font); text-transform: none; letter-spacing: 0; }
.btn.btn-switch-text.btn-extra-large > span { padding: 15px 38px; font-size: 17px; }
.btn.btn-switch-text.btn-large > span { padding: 13px 32px; font-size: 15px; }
.btn.btn-switch-text.btn-medium > span { padding: 12px 30px; font-size: 14px; }
.btn.btn-base-color { color: #fff; background-color: var(--base-color); }
.btn.btn-base-color:hover, .btn.btn-box-shadow.btn-base-color:hover { background-color: #000; color: #fff; }

/* ---------- Mpower hero (adapted from the IDAT scale-circle hero) ---------- */
.mp-hero-section { min-height: 100vh; }
.mp-hero-sticky-wrap { height: 100vh; position: relative; }
.mp-hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mp-hero-circle-bg {
    position: absolute; inset: 0; overflow: hidden;
    -webkit-clip-path: circle(calc(var(--cs, 1) * 18%) at 50% 50%);
    clip-path: circle(calc(var(--cs, 1) * 18%) at 50% 50%);
}
.mp-hero-circle-bg img, .mp-hero-circle-bg video { width: 100%; height: 100%; object-fit: cover; }
.mp-hero-circle-bg::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(14,35,64,.35), rgba(14,35,64,.55) 55%, rgba(10,20,32,.92)); }
.mp-hero-content { position: relative; z-index: 3; text-align: center; padding: 0 20px; }
.mp-hero-crest { height: 70px; width: auto; margin: 0 auto; }
.mp-hero-counters { position: absolute; bottom: 60px; left: 0; right: 0; z-index: 3; }

/* ---------- currency flag chip ---------- */
.mp-flag { width: 26px; height: 19px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); flex-shrink: 0; }
.mp-flag-lg { width: 34px; height: 25px; }

/* ---------- currency select (custom dropdown, flags visible) ---------- */
.mp-currency-select { position: relative; }
.mp-currency-btn {
    display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--extra-medium-gray);
    border-radius: 8px; padding: 10px 14px; cursor:pointer; font-family: var(--primary-font); font-weight:600; color: var(--dark-gray);
    white-space:nowrap;
}
.mp-currency-btn:hover { border-color: var(--base-color); }
.mp-currency-menu {
    position:absolute; top:calc(100% + 8px); left:0; z-index:20; background:#fff; border-radius:10px;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,.25); border:1px solid var(--extra-medium-gray);
    width: 260px; max-height: 320px; overflow-y:auto; display:none; padding:8px;
}
.mp-currency-menu.open { display:block; }
.mp-currency-option { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; cursor:pointer; font-size:.92rem; }
.mp-currency-option:hover { background: #F2F2F2; }
.mp-currency-option .code { font-weight:700; color: var(--dark-gray); }
.mp-currency-option .name { color: var(--medium-gray); font-size:.82rem; }

/* ---------- converter card ---------- */
.mp-converter-card { background:#fff; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.3); padding: 34px; }
.mp-converter-row { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 0; margin-bottom: 24px; }
.mp-input-box { border:1.5px solid var(--extra-medium-gray); border-radius: 12px; padding: 18px 32px 16px; position:relative; background:#fff; transition: border-color .15s ease; }
.mp-input-box:focus-within { border-color: var(--base-color); }
.mp-input-box .mp-label { position:absolute; top:-10px; left:16px; background:#fff; padding:0 8px; font-size:.68rem; font-weight:700; color: var(--medium-gray); text-transform:uppercase; letter-spacing:.05em; }
.mp-input-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; min-width:0; }
.mp-input-row input, .mp-amount-display { border:none; outline:none; font-family: var(--alt-font); font-size:1.5rem; font-weight:700; color: var(--dark-gray); width:100%; min-width:0; background:transparent; overflow:hidden; text-overflow:ellipsis; }
.mp-amount-display { flex-shrink:1; white-space:nowrap; }
.mp-swap-btn {
    width:44px; height:44px; border-radius:50%; background: var(--dark-gray); color: #fff; border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; margin:0 -22px; position:relative; z-index:3;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); transition: transform .3s ease, background .2s ease; flex-shrink:0;
}
.mp-swap-btn:hover { background: var(--medium-gray); transform: rotate(180deg); }
@media (max-width:767px){
    .mp-converter-row { grid-template-columns: 1fr; gap:14px; }
    .mp-swap-btn { margin: -8px auto; }
    .mp-converter-card { padding: 22px 18px; }
}
.mp-result-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--extra-medium-gray); }
.mp-result-big { font-family: var(--alt-font); font-size:1.3rem; font-weight:700; color: var(--dark-gray); }
.mp-result-sub { font-size:.82rem; color: var(--medium-gray); margin-top:3px; }

/* ---------- rates table (BFC-inspired) ---------- */
.mp-rate-tabs { display:inline-flex; gap:6px; background:#fff; border:1px solid var(--extra-medium-gray); border-radius:999px; padding:6px; }
.mp-rate-tabs button {
    border:none; background:transparent; padding: 12px 22px; border-radius:999px; font-family:var(--alt-font); font-weight:600;
    font-size:.88rem; color: var(--medium-gray); cursor:pointer; transition: background .15s ease, color .15s ease;
}
.mp-rate-tabs button.active { background: var(--dark-gray); color: #fff; }

.mp-rate-table { width:100%; border-collapse: separate; border-spacing: 0; background:#fff; border-radius: 14px; overflow:hidden; box-shadow: 0 2px 20px rgba(0,0,0,.06); }
.mp-rate-table th { text-align:left; font-family:var(--alt-font); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--medium-gray); background: #F5F5F5; padding: 14px 20px; }
.mp-rate-table td { padding: 14px 20px; border-top: 1px solid #EFEFEF; font-family: var(--primary-font); }
.mp-rate-table tr:hover td { background: #FAFAFA; }
.mp-cur-cell { display:flex; align-items:center; gap:12px; font-weight:700; color: var(--dark-gray); }
.mp-cur-cell .cur-name { font-weight:400; color: var(--medium-gray); font-size:.85rem; }
.mp-rate-buy { color: var(--up-green); font-weight:700; }
.mp-rate-sell { color: var(--dark-gray); font-weight:700; }
.mp-indicative-tag { font-size:.65rem; background:#F0F0F0; color:var(--medium-gray); padding:2px 8px; border-radius:999px; margin-left:8px; }

/* ---------- trend chart ---------- */
.mp-trend-card { background:#fff; border-radius:16px; box-shadow: 0 2px 20px rgba(0,0,0,.06); padding: 28px; }
.mp-trend-svg { width:100%; height:220px; display:block; }
.mp-trend-line { fill:none; stroke: var(--dark-gray); stroke-width:2.5; }
.mp-trend-area { fill: url(#mp-trend-grad); opacity: .5; }
.mp-trend-dot { fill: var(--dark-gray); }

/* ---------- FAQ accordion ---------- */
.mp-faq-item { background:#fff; border:1px solid var(--extra-medium-gray); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.mp-faq-item summary { list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--alt-font); font-weight:600; color: var(--dark-gray); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mp-faq-item summary::-webkit-details-marker { display:none; }
.mp-faq-item summary i { color: var(--medium-gray); transition: transform .2s ease; }
.mp-faq-item[open] summary i { transform: rotate(180deg); }
.mp-faq-item .mp-faq-body { padding: 0 22px 20px; color: var(--medium-gray); }

/* ---------- cursor-follow ball zone (mouse-move interactivity) ---------- */
.idat-cursor-zone, .mp-cursor-zone { position: relative; overflow: hidden; }
.idat-cursor-ball, .mp-cursor-ball {
    position: absolute; top: 0; left: 0; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none; z-index: 1; will-change: transform;
}

/* ---------- static data note ---------- */
.mp-data-note { font-size:.78rem; color: var(--medium-gray); display:flex; align-items:center; gap:6px; }

/* ==========================================================
   Preloader (adapted from IDAT reference — same mechanics,
   recolored to Mpower's black/white/grey palette)
   ========================================================== */
html.mp-preloading { overflow: hidden; }
#mpPreloader {
    position: fixed; inset: 0; z-index: 99999;
    background: linear-gradient(160deg, #0D0D0D, #161616 55%, #1F1F1F);
    display: flex; align-items: center; justify-content: center;
    clip-path: circle(150% at 50% 50%);
}
#mpPreloader .pre-grid {
    position: absolute; inset: 0; opacity: .2;
    background-image: url('../images/vertical-line-bg-small.svg');
    background-position: center top;
}
#mpPreloader .pre-inner { position: relative; text-align: center; }
#mpPreloader .pre-ring-wrap { position: relative; width: 132px; height: 132px; margin: 0 auto 26px; }
#mpPreloader .pre-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#mpPreloader .pre-track { stroke: rgba(255,255,255,.12); stroke-width: 3; fill: none; }
#mpPreloader .pre-bar {
    stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round;
    stroke-dasharray: 339.3; stroke-dashoffset: 339.3;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.4));
    transition: stroke-dashoffset .25s ease;
}
#mpPreloader .pre-crest {
    position: absolute; top: 50%; left: 50%;
    width: 64px; transform: translate(-50%, -50%);
    animation: preCrestFloat 2.6s ease-in-out infinite;
}
@keyframes preCrestFloat {
    0%, 100% { transform: translate(-50%, -52%); }
    50% { transform: translate(-50%, -48%); }
}
#mpPreloader .pre-word { font-size: 40px; font-weight: 600; letter-spacing: 8px; color: #fff; margin-left: 6px; }
#mpPreloader .pre-word span {
    display: inline-block; opacity: 0; transform: translateY(24px);
    animation: preLetter .6s cubic-bezier(.2,.8,.2,1) forwards;
}
#mpPreloader .pre-word span:nth-child(1) { animation-delay: .10s; }
#mpPreloader .pre-word span:nth-child(2) { animation-delay: .19s; }
#mpPreloader .pre-word span:nth-child(3) { animation-delay: .28s; }
#mpPreloader .pre-word span:nth-child(4) { animation-delay: .37s; }
#mpPreloader .pre-word span:nth-child(5) { animation-delay: .46s; }
#mpPreloader .pre-word span:nth-child(6) { animation-delay: .55s; color: #B8B8B8; }
@keyframes preLetter { to { opacity: 1; transform: translateY(0); } }
#mpPreloader .pre-motto { margin-top: 8px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.5); }
#mpPreloader .pre-motto i { font-style: normal; color: #B8B8B8; margin: 0 8px; }
#mpPreloader .pre-motto span, #mpPreloader .pre-motto i {
    display: inline-block; opacity: 0;
    animation: preFade .5s ease forwards;
}
#mpPreloader .pre-motto span:nth-child(1) { animation-delay: .7s; }
#mpPreloader .pre-motto i:nth-child(2)   { animation-delay: .82s; }
#mpPreloader .pre-motto span:nth-child(3){ animation-delay: .94s; }
#mpPreloader .pre-motto i:nth-child(4)   { animation-delay: 1.06s; }
#mpPreloader .pre-motto span:nth-child(5){ animation-delay: 1.18s; }
@keyframes preFade { to { opacity: 1; } }
#mpPreloader .pre-count {
    position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%);
    font-size: 15px; letter-spacing: 2px; color: rgba(255,255,255,.45);
}
#mpPreloader.pre-exit .pre-inner {
    transition: opacity .4s ease, transform .4s ease;
    opacity: 0; transform: translateY(-26px) scale(.96);
}
#mpPreloader.pre-collapse {
    transition: clip-path .85s cubic-bezier(.7, 0, .2, 1);
    clip-path: circle(0% at 50% 50%);
}
@media (max-width: 575px) {
    #mpPreloader .pre-ring-wrap { width: 108px; height: 108px; }
    #mpPreloader .pre-crest { width: 54px; }
    #mpPreloader .pre-word { font-size: 30px; letter-spacing: 5px; }
    #mpPreloader .pre-motto { font-size: 10px; letter-spacing: 2px; }
}

/* ==========================================================
   Responsive optimisation pass — custom Mpower components
   across phone / tablet / laptop / large-desktop breakpoints
   ========================================================== */

/* Large desktop / ultra-wide: keep custom cards from over-stretching */
@media (min-width: 1600px) {
    .mp-converter-card { max-width: 900px; margin: 0 auto; }
    .mp-trend-card { max-width: 1000px; margin: 0 auto; }
}

/* Tablet (portrait & landscape) */
@media (max-width: 991px) {
    .mp-converter-card { padding: 26px 22px; }
    .mp-result-row { flex-direction: column; align-items: stretch; text-align: center; }
    .mp-result-row .btn { width: 100%; margin-top: 12px; }
    .mp-rate-table th, .mp-rate-table td { padding: 12px 14px; font-size: .92rem; }
}

/* Small tablet / large phone: stack the converter, keep swap button centered */
@media (max-width: 860px) {
    .mp-converter-row { grid-template-columns: 1fr; gap: 14px; }
    .mp-swap-btn { margin: -8px auto; }
}

/* Phones */
@media (max-width: 575px) {
    .mp-converter-card { padding: 20px 16px; border-radius: 14px; }
    .mp-input-row input, .mp-amount-display { font-size: 1.2rem; }
    .mp-currency-menu { width: min(260px, 78vw); left: auto; right: 0; }
    .mp-currency-btn { padding: 8px 10px; font-size: .88rem; }
    .mp-currency-btn .code { display: inline-block; }
    .mp-hero-crest { height: 54px; }
    .mp-rate-tabs { width: 100%; }
    .mp-rate-tabs button { flex: 1; padding: 10px 12px; font-size: .8rem; }
    .mp-trend-card { padding: 18px; }
    .mp-faq-item summary { padding: 14px 16px; font-size: .95rem; }
    .mp-cur-cell { gap: 8px; }
    .mp-flag-lg { width: 28px; height: 20px; }
}

/* Very small phones */
@media (max-width: 380px) {
    .mp-input-row input, .mp-amount-display { font-size: 1.05rem; }
    .mp-currency-option .name { display: none; }
}

/* ==========================================================
   Additional homepage section support (circle-reveal, eyebrow,
   WhatsApp float) — ported from the IDAT reference build
   ========================================================== */
.eyebrow-mono {
    font-family: 'Space Grotesk', monospace; font-size: 13px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--dark-gray); font-weight: 600;
}
.mp-whatsapp-float {
    position: fixed; bottom: 26px; right: 26px; z-index: 999; width: 58px; height: 58px;
    border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45); transition: transform .2s ease, box-shadow .2s ease;
}
.mp-whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55); }
.mp-whatsapp-float i { color: #fff; font-size: 28px; }
.mp-whatsapp-pulse {
    position: fixed; bottom: 26px; right: 26px; z-index: 998; width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; animation: mp-wa-pulse 2.2s ease-out infinite; pointer-events: none;
}
@keyframes mp-wa-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }

/* circle reveal (Kolkata / "serving you" section) — navy treatment,
   matching the hero's IDAT-style backdrop for these signature moments */
.mp-circle-reveal-section { position: relative; padding: 0 !important; overflow: hidden; }
.mp-reveal-sticky-wrap { position: relative; }
.mp-reveal-sticky { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mp-reveal-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mp-reveal-circle-bg {
    position: absolute; top: 50%; left: 50%;
    width: 78vh; height: 78vh; max-width: 92vw; max-height: 92vw;
    transform: translate(-50%, -50%) scale(var(--cs, 1));
    border-radius: 50%; background: rgba(14, 35, 64, 0.94); will-change: transform; z-index: 2;
}
.mp-reveal-content { position: relative; z-index: 5; text-align: center; max-width: 560px; padding: 0 30px; }

.mp-hero-crest { height: 92px; }
@media (max-width: 1199px) { .mp-hero-crest { height: 80px; } }
@media (max-width: 991px) {
    .mp-hero-sticky, .mp-reveal-sticky { height: auto; min-height: 100vh; padding: 120px 0 100px; }
    .mp-hero-circle-bg, .mp-reveal-circle-bg { transform: translate(-50%, -50%) scale(1) !important; }
    .mp-hero-counters { position: relative; bottom: auto; margin-top: 50px; }
    .mp-cursor-ball, .idat-cursor-ball { display: none; }
    .mp-hero-circle-bg { width: 82vw; height: 82vw; max-width: none; max-height: none; }
    .mp-hero-crest { height: 74px; }
    .mp-reveal-sticky { height: auto; min-height: 90vh; padding: 110px 0; }
    .mp-reveal-circle-bg { width: 150vw; height: 150vw; max-width: none; max-height: none; }
    .mp-reveal-content { max-width: 520px; }
}
@media (max-width: 767px) {
    .mp-hero-sticky { padding: 120px 0 50px; }
    .mp-hero-circle-bg { width: 94vw; height: 94vw; }
    .mp-hero-crest { height: 64px; }
    .mp-hero-content { padding: 0 15px; }
    .mp-hero-counters .vertical-counter { font-size: 26px; }
    .review-style-07 > div { padding: 30px 25px !important; }
    .hover-arrow-swipe a { word-break: break-all; }
}
@media (max-width: 575px) {
    .mp-hero-crest { height: 56px; }
    .mp-hero-counters .row { row-gap: 20px; }
    .mp-reveal-content { padding: 0 20px; }
    .mp-reveal-content h2 { font-size: 30px; line-height: 38px; }
    .mp-whatsapp-float, .mp-whatsapp-pulse { width: 52px; height: 52px; bottom: 20px; right: 20px; }
    .mp-whatsapp-float i { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-hero-circle-bg, .mp-reveal-circle-bg { transform: translate(-50%, -50%) scale(1) !important; }
    .mp-cursor-ball, .idat-cursor-ball { display: none; }
}

/* ==========================================================
   Modal system (Send this amount / Get Started / Lead capture)
   ========================================================== */
.mp-modal-overlay {
    position: fixed; inset: 0; z-index: 9998; background: rgba(13,13,13,.62);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
    -webkit-overflow-scrolling: touch;
}
.mp-modal-overlay.active { opacity: 1; pointer-events: auto; }
.mp-modal-card {
    background: #fff; border-radius: 18px; max-width: 640px; width: 100%;
    max-height: 88vh; overflow-y: auto; position: relative; padding: 40px;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
    transform: translateY(24px) scale(.97); opacity: 0; transition: transform .3s ease, opacity .3s ease;
}
.mp-modal-overlay.active .mp-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.mp-modal-card.mp-modal-wide { max-width: 760px; }
.mp-modal-close {
    position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
    background: var(--extra-medium-gray); border: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--dark-gray); font-size: 16px; transition: background .15s ease;
}
.mp-modal-close:hover { background: var(--dark-gray); color: #fff; }
.mp-modal-eyebrow { font-family: var(--alt-font); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--medium-gray); display: block; margin-bottom: 8px; }
.mp-modal-title { font-family: var(--alt-font); font-weight: 600; color: var(--dark-gray); font-size: 26px; margin-bottom: 6px; }
.mp-modal-sub { color: var(--medium-gray); margin-bottom: 24px; font-size: 15px; }
body.mp-modal-open { overflow: hidden; }
@media (max-width: 575px) {
    .mp-modal-card { padding: 28px 20px; border-radius: 14px; }
    .mp-modal-title { font-size: 21px; }
}

/* mini converter used inside the "Get started" modal */
/* Modal converter gets its own roomier, stacked layout — the homepage's
   tight side-by-side grid doesn't leave enough width for the amount
   field once it's squeezed into the narrower modal card. */
.mp-modal-converter { background: var(--bg, #F7F5EE); border-radius: 14px; padding: 22px 20px; margin-bottom: 28px; }
.mp-modal-converter .mp-converter-row {
    display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px;
}
.mp-modal-converter .mp-input-box { padding: 14px 18px 12px; }
.mp-modal-converter .mp-input-row { gap: 10px; }
.mp-modal-converter .mp-input-row input,
.mp-modal-converter .mp-amount-display {
    font-size: 1.3rem; flex: 1 1 auto; min-width: 0;
}
.mp-modal-converter .mp-currency-select { flex-shrink: 0; }
.mp-modal-converter .mp-currency-btn { padding: 7px 8px 7px 6px; gap: 6px; }
.mp-modal-converter .mp-currency-btn .code { font-size: .88rem; }
.mp-modal-converter .mp-swap-btn {
    width: 38px; height: 38px; margin: -2px auto; align-self: center;
}
.mp-modal-converter .mp-result-row { border-top: 1px solid var(--extra-medium-gray); padding-top: 14px; }
@media (max-width: 420px) {
    .mp-modal-converter .mp-currency-option .name { display: none; }
}

/* lead-capture popup */
.mp-lead-card { max-width: 420px; text-align: center; padding: 36px 32px; }
.mp-lead-icon {
    width: 58px; height: 58px; border-radius: 50%; background: var(--dark-gray); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 18px;
}
.mp-lead-card .mp-modal-title { font-size: 22px; }