/* * Embeddable scheduling widget (task 038). * * Self-contained — does not depend on base.css / variables.css because the * widget renders inside a third-party iframe and shouldn't pull in the * full tenant/portal stylesheet. Brand colours come from --brand-primary * and --brand-secondary, which the widget's sets per tenant. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--brand-secondary, #f5f5f5); color: #1e293b; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.4; } .sw-widget { max-width: 640px; margin: 0 auto; padding: 24px 16px 32px; } .sw-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .sw-logo { height: 48px; width: auto; object-fit: contain; } .sw-shop-name { font-size: 1.25rem; font-weight: 600; } .sw-main { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .sw-footer { margin-top: 16px; font-size: 0.75rem; color: #64748b; text-align: center; } .sw-step-title { margin: 0 0 8px; font-size: 1.5rem; } .sw-step-help { margin: 0 0 24px; color: #475569; } .sw-form { display: flex; flex-direction: column; gap: 24px; } .sw-fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .sw-legend { font-weight: 600; margin-bottom: 8px; padding: 0; } .sw-option { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: border-color 0.1s, background 0.1s; } .sw-option:hover { border-color: var(--brand-primary, #1A73E8); background: #f8fafc; } .sw-option input[type="radio"] { accent-color: var(--brand-primary, #1A73E8); } .sw-option-label { display: flex; flex-direction: column; } .sw-option-title { font-weight: 600; } .sw-option-meta { color: #64748b; font-size: 0.875rem; } .sw-field { display: flex; flex-direction: column; gap: 6px; } .sw-field-label { font-weight: 600; font-size: 0.875rem; } .sw-field input, .sw-field textarea, .sw-field select { padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; color: #1e293b; width: 100%; } .sw-field input:focus, .sw-field textarea:focus, .sw-field select:focus { outline: 2px solid var(--brand-primary, #1A73E8); outline-offset: -1px; } .sw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .sw-error { color: #b91c1c; font-size: 0.875rem; } .sw-empty { color: #64748b; } .sw-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; } .sw-btn-primary, .sw-btn-secondary { padding: 12px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .sw-btn-primary { background: var(--brand-primary, #1A73E8); color: #fff; } .sw-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .sw-btn-secondary { background: transparent; color: var(--brand-primary, #1A73E8); border-color: #cbd5e1; } .sw-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 24px; font-size: 0.75rem; color: #94a3b8; } .sw-step { flex: 1; text-align: center; padding: 6px 0; border-top: 3px solid #e2e8f0; text-transform: uppercase; letter-spacing: 0.04em; } .sw-step.is-current { border-top-color: var(--brand-primary, #1A73E8); color: var(--brand-primary, #1A73E8); font-weight: 600; } .sw-step.is-done { border-top-color: var(--brand-primary, #1A73E8); color: #475569; } .sw-days { display: flex; flex-direction: column; gap: 16px; } .sw-day-title { font-size: 1rem; margin: 0 0 8px; color: #475569; } .sw-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; } .sw-slot { display: block; text-align: center; padding: 10px 8px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; font-variant-numeric: tabular-nums; } .sw-slot input[type="radio"] { display: none; } .sw-slot:hover { border-color: var(--brand-primary, #1A73E8); } .sw-slot input[type="radio"]:checked + span { color: var(--brand-primary, #1A73E8); font-weight: 600; } .sw-slot:has(input[type="radio"]:checked) { border-color: var(--brand-primary, #1A73E8); background: rgba(26,115,232,0.06); } .sw-summary { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; padding: 16px; background: #f8fafc; border-radius: 8px; } .sw-summary > div { display: flex; justify-content: space-between; gap: 16px; } .sw-summary dt { color: #64748b; font-weight: 500; margin: 0; } .sw-summary dd { margin: 0; text-align: right; font-weight: 600; } .sw-vehicle-fields { margin-top: 12px; padding: 16px; background: #f8fafc; border-radius: 8px; display: flex; flex-direction: column; gap: 12px; } .sw-success-card { text-align: center; }