#drof-order-form { --drof-rose: #f43f5e; --drof-rose-dark: #e11d48; --drof-gray-text: #374151; --drof-gray-muted: #6b7280; --drof-gray-border: #e5e7eb; --drof-green-bg: #f0fdf4; --drof-green-border: #bbf7d0; --drof-green-text: #15803d; --drof-red-bg: #fef2f2; --drof-red-border: #fecaca; --drof-red-text: #b91c1c; all: initial; * { box-sizing: border-box; } display: block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--drof-gray-text); font-size: 16px; line-height: 1.5; } /* Stop the browser 'helpfully' re-adjusting scroll position when our screens are hidden/shown — scroll anchoring is evaluated against the page's actual scroll container (the theme's , not this widget), so we opt every element inside out individually rather than relying on setting this once on the root. */ #drof-order-form, #drof-order-form * { overflow-anchor: none; } #drof-order-form .drof-card { width: 100%; max-width: 32rem; margin: 0 auto; padding: 32px; } #drof-order-form h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 4px; color: #111827; } #drof-order-form .drof-subtitle { font-size: .875rem; color: var(--drof-gray-muted); margin: 0 0 24px; } #drof-order-form .drof-option-box { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin-bottom: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, border-color .15s, background .15s; } #drof-order-form .drof-option-header { cursor: pointer; } #drof-order-form .drof-option-title { font-weight: 400; color: #111827; font-size: 1.05rem; } #drof-order-form .drof-option-desc { font-size: .875rem; color: var(--drof-gray-muted); margin-top: 2px; } #drof-order-form .drof-option-box.drof-clickable:hover { border-color: var(--drof-rose); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06); } #drof-order-form .drof-option-box.drof-clickable:hover .drof-option-title { color: var(--drof-rose-dark); } #drof-order-form .drof-hosting-choice.drof-selected, #drof-order-form button.drof-hosting-option.drof-selected { border-color: var(--drof-rose); background: #fff5f6; } #drof-order-form .drof-field-row { display: flex; gap: 8px; } #drof-order-form input[type=text], #drof-order-form input[type=email], #drof-order-form textarea { border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px; font-size: .875rem; outline: none; font-family: inherit; color: var(--drof-gray-text); background: #fff; } #drof-order-form input[type=text], #drof-order-form input[type=email] { flex: 1; min-width: 0; } #drof-order-form textarea { width: 100%; resize: vertical; } #drof-order-form input:focus, #drof-order-form textarea:focus { border-color: var(--drof-rose); box-shadow: 0 0 0 2px rgba(244,63,94,.2); } #drof-order-form .drof-field-label { font-size: .875rem; font-weight: 500; display: block; margin-bottom: 6px; } #drof-order-form .drof-btn { display: inline-block; border: none; border-radius: 8px; padding: 10px 16px; font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .15s; color: #fff; text-align: center; font-family: inherit; } #drof-order-form .drof-btn-block { display: block; width: 100%; } #drof-order-form .drof-btn-gray { background: #f3f4f6; color: #1f2937; } #drof-order-form .drof-btn-gray:hover { background: #e5e7eb; } #drof-order-form .drof-btn-maroon { background: #a3242f; color: #fff; } #drof-order-form .drof-btn-maroon:hover { background: #861d26; } #drof-order-form .drof-btn-black { background: #000; color: #fff; } #drof-order-form .drof-btn-black:hover { background: #262626; } #drof-order-form .drof-btn:disabled { opacity: .5; cursor: default; } #drof-order-form .drof-btn-black:disabled { background: #9ca3af; color: #fff; opacity: 1; cursor: default; } #drof-order-form .drof-error-text { color: var(--drof-red-text); font-size: .875rem; margin-top: 8px; } #drof-order-form .drof-checking-text { font-size: .875rem; color: var(--drof-gray-muted); margin-top: 10px; } #drof-order-form .drof-result-box { border-radius: 8px; padding: 12px 14px; margin-top: 10px; } #drof-order-form .drof-result-available { background: var(--drof-green-bg); border: 1px solid var(--drof-green-border); } #drof-order-form .drof-result-unavailable { background: var(--drof-red-bg); border: 1px solid var(--drof-red-border); } #drof-order-form .drof-result-domain { font-weight: 500; color: #111827; font-size: .9rem; } #drof-order-form .drof-result-status { font-size: .8rem; margin-top: 2px; } #drof-order-form .drof-result-status.drof-available { color: var(--drof-green-text); } #drof-order-form .drof-result-status.drof-unavailable { color: var(--drof-red-text); } #drof-order-form .drof-hidden { display: none; } #drof-order-form .drof-space-y > * + * { margin-top: 12px; } #drof-order-form .drof-expand-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--drof-gray-border); } #drof-order-form button.drof-hosting-option { display: block; width: 100%; text-align: left; background: #fff; cursor: pointer; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; font-family: inherit; font-size: 1.05rem; font-weight: 400; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); transition: border-color .15s, background .15s, box-shadow .15s; } #drof-order-form button.drof-hosting-option:hover { border-color: var(--drof-rose); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06); } #drof-debug-panel { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: #111827; color: #e5e7eb; font-family: monospace; font-size: 12px; padding: 16px; max-height: 280px; overflow: auto; z-index: 999999; border-top: 4px solid #facc15; } #drof-debug-panel pre { white-space: pre-wrap; margin: 0; } #drof-debug-panel .drof-debug-label { color: #facc15; font-weight: bold; margin-bottom: 8px; } #drof-debug-panel button { margin-top: 12px; background: #facc15; color: #000; border: none; padding: 6px 12px; border-radius: 6px; font-family: system-ui, sans-serif; font-weight: 500; cursor: pointer; }