/**
 * RockMedia Framework - Master Public Stylesheet
 * Centralized Design System & Housing Component Architecture
 */

/* ==========================================================================
   1. Design System Tokens
   ========================================================================== */

:root {
    /* Brand Typography Tokens */
    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Brand Colors */
    --unt-green: #00853E;
    --unt-green-hover: #006b32;
    --unt-black: #222222;
    --unt-text-dark: #333333;
    --unt-white: #ffffff;
    --unt-grey-light: #e2e2e2;
    --unt-grey-hover: #d4d4d4;
    --unt-border: #cccccc;

    /* Component Metrics */
    --rm-input-height: 45px;
    --rm-border-radius: 0px;
    --rm-font-size-base: 14px;
    --rm-font-size-btn: 16px;
    --rm-font-size-action: 13px;
}

/* ==========================================================================
   2. Global Typography Cascade
   ========================================================================== */

body, p, select, input, button, textarea, .rm-card-stats, .custom-boxed-input {
    font-family: var(--font-primary) !important;
}

h1, h2, h3, .h1, .h2, .h3, .results-counter h2 {
    font-family: var(--font-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   3. Housing Search Module ([rm_housing_search])
   ========================================================================== */

.rm-unified-search .custom-boxed-input {
    border-radius: var(--rm-border-radius);
    border: 1px solid var(--unt-border);
    height: var(--rm-input-height);
    font-size: var(--rm-font-size-base);
    text-transform: uppercase;
}

/* Dynamic Active Filter Highlight */
.rm-unified-search .is-active-filter {
    background-color: var(--unt-green) !important;
    color: var(--unt-white) !important;
    font-weight: 700;
}

.rm-unified-search .is-active-filter option {
    background-color: var(--unt-white);
    color: var(--unt-text-dark);
}

/* Search Actions & Buttons */
.rm-unified-search .btn-search {
    background-color: var(--unt-green);
    color: var(--unt-white);
    font-weight: 700;
    font-size: var(--rm-font-size-btn);
    border-radius: var(--rm-border-radius);
    padding: 12px;
    transition: background-color 0.2s ease-in-out;
}

.rm-unified-search .btn-search:hover {
    background-color: var(--unt-green-hover);
    color: var(--unt-white);
}

.rm-search-actions .btn-action-grey {
    background-color: var(--unt-grey-light);
    color: var(--unt-text-dark);
    font-weight: 700;
    font-size: var(--rm-font-size-action);
    border-radius: var(--rm-border-radius);
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease-in-out;
}

.rm-search-actions .btn-action-grey:hover {
    background-color: var(--unt-grey-hover);
    color: var(--unt-text-dark);
}

/* ==========================================================================
   4. Control Bar (View Toggles, Counter & Sorting)
   ========================================================================== */

.nav-toggle-group, 
.nav-sort-group {
    display: flex !important;
    align-items: center !important;
}

.nav-toggle-link, 
.nav-sort-link {
    color: var(--unt-green) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nav-toggle-link i,
.nav-sort-link i {
    font-size: 14px !important;
    display: inline-block !important;
}

.nav-toggle-link:hover, 
.nav-sort-link:hover,
.nav-toggle-link.active, 
.nav-sort-link.active {
    color: var(--unt-green) !important;
    text-decoration: underline !important;
}

.nav-divider {
    color: var(--unt-border) !important;
    margin: 0 10px !important;
    font-weight: 300 !important;
}

.results-counter h2 {
    color: var(--unt-green) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   5. Property Cards & Grid Architecture (Astoria Parity)
   ========================================================================== */

.rm-housing-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 25px;
    background: transparent !important;
}

/* Image Wrap */
.rm-card-image-wrap {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
}

.rm-listing-img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Price Badge - Compact Overlay (Bottom Left) */
.rm-price-badge {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    right: auto !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: var(--unt-white) !important;
    padding: 6px 12px !important;
    z-index: 2 !important;
}

.rm-price-badge .price {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    color: var(--unt-white) !important;
    letter-spacing: 0 !important;
}

.rm-price-badge .basis {
    font-size: 12px !important;
    margin: 0 !important;
    color: var(--unt-white) !important;
    text-transform: lowercase !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
}

/* Middle Meta Row */
.rm-card-top-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 12px 0 8px 0 !important;
    border: none !important;
    margin-bottom: 4px !important;
    background: transparent !important;
}

.rm-card-top-text {
    flex-grow: 1 !important;
    padding-right: 15px !important;
}

.rm-card-top-text p {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--unt-text-dark) !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
}

/* Action Button */
.rm-card-action {
    flex-shrink: 0 !important;
}

.rm-card-action .btn, 
.rm-card-action .rm-housing-outbound {
    background-color: var(--unt-green) !important;
    color: var(--unt-white) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border: none !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.2s ease-in-out !important;
}

.rm-card-action .btn:hover, 
.rm-card-action .rm-housing-outbound:hover {
    background-color: var(--unt-green-hover) !important;
}

/* Card Body & Details */
.rm-card-body {
    padding: 0 !important;
}

.rm-card-title {
    font-family: var(--font-primary) !important;
    font-size: 20px !important;
    margin: 0 0 4px 0 !important;
    color: var(--unt-text-dark) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0px !important;
}

.rm-card-stats {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--unt-text-dark) !important;
    line-height: 1.4 !important;
}

