/* ==========================================================================
   Enterprise form page (hero + trust strip + two-column layout)

   Mobile-first: base rules below (no media query) target phones. Larger
   screens are progressively enhanced via min-width layers at 641px (large
   phone / small tablet), 768px (room for the stepper's connecting rail),
   and 900px (two-column desktop layout with the sidebar). Nothing here
   should rely on max-width overrides - if a rule needs to differ on a
   bigger screen, it belongs in one of those min-width layers instead.
   ========================================================================== */

.enterprise-form-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f8ff 0%, #e0f0fa 100%);
    padding: clamp(24px, 8vw, 60px) clamp(10px, 3vw, 16px) 110px;
}

.enterprise-form-page--success {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bootstrap's .container adds its own gutter + responsive max-width on
   top of ours - this page's own components (.enterprise-hero,
   .enterprise-trust-strip-wrap, .enterprise-form-layout, .enterprise-success)
   already own their max-width (1060px/520px) and centering, so the
   container's default padding only doubles up and starves mobile width. */
.enterprise-form-page > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 900px) {
    .enterprise-form-page {
        padding: 60px 16px 80px;
    }
}

/* ── Hero ─────────────────────────────────────────────── */

.enterprise-hero {
    max-width: 1060px;
    margin: 0 auto;
    position: relative;
}

.enterprise-hero__inner {
    position: relative;
    max-width: 640px;
}

.enterprise-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #92400e;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.35);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.enterprise-hero__title {
    font-size: clamp(1.3rem, 4.5vw, 1.9rem);
    font-weight: 800;
    color: var(--billing-navy);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.enterprise-hero__subtitle {
    font-size: clamp(0.92rem, 2vw, 1rem);
    line-height: 1.55;
    color: #33526e;
    max-width: 52ch;
    margin-bottom: 0;
}

.enterprise-support-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(255, 152, 0, 0.03));
    border: 1px solid rgba(255, 152, 0, 0.32);
}

@media (min-width: 641px) {
    .enterprise-support-banner {
        margin-top: 20px;
        padding: 14px 16px;
    }
}

.enterprise-support-banner__avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9800, #e0a800);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(255, 152, 0, 0.4);
}

.enterprise-support-banner strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: #92400e;
    margin-bottom: 3px;
}

.enterprise-support-banner p {
    font-size: 0.85rem;
    color: #8a5a3f;
    line-height: 1.5;
    margin: 0;
}

/* ── Trust strip: a pure-CSS transform marquee, no JS.
   Previous versions drove this by mutating scrollLeft from rAF (needed a
   scroll container + a color-matched fade overlay to fake the edges,
   which drifted out of sync with the page's own gradient background and
   showed as mismatched light patches over the cards). transform-based
   animation has no scroll position to keep in sync, so it can use a
   plain alpha mask for the edge fade instead - a mask reveals/hides
   whatever is actually underneath it, so unlike a solid-color overlay it
   can never mismatch the page background, regardless of where this strip
   sits on the page or what color is behind it. Template renders the card
   set twice (see _enterprise_form.html) so the loop point at -50% is
   seamless. Only shown below 900px - the desktop sidebar replaces it. ── */
.enterprise-trust-strip-wrap {
    position: relative;
    max-width: 1060px;
    margin: 22px auto 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.enterprise-trust-track {
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 4px 2px 8px;
    animation: enterprise-trust-marquee 28s linear infinite;
}

/* :hover is only a real, exitable state on devices with a mouse/trackpad -
   touch browsers simulate it on tap with no matching "unhover" event, so
   scoping it to all devices left the marquee permanently paused after the
   first tap until the user tapped elsewhere on the page. Touch instead
   gets :active, which correctly clears the instant the finger lifts. */
@media (hover: hover) {
    .enterprise-trust-strip-wrap:hover .enterprise-trust-track {
        animation-play-state: paused;
    }
}

.enterprise-trust-strip-wrap:active .enterprise-trust-track {
    animation-play-state: paused;
}

@keyframes enterprise-trust-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .enterprise-trust-track {
        animation: none;
    }
}

.enterprise-trust-card {
    flex: 0 0 auto;
    width: 180px;
    border-radius: 14px;
    padding: 14px;
    scroll-snap-align: start;
    box-shadow: 0 8px 18px -6px var(--sh, rgba(10, 37, 64, 0.4));
}

