:root {
    --mpay-accent: #0ea5e9;
    --mpay-accent-strong: color-mix(in srgb, var(--mpay-accent) 78%, #00111f);
    --mpay-surface: rgba(255, 255, 255, 0.74);
    --mpay-border: rgba(12, 35, 64, 0.12);
    --mpay-shadow: 0 24px 60px rgba(10, 31, 58, 0.14);
    --mpay-radius: 24px;
    --mpay-density-gap: 1rem;
    --mpay-backdrop: blur(18px);
}

body[data-ui-surface="solid"] { --mpay-surface: #ffffff; --mpay-backdrop: blur(0px); }
body[data-ui-radius="sharp"] { --mpay-radius: 12px; }
body[data-ui-density="compact"] { --mpay-density-gap: 0.55rem; }

body[data-ui-motion="calm"] *,
body[data-ui-motion="calm"] *::before,
body[data-ui-motion="calm"] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
}

body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--mpay-accent) 12%, transparent) 0, transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 175, 92, 0.10) 0, transparent 24%),
        #f4f8fc;
}

.single-form-card,
.card-main,
.navbar-wrap,
.header-main,
.service-item,
.feature-box-items,
.testimonial-card-item,
.team-card-item,
.news-item,
.news-area {
    border-radius: var(--mpay-radius) !important;
    background: var(--mpay-surface);
    backdrop-filter: var(--mpay-backdrop);
    border: 1px solid var(--mpay-border);
    box-shadow: var(--mpay-shadow);
}

.theme-btn,
.btn-base,
.btn-primary {
    background: linear-gradient(135deg, var(--mpay-accent), var(--mpay-accent-strong)) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--mpay-accent) 26%, transparent);
}

.main-area .row.wrapper.fixed-wrapper { gap: var(--mpay-density-gap); }

.mpay-customizer { position: fixed; right: 20px; bottom: 20px; z-index: 1055; }
.mpay-customizer__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--mpay-accent-strong), var(--mpay-accent));
    color: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
}

.mpay-customizer__panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: min(340px, calc(100vw - 32px));
    padding: 18px;
    border-radius: 28px;
    background: rgba(7, 20, 37, 0.88);
    color: #f6fbff;
    box-shadow: 0 30px 80px rgba(4, 10, 20, 0.36);
    backdrop-filter: blur(22px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(0.98);
    transition: opacity .22s ease, transform .22s ease;
}

.mpay-customizer.is-open .mpay-customizer__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.mpay-customizer__panel-head,
.mpay-customizer__section,
.mpay-customizer__preview { margin-bottom: 16px; }

.mpay-customizer__panel-head { display: flex; justify-content: space-between; gap: 12px; }
.mpay-customizer__eyebrow {
    margin: 0 0 4px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.mpay-customizer__panel h5 { margin: 0; color: #fff; }

.mpay-customizer__close,
.mpay-chip,
.mpay-swatch,
.mpay-customizer__reset {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: inherit;
}

.mpay-customizer__close { width: 40px; height: 40px; border-radius: 50%; }
.mpay-customizer__label { display: block; margin-bottom: 8px; font-size: 13px; color: rgba(255,255,255,0.72); }
.mpay-customizer__swatches,
.mpay-customizer__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.mpay-swatch,
.mpay-chip { border-radius: 999px; padding: 9px 12px; font-size: 13px; }
.mpay-swatch::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}

.mpay-swatch.is-active,
.mpay-chip.is-active { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.16); }

.mpay-preview-card {
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.12);
}

.mpay-preview-card span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.64);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.mpay-preview-card strong { font-size: 14px; line-height: 1.55; }
.mpay-customizer__reset { width: 100%; border-radius: 14px; padding: 12px 14px; }

@media (max-width: 767px) {
    .mpay-customizer { right: 14px; bottom: 14px; }
    .mpay-customizer__toggle span { display: none; }
}