/*
 * Bundled frontend CSS — el ile düzenlemeyin.
 * Kaynak sırası: public/css/app.imports.css
 * Yeniden üret: bash scripts/build-app-css.sh
 * Generated: 2026-08-17T07:41:50Z
 */

/* --- source: tokens/colors.css --- */
:root {
    --color-brand: #FFE500;
    --color-brand-hover: #F5D800;
    --color-header: #3F465D;
    --color-header-dark: #303544;
    --color-cta: #019FAB;
    --color-cta-hover: #017a87;
    --color-bg: #F8F8F8;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F3F4F6;
    --color-border: #E5E7EB;
    --color-text: #303030;
    --color-text-muted: #666666;
    --color-text-soft: #A0A4AB;
    --color-link: #1D63BC;
    --color-danger: #E30613;
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-info: #1D63BC;
    --color-purple: #7C3AED;
    --radius-ui: 0;
    --radius-avatar: 50%;
    --radius-sm: var(--radius-ui);
    --radius-md: var(--radius-ui);
    --radius-lg: var(--radius-ui);
    --radius-button: 2px;
    --radius-card: var(--radius-ui);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- source: base/reset.css --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
    background: var(--color-bg);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* --- source: components/buttons.css --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

a.btn:hover,
a.btn:focus,
a.btn:active {
    text-decoration: none;
}

.btn--primary {
    background: var(--color-cta);
    color: var(--color-surface);
}

.btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--danger {
    background: var(--color-danger);
    color: var(--color-surface);
}

.btn--danger-outline {
    background: var(--color-surface);
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}

.btn--brand {
    background: var(--color-brand);
    color: var(--color-text);
}

.btn--sm {
    padding: 0.4375rem 0.75rem;
    min-height: 2.25rem;
    font-size: 13px;
}

.btn--icon-only.btn--sm {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
}

@media (max-width: 767px) {
    .btn {
        min-height: 2.75rem;
        padding: 0.625rem 1rem;
        box-sizing: border-box;
    }

    .btn--sm {
        min-height: 2.25rem;
        padding: 0.375rem 0.75rem;
        box-sizing: border-box;
    }

    .btn--icon-only.btn--sm {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
        padding: 0;
    }
}

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

/* --- source: components/frontend-confirmation-modal.css --- */
/* Shared frontend confirmation / action modal chrome.
   Button appearance comes from .btn variants; these rules handle shell + action layout only. */

.frontend-confirmation-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    /* Root stays in DOM for Alpine/Livewire modals; must not block page clicks when closed. */
    pointer-events: none;
}

.frontend-confirmation-modal__overlay {
    position: fixed;
    inset: 0;
    z-index: 121;
    background: color-mix(in srgb, var(--color-text) 45%, transparent);
    animation: fe-modal-overlay-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
    pointer-events: auto;
}

.frontend-confirmation-modal__dialog {
    position: fixed;
    inset: 0;
    z-index: 122;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(1rem, env(safe-area-inset-top, 0px))
        max(1rem, env(safe-area-inset-right, 0px))
        max(1rem, env(safe-area-inset-bottom, 0px))
        max(1rem, env(safe-area-inset-left, 0px));
    pointer-events: none;
}

.frontend-confirmation-modal__content {
    width: min(100%, 24rem);
    max-height: calc(100vh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-ui);
    background: var(--color-surface, #fff);
    box-sizing: border-box;
    pointer-events: auto;
    animation: fe-modal-surface-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.frontend-confirmation-modal__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text, #0f172a);
}

.frontend-confirmation-modal__description {
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-muted, #64748b);
}

.frontend-confirmation-modal__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.frontend-confirmation-modal__cancel,
.frontend-confirmation-modal__confirm {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

.frontend-confirmation-modal__toggle-row {
    margin-top: 1rem;
}

.listing-owner-actions-confirm__reason {
    margin-top: 1.25rem;
}

.frontend-confirmation-modal__toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text, #0f172a);
    cursor: pointer;
}

.form-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.form-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.form-switch__track {
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--color-border, #cbd5e1);
    transition: background-color 0.15s ease;
    position: relative;
}

.form-switch__track::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--color-surface, #fff);
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 12%, transparent);
}

.form-switch__input:checked + .form-switch__track {
    background: var(--color-primary, #2563eb);
}

.form-switch__input:checked + .form-switch__track::after {
    transform: translateX(1.25rem);
}

.form-switch__input:focus-visible + .form-switch__track {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

/* Report listing / user modal form (shared; listing detail does not load messaging.css). */
.msg-report-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
    min-width: 0;
}

.msg-report-form__label {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #0f172a);
}

.msg-report-form__textarea {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-ui);
    padding: 0.65rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.45;
    resize: vertical;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
}

.msg-report-form__char-count {
    margin: 0.25rem 0 0;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    text-align: right;
}

.msg-report-form__optional {
    font-weight: 400;
    color: var(--color-text-muted, #6b7280);
}

.msg-report-form .msg-composer__error,
.msg-report-form .form-error {
    margin: 0;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-danger, #dc2626);
}

.msg-report-modal .frontend-confirmation-modal__content {
    width: min(100%, 26rem);
}

.msg-report-modal .frontend-confirmation-modal__actions {
    margin-top: 0.25rem;
}

/* --- source: components/cards.css --- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.card__body {
    padding: 1.25rem;
}

.card__footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

/* --- source: components/forms.css --- */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.5;
    min-height: 2.875rem;
}

.form-textarea {
    min-height: 6rem;
    resize: vertical;
}

select.form-select,
select.form-input {
    padding-right: 2.25rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.form-input:focus,
.form-select:focus,
select.form-input:focus {
    outline: none;
    border-color: var(--color-cta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta) 20%, transparent);
}

.form-input::placeholder {
    color: var(--color-text-soft);
}

.form-help,
.form-hint {
    margin-top: 0.25rem;
    font-size: 12px;
    color: var(--color-text-muted);
}

.form-error {
    margin-top: 0.25rem;
    font-size: 12px;
    color: var(--color-danger);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-cta);
}