.enterprise-trust-card--blue   { background: linear-gradient(135deg, #0a2540, #2d7aaf); --sh: rgba(10, 37, 64, 0.45); }
.enterprise-trust-card--green  { background: linear-gradient(135deg, #10b981, #20a138); --sh: rgba(16, 185, 129, 0.4); }
.enterprise-trust-card--purple { background: linear-gradient(135deg, #6f42c1, #5a32a3); --sh: rgba(111, 66, 193, 0.4); }
.enterprise-trust-card--teal   { background: linear-gradient(135deg, #0891b2, #0e7490); --sh: rgba(8, 145, 178, 0.4); }

/* Icon centering: geometric centering instead of flex/line-height.
   Both previous attempts (flex + line-height:1, then flex + line-height
   matching the circle) relied on the browser splitting leading space
   using the font's own ascent/descent metrics - uneven for this icon
   font, so either produced an off-center result. Absolutely positioning
   the glyph at the circle's exact midpoint and pulling it back by half
   of its OWN box size (translate(-50%,-50%)) centers it by geometry,
   with no dependency on font leading/metrics at all. */
.enterprise-trust-card__icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    margin-bottom: 10px;
    color: #fff;
}

.enterprise-trust-card__icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    line-height: 1;
}

.enterprise-trust-card strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
}

.enterprise-trust-card span {
    display: block;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

/* ── Mobile "what happens next" - compact stand-in for the desktop
   sidebar below 900px, sharing copy via _enterprise_next_steps.html ──── */

.enterprise-mobile-next-steps {
    max-width: 1060px;
    margin: 20px auto 0;
    background: #fff;
    border: 1px solid var(--billing-card-border);
    border-radius: 16px;
    padding: 18px 18px 6px;
    box-shadow: var(--billing-shadow);
}

.enterprise-mobile-next-steps__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--billing-navy);
    margin-bottom: 14px;
}

@media (min-width: 900px) {
    .enterprise-mobile-next-steps {
        display: none;
    }
}

/* ── Shared step-timeline content (light theme by default; the desktop
   .enterprise-sidebar overrides it to its dark theme further below) ──── */

.ent-next-steps {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ent-next-steps__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ent-next-steps__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: rgba(45, 122, 175, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #2d7aaf;
    margin-top: 2px;
}

.ent-next-steps__item--human .ent-next-steps__icon {
    background: linear-gradient(135deg, #ff9800, #e0a800);
    color: #fff;
}

.ent-next-steps__item--human strong {
    color: #92400e;
}

.ent-next-steps__body strong {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--billing-navy);
    margin-bottom: 3px;
}

.ent-next-steps__body p {
    font-size: 0.8rem;
    color: #5c7690;
    line-height: 1.5;
    margin: 0;
}

/* ── Two-column layout ───────────────────────────────────── */

.enterprise-form-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1060px;
    margin: 22px auto 0;
}

@media (min-width: 900px) {
    .enterprise-form-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 48px;
        margin: 32px auto 0;
        align-items: start;
    }
}

/* ── Form column ─────────────────────────────────────── */

.enterprise-form-col {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--billing-card-border);
    border-radius: 16px;
    padding: clamp(20px, 6vw, 48px) clamp(14px, 5vw, 44px);
    box-shadow: var(--billing-shadow);
    animation: fadeInUp 0.5s ease both;
}

@media (min-width: 900px) {
    .enterprise-form-col {
        border-radius: 20px;
    }
}

.enterprise-form-header {
    margin-bottom: 26px;
}

@media (min-width: 641px) {
    .enterprise-form-header {
        margin-bottom: 36px;
    }
}

.enterprise-form-header__title {
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    font-weight: 700;
    color: var(--billing-navy);
    margin-bottom: 8px;
}

.enterprise-form-header__subtitle {
    color: #33526e;
    font-size: 0.9rem;
}

@media (min-width: 641px) {
    .enterprise-form-header__subtitle {
        font-size: 0.95rem;
    }
}

/* ── Stepper: on mobile the numbered badge sits inline with its section
   header - no rail, no indent, nothing competing for the little width a
   phone has. From 768px up there's enough breathing room for the fuller
   desktop treatment: sections indent, and a connecting line runs behind
   the numbers so the numbering reads as real progress through the form
   rather than plain decoration. ─────────────────────────────────────── */

.enterprise-stepper {
    position: relative;
}

.enterprise-form-section {
    position: relative;
    margin-bottom: 28px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.enterprise-form-section:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .enterprise-form-section {
        padding-left: 38px;
        margin-bottom: 36px;
    }

    .enterprise-form-section:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 14px;
        top: 26px;
        bottom: -36px;
        width: 2px;
        background: linear-gradient(180deg, rgba(45, 122, 175, 0.35), rgba(45, 122, 175, 0.08));
    }
}

.enterprise-form-section__header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--billing-navy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 10px;
}

