/* ============================================================
   MyBotPlus — Contact form styles
   assets/css/forms.css
   ============================================================

   Two jobs, one file:

     1. the hosted page at /f/KEY and the iframe embed
     2. the inline embed, injected into somebody else's website

   Job 2 is why every selector here is prefixed .cf- and why nothing styles a
   bare element. This stylesheet lands inside a stranger's page next to their
   own CSS, and a rule on `input` or `button` would silently restyle their
   site. The customer would blame us and be right.

   Colours come from --cf-accent, set on the wrapper by cf_render_html() from
   the value the owner picked. Everything else is a neutral that reads as
   deliberate on a white card and on a dark one.
   ============================================================ */

.cf-form-wrap {
    --cf-accent: #00346C;
    --cf-text: #0f172a;
    --cf-muted: #64748b;
    --cf-line: #d8dee9;
    --cf-line-strong: #94a3b8;
    --cf-bg: #ffffff;
    --cf-field-bg: #ffffff;
    --cf-error: #dc2626;
    --cf-radius: 10px;

    box-sizing: border-box;
    max-width: 640px;
    margin: 0 auto;
    color: var(--cf-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, "Noto Sans", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

.cf-form-wrap *,
.cf-form-wrap *::before,
.cf-form-wrap *::after { box-sizing: border-box; }

/* ── Heading ───────────────────────────────────────────────── */

.cf-form-head { margin-bottom: 1.5rem; }

.cf-form-title {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cf-text);
}

.cf-form-intro {
    margin: 0;
    color: var(--cf-muted);
    font-size: .95rem;
}

/* ── Layout ────────────────────────────────────────────────── */

.cf-form { margin: 0; }

.cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cf-field { min-width: 0; }
.cf-field.cf-full { grid-column: 1 / -1; }

/* One column on a narrow screen — and on a narrow CONTAINER, because the
   inline embed often sits in a 380px sidebar on a 1440px monitor, where a
   media query would still show two columns. */
@media (max-width: 560px) {
    .cf-grid { grid-template-columns: minmax(0, 1fr); }
}
@supports (container-type: inline-size) {
    .cf-form-wrap { container-type: inline-size; }
    @container (max-width: 480px) {
        .cf-grid { grid-template-columns: minmax(0, 1fr); }
    }
}

/* ── Labels and inputs ─────────────────────────────────────── */

.cf-label {
    display: block;
    margin-bottom: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #334155;
}

.cf-req { color: var(--cf-error); }

.cf-input {
    display: block;
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-field-bg);
    color: var(--cf-text);
    font: inherit;
    line-height: 1.4;

    /* iOS zooms the page in when a focused field is under 16px. Setting the
       base to 15px and bumping only the control is what keeps the layout
       compact without the zoom. */
    font-size: 16px;

    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}

.cf-input::placeholder { color: #a3aec0; }

.cf-input:hover:not(:focus) { border-color: var(--cf-line-strong); }

.cf-input:focus {
    outline: none;
    border-color: var(--cf-accent);
    /* colour-mix keeps the focus ring in the owner's accent without needing
       a second stored colour. Browsers without it fall back to the plain
       border change above, which is still a visible focus state. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 22%, transparent);
}

.cf-textarea { min-height: 130px; resize: vertical; }

.cf-select {
    /* Room for the chevron, which is a background image so no extra element
       is needed inside the customer's markup. */
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 1.1em;
    cursor: pointer;
}

/* ── Choices ───────────────────────────────────────────────── */

.cf-choices {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .125rem;
}

.cf-choice {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .7rem;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    cursor: pointer;
    font-size: .9375rem;
    transition: border-color .15s, background-color .15s;
}

.cf-choice:hover { border-color: var(--cf-line-strong); }

.cf-choice input {
    margin: .18rem 0 0;
    accent-color: var(--cf-accent);
    flex-shrink: 0;
}

.cf-choice:has(input:checked) {
    border-color: var(--cf-accent);
    background: color-mix(in srgb, var(--cf-accent) 6%, transparent);
}

.cf-choice-single { border: 0; padding: .25rem 0; }
.cf-choice-single:hover { border: 0; }
.cf-choice-single:has(input:checked) { background: none; }

/* ── Help and errors ───────────────────────────────────────── */

.cf-help {
    margin: .375rem 0 0;
    font-size: .8125rem;
    color: var(--cf-muted);
}

.cf-error {
    margin: .375rem 0 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cf-error);
}