/* --- source: components/floating-field.css --- */
/* --------------------------------------------------------------------------
   Floating label form fields (shared)

   Single source of truth for floating labels across listing create, auth,
   and any other frontend form. Change styles here to update all usages.

   Markup: <div class="form-field form-float">
               <control class="form-float__control" placeholder=" ">
               <label class="form-float__label">
   Components: <x-frontend.form.float-input|float-textarea|float-select|float-password>
   -------------------------------------------------------------------------- */

.form-float {
    position: relative;
    display: block;
}

.form-float__control {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    min-height: 3.5rem; /* 56px */
    padding: 1.75rem 0.75rem 0.5rem; /* 28px 12px 8px */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-ui);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.25;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

input.form-float__control,
select.form-float__control {
    height: 3.5rem;
}

textarea.form-float__control {
    min-height: 7rem;
    line-height: 1.5;
    resize: vertical;
}

.form-float__control::placeholder {
    color: transparent;
}

.form-float__control:focus,
.form-float__control:focus-visible {
    outline: none;
    border-color: var(--color-cta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta) 18%, transparent);
}

.form-float .form-float__label {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    max-width: calc(100% - 1.6rem);
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    transform-origin: left top;
    color: var(--color-text-muted, #667085);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    overflow-x: clip;
    overflow-y: clip;
    overflow-clip-margin: 1px;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top 150ms ease, transform 150ms ease, font-size 150ms ease, color 150ms ease;
}

/* Textarea labels rest near the top rather than vertically centered. */
.form-float--textarea .form-float__label {
    top: 1.15rem;
    transform: none;
}

/*
 * Floated (active) state — value present, focused, or browser autofill.
 * Select elements do not support :placeholder-shown like inputs; keep this
 * rule scoped to input/textarea so deferred selects are not forced floating.
 */
.form-float__control:focus + .form-float__label,
input.form-float__control:not(:placeholder-shown) + .form-float__label,
textarea.form-float__control:not(:placeholder-shown) + .form-float__label,
.form-float__control:-webkit-autofill + .form-float__label,
.form-float__control:-webkit-autofill:hover + .form-float__label,
.form-float__control:-webkit-autofill:focus + .form-float__label,
.form-float__control:autofill + .form-float__label {
    top: 0.625rem; /* 10px — 1px up to balance padding-block */
    transform: none;
    font-size: 0.75rem; /* 12px */
    line-height: 1.3;
    padding-block: 1px;
}

.form-float__control:focus + .form-float__label {
    color: var(--color-cta);
}

/* Number inputs ignore placeholder; keep the label floated when a value exists. */
.form-float--filled .form-float__label,
.form-float__control[type="number"]:not(:placeholder-shown) + .form-float__label,
.form-float__control[type="number"]:focus + .form-float__label {
    top: 0.625rem;
    transform: none;
    font-size: 0.75rem;
    line-height: 1.3;
    padding-block: 1px;
}

/* ---- Select variant (legacy — label always floated) ---------------------- */
.form-float--select:not(.form-float--select-deferred) .form-float__label {
    top: 0.625rem;
    transform: none;
    font-size: 0.75rem;
    line-height: 1.3;
    padding-block: 1px;
}

.form-float--select .form-float__control {
    /* Selected option text sits below the floated label; asymmetric padding
       reclaims vertical room so 16px/1.3 line-height fits ğ/ş/g descenders. */
    padding-top: 1.5625rem; /* 25px — 3px less than shared control padding */
    padding-bottom: 0.125rem; /* 2px — 6px less, room for native descenders */
    padding-right: 2.4rem;
    line-height: 1.3;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1rem;
}

.form-float--select:not(.form-float--select-deferred) .form-float__control:focus + .form-float__label {
    color: var(--color-cta);
}

/*
 * Deferred empty display (listing flow): label rests in the field until focus or a
 * real value is chosen. Only null/'' are empty — value="0" is a valid selection.
 * Placeholder option (value="") stays in the DOM for validation; closed idle state
 * hides its text via transparent select color. Alpine toggles form-float--filled
 * using focused || value !== ''; :has() selectors mirror SSR before Alpine boots.
 */
.form-float--select-deferred:not(.form-float--filled):not(:has(.form-float__control:focus)):not(:has(.form-float__control option:checked:not([value=""]))) .form-float__label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    line-height: 1.1;
}

.form-float--select-deferred.form-float--filled .form-float__label,
.form-float--select-deferred:has(.form-float__control:focus) .form-float__label,
.form-float--select-deferred:has(.form-float__control option:checked:not([value=""])) .form-float__label {
    top: 0.625rem;
    transform: none;
    font-size: 0.75rem;
    line-height: 1.3;
    padding-block: 1px;
}

/*
 * Textarea floated label: opaque backing so scrolled content cannot show through.
 * Background wraps label text only (small horizontal padding); does not cover
 * the field border or scrollbar. pointer-events stays none on the label.
 */
.form-float--textarea .form-float__control:focus + .form-float__label,
.form-float--textarea textarea.form-float__control:not(:placeholder-shown) + .form-float__label,
.form-float--textarea .form-float__control:-webkit-autofill + .form-float__label,
.form-float--textarea .form-float__control:-webkit-autofill:hover + .form-float__label,
.form-float--textarea .form-float__control:-webkit-autofill:focus + .form-float__label,
.form-float--textarea .form-float__control:autofill + .form-float__label,
.form-float--textarea.form-float--filled .form-float__label {
    z-index: 1;
    background-color: var(--color-surface);
    padding-inline: 0.125rem;
    margin-inline: -0.125rem;
}

.form-float--textarea .form-float__control:disabled + .form-float__label {
    background-color: var(--color-surface-muted);
}

.form-float--select-deferred.form-float--focused .form-float__label,
.form-float--select-deferred:has(.form-float__control:focus) .form-float__label {
    color: var(--color-cta);
}

.form-float--select-deferred:not(.form-float--filled):not(:has(.form-float__control:focus)):not(:has(.form-float__control option:checked:not([value=""]))) .form-float__control {
    color: transparent;
}

/* ---- Password variant ---------------------------------------------------- */
.form-float--password .form-float__control {
    padding-right: 2.75rem;
}

.form-float__toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-ui);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

.form-float__toggle-icon {
    width: 18px;
    height: 18px;
}

/* Keep autofill chrome tint close to the field surface without hiding text. */
.form-float__control:-webkit-autofill,
.form-float__control:-webkit-autofill:hover,
.form-float__control:-webkit-autofill:focus,
.form-float__control:autofill {
    -webkit-text-fill-color: var(--color-text);
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
    transition: background-color 99999s ease-out;
}