@media (min-width: 641px) {
    .enterprise-form-section__header {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }
}

.enterprise-form-section__num {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--billing-blue-mid), var(--billing-blue-light));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 50%;
}

@media (min-width: 768px) {
    .enterprise-form-section__num {
        position: absolute;
        left: 0;
        top: 1px;
        box-shadow: 0 0 0 4px #fff;
    }
}

/* Section 3 is where a real person is reached, so it gets the
   same warm accent as the rest of the human-support touches */
#sectionContact .enterprise-form-section__num {
    background: linear-gradient(135deg, #ff9800, #e0a800);
}

.enterprise-form-section__optional-tag {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2d7aaf;
    background: rgba(45,122,175,0.08);
    border: 1px solid rgba(91,163,208,0.3);
    padding: 3px 10px;
    border-radius: 12px;
    /* Own line on mobile (wraps below the title via the header's
       flex-wrap), sized to its own text instead of stretching full
       width, and left-aligned with the header row rather than indented -
       there's no rail/indent left to align under once the stepper is
       flattened below 768px. Longer translated copy (e.g. Bulgarian)
       wraps onto multiple lines instead of overflowing the viewport. */
    order: 3;
}

@media (min-width: 641px) {
    .enterprise-form-section__optional-tag {
        white-space: nowrap;
        order: initial;
        margin-left: auto;
    }
}

.enterprise-form-section__optional-tag--warm {
    color: #92400e;
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.35);
}

/* ── Type cards ──────────────────────────────────────── */

.enterprise-type-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 641px) {
    .enterprise-type-cards {
        gap: 12px;
    }
}

.enterprise-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 2px solid rgba(168, 212, 237, 0.5);
    border-radius: 10px;
    background: #fafcff;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

@media (min-width: 641px) {
    .enterprise-type-card {
        gap: 16px;
        padding: 16px 18px;
        border-radius: 12px;
    }
}

.enterprise-type-card:hover {
    border-color: rgba(45, 122, 175, 0.5);
    background: rgba(45, 122, 175, 0.03);
}

.enterprise-type-card.is-selected,
.enterprise-type-card[aria-pressed="true"] {
    border-color: #2d7aaf;
    background: rgba(45, 122, 175, 0.08);
    box-shadow: 0 0 0 3px rgba(45, 122, 175, 0.12);
}

.enterprise-type-card__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0a2540, #2d7aaf);
    box-shadow: 0 3px 10px rgba(10, 37, 64, 0.3);
    transition: transform 0.18s;
}

@media (min-width: 641px) {
    .enterprise-type-card__icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }
}

.enterprise-type-card__icon i {
    font-size: 1rem;
    line-height: 36px;
}

@media (min-width: 641px) {
    .enterprise-type-card__icon i {
        font-size: 1.1rem;
        line-height: 42px;
    }
}

.enterprise-type-card__icon--purple {
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    box-shadow: 0 3px 10px rgba(111, 66, 193, 0.3);
}

.enterprise-type-card__icon--teal {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 3px 10px rgba(8, 145, 178, 0.3);
}

.enterprise-type-card.is-selected .enterprise-type-card__icon {
    transform: scale(1.06);
}

.enterprise-type-card__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.enterprise-type-card__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--billing-navy);
}

@media (min-width: 641px) {
    .enterprise-type-card__title {
        font-size: 0.95rem;
    }
}

.enterprise-type-card__desc {
    font-size: 0.78rem;
    color: #3d5a75;
    line-height: 1.45;
}

@media (min-width: 641px) {
    .enterprise-type-card__desc {
        font-size: 0.82rem;
    }
}

/* ── Floating label fields - mirrors register.css exactly ──────────────── */
/* Scoped under .enterprise-form-col to beat Bootstrap with specificity     */

.enterprise-form-col .ent-field {
    position: relative;
    margin-bottom: 1.1rem;
}