.cf-field.has-error .cf-input,
.cf-field.has-error .cf-choice { border-color: var(--cf-error); }

.cf-alert {
    margin: 0 0 1.25rem;
    padding: .75rem 1rem;
    border-radius: var(--cf-radius);
    font-size: .9375rem;
}

.cf-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.cf-alert-ok {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

/* ── Honeypot ──────────────────────────────────────────────── */
/* Not display:none. A well-written bot skips a field that is display:none or
   type=hidden; this one is genuinely in the layout and genuinely invisible,
   and it is removed from the tab order and the accessibility tree by the
   markup around it. */
.cf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ── Submit ────────────────────────────────────────────────── */

.cf-actions { margin-top: 1.25rem; }

.cf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.6rem;
    border: 0;
    border-radius: var(--cf-radius);
    background: var(--cf-accent);
    color: #fff;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .05s, box-shadow .15s;
}

.cf-submit:hover { filter: brightness(1.08); }
.cf-submit:active { transform: translateY(1px); }

.cf-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 35%, transparent);
}

.cf-submit[disabled] { opacity: .6; cursor: progress; filter: none; }

.cf-branding {
    margin: 1.25rem 0 0;
    font-size: .75rem;
    color: #94a3b8;
    text-align: center;
}

.cf-branding a { color: inherit; text-decoration: none; border-bottom: 1px solid #cbd5e1; }
.cf-branding a:hover { color: var(--cf-accent); }

/* ── The success state ─────────────────────────────────────── */

.cf-done { padding: 2.5rem 1rem; text-align: center; }

.cf-done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cf-accent) 12%, transparent);
    color: var(--cf-accent);
    font-size: 26px;
    line-height: 1;
}

.cf-done-title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; }
.cf-done-text  { margin: 0; color: var(--cf-muted); }

/* ── The hosted page around the form ───────────────────────── */
/* Only used by /f/KEY and the standalone result page. The inline embed never
   loads these rules against a body it does not own. */

.cf-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #f1f5f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, "Noto Sans", sans-serif;
}

.cf-page-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 3rem 1rem 4rem;
}

.cf-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .12);
}

@media (max-width: 560px) {
    .cf-page-inner { padding: 1.5rem 1rem 3rem; }
    .cf-card { padding: 1.5rem 1.25rem; border-radius: 12px; }
}

/* The embed=1 view sits inside an iframe on someone else's page, so it must
   not paint its own background or add a card around a card. */
.cf-page.is-embed { background: transparent; min-height: 0; }
.cf-page.is-embed .cf-page-inner { padding: .25rem; max-width: none; }
.cf-page.is-embed .cf-card { border: 0; box-shadow: none; padding: 0; background: transparent; }

.cf-page-brand {
    display: block;
    margin: 0 auto 1.75rem;
    text-align: center;
}

.cf-page-brand img { height: 34px; width: auto; }

.cf-paused {
    max-width: 480px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #475569;
}

.cf-paused h1 { margin: 0 0 .5rem; font-size: 1.25rem; color: #0f172a; }
.cf-paused p  { margin: 0; font-size: .9375rem; }

/* ── Dark mode ─────────────────────────────────────────────── */
/* Only the hosted page opts in. The inline embed inherits whatever the host
   site does, and forcing a dark card onto a light page is worse than doing
   nothing. */

@media (prefers-color-scheme: dark) {
    .cf-page { background: #0b1220; }

    .cf-page .cf-card {
        background: #111a2e;
        border-color: #1f2b45;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
    }

    .cf-page .cf-form-wrap {
        --cf-text: #e8edf6;
        --cf-muted: #94a3b8;
        --cf-line: #2a3653;
        --cf-line-strong: #3d4c6f;
        --cf-field-bg: #0e1729;
        --cf-error: #f87171;
    }

    .cf-page .cf-label { color: #cbd5e1; }
    .cf-page .cf-input::placeholder { color: #64748b; }
    .cf-page .cf-alert-error { background: #2a1416; border-color: #7f1d1d; color: #fca5a5; }
    .cf-page .cf-branding a { border-bottom-color: #334155; }
    .cf-page .cf-paused { color: #94a3b8; }
    .cf-page .cf-paused h1 { color: #e8edf6; }
}