/* ---- Error state --------------------------------------------------------- */
.form-float:has(.form-error) .form-float__control {
    border-color: color-mix(in srgb, var(--color-danger) 72%, var(--color-border));
}

.form-float:has(.form-error) .form-float__control:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 14%, transparent);
}

.form-float .form-error {
    display: block;
    margin-top: 0.3rem;
}

/* ---- Disabled ------------------------------------------------------------ */
.form-float__control:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-surface-muted);
}

@media (prefers-reduced-motion: reduce) {
    .form-float__control,
    .form-float__label {
        transition: none;
    }
}

/* ---- Phone input (single full-width field for TR/KKTC) ----------------- */
.phone-input {
    margin-bottom: 0;
}

.phone-input > .form-float {
    margin-bottom: 0;
}

.phone-input .form-error {
    margin-top: 0.375rem;
}

/* WhatsApp mode still uses country + national split layout */
.phone-input__row {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.phone-input__country {
    flex: 0 0 auto;
    min-width: 9.5rem;
}

.phone-input__country--select {
    min-width: 11rem;
}

.phone-input__number {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .phone-input__row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .phone-input__country,
    .phone-input__country--select {
        min-width: 0;
        width: 100%;
    }
}

/* --- source: components/ui.css --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-ui);
    font-size: 12px;
    font-weight: 600;
}

.badge--success {
    background: color-mix(in srgb, var(--color-success) 15%, var(--color-surface));
    color: var(--color-success);
}

.badge--danger {
    background: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface));
    color: var(--color-danger);
}

.badge--warning {
    background: color-mix(in srgb, var(--color-warning) 15%, var(--color-surface));
    color: var(--color-warning);
}

.badge--info {
    background: color-mix(in srgb, var(--color-info) 15%, var(--color-surface));
    color: var(--color-info);
}

.badge--neutral {
    background: color-mix(in srgb, var(--color-text-muted) 15%, var(--color-surface));
    color: var(--color-text-muted);
}

.badge--purple {
    background: color-mix(in srgb, var(--color-purple) 15%, var(--color-surface));
    color: var(--color-purple);
}

.badge--sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.alert--success {
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border));
    color: var(--color-success);
}

.alert--danger {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
    color: var(--color-danger);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.table th {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-weight: 600;
}

.table tbody tr:hover {
    background: var(--color-surface-muted);
}

/* --- source: layouts/frontend.css --- */
:root {
    /* Desktop content width — shared by navbar, page content and footer inner containers */
    --frontend-container-max: 1160px;
    --frontend-container-max-narrow: 760px;
    --frontend-container-max-wide: 1080px;
    --frontend-container-gutter: 32px;

    /* Shared navbar dimensions — single source of truth for all frontend pages */
    --frontend-navbar-height: 3.5rem;
    --frontend-navbar-border-height: 1px;
    --frontend-navbar-logo-max-height: 28px;
    --frontend-navbar-hit-area: 2.75rem;
    --frontend-navbar-icon-size: 1.25rem;
    /* Compact toolbar text actions (Kaydet) — icon hit targets use --frontend-navbar-hit-area */
    --frontend-navbar-action-height: 2rem;
    /* Back chevron — slightly smaller than profile menu icon */
    --frontend-navbar-back-icon-size: 1.5rem;
    --frontend-navbar-total-height: calc(
        var(--frontend-navbar-height) + var(--frontend-navbar-border-height)
    );
    /* Desktop left rail width — shared by the account sidebar and the category
       sidebar so the two can never drift into separate magic numbers. */
    --frontend-sidebar-min-width: 220px;
    --frontend-sidebar-max-width: 232px;
    /* Horizontal gap between left rail and main panel — matches .account-shell at ≥992px. */
    --frontend-sidebar-content-gap: 1.5rem;

    /* Symmetric white-space inset between page chrome (navbar / footer) and content. */
    --frontend-page-content-gap: 2rem;
    --frontend-page-content-gap-top: var(--frontend-page-content-gap);
    --frontend-page-content-gap-bottom: var(--frontend-page-content-gap);

    /* Footer block internal inset (inside gray background — not the page content gap). */
    --site-footer-padding-top: 2rem;
    --site-footer-padding-bottom: 2rem;

    /* Legacy aliases consumed by existing rules */
    --site-header-min-height: var(--frontend-navbar-height);
    --site-header-logo-max-height: var(--frontend-navbar-logo-max-height);
    --site-header-padding-block: 0;

    /* Listing flow chrome (mobile defaults reset in listing-create.css) */
    --listing-flow-navbar-height: var(--frontend-navbar-height);
    --listing-flow-navbar-total-height: var(--frontend-navbar-height);
    --listing-flow-mobile-header-content-height: var(--frontend-navbar-height);
    --listing-flow-mobile-header-border-height: var(--frontend-navbar-border-height);
    --listing-flow-mobile-header-height: calc(
        var(--frontend-navbar-height) + var(--frontend-navbar-border-height)
    );
    --listing-flow-mobile-header-safe-top: 0px;
    --listing-flow-mobile-chrome-offset: 0px;
    --listing-flow-mobile-content-gap: 0px;
    --listing-flow-breadcrumb-bar-height: calc(0.875rem * 1.25 + 0.75rem);
    --listing-flow-site-header-height: var(--listing-flow-mobile-header-height);
    --listing-flow-step-header-height: 0px;

    --site-header-mobile-menu-top: calc(
        var(--frontend-navbar-height) + var(--frontend-navbar-border-height)
    );
}

/* Shared mobile back chevron (listing flow + account toolbars). */
.frontend-navbar-back-icon,
.fe-nav-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--frontend-navbar-back-icon-size);
    height: var(--frontend-navbar-back-icon-size);
    line-height: 0;
}

.frontend-navbar-back-icon svg,
.fe-nav-back-icon svg {
    display: block;
    width: var(--frontend-navbar-back-icon-size);
    height: var(--frontend-navbar-back-icon-size);
}