/* ── Input ─────────────────────────────────────────────────────────────── */

.enterprise-form-col .ent-field > .ent-input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 16px 1rem 5px 2.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    color: #111827;
    background: #fff;
    background-image: none;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-sizing: border-box;
}

/* Kill autofill background */
.enterprise-form-col .ent-field > .ent-input:-webkit-autofill,
.enterprise-form-col .ent-field > .ent-input:-webkit-autofill:hover,
.enterprise-form-col .ent-field > .ent-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-text-fill-color: #111827;
    transition: background-color 99999s ease 0s;
}

.enterprise-form-col .ent-field > .ent-input:hover {
    border-color: #9ca3af;
}

.enterprise-form-col .ent-field > .ent-input:focus {
    border-color: #1a5a8e;
    box-shadow: 0 0 0 3px rgba(26, 90, 142, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* When filled - vertically centre the text */
.enterprise-form-col .ent-field > .ent-input:not(:placeholder-shown) {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 52px;
}

/* Keep top offset only while focused AND still empty */
.enterprise-form-col .ent-field > .ent-input:focus:placeholder-shown {
    padding-top: 18px;
    padding-bottom: 6px;
    line-height: 1.25;
}

/* ── Left icon ─────────────────────────────────────────────────────────── */

.enterprise-form-col .ent-icon {
    position: absolute;
    top: 25px;
    left: 0.875rem;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #4b5563;
    pointer-events: none;
    z-index: 3;
    transition: color 0.18s ease;
}

.enterprise-form-col .ent-field:focus-within > .ent-icon {
    color: #1a5a8e;
}

/* Textarea: icon stays near top */
.enterprise-form-col .ent-field--textarea > .ent-icon {
    top: 18px;
    transform: none;
}

/* ── Floating label ────────────────────────────────────────────────────── */

.enterprise-form-col .ent-field > .ent-label {
    position: absolute;
    top: 0;
    left: 2.5rem;
    right: 1rem;
    height: 50px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 400;
    color: #4b5563;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s ease;
    z-index: 2;
}

/* Float: focus or has value */
.enterprise-form-col .ent-field > .ent-input:focus ~ .ent-label,
.enterprise-form-col .ent-field > .ent-input:not(:placeholder-shown) ~ .ent-label {
    transform: scale(0.8) translateY(-1.9rem);
    color: #1a5a8e;
    font-weight: 600;
    right: auto;
    width: max-content;
    max-width: calc(100% - 2.5rem);
    padding: 0 0.35rem;
}

/* White chip behind floated label text */
.enterprise-form-col .ent-field > .ent-label::after {
    content: '';
    position: absolute;
    top: 30%;
    bottom: 30%;
    left: 0;
    right: 0;
    z-index: -1;
    background: #fff;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.enterprise-form-col .ent-field > .ent-input:focus ~ .ent-label::after,
.enterprise-form-col .ent-field > .ent-input:not(:placeholder-shown) ~ .ent-label::after {
    opacity: 1;
}

/* ── Select ─────────────────────────────────────────────────────────────── */
/* Selects always have a value - label is always floated                     */

.enterprise-form-col .ent-field--select > .ent-input {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 50px;
    cursor: pointer;
}

.enterprise-form-col .ent-field--select > .ent-label {
    transform: scale(0.8) translateY(-1.9rem);
    color: #1a5a8e;
    font-weight: 600;
    right: auto;
    width: max-content;
    max-width: calc(100% - 2.5rem);
    padding: 0 0.35rem;
}

.enterprise-form-col .ent-field--select > .ent-label::after {
    opacity: 1;
}

/* ── Textarea ───────────────────────────────────────────────────────────── */
/* The floating-label pattern above assumes a short, single-line label and
   a fixed-height box - neither holds for a full-sentence textarea label
   (worse once translated to Bulgarian). Floating it truncated the label
   with an ellipsis and glued it to the top border with no breathing
   room. A plain static label above the box - the same pattern already
   used for the checkbox group below - wraps to as many lines as it
   needs and never overlaps the border. */

.enterprise-form-col .ent-field--textarea {
    padding-top: 0;
    /* A wrapped multi-line label reads as cramped against the box below
       it and the field after it at the standard 1.1rem field spacing -
       give this field extra room on both sides of the gap. */
    margin-bottom: 1.5rem;
}

.enterprise-form-col .ent-field--textarea > .ent-input {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.enterprise-form-col .ent-field--textarea > .ent-label {
    position: static;
    display: block;
    height: auto;
    margin: 0 0 0.6rem;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    pointer-events: auto;
    transform: none;
}

.enterprise-form-col .ent-field--textarea > .ent-label::after {
    content: none;
}

.enterprise-form-col .ent-field--textarea > .ent-input:focus ~ .ent-label,
.enterprise-form-col .ent-field--textarea > .ent-input:not(:placeholder-shown) ~ .ent-label {
    transform: none;
    color: #1a5a8e;
    font-weight: 600;
    width: auto;
    max-width: none;
    padding: 0;
}

/* ── Validation states ──────────────────────────────────────────────────── */

.enterprise-form-col .ent-field > .ent-input.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.enterprise-form-col .ent-field > .ent-input.is-invalid ~ .ent-label {
    color: #dc2626;
}

/* ── Required asterisk ──────────────────────────────────────────────────── */

.ent-required {
    color: #e74c3c;
    margin-left: 2px;
}

/* ── Multi-select software checkboxes ───────────────────────────────────── */

.enterprise-form-col .ent-field--checkboxes {
    padding-top: 0;
}

.enterprise-form-col .ent-field--checkboxes > .ent-label--static {
    position: static;
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    pointer-events: auto;
}

.ent-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ent-checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1.5px solid #d1d5db;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    user-select: none;
    box-sizing: border-box;
}

.ent-checkbox-chip input {
    accent-color: #1a5a8e;
    margin: 0;
}

.ent-checkbox-chip:hover {
    border-color: #9ca3af;
}

.ent-checkbox-chip:has(input:checked) {
    border-color: #1a5a8e;
    background: rgba(26, 90, 142, 0.08);
    color: #1a5a8e;
}

/* ── Error feedback ─────────────────────────────────────────────────────── */

.ent-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.25rem;
    padding: 0.35rem 0.55rem;
    border-radius: 5px;
    line-height: 1.4;
    color: #dc2626;
    background: #fff;
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
}

.ent-feedback::before {
    content: '\f057';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.68rem;
    flex-shrink: 0;
    margin-top: 0.08rem;
}

.enterprise-field-error {
    font-size: 0.8rem;
    color: #dc2626;
    margin-top: 8px;
}

/* ── Human reassurance strip, right above the submit button ─────────────── */

.enterprise-submit-human {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    margin: 6px 0 16px;
    border-radius: 12px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.35);
}

.enterprise-submit-human__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9800, #e0a800);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
}

