/*
 * Shared component classes built on the tokens in tokens.css. These are the
 * ONLY definitions for these patterns — per-app CSS must not redeclare a
 * card, badge, pill, empty state, pagination nav, skeleton or modal style.
 */

/* Focus states — every focusable element gets a visible, high-contrast ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* Cards */
.card-surface {
    background: var(--color-surface-0);
    border: 1px solid var(--color-border-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
    padding: var(--space-5);
}

/* Buttons (pill-shaped, on top of Bootstrap's .btn) */
.btn-market {
    background: linear-gradient(120deg, var(--color-primary-700), var(--color-primary-500));
    border: none;
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 0.55rem 1.3rem;
}

.btn-market:hover,
.btn-market:focus {
    color: #fff;
    background: linear-gradient(120deg, var(--color-primary-900), var(--color-primary-700));
}

.btn-outline-market {
    background: transparent;
    border: 1px solid var(--color-primary-700);
    color: var(--color-primary-700);
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 0.55rem 1.3rem;
}

.btn-outline-market:hover,
.btn-outline-market:focus {
    background: var(--color-primary-700);
    color: #fff;
}

/* On-dark CTA (hero panels, callout bands) — gold on the brand deep green.
   The navbar-scoped .btn-market in base.css is the same treatment; use this
   class for dark surfaces outside the navbar. */
.btn-accent {
    background: linear-gradient(120deg, var(--color-accent-300), var(--color-accent-500));
    border: none;
    color: var(--color-primary-900);
    border-radius: var(--radius-pill);
    font-weight: 700;
    padding: 0.55rem 1.3rem;
}

.btn-accent:hover,
.btn-accent:focus {
    color: var(--color-primary-900);
    filter: brightness(0.97);
}

/* Badges & pills */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-verified {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.3rem;
    place-items: center;
    vertical-align: 0.1rem;
    border-radius: 50%;
    background: var(--color-info-500);
    color: #fff;
    font-size: 0.68rem;
    box-shadow: 0 0 0 2px #fff;
}

.badge-verified--gold {
    background: var(--color-accent-500);
    color: var(--color-ink-900);
}

.badge-verified--silver {
    background: var(--color-ink-400);
}

.badge-promoted {
    background: var(--color-accent-500);
    color: var(--color-ink-900);
}

.badge-status {
    background: var(--color-bg-100);
    color: var(--color-ink-600);
    border: 1px solid var(--color-border-200);
}

.badge-status--review,
.badge-status--warning {
    background: #fff4e5;
    color: var(--color-warning-700);
    border-color: #f3d9b1;
}

.badge-status--verified {
    background: #e6f4ea;
    color: #1e7d38;
    border-color: #bfe4c9;
}

.badge-status--scheduled {
    background: #e3f0fd;
    color: #155fa0;
    border-color: #bfdcfa;
}

.badge-status--ended {
    background: transparent;
    color: var(--color-ink-600);
    border-color: var(--color-border-200);
    border-style: dashed;
}

/* Live boost state — same gold as the customer-facing Promoted disclosure. */
.badge-status--live {
    background: var(--color-accent-500);
    color: var(--color-ink-900);
    border: 1px solid var(--color-accent-500);
}

/* Status text (replaces per-app .status-ready / .status-pending duplicates) */
.status-ready {
    color: var(--color-success-700);
}

.status-pending {
    color: var(--color-warning-700);
}

/* Form controls */
.form-field {
    display: grid;
    gap: 0.35rem;
}

.form-field label {
    color: var(--color-ink-900);
    font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border-200);
    border-radius: var(--radius-sm);
}

.form-field--checkbox {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.form-field--checkbox input {
    width: auto;
}

/* Definition lists (key/value detail panels) */
.details-list {
    display: grid;
    grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
    margin: 0;
}

.details-list dt,
.details-list dd {
    margin: 0;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-border-200);
    overflow-wrap: anywhere;
}

.details-list dt {
    color: var(--color-ink-600);
    font-weight: 600;
}

