/* CautColeg Page-Specific CSS - Refined Redesign */
/* -------------------------------------
 * OVERLAYS (CUSTOM SELECT REPLACEMENT)
 * ------------------------------------- */
.search-overlay {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 16px;
    min-width: 280px;
    z-index: 1002;
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.2s;
}
.search-overlay.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.search-option {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--gray);
    cursor: pointer;
    transition: background 0.1s;
}
.search-option:hover {
    background: var(--gray-bg);
    color: var(--black);
}
/* -------------------------------------
 * LISTINGS GRID
 * ------------------------------------- */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px 24px;
    margin-top: 24px;
}
/* -------------------------------------
 * CATEGORY TABS
 * ------------------------------------- */
.category-tabs-wrapper {
    position: sticky;
    top: 80px;
    background: white;
    z-index: 1000;
    border-bottom: 1px solid #ebebeb;
    padding: 12px 0;
}
.category-tabs {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}
.category-tabs::-webkit-scrollbar {
    display: none;
}
.category-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #717171;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    min-width: 60px;
    white-space: nowrap;
    position: relative;
    padding-bottom: 10px;
}
.category-tab:hover {
    color: #222222;
}
.category-tab:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #DDDDDD;
}
.category-tab.active {
    color: #222222;
}
.category-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #222222 !important;
}
.category-tab svg {
    width: 24px;
    height: 24px;
    opacity: 0.8;
}
.category-tab.active svg {
    opacity: 1;
}
/* -------------------------------------
 * LISTING CARD
 * ------------------------------------- */
.listing-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.listing-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 20 / 19;
    border-radius: 12px;
    overflow: hidden;
    background: #ebebeb;
}
.listing-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.listing-card:hover .listing-card-image img {
    transform: scale(1.05);
}
.wishlist-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 5;
    padding: 0;
}
.listing-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 5;
}
.listing-card-info {
    padding: 12px 0 0 0;
}
.listing-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.listing-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listing-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #222222;
}
.listing-card-subtitle {
    font-size: 15px;
    color: #717171;
    margin-bottom: 2px;
}
.listing-card-price {
    font-size: 15px;
    margin-top: 4px;
    color: #222222;
}
.listing-card-price strong {
    font-weight: 600;
}
/* -------------------------------------
 * LISTING DETAIL PAGE
 * ------------------------------------- */
.detail-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px;
}
.detail-header {
    margin-bottom: 24px;
}
.detail-header h1 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 8px;
}
.detail-header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #222222;
}
.detail-header-meta a {
    text-decoration: underline;
    color: inherit;
}
.detail-gallery-v2 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 480px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 48px;
}
.detail-gallery-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s;
}
.detail-gallery-v2 img:hover {
    filter: brightness(0.9);
    cursor: pointer;
}
.gallery-main {
    grid-area: 1 / 1 / 3 / 2;
}
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 80px;
}
.detail-section-intro {
    padding-bottom: 32px;
    margin-bottom: 32px;
}
.detail-section-intro h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}
.detail-host-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.detail-description {
    font-size: 16px;
    line-height: 24px;
    color: #222222;
}
/* Liniile duble de separare de pe pagina de anunţ veneau din două foi de stil
   care se completau fără să se anuleze: components.css punea `border-bottom` pe
   fiecare secţiune, iar aici era un `border-top`. Cum pages.css se încarcă după,
   `border-top` câştiga — dar `border-bottom` rămânea, aşa că între două
   secţiuni apăreau două linii cu spaţiu între ele. Separatorul e acum unul
   singur, cel din components.css. */
.detail-section {
    border-top: 0;
}
/* Ultima secţiune nu mai are nevoie de linie: sub ea nu urmează nimic. */
.detail-main-content > .detail-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.detail-section h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 24px;
}
.amenities-grid-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.amenity-item-detail {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
}
.detail-sidebar-card {
    position: sticky;
    top: 120px;
    border: 1px solid #dddddd;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    background: white;
}
.sidebar-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
}
.sidebar-price .price {
    font-size: 22px;
    font-weight: 600;
}
.sidebar-price .unit {
    font-size: 16px;
    color: #717171;
}
.btn-reserve {
    background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    margin-bottom: 8px;
    display: block;
    text-align: center;
    text-decoration: none;
}
.sidebar-helper-text {
    text-align: center;
    font-size: 14px;
    color: #717171;
    margin-top: 8px;
    margin-bottom: 24px;
}
.sidebar-totals {
    border-top: 1px solid #dddddd;
    padding-top: 24px;
}
.total-row {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 950px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
    .detail-sidebar-card {
        position: static;
        margin-top: 32px;
    }
    .detail-gallery-v2 {
        grid-template-columns: 1fr;
        grid-template-rows: 300px;
        height: auto;
    }
}
/* -------------------------------------
 * PROFILE SETUP WIZARD
 * ------------------------------------- */
.quiz-wrapper {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.quiz-progress-bar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gray-lightest);
    z-index: 100;
}
.quiz-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand) 0%, #FF8A5C 100%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 4px 4px 0;
}
.quiz-container {
    width: 100%;
    max-width: 580px;
    padding: 0 24px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiz-screen {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.quiz-fade-out {
    animation: quizFadeOut 0.25s ease forwards;
}
.quiz-fade-in {
    animation: quizFadeIn 0.35s ease forwards;
}
@keyframes quizFadeOut {
    to { opacity: 0; transform: translateY(-16px); }
}
@keyframes quizFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.quiz-intro-screen {
    gap: 16px;
}
.quiz-intro-logo {
    margin-bottom: 12px;
}
.quiz-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--black);
    line-height: 1.2;
    margin: 0;
}
.quiz-subtitle {
    font-size: 1rem;
    color: var(--gray);
    line-height: 1.5;
    max-width: 400px;
    margin: 0;
}
.quiz-btn-start {
    margin-top: 20px;
    padding: 16px 48px;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: var(--brand);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.quiz-btn-start:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(255, 56, 92, 0.3); }
.quiz-question-header {
    margin-bottom: 32px;
}
.quiz-emoji {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 16px;
}
.quiz-question {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--black);
    line-height: 1.3;
    margin: 0;
}
.quiz-subtitle-small {
    font-size: 0.9rem;
    color: var(--gray);
    margin: 8px 0 0;
    line-height: 1.4;
}
.quiz-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.quiz-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: var(--white);
    border: 2px solid var(--gray-lightest);
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    transition: all 0.2s ease;
    animation: optionSlideIn 0.35s ease forwards;
    opacity: 0;
    transform: translateY(12px);
}
@keyframes optionSlideIn {
    to { opacity: 1; transform: translateY(0); }
}
.quiz-option:hover {
    border-color: var(--brand);
    background: #FFF5F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.1);
}
.quiz-option.selected {
    border-color: var(--brand);
    background: var(--brand);
    color: white;
    transform: scale(0.98);
    pointer-events: none;
}
.quiz-option.selected .quiz-option-letter {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}
.quiz-option.dimmed {
    opacity: 0.35;
    pointer-events: none;
    transform: scale(0.97);
}
.quiz-option-letter {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--gray-bg);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gray-dark);
    transition: all 0.2s;
}
.quiz-option-text {
    flex: 1;
}
/* ── Reacţia de după un răspuns ───────────────────────────────────────────
   Era o pastilă neagră lată, adică exact ce arată butoanele din chestionar —
   iar un lucru care arată ca un buton pare că trebuie apăsat. Nu e o acţiune,
   e o reacţie. Acum e o bulă deschisă care sare în sus şi se topeşte. */
.quiz-reaction {
    position: fixed;
    bottom: 48px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: var(--gray-dark, #222);
    padding: 11px 20px 11px 14px;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    transform: translateX(-50%) translateY(14px) scale(.86);
    transition: opacity .22s ease, transform .34s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .06);
    max-width: min(90vw, 420px);
    text-align: left;
}
.quiz-reaction.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.quiz-reaction-emoji {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
    /* Emoji-ul intră cu o jumătate de secundă în urmă, ca la o reacţie pusă de
       cineva — mai întâi apare bula, apoi figura. */
    animation: reactieEmoji .55s cubic-bezier(.34, 1.56, .64, 1) .06s both;
}
.quiz-reaction.visible .quiz-reaction-emoji { animation-play-state: running; }
.quiz-reaction-text { min-width: 0; }

@keyframes reactieEmoji {
    0%   { transform: scale(0) rotate(-25deg); }
    70%  { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-reaction { transition: opacity .2s ease; transform: translateX(-50%); }
    .quiz-reaction.visible { transform: translateX(-50%); }
    .quiz-reaction-emoji { animation: none; }
}
.quiz-milestone-screen {
    gap: 12px;
}
.quiz-milestone-emoji {
    font-size: 3rem;
    animation: milestoneEmojiBounce 0.6s ease;
}
@keyframes milestoneEmojiBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
.quiz-milestone-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--black);
    margin: 0;
    line-height: 1.3;
}
.quiz-milestone-subtitle {
    font-size: 0.95rem;
    color: var(--gray);
    margin: 0;
    line-height: 1.4;
}
.quiz-btn-continue {
    margin-top: 16px;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    background: var(--white);
    border: 2px solid var(--black);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.quiz-btn-continue:hover { background: var(--black); color: var(--white); }
.quiz-zones-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 500px;
}
.quiz-zone-pill {
    padding: 10px 20px;
    border: 2px solid var(--gray-lightest);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-dark);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.quiz-zone-pill input { display: none; }
.quiz-zone-pill:hover { border-color: var(--brand); color: var(--brand); }
.quiz-zone-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: white;
}
.quiz-avatar-area {
    width: 160px;
    height: 160px;
    border: 3px dashed var(--gray-lighter);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin: 24px 0 12px;
    overflow: hidden;
}
.quiz-avatar-area:hover { border-color: var(--brand); }
.quiz-avatar-circle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}
.quiz-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.quiz-avatar-label {
    font-size: 0.85rem;
    color: var(--gray);
    margin-top: 8px;
}
.quiz-age-field {
    width: 120px;
    padding: 16px 24px;
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    border: 2px solid var(--gray-lightest);
    border-radius: 16px;
    outline: none;
    font-family: inherit;
    color: var(--black);
    transition: border-color 0.2s;
}
.quiz-age-field:focus { border-color: var(--brand); }
.quiz-age-field::placeholder { color: var(--gray-lighter); font-weight: 400; }
.quiz-avatar-actions {
    margin-top: 12px;
}
.quiz-final-screen {
    gap: 12px;
}
.quiz-final-emoji {
    font-size: 4rem;
    animation: finalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes finalPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.quiz-final-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--black);
    margin: 0;
}
.quiz-final-subtitle {
    font-size: 1rem;
    color: var(--gray);
    margin: 0;
}
.quiz-btn-submit {
    margin-top: 24px;
    padding: 18px 56px;
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    background: var(--brand);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.quiz-btn-submit:hover { transform: scale(1.04); box-shadow: 0 8px 24px rgba(255, 56, 92, 0.35); }
.quiz-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
    .quiz-container { padding: 0 16px; }
    .quiz-title, .quiz-final-title { font-size: 1.6rem; }
    .quiz-question { font-size: 1.25rem; }
    .quiz-option { padding: 14px 18px; font-size: 0.95rem; }
    .quiz-option-letter { width: 28px; height: 28px; font-size: 0.8rem; }
    .quiz-reaction { font-size: 0.85rem; padding: 10px 16px 10px 12px; bottom: 24px; }
    .quiz-reaction-emoji { font-size: 1.2rem; }
    .quiz-emoji { font-size: 2rem; }
    .quiz-avatar-area { width: 120px; height: 120px; }
}
.setup-page { display: none; }
/* -------------------------------------
 * ROOMMATE CARD (Realitatea B - Omul)
 * ------------------------------------- */
