/*
 * Styles for the embedded web form (app/Modules/Forms/resources/views/embed.blade.php).
 *
 * Served as a file rather than inlined so the page can run under a CSP of
 * style-src 'self' with no 'unsafe-inline'. The host we deploy to replaces
 * response headers set from PHP, so the policy has to come from .htaccess,
 * and a static file cannot carry a per-response nonce.
 */

:root {
    /* Transparent by default so the embed takes the colour of the page it
       sits in; a tenant who sets one is opting out of that. */
    --wm-bg: transparent;
    --wm-text: #171717;
    --wm-muted: #737373;
    --wm-field-bg: #ffffff;
    /* What the visitor types sits on the field background, not the page
       background, so it needs its own colour. Sharing one made a form with
       light labels on a dark page turn its own input text invisible. */
    --wm-field-text: #171717;
    --wm-field-border: #d4d4d4;
    --wm-accent: #4f46e5;
    --wm-accent-hover: #4338ca;
    --wm-accent-text: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 16px;
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--wm-text);
    background: var(--wm-bg);
}

.wm-field { margin-bottom: 14px; }
.wm-label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--wm-text); }
.wm-req { color: #dc2626; margin-left: 2px; }

.wm-input, .wm-select, .wm-textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    color: var(--wm-field-text);
    border: 1px solid var(--wm-field-border);
    border-radius: 8px;
    background: var(--wm-field-bg);
}

.wm-input:focus, .wm-select:focus, .wm-textarea:focus {
    outline: 2px solid var(--wm-accent);
    outline-offset: -1px;
    border-color: var(--wm-accent);
}

.wm-input::placeholder, .wm-textarea::placeholder { color: var(--wm-field-text); opacity: .5; }

.wm-phone { display: flex; gap: 8px; }
.wm-phone .wm-dial { width: 128px; flex: 0 0 auto; }

.wm-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--wm-text); }
.wm-check input { margin-top: 3px; flex: 0 0 auto; }

.wm-error { margin-top: 4px; font-size: 13px; color: #dc2626; }

.wm-submit {
    width: 100%;
    padding: 11px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--wm-accent-text);
    background: var(--wm-accent);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.wm-submit:hover { background: var(--wm-accent-hover); }
.wm-submit[disabled] { opacity: .6; cursor: default; }

.wm-done {
    padding: 18px 16px;
    text-align: center;
    font-size: 15px;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
}

.wm-failed {
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 14px;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

/*
 * The celebration after a successful send, for the forms whose owner asked
 * for one. Off unless settings.confetti is true, so the markup below is not
 * even rendered on a form that did not ask.
 *
 * Pure CSS, and it has to be: this file is also what dresses the form when it
 * is framed inside a landing page, and a landing page is served under
 * default-src 'none' with no script-src at all. There is nothing to trigger
 * here either — a CSS animation starts the moment its element stops being
 * display:none, and the script already unhides #wm-done when the answer comes
 * back. The sibling selector turns that one existing change into the cue.
 *
 * Fixed and clipped so it cannot push the message, stretch the iframe or
 * raise a scrollbar, and pointer-events:none so it cannot be clicked either.
 */
.wm-confetti {
    display: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

#wm-done:not([hidden]) + .wm-confetti { display: block; }

.wm-confetti span {
    position: absolute;
    top: -16px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    /* `both` holds the last frame, so nothing reappears when it is over. */
    animation: wm-confetti-fall 2.6s cubic-bezier(.2, .5, .5, 1) both;
}

/* One line per piece rather than an inline style attribute: style-src 'self'
   forbids those, and a stylesheet the browser already has costs nothing. */
.wm-confetti span:nth-child(1)  { left:  4%; animation-delay: .00s; background: #f43f5e; --wm-drift:  18px; }
.wm-confetti span:nth-child(2)  { left: 12%; animation-delay: .18s; background: #f59e0b; --wm-drift: -22px; }
.wm-confetti span:nth-child(3)  { left: 20%; animation-delay: .06s; background: #10b981; --wm-drift:  34px; }
.wm-confetti span:nth-child(4)  { left: 28%; animation-delay: .30s; background: #3b82f6; --wm-drift: -14px; }
.wm-confetti span:nth-child(5)  { left: 36%; animation-delay: .12s; background: #a855f7; --wm-drift:  26px; }
.wm-confetti span:nth-child(6)  { left: 44%; animation-delay: .40s; background: #f43f5e; --wm-drift: -30px; }
.wm-confetti span:nth-child(7)  { left: 52%; animation-delay: .02s; background: #f59e0b; --wm-drift:  12px; }
.wm-confetti span:nth-child(8)  { left: 60%; animation-delay: .26s; background: #10b981; --wm-drift: -26px; }
.wm-confetti span:nth-child(9)  { left: 68%; animation-delay: .10s; background: #3b82f6; --wm-drift:  30px; }
.wm-confetti span:nth-child(10) { left: 76%; animation-delay: .36s; background: #a855f7; --wm-drift: -18px; }
.wm-confetti span:nth-child(11) { left: 84%; animation-delay: .16s; background: #f43f5e; --wm-drift:  22px; }
.wm-confetti span:nth-child(12) { left: 92%; animation-delay: .44s; background: #f59e0b; --wm-drift: -34px; }
.wm-confetti span:nth-child(13) { left: 48%; animation-delay: .52s; background: #10b981; --wm-drift:  -8px; }
.wm-confetti span:nth-child(14) { left: 96%; animation-delay: .22s; background: #3b82f6; --wm-drift:  16px; }

.wm-confetti span:nth-child(even) { --wm-spin: -520deg; }

@keyframes wm-confetti-fall {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
    12%  { opacity: 1; }
    85%  { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate3d(var(--wm-drift, 0), calc(100vh + 32px), 0) rotate(var(--wm-spin, 520deg));
    }
}

/* Not `animation: none`: with the animation gone the pieces would simply sit
   there as coloured bars across the message. Somebody who asked their system
   for less movement gets no confetti at all, which is the point. */
@media (prefers-reduced-motion: reduce) {
    #wm-done:not([hidden]) + .wm-confetti { display: none; }
}

/* Off-screen rather than display:none — bots skip hidden inputs. */
.wm-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}



/* Shown only in the panel's preview, where submitting is disabled. */
.wm-preview-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--wm-muted);
}

/* In preview the submit is disabled, so it must not look pressable — but it
   kept its own grey, which hid the colour the tenant had just chosen for it.
   The cursor and the dimming say "not now" without hiding the choice. */
.wm-submit[disabled] {
    cursor: not-allowed;
}