.frontend-container,
.container {
    width: calc(100% - var(--frontend-container-gutter));
    max-width: var(--frontend-container-max);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.frontend-container--narrow {
    max-width: var(--frontend-container-max-narrow);
}

.frontend-container--wide {
    max-width: var(--frontend-container-max-wide);
}

.site-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*
 * Account / auth page chrome — mobile-first, project-controlled visibility.
 * Default: desktop navbar hidden, mobile page title visible.
 * Desktop (>=992px) is the shared frontend desktop-start breakpoint so all
 * frontend pages flip navbar/footer chrome together; Instagram/FB in-app
 * browsers that report ~980px layout width still get mobile chrome
 * without user-agent branching or Bootstrap d-* utilities.
 */

/*
 * Hide mobile menu chrome only on true desktop / large layouts.
 * Do not use bare (min-width: 768px): Instagram WebViews often report ~980px while still being phones.
 */

[x-cloak] {
    display: none !important;
}

.site-footer {
    width: 100%;
    background: #F9F9F9;
    color: var(--color-text-muted);
    padding-top: var(--site-footer-padding-top);
    padding-bottom: var(--site-footer-padding-bottom);
    margin-top: auto;
}

@media (min-width: 992px) {
    .site-footer {
        border-top: var(--frontend-navbar-border-height) solid var(--color-border);
    }
}

.page-main {
    flex: 1;
    padding-top: var(--frontend-page-content-gap-top);
    padding-bottom: var(--frontend-page-content-gap-bottom);
}

.listing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .listing-card:hover {
        box-shadow: var(--shadow-md);
    }
}

.listing-card__image {
    aspect-ratio: 16 / 10;
    background: var(--color-surface-muted);
}

.listing-card__body {
    padding: 1rem;
}

.listing-card__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--color-text);
}

.listing-card__price {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-cta);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.site-footer__heading {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: #555;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-footer__links a {
    color: #888;
    text-decoration: none;
    font-size: 14px;
}

.site-footer__links a:hover {
    color: #555;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__links .site-footer__link-placeholder {
    color: #888;
    cursor: default;
    font-size: 14px;
}

.site-footer__disclaimer {
    margin: 0 0 1rem;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: #fff;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}

.site-footer__disclaimer p {
    margin: 0;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer__copyright {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.site-footer__powered-by {
    margin: 0 0 0 auto;
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: right;
}

.site-footer__powered-by a {
    color: inherit;
    text-decoration: none;
}

.site-footer__powered-by a:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (max-width: 991px) {
    .site-footer {
        display: none;
    }
}

html:has(.footer-content-page),
.footer-content-page {
    background: var(--color-surface);
}

.footer-content-page .fe-nav {
    box-shadow: none;
}

.content-page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "content"
        "sidebar";
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.content-page-main {
    grid-area: content;
    min-width: 0;
}

.content-page-sidebar {
    grid-area: sidebar;
    min-width: 0;
}

.content-page-shell > .content-page-main > .content-page {
    min-width: 0;
}

.content-page-sidebar__nav {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-ui);
    box-sizing: border-box;
    overflow: hidden;
}

.content-page-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-page-sidebar__item + .content-page-sidebar__item {
    border-top: 1px solid var(--color-border);
}

.content-page-sidebar__link {
    display: block;
    padding: 0.75rem 0.875rem;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}

a.content-page-sidebar__link:hover,
a.content-page-sidebar__link:focus-visible {
    background: var(--color-surface);
    color: var(--color-cta);
    text-decoration: none;
}

.content-page-sidebar__link.is-active {
    background: var(--color-cta);
    color: #fff;
    font-weight: 600;
}

.content-page__title {
    margin: 0 0 0.75rem;
    font-size: 1.625rem;
    color: var(--color-text);
}

.content-page__excerpt {
    margin: 0 0 1.5rem;
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.content-page--legal .content-page__body,
.content-page__body.prose {
    max-width: 760px;
    line-height: 1.7;
    color: var(--color-text);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.content-page__body.prose :is(p, li, td, th, blockquote, h2, h3, h4) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.content-page__body.prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.content-page__body.prose h2,
.content-page__body.prose h3,
.content-page__body.prose h4 {
    margin: 1.5rem 0 0.75rem;
}

.content-page__body.prose p {
    margin: 0 0 1rem;
}

.content-page__updated {
    margin-top: 2rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@media (min-width: 992px) {
    html:has(.content-sidebar-page),
    .content-sidebar-page {
        background: var(--color-surface-muted);
    }

    .content-sidebar-page .content-page-shell {
        grid-template-columns:
            minmax(var(--frontend-sidebar-min-width), var(--frontend-sidebar-max-width))
            minmax(0, 1fr);
        grid-template-areas: "sidebar content";
        gap: var(--frontend-sidebar-content-gap);
    }

    .content-sidebar-page .content-page-sidebar {
        background: var(--color-surface);
        border-radius: var(--radius-ui);
        box-sizing: border-box;
        align-self: start;
        overflow: hidden;
    }

    .content-sidebar-page .content-page-sidebar__nav {
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .content-sidebar-page .content-page-main {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-ui);
        box-sizing: border-box;
        padding: 1.5rem;
        align-self: start;
    }

    .content-page-shell {
        grid-template-columns:
            minmax(var(--frontend-sidebar-min-width), var(--frontend-sidebar-max-width))
            minmax(0, 1fr);
        grid-template-areas: "sidebar content";
        gap: var(--frontend-sidebar-content-gap);
    }

    .content-page-sidebar__nav {
        background: var(--color-surface);
    }
}

@media (max-width: 991px) {
    .content-sidebar-page {
        background: var(--color-surface);
    }

    .footer-content-page .page-main > .frontend-container {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: max(calc(var(--frontend-container-gutter) / 2), env(safe-area-inset-left, 0px))
            max(calc(var(--frontend-container-gutter) / 2), env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }

    .content-page,
    .content-page-shell,
    .content-page-main,
    .content-page__body.prose {
        min-width: 0;
        max-width: 100%;
    }
}

.content-contact {
    margin-bottom: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.content-contact__title {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
}

.content-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.content-contact__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* --- source: layouts/account.css --- */
.page-main--account {
    padding-top: 1.25rem;
}

.account-shell {
    display: grid;
    grid-template-columns: minmax(var(--frontend-sidebar-min-width), var(--frontend-sidebar-max-width)) minmax(0, 1fr);
    gap: clamp(1.75rem, 2.5vw, 2.5rem);
    align-items: start;
}

.account-sidebar__inner {
    position: sticky;
    top: calc(var(--site-header-min-height) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.875rem;
    background: transparent;
}

.account-sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    height: 2.375rem;
    padding: 0 0.875rem;
    border-radius: var(--radius-ui);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0s;
    box-sizing: border-box;
}

.account-sidebar__user:hover,
.account-sidebar__user:focus,
.account-sidebar__user:focus-visible,
.account-sidebar__user:active,
.account-sidebar__user:visited {
    text-decoration: none;
}

.account-sidebar__user:hover:not(.is-active),
.account-sidebar__user:focus-visible:not(.is-active) {
    background: var(--color-surface-muted);
}

.account-sidebar__user.is-active {
    background: color-mix(in srgb, var(--color-cta) 12%, var(--color-surface));
    color: var(--color-cta);
}

.account-sidebar__user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.account-sidebar__user-avatar .user-avatar {
    display: inline-flex;
    border-radius: var(--radius-avatar);
}

.account-sidebar__user-meta {
    min-width: 0;
    flex: 1 1 auto;
}

.account-sidebar__user-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
}

.account-sidebar__user-name {
    min-width: 0;
    flex: 0 1 auto;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-sidebar__user.is-active .account-sidebar__user-name {
    color: var(--color-cta);
}

.account-sidebar__user-verified {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 1;
}

.account-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-nav__group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.account-nav__group + .account-nav__group {
    margin-top: 0.125rem;
}

.account-nav__group-label {
    display: block;
    padding: 0.375rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.25;
}

.account-nav__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-ui);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0s;
}

.account-nav__link:hover,
.account-nav__link:focus,
.account-nav__link:focus-visible,
.account-nav__link:active,
.account-nav__link:visited {
    text-decoration: none;
}

.account-nav__link:hover:not(.is-active),
.account-nav__link:focus-visible:not(.is-active) {
    background: var(--color-surface-muted);
}

.account-nav__link.is-active {
    background: color-mix(in srgb, var(--color-cta) 12%, var(--color-surface));
    color: var(--color-cta);
    font-weight: 600;
}

.account-nav__icon,
.account-sidebar__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.72;
    line-height: 1;
}

.account-nav__icon svg,
.account-sidebar__link-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.account-nav__link.is-active .account-nav__icon,
.account-nav__link.is-active .account-sidebar__link-icon {
    opacity: 1;
    color: var(--color-cta);
}

.account-nav__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-ui);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.account-nav__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.account-nav__accordion-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.account-nav__accordion-chevron {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-text-muted);
    transition: transform 150ms ease, color 150ms ease;
}

.account-nav__accordion-chevron.is-open {
    transform: rotate(180deg);
    color: currentColor;
}

.account-nav__accordion-trigger.is-active .account-nav__accordion-chevron {
    color: var(--color-cta);
}

.account-nav__submenu {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    padding-left: 0.625rem;
}

.account-nav__submenu-link {
    min-height: 2.125rem;
    padding-left: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.account-nav__submenu-link.is-active {
    background: color-mix(in srgb, var(--color-cta) 12%, var(--color-surface));
    color: var(--color-cta);
    font-weight: 600;
}

.account-main {
    min-width: 0;
}

/* Shared user summary */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-avatar);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-brand) 18%, var(--color-surface-muted));
    color: var(--color-text);
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.user-avatar--sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6875rem;
}

