/* Website additions on top of the Ofoq theme files (public/site/ofoq/css). */

.topbar-announcements { min-height: 1.5em; }
.topbar-announcement { animation: site-fade-in .5s ease both; }
@keyframes site-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .topbar-announcement { animation: none; } }

.main-nav .dropdown-menu { min-width: 14rem; }
.newsletter-message.is-error { color: #dc3545; }

/* listings */
[data-listing] { position: relative; min-height: 200px; transition: opacity .2s; }
[data-listing].is-loading { opacity: .45; pointer-events: none; }
.empty-state .empty-icon { width: 40px; height: 40px; color: var(--of-muted-strong); }
.cats-section.bg-navy .row-link .title, .cats-section.bg-navy .eyebrow { color: #fff; }
.cats-section.bg-navy .row-link .meta { color: var(--of-inverse-muted, rgba(255, 255, 255, .7)); }
.consult-form-of .site-form-message:not([hidden]) { padding: .625rem .75rem; background: var(--of-soft); border-radius: 2px; }
.register-card .consult-form-of .site-form-message:not([hidden]) { background: rgba(255, 255, 255, .1); }

/* website accounts (sign-in, agent area) */
.header-account { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--of-line-strong); border-radius: var(--of-radius); color: inherit; }
.site-header.is-overlay:not(.is-scrolled) .header-account { border-color: rgba(255, 255, 255, .4); }
.account-side { border: 1px solid var(--of-line); border-top: 2px solid var(--of-navy); padding: 1.5rem; background: #fff; position: sticky; top: 110px; }
.account-nav { display: grid; gap: .25rem; }
.account-nav-link { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border: 0; background: transparent; color: var(--of-body); border-radius: var(--of-radius); text-align: start; text-decoration: none; transition: background .2s, color .2s; }
.account-nav-link:hover { background: var(--of-soft); color: var(--of-navy); }
.account-nav-link.active { background: var(--of-navy); color: #fff; }
.account-card { border: 1px solid var(--of-line); padding: clamp(1.25rem, 3vw, 2rem); background: #fff; min-width: 0; }
.account-card > legend { float: none; width: auto; padding: 0; margin-bottom: 1rem; }
.account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 2px solid var(--of-navy); border-inline-start: 1px solid var(--of-line); }
.account-stat { display: grid; gap: .25rem; padding: 1.25rem; border-inline-end: 1px solid var(--of-line); border-bottom: 1px solid var(--of-line); }
.account-stat .value { font-size: 2rem; line-height: 1.1; color: var(--of-navy); }
.account-listings { border-top: 1px solid var(--of-navy); }
.account-listing { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--of-line); }
.account-listing .thumb { width: 88px; height: 66px; flex-shrink: 0; display: grid; place-items: center; background: var(--of-soft); overflow: hidden; }
.account-listing .thumb img { width: 100%; height: 100%; object-fit: cover; }
.moderation-badge { display: inline-flex; font-size: .75rem; font-weight: 600; padding: .1875rem .5rem; border-radius: 2px; }
.moderation-badge.is-approved { background: #e7f5ee; color: var(--of-success); }
.moderation-badge.is-pending { background: #fff4e0; color: #9a5b00; }
.moderation-badge.is-rejected { background: #fdecea; color: var(--of-danger); }
.account-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem 1rem; }
.account-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.account-image { display: grid; gap: .375rem; cursor: pointer; }
.account-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--of-soft); }
.review-form-of { border-top: 1px solid var(--of-line); padding-top: 1.5rem; margin-top: 1.5rem; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { cursor: pointer; color: var(--of-line-strong); font-size: 1.5rem; line-height: 1; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f5a524; }
.star-input input:focus-visible + label { outline: 2px solid var(--of-blue); outline-offset: 2px; }
@media (max-width: 991.98px) { .account-side { position: static; } }
.file-pick { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .375rem .75rem; border: 1px solid var(--of-line-strong); border-radius: var(--of-radius); min-width: 0; }
.file-pick.is-invalid { border-color: var(--bs-danger, #dc3545); }
.file-pick:focus-within { border-color: var(--of-blue); box-shadow: 0 0 0 4px rgba(0, 77, 250, .14); }

/* Property cards: a soft white surface so they stand out from the page, without breaking the calm look */
.p-card.property-item {
    gap: 0;
    background: var(--of-white);
    border: 1px solid var(--of-line);
    border-radius: var(--of-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(7, 19, 48, .04), 0 10px 28px -20px rgba(7, 19, 48, .28);
    transition: transform .6s var(--of-ease-out), box-shadow .6s var(--of-ease-out), border-color .6s var(--of-ease-out);
}
.p-card.property-item:hover {
    transform: translateY(-4px);
    border-color: var(--of-line-strong);
    box-shadow: 0 2px 4px rgba(7, 19, 48, .04), 0 22px 44px -22px rgba(7, 19, 48, .34);
}
.p-card.property-item .p-card-body { padding: 1.125rem 1.25rem 1.25rem; }
.p-card.property-item .p-card-title a { transition: color .3s var(--of-ease); }
.p-card.property-item:hover .p-card-title a { color: var(--of-blue); }
.p-card.property-item .price { color: var(--of-blue); }
@media (prefers-reduced-motion: reduce) {
    .p-card.property-item, .p-card.property-item:hover { transform: none; transition: none; }
}