@media (max-width: 700px) {
    .details-list {
        grid-template-columns: 1fr;
    }

    .details-list dt {
        padding-bottom: 0.1rem;
        border-bottom: 0;
    }

    .details-list dd {
        padding-top: 0.1rem;
    }
}

/* Alerts (in addition to Bootstrap's .alert-*) */
.alert-note {
    padding: var(--space-4);
    border: 1px solid var(--color-border-200);
    border-left: 4px solid var(--color-accent-500);
    border-radius: var(--radius-sm);
    background: var(--color-bg-100);
    color: var(--color-ink-900);
}

/* Empty states */
.empty-state {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-8) var(--space-4);
    border: 1px dashed var(--color-border-200);
    border-radius: var(--radius-md);
    background: var(--color-surface-0);
    color: var(--color-ink-600);
    text-align: center;
}

.empty-state__icon {
    font-size: var(--text-2xl);
    color: var(--color-ink-600);
}

.empty-state p {
    margin: 0;
}

/* Skeleton loaders */
@keyframes skeleton-pulse {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: -135% 0%;
    }
}

.skeleton {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(100deg, var(--color-bg-100) 40%, var(--color-border-200) 50%, var(--color-bg-100) 60%);
    background-size: 250% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-text {
    height: 0.9em;
    margin: 0.25em 0;
}

.skeleton-block {
    width: 100%;
    height: 100%;
    min-height: 8rem;
}

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

/* Pagination nav (replaces .directory-pagination / .listings-pagination / .reviews-pagination) */
.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-ink-600);
    padding: var(--space-4) 0;
}

/* Progress track (readiness bars) */
.progress-track {
    width: 100%;
    height: 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-100);
    overflow: hidden;
}

.progress-track__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(120deg, var(--color-primary-500), var(--color-staff-300));
}

/* Provider card (shared across the homepage and the provider directory) */
.provider-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border-200);
    border-top: 3px solid var(--color-accent-500);
    border-radius: var(--radius-md);
    background: var(--color-surface-0);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.provider-card:hover {
    border-color: var(--color-accent-500);
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .provider-card:hover {
        transform: none;
    }
}

/* Favourite toggle (templates/includes/favourite_toggle.html) */
.listing-card,
.provider-card {
    position: relative;
}

.favourite-toggle {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    margin: 0;
}

.favourite-toggle__button {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-border-200);
    border-radius: 50%;
    background: var(--color-surface-0);
    color: var(--color-ink-600);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.favourite-toggle__button:hover,
.favourite-toggle__button.is-favourite {
    color: var(--color-danger-500);
    border-color: currentColor;
}

.favourite-toggle__button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Follow toggle (templates/includes/follow_button.html) */
.follow-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.follow-toggle__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-200);
    border-radius: var(--radius-pill);
    background: var(--color-surface-0);
    color: var(--color-ink-600);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.follow-toggle__button:hover,
.follow-toggle__button.is-following {
    color: var(--color-primary-700);
    border-color: var(--color-primary-500);
}

.follow-toggle__button.is-following {
    background: var(--color-surface-muted);
}

.follow-toggle__button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.follow-toggle__count {
    color: var(--color-ink-600);
}

.provider-card .follow-toggle {
    margin-top: var(--space-2);
}

/* Avatars — the one circular image/initials treatment for customer and
   provider identity, everywhere a photo may or may not exist. */
.avatar {
    display: inline-flex;
    flex: 0 0 var(--avatar-md);
    align-items: center;
    justify-content: center;
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-accent-300);
    background: var(--color-primary-700);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
}

.avatar img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio-avatar);
    object-fit: cover;
}

.avatar--sm {
    flex-basis: var(--avatar-sm);
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    font-size: var(--text-sm);
}

.avatar--lg {
    flex-basis: var(--avatar-lg);
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    font-size: var(--text-2xl);
}

.provider-card__avatar,
.provider-card__mark {
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent-300);
    background: var(--color-primary-700);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
}

.provider-card__body {
    min-width: 0;
}

.provider-card h2,
.provider-card h3 {
    margin: 0 0 0.2rem;
    font-size: var(--text-lg);
}