.enterprise-submit-human p {
    font-size: 0.8rem;
    color: #92400e;
    line-height: 1.45;
    margin: 0;
}

/* ── Submit - a sticky bottom CTA is the primary mobile pattern; the
   inline button + note only take over once there's enough width that a
   fixed bottom bar would just be redundant. ─────────────────────────── */

.enterprise-submit-btn,
.enterprise-submit-note {
    display: none;
}

@media (min-width: 641px) {
    .enterprise-submit-btn {
        display: block;
        width: 100%;
        padding: 14px 0;
        font-size: 1rem;
        margin-top: 8px;
        border-radius: 10px;
    }

    .enterprise-submit-note {
        display: block;
        text-align: center;
        font-size: 0.82rem;
        color: #3d5a75;
        margin-top: 12px;
        margin-bottom: 0;
    }
}

/* ── Mobile sticky CTA - replaces the inline submit button below 641px,
   real <button form="enterpriseForm"> so no JS is needed to submit ────── */

.enterprise-mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--billing-card-border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(7, 24, 40, 0.1);
    z-index: 40;
}

@media (min-width: 641px) {
    .enterprise-mobile-cta {
        display: none;
    }
}

.enterprise-mobile-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--billing-blue-mid), var(--billing-blue));
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(26, 90, 142, 0.28);
}

.enterprise-mobile-cta p {
    font-size: 0.72rem;
    color: #5c7690;
    text-align: center;
    margin: 8px 0 0;
}

/* This page already has its own fixed bottom CTA (the account submit
   button above, or the sidebar submit on desktop). The global persistent
   bottom bars from navbar.html - the signed-out "Request Access" bar and
   the signed-in home/companies/profile strip - occupy the exact same fixed
   bottom-of-screen slot at a higher z-index, so on this page they land
   stacked directly on top of (and covering) this form's own submit bar
   instead of next to it. Hide both here; this page's own CTA replaces
   them for the duration of the form. */
