/* Agency registration: a page of its own — top bar, hero with the steps,
   three cards side by side, the features strip. Filament's form fields
   live inside the cards and are restyled to the mock. */
.reg { min-height: 100vh; background: #f6f8fc; color: var(--fs-ink, #101828); display: flex; flex-direction: column; }
.dark .reg { background: #12151d; }
.reg-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 3.5rem; background: #fff; border-bottom: 1px solid #eaecf0; }
.dark .reg-top { background: #171b26; border-color: #2b303b; }
.reg-brand { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.reg-top-right { display: flex; align-items: center; gap: 1.1rem; font-size: .92rem; color: #344054; }
.reg-signin { border: 1.5px solid #f5325b; border-radius: 10px; padding: .55rem 1.6rem; font-weight: 700; color: #f5325b; text-decoration: none; background: #fff; }
.reg-signin:hover { background: #fff1f4; }

/* hero */
.reg-hero { position: relative; padding: 2rem 3.5rem 1.4rem; background: linear-gradient(180deg, #eef4fb 0%, #f6f8fc 100%); isolation: isolate; overflow: hidden; }
.reg-hero::before { content: ""; position: absolute; inset: 0 0 0 30%; z-index: -1; background: var(--reg-photo) center right / cover no-repeat; -webkit-mask: linear-gradient(90deg, transparent, #000 35%); mask: linear-gradient(90deg, transparent, #000 35%); }
.reg-hero.is-empty::before { background: radial-gradient(120% 120% at 100% 0%, #dbe7ff 0%, #f3e3ea 45%, transparent 75%); }
.reg-hero-inner { position: relative; max-width: 1560px; margin: 0 auto; }
.reg-pill { display: inline-block; border-radius: 999px; padding: .35rem .9rem; background: #ffe4ea; color: #f5325b; font-size: .82rem; font-weight: 700; }
.reg-hero h1 { margin: .55rem 0 .35rem; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: #101828; }
.reg-hero p { margin: 0; max-width: 46ch; font-size: 1rem; color: #475467; }
.reg-hero-copy { position: absolute; right: 22%; top: .6rem; display: flex; align-items: flex-end; gap: .9rem; }
.reg-hero-copy .bk-banner-script { font-size: 2rem; }
.reg-hero-copy .bk-banner-strap { max-width: 140px; }
.reg-steps { list-style: none; display: flex; align-items: center; gap: 1.5rem; margin: 1.6rem auto 0; padding: 0; max-width: 1560px; position: relative; }
.reg-steps li { display: flex; align-items: center; gap: .8rem; flex: 1; position: relative; }
.reg-steps li:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: #cfd7e6; margin: 0 .5rem; }
.reg-step-no { width: 46px; height: 46px; border-radius: 999px; border: 2px solid #98a2b3; display: grid; place-items: center; font-weight: 800; color: #475467; background: #fff; flex: none; }
.reg-step-text b { display: block; font-size: 1rem; color: #344054; }
.reg-step-text small { font-size: .8rem; color: #667085; }
.reg-steps li.is-active .reg-step-no { border-color: #f5325b; color: #f5325b; box-shadow: 0 0 0 5px #ffe4ea; }
.reg-steps li.is-active .reg-step-text b { color: #f5325b; }
.reg-steps li.is-done .reg-step-no { border-color: #17b26a; background: #17b26a; color: #fff; }

/* cards */
.reg-cards { display: grid; grid-template-columns: minmax(0, 1.9fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: .9rem; padding: .4rem 3.5rem 1.5rem; max-width: 1660px; margin: 0 auto; width: 100%; }
.reg-arrow { align-self: center; color: #98a2b3; }
.reg-arrow svg { width: 22px; height: 22px; }
.reg-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 18px; padding: 1.1rem 1.25rem 1.25rem; box-shadow: 0 4px 14px rgb(16 24 40 / .04); min-width: 0; }
.dark .reg-card { background: #1f242f; border-color: #333741; }
.reg-card.is-active { border-color: #f5325b; box-shadow: 0 8px 24px rgb(245 50 91 / .12); }
.reg-card.is-locked { opacity: .78; }
.reg-card.is-locked .fi-fo-field-wrp, .reg-card.is-locked .reg-summary { pointer-events: none; }
.reg-card-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.reg-card-head > div { flex: 1; min-width: 0; }
.reg-card-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #101828; }
.reg-card-head p { margin: .15rem 0 0; font-size: .8rem; color: #667085; }
.reg-card-no { width: 32px; height: 32px; border-radius: 999px; background: #101828; color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.reg-tag { flex: none; border-radius: 8px; padding: .3rem .6rem; font-size: .74rem; font-weight: 700; background: #f2f4f7; color: #475467; }
.reg-tag.is-required { background: #ffe4ea; color: #f5325b; }
.reg-form { display: block; }
.reg-form-actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
.reg-btn { display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 10px; padding: .7rem 1.4rem; font-size: .92rem; font-weight: 700; color: #fff; background: #f5325b; cursor: pointer; box-shadow: 0 8px 20px rgb(245 50 91 / .25); }
.reg-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.reg-btn.is-ghost { background: #fff; color: #344054; border: 1px solid #d0d5dd; box-shadow: none; }
.reg-btn.is-submit { width: 100%; justify-content: center; padding: .85rem 1rem; font-size: 1rem; }
.reg-btn.is-submit svg { width: 18px; height: 18px; }

/* Filament fields inside the cards */
.reg .fi-fo-field-wrp-label { font-size: .84rem; font-weight: 600; color: #344054; }
.reg .fi-input-wrp { border-radius: 10px; }
.reg .fi-input-wrp:focus-within { box-shadow: 0 0 0 3px rgb(245 50 91 / .18); }
.reg .fi-input-wrp-prefix .fi-icon { color: #98a2b3; }
.reg .fi-fo-field-wrp-helper-text, .reg .fi-fo-field-wrp-hint { font-size: .74rem; }
.reg .fi-fo-field-wrp-error-message { font-size: .78rem; color: #d92d20; }
.reg-phone { align-items: end; }
.reg .reg-phone-number .fi-input-wrp { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.reg .reg-phone .fi-select-input, .reg .reg-phone .fi-input-wrp { min-height: 42px; }

/* document tiles */
.reg .reg-doc { border: 1px dashed #cfd7e6; border-radius: 16px; padding: 1rem .9rem .9rem; text-align: center; background: #fbfcfe; }
.dark .reg .reg-doc { background: #171b26; border-color: #333741; }
.reg .reg-doc .fi-fo-field-wrp-label { display: block; font-size: .88rem; font-weight: 800; color: #101828; }
.reg .reg-doc .fi-fo-field-wrp-label::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto .5rem; border-radius: 12px; background: #d1e9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e90fa' stroke-width='1.7'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E") center / 22px no-repeat; }
.reg .reg-doc .fi-fo-field-wrp-helper-text { color: #667085; }
.reg .reg-doc .fi-fo-file-upload { margin-top: .5rem; }
.reg .reg-doc .filepond--root { font-size: .8rem; }
.reg .reg-doc .filepond--panel-root { background: #fff; border: 1px solid #ffd1db; border-radius: 10px; }
.reg .reg-doc .filepond--drop-label { color: #f5325b; font-weight: 700; }
.dark .reg .reg-doc .filepond--panel-root { background: #1f242f; }

/* summary + confirm */
.reg-summary { border: 1px solid #e4e7ec; border-radius: 16px; padding: 1rem; background: #fbfcfe; }
.dark .reg-summary { background: #171b26; border-color: #333741; }
.reg-summary-head { display: flex; gap: .75rem; align-items: flex-start; }
.reg-summary-head b { display: block; font-size: .95rem; }
.reg-summary-head small { font-size: .78rem; color: #667085; }
.reg-summary-icon { width: 40px; height: 40px; border-radius: 999px; background: #d1e9ff; color: #2e90fa; display: grid; place-items: center; flex: none; }
.reg-summary-icon svg { width: 20px; height: 20px; }
.reg-checks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.reg-checks li { position: relative; padding-left: 1.7rem; font-size: .86rem; color: #344054; }
.reg-checks li::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid #cfd7e6; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5'%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / 12px no-repeat; }
.reg-checks li.is-done::before { border-color: #17b26a; background-color: #dcfae6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23027a48' stroke-width='2.5'%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.reg-summary-list { margin: .9rem 0 0; display: grid; gap: .45rem; }
.reg-summary-list div { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; border-bottom: 1px dashed #e4e7ec; padding-bottom: .35rem; }
.reg-summary-list dt { color: #667085; }
.reg-summary-list dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.reg-confirm { margin-top: 1rem; }
.reg-confirm .fi-fo-field-wrp-label { font-size: .84rem; color: #344054; }

/* features strip */
.reg-features { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(180px, .9fr); gap: 1rem; align-items: center; margin: auto 3.5rem 2rem; padding: 1.1rem 1.4rem; background: #fff; border: 1px solid #e4e7ec; border-radius: 18px; overflow: hidden; }
.reg-features::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 320px; height: 200px; background: radial-gradient(circle at 70% 60%, #ffd1db 0 60px, transparent 61px), radial-gradient(circle at 40% 100%, #ffe4ea 0 90px, transparent 91px); opacity: .8; pointer-events: none; }
.dark .reg-features { background: #1f242f; border-color: #333741; }
.reg-feature { display: flex; align-items: center; gap: .8rem; min-width: 0; padding-right: 1rem; border-right: 1px solid #eaecf0; }
.reg-feature:nth-child(4) { border-right: 0; }
.reg-feature b { display: block; font-size: .92rem; }
.reg-feature small { font-size: .76rem; color: #667085; line-height: 1.35; }
.reg-feature-icon { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.reg-feature-icon svg { width: 24px; height: 24px; }
.reg-feature-icon.is-rose { background: #ffe4ea; color: #f5325b; }
.reg-feature-icon.is-green { background: #dcfae6; color: #17b26a; }
.reg-feature-icon.is-blue { background: #d1e9ff; color: #2e90fa; }
.reg-feature-script { position: relative; z-index: 1; font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive; font-size: 1.35rem; color: #101828; transform: rotate(-6deg); text-align: center; }
.reg-feature-script::after { content: ""; display: block; width: 60%; height: 2px; margin: .2rem auto 0; background: #f5325b; }

@media (max-width: 1400px) { .reg-cards { grid-template-columns: 1fr; } .reg-arrow { display: none; } .reg-hero-copy { display: none; } .reg-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reg-feature-script { grid-column: 1 / -1; } .reg-feature:nth-child(2n) { border-right: 0; } }
@media (max-width: 760px) { .reg-top, .reg-hero { padding-left: 1.2rem; padding-right: 1.2rem; } .reg-cards { padding: .4rem 1.2rem 1.5rem; } .reg-features { margin: auto 1.2rem 1.5rem; grid-template-columns: 1fr; } .reg-steps { flex-direction: column; align-items: stretch; gap: .6rem; } .reg-steps li:not(:last-child)::after { display: none; } .reg-feature { border-right: 0; } }