.provider-card h2 a,
.provider-card h3 a {
    color: var(--color-primary-900);
    text-decoration: none;
}

.provider-card h2 a:hover,
.provider-card h3 a:hover {
    color: var(--color-primary-500);
}

.provider-card p {
    margin: 0 0 0.4rem;
    color: var(--color-ink-600);
    font-size: var(--text-sm);
}

.provider-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-primary-700);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
}

.provider-card__cta:hover {
    color: var(--color-accent-500);
}

.provider-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 991px) {
    .provider-grid {
        grid-template-columns: 1fr;
    }
}

/* Listing grid + card (templates/includes/listing_card.html) — the shared
   marketplace card, styled ONCE here so every surface (home, browse,
   provider profile, favourites, campaigns, events) renders it identically.
   The media box is a fixed-ratio viewport: the image is absolutely
   positioned inside it so the file's intrinsic dimensions can never stretch
   or shrink the card. */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.listing-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.listing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border-200);
    border-radius: var(--radius-md);
    background: var(--color-surface-0);
    transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.listing-card:hover {
    border-color: var(--color-accent-500);
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
}

.listing-card__media {
    position: relative;
    display: block;
    aspect-ratio: var(--ratio-card);
    overflow: hidden;
    background: var(--color-primary-900);
}

.listing-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

.listing-card:hover .listing-card__media img {
    transform: scale(1.04);
}

.listing-card__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-accent-300);
    font-size: 2.6rem;
}

.listing-card__badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(120deg, var(--color-accent-300), var(--color-accent-500));
    color: var(--color-primary-900);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.listing-card__badge--promoted {
    background: var(--color-primary-900);
    color: #fff;
}

.listing-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-4);
}

.listing-card__body h3 {
    min-height: calc(2 * 1.35em);
    margin: 0.2rem 0 0.4rem;
    font-size: 1rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-card__body h3 a {
    color: var(--color-primary-900);
    text-decoration: none;
}

.listing-card__body h3 a:hover {
    color: var(--color-primary-500);
}

.listing-card__category {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.listing-card__category a {
    color: var(--color-accent-500);
    text-decoration: none;
}

.listing-card__provider {
    margin: 0 0 0.4rem;
    color: var(--color-ink-600);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-card__provider a {
    color: var(--color-ink-600);
    text-decoration: none;
}

.listing-card__provider a:hover {
    color: var(--color-primary-500);
}

.listing-card__distance {
    margin: 0 0 0.25rem;
    color: var(--color-ink-600);
    font-size: var(--text-sm);
}

.listing-card__price {
    margin: auto 0 0;
    padding-top: var(--space-2);
    color: var(--color-primary-700);
    font-size: 0.95rem;
}

/* Add-to-event action (templates/includes/add_to_event.html) — shared card/detail control */
.add-to-event-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-200);
    border-radius: var(--radius-pill);
    background: var(--color-surface-0);
    color: var(--color-ink-600);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease;
}

.add-to-event-toggle:hover {
    color: var(--color-primary-500);
    border-color: currentColor;
}

.add-to-event-toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.add-to-event-toggle.is-saved {
    color: var(--color-success-700);
    border-color: currentColor;
    background: var(--color-success-soft);
}

@media (prefers-reduced-motion: reduce) {
    .listing-card:hover {
        transform: none;
    }

    .listing-card:hover .listing-card__media img {
        transform: none;
    }
}

@media (max-width: 991px) {
    .listing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .listing-grid,
    .listing-grid--duo {
        grid-template-columns: 1fr;
    }
}

/* Media carousel */
.media-carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.media-carousel__track {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    /* A scroll container must be allowed to shrink inside flex/grid parents;
       without this its content width can force ancestors wider than their
       track (seen on the provider profile hub, task 7B.7d). */
    min-width: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: var(--space-2);
}

.media-carousel__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-100);
}

.media-carousel__item img,
.media-carousel__item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-carousel__control {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--color-border-200);
    background: var(--color-surface-0);
    color: var(--color-ink-900);
}

.media-carousel__control:hover {
    background: var(--color-bg-100);
}

