#mrf-wrap, #mrf-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
#mrf-wrap { width: 100%; font-family: inherit; color: #fff; }

#mrf-wrap .mrf-progress { width: 100%; height: 1px; background: rgba(255,255,255,0.12); margin-bottom: 52px; position: relative; }
#mrf-wrap .mrf-progress-fill { height: 1px; background: rgba(255,255,255,0.85); width: 50%; position: relative; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
#mrf-wrap .mrf-progress-fill::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; background: #fff; border-radius: 50%; }

#mrf-wrap .mrf-step { display: none; opacity: 0; transform: translateY(10px); transition: opacity 0.32s ease, transform 0.32s ease; }
#mrf-wrap .mrf-step.active  { display: block; }
#mrf-wrap .mrf-step.visible { opacity: 1; transform: translateY(0); }

#mrf-wrap .mrf-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; }
@media (max-width: 768px) { #mrf-wrap .mrf-layout { grid-template-columns: 1fr; gap: 32px 0; } }

#mrf-wrap .mrf-left { position: sticky; top: 40px; }
#mrf-wrap .mrf-step-num { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #9CABAA; margin-bottom: 14px; }
#mrf-wrap .mrf-step-head h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 16px; }
#mrf-wrap .mrf-step-head p  { font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.48); line-height: 1.5; }

#mrf-wrap .mrf-checklist { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
#mrf-wrap .mrf-check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.5; }
#mrf-wrap .mrf-check-item::before { content: '✓'; color: rgba(168,213,192,0.9); font-weight: 500; flex-shrink: 0; margin-top: 1px; }

#mrf-wrap .mrf-selection-summary { margin-top: 28px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#mrf-wrap .mrf-selection-label { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); flex-shrink: 0; }
#mrf-wrap .mrf-selection-value { font-size: 15px; font-weight: 500; color: #fff; flex: 1; }
#mrf-wrap .mrf-change-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.55); font-size: 12px; font-family: inherit; padding: 5px 12px; border-radius: 99px; cursor: pointer; transition: border-color 0.18s, color 0.18s; white-space: nowrap; }
#mrf-wrap .mrf-change-btn:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

#mrf-wrap .mrf-right { display: flex; flex-direction: column; gap: 8px; }

#mrf-wrap .mrf-bike-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
#mrf-wrap .mrf-bike-tile { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; cursor: pointer; transition: background 0.18s, border-color 0.18s; }
#mrf-wrap .mrf-bike-tile:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.28); }
#mrf-wrap .mrf-bike-tile.selected { background: rgba(255,255,255,0.92); border-color: transparent; }
#mrf-wrap .mrf-bike-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 12px; }
#mrf-wrap .mrf-bike-img-ph { width: 100%; aspect-ratio: 16/9; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255,255,255,0.25); font-style: italic; }
#mrf-wrap .mrf-bike-info { padding: 14px 16px; }
#mrf-wrap .mrf-bike-name { font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 2px; line-height: 1.2; }
#mrf-wrap .mrf-bike-sub  { font-size: 12px; color: rgba(255,255,255,0.45); }
#mrf-wrap .mrf-bike-tile.selected .mrf-bike-name { color: #0D2E27; }
#mrf-wrap .mrf-bike-tile.selected .mrf-bike-sub  { color: rgba(13,46,39,0.55); }
#mrf-wrap .mrf-bike-tile.tile-egal { grid-column: 1 / -1; display: flex; align-items: center; padding: 16px 18px; }
#mrf-wrap .mrf-bike-tile.tile-egal .mrf-bike-info { padding: 0; }

#mrf-wrap .mrf-input-row { padding: 4px 0 0; margin-bottom: 6px; }
#mrf-wrap .mrf-input-row label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
#mrf-wrap .mrf-input-row input,
#mrf-wrap .mrf-input-row select,
#mrf-wrap .mrf-input-row textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 16px; font-family: inherit; padding: 6px 0 12px; outline: none; transition: border-color 0.2s; appearance: none; -webkit-appearance: none; }
#mrf-wrap .mrf-input-row select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px; }
#mrf-wrap .mrf-input-row select option { background: #053331; color: #fff; }
#mrf-wrap .mrf-input-row textarea { resize: vertical; min-height: 80px; }
#mrf-wrap .mrf-input-row input::placeholder,
#mrf-wrap .mrf-input-row textarea::placeholder { color: rgba(255,255,255,0.2); }
#mrf-wrap .mrf-input-row input:hover,
#mrf-wrap .mrf-input-row select:hover,
#mrf-wrap .mrf-input-row textarea:hover { border-bottom-color: rgba(255,255,255,0.35); }
#mrf-wrap .mrf-input-row input:focus,
#mrf-wrap .mrf-input-row select:focus,
#mrf-wrap .mrf-input-row textarea:focus { border-bottom-color: rgba(255,255,255,0.8); }
#mrf-wrap .mrf-input-row input.invalid,
#mrf-wrap .mrf-input-row select.invalid { border-bottom-color: rgba(255,110,90,0.75); }
#mrf-wrap .mrf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 480px) { #mrf-wrap .mrf-two-col { grid-template-columns: 1fr; } }

#mrf-wrap .mrf-legal { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
#mrf-wrap .mrf-legal-item { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
#mrf-wrap .mrf-legal-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
#mrf-wrap .mrf-legal-box { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.25); border-radius: 5px; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: background 0.18s, border-color 0.18s; }
#mrf-wrap .mrf-legal-box svg { display: none; width: 12px; height: 12px; stroke: #0D2E27; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#mrf-wrap .mrf-legal-item input:checked ~ .mrf-legal-box { background: rgba(255,255,255,0.92); border-color: transparent; }
#mrf-wrap .mrf-legal-item input:checked ~ .mrf-legal-box svg { display: block; }
#mrf-wrap .mrf-legal-text { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; }
#mrf-wrap .mrf-legal-text a { color: rgba(255,255,255,0.75); text-decoration: underline; }
#mrf-wrap .mrf-req { color: rgba(255,150,120,0.8); }
#mrf-wrap .mrf-optional { color: rgba(255,255,255,0.35); }

#mrf-wrap .mrf-actions { display: flex; gap: 10px; margin-top: 36px; align-items: center; }
#mrf-wrap .btn-primary { flex: 1; padding: 18px 28px; background: #fff; color: #000; font-size: 15px; font-weight: 500; font-family: inherit; border: 1px solid #fff; border-radius: 999px; cursor: pointer; letter-spacing: 0.01em; transition: background 0.2s, color 0.2s; }
#mrf-wrap .btn-primary:hover { background: transparent; color: #fff; }
#mrf-wrap .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
#mrf-wrap .btn-back { padding: 18px 28px; background: transparent; color: #fff; font-size: 15px; font-weight: 500; font-family: inherit; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s; }
#mrf-wrap .btn-back:hover { background: #fff; color: #000; }

#mrf-wrap .mrf-error { font-size: 12px; color: rgba(255,150,120,0.9); margin-top: 6px; min-height: 18px; }

#mrf-success { display: none; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; padding: 48px 0 24px; text-align: center; }
#mrf-success.visible { opacity: 1; transform: translateY(0); }
#mrf-success .ok-icon { width: 52px; height: 52px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
#mrf-success .ok-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#mrf-success h3 { font-size: 22px; font-weight: 500; color: #fff; margin-bottom: 10px; }
#mrf-success .success-text { font-size: 14px; color: rgba(255,255,255,0.48); line-height: 1.6; margin-bottom: 24px; }
#mrf-success .success-summary { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 20px 24px; max-width: 380px; margin: 0 auto; }
#mrf-success .summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); gap: 16px; }
#mrf-success .summary-row:last-child { border-bottom: none; }
#mrf-success .summary-label { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.38); flex-shrink: 0; }
#mrf-success .summary-val { font-size: 14px; color: rgba(255,255,255,0.82); text-align: right; }

/* Availability dots + meta */
#mrf-wrap .mrf-bike-meta { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
#mrf-wrap .mrf-avail-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
#mrf-wrap .mrf-avail-dot--available   { background:#4caf50; }
#mrf-wrap .mrf-avail-dot--soon        { background:#ff9800; }
#mrf-wrap .mrf-avail-dot--unavailable { background:#9e9e9e; }
#mrf-wrap .mrf-avail-label { font-size:11px; color:rgba(255,255,255,0.5); }
#mrf-wrap .mrf-bike-price { font-size:11px; font-weight:500; color:rgba(168,213,192,0.9); margin-left:auto; }
#mrf-wrap .mrf-bike-tile.selected .mrf-avail-label { color:rgba(13,46,39,0.6); }
#mrf-wrap .mrf-bike-tile.selected .mrf-bike-price  { color:#1a3a2e; }