@media (max-width: 991px) {
    body.enterprise-form-body .mob-guest-cta-bar,
    body.enterprise-form-body .mob-bottom-nav {
        display: none !important;
    }

    body.enterprise-form-body.has-mobile-bottom-nav {
        padding-bottom: 0;
    }
}

/* ── Sidebar (desktop only - see @media 900px below) ─────────────────── */

.enterprise-sidebar {
    display: none;
    min-width: 0;
    position: sticky;
    /* top:24px measured from the viewport, not clearing the site's own
       sticky navbar (--navbar-height, defined in partials/navbar.css) -
       the sidebar was sticking partly behind/under it, clipping its top
       rounded corner and title. Also cap it to the remaining viewport
       height with its own scroll, since its content can be taller than
       the space below the navbar on shorter screens - without this it
       just gets clipped by the bottom of the viewport instead, with the
       bottom rounded corner never visible while scrolling. */
    top: calc(var(--navbar-height, 73px) + 16px);
    max-height: calc(100vh - var(--navbar-height, 73px) - 32px);
    overflow-y: auto;
    background: linear-gradient(135deg, #0a2540 0%, #0f3d5c 60%, #1a5a8e 100%);
    border-radius: 20px;
    padding: 28px 24px;
    color: #e0f0fa;
    animation: fadeInUp 0.5s ease 0.1s both;
}

.enterprise-sidebar::-webkit-scrollbar {
    width: 6px;
}

.enterprise-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.enterprise-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

@media (min-width: 900px) {
    .enterprise-sidebar {
        display: block;
    }

    .enterprise-trust-strip-wrap {
        display: none;
    }
}

.enterprise-sidebar__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

/* Dark-theme override of the shared .ent-next-steps content */
.enterprise-sidebar .ent-next-steps {
    gap: 12px;
    margin-bottom: 18px;
}

.enterprise-sidebar .ent-next-steps__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: rgba(45, 122, 175, 0.3);
    color: #7dbee0;
}

.enterprise-sidebar .ent-next-steps__item--human .ent-next-steps__icon {
    background: linear-gradient(135deg, #ff9800, #e0a800);
    color: #fff;
}

.enterprise-sidebar .ent-next-steps__item--human strong {
    color: #ffd9a3;
}

.enterprise-sidebar .ent-next-steps__body strong {
    color: #fff;
}

.enterprise-sidebar .ent-next-steps__body p {
    color: rgba(224, 240, 250, 0.7);
}

.enterprise-sidebar__trust-box {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.enterprise-sidebar__trust-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.enterprise-sidebar__trust-box li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.83rem;
    color: rgba(224, 240, 250, 0.75);
    line-height: 1.4;
}

.enterprise-sidebar__trust-box li .fas {
    color: #4ade80;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Success state ───────────────────────────────────── */

.enterprise-success {
    background: #fff;
    border: 1px solid var(--billing-card-border);
    border-radius: 16px;
    padding: clamp(36px, 8vw, 64px) clamp(22px, 6vw, 48px);
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--billing-shadow);
    animation: fadeInUp 0.5s ease both;
}

@media (min-width: 641px) {
    .enterprise-success {
        border-radius: 20px;
    }
}

.enterprise-success__icon {
    font-size: clamp(2.75rem, 8vw, 3.5rem);
    color: #22c55e;
    margin-bottom: 20px;
}

.enterprise-success__title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    font-weight: 700;
    color: var(--billing-navy);
    margin-bottom: 16px;
}

.enterprise-success__body {
    font-size: 1rem;
    color: #33526e;
    line-height: 1.65;
    margin-bottom: 16px;
}

.enterprise-success__secondary {
    font-size: 0.9rem;
    color: #3d5a75;
    margin-bottom: 24px;
}

/* ── Scroll reveal - default state is fully visible so the page never
   depends on JS to be usable; JS only adds the pending class up front
   when IntersectionObserver is actually available (see enterprise-form.js) */

.enterprise-reveal-pending {
    opacity: 0;
    transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
    .enterprise-form-section {
        transition: none;
    }
    .enterprise-reveal-pending {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Shared: hidden checkout form
   ========================================================================== */

#billing-checkout-form {
    display: none;
}