:root {
    --rentlokr-ink: #0f172a;
    --rentlokr-sub-ink: #5f6b85;
    --rentlokr-hero-ink: #ffffff;
    --rentlokr-sky: #22b4f5;
    --rentlokr-sky-bright: #5fd0ff;
    --rentlokr-coral: #ff8a5c;
    --rentlokr-sand: #ffe08a;
    --rentlokr-navy: #181736;
    --rentlokr-hero-bg: #181736;
    --rentlokr-page-bg: #f7faff;
    --rentlokr-card-bg: #ffffff;
    --rentlokr-accent-ink: #bf2b2d;
    --rentlokr-grad-1: linear-gradient(120deg, #b36910, #dab526, #b36910);
    --rentlokr-grad-2: linear-gradient(135deg, #87d5ae, #3ea281, #28496e);
    --rentlokr-grad-3: linear-gradient(135deg, #cc3f17, #a3362a, #862c3b);
    --rentlokr-grad-4: linear-gradient(135deg, #da9d0a, #d94f0a, #a82741);
    --rentlokr-grad-5: linear-gradient(135deg, #4abf8f, #b86a2f, #cb6018);
    --rentlokr-grad-6: linear-gradient(135deg, #cacad2, #3065a7);
    --rentlokr-grad-7: linear-gradient(135deg, #4cd089, #c1c2c9);
    --rentlokr-font-display: "Plus Jakarta Sans";
    --rentlokr-font-body: "Open Sans";
    --rentlokr-header-height: 64px;
}

.mud-secondary-text {
    color: var(--rentlokr-sub-ink) !important;
    --mud-ripple-color: var(--rentlokr-sub-ink) !important;
}

.rentlokr-hero {
    background-color: var(--rentlokr-hero-bg);
    background-image: url("/images/RentLokr_Dark_ComingSoon3.svg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.rentlokr-hero,
.rentlokr-hero .mud-typography,
.rentlokr-hero .mud-typography * {
    color: var(--rentlokr-hero-ink) !important;
}

.rentlokr-main-content {
    background: transparent;
    padding-top: 0;
    margin-top: 0;
}

.listing-share-dialog {
    align-items: stretch;
}

.listing-share-preview-card {
    aspect-ratio: 1 / 1;
    width: min(100%, 480px);
    margin: 0 auto;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--rentlokr-ink);
}

.listing-share-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2rem;
}

.listing-share-brand-logo {
    display: block;
    width: 9.5rem;
    max-width: 52%;
    height: auto;
}

.listing-share-badge {
    border-radius: 999px;
    background: color-mix(in srgb, var(--rentlokr-accent-ink) 12%, white);
    color: var(--rentlokr-accent-ink);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
}

.listing-share-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 2.55 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #e2f7ef, #dbeafe 55%, #fef3c7);
    padding: 0.35rem;
}

.listing-share-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

.listing-share-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
}

.listing-share-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.listing-share-title {
    font-family: var(--rentlokr-font-display, "Open Sans");
    font-weight: 800 !important;
    line-height: 1.1 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-share-rate-row {
    min-height: 3.75rem;
}

.listing-share-price-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.listing-share-price {
    color: var(--mud-palette-primary);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.05;
}

.listing-share-price-secondary {
    color: var(--rentlokr-sub-ink);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.listing-share-qr {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    object-fit: contain;
    padding: 0.25rem;
}

.listing-share-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    color: var(--rentlokr-sub-ink);
    font-size: 0.82rem;
    font-weight: 600;
}

.listing-share-rating {
    min-height: 1.1rem;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.listing-share-description {
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-share-url,
.listing-share-link-text {
    color: #64748b;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.listing-share-footer {
    margin-top: auto;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.4rem;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
}

.listing-share-link-panel {
    background: #f8fafc;
}

.listing-share-caption-readonly {
    background: #f8fafc;
    max-width: 100%;
    min-width: 0;
}

.listing-share-caption-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    line-height: 1.45;
}

.listing-share-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.listing-share-action-button {
    min-width: 7.5rem;
}

@media (max-width: 599.98px) {
    .listing-share-preview-card {
        width: 100%;
        padding: 0.75rem;
        gap: 0.55rem;
    }

    .listing-share-brand-logo {
        width: 8rem;
        max-width: 48%;
    }

    .listing-share-badge {
        font-size: 0.66rem;
        padding: 0.25rem 0.5rem;
    }

    .listing-share-title {
        font-size: 1.05rem !important;
    }

    .listing-share-price {
        font-size: 1.15rem;
    }

    .listing-share-price-secondary,
    .listing-share-rating,
    .listing-share-meta,
    .listing-share-description,
    .listing-share-url,
    .listing-share-footer {
        font-size: 0.7rem;
    }

    .listing-share-qr {
        width: 3rem;
        height: 3rem;
    }

    .listing-share-actions {
        padding: 0.75rem 1rem;
    }

    .listing-share-action-button {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }
}

/* Account Mode Content Transitions */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes subtleFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-mode-content {
    animation: fadeSlideIn 0.25s ease-out;
}

.account-mode-content-fade {
    animation: fadeIn 0.2s ease-out;
}

/* Sub-tab content transitions (faster, subtler) */
.sub-tab-content {
    animation: subtleFadeIn 0.18s ease-out;
}

/* Stat Block Styles */
.rentlokr-stat-block {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: #ffffff;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.rentlokr-stat-block .stat-icon {
    position: absolute;
    right: 12px;
    top: 12px;
    opacity: 0.7;
}

.rentlokr-stat-block .stat-label {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.rentlokr-stat-block .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.rentlokr-stat-block.stat-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.rentlokr-stat-block.stat-green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.rentlokr-stat-block.stat-orange {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.rentlokr-stat-block.stat-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.terms-list {
    padding-left: 1.5rem;
    margin: 0.5rem 0 0;
}

.terms-list li {
    margin-bottom: 0.35rem;
}

.terms-list ul,
.terms-list ol {
    margin-top: 0.35rem;
}

.legal-last-updated {
    display: block;
    text-align: center;
}