.roommate-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    margin-bottom: 24px;
}
.roommate-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.roommate-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
}
.roommate-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-bg);
    flex-shrink: 0;
}
.roommate-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.roommate-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.roommate-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--black);
}
.roommate-occup {
    font-size: 14px;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.roommate-match-score {
    background: #f7f7f7;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--gray);
    position: absolute;
    top: 0;
    right: 0;
}
.roommate-match-score.high {
    background: #fff8f6;
    color: var(--brand);
}
.roommate-card-body {
    display: flex;
    flex-direction: column;
}
.roommate-bio {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin: 0 0 16px 0;
    font-style: italic;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.roommate-divider {
    border-bottom: 1px solid #f1f5f9;
    margin: 0 0 16px 0;
}
.roommate-row {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.roommate-row svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.roommate-row strong {
    color: var(--black);
    font-weight: 600;
}
.roommate-seeking {
    font-size: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--border-dark);
    color: var(--black);
    display: none; /* hidden since we moved logic to rows */
}
.special-highlight {
    color: var(--brand);
    font-weight: 600;
}
/* -------------------------------------
 * MESSAGES / CHAT UI
 * ------------------------------------- */
.messages-page {
    display: flex;
    height: calc(100vh - var(--header-height));
    max-width: var(--container-max);
    margin: 0 auto;
    background: var(--white);
    border-top: 1px solid var(--border-light);
    overflow: hidden;
}
/* -------------------------------------
 * AUTH PAGE ENHANCEMENTS (Login/Register)
 * ------------------------------------- */
.auth-heading {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--black);
    margin-bottom: var(--sp-6);
}
.auth-input-group {
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}
.auth-input-group .form-input {
    border: none;
    border-radius: 0;
    padding: 18px 16px;
}
.auth-input-group .form-input:not(:last-child) {
    border-bottom: 1px solid var(--gray-light);
}
.auth-disclaimer {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: var(--sp-4);
}
.auth-link {
    color: var(--black);
    text-decoration: underline;
    font-weight: 600;
}
.auth-bottom-text {
    text-align: center;
    margin-top: var(--sp-6);
    font-size: 14px;
    color: var(--text-primary);
}
.gender-pill input:checked+.pill-content {
    background: var(--black);
    color: white;
    border-color: var(--black);
}
.pill-content {
    padding: 12px;
    border: 1px solid var(--gray-light);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
/* -------------------------------------
 * SHARED PAGE COMPONENTS (Uniform Design)
 * ------------------------------------- */
.page-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-12) var(--container-pad) var(--sp-16);
}
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-8);
    gap: var(--sp-4);
}
.page-title-wrap h1 {
    font-size: var(--fs-3xl);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: var(--sp-1);
}
.page-subtitle {
    color: var(--gray);
    font-size: var(--fs-sm);
    font-weight: 500;
}
/* -------------------------------------
 * MY LISTINGS PAGE
 * ------------------------------------- */
.my-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-6);
}
.my-listings-empty {
    background: #f7f7f7;
    border-radius: 16px;
    padding: 64px 32px;
    text-align: center;
}
.my-listings-empty-icon {
    font-size: 48px;
    margin-bottom: 24px;
}
.my-listings-empty-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}
.my-listings-empty-text {
    color: var(--gray);
    margin-bottom: 32px;
    font-size: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.my-listings-empty-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.my-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.my-listing-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    background: white;
}
.my-listing-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.my-listing-img-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.my-listing-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.my-listing-content {
    padding: 12px 14px;
}
.my-listing-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
}
.my-listing-card-subtitle {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 4px;
}
.my-listing-card-price {
    font-weight: 700;
    font-size: 15px;
}
.my-listing-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.my-listing-action-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s;
    text-decoration: none;
}
.my-listing-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}
.my-listing-overlay-badge {
    background: var(--black);
    color: white;
    padding: 8px 16px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* -------------------------------------
 * LANDING PAGE (Hero Section & Grids)
 * ------------------------------------- */
.hero-section {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url('/img/cautcoleg.jpg') center/cover no-repeat;
    margin-bottom: 0;
    color: white;
    box-sizing: border-box;
    padding: 80px 20px;
}
.hero-kicker {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--brand, #FF385C);
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 16px;
    border-radius: 20px;
}
.hero-title {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
    color: white;
    line-height: 1.1;
}
.hero-subtitle {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 650px;
    margin: 0 auto 48px auto;
    line-height: 1.6;
    font-weight: 400;
}
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.hero-btn {
    padding: 18px 36px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.hero-btn-primary {
    background: var(--brand, #FF385C);
    color: white;
    border: 2px solid var(--brand, #FF385C);
}
.hero-btn-primary:hover {
    background: #e02e4d;
    border-color: #e02e4d;
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(255, 56, 92, 0.4);
    color: white;
}
.hero-btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
}
.hero-btn-outline:hover {
    background: white;
    color: #222;
    transform: scale(1.05);
}
@media (max-width: 768px) {
    .hero-section {
        padding: 80px 20px 100px;
    }
    .hero-title {
        font-size: 42px;
    }
    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 32px;
    }
    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }
    .hero-btn {
        width: 100%;
    }
}
.landing-container {
    padding-top: 80px;
    padding-bottom: 100px;
}
.landing-section {
    margin-bottom: 80px;
}
.landing-section.cozy {
    margin-bottom: 40px;
}
.landing-section h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
    color: #222;
    letter-spacing: -0.5px;
}
.section-subtitle {
    color: var(--gray);
    font-size: 16px;
    margin-bottom: 0;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
}
@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .landing-section h2 {
        font-size: 24px;
    }
    .section-subtitle {
        font-size: 14px;
    }
}
.section-title-group {
    display: flex;
    flex-direction: column;
}
.view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #222;
    transition: transform 0.2s ease;
}
.view-all:hover {
    transform: translateX(4px);
}
.view-all-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
    color: var(--brand);
    transition: all 0.2s ease;
}
.view-all:hover .view-all-icon {
    background: var(--brand);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.3);
}
.messages-sidebar {
    width: 350px;
    border-right: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    background: #fff;
    flex-shrink: 0;
}
.messages-sidebar-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-dark);
}
.messages-list {
    flex: 1;
    overflow-y: auto;
}
.conversation-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}
.conversation-item:hover {
    background: #f7f7f7;
}
.conversation-item.active {
    background: #f0f7f7;
    border-left: 4px solid #008489;
    padding-left: 20px;
}
.messages-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    min-width: 0;
}
.messages-chat-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}
.messages-chat-header-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}
.messages-user-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.messages-user-name {
    font-weight: 700;
    font-size: 16px;
}
.messages-user-status {
    font-size: 13px;
    color: var(--gray);
}
.messages-options-wrapper {
    position: relative;
}
.messages-options-btn {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--black);
}
.messages-options-btn:hover {
    background: var(--gray-bg);
}
.messages-options-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 220px;
    display: none;
    overflow: hidden;
    animation: fadeIn 0.15s ease-out;
}
.messages-options-wrapper.active .messages-options-menu {
    display: block;
}
.messages-options-menu a, .messages-options-menu button {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--black);
    text-decoration: none;
    transition: background 0.1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
}
.messages-options-menu a:hover, .messages-options-menu button:hover {
    background: var(--gray-bg);
}
.messages-options-menu .menu-divider {
    height: 1px;
    background: var(--border-dark);
    margin: 4px 0;
}
.messages-options-menu .danger-item {
    color: #dc2626;
}

.messages-context-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fdfdfd;
    border-bottom: 1px solid var(--border-dark);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    border-left: 4px solid var(--brand);
    margin: 8px 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.messages-context-card:hover {
    background: #f5f5f5;
}
.messages-context-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.messages-context-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--black);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.messages-context-price {
    font-size: 13px;
    color: var(--gray);
}

.messages-thread {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
}
.chat-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.4;
    position: relative;
    clear: both;
    transition: transform 0.2s;
}
.chat-bubble.sent {
    background: var(--brand);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.chat-bubble.received {
    background: #f1f1f1;
    color: #222;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.chat-bubble-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.chat-bubble.received .chat-bubble-time {
    justify-content: flex-start;
}

.messages-input {
    padding: 20px 24px;
    border-top: 1px solid var(--border-dark);
    background: #fff;
}
.messages-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    padding: 6px 12px;
    border-radius: 30px;
    border: 1px solid var(--border-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-sm);
}
/* Focus neutru, ca peste tot.
   Aici rămăsese culoarea de brand — acelaşi roşu cu --error. Pe un câmp de
   scris, un chenar roşu la click se citeşte ca „ai greşit ceva", nu ca
   „scrie aici". Restul formularelor au trecut demult pe gri-negru; caseta de
   chat a scăpat fiindcă îşi are stilul ei, separat. */
.messages-input-wrapper:focus-within {
    border-color: #222;
    box-shadow: 0 0 0 3px rgba(34, 34, 34, .08);
}
.messages-input-wrapper input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 10px 4px;
    font-family: var(--font);
    font-size: 15px;
    color: var(--black);
}
.messages-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    background: var(--black);
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.messages-send-btn:hover {
    background: var(--brand);
    transform: scale(1.05);
}
.messages-send-icon {
    margin-left: 2px;
    margin-top: -1px;
}

.icebreaker-chip {
    display: inline-flex;
    align-items: center;
    background: #f0f7f7;
    color: #008489;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    margin-right: 8px;
    margin-bottom: 8px;
}
.icebreaker-chip:hover {
    background: #008489;
    color: white;
}

.chat-blocked-notice {
    padding: 16px;
    background: var(--gray-bg);
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--gray);
    font-weight: 500;
}

@media (max-width: 768px) {
    .messages-page {
        position: relative;
    }
    .messages-sidebar {
        width: 100%;
        position: absolute;
        inset: 0;
        z-index: 10;
        transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    }
    .messages-sidebar.mobile-hidden {
        transform: translateX(-100%);
    }
    .messages-chat {
        position: absolute;
        inset: 0;
        z-index: 5;
    }
    .messages-back-btn {
        display: block !important;
        margin-right: 12px;
    }
}
/* -------------------------------------
 * POST LISTING PAGE
 * ------------------------------------- */
.clean-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.tag-container input:checked+.tag-pill {
    background: var(--black);
    color: white;
}
.listing-type-option input:checked+.listing-type-card {
    border-color: var(--primary-500) !important;
    background: #fffcfd;
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.2);
}
.listing-type-card {
    transition: all 0.2s ease;
}
.listing-type-card.active {
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.2);
    background: #fffcfd;
}
.tag {
    transition: all 0.2s;
    border: 1px solid var(--border-dark);
    border-radius: 40px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
}
.custom-dropdown-trigger:hover,
.custom-dropdown-trigger.active {
    border-color: var(--black) !important;
    box-shadow: 0 0 0 1px var(--black);
}
.search-overlay {
    background: white;
    border: 1px solid var(--border-light);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    display: none;
    position: absolute;
    z-index: 1000;
}
.search-overlay.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.search-option {
    padding: 12px 20px;
    cursor: pointer;
}
.search-option:hover {
    background: #f7f7f7;
}
/* -------------------------------------
 * SEARCH RESULTS PAGE MAP
 * ------------------------------------- */
.map-marker-offer {
    background: #6366F1;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    gap: 4px;
}
.map-marker-search {
    position: relative;
}
.map-marker-avatar {
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    border: 3px solid #F97066; 
    background: white; 
    overflow: hidden; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.map-marker-avatar img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}