.user-avatar--md {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

.user-avatar--lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

.user-avatar--profile {
    width: 88px;
    height: 88px;
    font-size: 1.5rem;
}

.user-avatar--xl {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.25rem;
}

.user-avatar--advisor-secondary {
    width: 56px;
    height: 56px;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .user-avatar--profile {
        width: 150px;
        height: 150px;
        font-size: 2.25rem;
    }
}

.user-avatar__image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.user-avatar__initials {
    display: block;
    letter-spacing: 0.02em;
}

.user-avatar__fallback-icon {
    width: 58%;
    height: 58%;
    opacity: 0.72;
}

.msg-conversation-row__avatar:not(:has(.user-avatar, .organization-logo-avatar)),
.msg-chat-header__avatar:not(:has(.user-avatar, .organization-logo-avatar)) {
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.user-summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.user-summary__meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.user-summary__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-summary__email,
.user-summary__role {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-summary--dropdown,
.user-summary--drawer {
    width: 100%;
}

html.fe-nav-sheet-open,
html.fe-nav-sheet-open body {
    overflow: hidden;
}

[x-cloak] {
    display: none !important;
}

@media (max-width: 991px) {
    .account-sidebar {
        display: none;
    }

    .account-shell {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .account-layout-page .page-main--account > .frontend-container {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    .account-layout-page:has(.account-shell) {
        background: var(--color-surface);
    }

    .account-layout-page .account-main:not(.account-main--messages) {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        min-height: 0;
        display: block;
    }

    .account-layout-page .account-profile-edit {
        max-width: none;
        width: 100%;
        padding-inline: 1rem;
        box-sizing: border-box;
    }
}

.account-placeholder__title {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
}

.account-placeholder__message {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.account-placeholder {
    width: 100%;
}

.inactive-listings__title {
    margin: 0 0 1rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
}

/*
 * Account layout chrome — mobile-first.
 * Desktop header (.site-desktop-header) stays hidden until min-width: 992px
 * (shared frontend desktop-start band, same as navbar / footer / sidebar), so
 * inflated ~980px in-app viewports still show the mobile page title instead of
 * the desktop logo/navbar.
 */
.account-layout-page {
    --account-mobile-content-gap: 0.75rem;
    --site-header-mobile-menu-top: calc(
        env(safe-area-inset-top, 0px) + var(--frontend-navbar-height) + var(--frontend-navbar-border-height)
    );
    --account-mobile-chrome-offset: var(--site-header-mobile-menu-top);
}

/* Grid flush under navbar (title is hidden on mobile) */
.account-inactive-listings-page {
    --account-mobile-content-gap: 0px;
}

.account-favorites-page {
    --account-mobile-content-gap: 0px;
}

@media (max-width: 991px) {
    .account-favorites-page:has(.account-placeholder),
    .account-inactive-listings-page:has(.account-placeholder),
    .account-organization-team-page:has(.account-placeholder) {
        --account-mobile-content-gap: 0.75rem;
    }
}

.account-organization-team-page {
    --account-mobile-content-gap: 0px;
}

.account-profile-cancellation-page {
    --account-mobile-content-gap: 1.25rem;
}

.account-layout-page .fe-nav--account {
    /*
     * Sticky keeps the mobile toolbar visible while scrolling long account pages.
     * Auth screens override to relative positioning below (short forms, in-app
     * WebViews sometimes fail to reserve space for sticky/fixed headers).
     */
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    z-index: 30;
    box-sizing: border-box;
    height: calc(env(safe-area-inset-top, 0px) + var(--frontend-navbar-height) + var(--frontend-navbar-border-height));
    min-height: calc(env(safe-area-inset-top, 0px) + var(--frontend-navbar-height) + var(--frontend-navbar-border-height));
    max-height: calc(env(safe-area-inset-top, 0px) + var(--frontend-navbar-height) + var(--frontend-navbar-border-height));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--color-surface);
    box-shadow: none;
    overflow: hidden;
}

@media (max-width: 991px) {
    .account-favorites-page .page-main--account,
    .account-favorites-page .account-shell,
    .account-favorites-page .account-main,
    .account-favorites-page .account-favorites,
    .account-favorites-page .account-favorites__grid,
    .account-favorites-page .profile-listings-grid,
    .account-favorites-page .account-favorites-card {
        position: static;
        overflow: visible;
    }

    .auth-layout-page.account-layout-page .fe-nav--account {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }
}

.account-layout-page .fe-nav--account .fe-nav__shell {
    overflow: visible;
    min-width: 0;
}

.account-layout-page .fe-nav-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.account-layout-page .fe-nav-toolbar__back {
    display: inline-flex;
    align-items: center;
    /* Same square as favori chip; gutter sits outside via margin. */
    justify-content: flex-start;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    justify-self: start;
    width: var(--fe-nav-chip-height, 2.25rem);
    min-width: var(--fe-nav-chip-height, 2.25rem);
    height: var(--fe-nav-chip-height, 2.25rem);
    min-height: var(--fe-nav-chip-height, 2.25rem);
    border: none;
    background: transparent;
    color: var(--color-text);
    padding: 0;
    box-sizing: border-box;
    margin: 0;
    margin-inline-start: calc(var(--frontend-container-gutter) / 2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--radius-button);
}

.account-layout-page .fe-nav-toolbar__title {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: stretch;
    z-index: 0;
    margin: 0;
    padding-inline: calc(var(--fe-nav-chip-height, 2.25rem) + (var(--frontend-container-gutter) / 2) + 0.25rem);
    min-height: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
    pointer-events: none;
}

.account-layout-page .fe-nav-toolbar__title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: stretch;
    z-index: 0;
    min-width: 0;
    min-height: 0;
    padding-inline: calc(var(--fe-nav-chip-height, 2.25rem) + (var(--frontend-container-gutter) / 2) + 0.25rem);
    overflow: hidden;
    pointer-events: none;
}

.account-layout-page .fe-nav-toolbar__title-group .fe-nav-toolbar__title {
    display: block;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
}

.account-layout-page .fe-nav-toolbar__subtitle {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-soft, #64748b);
    pointer-events: none;
}

.account-layout-page .fe-nav-toolbar__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
    grid-row: 1;
    z-index: 1;
    min-width: 0;
    justify-self: end;
}

@media (max-width: 991px) {
    .account-layout-page .fe-nav-toolbar__actions:not(:empty) {
        padding-inline-end: calc(var(--frontend-container-gutter) / 2);
        box-sizing: border-box;
    }

    /* Right toolbar controls: icon right-aligned inside hit area (mirror of back). */
    .account-layout-page .fe-nav-toolbar__actions .listing-favorite-toggle__button--mobile,
    .account-layout-page .fe-nav-toolbar__actions .listing-owner-actions-navbar__trigger {
        justify-content: flex-end;
    }
}

.account-layout-page .fe-nav-toolbar__actions:empty {
    visibility: hidden;
    pointer-events: none;
}

.account-layout-page .fe-nav-toolbar__save {
    align-self: center;
    min-height: 0;
    max-height: none;
    height: auto;
    padding-inline: 0.75rem;
    line-height: 1.25;
}

/* Equal inset on both sides so the title stays centered next to Kaydet. */
.account-layout-page .fe-nav-toolbar:has(.fe-nav-toolbar__actions:not(:empty)) .fe-nav-toolbar__title {
    padding-inline: max(4.75rem, calc(var(--fe-nav-chip-height, 2.25rem) + (var(--frontend-container-gutter) / 2) + 0.25rem));
}

.account-layout-page .fe-nav-toolbar:has(.fe-nav-toolbar__actions:not(:empty)) .fe-nav-toolbar__title-group {
    padding-inline: max(4.75rem, calc(var(--fe-nav-chip-height, 2.25rem) + (var(--frontend-container-gutter) / 2) + 0.25rem));
}

.account-layout-page .fe-nav-toolbar--no-back {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.account-layout-page .fe-nav-toolbar--no-back .fe-nav-toolbar__title {
    padding-inline: calc(var(--fe-nav-chip-height, 2.25rem) + (var(--frontend-container-gutter) / 2) + 0.25rem);
}

.account-layout-page .fe-nav-toolbar--no-back:has(.fe-nav-toolbar__actions:not(:empty)) .fe-nav-toolbar__title {
    padding-inline: max(4.75rem, calc(var(--fe-nav-chip-height, 2.25rem) + (var(--frontend-container-gutter) / 2) + 0.25rem));
}

.account-layout-page .fe-nav-toolbar--no-back .fe-nav-toolbar__actions {
    grid-column: 3;
}

.account-layout-page .page-main--account {
    /* Navbar is in-flow (sticky); only keep the content gap below it. */
    padding-top: var(--account-mobile-content-gap);
}

.account-layout-page .my-listings__title,
.account-layout-page .account-placeholder__title,
.account-layout-page .account-profile-edit__title--page,
.account-layout-page .inactive-listings__title {
    display: none;
}

.account-layout-page .account-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    min-height: calc(
        100dvh
        - var(--account-mobile-chrome-offset)
        - var(--account-mobile-content-gap)
        - var(--account-mobile-bottom-nav-height, 0px)
        - 0.75rem
    );
    padding-inline: 1rem;
}

.account-layout-page .account-placeholder__message {
    text-align: center;
}

.account-layout-page .my-listings__header {
    margin-bottom: 1rem;
}

@media (min-width: 992px) {
    .account-layout-page {
        --account-mobile-chrome-offset: 0px;
        --account-mobile-content-gap: 0px;
    }

    .account-inactive-listings-page {
        --account-mobile-content-gap: 0px;
    }

    .account-layout-page .fe-nav--account {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: auto;
        padding-top: 0;
        height: calc(var(--frontend-navbar-height) + var(--frontend-navbar-border-height));
        min-height: calc(var(--frontend-navbar-height) + var(--frontend-navbar-border-height));
        max-height: calc(var(--frontend-navbar-height) + var(--frontend-navbar-border-height));
        overflow: visible;
    }

    .account-layout-page .fe-nav--account .fe-nav__actions {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }

    .account-layout-page .my-listings__title,
    .account-layout-page .account-placeholder__title,
    .account-layout-page .account-profile-edit__title--page,
    .account-layout-page .inactive-listings__title {
        display: block;
    }

    .account-layout-page .account-placeholder {
        display: block;
        text-align: start;
        min-height: 0;
        padding-inline: 0;
    }

    .account-layout-page .account-placeholder__message {
        text-align: start;
    }

    .account-layout-page .page-main--account {
        padding-top: var(--frontend-page-content-gap-top);
    }

    /*
     * Desktop account panel shell — white workspace aligned with public profile owner view.
     * Scoped to pages with account-shell; mobile rules above stay unchanged.
     */
    .account-layout-page:has(.account-shell) {
        background: var(--color-surface);
    }

    .account-shell {
        align-items: start;
        gap: 1.5rem;
    }

    .account-sidebar {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-ui);
        box-sizing: border-box;
        min-width: 0;
        align-self: start;
        overflow: hidden;
    }

    .account-sidebar__inner {
        padding: 1rem 0.75rem;
        background: transparent;
    }

    .account-main:not(.account-main--messages):has(.account-profile-edit__container) {
        background: transparent;
        border: none;
        padding: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .account-main:not(.account-main--messages):not(:has(.account-profile-edit__container)) {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-ui);
        box-sizing: border-box;
        padding: 1.5rem;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .messages-layout-page .account-main--messages {
        background: transparent;
        border: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

.user-summary--hub {
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.user-summary--hub .user-avatar {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 0.875rem;
    background: color-mix(in srgb, var(--color-header) 16%, var(--color-surface-muted));
    color: var(--color-header);
}

.user-summary--hub .user-summary__meta {
    align-items: flex-start;
    gap: 0.125rem;
}

.user-summary--hub .user-summary__name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
}

.user-summary--hub .user-summary__email {
    font-size: 0.8125rem;
    line-height: 1.25;
}

/* Account modals (subscription cancel, shared stacking with profile modals) */
:root {
    --account-modal-z: 80;
}

html.account-modal--open,
html.account-modal--open body {
    overflow: hidden;
}

html.account-modal--open .fe-bottom-nav,
html.account-modal--open .fe-nav--account,
html.account-modal--open .fe-nav-sheet,
html.account-modal--open .fe-nav-sheet-backdrop {
    pointer-events: none;
}

.account-modal {
    position: fixed;
    inset: 0;
    z-index: var(--account-modal-z);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding:
        max(1rem, env(safe-area-inset-top, 0px))
        max(1rem, env(safe-area-inset-right, 0px))
        max(1rem, env(safe-area-inset-bottom, 0px))
        max(1rem, env(safe-area-inset-left, 0px));
    pointer-events: none;
}

.account-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
    animation: fe-modal-overlay-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.account-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 28rem);
    max-height: min(88vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem));
    margin: 0;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-ui);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    animation: fe-modal-surface-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.account-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.5rem;
}

.account-modal__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.account-modal__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -0.25rem -0.25rem 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-ui);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.account-modal__close:hover,
.account-modal__close:focus-visible {
    background: var(--color-surface-muted, rgba(15, 23, 42, 0.06));
    color: var(--color-text);
}

