/* ════════════════════════════════════════════════════════════════
   BloomList — Template 9 "Universal" + auto-insert wrapper
   Niche-agnostic. All colour comes from CSS custom properties so a
   single template works on a food, fashion, nail-art or tech blog.
   ════════════════════════════════════════════════════════════════ */

.blml-t9 {
    --blml-radius: 16px;
    --blml-ink:       var(--blml-text, #1C1917);
    --blml-muted:     var(--blml-secondary, #57534E);
    --blml-brand:     var(--blml-accent, #0F766E);
    --blml-paper:     var(--blml-card, #FAF9F7);
    --blml-line:      color-mix(in srgb, var(--blml-ink) 12%, transparent);

    font-family: var(--blml-font, 'DM Sans', system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--blml-ink);
    background: var(--blml-bg, #FFFFFF);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
    .blml-t9 { --blml-line: rgba(0,0,0,.12); }
}

.blml-t9 * { text-align: inherit; }
.blml-t9 .blml-heading,
.blml-t9 .blml-sub { text-wrap: pretty; }

/* ── Auto-inserted wrapper: spacing + CLS safety ─────────────── */
.blml-auto {
    margin: 2.6em 0;
    clear: both;
    contain: layout style;
}
.blml-auto.is-hidden { display: none !important; }

/* ════════════════════════════════════════════════════════
   VARIANT: BANNER — the anchor form, best used first
   ════════════════════════════════════════════════════════ */
.blml-v-banner {
    border: 1px solid var(--blml-line);
    border-radius: var(--blml-radius);
    padding: 34px 32px;
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--blml-brand) 7%, transparent) 0%, transparent 55%),
        var(--blml-paper);
    position: relative;
    overflow: hidden;
}
.blml-v-banner::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg,
        var(--blml-brand),
        color-mix(in srgb, var(--blml-brand) 45%, #fff));
}
.blml-v-banner .blml-t9-inner { display: grid; gap: 22px; }

/* Container queries: the two-column layout should depend on the space the
   form itself actually has, not the browser window. A wide viewport with a
   narrow sidebar widget must not trigger a desktop-width layout. */
.blml-v-banner { container-type: inline-size; container-name: blml-banner; }

@container blml-banner (min-width: 480px) {
    .blml-v-banner .blml-t9-inner {
        grid-template-columns: 1.05fr 1fr;
        gap: 34px;
        align-items: center;
    }
}

/* Fallback for browsers without container query support (pre Safari 16 /
   pre Chrome 105) — degrades to the old viewport-based check. */
@supports not (container-type: inline-size) {
    @media (min-width: 720px) {
        .blml-v-banner .blml-t9-inner {
            grid-template-columns: 1.05fr 1fr;
            gap: 34px;
            align-items: center;
        }
    }
}

.blml-v-banner .blml-badge-el {
    display: inline-block;
    font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--blml-brand);
    background: color-mix(in srgb, var(--blml-brand) 11%, transparent);
    padding: 5px 11px; border-radius: 999px; margin-bottom: 13px;
}
.blml-v-banner .blml-heading {
    font-size: clamp(21px, 3.1vw, 27px);
    font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
    margin: 0 0 9px; color: var(--blml-ink);
}
.blml-v-banner .blml-sub {
    font-size: 15px; line-height: 1.6; color: var(--blml-muted); margin: 0;
}

.blml-t9-bullets { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.blml-t9-bullets li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 14px; line-height: 1.45; color: var(--blml-muted);
}
.blml-t9-check {
    flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
    background: color-mix(in srgb, var(--blml-brand) 14%, transparent);
    position: relative;
}
.blml-t9-check::after {
    content: ''; position: absolute; left: 5.5px; top: 4px;
    width: 4px; height: 8px; border: solid var(--blml-brand);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ════════════════════════════════════════════════════════
   VARIANT: INLINE — compact mid-post strip
   ════════════════════════════════════════════════════════ */
.blml-v-inline {
    border: 1px solid var(--blml-line);
    border-left: 3px solid var(--blml-brand);
    border-radius: 12px;
    padding: 24px 24px;
    background: var(--blml-paper);
}
.blml-v-inline .blml-t9-inner { display: grid; gap: 16px; }
.blml-v-inline { container-type: inline-size; container-name: blml-inline; }

@container blml-inline (min-width: 480px) {
    .blml-v-inline .blml-t9-inner { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
}

@supports not (container-type: inline-size) {
    @media (min-width: 760px) {
        .blml-v-inline .blml-t9-inner { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
    }
}
.blml-v-inline .blml-badge-el {
    display: inline-block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--blml-brand); margin-bottom: 8px;
}
.blml-v-inline .blml-heading {
    font-size: clamp(18px, 2.4vw, 21px); font-weight: 700; line-height: 1.25;
    letter-spacing: -.01em; margin: 0 0 6px; color: var(--blml-ink);
}
.blml-v-inline .blml-sub { font-size: 14px; line-height: 1.55; color: var(--blml-muted); margin: 0; }

/* ════════════════════════════════════════════════════════
   VARIANT: MINIMAL — hairline rules, lowest visual weight
   ════════════════════════════════════════════════════════ */
.blml-v-minimal {
    border-top: 2px solid var(--blml-ink);
    border-bottom: 1px solid var(--blml-line);
    padding: 22px 0 20px;
    background: transparent;
    text-align: center;
}
.blml-v-minimal .blml-t9-inner { display: grid; gap: 14px; justify-items: center; }
.blml-t9-eyebrow {
    display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--blml-brand); margin-bottom: 7px;
}
.blml-v-minimal .blml-heading {
    font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; line-height: 1.3;
    margin: 0; color: var(--blml-ink);
}
.blml-v-minimal .blml-t9-action { width: 100%; max-width: 460px; }
.blml-v-minimal .blml-note { text-align: center; }

/* ════════════════════════════════════════════════════════
   SHARED FORM CONTROLS
   ════════════════════════════════════════════════════════ */
.blml-t9 .blml-t9-row { display: grid; gap: 9px; }
.blml-t9-action { container-type: inline-size; container-name: blml-action; }

/* 380px: enough room for email + button side by side.
   520px: a third field (name) needs more room before it's worth going
   horizontal — below that it stays stacked rather than squeezing text. */
@container blml-action (min-width: 380px) {
    .blml-t9 .blml-t9-row { grid-template-columns: 1fr auto; }
}
@container blml-action (min-width: 520px) {
    .blml-t9 .blml-t9-row:has(.blml-input-name) { grid-template-columns: 1fr 1fr auto; }
}

@supports not (container-type: inline-size) {
    @media (min-width: 620px) {
        .blml-t9 .blml-t9-row { grid-template-columns: 1fr auto; }
    }
    @media (min-width: 820px) {
        .blml-t9 .blml-t9-row:has(.blml-input-name) { grid-template-columns: 1fr 1fr auto; }
    }
}

.blml-t9 .blml-input {
    width: 100%;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--blml-ink) 16%, transparent);
    border-radius: 10px;
    padding: 13px 15px;
    font: inherit; font-size: 15px;
    color: var(--blml-ink);
    transition: border-color .18s, box-shadow .18s;
    min-height: 48px;           /* comfortable mobile tap target */
    min-width: 0;                /* let grid shrink it instead of overflowing */
    text-overflow: ellipsis;     /* graceful clip if space is ever this tight */
}
.blml-t9 .blml-input::placeholder { color: color-mix(in srgb, var(--blml-muted) 62%, transparent); }
.blml-t9 .blml-input:focus-visible,
.blml-t9 .blml-input:focus {
    outline: none;
    border-color: var(--blml-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blml-brand) 16%, transparent);
}