.rm-card-stats li {
    margin-bottom: 0px !important;
}

.rm-card-stats a, 
.text-green {
    color: var(--unt-green) !important;
    text-decoration: none !important;
}

.rm-card-stats a:hover {
    text-decoration: underline !important;
}

.rm-property-columns li {margin-bottom: 0;}

/* ==========================================================================
   6. Property Directory Modal (3-Column Balanced Layout)
   ========================================================================== */

.rm-property-columns {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    column-count: 3 !important;
    column-gap: 30px !important;
}

.rm-property-columns li {
    margin-bottom: 8px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.rm-property-columns a {
    color: var(--unt-text-dark) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: color 0.15s ease-in-out !important;
}

.rm-property-columns a:hover {
    color: var(--unt-green) !important;
    text-decoration: underline !important;
}

@media (max-width: 992px) {
    .rm-property-columns {
        column-count: 2 !important;
    }
}

@media (max-width: 576px) {
    .rm-property-columns {
        column-count: 1 !important;
    }
}

/* ==========================================================================
   Restored Search Module & Dynamic Active Filters
   ========================================================================== */

/* Main Search Boxed Inputs */
#housing-search-ajax select,
#housing-search-ajax input[type="text"],
.custom-boxed-input {
    border: 1px solid var(--unt-text-dark) !important;
    border-radius: 0 !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--unt-text-dark) !important;
    text-transform: uppercase !important;
    background-color: var(--unt-white);
}

/* UNT Green Active Filter Highlight State */
#housing-search-ajax select.is-active-filter,
#housing-search-ajax input.is-active-filter,
.custom-boxed-input.is-active-filter {
    background-color: var(--unt-green) !important;
    color: var(--unt-white) !important;
    font-weight: 700 !important;
}

#housing-search-ajax select.is-active-filter option,
.custom-boxed-input.is-active-filter option {
    background-color: var(--unt-white) !important;
    color: var(--unt-text-dark) !important;
}