.account-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.account-modal__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding:
        1rem
        max(1rem, env(safe-area-inset-right, 0px))
        max(1rem, env(safe-area-inset-bottom, 0px))
        max(1rem, env(safe-area-inset-left, 0px));
}

.account-modal__footer .btn {
    min-width: 0;
}

@media (max-width: 991px) {
    .account-modal {
        align-items: flex-end;
        padding:
            max(0.75rem, env(safe-area-inset-top, 0px))
            0
            0
            0;
    }

    .account-modal__panel {
        width: 100%;
        max-width: none;
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.75rem));
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* --- source: components/auth.css --- */
html:has(.auth-layout-page),
.auth-layout-page {
    background: var(--color-surface);
}

.auth-layout-page .page-main--auth {
    padding-block: 1.5rem;
}

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
}

.auth-page__card {
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-ui);
}

.auth-page__header {
    padding-bottom: 1.25rem;
    text-align: center;
}

.auth-page__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

.auth-page__subtitle {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
}

.auth-page__body {
    padding: 0;
}

.auth-form-grid {
    display: grid;
    gap: 0;
}

.auth-form-grid--stacked {
    gap: 0.75rem;
}

.auth-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.auth-form-grid--two .form-group,
.auth-form-grid--two .form-float {
    margin-bottom: 1rem;
}