.map-match-badge {
    position: absolute; 
    bottom: -4px; 
    right: -4px; 
    color: white; 
    font-size: 9px; 
    font-weight: 800; 
    padding: 2px 4px; 
    border-radius: 8px; 
    border: 2px solid white;
}
.leaflet-popup-content-wrapper {
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
}
.leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}
.popup-inner {
    padding: 16px;
    padding-top: 32px;
    position: relative;
}
.popup-close-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 100;
    transition: all 0.2s;
    color: var(--black);
}
.popup-close-btn:hover {
    background: var(--gray-bg);
    transform: scale(1.05);
}
.popup-heart-btn {
    position: absolute;
    right: 50px;
    top: 12px;
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 100;
    transition: all 0.2s;
    color: var(--gray-light);
}
.popup-heart-btn.active {
    color: var(--brand);
}
.popup-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popup-meta {
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 8px;
}
.popup-price-row {
    margin-bottom: 12px;
}
.popup-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--black);
}
.popup-btn:hover {
    background: var(--brand);
    color: white;
}
.map-marker-custom {
    background: none !important;
    border: none !important;
}
/* -------------------------------------
 * PROFILE COMPLETION CARD (Refined)
 * ------------------------------------- */
.profile-completion-bar {
    height: 8px;
    background: #ebebeb;
    border-radius: 8px;
    overflow: hidden;
}
.profile-completion-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.6s cubic-bezier(0.2, 0, 0, 1);
}
.profile-completion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.profile-completion-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-completion-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
}
.profile-completion-banner-title {
    font-size: 13px;
    color: #334155;
}
.profile-completion-banner-sub {
    font-size: 11px;
    color: #64748b;
}
.profile-completion-banner-btn {
    padding: 6px 14px;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.profile-completion-banner-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.profile-completion-landing {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.profile-completion-landing-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}
@media (max-width: 768px) {
    .profile-completion-landing-inner {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
}
.profile-completion-landing-info {
    flex: 2;
}
.profile-completion-landing-info h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #334155;
}
.profile-completion-landing-info p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 12px;
}
.profile-completion-missing {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.profile-completion-missing-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.profile-completion-landing-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-completion-sidebar {
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
}
.profile-completion-sidebar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}
.profile-completion-checklist {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-completion-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray);
}
/* -------------------------------------
 * PROFILE SETUP PAGE (Wizard & Steps)
 * ------------------------------------- */
.setup-header {
    text-align: center;
    margin-bottom: 32px;
}
.setup-header-icon {
    width: 60px;
    height: 60px;
    background: var(--brand);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 16px rgba(255, 56, 92, 0.2);
}
.setup-header-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}
.setup-header-subtitle {
    color: var(--gray);
    font-size: 16px;
}
.setup-step-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.setup-step-subtitle {
    color: var(--gray);
    font-size: 14px;
    margin-bottom: 32px;
}
.setup-avatar-upload {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    border: 2px dashed var(--border-dark);
    padding: 4px;
    transition: all 0.2s;
}
.setup-avatar-upload:hover {
    border-color: var(--black);
    background: var(--gray-bg);
}
.setup-avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.setup-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.setup-avatar-initial {
    font-size: 40px;
    font-weight: 700;
    color: var(--gray);
}
.setup-avatar-label {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--black);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 10px;
    white-space: nowrap;
}
.setup-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.setup-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.setup-tag-cat-label {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--gray);
}
.setup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}
.setup-actions-between {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.setup-final-divider {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-dark);
    text-align: center;
}
.setup-final-hint {
    font-size: 13px;
    color: var(--gray);
    margin-top: 16px;
}
/* -------------------------------------
 * POST LISTING ADAPTIVE
 * ------------------------------------- */
.form-hidden {
    display: none !important;
}
.listing-type-card-inner {
    padding: 24px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}
.listing-type-card-inner:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.listing-type-card-inner.active {
    border-color: var(--black);
    border-width: 2px;
    background: #f8fafc;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.listing-type-card-icon {
    font-size: 28px;
    margin-bottom: var(--sp-2);
}
.listing-type-card-title {
    font-weight: 700;
    font-size: var(--text-base);
}
.listing-type-card-subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}
.pill-input {
    border-radius: 40px;
    padding: 14px 24px;
    border: 1px solid var(--border-dark);
}
.photo-upload-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.photo-upload-card-inner {
    aspect-ratio: 1;
    border: 2px dashed #DDD;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color 0.2s;
}
.photo-upload-card-inner:hover {
    border-color: var(--black);
}
.photo-preview-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #EEE;
}
.photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}
.custom-dropdown-trigger-v2 {
    border-radius: 40px;
    padding: 14px 24px;
    border: 1px solid var(--border-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    font-weight: 500;
}
.custom-dropdown-overlay-v2 {
    display: none;
    width: 100%;
    top: calc(100% + 4px);
    left: 0;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid var(--border-dark);
    max-height: 240px;
    overflow-y: auto;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s var(--ease);
}
.custom-dropdown-overlay-v2.active {
    display: block !important;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}
.custom-dropdown-item-v2 {
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: var(--black);
}
.custom-dropdown-item-v2:hover {
    background: #F8F8F8;
}
.custom-dropdown-trigger-v2.active {
    border-color: var(--black);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
/* -------------------------------------
 * UTILITIES
 * ------------------------------------- */
.text-center {
    text-align: center;
}
.mt-4 {
    margin-top: 1rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.d-grid {
    display: grid;
}
.gap-4 {
    gap: 1rem;
}
.w-full {
    width: 100%;
}
.profile-completion-landing-bar-wrap {
    width: 220px;
    flex-shrink: 0;
    text-align: center;
}
.profile-completion-percent {
    font-size: 13px;
    font-weight: 600;
    color: #78350F;
    margin-top: 8px;
    margin-bottom: 12px;
}
.profile-completion-cta {
    width: 100%;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
}
.profile-completion-sidebar {
    background: #f7f7f7;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}
.profile-completion-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.profile-completion-sidebar-label {
    font-size: 14px;
    font-weight: 600;
}
.profile-completion-sidebar-percent {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand);
}
.profile-completion-checklist {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
}
.profile-completion-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #717171;
    padding: 6px 0;
    border-bottom: 1px solid #ebebeb;
}
.profile-completion-checklist-item:last-child {
    border-bottom: none;
}
.profile-completion-sidebar-btn {
    width: 100%;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
}
@media (max-width: 768px) {
    .profile-completion-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .profile-completion-landing-inner {
        flex-direction: column;
        gap: 20px;
    }
    .profile-completion-landing-bar-wrap {
        width: 100%;
    }
}
/* -------------------------------------
 * PROFILE PAGE
 * ------------------------------------- */
.profile-container {
    max-width: 1032px;
    margin-top: 40px;
    padding-bottom: 80px;
}
.profile-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 80px;
}
.profile-sidebar-card {
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    text-align: center;
    background: white;
}
.profile-avatar-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 24px;
}
.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.profile-verified-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #008489;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}
.profile-name {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}
.profile-age {
    font-size: 18px;
    color: var(--gray);
    margin-bottom: 8px;
}
.profile-occupation {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 24px;
}
.profile-match-badge {
    background: #f7f7f7;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.profile-match-label {
    font-size: 14px;
    font-weight: 600;
}
.profile-match-score {
    color: #008489;
    font-weight: 700;
    font-size: 20px;
}
.profile-sidebar-divider {
    border-top: 1px solid var(--border-light);
    margin-top: 32px;
    padding-top: 24px;
    text-align: left;
}
.profile-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.profile-trust-item:last-child {
    margin-bottom: 0;
}
.profile-trust-label {
    font-size: 14px;
    font-weight: 600;
}
.profile-section {
    margin-bottom: 24px;
}
.profile-section-bordered {
    border-top: 1px solid var(--border-light);
    padding-top: 24px;
}
.profile-section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
.profile-bio-text {
    font-size: 16px;
    line-height: 1.6;
    color: #484848;
}
.profile-tags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.profile-tag-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: #484848;
}
.profile-search-card {
    background: var(--gray-bg, #f7f7f7);
    padding: 24px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.profile-search-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 4px;
}
.profile-search-value {
    font-size: 18px;
    font-weight: 700;
}
.profile-search-value-sm {
    font-size: 16px;
    font-weight: 600;
}
.profile-search-span2 {
    grid-column: span 2;
}
.profile-ideal-card {
    font-size: 16px;
    line-height: 1.6;
    color: #484848;
    background: #fff8f6;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #ffe8e2;
}
.profile-ideal-gender {
    margin-bottom: 12px;
}
.profile-ideal-expectations {
    font-style: italic;
}
.profile-reviews-empty {
    color: var(--gray);
    font-style: italic;
}
@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .profile-tags-grid,
    .profile-search-card {
        grid-template-columns: 1fr;
    }
    .profile-search-span2 {
        grid-column: span 1;
    }
}
/* Profile Q&A — amenity-style rows */
.profile-qa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}
.profile-qa-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.profile-qa-item:hover {
    background: none;
}
.profile-qa-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #717171;
}
.profile-qa-content {
    flex: 1;
    min-width: 0;
}
.profile-qa-question {
    font-size: 11px;
    font-weight: 600;
    color: #717171;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 1px;
}
.profile-qa-answer {
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.4;
}
.profile-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.profile-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.profile-detail-row:last-child {
    border-bottom: none;
}
.profile-detail-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #717171;
}
.profile-detail-label {
    font-size: 14px;
    font-weight: 500;
    color: #717171;
    min-width: 100px;
}
.profile-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
}
@media (max-width: 768px) {
    .profile-qa-grid {
        grid-template-columns: 1fr;
    }
}
/* -------------------------------------
 * PROFILE SETUP PAGE
 * ------------------------------------- */
.setup-header {
    text-align: center;
    margin-bottom: 40px;
}
.setup-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FF385C, #E31C5F);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.setup-header-title {
    font-size: 26px;
    margin-bottom: 4px;
}
.setup-header-subtitle {
    color: var(--gray);
    font-size: 14px;
}
.setup-step-title {
    font-size: 18px;
    margin-bottom: 8px;
}
.setup-step-subtitle {
    color: var(--gray);
    font-size: 14px;
    margin-bottom: 24px;
}
.setup-avatar-upload {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border: 2px dashed var(--border);
    border-radius: 16px;
    cursor: pointer;
    width: 200px;
}
.setup-avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #F7F7F7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: var(--shadow-md);
}
.setup-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.setup-avatar-initial {
    color: #B0B0B0;
    font-size: 32px;
    font-weight: 700;
}
.setup-avatar-label {
    font-size: 12px;
    font-weight: 600;
}
.setup-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.setup-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.setup-occ-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.setup-tag-cat-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray);
    margin-bottom: 8px;
}
.setup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
}
.setup-actions-between {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
}
.setup-final-divider {
    border-top: 1px solid var(--border-light);
    margin-top: 40px;
    padding-top: 24px;
}
.setup-final-hint {
    text-align: center;
    color: var(--gray);
    font-size: 12px;
    margin-top: 16px;
    margin-top: 16px;
}
/* -------------------------------------
 * ADAPTIVE LISTING FORM
 * ------------------------------------- */
.listing-form-section[data-show-for] {
    transition: opacity 0.3s ease, max-height 0.4s ease;
}
.listing-form-section.form-hidden {
    opacity: 0;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    overflow: hidden;
}
/* -------------------------------------
 * AVATAR EDIT OVERLAY - FIXED
 * ------------------------------------- */