/* Gated contact reveal (task 1.3) — shared by the listing detail page and
   the provider public profile; per-app CSS must not redeclare these. */
.contact-reveal-notice {
    font-size: var(--text-sm);
    color: var(--color-ink-600);
    margin: 0 0 var(--space-3);
}

.contact-reveal-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-contact-reveal {
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-primary-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-contact-reveal:hover:not(:disabled) {
    background-color: var(--color-primary-700);
}

.btn-contact-reveal:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn-contact-reveal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-reveal-result {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    overflow-wrap: anywhere;
}

.contact-reveal-result code {
    background-color: var(--color-surface-0);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-family: monospace;
}

/* Shared share menu (templates/includes/share_menu.html) — listing, provider
   and event pages. The data-copy-share-url hook is the copy trigger read by
   base.js; channel links are plain anchors that work without JavaScript. */
.share-menu__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-xl);
}

.share-menu__link {
    color: var(--color-primary-700);
}

.share-menu__link:hover {
    color: var(--color-primary-500);
}

.share-menu__link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.share-menu__copy {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.share-menu__url {
    flex: 1;
    min-width: 0;
    padding: var(--space-2);
    border: 1px solid var(--color-border-200);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

/* Data tables — wrap every table in .table-wrap so wide datasets scroll
   inside the component on small screens instead of pushing the page into
   horizontal scroll. .table-app is the one baseline table style. */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-app {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface-0);
}

.table-app th,
.table-app td {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-200);
    vertical-align: top;
}

.table-app thead th {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-600);
    white-space: nowrap;
}

.table-app tbody tr:hover {
    background: var(--color-bg-100);
}

@media (max-width: 767px) {
    .table-app {
        min-width: 34rem;
    }
}

/* Modals (lightweight, no framework — for use outside Bootstrap's JS modal) */
.modal-backdrop-light {
    position: fixed;
    inset: 0;
    background: rgba(22, 35, 28, 0.55);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    z-index: 1050;
}

.modal-dialog-light {
    width: 100%;
    max-width: 32rem;
    background: var(--color-surface-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
    padding: var(--space-6);
}

/* Legal documents (django-termsandconditions overrides + inline consent include) */
.legal-page {
    max-width: 52rem;
    margin: 0 auto;
}

.legal-page__heading,
.legal-page__title,
.legal-page__subtitle {
    font-family: var(--font-heading);
    color: var(--color-ink-900);
    overflow-wrap: anywhere;
}

.legal-page__heading {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

.legal-page__anchor {
    color: inherit;
    text-decoration: none;
}

.legal-page__anchor:hover,
.legal-page__anchor:focus-visible {
    text-decoration: underline;
}

.legal-page__document + .legal-page__document {
    margin-top: var(--space-5);
}

.legal-page__summary,
.legal-page__empty {
    color: var(--color-text-muted);
}

.legal-page__actions {
    margin: var(--space-4) 0 0;
}

.legal-doc {
    max-width: 100%;
}

.legal-doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.legal-doc__body {
    max-height: 26rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4);
    border: 1px solid var(--color-border-200);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.legal-doc__body:focus-visible {
    outline: var(--focus-ring);
}

.legal-doc__body > p {
    margin-bottom: var(--space-4);
}

.legal-doc__body > p:last-child {
    margin-bottom: 0;
}

.legal-page--print .legal-doc__body {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
    padding: 0;
}

/* Legal consent gating (task 7B.2c) */
.legal-consent__control-wrap {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-200);
}

.legal-consent__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.legal-consent__check input[type="checkbox"] {
    margin-top: 0.25rem;
    cursor: pointer;
}

.legal-consent__check input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.legal-consent__label {
    font-weight: 600;
    color: var(--color-ink-900);
    cursor: pointer;
}

.legal-consent__check input[type="checkbox"]:disabled + .legal-consent__label {
    cursor: not-allowed;
    color: var(--color-text-muted);
}

.legal-consent__hint {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-600);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color 0.2s ease;
}

.legal-consent__hint.is-unlocked {
    color: var(--color-primary-700);
}

.legal-page__submit-wrap {
    margin-top: var(--space-6);
}