/* Green Primary Search Button */
.btn-search-green {
    background-color: var(--unt-green) !important;
    color: var(--unt-white) !important;
    border-radius: 0 !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-search-green:hover {
    background-color: var(--unt-green-hover) !important;
    color: var(--unt-white) !important;
}

/* Secondary Grey Action Buttons */
.btn-action-grey {
    background-color: #e6e6e6 !important;
    color: var(--unt-text-dark) !important;
    border-radius: 0 !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.btn-action-grey:hover {
    background-color: #d4d4d4 !important;
    color: var(--unt-text-dark) !important;
}

/* ==========================================================================
   Restored Search Bar, Active Filters & Action Buttons
   ========================================================================== */

/* Search Inputs */
#housing-search-ajax select,
#housing-search-ajax input,
.custom-boxed-input {
    border: 1px solid var(--unt-text-dark) !important;
    border-radius: 0 !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--unt-text-dark) !important;
    text-transform: uppercase !important;
    background-color: var(--unt-white) !important;
}

/* Dynamic UNT Green Active State */
#housing-search-ajax select.is-active-filter,
#housing-search-ajax input.is-active-filter,
.custom-boxed-input.is-active-filter {
    background-color: var(--unt-green) !important;
    color: var(--unt-white) !important;
    font-weight: 700 !important;
}

#housing-search-ajax select.is-active-filter option,
.custom-boxed-input.is-active-filter option {
    background-color: var(--unt-white) !important;
    color: var(--unt-text-dark) !important;
}

/* Green Primary Search Button */
.btn-search-green {
    background-color: var(--unt-green) !important;
    color: var(--unt-white) !important;
    border-radius: 0 !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    height: 42px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-search-green:hover {
    background-color: var(--unt-green-hover) !important;
    color: var(--unt-white) !important;
}

/* Lower Action Row Buttons (Quick OCSL & Modal Trigger) */
.btn-action-grey {
    background-color: #e6e6e6 !important;
    color: var(--unt-text-dark) !important;
    border-radius: 0 !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 42px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.btn-action-grey:hover {
    background-color: #d4d4d4 !important;
    color: var(--unt-text-dark) !important;
}

/* Property Directory Modal - 3 Balanced Columns */
.rm-property-columns {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    column-count: 3 !important;
    column-gap: 30px !important;
}

.rm-property-columns li {
    margin-bottom: 4px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.rm-property-columns a {
    color: var(--unt-green) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: color 0.15s ease-in-out !important;
}

.rm-property-columns a:hover {
    color: var(--unt-black) !important;
    text-decoration: none !important;
}

@media (max-width: 992px) {
    .rm-property-columns { column-count: 2 !important; }
}
@media (max-width: 576px) {
    .rm-property-columns { column-count: 1 !important; }
}

/* ==========================================================================
   Housing Search Grid & UI
   ========================================================================== */
.rm-housing-grid .custom-boxed-input { 
    border: 1px solid #333 !important; 
    border-radius: 0 !important; 
    height: 42px !important; 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    color: #333 !important; 
    text-transform: uppercase !important; 
    box-shadow: none !important;
}

.rm-housing-grid .rm-flush-input {
    border-right: none !important;
}

.rm-housing-grid select.custom-boxed-input.is-active-filter { 
    background-color: #00853E !important; 
    color: #ffffff !important; 
    font-weight: 700 !important; 
}

.rm-housing-grid select.custom-boxed-input.is-active-filter option { 
    background-color: #ffffff !important; 
    color: #333333 !important; 
}

.rm-housing-grid .btn-search-green {
    background-color: #00853E !important; 
    color: white !important; 
    border-radius: 0 !important; 
    font-weight: 700 !important; 
    height: 42px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.rm-housing-grid .btn-action-grey {
    background-color: #e6e6e6 !important; 
    border-radius: 0 !important; 
    border: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    height: 42px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Utility Classes replacing inline styles */
.rm-icon-align { margin-top: 3px; }
.rm-btn-text-dark { color: #333 !important; }
.rm-btn-text-green { color: #00853E !important; }

/* Mobile fallback for flush grid inputs */
@media (max-width: 767px) {
    .rm-housing-grid .rm-flush-input {
        border-right: 1px solid #333 !important;
        border-bottom: none !important;
    }
}

/* ==========================================================================
   Featured Housing Scroller Styles
   ========================================================================== */
.rm-featured-scroller-wrapper { position: relative; width: 100%; }
.rm-featured-scroller {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 20px; padding-bottom: 20px; -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; scrollbar-width: none;
}
.rm-featured-scroller::-webkit-scrollbar { display: none; }

/* 3-Column Layout */
.rm-featured-scroller .scroller-col { 
    flex: 0 0 calc(33.333% - 14px); 
    max-width: calc(33.333% - 14px); 
}
@media (max-width: 991px) {
    .rm-featured-scroller .scroller-col { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 767px) {
    .rm-featured-scroller .scroller-col { flex: 0 0 100%; max-width: 100%; }
}

/* Navigation Arrow Buttons */
.rm-scroll-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    background-color: #00853E !important; color: white !important; border: none;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: background-color 0.2s;
}
.rm-scroll-btn:hover { background-color: #006630 !important; }
.rm-scroll-btn i { font-size: 18px; line-height: 1; }
.rm-scroll-left { left: -15px; }
.rm-scroll-right { right: -15px; }