.auth-form > .form-float {
    margin-bottom: 1rem;
}

.auth-form > .phone-input {
    margin-bottom: 1rem;
}

.auth-form-footer {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.auth-form-footer a,
.auth-form-link {
    color: var(--color-cta);
    text-decoration: none;
    font-weight: 600;
}

.auth-form-footer a:hover,
.auth-form-link:hover {
    text-decoration: underline;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.auth-form-row__remember {
    margin-bottom: 0;
}

.auth-page .auth-form-row__remember.form-checkbox--lg {
    align-items: center;
}

.auth-page .auth-form-row__remember.form-checkbox--lg input {
    margin-top: 0;
}

.auth-form-terms-notice {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    text-align: center;
}

.auth-form-forgot-link {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--color-cta);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.auth-form-forgot-link:hover {
    text-decoration: underline;
}

.auth-page .form-checkbox--lg {
    align-items: flex-start;
    gap: 0.75rem;
}

.auth-page .form-checkbox--lg input {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.btn--block {
    width: 100%;
}

.password-input {
    position: relative;
}

.password-input__field {
    padding-right: 2.75rem;
}

.password-input__toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

.password-input__icon {
    width: 18px;
    height: 18px;
}

.verify-email__target {
    margin: 0.75rem 0;
    font-size: 0.9375rem;
    color: var(--color-text);
    word-break: break-word;
}

@media (min-width: 640px) {
    .auth-form-grid--two {
        gap: 1rem;
    }
}

@media (min-width: 992px) {
    .auth-layout-page .page-main--auth,
    .auth-layout-page.has-mobile-bottom-nav .page-main--auth {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding-top: var(--frontend-page-content-gap-top);
        padding-bottom: var(--frontend-page-content-gap-bottom);
    }

    .auth-layout-page .page-main--auth > .frontend-container {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .auth-layout-page .page-main--auth {
        padding-block: 1rem 1.5rem;
    }

    .auth-page__card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0.25rem 0 1rem;
        max-width: none;
        background: transparent;
    }

    /* Mobile toolbar already shows the page title. */
    .auth-page__header {
        display: none;
    }
}

@media (max-width: 991px) {
    .auth-layout-page.account-layout-page .page-main--auth {
        /* Auth navbar is in normal document flow on mobile. */
        padding-top: var(--account-mobile-content-gap);
        padding-bottom: 1.5rem;
    }
}

.auth-login-notice {
    width: 100%;
    max-width: 26rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
    box-sizing: border-box;
}

.auth-login-notice__text {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}

@media (max-width: 1023px) {
    .auth-login-notice {
        max-width: none;
    }
}

/* --- source: components/auth-modal.css --- */
html.auth-modal--open,
html.auth-modal--open body {
    overflow: hidden;
}

html.auth-modal--open .auth-modal__overlay {
    width: 100vw;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    pointer-events: none;
}

.auth-modal__overlay {
    position: fixed;
    inset: 0;
    z-index: 131;
    background: color-mix(in srgb, var(--color-text) 45%, transparent);
    animation: fe-modal-overlay-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
    pointer-events: auto;
}

.auth-modal__dialog {
    position: fixed;
    inset: 0;
    z-index: 132;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(0.75rem, env(safe-area-inset-top, 0px))
        max(0.75rem, env(safe-area-inset-right, 0px))
        max(0.75rem, env(safe-area-inset-bottom, 0px))
        max(0.75rem, env(safe-area-inset-left, 0px));
    pointer-events: none;
}

.auth-modal__surface {
    display: flex;
    flex-direction: column;
    width: min(100%, 26rem);
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: auto;
    animation: fe-modal-surface-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0;
}

.auth-modal__header .auth-page__title {
    margin: 0;
    text-align: start;
}

.auth-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-modal__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.5rem 1.5rem;
}

.auth-modal__scroll .auth-page__body {
    padding: 0;
}

.auth-modal__scroll .auth-page__header {
    display: none;
}

.auth-modal__scroll .auth-login-notice {
    margin: 0 0 1rem;
}

.auth-register-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 1rem;
    padding: 0.1875rem;
    background: color-mix(in srgb, var(--color-text-soft) 22%, var(--color-surface));
    border-radius: 0;
}

.auth-register-tabs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-register-tabs__tab:hover,
.auth-register-tabs__tab:focus {
    text-decoration: none;
}

.auth-register-tabs__tab.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 1px rgba(0, 0, 0, 0.04);
}

