/*
 * enterprise_offer.css: the Enterprise drawer and its two triggers
 * (templates/components/enterprise_offer.html).
 *
 * Loaded on the public pages, which carry the marketing tokens (--white,
 * --border, --orange ...), and on the in-app plans page, which carries the
 * semantic tokens (--surface, --border-color, --primary-color ...) and can be
 * in the dark theme. Each --eo-* role reads the marketing token first, then the
 * app token, so one rule set themes itself in both shells. Neither shell
 * defines the other's names; a third surface must load one of the two.
 *
 * The strip under the tiers is the main way in. The edge tab, on /pricing only,
 * is a bookmark: a vertical label on the right edge, mid-height, clear of the
 * chat bubble in the bottom corner.
 */
.enterprise-offer {
    --eo-surface: var(--white, var(--surface));
    --eo-line: var(--border, var(--border-color));
    --eo-ink: var(--black, var(--text-primary));
    --eo-muted: var(--text-2, var(--text-secondary));
    --eo-accent: var(--orange, var(--primary-color));
}

/* Trigger: the edge tab. Reads bottom to top, the convention for side tabs. */
.enterprise-tab {
    position: fixed; right: 0; top: 50%; z-index: 1040;
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
    padding: 26px 12px; font-size: 17px; font-weight: 700; letter-spacing: 0.05em;
    color: var(--eo-accent); background: var(--eo-surface);
    border: 1px solid var(--eo-line); border-left: 0;
    border-radius: 0 8px 8px 0; cursor: pointer;
    transition: padding 0.15s ease;
}
/* Anchored at the right edge, so wider padding peeks the tab out leftward. */
.enterprise-tab:hover, .enterprise-tab:focus-visible { padding-left: 17px; padding-right: 17px; }

/* Trigger: the strip under the tiers, on every surface. Quieter than a tier
   card, but solid-bordered and accented so it is not skimmed past. */
.enterprise-strip {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: 4px 10px; width: 100%; max-width: 720px; margin: 28px auto 0;
    padding: 16px 20px; font: inherit; font-size: 16px; color: var(--eo-muted);
    background: var(--eo-surface); border: 1px solid var(--eo-line);
    border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease;
}
.enterprise-strip:hover, .enterprise-strip:focus-visible { border-color: var(--eo-accent); }
.enterprise-strip-name { font-weight: 700; color: var(--eo-accent); }
.enterprise-strip-name .bi { font-size: 0.85em; margin-left: 2px; }

/* The drawer: full height on the right, sliding in and out. */
.enterprise-drawer {
    position: fixed; inset: 0 0 0 auto; margin: 0;
    width: min(420px, 100vw); height: 100%; max-height: 100%;
    padding: 56px 28px 32px; overflow-y: auto;
    background: var(--eo-surface); color: var(--eo-ink); text-align: left;
    border: 0; border-left: 1px solid var(--eo-line);
    translate: 100% 0;
    transition: translate 0.3s ease, overlay 0.3s allow-discrete,
        display 0.3s allow-discrete;
}
.enterprise-drawer:popover-open { translate: 0 0; }
@starting-style { .enterprise-drawer:popover-open { translate: 100% 0; } }
.enterprise-drawer::backdrop {
    background: color-mix(in srgb, var(--eo-ink) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .enterprise-drawer, .enterprise-tab, .enterprise-strip { transition: none; }
}

.enterprise-drawer h2 { font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.enterprise-drawer p { font-size: 15px; color: var(--eo-muted); margin: 0 0 16px; }
.enterprise-drawer ul { margin: 0 0 20px; padding-left: 20px; }
.enterprise-drawer li { font-size: 14.5px; margin-bottom: 12px; }
.enterprise-drawer-close {
    position: absolute; top: 16px; right: 16px; padding: 6px;
    background: none; border: 0; font-size: 18px; line-height: 1;
    color: var(--eo-muted); cursor: pointer;
}
.enterprise-offer-cta {
    display: inline-block; padding: 10px 24px; border-radius: 8px;
    border: 1.5px solid var(--eo-accent); color: var(--eo-accent);
    font-weight: 600; text-decoration: none;
}
.enterprise-offer-cta:hover { background: var(--eo-accent); color: var(--eo-surface); }

@media (max-width: 600px) {
    .enterprise-tab { padding: 18px 7px; font-size: 14px; }
    .enterprise-drawer { padding: 52px 16px 24px; }
}