.profile-avatar-wrapper.is-own {
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 50%;
}
.avatar-edit-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 10 !important;
    pointer-events: none !important;
}
.profile-avatar-wrapper.is-own:hover .avatar-edit-overlay {
    opacity: 1 !important;
}
.avatar-edit-icon {
    margin-bottom: 4px;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-edit-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: center;
}
.spinner-avatar {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-avatar 0.8s linear infinite;
    margin-bottom: 8px;
}
@keyframes spin-avatar {
    to { transform: rotate(360deg); }
}
/* -------------------------------------
 * PROFILE SEARCH STATUS (Dot Toggle)
 * ------------------------------------- */
.profile-status-section {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: -16px; 
    margin-bottom: 12px;
    position: relative;
    z-index: 20;
}
.status-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.status-badge-pill.off {
    background: #f3f4f6;
    color: #4b5563;
}
.status-badge-pill.on {
    background: #ff385c;
    color: white;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-badge-pill.off .status-dot {
    background: #4B5563; 
}
.status-badge-pill.on .status-dot {
    background: #10B981; 
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
    animation: dotPulse 1.5s infinite;
}
@keyframes dotPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}
.status-badge-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.status-badge-pill.readonly {
    cursor: default !important;
    pointer-events: none !important;
    user-select: none;
}
.status-badge-pill.readonly:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
/* -------------------------------------
 * LISTING DETAIL PAGE (Responsive)
 * ------------------------------------- */
.detail-container {
    max-width: 1128px;
    margin: 0 auto;
    padding: 24px var(--sp-4) 80px;
}
.detail-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
}
.detail-header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #222222;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 24px;
}
.detail-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.detail-gallery-v2 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 8px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 48px;
}
.gallery-main {
    grid-row: 1 / span 2;
    grid-column: 1;
}
.detail-gallery-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.2s;
}
.detail-gallery-v2 img:hover {
    opacity: 0.9;
}
.detail-layout {
    display: flex;
    gap: 80px;
}
.detail-main-content {
    flex: 2;
}
.detail-sidebar {
    flex: 1;
    position: relative;
}
.detail-sidebar-card {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    padding: 24px;
    border: 1px solid #dddddd;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    background: white;
}
.amenities-grid-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .detail-layout {
        flex-direction: column;
        gap: 40px;
    }
    .detail-sidebar-card {
        position: static;
        margin-top: 0;
    }
}
@media (max-width: 768px) {
    .detail-header h1 {
        font-size: 24px;
    }
    .detail-gallery-v2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 250px 150px;
        margin-bottom: 24px;
    }
    .gallery-main {
        grid-row: 1;
        grid-column: 1 / span 2;
    }
    .detail-gallery-v2 div:nth-child(n+4) {
        display: none;
    }
    .detail-header-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .detail-gallery-v2 {
        grid-template-columns: 1fr;
        grid-template-rows: 300px;
        border-radius: 0;
        margin-left: calc(-1 * var(--sp-4));
        margin-right: calc(-1 * var(--sp-4));
    }
    .detail-gallery-v2 div:nth-child(n+2) {
        display: none;
    }
    .amenities-grid-detail {
        grid-template-columns: 1fr;
    }
    .mobile-reserve-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        border-top: 1px solid #ddd;
        padding: 12px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
}
@media (min-width: 481px) {
    .mobile-reserve-bar {
        display: none !important;
    }
}
/* -------------------------------------
 * MODAL SYSTEM (Unified Design)
 * ------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(8px);
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
}
.modal-content {
    background: white;
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    padding: 32px;
    position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    animation: modalSlideUp 0.3s cubic-bezier(0.2, 0, 0, 1);
    max-height: 90vh;
    overflow-y: auto;
}
@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f7f7f7;
    border: none;
    cursor: pointer;
    color: #222;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    z-index: 10;
}
.modal-close:hover {
    background: #ebebeb;
    transform: scale(1.1);
}
.modal-header {
    margin-bottom: 24px;
    display: block !important;
    border: none !important;
}
.modal-title {
    font-size: 24px;
    font-weight: 800;
    color: #222;
    line-height: 1.2;
    display: block !important;
    margin-bottom: 12px;
}
.modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    border: none !important;
}
/* Blocked indicator in sidebar */
.messages-blocked-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ff385c;
    background: #fff1f1;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
