/* ═══════════════════════════════════
   MotoPlusForms — Frontend CSS
   ═══════════════════════════════════ */

.mpf-form-wrap {
    --mpf-bg: #09090b; --mpf-card: #18181b; --mpf-border: #27272a;
    --mpf-text: #e4e4e7; --mpf-label: #a1a1aa; --mpf-accent: #dc2626;
    --mpf-input-bg: #09090b; --mpf-radius: 10px; --mpf-font: inherit;
    font-family: var(--mpf-font);
}

.mpf-form { position: relative; }

/* Honeypot - multiple layers of hiding */
.mpf-hp { position:absolute!important; left:-9999px!important; top:-9999px!important; opacity:0!important; height:0!important; width:0!important; overflow:hidden!important; pointer-events:none!important; z-index:-1!important; }

.mpf-fields { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }

.mpf-field-50 { flex: 1 1 calc(50% - 8px); min-width: 220px; }
.mpf-field-100 { flex: 1 1 100%; }

.mpf-label {
    display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--mpf-label); margin-bottom: 7px;
}
.mpf-req { color: var(--mpf-accent); font-size: .85rem; margin-left: 2px; }

.mpf-input, .mpf-textarea, .mpf-select {
    width: 100%; padding: 12px 16px; background: var(--mpf-input-bg);
    border: 1px solid var(--mpf-border); border-radius: var(--mpf-radius);
    color: var(--mpf-text); font-size: .92rem; font-family: var(--mpf-font);
    outline: none; transition: border-color .25s, box-shadow .25s;
    -webkit-appearance: none; appearance: none;
}
.mpf-input:hover, .mpf-textarea:hover, .mpf-select:hover { border-color: #3f3f46; }
.mpf-input:focus, .mpf-textarea:focus, .mpf-select:focus {
    border-color: var(--mpf-accent);
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.mpf-input::placeholder, .mpf-textarea::placeholder { color: #52525b; }
.mpf-input.mpf-error, .mpf-textarea.mpf-error, .mpf-select.mpf-error { border-color: var(--mpf-accent); }

.mpf-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.mpf-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.mpf-select option { background: var(--mpf-card); color: var(--mpf-text); }

/* Checkbox / consent */
.mpf-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.mpf-check input[type="checkbox"] {
    width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
    -webkit-appearance: none; appearance: none; background: var(--mpf-input-bg);
    border: 2px solid var(--mpf-border); border-radius: 4px; cursor: pointer;
    position: relative; transition: all .2s;
}
.mpf-check input[type="checkbox"]:checked { background: var(--mpf-accent); border-color: var(--mpf-accent); }
.mpf-check input[type="checkbox"]:checked::after {
    content:''; position:absolute; top:2px; left:5px;
    width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.mpf-check input[type="checkbox"]:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.mpf-check-label { color: var(--mpf-label); font-size: .82rem; line-height: 1.5; }

/* Submit */
.mpf-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 15px 32px; background: var(--mpf-accent); color: #fff;
    border: none; border-radius: var(--mpf-radius); font-size: .95rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
    font-family: var(--mpf-font); transition: all .3s; position: relative; overflow: hidden;
}
.mpf-submit:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(220,38,38,.3); }
.mpf-submit:active { transform: translateY(0); }
.mpf-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.mpf-submit-loading svg { animation: mpf-spin .7s linear infinite; }
@keyframes mpf-spin { to { transform: rotate(360deg); } }

/* Submit shine effect */
.mpf-submit::after {
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    transition:left .6s ease;
}
.mpf-submit:hover::after { left: 120%; }

/* Alerts */
.mpf-alert { padding: 12px 16px; border-radius: var(--mpf-radius); font-size: .85rem; font-weight: 600; margin-bottom: 16px; }
.mpf-alert-error { background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.2); color: #fca5a5; }

/* Success */
.mpf-success { text-align: center; padding: 48px 24px; }
.mpf-success-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(34,197,94,.1); border: 2px solid rgba(34,197,94,.3);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; animation: mpf-pop .5s cubic-bezier(.175,.885,.32,1.275);
}
.mpf-success-icon svg { color: #22c55e; }
@keyframes mpf-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.mpf-success-text { color: var(--mpf-text); font-size: 1rem; line-height: 1.7; }

/* reCAPTCHA notice */
.mpf-recaptcha-notice { text-align: center; font-size: .7rem; color: #52525b; margin-top: 12px; }
.mpf-recaptcha-notice a { color: #71717a; text-decoration: underline; }

/* Responsive */
@media (max-width: 480px) {
    .mpf-field-50 { flex: 1 1 100%; }
    .mpf-submit { font-size: .85rem; padding: 14px 24px; }
}
@keyframes mpfSpin { to { transform: rotate(360deg); } }