.mmw-wrap {
--mmw-blue:   #2563EB;
--mmw-blue-l: #EFF6FF;
--mmw-ink:    #111827;
--mmw-ink-s:  #374151;
--mmw-muted:  #9CA3AF;
--mmw-border: #E5E7EB;
--mmw-bg:     #F9FAFB;
--mmw-r:      14px;
--mmw-rs:     8px;
--mmw-font:   'DM Sans', 'Inter', system-ui, sans-serif;
--mmw-font-d: 'Outfit', 'DM Sans', system-ui, sans-serif;
display:      block;
width:        100%;
font-family:  var(--mmw-font);
} .mmw-wrap .mmw-dropdown {
width: 100% !important;
} .mmw-trigger-wrap {
position: relative;
display: inline-block;
}
.mmw-trigger {
display:     inline-flex;
align-items: center;
gap:         6px;
padding:     9px 18px;
background:  var(--mmw-blue);
color:       #fff;
border-radius: 50px;
font-size:   14px;
font-weight: 600;
cursor:      pointer;
font-family: var(--mmw-font);
border:      none;
outline:     none;
transition:  opacity .15s;
white-space: nowrap;
}
.mmw-trigger:hover { opacity: .88; }
.mmw-trigger:focus-visible {
outline: 3px solid var(--mmw-blue);
outline-offset: 3px;
}
.mmw-chevron { transition: transform .2s; }
.mmw-trigger[aria-expanded="true"] .mmw-chevron { transform: rotate(180deg); } .mmw-dropdown {
background:    #fff;
overflow:      hidden;
width:         100%;
} .mmw-dropdown.mmw-standalone {
position:      relative;
width:         100%;
border:        none;
border-radius: 0;
box-shadow:    none;
} .mmw-dd-header {
display:         flex;
align-items:     center;
justify-content: space-between;
padding:         16px 20px;
border-bottom:   1px solid var(--mmw-border);
background:      var(--mmw-bg);
}
.mmw-dd-header-title {
font-family: var(--mmw-font-d);
font-size:   14px;
font-weight: 700;
color:       var(--mmw-ink);
}
.mmw-dd-header-sub {
font-size:  12px;
color:      var(--mmw-muted);
margin-top: 2px;
} .mmw-dd-body {
display:               grid;
grid-template-columns: 200px 1fr;
min-height:            280px;
} .mmw-dd-cats {
border-right: 1px solid var(--mmw-border);
padding:      12px 0;
}
.mmw-dd-cat {
display:     flex;
align-items: center;
gap:         10px;
padding:     10px 16px;
cursor:      pointer;
transition:  background .15s;
border-left: 3px solid transparent;
text-decoration: none;
color:       inherit;
}
.mmw-dd-cat:hover  { background: var(--mmw-blue-l); }
.mmw-dd-cat.mmw-active {
background:        var(--mmw-blue-l);
border-left-color: var(--mmw-blue);
}
.mmw-dd-cat.mmw-sep {
margin-top:  8px;
border-top:  1px solid var(--mmw-border);
padding-top: 12px;
}
.mmw-dd-cat-icon {
width:          32px;
height:         32px;
border-radius:  var(--mmw-rs);
background:     var(--mmw-bg);
display:        flex;
align-items:    center;
justify-content:center;
flex-shrink:    0;
}
.mmw-dd-cat.mmw-active .mmw-dd-cat-icon { background: var(--mmw-blue-l); }
.mmw-dd-cat-icon svg {
width:             16px;
height:            16px;
stroke:            var(--mmw-blue);
fill:              none;
stroke-width:      1.8;
stroke-linecap:    round;
stroke-linejoin:   round;
}
.mmw-dd-cat-name  { font-size: 13.5px; font-weight: 600; color: var(--mmw-ink); }
.mmw-dd-cat-count { font-size: 11px; color: var(--mmw-muted); } .mmw-dd-content       { padding: 20px; transition: opacity .12s ease, transform .12s ease; }
.mmw-dd-content-title {
font-size:      11px;
font-weight:    700;
letter-spacing: 1px;
text-transform: uppercase;
color:          var(--mmw-muted);
margin-bottom:  12px;
} .mmw-dd-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.mmw-dd-brand  {
padding:       7px 14px;
border:        1.5px solid var(--mmw-border);
border-radius: 50px;
font-size:     13px;
font-weight:   500;
color:         var(--mmw-ink-s);
cursor:        pointer;
transition:    border-color .15s, color .15s;
text-decoration: none;
}
.mmw-dd-brand:hover    { border-color: var(--mmw-blue); color: var(--mmw-blue); }
.mmw-dd-brand.mmw-featured {
border-color: var(--mmw-blue);
background:   var(--mmw-blue-l);
color:        var(--mmw-blue);
} .mmw-dd-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mmw-dd-promo  {
background:    var(--mmw-bg);
border-radius: var(--mmw-rs);
padding:       12px 14px;
cursor:        pointer;
transition:    border-color .18s;
border:        1.5px solid var(--mmw-border);
display:       flex;
align-items:   center;
gap:           10px;
text-decoration: none;
}
.mmw-dd-promo:hover { border-color: var(--mmw-blue); }
.mmw-dd-promo-img   {
width:           44px;
height:          44px;
background:      #fff;
border-radius:   var(--mmw-rs);
display:         flex;
align-items:     center;
justify-content: center;
font-size:       22px;
flex-shrink:     0;
overflow:        hidden;
}
.mmw-prod-thumb  { width: 44px; height: 44px; object-fit: cover; border-radius: var(--mmw-rs); display: block; }
.mmw-prod-emoji  { font-size: 22px; }
.mmw-dd-promo-name  { font-size: 13px; font-weight: 600; color: var(--mmw-ink); margin-bottom: 2px; }
.mmw-dd-promo-price { font-size: 14px; font-weight: 800; color: var(--mmw-blue); font-family: var(--mmw-font-d); }
.mmw-dd-promo-price ins  { text-decoration: none; }
.mmw-dd-promo-price del  { font-size: 11px; color: var(--mmw-muted); font-weight: 400; margin-left: 4px; } .mmw-dd-footer {
padding:         12px 20px;
border-top:      1px solid var(--mmw-border);
background:      var(--mmw-bg);
display:         flex;
justify-content: space-between;
align-items:     center;
}
.mmw-dd-footer-left { display: flex; gap: 16px; }
.mmw-link-blue {
font-size:       13px;
font-weight:     600;
color:           var(--mmw-blue);
text-decoration: none;
}
.mmw-link-blue:hover { text-decoration: underline; } .mmw-empty-notice {
padding:       40px 24px;
text-align:    center;
color:         var(--mmw-muted);
font-size:     13px;
border:        2px dashed var(--mmw-border);
border-radius: var(--mmw-r);
}
.mmw-empty-notice strong { display: block; font-size: 15px; color: var(--mmw-ink-s); margin-bottom: 6px; } @media (max-width: 780px) {
.mmw-dropdown.mmw-float { width: 95vw !important; }
.mmw-dd-body            { grid-template-columns: 1fr; }
.mmw-dd-cats            { border-right: none; border-bottom: 1px solid var(--mmw-border); display: flex; flex-wrap: wrap; padding: 8px; gap: 4px; }
.mmw-dd-cat             { border-left: none !important; border-radius: var(--mmw-rs); border: 1.5px solid var(--mmw-border); padding: 6px 12px; }
.mmw-dd-cat.mmw-active  { border-color: var(--mmw-blue); }
.mmw-dd-promos          { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.mmw-dropdown, .mmw-trigger, .mmw-chevron, .mmw-dd-content { transition: none; }
} .mmw-dd-content-editor {
padding:    16px 20px;
overflow-y: auto;
}
.mmw-editor-tab-block {
border:        1.5px solid var(--mmw-border);
border-radius: var(--mmw-rs);
padding:       16px;
margin-bottom: 16px;
background:    #fff;
}
.mmw-editor-tab-block:last-child { margin-bottom: 0; }
.mmw-editor-tab-label {
font-size:     11px;
font-weight:   700;
letter-spacing:1px;
text-transform:uppercase;
color:         var(--mmw-blue);
background:    var(--mmw-blue-l);
border-radius: 4px;
padding:       3px 8px;
display:       inline-block;
margin-bottom: 12px;
} .mmw-editor-preview .mmw-dropdown {
border:        1.5px solid var(--mmw-border) !important;
border-radius: var(--mmw-r) !important;
box-shadow:    0 4px 20px rgba(0,0,0,.08) !important;
} .mmw-editor-badge {
display:     inline-flex;
align-items: center;
gap:         6px;
background:  #EFF6FF;
border:      1.5px solid #BFDBFE;
border-radius: 6px;
padding:     6px 12px;
font-size:   12px;
font-weight: 600;
color:       #2563EB;
margin-bottom: 10px;
} .mmw-editor-stacked {
padding:    12px 16px;
overflow-y: auto;
display:    flex;
flex-direction: column;
gap:        12px;
}
.mmw-editor-block {
border:        1.5px solid var(--mmw-border);
border-radius: var(--mmw-rs);
padding:       14px;
background:    #fff;
}
.mmw-editor-block-label {
font-size:      11px;
font-weight:    700;
letter-spacing: 1px;
text-transform: uppercase;
color:          var(--mmw-blue);
background:     var(--mmw-blue-l);
border-radius:  4px;
padding:        3px 8px;
display:        inline-block;
margin-bottom:  12px;
}.pmw-pills-wrap,
.pmw-grid-wrap {
--pmw-blue:   #2563EB;
--pmw-blue-l: #EFF6FF;
--pmw-ink:    #111827;
--pmw-ink-s:  #374151;
--pmw-muted:  #9CA3AF;
--pmw-border: #E5E7EB;
--pmw-bg:     #F9FAFB;
--pmw-rs:     6px;
--pmw-font:   'DM Sans', 'Inter', system-ui, sans-serif;
--pmw-font-d: 'Outfit', 'DM Sans', system-ui, sans-serif;
font-family:  var(--pmw-font);
width:        100%;
box-sizing:   border-box;
padding:      0 10px;
} .pmw-section-title {
font-size:      10px;
font-weight:    700;
letter-spacing: 1px;
text-transform: uppercase;
color:          var(--pmw-muted);
margin-bottom:  6px;
} .pmw-pills {
display:  flex;
flex-wrap:wrap;
gap:      5px;
}
.pmw-pill {
padding:         4px 10px;
border:          1.5px solid var(--pmw-border);
border-radius:   50px;
font-size:       11px;
font-weight:     500;
color:           var(--pmw-ink-s);
text-decoration: none;
transition:      border-color .15s, color .15s;
white-space:     nowrap;
}
.pmw-pill:hover { border-color: var(--pmw-blue); color: var(--pmw-blue); }
.pmw-pill.pmw-featured {
border-color: var(--pmw-blue);
background:   var(--pmw-blue-l);
color:        var(--pmw-blue);
} .pmw-grid {
display:               grid;
grid-template-columns: 1fr;
gap:                   6px;
width:                 100%;
box-sizing:            border-box;
}
.pmw-cols-2 { grid-template-columns: 1fr 1fr; } .pmw-prod-card {
display:         flex;
align-items:     center;
gap:             8px;
padding:         7px 8px;
background:      var(--pmw-bg);
border:          1.5px solid var(--pmw-border);
border-radius:   var(--pmw-rs);
text-decoration: none;
transition:      border-color .18s;
box-sizing:      border-box;
width:           100%;
overflow:        hidden;
}
.pmw-prod-card:hover { border-color: var(--pmw-blue); } .pmw-prod-img,
.pmw-prod-img-big {
width:           36px;
height:          36px;
min-width:       36px;
background:      #fff;
border-radius:   var(--pmw-rs);
display:         flex;
align-items:     center;
justify-content: center;
overflow:        hidden;
flex-shrink:     0;
position:        relative;
}
.pmw-prod-thumb {
width:         36px;
height:        36px;
object-fit:    cover;
border-radius: var(--pmw-rs);
display:       block;
}
.pmw-prod-emoji { font-size: 18px; } .pmw-prod-badge {
position:      absolute;
top:           -3px;
right:         -3px;
font-size:     8px;
font-weight:   700;
letter-spacing:.4px;
text-transform:uppercase;
padding:       1px 4px;
border-radius: 3px;
background:    #EF4444;
color:         #fff;
white-space:   nowrap;
} .pmw-prod-info {
flex:      1;
min-width: 0;
width:     100%;
overflow:  hidden;
}
.pmw-prod-name {
font-size:     11px;
font-weight:   600;
color:         var(--pmw-ink);
margin-bottom: 2px;
white-space:   nowrap;
overflow:      hidden;
text-overflow: ellipsis;
}
.pmw-prod-price {
font-size:   11px;
font-weight: 800;
color:       var(--pmw-blue);
font-family: var(--pmw-font-d);
white-space: nowrap;
}
.pmw-prod-price ins { text-decoration: none; }
.pmw-prod-price del { font-size: 10px; color: var(--pmw-muted); font-weight: 400; margin-left: 3px; }
@media (prefers-reduced-motion: reduce) {
.pmw-pill, .pmw-prod-card { transition: none; }
} .pmw-links-wrap {
--pmw-blue:  #2563EB;
--pmw-font:  'DM Sans', 'Inter', system-ui, sans-serif;
font-family: var(--pmw-font);
display:     flex;
justify-content: space-between;
align-items: center;
padding:     0 10px;
flex-wrap:   wrap;
gap:         6px;
}
.pmw-links-left  { display: flex; flex-direction: column; gap: 4px; }
.pmw-links-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pmw-link-blue {
font-size:       12px;
font-weight:     600;
color:           var(--pmw-blue);
text-decoration: none;
white-space:     nowrap;
}
.pmw-link-blue:hover { text-decoration: underline; } .pmw-links-wrap {
--pmw-blue:  #2563EB;
--pmw-font:  'DM Sans', 'Inter', system-ui, sans-serif;
font-family: var(--pmw-font);
display:     flex;
flex-wrap:   wrap;
gap:         6px;
padding:     0 10px;
}
.pmw-btn {
display:         inline-flex;
align-items:     center;
padding:         7px 14px;
border-radius:   6px;
font-size:       12px;
font-weight:     600;
text-decoration: none;
white-space:     nowrap;
transition:      opacity .15s;
cursor:          pointer;
}
.pmw-btn:hover { opacity: .85; }
.pmw-btn--solid {
background: var(--pmw-blue);
color:      #fff;
border:     1.5px solid var(--pmw-blue);
}
.pmw-btn--outline {
background: transparent;
color:      var(--pmw-blue);
border:     1.5px solid var(--pmw-blue);
}@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap");
:root {
--rm-blue: #2979d6;
--rm-blue-d: #1a5ba8;
--rm-blue-l: #eef4fb;
--rm-green: #22c55e;
--rm-green-bg: #ecfdf5;
--rm-orange: #f59e0b;
--rm-red: #ef4444;
--rm-ink: #1a2332;
--rm-ink-s: #475569;
--rm-muted: #94a3b8;
--rm-border: #e2e8f0;
--rm-bg: #f8fafc;
--rm-white: #ffffff;
--rm-r: 14px;
--rm-rs: 10px;
--rm-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--rm-font-head: 'Outfit', 'DM Sans', sans-serif;
--rm-transition: 0.2s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rm-wizard {
font-family: var(--rm-font);
color: var(--rm-ink);
background: var(--rm-bg);
-webkit-font-smoothing: antialiased;
} .rm-hero {
background: linear-gradient(135deg, var(--rm-blue-d), var(--rm-blue));
padding: 48px 0 56px;
position: relative;
overflow: hidden;
}
.rm-hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.rm-hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 1;
}
.rm-hero-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
color: rgba(255,255,255,.9);
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 50px;
margin-bottom: 18px;
}
.rm-hero-title {
font-family: var(--rm-font-head);
font-size: clamp(28px, 3vw, 44px);
font-weight: 800;
color: white;
line-height: 1.1;
letter-spacing: -.5px;
margin-bottom: 14px;
}
.rm-hero-sub {
font-size: 15px;
color: rgba(255,255,255,.7);
line-height: 1.6;
margin-bottom: 28px;
font-weight: 300;
}
.rm-hero-points { display: flex; flex-direction: column; gap: 10px; }
.rm-hero-point {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: rgba(255,255,255,.8);
}
.rm-hero-point svg { width: 16px; height: 16px; color: var(--rm-blue-l); flex-shrink: 0; }
.rm-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.rm-hero-stat {
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.15);
border-radius: var(--rm-r);
padding: 20px;
text-align: center;
}
.rm-hero-stat-n {
font-family: var(--rm-font-head);
font-size: 36px;
font-weight: 800;
color: white;
}
.rm-hero-stat-l {
font-size: 12px;
color: rgba(255,255,255,.55);
margin-top: 4px;
}
@media (max-width: 768px) {
.rm-hero { padding: 32px 0 40px; }
.rm-hero-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
.rm-hero-points { align-items: center; }
.rm-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rm-hero-stat { padding: 14px 10px; }
.rm-hero-stat-n { font-size: 26px; }
} .rm-tunnel {
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px 64px;
} .rm-stepper {
display: flex;
align-items: flex-start;
margin-bottom: 40px;
overflow-x: auto;
padding-bottom: 8px;
}
.rm-stepper-item {
display: flex;
align-items: center;
min-width: fit-content;
}
.rm-stepper-item:last-child { flex: 0 !important; }
.rm-stepper-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.rm-stepper-dot {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid var(--rm-border);
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
font-family: var(--rm-font-head);
color: var(--rm-muted);
flex-shrink: 0;
transition: var(--rm-transition);
}
.rm-stepper-label {
font-size: 11px;
color: var(--rm-muted);
margin-top: 5px;
text-align: center;
font-weight: 500;
white-space: nowrap;
}
.rm-stepper-line {
flex: 1;
height: 2px;
background: var(--rm-border);
min-width: 24px;
margin: 0 4px;
margin-bottom: 20px;
} .rm-stepper-item.done .rm-stepper-dot {
background: var(--rm-green);
border-color: var(--rm-green);
color: white;
}
.rm-stepper-item.done .rm-stepper-label { color: var(--rm-green); font-weight: 600; }
.rm-stepper-item.done + .rm-stepper-item .rm-stepper-line { background: var(--rm-green); }
.rm-stepper-item.active .rm-stepper-dot {
background: var(--rm-blue);
border-color: var(--rm-blue);
color: white;
box-shadow: 0 0 0 4px rgba(41,121,214,.15);
}
.rm-stepper-item.active .rm-stepper-label { color: var(--rm-blue); font-weight: 600; } .rm-tunnel-title {
font-family: var(--rm-font-head);
font-size: 24px;
font-weight: 800;
color: var(--rm-ink);
margin-bottom: 6px;
letter-spacing: -.3px;
}
.rm-tunnel-sub {
font-size: 14px;
color: var(--rm-muted);
margin-bottom: 28px;
} .rm-device-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.rm-device-card {
background: white;
border: 2px solid var(--rm-border);
border-radius: var(--rm-r);
padding: 28px 20px;
text-align: center;
cursor: pointer;
transition: var(--rm-transition);
-webkit-tap-highlight-color: transparent;
}
.rm-device-card:hover {
border-color: var(--rm-blue);
background: var(--rm-blue-l);
}
.rm-device-card.active {
border-color: var(--rm-blue);
background: var(--rm-blue-l);
}
.rm-device-card .rm-device-icon {
font-size: 36px;
margin-bottom: 12px;
display: block;
}
.rm-device-card .rm-device-icon .material-symbols-outlined {
font-size: 40px;
color: var(--rm-blue);
}
.rm-device-name {
font-family: var(--rm-font-head);
font-size: 15px;
font-weight: 700;
color: var(--rm-ink);
}
@media (max-width: 480px) {
.rm-device-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rm-device-card { padding: 20px 14px; }
} .rm-brand-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.rm-brand-card {
background: white;
border: 2px solid var(--rm-border);
border-radius: var(--rm-r);
padding: 24px 16px;
text-align: center;
cursor: pointer;
transition: var(--rm-transition);
}
.rm-brand-card:hover { border-color: var(--rm-blue); background: var(--rm-blue-l); }
.rm-brand-card .rm-brand-logo {
width: 48px;
height: 48px;
object-fit: contain;
margin-bottom: 10px;
}
.rm-brand-card .rm-brand-initial {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--rm-blue-l);
color: var(--rm-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--rm-font-head);
font-size: 20px;
font-weight: 800;
margin-bottom: 10px;
}
.rm-brand-name {
font-family: var(--rm-font-head);
font-size: 14px;
font-weight: 700;
color: var(--rm-ink);
}
@media (max-width: 480px) {
.rm-brand-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
} .rm-search-wrapper {
display: flex;
align-items: center;
gap: 10px;
background: white;
border: 2px solid var(--rm-border);
border-radius: 50px;
padding: 10px 20px;
margin-bottom: 20px;
transition: var(--rm-transition);
}
.rm-search-wrapper:focus-within {
border-color: var(--rm-blue);
box-shadow: 0 0 0 4px rgba(41,121,214,.1);
}
.rm-search-wrapper .material-symbols-outlined { color: var(--rm-muted); font-size: 20px; }
.rm-search-wrapper input {
flex: 1;
border: none;
outline: none;
background: none;
font-family: var(--rm-font);
font-size: 14px;
color: var(--rm-ink);
}
.rm-search-wrapper input::placeholder { color: var(--rm-muted); }
.rm-model-list { margin-bottom: 32px; }
.rm-model-item {
padding: 14px 18px;
background: white;
border: 1.5px solid var(--rm-border);
border-radius: var(--rm-rs);
margin-bottom: 8px;
cursor: pointer;
transition: var(--rm-transition);
display: flex;
align-items: center;
gap: 12px;
font-family: var(--rm-font-head);
font-size: 14px;
font-weight: 600;
color: var(--rm-ink);
}
.rm-model-item:hover { border-color: var(--rm-blue); background: var(--rm-blue-l); }
.rm-model-item .material-symbols-outlined { font-size: 20px; color: var(--rm-blue); } .rm-panne-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 32px;
}
@media (min-width: 768px) {
.rm-panne-grid { grid-template-columns: repeat(3, 1fr); }
}
.rm-panne-card {
background: white;
border: 1.5px solid var(--rm-border);
border-radius: var(--rm-rs);
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: .18s ease;
-webkit-tap-highlight-color: transparent;
}
.rm-panne-card:hover { border-color: var(--rm-blue); }
.rm-panne-card.active,
.rm-panne-card.selected {
border-color: var(--rm-blue);
background: var(--rm-blue-l);
}
.rm-panne-icon {
width: 36px;
height: 36px;
background: var(--rm-bg);
border-radius: var(--rm-rs);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.rm-panne-card.active .rm-panne-icon,
.rm-panne-card.selected .rm-panne-icon {
background: white;
}
.rm-panne-icon .material-symbols-outlined { font-size: 20px; color: var(--rm-blue); }
.rm-panne-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.rm-panne-name {
font-size: 14px;
font-weight: 600;
color: var(--rm-ink);
}
.rm-panne-price {
font-size: 12px;
color: var(--rm-blue);
font-weight: 600;
margin-top: 2px;
}
.rm-panne-duration {
font-size: 11px;
color: var(--rm-muted);
margin-top: 1px;
} .rm-panne-oos {
border-color: #fbbf24 !important;
background: linear-gradient(135deg, #fffbeb 0%, #fff 60%) !important;
position: relative;
}
.rm-panne-oos:hover { border-color: #f59e0b !important; }
.rm-panne-oos::after {
content: '📦 Sur commande';
position: absolute;
top: 6px;
right: 8px;
font-size: 9px;
font-weight: 600;
color: #92400e;
background: #fef3c7;
padding: 1px 8px;
border-radius: 10px;
}
@media (max-width: 480px) {
.rm-panne-grid { grid-template-columns: 1fr; }
} .rm-imei-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 18px;
background: var(--rm-blue-l);
border: 1.5px dashed var(--rm-blue);
border-radius: 50px;
cursor: pointer;
font-family: var(--rm-font);
font-size: 13px;
font-weight: 600;
color: var(--rm-blue-d);
transition: var(--rm-transition);
margin-bottom: 24px;
}
.rm-imei-toggle:hover { background: #dbe9f7; border-style: solid; }
.rm-imei-toggle .material-symbols-outlined:first-child { font-size: 20px; color: var(--rm-blue); }
.rm-imei-arrow { margin-left: auto; transition: var(--rm-transition); }
.rm-imei-panel {
margin: -16px 0 24px;
padding: 18px;
background: white;
border: 2px solid var(--rm-blue);
border-radius: var(--rm-r);
animation: rmFadeIn 0.3s ease;
}
.rm-imei-input-wrap {
display: flex;
align-items: center;
gap: 8px;
background: var(--rm-bg);
border: 2px solid var(--rm-border);
border-radius: 50px;
padding: 4px 4px 4px 16px;
transition: var(--rm-transition);
}
.rm-imei-input-wrap:focus-within { border-color: var(--rm-blue); box-shadow: 0 0 0 4px rgba(41,121,214,.1); }
.rm-imei-input-wrap .material-symbols-outlined { font-size: 20px; color: var(--rm-muted); flex-shrink: 0; }
.rm-imei-input-wrap input {
flex: 1; border: none; background: none; outline: none;
font-family: var(--rm-font); font-size: 15px; font-weight: 600;
color: var(--rm-ink); letter-spacing: 1.5px; min-width: 0;
}
.rm-imei-input-wrap input::placeholder { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--rm-muted); }
.rm-imei-btn {
padding: 10px 18px; background: var(--rm-blue); color: white; border: none;
border-radius: 50px; font-family: var(--rm-font-head); font-size: 13px; font-weight: 700;
cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;
transition: var(--rm-transition); flex-shrink: 0;
}
.rm-imei-btn:hover { background: var(--rm-blue-d); }
.rm-imei-help { font-size: 12px; color: var(--rm-muted); margin: 12px 0 0; line-height: 1.5; } .rm-imei-mini {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; background: var(--rm-blue-l); border: 1px solid var(--rm-blue);
border-radius: 50px; margin-bottom: 14px;
}
.rm-imei-mini .material-symbols-outlined { font-size: 18px; color: var(--rm-blue); flex-shrink: 0; }
.rm-imei-mini input {
flex: 1; border: none; background: none; outline: none;
font-family: var(--rm-font); font-size: 13px; font-weight: 600;
color: var(--rm-ink); letter-spacing: 1px; min-width: 0;
}
.rm-imei-mini input::placeholder { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--rm-muted); }
.rm-imei-btn-mini {
padding: 6px 14px; background: var(--rm-blue); color: white; border: none;
border-radius: 50px; font-family: var(--rm-font); font-size: 12px; font-weight: 700;
cursor: pointer; flex-shrink: 0;
} .rm-imei-loading { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 13px; color: var(--rm-muted); }
.rm-imei-error {
display: flex; align-items: center; gap: 8px; padding: 12px 16px;
background: #fef2f2; color: #dc2626; border-radius: var(--rm-rs);
font-size: 13px; font-weight: 500; margin-top: 10px;
}
.rm-imei-error .material-symbols-outlined { font-size: 18px; }
.rm-imei-success {
display: flex; align-items: center; gap: 14px; padding: 14px 18px;
background: var(--rm-green-bg); border: 2px solid var(--rm-green);
border-radius: var(--rm-r); margin-top: 12px;
}
.rm-imei-found-icon .material-symbols-outlined { font-size: 32px; color: var(--rm-green); }
.rm-imei-found-info { flex: 1; min-width: 0; }
.rm-imei-found-info strong { display: block; font-size: 16px; color: var(--rm-ink); }
.rm-imei-found-info small { display: block; font-size: 12px; color: var(--rm-muted); margin-top: 2px; }
.rm-imei-confirm { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rm-border); }
.rm-imei-confirm-label { font-size: 14px; font-weight: 600; color: var(--rm-ink); margin: 0 0 10px; text-align: center; }
.rm-imei-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-imei-yes, .rm-imei-no {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 18px; border: 2px solid transparent; border-radius: 50px;
font-family: var(--rm-font); font-size: 14px; font-weight: 700;
cursor: pointer; transition: var(--rm-transition);
}
.rm-imei-yes { background: var(--rm-green); color: white; border-color: var(--rm-green); }
.rm-imei-yes:hover { background: #16a34a; }
.rm-imei-no { background: white; color: var(--rm-ink); border-color: var(--rm-border); }
.rm-imei-no:hover { border-color: var(--rm-blue); color: var(--rm-blue); } .rm-tunnel-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.rm-btn-back {
background: transparent;
border: 1.5px solid var(--rm-border);
border-radius: 50px;
padding: 12px 24px;
font-family: var(--rm-font);
font-size: 14px;
font-weight: 500;
color: var(--rm-ink-s);
cursor: pointer;
transition: var(--rm-transition);
}
.rm-btn-back:hover { border-color: var(--rm-ink-s); }
.rm-btn-next {
background: var(--rm-blue);
border: none;
border-radius: 50px;
padding: 13px 32px;
font-family: var(--rm-font-head);
font-size: 14px;
font-weight: 700;
color: white;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: var(--rm-transition);
}
.rm-btn-next:hover { background: var(--rm-blue-d); }
.rm-btn-next:disabled { opacity: 0.4; cursor: not-allowed; } .rm-booking-section {
margin-bottom: 32px;
}
.rm-booking-section-title {
font-family: var(--rm-font-head);
font-size: 16px;
font-weight: 700;
color: var(--rm-ink);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.rm-booking-section-title .material-symbols-outlined { font-size: 20px; color: var(--rm-blue); } .rm-cal-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 16px;
}
.rm-cal-day {
min-width: 60px;
padding: 12px 8px;
background: white;
border: 1.5px solid var(--rm-border);
border-radius: var(--rm-rs);
text-align: center;
cursor: pointer;
transition: var(--rm-transition);
flex-shrink: 0;
}
.rm-cal-day:hover { border-color: var(--rm-blue); }
.rm-cal-day.selected { border-color: var(--rm-blue); background: var(--rm-blue); color: white; }
.rm-cal-day-name { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--rm-muted); }
.rm-cal-day.selected .rm-cal-day-name { color: rgba(255,255,255,.7); }
.rm-cal-day-num { font-family: var(--rm-font-head); font-size: 20px; font-weight: 800; margin: 4px 0 2px; }
.rm-cal-day-month { font-size: 10px; color: var(--rm-muted); }
.rm-cal-day.selected .rm-cal-day-month { color: rgba(255,255,255,.7); } .rm-time-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.rm-time-chip {
padding: 8px 16px;
background: white;
border: 1.5px solid var(--rm-border);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
color: var(--rm-ink);
cursor: pointer;
transition: var(--rm-transition);
}
.rm-time-chip:hover { border-color: var(--rm-blue); color: var(--rm-blue); }
.rm-time-chip.selected { background: var(--rm-blue); border-color: var(--rm-blue); color: white; } .rm-field-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.rm-field-full { grid-column: 1 / -1; }
.rm-input-label {
font-size: 12px;
font-weight: 600;
color: var(--rm-ink-s);
margin-bottom: 6px;
display: block;
}
.rm-input {
width: 100%;
padding: 12px 16px;
background: white;
border: 1.5px solid var(--rm-border);
border-radius: var(--rm-rs);
font-family: var(--rm-font);
font-size: 14px;
color: var(--rm-ink);
transition: var(--rm-transition);
}
.rm-input:focus { outline: none; border-color: var(--rm-blue); box-shadow: 0 0 0 4px rgba(41,121,214,.1); }
.rm-input::placeholder { color: var(--rm-muted); }
textarea.rm-input { resize: vertical; min-height: 60px; border-radius: var(--rm-rs); } .rm-payment-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.rm-payment-opt {
padding: 16px;
background: white;
border: 2px solid var(--rm-border);
border-radius: var(--rm-rs);
cursor: pointer;
transition: var(--rm-transition);
text-align: center;
}
.rm-payment-opt:hover { border-color: var(--rm-blue); }
.rm-payment-opt.selected { border-color: var(--rm-blue); background: var(--rm-blue-l); }
.rm-payment-opt-icon { font-size: 24px; margin-bottom: 6px; }
.rm-payment-opt-name { font-size: 13px; font-weight: 700; color: var(--rm-ink); }
.rm-payment-opt-desc { font-size: 11px; color: var(--rm-muted); margin-top: 2px; } .rm-summary-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--rm-ink);
border-radius: var(--rm-r);
color: white;
margin-bottom: 20px;
}
.rm-summary-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); }
.rm-summary-total {
font-family: var(--rm-font-head);
font-size: 28px;
font-weight: 800;
} .rm-confirm-wrap {
text-align: center;
padding: 48px 24px;
}
.rm-confirm-icon { font-size: 56px; margin-bottom: 16px; }
.rm-confirm-title {
font-family: var(--rm-font-head);
font-size: 28px;
font-weight: 800;
color: var(--rm-ink);
margin-bottom: 8px;
}
.rm-confirm-sub {
font-size: 15px;
color: var(--rm-muted);
margin-bottom: 24px;
}
.rm-confirm-ref {
display: inline-block;
padding: 8px 24px;
background: var(--rm-blue-l);
border-radius: 50px;
font-family: var(--rm-font-head);
font-size: 18px;
font-weight: 800;
color: var(--rm-blue);
} .rm-badge-sm {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 50px;
}
.rm-badge-fast { background: var(--rm-blue-l); color: var(--rm-blue); }
.rm-badge-oos { background: #fef3c7; color: #92400e; }
.rm-badge-preorder {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 14px; background: #fffbeb; border: 1px solid #fbbf24;
border-radius: var(--rm-rs); font-size: 12px; font-weight: 600; color: #92400e;
} .rm-spinner {
width: 24px; height: 24px;
border: 3px solid var(--rm-border);
border-top-color: var(--rm-blue);
border-radius: 50%;
animation: rmSpin 0.6s linear infinite;
}
@keyframes rmSpin { to { transform: rotate(360deg); } }
@keyframes rmFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rm-loader {
display: flex;
justify-content: center;
padding: 48px;
}
.rm-step { display: none; animation: rmFadeIn 0.35s ease; }
.rm-step.active { display: block; } @media (max-width: 480px) {
.rm-tunnel { padding: 28px 16px 48px; }
.rm-tunnel-title { font-size: 20px; }
.rm-imei-confirm-btns { grid-template-columns: 1fr; }
.rm-imei-success { flex-direction: column; text-align: center; }
.rm-field-group { grid-template-columns: 1fr; }
.rm-payment-options { grid-template-columns: 1fr; }
.rm-summary-bar { flex-direction: column; gap: 4px; text-align: center; }
}