.auth-register-tabs__tab:focus-visible {
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}

.auth-form-link-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-cta);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.auth-form-link-button:hover {
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .auth-modal__dialog {
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        background: var(--color-surface);
    }

    .auth-modal__surface {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: var(--color-surface);
    }

    .auth-modal__surface.auth-page__card {
        border: 0;
        border-radius: 0;
        background: var(--color-surface);
    }

    .auth-modal__header {
        flex-shrink: 0;
        padding-top: max(1.5rem, env(safe-area-inset-top, 0px));
        padding-inline: 1rem;
        padding-bottom: 1.25rem;
        background: var(--color-surface);
    }

    .auth-modal__scroll {
        flex: 1 1 auto;
        min-height: 0;
        padding-inline: 1rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        background: var(--color-surface);
    }
}

@media (min-width: 1024px) {
    .auth-modal__surface.auth-page__card {
        border-radius: var(--radius-ui);
    }
}

/* --- source: components/support-mode-banner.css --- */
:root {
    --support-mode-banner-min-height: 2.5rem;
}

@media (max-width: 767px) {
    :root {
        --support-mode-banner-min-height: 3.5rem;
    }
}

.support-mode-banner {
    width: 100%;
    min-height: var(--support-mode-banner-min-height);
    background: #5c1a1a;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-sizing: border-box;
}

.support-mode-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-height: var(--support-mode-banner-min-height);
    padding-block: 0.5rem;
    flex-wrap: wrap;
}

.support-mode-banner__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    flex: 1 1 12rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.support-mode-banner__label {
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

.support-mode-banner__subject {
    font-weight: 500;
}

.support-mode-banner__meta {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8125rem;
}

.support-mode-banner__countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.support-mode-banner__action {
    flex-shrink: 0;
    margin: 0;
}

.support-mode-banner__end-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-button, var(--radius-ui));
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.support-mode-banner__end-btn:hover,
.support-mode-banner__end-btn:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.75);
    outline: none;
}

@media (min-width: 768px) {
    .support-mode-banner__inner {
        flex-wrap: nowrap;
        padding-block: 0.4375rem;
    }

    .support-mode-banner__text {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .support-mode-banner__subject,
    .support-mode-banner__meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .support-mode-banner__meta::before {
        content: '·';
        margin-inline: 0.375rem;
        opacity: 0.75;
    }
}

@media (max-width: 767px) {
    .support-mode-banner__inner {
        align-items: flex-start;
    }

    .support-mode-banner__action,
    .support-mode-banner__end-btn {
        width: 100%;
    }

    .support-mode-banner__end-btn {
        justify-content: center;
    }
}