.atqf-wrap {
--atqf-accent: oklch(0.32 0.09 240);
--atqf-text: oklch(0.22 0.02 240);
--atqf-muted: oklch(0.5 0.02 240);
--atqf-border: oklch(0.85 0.01 240);
--atqf-card-bg: #ffffff;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--atqf-text);
display: flex;
justify-content: center;
padding: 8px 0 40px;
box-sizing: border-box;
}
.atqf-wrap *,
.atqf-wrap *::before,
.atqf-wrap *::after { box-sizing: border-box; } .atqf-wrap [hidden] { display: none !important; }
.atqf-inner { width: 100%; max-width: 720px; } .atqf-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.atqf-logo-img { max-height: 48px; width: auto; display: block; }
.atqf-logo-mark {
width: 40px; height: 40px;
background: var(--atqf-accent);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.atqf-logo-mark span {
width: 20px; height: 12px;
border: 2px solid #fff; border-top: none;
border-radius: 0 0 3px 3px;
}
.atqf-logo-name {
font-family: 'Oswald', sans-serif;
font-weight: 700; font-size: 20px;
letter-spacing: 0.3px; line-height: 1;
}
.atqf-logo-tag { font-size: 12px; color: var(--atqf-muted); margin-top: 2px; } .atqf-steps { display: flex; gap: 8px; margin-bottom: 28px; }
.atqf-step-pill { flex: 1; }
.atqf-step-bar {
height: 4px; border-radius: 2px;
background: oklch(0.9 0.005 240);
margin-bottom: 8px;
transition: background .2s;
}
.atqf-step-label {
font-size: 12px; font-weight: 600;
color: oklch(0.65 0.01 240);
text-transform: uppercase; letter-spacing: 0.4px;
}
.atqf-step-pill.is-active .atqf-step-bar { background: var(--atqf-accent); }
.atqf-step-pill.is-active .atqf-step-label { color: var(--atqf-accent); } .atqf-card {
position: relative;
background: var(--atqf-card-bg);
border-radius: 10px;
padding: 36px;
border: 1px solid oklch(0.82 0.015 240);
box-shadow: 0 4px 16px oklch(0.4 0.03 240 / 0.12);
}
.atqf-panel-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; margin-bottom: 4px; }
.atqf-panel-sub { font-size: 14px; color: var(--atqf-muted); margin-bottom: 24px; } .atqf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.atqf-grid-2.atqf-gap-lg { gap: 24px; margin-bottom: 8px; }
.atqf-col-full { grid-column: 1 / -1; }
.atqf-mb-20 { margin-bottom: 20px; }
.atqf-mt-8 { margin-top: 8px; } .atqf-contact-hint {
grid-column: 1 / -1;
margin-top: -4px;
font-size: 12.5px;
color: var(--atqf-muted);
} .atqf-options-note {
display: flex;
background: oklch(0.965 0.015 240);
border: 1px solid oklch(0.9 0.02 240);
border-left: 4px solid var(--atqf-accent);
border-radius: 8px;
padding: 16px 18px;
margin-bottom: 24px;
}
.atqf-options-note-text {
font-size: 13.5px;
line-height: 1.55;
color: oklch(0.35 0.02 240);
}
.atqf-options-link {
display: inline-block;
margin-top: 12px;
font-weight: 600;
font-size: 13px;
color: #fff;
background: var(--atqf-accent);
padding: 9px 16px;
border-radius: 6px;
text-decoration: none;
}
.atqf-options-link:hover { filter: brightness(1.12); } .atqf-label {
display: block; font-size: 12px; font-weight: 600;
color: oklch(0.4 0.02 240); margin-bottom: 6px;
text-transform: uppercase; letter-spacing: 0.3px;
}
.atqf-input {
width: 100%;
font-family: 'Inter', sans-serif; font-size: 14px;
padding: 10px 12px; border-radius: 6px;
border: 1px solid var(--atqf-border);
background: #fff; color: var(--atqf-text);
}
.atqf-input:focus { outline: 2px solid var(--atqf-accent); outline-offset: -1px; border-color: var(--atqf-accent); }
.atqf-input::placeholder { color: oklch(0.6 0.01 240); }
.atqf-textarea { resize: vertical; min-height: 74px; } .atqf-req { color: oklch(0.55 0.19 25); font-weight: 700; }
.atqf-invalid .atqf-input {
border-color: oklch(0.6 0.18 25);
background: oklch(0.985 0.012 25);
}
.atqf-invalid > .atqf-label { color: oklch(0.5 0.18 25); }
.atqf-invalid .atqf-radio-row,
.atqf-invalid .atqf-radio-wrap,
.atqf-invalid .atqf-radio-col {
outline: 1px solid oklch(0.75 0.12 25);
outline-offset: 6px;
border-radius: 4px;
} .atqf-radio-row { display: flex; align-items: center; gap: 16px; }
.atqf-radio-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 6px; }
.atqf-radio-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; }
.atqf-radio {
display: inline-flex; align-items: center; gap: 7px;
font-size: 14px; line-height: 1.2; color: oklch(0.3 0.02 240);
cursor: pointer; margin: 0;
}
.atqf-radio input {
accent-color: var(--atqf-accent);
width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
vertical-align: middle;
} .atqf-dealer-box {
margin-top: 20px; padding: 20px;
background: oklch(0.97 0.01 240);
border-radius: 8px;
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.atqf-needby { margin-bottom: 20px; max-width: 220px; } .atqf-hp { position: absolute; left: -9999px; } .atqf-error {
margin-top: 20px; font-size: 14px; color: oklch(0.5 0.18 25);
background: oklch(0.96 0.03 25); border: 1px solid oklch(0.85 0.06 25);
padding: 10px 14px; border-radius: 6px;
}
.atqf-actions {
display: flex; align-items: center;
margin-top: 32px; padding-top: 24px;
border-top: 1px solid oklch(0.93 0.005 240);
}
.atqf-spacer { flex: 1; }
.atqf-btn {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
border-radius: 6px; cursor: pointer; border: none;
}
.atqf-btn-primary { padding: 12px 26px; background: var(--atqf-accent); color: #fff; }
.atqf-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.atqf-btn-secondary {
padding: 12px 20px; background: #fff;
border: 1px solid var(--atqf-border); color: oklch(0.35 0.02 240);
}
.atqf-footnote { text-align: center; font-size: 12px; color: oklch(0.6 0.01 240); margin-top: 16px; } .atqf-success {
background: #fff; border-radius: 10px;
padding: 56px 40px; text-align: center;
box-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
}
.atqf-check-circle {
width: 64px; height: 64px; border-radius: 50%;
background: oklch(0.32 0.09 240 / 0.1);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
}
.atqf-check {
width: 24px; height: 14px;
border-left: 3px solid var(--atqf-accent);
border-bottom: 3px solid var(--atqf-accent);
transform: rotate(-45deg) translate(2px, -2px);
}
.atqf-success-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 28px; margin-bottom: 10px; }
.atqf-success-body { font-size: 15px; color: oklch(0.45 0.02 240); max-width: 440px; margin: 0 auto 6px; line-height: 1.5; }
.atqf-success .atqf-btn-secondary { color: var(--atqf-accent); margin-top: 22px; }
.atqf-is-busy { pointer-events: none; } .atqf-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: oklch(1 0 0 / 0.82);
border-radius: 10px;
z-index: 5;
}
.atqf-overlay-text {
font-size: 15px;
font-weight: 600;
color: var(--atqf-accent);
letter-spacing: 0.2px;
}
.atqf-spinner {
width: 40px;
height: 40px;
border: 4px solid oklch(0.85 0.02 240);
border-top-color: var(--atqf-accent);
border-radius: 50%;
animation: atqf-spin 0.8s linear infinite;
}
@keyframes atqf-spin { to { transform: rotate(360deg); } } .atqf-btn-spinner {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 8px;
vertical-align: -2px;
border: 2px solid oklch(1 0 0 / 0.45);
border-top-color: #fff;
border-radius: 50%;
animation: atqf-spin 0.7s linear infinite;
} @media (max-width: 560px) {
.atqf-card { padding: 24px 20px; }
.atqf-grid-2, .atqf-grid-2.atqf-gap-lg, .atqf-dealer-box { grid-template-columns: 1fr; }
.atqf-step-label { font-size: 10px; }
}