/* Chat Thread & Bubbles */
.messages-chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.chat-error-msg {
    background: #fff1f1;
    color: #ff385c;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin: 8px 0;
    text-align: center;
    border: 1px solid #ffe8e2;
}
#chat-messages-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
}
.chat-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.5;
    font-size: 15px;
    position: relative;
    word-wrap: break-word;
}
.chat-bubble.sent {
    align-self: flex-end;
    background: var(--brand);
    color: white;
    border-bottom-right-radius: 4px;
}
.chat-bubble.received {
    align-self: flex-start;
    background: #f1f1f1;
    color: #222;
    border-bottom-left-radius: 4px;
}
.chat-bubble p { margin: 0; }
.chat-bubble-time {
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.chat-bubble.received .chat-bubble-time {
    justify-content: flex-start;
}
.read-receipt { font-size: 12px; font-weight: bold; }
.read-receipt.read { color: #fff; }

/* Messaging List Context Line */
.messages-item-listing-context {
    font-size: 13px;
    color: var(--brand);
    font-weight: 700;
    margin: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Report Modal Specifics */
.report-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.report-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.report-option-label:hover {
    background: #f9f9f9;
    border-color: #222;
}
.report-option-label input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #222;
}

.messages-chat-footer {
    padding: 16px 24px;
    background: white;
    border-top: 1px solid #f0f0f0;
}

.messages-icebreaker-wrapper {
    margin-bottom: 12px;
}

.icebreaker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.icebreaker-icon {
    font-size: 16px;
}

.icebreaker-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #717171;
    letter-spacing: 0.5px;
}

.messages-icebreaker-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.icebreaker-chip {
    padding: 8px 16px;
    background: #008489;
    border: none;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.icebreaker-chip:hover {
    background: #006a6f;
}

@media (max-width: 768px) {
    .messages-main {
        height: calc(100dvh - var(--header-height, 80px));
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .messages-chat-area {
        height: 0;
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        padding: 16px;
    }
    .messages-chat-footer {
        z-index: 10;
        padding-bottom: env(safe-area-inset-bottom, 16px);
        background: white;
        flex-shrink: 0;
    }
}

.messages-blocked-notice {
    background: #fff1f1;
    color: #ff385c;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #ffecec;
}

/* Fixed Options Menu Alignment */
.messages-options-wrapper { position: relative; }
.messages-options-menu {
    position: absolute;
    top: 100%; right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    width: 200px;
    display: none;
    flex-direction: column;
    padding: 8px;
    z-index: 1000;
    margin-top: 8px;
}
.messages-options-menu.active { display: flex; }
.messages-options-menu button, 
.messages-options-menu .danger-item {
    border: none; background: none;
    padding: 10px 16px; text-align: left;
    font-size: 14px; border-radius: 8px;
    cursor: pointer; width: 100%;
    transition: background 0.2s;
}
.messages-options-menu button:hover { background: #f5f5f5; }
.messages-options-menu .danger-item { color: #ff385c; }
.messages-options-menu .danger-item:hover { background: #fff1f1; }
.menu-divider { height: 1px; background: #eee; margin: 4px 0; }
/* Empty - unified above */
/* -------------------------------------
 * SETTINGS PAGE
 * ------------------------------------- */
.settings-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
}
.settings-header {
    margin-bottom: 32px;
    font-weight: 800;
    font-size: 32px;
}
.settings-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #ebebeb;
}
.settings-group {
    margin-bottom: 24px;
}
.settings-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.settings-input {
    width: 100%;
    padding: 14px 24px;
    border: 1px solid var(--border-dark);
    border-radius: 40px;
    font-size: 16px;
    outline: none;
    transition: all 0.2s;
}
.settings-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.15);
}
.settings-divider {
    border-top: 1px solid #ebebeb;
    margin: 32px 0;
}
.settings-section-title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
}
.settings-section-subtitle {
    font-size: 14px;
    color: #717171;
    margin-bottom: 24px;
}
.settings-back-link {
    color: #717171;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.settings-tab {
    display: block;
    padding: 12px 24px;
    color: var(--gray);
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.settings-tab.active {
    color: var(--text-dark);
    font-weight: 600;
    border-left-color: var(--brand);
    background: #f8f9fa;
}
.settings-tab[href="#pericol"].active {
    border-left-color: #DC3545;
    color: #DC3545;
}
@media (max-width: 768px) {
    .settings-layout {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .settings-sidebar {
        width: 100% !important;
    }
    .settings-sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 16px !important;
    }
    .settings-tab {
        border-left: none !important;
        border-bottom: 3px solid transparent;
        flex: 1;
        text-align: center;
        padding: 12px 8px !important;
    }
    .settings-tab.active {
        border-left: none !important;
        border-bottom-color: var(--brand);
    }
    .settings-tab[href="#pericol"].active {
        border-bottom-color: #DC3545;
    }
}
/* Visually Hidden Utility */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.setup-tags-container {
    position: relative;
    z-index: 2;
}

/* ─── Pagini legale (confidențialitate, termeni, cookie) ──────────────── */
.legal-doc {
    max-width: 780px;
    margin: 0 auto;
    background: var(--white, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius-xl, 16px);
    padding: 40px 44px 48px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-primary, #222);
}
.legal-back {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-secondary, #717171);
    text-decoration: none;
}
.legal-back:hover { color: var(--brand, #FF385C); }

.legal-doc h1 { margin: 0 0 6px; }
.legal-meta {
    margin: 0 0 28px;
    font-size: 13px;
    color: var(--text-muted, #b0b0b0);
}
.legal-doc h2 {
    margin: 38px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--divider, #ebebeb);
    font-size: 20px;
    line-height: 1.3;
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; }
.legal-doc h3 { margin: 24px 0 8px; font-size: 16px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--brand, #FF385C); }
.legal-doc code {
    background: var(--gray-bg, #f7f7f7);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* Rezumatul de sus */
.legal-toc {
    background: var(--gray-bg, #f7f7f7);
    border-left: 3px solid var(--brand, #FF385C);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    padding: 16px 20px;
    margin: 0 0 32px;
    font-size: 14.5px;
}

/* Avertisment (ce e public, fraude) */
.legal-warn {
    background: #FFF8E1;
    border-left: 3px solid #E07912;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    padding: 14px 18px;
    margin: 0 0 16px;
}

/* Notă pentru operator — de completat */
.legal-note {
    background: #FDEDED;
    border: 1px dashed #C13515;
    border-radius: var(--radius-md, 8px);
    padding: 14px 18px;
    margin: 0 0 16px;
    font-size: 14px;
    color: #7a2410;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14px;
}
.legal-table th,
.legal-table td {
    border: 1px solid var(--divider, #ebebeb);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.legal-table th {
    background: var(--gray-bg, #f7f7f7);
    font-weight: 700;
}
.legal-public  { color: #8a4b00; font-weight: 600; }
.legal-private { color: #00660b; font-weight: 600; }

.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--divider, #ebebeb);
    font-size: 14px;
}

@media (max-width: 768px) {
    .legal-doc { padding: 24px 20px 32px; border-radius: var(--radius-lg, 12px); font-size: 14.5px; }
    .legal-doc h2 { font-size: 18px; margin-top: 30px; }
    /* Tabelele legale se derulează în loc să spargă pagina */
    .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
    .legal-table td, .legal-table th { white-space: normal; min-width: 130px; }
}

/* ─── Dropdown de monedă: 240px era mult pentru „€ EUR" ─────────────── */
#currency-dropdown.dropdown-util { width: 132px; }
@media (max-width: 768px) {
    #currency-dropdown.floating-dropdown { width: 148px !important; }
}

/* ─── Toast-uri: mesaje pe mai multe rânduri ────────────────────────── */
.flash-toast-msg { white-space: pre-line; }

/* ─── Formular anunț: câmpuri lipsă + locație blocată ───────────────── */
/* Clasa reală din markup e `.custom-dropdown-trigger-v2`; fără `-v2` regula nu
   se aplica deloc, deci un dropdown necompletat nu se marca roşu. Acum că toate
   câmpurile sunt obligatorii, conta. */
.form-group.field-missing .form-input,
.form-group.field-missing .form-select,
.form-group.field-missing .form-textarea,
.form-group.field-missing .custom-dropdown-trigger,
.form-group.field-missing .custom-dropdown-trigger-v2 {
    border-color: var(--error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent);
}
.form-group.field-missing .form-label { color: var(--error); }

.listing-form-section.location-locked #address-input,
.listing-form-section.location-locked .post-listing-map-btn {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-subtle, #f7f7f7);
}
.listing-form-section.location-locked .post-listing-map-container {
    position: relative;
    filter: grayscale(1);
    opacity: .5;
}
.listing-form-section.location-locked .post-listing-map-container::after {
    content: "Alege orașul";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    background: rgba(255,255,255,.35);
    z-index: 500;
    cursor: not-allowed;
}

/* ─── Badge-uri de încredere, imediat sub poza de profil ─────────────
   Înainte stăteau într-un bloc separat la baza cardului din stânga, sub
   toate detaliile, unde practic nu le vedea nimeni. Acum sunt pastile
   compacte lipite de poză, unde contează. */
.profile-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 4px;
}
.profile-trust-row .profile-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gray-bg, #f7f7f7);
    border: 1px solid var(--border-light, #ebebeb);
    color: var(--gray, #717171);
    line-height: 1;
}
.profile-trust-row .profile-trust-item.is-email {
    background: #e6f4f3;
    border-color: #c7e6e4;
    color: #00706c;
}
.profile-trust-row .profile-trust-item svg { flex: 0 0 auto; }
.profile-trust-row .profile-trust-label {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* ─── Profilul de căutare în „Anunțurile mele" ───────────────────────
   Nu e un anunț din baza de date, ci profilul tău afişat în căutări.
   Îl marcăm vizual ca să nu mai pară un anunţ obişnuit cu butoane rupte. */
.my-listing-card.is-search-profile {
    border: 1px solid var(--brand, #FF385C);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, .08);
}
.my-listing-card.is-search-profile .my-listing-img-wrapper { background: var(--gray-bg, #f7f7f7); }
.my-listing-card.is-search-profile .my-listing-img { object-fit: cover; }
.my-listing-kind-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--brand, #FF385C);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
}
.my-listing-card-note {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--gray, #717171);
}

/* ═══════════════════════════════════════════════════════════════════
   LĂȚIMI UNIFORME PENTRU PAGINILE DIN MENIUL DE UTILIZATOR

   Înainte fiecare pagină avea lăţimea ei — 1280px la favorite şi
   anunţurile mele, 1032px la profil, 800px la /help, 600px la setări.
   Trecând dintr-una în alta, tot cadrul sărea, iar asta obosea.

   Acum sunt două nivele, alese după conţinut:

     • larg   (--page-wide)   — pagini cu grile de carduri şi mesajele,
                                unde spaţiul orizontal se foloseşte;
     • îngust (--page-narrow) — formulare şi text de citit, unde un rând
                                de 1200px ar fi nefolosibil.

   Profilul intră la „larg" fiindcă are coloană laterală de 350px; la
   1280px zona de conţinut rămâne pe aceeaşi lăţime ca grilele, deci
   navigarea între ele nu mai mişcă nimic pe ecran.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --page-wide: var(--container-max);
    --page-narrow: 760px;
    --page-pad-y: var(--sp-12);
}

/* Larg */
.page-container,
.profile-container,
.messages-page {
    max-width: var(--page-wide);
    margin-left: auto;
    margin-right: auto;
}

.profile-container {
    /* avea doar margin-top: 40px, deci nu era nici centrat */
    margin-top: var(--page-pad-y);
}

/* Îngust */
.settings-container {
    max-width: var(--page-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
/* Paginile legale sunt deja la 780px prin `.legal-doc`; le aliniem la aceeaşi
   valoare, ca să nu existe două „îngust" apropiate dar diferite. */
.legal-doc { max-width: var(--page-narrow); }
.settings-container {
    /* era max-width:600px + padding:20px, singura pagină cu ritm propriu */
    margin-top: var(--page-pad-y);
    margin-bottom: var(--sp-16);
    padding-top: 0;
    padding-bottom: 0;
}

/* Pe /help clasa utilitară `max-w-lg` (800px) fixa lăţimea local. */
.help-page.max-w-lg { max-width: var(--page-narrow); }

/* ─── Bandă „anunț dezactivat" pe pagina de anunț ────────────────────
   Vizibilă doar proprietarului și adminului; pentru restul ruta dă 404. */
.detail-inactive-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 13px 16px;
    border-radius: 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #78350f;
    font-size: 14px;
    line-height: 1.45;
}
.detail-inactive-banner svg { flex: 0 0 auto; margin-top: 1px; }
.detail-inactive-banner a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ─── Profil: toggle-ul „Gata de mutare" vs badge-urile de încredere ──
   `.profile-status-section` are `margin-top: -16px`, pus intenționat ca să urce
   peste marginea de jos a pozei — pe atunci venea imediat după ea. Mutând
   badge-urile de încredere sub poză, între cele două, marginea negativă a
   început să tragă comutatorul peste „E-mail verificat".

   Anulăm marginea negativă doar când badge-urile îl precedă efectiv; unde nu
   există (utilizator neverificat, profil străin) rândul rămâne lipit de poză
   exact ca înainte. */
.profile-trust-row + .profile-status-section {
    margin-top: 6px;
}
/* Poza avea 24px sub ea, calculați pentru comutator. Cu badge-urile la mijloc,
   distanța se dublează vizual, așa că o strângem. */
.profile-avatar-wrapper:has(+ .profile-trust-row) {
    margin-bottom: 6px;
}

/* „Fără garanție" e o informație bună, nu o valoare lipsă — o scoatem în evidență. */
.sidebar-amount-free {
    font-weight: 700;
    color: var(--success, #008489);
}

/* ─── „Verifică inbox-ul": ce poți face între timp ────────────────────
   Pagina era un capăt de drum. Dacă emailul nu ajungea, utilizatorul rămânea
   blocat aici — ceea ce s-a întâmplat pentru 96 din 137 de conturi. */
.check-email-meanwhile {
    margin: 4px 0 24px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--gray-bg, #f7f7f7);
    border: 1px solid var(--border-light, #ebebeb);
    text-align: left;
}
.check-email-meanwhile-title {
    margin: 0 0 6px;
    font-weight: 800;
    font-size: 15px;
}
.check-email-meanwhile-text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gray, #717171);
}
.check-email-meanwhile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.check-email-meanwhile-actions .btn { flex: 1 1 auto; text-align: center; }

/* ─── Anunțuri care așteaptă confirmarea emailului ────────────────────
   Nu sunt „dezactivate" — autorul nu le-a oprit, doar n-a apăsat încă link-ul.
   Distincția contează: altfel caută un buton de activare care nu există. */
.my-listings-pending-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 22px;
    padding: 15px 18px;
    border-radius: 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #78350f;
    font-size: 14px;
    line-height: 1.5;
}
.my-listings-pending-banner svg { flex: 0 0 auto; margin-top: 2px; }
.my-listings-pending-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
.my-listing-overlay.is-pending { background: rgba(120, 53, 15, .45); }
.my-listing-overlay.is-pending .my-listing-overlay-badge { background: #b45309; color: #fff; }

.post-listing-pending-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 13px 16px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a5f;
    font-size: 13.5px;
    line-height: 1.5;
}
.post-listing-pending-note svg { flex: 0 0 auto; margin-top: 1px; }
.post-listing-pending-note a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ─── Hero: a treia cale, pentru cine are o cameră ────────────────────
   Ambele butoane mari duc la răsfoire. Cu 4 anunțuri la 137 de conturi,
   partea de ofertă are nevoie de un drum propriu, vizibil. */
.hero-owner-line {
    margin: 20px 0 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.hero-owner-line a {
    color: #fff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Link secundar în cardul de completare profil. */
.profile-completion-alt-link {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray, #717171);
    text-decoration: none;
}
.profile-completion-alt-link:hover { color: var(--text-primary, #222); text-decoration: underline; }

/* ─── Chestionar: punctul de salvare după partea obligatorie ──────────
   Cele 6 întrebări de care depinde potrivirea se termină cu un ecran de unde
   poți încheia. Restul rămân disponibile, dar ca alegere, nu ca obligație —
   din 41 de conturi confirmate, doar 9 terminau chestionarul de 23 de pași. */
.quiz-btn-secondary {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 12px auto 0;
    padding: 15px 24px;
    border-radius: 999px;
    border: 1.5px solid var(--border-dark, #ddd);
    background: transparent;
    color: var(--text-primary, #222);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.quiz-btn-secondary:hover {
    border-color: var(--text-primary, #222);
    background: var(--gray-bg, #f7f7f7);
}
.quiz-final-note {
    max-width: 420px;
    margin: 14px auto 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gray, #717171);
}

/* ═══════════════════════════════════════════════════════════════════
   INDICATOR DE COMPLETARE PROFIL

   Chestionarul are două etape, iar prima se încheie cu un ecran care spune
   „gata" — corect, dar de acolo nu mai exista niciun semn că se poate
   continua. Cardul ăsta arată cât e completat și ce mai lipsește.
   Se ascunde singur la 100%.
   ══════════════════════════════════════════════════════════════════ */
.profile-progress-card {
    margin: 0 0 24px;
    padding: 20px;
    border-radius: 16px;
    background: var(--white, #fff);
    border: 1px solid var(--border-light, #ebebeb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.profile-progress-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

/* Inelul de progres */
.profile-progress-ring {
    position: relative;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
}
.profile-progress-ring svg { transform: rotate(-90deg); display: block; }
.ppr-track {
    fill: none;
    stroke: var(--gray-lightest, #ebebeb);
    stroke-width: 6;
}
.ppr-value {
    fill: none;
    stroke: var(--brand, #FF385C);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1);
}
.profile-progress-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.profile-progress-title {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 800;
}
.profile-progress-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--gray, #717171);
}

/* Lista de secțiuni, cu punctajul fiecăreia */
.profile-progress-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-progress-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
/* Cercurile goale arătau ca butoane radio de bifat, deci ca ceva pe care
   trebuie să apeşi. Sunt doar indicatori de stare, aşa că cel nebifat devine o
   linie subţire, iar cel bifat rămâne cerc plin cu bifă. */
.profile-progress-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 4px;
    background: var(--gray-lightest, #ebebeb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
}
.profile-progress-item:not(.is-done) .profile-progress-check::after {
    content: "";
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--gray-light, #b0b0b0);
}
.profile-progress-item.is-done .profile-progress-check {
    background: var(--success, #008489);
    border-radius: 50%;
}
.profile-progress-item-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.profile-progress-item-text strong { font-size: 13.5px; font-weight: 700; }
.profile-progress-weight {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--gray-bg, #f7f7f7);
    color: var(--gray, #717171);
}
.profile-progress-item.is-done .profile-progress-weight {
    background: #e6f4f3;
    color: #00706c;
}
.profile-progress-detail {
    flex: 1 1 100%;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--gray, #717171);
}

.profile-progress-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
@media (max-width: 520px) {
    .profile-progress-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ─── Titluri de secțiune cu editare separată ─────────────────────────
   Poza se schimbă cu un click; „ce caut" și „stil de viață" cereau reluarea
   întregului chestionar. Acum fiecare secțiune se editează singură. */
.profile-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.profile-section-head .profile-section-title { margin-bottom: 0; }
.profile-section-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray, #717171);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 8px;
}
.profile-section-edit:hover {
    color: var(--text-primary, #222);
    background: var(--gray-bg, #f7f7f7);
}

/* ═══════════════════════════════════════════════════════════════════
   ANUNȚUL PROPRIU: chenar + ribbon + scurtătură de editare

   Înainte era doar o etichetă mică în card. Într-o grilă de rezultate îți
   găseai propriul anunț doar dacă citeai fiecare etichetă.
   ══════════════════════════════════════════════════════════════════ */
.listing-card.is-own-listing {
    position: relative;
    border: 2px solid var(--brand, #FF385C);
    box-shadow: 0 0 0 4px rgba(255, 56, 92, .10);
}

/* Ribbon în colțul din stânga sus. */
.own-ribbon {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 4;
    padding: 5px 12px 5px 10px;
    background: var(--brand, #FF385C);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    pointer-events: none;
}

/* Scurtătura de editare, jos-stânga ca să nu se bată cu inima de favorite. */
.own-edit-shortcut {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--border, #ddd);
    color: var(--text-primary, #222);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.own-edit-shortcut:hover {
    background: var(--black, #222);
    color: #fff;
    border-color: var(--black, #222);
}

/* ─── Creion pe fiecare rând din profil ───────────────────────────────
   Cineva nu mai e student, s-a angajat: până acum trebuia să reia tot
   chestionarul pentru un singur răspuns. */
.profile-detail-edit {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px;
    border-radius: 6px;
    color: var(--gray-light, #b0b0b0);
    text-decoration: none;
    vertical-align: middle;
}
.profile-detail-row:hover .profile-detail-edit { color: var(--gray, #717171); }
.profile-detail-edit:hover {
    color: var(--brand, #FF385C);
    background: var(--gray-bg, #f7f7f7);
}

/* ─── Insignă „profil completat 100%" în sidebar ──────────────────────
   Cardul de progres dispare la 100%, deci fără insigna asta utilizatorul ar
   rămâne fără nicio confirmare că a terminat. */
.profile-complete-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 4px 0 10px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #e6f4f3;
    border: 1px solid #c7e6e4;
    color: #00706c;
    font-size: 13.5px;
    font-weight: 800;
}
.profile-complete-edit {
    display: block;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray, #717171);
    text-decoration: none;
}
.profile-complete-edit:hover { color: var(--text-primary, #222); text-decoration: underline; }

/* ─── Container pentru cardul propriu ─────────────────────────────────
   Scurtătura „Editează" trebuie să stea în AFARA ancorei-card: HTML nu permite
   ancore imbricate, iar parserul o scotea din card şi o poziţiona faţă de
   <body> — adică plutea în colţul ecranului, peste conţinut.
   Containerul preia poziţionarea şi locul cardului în grilă. */
.own-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;   /* altfel titlurile lungi lăţesc coloana din grilă */
}
.own-card-wrap > .listing-card { flex: 1 1 auto; }

/* ─── Cardul propriu: ribbon deasupra, scurtătură dedesubt ────────────
   Ambele în flux normal, nu poziţionate absolut. Prima variantă le suprapunea
   peste card: ribbon-ul acoperea avatarul şi numele, iar scurtătura ieşea peste
   marginea de jos. */
.own-card-wrap > .own-ribbon {
    position: static;
    align-self: flex-start;
    margin: 0 0 -2px 0;
    padding: 5px 12px;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
}
.own-card-wrap > .own-edit-shortcut {
    position: static;
    align-self: flex-start;
    margin-top: 8px;
    box-shadow: none;
}
/* Cardul se lipeşte de bandă: colţul din stânga sus rămâne drept. */
.own-card-wrap > .listing-card.is-own-listing {
    border-top-left-radius: 0;
}

/* ─── Facilități în formularul de anunț ───────────────────────────────
   `.tags-grid` nu avea nicio regulă, deci pastilele stăteau lipite una sub
   alta, fără spațiere verticală. */
.setup-tags-container .tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.setup-tags-container .tags-grid .tag {
    margin: 0;
    line-height: 1.2;
}

/* ─── Pagina de anunț: rândul de total ────────────────────────────────
   Eticheta „Total estimativ (Chirie + Garanție)" e lungă, iar `space-between`
   pe un rând strâmt o rupea urât, cu suma căzând pe rândul următor și moneda
   separată de cifre. Eticheta primește voie să curgă pe două rânduri, iar suma
   rămâne întreagă, lipită la dreapta. */
.sidebar-amount-row,
.sidebar-total-row {
    align-items: baseline;
    gap: 12px;
}
.sidebar-amount-row > span:first-child,
.sidebar-total-row > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}
.sidebar-amount-row > span:last-child,
.sidebar-total-row > span:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}

/* ─── Poză de profil: indiciu mereu vizibil ───────────────────────────
   Overlay-ul „Schimbă poza" apare doar la hover, iar pe telefon hover-ul nu
   există — deci pe dispozitivul unde majoritatea își fac profilul nu exista
   niciun semn că poza se poate schimba. Pastila asta e mereu vizibilă și se
   retrage când preia overlay-ul. */
.avatar-edit-hint {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(34, 34, 34, .82);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .18s ease;
}
.profile-avatar-wrapper.is-own:hover .avatar-edit-hint { opacity: 0; }

/* ─── Nume și gen, editabile din profil ───────────────────────────────
   Erau doar în /setari, împreună cu emailul și parola — dar sunt informație de
   profil, nu de cont. */
.profile-name-edit {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--gray-light, #b0b0b0);
    cursor: pointer;
    vertical-align: middle;
}
.profile-name-edit:hover { color: var(--brand, #FF385C); background: var(--gray-bg, #f7f7f7); }

.profile-identity-form {
    margin: 8px 0 4px;
    padding: 14px;
    border-radius: 12px;
    background: var(--gray-bg, #f7f7f7);
    border: 1px solid var(--border-light, #ebebeb);
    text-align: left;
}
.profile-identity-form .form-label { margin-bottom: 5px; font-size: 12.5px; }
.profile-identity-form .form-input,
.profile-identity-form .form-select { margin-bottom: 12px; }
.profile-identity-actions { display: flex; gap: 8px; }
.profile-identity-actions .btn { flex: 1 1 auto; }

/* ─── Galeria de poze a anunţului ─────────────────────────────────────
   Pozele deja salvate apar aici la editare, alături de cele nou alese, şi se
   pot scoate sau rearanja. Butoanele stau pe poză, nu sub ea: la patru pe rând
   nu e loc pentru o bară separată. */
.photo-order-hint { margin: -2px 0 12px; }

.photo-preview-item { cursor: grab; touch-action: manipulation; }
.photo-preview-item.is-main { border: 2px solid var(--black, #222); }
.photo-preview-item.is-dragging { opacity: .45; }
.photo-preview-item.is-drop-target { outline: 2px solid var(--black, #222); outline-offset: 2px; }

.photo-main-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--black, #222);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Butonul de scoatere era un <div> de 20px, sub minimul atingibil pe telefon.
   Acum e buton adevărat şi are 28px. */
.photo-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    font-size: 17px;
    line-height: 1;
    padding: 0;
    background: rgba(0, 0, 0, .62);
}
.photo-remove-btn:hover { background: var(--error, #C13515); }

.photo-move-row {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.photo-move {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.photo-move:hover:not(:disabled) { background: var(--black, #222); }
.photo-move:disabled { opacity: .28; cursor: default; }

.photo-count-line {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--gray, #717171);
}

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

/* Detalierea totalului stă pe rândul ei, ca eticheta să nu se mai rupă între
   „chirie +" şi „garanție" cu suma nimerită la mijloc. */
.sidebar-total-label { display: block; }
.sidebar-total-note {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--gray, #717171);
    text-transform: lowercase;
}

/* ─── Secţiuni de profil editabile pe loc ─────────────────────────────
   Acelaşi tipar ca blocul de nume/gen: vezi răspunsurile, apeşi „Editează",
   secţiunea devine formular. Fără drum prin chestionar. */
.profile-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.profile-section-head .profile-section-title { margin: 0; }

.profile-section-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--border-light, #ebebeb);
    border-radius: 999px;
    background: #fff;
    color: var(--text-primary, #222);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.profile-section-edit-btn:hover { border-color: var(--black, #222); background: var(--gray-bg, #f7f7f7); }

/* Răspunsurile stau în două coloane, cu eticheta peste valoare.
   Un rând per răspuns, pe toată lăţimea, cu eticheta la stânga şi valoarea la
   dreapta, însemna ochiul sărea peste un gol de câteva sute de pixeli la fiecare
   linie — treabă obositoare pentru zece răspunsuri. Aşa perechea întrebare/
   răspuns se citeşte ca un bloc, iar lista ocupă jumătate din înălţime. */
.profile-answers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 4px 24px;
}
.profile-answer-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: none;
}
.profile-answer-icon {
    flex: 0 0 auto;
    display: flex;
    margin-top: 1px;
    color: var(--gray-light, #b0b0b0);
}
.profile-answer-icon svg { width: 18px; height: 18px; }
.profile-answer-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gray, #717171);
}
.profile-answer-value {
    display: block;
    margin-top: 2px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, #222);
    text-align: left;
}
.profile-answers-empty { margin: 4px 0 0; font-size: 14px; color: var(--gray, #717171); }

.profile-section-form {
    padding: 16px;
    border: 1px solid var(--border-light, #ebebeb);
    border-radius: 14px;
    background: var(--gray-bg, #f7f7f7);
}
.profile-field { margin-bottom: 16px; }
.profile-field:last-of-type { margin-bottom: 20px; }
.profile-field .form-label { display: block; margin-bottom: 6px; font-size: 12.5px; }
.profile-field .form-select { width: 100%; }
.profile-field-hint { margin: 6px 0 0; font-size: 13px; color: var(--gray, #717171); }

.profile-zone-group { display: flex; flex-wrap: wrap; gap: 8px; }

.profile-section-actions { display: flex; gap: 8px; }

@media (max-width: 520px) {
    .profile-answers { grid-template-columns: 1fr; }
}

/* Atributul `hidden` trebuie să câştige.
   Regula implicită a browserului (`[hidden] { display: none }`) are
   specificitate zero, deci orice `display` pus pe o clasă o anulează. Din cauza
   asta lista de răspunsuri rămânea vizibilă sub formularul deschis, iar zonele
   tuturor oraşelor apăreau deodată. */
.profile-answers[hidden],
.profile-zone-group[hidden],
.profile-section-form[hidden],
.profile-field-hint[hidden] { display: none; }
.profile-answer-text { flex: 1 1 auto; min-width: 0; }
.profile-complete-note {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--gray, #717171);
    text-align: center;
}

/* ─── Smart Match ─────────────────────────────────────────────────────
   Regula era scrisă într-o propoziţie de un rând şi jumătate, pe care nimeni
   nu o citea. Ca insignă cu un punct care pulsează, se înţelege din privire:
   ceva e activ. Animaţia respectă `prefers-reduced-motion`. */
.smart-match-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px auto 0;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: linear-gradient(100deg, #0f766e, #0d9488 55%, #14b8a6);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 2px 10px rgba(13, 148, 136, .28);
}
.smart-match-text { white-space: nowrap; }

.smart-match-pulse {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.smart-match-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: .7;
    animation: smart-pulse 1.9s ease-out infinite;
}
@keyframes smart-pulse {
    0%   { transform: scale(.55); opacity: .75; }
    70%  { transform: scale(1.5);  opacity: 0; }
    100% { transform: scale(1.5);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .smart-match-pulse::after { animation: none; opacity: .35; }
}

.smart-match-link {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary, #222);
    text-align: center;
    text-decoration: none;
}
.smart-match-link:hover { text-decoration: underline; }

/* Comutatorul din pagina de rezultate. */
.smart-filter-row { margin: 0 0 18px; }
.smart-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--border-dark, #dddddd);
    border-radius: 999px;
    background: #fff;
    color: var(--text-primary, #222);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.smart-filter-toggle .smart-match-pulse { color: #0d9488; }
.smart-filter-toggle:hover { border-color: var(--black, #222); }
.smart-filter-toggle.is-on {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}
.smart-filter-toggle.is-on .smart-match-pulse { color: #fff; }
.smart-filter-note { margin: 8px 0 0; font-size: 13px; color: var(--gray, #717171); }

/* Indiciul din caseta de titlu, cât timp titlul nu are încă din ce să se compună. */
.post-listing-title-hint {
    margin: 0;
    font-size: 15px;
    font-style: italic;
    color: var(--gray-light, #b0b0b0);
}
.post-listing-title-display[hidden],
.post-listing-title-hint[hidden] { display: none; }

/* ═══ Formularul de anunţ în paşi ═════════════════════════════════════ */
.wizard-head { margin-bottom: 22px; }

.wizard-dots {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.wizard-dot {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding-top: 9px;
    border-top: 3px solid var(--border-light, #ebebeb);
    font-size: 12px;
    color: var(--gray-light, #b0b0b0);
    transition: border-color .2s, color .2s;
}
.wizard-dot.is-done    { border-top-color: #0d9488; color: var(--gray, #717171); }
.wizard-dot.is-current { border-top-color: var(--black, #222); color: var(--text-primary, #222); font-weight: 700; }
.wizard-dot-num {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--border-light, #ebebeb);
    color: var(--gray, #717171);
    font-size: 11px;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
}
.wizard-dot.is-current .wizard-dot-num { background: var(--black, #222); color: #fff; }
.wizard-dot.is-done .wizard-dot-num    { background: #0d9488; color: #fff; }
.wizard-dot-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wizard-step-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.wizard-step-sub   { margin: 4px 0 0; font-size: 14px; color: var(--gray, #717171); }
.wizard-step[hidden], .wizard-step-head[hidden] { display: none; }

/* Bara de acţiuni, lipită jos. */
.wizard-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 26px -24px -24px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light, #ebebeb);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
}
.wizard-bar-inner { display: flex; align-items: center; gap: 12px; }
.wizard-bar-status { flex: 1 1 auto; font-size: 13px; color: var(--gray, #717171); }
.wizard-bar [hidden] { display: none; }
.wizard-next, .wizard-submit { display: inline-flex; align-items: center; gap: 8px; }

/* Ciorna găsită la revenire. */
.draft-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    font-size: 14px;
}
.draft-banner > span { flex: 1 1 240px; }

/* Reperul de preţ şi ajutoarele de la descriere. */
.price-hint {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #0d9488;
    font-weight: 600;
}
.price-hint[hidden] { display: none; }

.desc-prompts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.desc-prompts-label { font-size: 13px; color: var(--gray, #717171); }
.desc-prompt {
    padding: 5px 12px;
    border: 1px solid var(--border-dark, #dddddd);
    border-radius: 999px;
    background: #fff;
    color: var(--text-primary, #222);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.desc-prompt:hover { border-color: var(--black, #222); background: var(--gray-bg, #f7f7f7); }
.desc-counter { margin: 8px 0 0; font-size: 12.5px; color: var(--gray, #717171); }
.desc-counter.is-short { color: #b45309; }

.address-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--gray, #717171);
}
.address-privacy-note svg { flex: 0 0 auto; margin-top: 2px; }

/* Previzualizarea cardului. */
.listing-preview-card {
    max-width: 320px;
    border: 1px solid var(--border-light, #ebebeb);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.listing-preview-photo {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-bg, #f7f7f7);
}
.listing-preview-photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-preview-photo-empty { font-size: 13px; color: var(--gray-light, #b0b0b0); }
.listing-preview-body { padding: 12px 14px 15px; }
.listing-preview-zone  { margin: 0; font-size: 12px; color: var(--gray, #717171); }
.listing-preview-title { margin: 3px 0 6px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.listing-preview-price { margin: 0; font-size: 16px; font-weight: 800; }
.listing-preview-price span { font-size: 13px; font-weight: 500; color: var(--gray, #717171); }

@media (max-width: 640px) {
    .wizard-dot-label { display: none; }
    .wizard-dot { flex: 0 0 auto; }
    .wizard-dots { gap: 10px; }
    .wizard-step-title { font-size: 20px; }
    .wizard-bar { margin: 22px -16px -16px; padding: 12px 16px; }
    .wizard-bar-status { display: none; }
    .wizard-bar-inner .btn-premium-hero { flex: 1 1 auto; justify-content: center; }
}

/* Cardul formularului de anunţ nu mai taie dropdown-urile.
   `.card` are `overflow: hidden` (util ca să taie colţurile imaginilor), dar
   overlay-urile dropdown-urilor custom sunt poziţionate absolut şi ieşeau din
   card — la „Tip imobil / Etaj / Utilităţi", aflate la baza pasului, se vedeau
   tăiate. Aceeaşi proprietate rupea şi `position: sticky` pentru bara de sus. */
.post-listing-card { overflow: visible; }

/* ─── Bara lipită sus: titlu, tipul anunţului, paşii ─────────────────── */
.wizard-head {
    position: sticky;
    top: var(--header-height, 80px);
    z-index: 30;
    margin: -24px -24px 22px;
    padding: 16px 24px 14px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-light, #ebebeb);
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    transition: padding .18s ease;
}
.wizard-head-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.wizard-page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.wizard-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gray-bg, #f7f7f7);
    color: var(--gray, #717171);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Strânsă, după ce începe derularea: altfel ar mânca jumătate de ecran. */
.wizard-head.is-stuck { padding-top: 10px; padding-bottom: 8px; }
.wizard-head.is-stuck .wizard-head-top { margin-bottom: 9px; }
.wizard-head.is-stuck .wizard-page-title { font-size: 16px; }
.wizard-head.is-stuck .wizard-dots { margin-bottom: 9px; }
.wizard-head.is-stuck .wizard-step-title { font-size: 17px; }
.wizard-head.is-stuck .wizard-step-sub { display: none; }

/* ─── Previzualizarea anunţului întreg ───────────────────────────────── */
.preview-banner {
    position: sticky;
    top: var(--header-height, 80px);
    z-index: 25;
    padding: 11px 16px;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}
.preview-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13.5px;
}
.preview-banner-tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: #b45309;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.preview-side-note {
    margin: 22px 0 0;
    padding: 13px;
    border: 1px dashed var(--border-dark, #dddddd);
    border-radius: 10px;
    font-size: 13px;
    color: var(--gray, #717171);
    text-align: center;
}

.preview-actions {
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--border-light, #ebebeb);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
}
.preview-actions-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1120px;
    margin: 0 auto;
}
.preview-actions-note { flex: 1 1 auto; font-size: 13px; color: var(--gray, #717171); }
.preview-publish-form { margin: 0; }
.preview-publish-form .btn-premium-hero { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 640px) {
    .preview-actions-note { display: none; }
    .preview-actions-inner .btn-premium-hero { flex: 1 1 auto; justify-content: center; }
    .wizard-head { margin: -16px -16px 18px; padding: 12px 16px 10px; }
}

/* Eroarea de la un câmp din înregistrare.
   Bula de sus dispare după câteva secunde; cine se întoarce la un formular
   completat rămânea fără nicio explicaţie despre ce trebuie schimbat. */
.register-field-error {
    margin: 6px 0 0;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--error, #C13515);
    font-weight: 600;
}

/* ─── Bara de sus a formularului, pe telefon ───────────────────────────
   Măsurată la 375×812: blocul avea 231px, iar cu header-ul site-ului deasupra
   primul câmp începea la 391px — adică 59% din ecran ocupat de anteturi înainte
   să poţi scrie ceva.

   Titlul şi eticheta de tip treceau pe rânduri separate (rândul lor singur avea
   90px). Le ţinem pe o linie, cu titlul trunchiat dacă e nevoie, şi renunţăm la
   subtitlul explicativ — titlul pasului spune deja unde eşti. */
@media (max-width: 640px) {
    .wizard-head { padding-top: 10px; padding-bottom: 8px; }

    .wizard-head-top {
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 10px;
    }
    .wizard-page-title {
        min-width: 0;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wizard-type-pill {
        flex: 0 0 auto;
        max-width: 55%;
        padding: 4px 9px;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wizard-dots { margin-bottom: 10px; }
    .wizard-step-title { font-size: 17px; }
    .wizard-step-sub { display: none; }

    /* Strânsă, la derulare: rămâne doar strictul necesar. */
    .wizard-head.is-stuck .wizard-head-top { display: none; }
    .wizard-head.is-stuck .wizard-step-title { font-size: 15px; }
}

/* ─── Bula proprie: roz palid, nu roşu plin ───────────────────────────
   Fundalul era chiar culoarea de brand (#FF385C). Pe ea, orice altceva trebuia
   să fie alb — deci „trimis" şi „citit" arătau identic, iar bifele albastre nu
   aveau nicio şansă să se vadă. Cu roz palid şi text închis, starea mesajului
   poate avea culoarea ei. */
.chat-bubble.sent {
    background: #FFECF0;
    color: var(--text-primary, #222);
    border: 1px solid #FFD6DE;
}

/* Rândul de stare de sub mesajul propriu. */
.chat-bubble-time.is-own {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: var(--gray, #717171);
}
.msg-state { font-size: 11px; white-space: nowrap; }
.msg-state.is-read {
    font-weight: 700;
    color: #2563eb;
}

/* Bifele: gri cât timp e doar trimis, albastre şi mai apăsate după citire —
   convenţia pe care o ştie toată lumea din alte aplicaţii de chat. */
.read-receipt { font-size: 12px; font-weight: bold; line-height: 1; }
.read-receipt.sent { color: var(--gray-light, #b0b0b0); }
.read-receipt.read { color: #2563eb; }

/* ═══ Inelul de completare a profilului, fixat stânga jos ═════════════
   Indicatorul exista doar pe pagina de profil — adică fix acolo unde ajunge
   cineva care ştie deja că are ceva de completat. */
.pn-widget {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    align-items: center;
    max-width: min(320px, calc(100vw - 36px));
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--border-light, #ebebeb);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    transition: padding .18s ease, max-width .18s ease;
}
.pn-body {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.pn-ring { position: relative; flex: 0 0 auto; width: 44px; height: 44px; }
.pn-ring svg { transform: rotate(-90deg); }
.pn-track { fill: none; stroke: #f0f0f0; stroke-width: 5; }
.pn-value {
    fill: none;
    stroke: #0d9488;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset .5s ease;
}
.pn-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-primary, #222);
}

.pn-text { display: flex; flex-direction: column; min-width: 0; }
.pn-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #222); }
.pn-sub {
    font-size: 11.5px;
    color: var(--gray, #717171);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-collapse {
    flex: 0 0 auto;
    margin-left: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-light, #b0b0b0);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.pn-collapse:hover { color: var(--text-primary, #222); background: var(--gray-bg, #f7f7f7); }

/* Strâns: rămâne doar cercul cu procentul. Nu îl ştergem, cum face bulina de
   beta — aici e chiar treaba utilizatorului, nu a noastră. */
.pn-widget.is-collapsed { padding: 6px; max-width: 56px; }
.pn-widget.is-collapsed .pn-text,
.pn-widget.is-collapsed .pn-collapse { display: none; }
.pn-widget.is-collapsed .pn-ring { cursor: pointer; }

@media (max-width: 640px) {
    .pn-widget { left: 12px; bottom: 12px; }
    .pn-sub { display: none; }
}

/* ─── Cardul de completare, când chiar contează ───────────────────────
   Arăta ca orice alt card alb de pe pagină, deşi la 0% e singurul lucru care
   contează acolo: fără chestionar nu există nici potriviri, nici apariţie în
   căutări. Acum urcă în ton pe măsură ce scade completarea. */
.profile-progress-card.is-urgent {
    border: 2px solid var(--brand, #FF385C);
    background: linear-gradient(180deg, #FFF5F7 0%, #fff 60%);
    box-shadow: 0 6px 24px rgba(255, 56, 92, .12);
}
.profile-progress-card.is-urgent .profile-progress-title { font-size: 20px; }
.profile-progress-card.is-urgent .ppr-value { stroke: var(--brand, #FF385C); }

.profile-progress-card.is-partial {
    border: 1px solid #cfe6e3;
    background: linear-gradient(180deg, #F2FAF9 0%, #fff 60%);
}

/* Butonul mare, pentru profilul gol. */
.profile-progress-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 12px;
}

/* ─── Inelul plutitor: vizibil, nu discret ────────────────────────────
   Prima variantă era o pastilă albă, discretă — adică exact ce nu trebuia:
   scopul lui e să se vadă. */
.pn-widget {
    border: none;
    background: #111827;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    padding: 9px 16px 9px 9px;
}
.pn-title { color: #fff; font-size: 13.5px; }
.pn-sub   { color: rgba(255, 255, 255, .72); }
.pn-pct   { color: #fff; font-size: 12px; }
.pn-track { stroke: rgba(255, 255, 255, .18); }
.pn-value { stroke: #34d399; }
.pn-collapse { color: rgba(255, 255, 255, .55); }
.pn-collapse:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.pn-widget.is-collapsed { background: #111827; padding: 6px; }

/* O pulsaţie scurtă la încărcare, o singură dată: atrage privirea fără să se
   agite permanent în colţul ecranului. */
@keyframes pn-attention {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
.pn-widget { animation: pn-attention 1.1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
    .pn-widget { animation: none; }
}

/* ─── Inelul plutitor, în culoarea site-ului ──────────────────────────
   Varianta închisă la culoare se pierdea pe fundal — arăta ca o bară de unelte,
   nu ca un îndemn. Roşul de brand e culoarea cu care e obişnuit ochiul aici. */
.pn-widget {
    background: linear-gradient(135deg, #FF385C 0%, #E31C5F 100%);
    box-shadow: 0 8px 26px rgba(227, 28, 95, .34);
    padding: 9px 10px 9px 9px;
}
.pn-widget.is-collapsed {
    background: linear-gradient(135deg, #FF385C 0%, #E31C5F 100%);
    padding: 6px;
}
.pn-title { color: #fff; }
.pn-sub   { color: rgba(255, 255, 255, .8); }
.pn-pct   { color: #fff; }
.pn-track { stroke: rgba(255, 255, 255, .28); }
.pn-value { stroke: #fff; }

/* Butonul: alb pe roşu, ca să se vadă că e o acţiune, nu doar o etichetă. */
.pn-cta {
    flex: 0 0 auto;
    margin-left: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: #E31C5F;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}
.pn-body:hover .pn-cta { background: #fff5f7; }
.pn-widget.is-collapsed .pn-cta { display: none; }

.pn-collapse { color: rgba(255, 255, 255, .7); }
.pn-collapse:hover { color: #fff; background: rgba(255, 255, 255, .18); }

.pn-widget { max-width: min(360px, calc(100vw - 36px)); }

@media (max-width: 640px) {
    .pn-sub { display: none; }
    .pn-cta { margin-left: 8px; padding: 6px 11px; }
}

/* Starea poziţiei de sub câmpul de adresă.
   Fără ea, singurul mod de a afla că pinul e greşit era să publici anunţul şi
   să te uiţi pe hartă. */
.address-state {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}
.address-state::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.address-state.is-pending { color: #b45309; }
.address-state.is-loading { color: var(--gray, #717171); }
.address-state.is-ok      { color: #0d9488; }
.address-state.is-error   { color: var(--error, #C13515); }
.address-state:empty      { display: none; }

/* ─── Vizualizatorul de poze ──────────────────────────────────────────
   Galeria arăta ca o galerie, dar la click nu se întâmpla nimic: erau imagini
   statice. */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
    padding: 40px 16px;
}
.lb-overlay.is-open { display: flex; }

.lb-img {
    max-width: min(1200px, 100%);
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.lb-close, .lb-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .26); }

.lb-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.lb-nav   { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; line-height: 1; }
.lb-prev  { left: 16px; }
.lb-next  { right: 16px; }

.lb-counter {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .85);
    font-size: 13.5px;
    font-weight: 700;
}

/* Poza deschisă e o acţiune, deci arată ca una. */
.gallery-main, .gallery-item-small, .detail-gallery-single { cursor: zoom-in; position: relative; }
.gallery-main:focus-visible,
.gallery-item-small:focus-visible,
.detail-gallery-single:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* „+3" pe ultima miniatură: un anunţ cu zece poze arăta la fel cu unul cu cinci. */
.gallery-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

@media (max-width: 640px) {
    .lb-overlay { padding: 56px 8px; }
    .lb-nav { width: 40px; height: 40px; font-size: 24px; }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
}

/* ─── Activ acum ──────────────────────────────────────────────────────
   Punctul verde pe avatar, în carduri, pe anunţ şi în mesaje. „Activ acum" e
   informaţia care decide dacă merită să scrii şi să aştepţi răspuns, sau dacă
   omul n-a mai intrat de trei săptămâni. */
.roommate-avatar.is-online,
.detail-author-avatar.is-online { position: relative; }
.roommate-avatar.is-online::after,
.detail-author-avatar.is-online::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}
.messages-avatar-box.is-online::after { right: 4px; bottom: 4px; width: 13px; height: 13px; }
.messages-user-avatar.is-online::after { width: 11px; height: 11px; right: 0; bottom: 0; }

.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: #16a34a;
}
.online-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
}
.online-pill.is-small { font-size: 11.5px; }

/* Contorul de afişări, doar pentru autor. */
.listing-views {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--gray-bg, #f7f7f7);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #222);
}
.listing-views svg { flex: 0 0 auto; color: var(--gray, #717171); }
.listing-views-hint { font-weight: 400; color: var(--gray, #717171); }
.my-listing-views {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--gray, #717171);
}
.my-listing-views svg { flex: 0 0 auto; }

/* Punctul de pe avatar ieşea tăiat: `.roommate-avatar` are `overflow: hidden`,
   ca să decupeze poza rotundă, iar el cădea exact pe margine. În carduri l-am
   înlocuit cu text; unde rămâne (mesaje), decupăm imaginea în loc de container. */
.roommate-avatar.is-online { overflow: visible; }
.roommate-avatar.is-online img { border-radius: 50%; }

/* ─── Butonul Google ──────────────────────────────────────────────────
   Stă deasupra formularului clasic: e drumul mai scurt, nu alternativa de la
   coadă. Cu el, adresa vine confirmată de Google şi contul e activ imediat. */
.google-auth { margin-bottom: 22px; }
.google-btn-holder { display: flex; justify-content: center; min-height: 44px; }
.google-auth-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--gray, #717171);
    text-align: center;
}
.google-auth-note[hidden] { display: none; }

.auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    color: var(--gray, #717171);
    font-size: 13px;
}
.auth-separator::before,
.auth-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light, #ebebeb);
}

/* Poza cheamă atenţia când vii pe profil cu „?adauga=poza".
   Selectorul de fişiere nu se poate deschide singur — browserele cer un gest al
   utilizatorului — deci arătăm clar unde se apasă. */
@keyframes avatarPulsatie {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 56, 92, 0); }
    50%      { box-shadow: 0 0 0 12px rgba(255, 56, 92, .22); }
}
.avatar-cheama-atentia {
    border-radius: 50%;
    animation: avatarPulsatie 1.1s ease-in-out 3;
}
@media (prefers-reduced-motion: reduce) {
    .avatar-cheama-atentia {
        animation: none;
        box-shadow: 0 0 0 6px rgba(255, 56, 92, .28);
    }
}

/* ── Căutarea de cartiere din chestionar ──────────────────────────────────
   Bucureştiul are 80 de zone. Lista întreagă cerea un derulaj lung la un pas
   dintr-un chestionar de două minute; acum se scrie, iar lista se strânge. */
.quiz-zone-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 10px;
    padding: 11px 14px;
    border: 2px solid var(--gray-lightest);
    border-radius: 999px;
    background: #fff;
    transition: border-color .15s;
}
.quiz-zone-search:focus-within { border-color: var(--brand); }
.quiz-zone-search svg { color: var(--gray); flex-shrink: 0; }
.quiz-zone-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    font: inherit;
    font-size: .95rem;
    background: transparent;
    color: var(--gray-dark);
}
.quiz-zone-clear {
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--gray);
    cursor: pointer;
    padding: 0 2px;
}
.quiz-zone-clear:hover { color: var(--brand); }

.quiz-zone-stare {
    margin: 0 0 12px;
    font-size: .82rem;
    color: var(--gray);
    text-align: center;
    min-height: 1.2em;   /* loc rezervat: altfel grila saltă la schimbarea textului */
}
.quiz-zone-stare.is-alese { color: var(--brand); font-weight: 600; }
.quiz-zone-stare.is-gol   { color: var(--gray-dark); }

/* Ascunse, nu şterse: bifele trebuie să supravieţuiască filtrării. */
.quiz-zone-pill.is-ascunsa { display: none; }

.quiz-zone-toate {
    display: block;
    margin: 4px auto 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.quiz-zone-toate:hover { opacity: .8; }

/* Grila are acum o înălţime maximă: cu toate cele 80 desfăcute, pagina nu mai
   creşte la nesfârşit — derulează lista, nu ecranul. */
.quiz-zones-grid {
    max-height: 46vh;
    overflow-y: auto;
    padding: 2px;
}

/* `[hidden]` are specificitate zero, deci `display: block` de pe clasă îl bate.
   Butonul „Arată toate" rămânea vizibil şi după ce lista era deja desfăcută.
   Aceeaşi capcană a mai apărut în proiect — de aceea regula e explicită. */
.quiz-zone-toate[hidden],
.quiz-zone-clear[hidden] { display: none; }

/* ── Comutatorul de notificări din setări ─────────────────────────────────
   Nu e o bifă din formular: permisiunea aparţine browserului şi fiecărui
   dispozitiv în parte, nu contului. */
.push-explicatie {
    margin: 6px 0 12px;
    font-size: 13px;
    color: #717171;
    line-height: 1.5;
}
.push-rand { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.push-stare {
    margin: 10px 0 0;
    font-size: 13px;
    color: #717171;
    line-height: 1.5;
    min-height: 1.2em;   /* loc rezervat: fără el pagina saltă la fiecare mesaj */
}
.push-stare.is-ok  { color: #067647; font-weight: 600; }
.push-stare.is-gri { color: #717171; }