.blml-t9 .blml-btn-submit {
    background: var(--blml-brand);
    color: #fff; border: none; border-radius: 10px;
    padding: 13px 24px;
    font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
    cursor: pointer; white-space: nowrap; min-height: 48px;
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.blml-t9 .blml-btn-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--blml-brand) 30%, transparent);
}
.blml-t9 .blml-btn-submit:active { transform: translateY(0); }
.blml-t9 .blml-btn-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--blml-brand) 45%, transparent); outline-offset: 2px; }
.blml-t9 .blml-btn-submit[disabled] { opacity: .62; cursor: wait; transform: none; box-shadow: none; }

.blml-t9 .blml-note {
    font-size: 12px; line-height: 1.5;
    color: color-mix(in srgb, var(--blml-muted) 80%, transparent);
    margin: 11px 0 0;
}
.blml-t9 .blml-error-msg {
    display: none; font-size: 13px; margin-top: 9px; padding: 9px 13px;
    border-radius: 8px; border-left: 3px solid #D63638;
    background: rgba(214,54,56,.07); color: #B32D2E;
}

.blml-t9-consent {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 11px; font-size: 12.5px; line-height: 1.5; color: var(--blml-muted);
    cursor: pointer;
}
.blml-t9-consent input { margin-top: 2px; accent-color: var(--blml-brand); flex: 0 0 auto; }

/* Success state */
.blml-t9 .blml-success { display: none; text-align: center; padding: 26px 16px; }
.blml-t9 .blml-success-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: color-mix(in srgb, var(--blml-brand) 13%, transparent);
    color: var(--blml-brand); font-size: 22px; margin-bottom: 12px;
}
.blml-t9 .blml-success-title { font-size: 17px; font-weight: 700; color: var(--blml-ink); margin-bottom: 5px; }
.blml-t9 .blml-success-sub   { font-size: 14px; color: var(--blml-muted); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 559px) {
    .blml-v-banner { padding: 26px 20px; }
    .blml-v-inline { padding: 20px 18px; }
    .blml-t9 .blml-btn-submit { width: 100%; }
}

/* ── Respect reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .blml-t9 *, .blml-t9 *::before, .blml-t9 *::after {
        transition: none !important; animation: none !important;
    }
    .blml-t9 .blml-btn-submit:hover { transform: none; }
}

/* ── Dark theme support (opt-in via body class or media query) ── */
@media (prefers-color-scheme: dark) {
    .blml-t9.blml-auto-dark {
        --blml-ink: #F5F5F4;
        --blml-muted: #A8A29E;
        --blml-paper: #1C1917;
        --blml-bg: #0C0A09;
        --blml-line: rgba(255,255,255,.14);
    }
    .blml-t9.blml-auto-dark .blml-input { background: #262322; color: #F5F5F4; }
}