/**
 * Apartment Availability Plugin Styles
 * Frontend styles for floor plans and units
 */

/* CSS Variables */
:root {
    --primary-color: #dc3545;
    --secondary-color: #007cba;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Base margin for desktop */
.apartment-availability-wrapper {
    margin: 8rem;
}

/* Medium screens (tablets) - only top margin */
@media (max-width: 1400px) {
    .apartment-availability-wrapper {
        margin: 8rem 1rem 1rem 1rem; /* top right bottom left */
    }
}

/* Smaller tablets */
@media (max-width: 982px) {
    .apartment-availability-wrapper {
        margin: 1rem 1rem 1rem 1rem;
    }
}

.apartment-availability-wrapper .container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ==========================================================================
   Grid System
   ========================================================================== */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-md-6,
.col-lg-4,
.col-lg-5,
.col-lg-7,
.col-md-8,
.col-md-4,
.col-lg-8,
.col-lg-4,
.col-lg-12,
.col-lg-3 {
    padding: 0 15px;
}

.col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-md-4,
.col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

@media (max-width: 768px) {
    .col-md-6,
    .col-md-8,
    .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .col-lg-4,
    .col-lg-5,
    .col-lg-7,
    .col-lg-8,
    .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .apartment-availability-wrapper .col-lg-7,
    .apartment-availability-wrapper .col-lg-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 25px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--secondary-color, #007cba);
    color: white;
    border-color: var(--secondary-color, #007cba);
}

.btn-primary:hover {
    background-color: var(--secondary-color, #007cba);
    border-color: var(--secondary-color, #007cba);
    color: white;
    text-decoration: none;
    filter: brightness(0.85);
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #545b62;
    border-color: #545b62;
    color: white;
    text-decoration: none;
}

.btn-outline-primary {
    color: var(--secondary-color, #007cba);
    border-color: var(--secondary-color, #007cba);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--secondary-color, #007cba);
    color: white;
    text-decoration: none;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
    text-decoration: none;
}

.btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

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

.fpo-btn-primary {
    background-color: var(--primary-color, #dc3545);
    color: white;
    border-color: var(--primary-color, #dc3545);
}

.fpo-btn-primary:hover {
    background-color: var(--primary-color, #dc3545);
    border-color: var(--primary-color, #dc3545);
    color: white;
    text-decoration: none;
    filter: brightness(0.85);
}

/* FPO Call-to-Action Button - Primary Color, Large, Block by default */
.fpo-btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 12px 24px;
    background-color: var(--primary-color, #dc3545);
    color: white !important;
    border: 1px solid var(--primary-color, #dc3545);
    border-radius: 35px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fpo-btn-cta-primary:hover {
    background-color: var(--primary-color, #dc3545);
    border-color: var(--primary-color, #dc3545);
    color: white !important;
    text-decoration: none;
    filter: brightness(0.85);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.fpo-btn-cta-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.fpo-btn-cta-primary .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

@media (max-width:767px) {
    .fpo-btn-cta-primary {
        margin-bottom: 10px;
    }
}

.btn-icon {
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
}

.btn-icon .dashicons {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
}

.contact-options-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.tour-buttons-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.tour-buttons-row .btn {
    flex: 1;
    white-space: nowrap;
}

.view-details-button {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.apply-now-button {
    background: var(--primary-color);
    color: white;
}

/* ==========================================================================
   Page Headers
   ========================================================================== */

.page-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    text-align: left !important;
}

.property-summary,
.availability-summary {
    margin: 15px 0;
}

.property-summary .lead,
.availability-summary .lead {
    font-size: 1.2rem;
    color: #666;
    margin: 0;
}

.page-actions {
    margin-top: 20px;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 20px;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.breadcrumb-item {
    color: #666;
    flex-shrink: 0; /* Don't shrink by default */
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding: 0 8px;
    color: #999;
}

.breadcrumb-item a {
    color: var(--secondary-color, #007cba);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--secondary-color, #007cba);
    text-decoration: underline;
    filter: brightness(0.85);
}

.breadcrumb-item.active {
    color: #333;
    font-weight: 500;
    /* Allow last item to shrink and truncate ONLY when needed */
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Floor Plans Grid
   ========================================================================== */

.floorplans-grid {
    margin-bottom: 40px;
}

/* Filter hidden items - remove from grid flow completely */
.filter-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    max-width: 0 !important;
}

/* Smooth transition for visible cards */
.col-md-6:not(.filter-hidden),
.col-lg-4:not(.filter-hidden) {
    transition: all 0.3s ease;
}

/* Floor plan image */
.floorplans-grid .floorplan-image {
    margin-bottom: 10px !important;
}

.floorplans-grid .floorplan-image img {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Highlighted amenities */
.highlighted-amenities {
    display: flex;
    gap: 6px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.amenity-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #e7f3ff;
    color: #0066cc;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid #b3d9ff;
}

/* Custom features section */
.custom-features-section {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
}

.custom-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

.features-list h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #333;
}

.features-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.features-grid .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.features-grid .feature-item .dashicons {
    color: #28a745;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.floorplan-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    height: 100%;
    transition: box-shadow 0.3s ease;
}

.floorplan-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.floorplan-header {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.floorplan-name {
    font-size: 1.85rem !important;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.floorplan-name a {
    color: #333;
    text-decoration: none;
}

.floorplan-name a:hover {
    color: var(--secondary-color, #007cba);
    text-decoration: none;
}

.floorplan-header .available-badge {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.75rem;
    padding: 4px 10px;
    align-self: flex-start;
}

.floorplan-specs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.spec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    min-width: 75px;
}

.spec-label {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 4px;
}

.spec-value {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.rent-info {
    margin-bottom: 10px;
    text-align: center;
}

.rent-range {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--secondary-color, #007cba);
}

.rent-period {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
}
.apartment-availability-wrapper .unit-list-item h3.unit-name {
    color: #333 !important;
}
.availability-info {
    margin-bottom: 12px;
}

.available-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.available-badge.available {
    background: #d4edda;
    color: #155724;
}

.available-badge.not-available {
    background: #c9c6c6;
    color: #050505;
}

.total-units {
    margin-top: 5px;
    font-size: 0.9rem;
    color: #666;
}

.floorplan-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    justify-content: center;
}

/* ==========================================================================
   Floor Plan Details
   ========================================================================== */

.floorplan-header {
    margin-bottom: 5px;
}

.floorplan-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
}

.floorplan-summary {
    margin-top: 15px;
}

.specs {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.spec {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 500;
    color: #333;
}

.rent-range {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--secondary-color, #007cba);
}

.availability-summary {
    text-align: right;
}

.available-count {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.available-count .count {
    font-size: 2.5rem;
    font-weight: bold;
    color: #28a745;
}

.available-count .label {
    font-size: 0.9rem;
    color: #666;
}

.not-available .label {
    color: #dc3545;
    font-weight: 500;
}

.total-count {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
}

/* ==========================================================================
   Units Listing
   ========================================================================== */

.units-section {
    margin-bottom: 40px;
}

.units-section h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.units-grid {
    margin-bottom: 40px;
}

.unit-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    transition: box-shadow 0.3s ease;
}

.unit-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/*.unit-card.available {
    border-left: 4px solid #28a745;
}
*/
.unit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.unit-name {
    font-size: 1.2rem!important;
    font-weight: 600!important;
    margin: 0;
}

.unit-name a {
    color: #333;
    text-decoration: none;
}

.unit-name a:hover {
    color: var(--secondary-color, #007cba);
}

.availability-badge {
    background: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.unit-details {
    margin-bottom: 20px;
}

.rent-amount {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--secondary-color, #007cba);
}

.rent-amount .period {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
}

.available-date,
.deposit {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.unit-specs {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.unit-specs span {
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #333;
}

.specials {
    margin: 10px 0;
}

.special-badge {
    background: #ffc107;
    color: #212529;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: inline-block;
}

.special-text {
    font-size: 0.9rem;
    color: #666;
    margin: 5px 0 0 0;
}

.unit-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Units Table
   ========================================================================== */

.units-table-wrapper {
    overflow-x: auto;
    margin-bottom: 20px;
}

.units-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.units-table th,
.units-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.units-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.units-table tr:hover {
    background: #f8f9fa;
}

.units-table tr.available {
    border-left: 4px solid #28a745;
}

.floorplan-actions .btn {
    text-transform: none !important;
}

@media (max-width: 1200px) and (min-width: 769px) {
    .floorplan-actions .btn {
        max-width: 250px;
        margin: 0 auto;
        white-space: nowrap;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
.units-table tr.not-available {
    border-left: 4px solid #6c757d;
}

.units-table .unit-name a {
    color: var(--secondary-color, #007cba);
    text-decoration: none;
    font-weight: 500;
}

.units-table .unit-name a:hover {
    color: var(--secondary-color, #007cba);
    text-decoration: underline;
    filter: brightness(0.85);
}

.units-table .rent {
    font-weight: 600;
    color: #333;
}

.units-table .actions {
    white-space: nowrap;
}

.units-table .actions .btn {
    margin-right: 5px;
}

/* ==========================================================================
   Single Unit
   ========================================================================== */

.unit-header {
    margin-bottom: 40px;
}

.unit-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
}


.unit-specs {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.availability-status {
    text-align: right;
}

.status-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1rem;
}

.status-badge.available {
    background: #d4edda;
    color: #155724;
}

.status-badge.not-available {
    background: #f8d7da;
    color: #721c24;
}

.available-date {
    margin-top: 5px;
    font-size: 0.9rem;
    color: #666;
}

.unit-content {
    margin-bottom: 40px;
}

.unit-content section {
    margin-bottom: 30px;
}

.unit-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--secondary-color, #007cba);
    padding-bottom: 5px;
}

/* Pricing Section */
.pricing-details {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.rent-amount {
    margin-bottom: 10px;
}

.rent-amount .amount {
    font-size: 2rem;
    font-weight: bold;
    color: var(--secondary-color, #007cba);
}

.rent-amount .period {
    font-size: 1rem;
    color: #666;
    font-weight: normal;
}

.deposit-amount {
    font-size: 1.1rem;
    color: #333;
}

.deposit-amount .label {
    font-weight: 500;
}

/* Specials Section */
.specials-content .alert {
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #c3e6cb;
    background: #d4edda;
    color: #155724;
}

/* Images Section */
.unit-images .row {
    margin: 0 -10px;
}

.unit-images .col-md-6,
.unit-images .col-lg-4 {
    padding: 0 10px;
}

.unit-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Sidebar */
.unit-sidebar,
.floorplan-sidebar {
    top: 20px;
}

.card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.card-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

.card-header h4 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    padding-bottom: 0px !important;
}

.card-body {
    padding: 20px;
}
.property-fees-card .card-body {
    padding: 0;
}

.facts-list {
    margin: 0;
}

.facts-list dt {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.facts-list dd {
    margin: 0 0 15px 0;
    color: #666;
}

.facts-list dd:last-child {
    margin-bottom: 0;
}

.facts-list a {
    color: var(--secondary-color, #007cba);
    text-decoration: none;
}

.facts-list a:hover {
    color: var(--secondary-color, #007cba);
    text-decoration: underline;
    filter: brightness(0.85);
}

.text-success {
    color: #28a745 !important;
}

.text-muted {
    color: #6c757d !important;
}

.cta-section {
    margin-top: 20px;
}

.contact-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}
.contact-info .fpo-btn-primary {
    margin-top: 20px;
}

.contact-info .small {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.floorplan-navigation,
.unit-navigation {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.text-md-end {
    text-align: right;
}

@media (max-width: 768px) {
    .text-md-end {
        text-align: left;
        margin-top: 10px;
    }
}

/* ==========================================================================
   Alerts and Messages
   ========================================================================== */

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.text-center {
    text-align: center;
}

.cta-buttons {
    margin-top: 20px;
}

.cta-buttons .btn {
    margin: 5px;
}

/* ==========================================================================
   Additional Information
   ========================================================================== */

.additional-info {
    background: #f8f9fa;
    padding: 40px 30px;
    border-radius: 8px;
}

.additional-info h3,
.additional-info h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 21px;
}

.additional-info .row {
    margin: 0 -15px;
}

.contact-info {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Compare Table
   ========================================================================== */

.units-compare-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-responsive {
    overflow-x: auto;
}

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

.table th,
.table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e9ecef;
}

.table-hover tbody tr:hover {
    background: #f8f9fa;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 3rem;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.rounded {
    border-radius: 8px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }
    
    .floorplan-title,
    .unit-title {
        font-size: 1.8rem;
    }
    
    .availability-summary {
        text-align: left;
        margin-top: 20px;
    }
    
    .floorplan-specs,
    .specs,
    .unit-specs {
        justify-content: center;
    }
    
    .unit-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .availability-badge {
        margin-top: 10px;
    }
    
    .floorplan-actions,
    .unit-actions {
        justify-content: center;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Keep icon buttons at fixed size on all screens */
    .btn-icon {
        width: 60px !important;
        height: 60px !important;
    }

    body > div.apartment-availability-wrapper > div > div.additional-info.mt-5 > div > div.col-md-4 > div > a {
        margin-top: 10px;
    }
    /* Additional info section - mobile padding */
    .additional-info {
        padding: 30px 20px;
    }
}

/* Theme Compatibility */
.site-main .apartment-availability-wrapper,
#content .apartment-availability-wrapper,
.entry-content .apartment-availability-wrapper {
    max-width: 100%;
    padding: 0;
}

/* Divi Fullwidth Override for Apartment Template */
body.apartment-availability-page #main-content > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Force proper display for header elements - prevent theme overrides */
.apartment-availability-wrapper h1,
.apartment-availability-wrapper h2,
.apartment-availability-wrapper h3,
.apartment-availability-wrapper h4 {
    display: block !important;
    color: var(--secondary-color, #007cba) !important;
}

.apartment-availability-wrapper .floorplan-header-bar * {
    box-sizing: border-box !important;
}

/* Force title color - override any theme styles */
.apartment-availability-wrapper .floorplan-title-main {
    color: var(--secondary-color, #007cba) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Prevent theme from hiding or breaking layout */
.apartment-availability-wrapper .spec-item,
.apartment-availability-wrapper .spec-divider,
.apartment-availability-wrapper .rent-label,
.apartment-availability-wrapper .rent-value,
.apartment-availability-wrapper .availability-text {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure full width layout */
.apartment-availability-wrapper .container {
    width: 100% !important;
    max-width: 1800px !important;
    padding: 0 15px !important;
}

.apartment-availability-wrapper .floorplan-content {
    width: 100% !important;
}

/* .apartment-availability-wrapper .floorplan-content .row,
.apartment-availability-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -15px !important;
} */

.apartment-availability-wrapper .col-lg-7 {
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
    padding: 0 15px !important;
}

.apartment-availability-wrapper .col-lg-5 {
    flex: 0 0 41.666667% !important;
    max-width: 41.666667% !important;
    padding: 0 15px !important;
}

.apartment-availability-wrapper .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 15px !important;
}

/* Fix image sizing issues */
.apartment-availability-wrapper .unit-image,
.apartment-availability-wrapper .images-section .col-md-6 {
    min-height: 365px;
}

/* Ensure proper card display */

/* .apartment-availability-wrapper .card {
    display: block !important;
    visibility: visible !important;
} */

/* ==========================================================================
   Property Fees Display
   ========================================================================== */

.property-fees-card {
    margin-top: 20px;
}

.property-fees-card .fees-header {
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.2s ease;
}

.property-fees-card .fees-header:hover {
    background: #f0f0f0 !important;
}

.property-fees-card .fees-header h4 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.fees-toggle-icon {
    transition: transform 0.3s ease;
    font-size: 18px !important;
}

.fees-toggle-icon.open {
    transform: rotate(-180deg);
}

.fees-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fee-item-display {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
}

.fee-item-display.fee-total {
    background: #f0f8f4 !important;
    margin-top: 10px !important;
}

.fee-item-display.fee-total .fee-item-header strong {
    font-size: 1.1rem !important;
}

.fee-item-display.fee-total .fee-amount {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #28a745 !important;
}

.fee-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.fee-item-header strong {
    font-size: 14px;
    color: #333;
}

.fee-amount {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.fee-badges {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.fee-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
}

.fee-badge.recurring {
    background: #e7f3ff;
    color: #0066cc;
    border: 1px solid #b3d9ff;
}

.fee-badge.optional {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.fees-note {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    color: #666;
}

.fees-note small {
    font-size: 12px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .fee-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ==========================================================================
   Floor Plan Header Bar (Redesigned)
   ========================================================================== */

.floorplan-header-bar {
    display: block !important;
    background: white !important;
    padding: 25px 0 20px !important;
    border-radius: 0 !important;
}

.floorplan-bottom-border {
    border-bottom: 3px solid #e9ecef !important;
}

.header-row-1 {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.floorplan-title-main {
    display: inline-block !important;
    font-size: 2.8rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
    color: var(--secondary-color, #007cba) !important;
    line-height: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    text-transform: uppercase;
}

.header-row-2 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 1.1rem !important;
    flex-wrap: wrap !important;
}

.spec-item {
    display: inline-block !important;
    font-weight: 500 !important;
    color: #333 !important;
    font-size: 1.1rem !important;
}

.spec-divider {
    display: inline-block !important;
    color: #ccc !important;
    margin: 0 4px !important;
}

@media (max-width:768px) {
    .spec-divider:first-of-type {
        display: none;
    }
}

.rent-label {
    display: inline-block !important;
    color: #666 !important;
    font-weight: 600 !important;
}

.rent-value {
    display: inline-block !important;
    font-weight: 700 !important;
    color: #333 !important;
    font-size: 1.2rem !important;
}

.availability-text {
    display: inline-block !important;
    font-weight: 600 !important;
}

.availability-text.available {
    color: #333 !important;
}

.availability-text.available strong {
    font-weight: 700 !important;
}

.availability-text.unavailable {
    color: #dc3545 !important;
}

/* ==========================================================================
   Features List Compact (Sidebar)
   ========================================================================== */

.features-card {
    top: 20px;
}

@media (max-width: 992px) {
    .features-card {
        margin-top: 15px !important;
    }
}

/* Features card header layout and collapsible behavior */
.features-card .card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.features-card .card-header h4, .cta-card .card-header h4 {
    margin: 0;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color, #007cba) !important;
}

.features-card .card-header .features-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: transform .2s ease;
    font-size: 18px;
    line-height: 1;
}

.features-card.features-open .card-header .features-toggle-icon {
    transform: rotate(180deg);
}

/* MOBILE-ONLY: caret visible and header is clearly clickable */
@media (max-width: 767.98px) {
    .features-card .card-header {
        cursor: pointer;
    }
    .features-card .card-header .features-toggle-icon {
        display: inline-flex;
    }
}

/* DESKTOP/TABLET: hide caret entirely */
@media (min-width: 768px) {
    .features-card .card-header .features-toggle-icon {
        display: none !important;
    }
}

.features-list-compact {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.features-list-compact li {
    padding: 8px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1.1rem !important;
}

.features-list-compact li:last-child {
    border-bottom: none !important;
}

.features-list-compact .dashicons,
.features-list-compact .dashicons-yes {
    color: #28a745 !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* Two-column, left-to-right flow */
.features-list-compact{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two equal columns */
  column-gap: 1rem;  /* space between columns */
  row-gap: .5rem;    /* space between rows */
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Each feature row */
.features-list-compact li{
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: 0;
}

/* Icon sizing/align */
.features-list-compact .dashicons{
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Stack to one column on small screens */
@media (max-width: 575.98px){
  .features-list-compact{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Phone Number (DNI)
   ========================================================================== */

.contactTelly {
    text-align: center;
    margin: 0;
    padding: 15px;
    border-radius: 6px;
}

.contactTelly a {
    display: block !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.contactTelly a:hover {
    opacity: 0.8;
    text-decoration: none !important;
}

/* ==========================================================================
   Images Section - Fix Sizing
   ========================================================================== */

.images-section {
    margin-bottom: 30px !important;
}

.images-section .unit-image {
    margin-bottom: 15px;
    min-height: 365px;
}

.images-section .unit-image img {
    width: 100% !important;
    height: 420px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
}

.images-section .col-md-6 {
    margin-bottom: 15px;
}

/* ==========================================================================
   Available Units Section (Full Width)
   ========================================================================== */

.available-units-section h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #333;
}

   /* --- Container (fits inside .col-lg-5) --- */
.available-units-section {
  /* Prevent horizontal scroll from within this section */
  overflow-x: hidden;
}

/* --- Scrollable list after 4 items --- */
.units-list {
  /* Fixed metric to enforce "4 items visible" before scrolling */
  --unit-row-h: 6.25rem;   /* approx height of one item (tweak as needed) */
  --unit-gap: 0.75rem;

  display: flex;
  flex-direction: column;
  gap: var(--unit-gap);
  margin: 0;
  padding: 0;

  /* Show ~4 items, then scroll */
  max-height: calc(var(--unit-row-h) * 4 + var(--unit-gap) * 3);
  overflow-y: auto;

  /* Keep the list from causing side scroll in narrow columns */
  min-width: 0;
}

/* Optional: slim scrollbar (WebKit) */
.units-list::-webkit-scrollbar { width: 8px; }
.units-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 4px;
}

/* --- Each item --- */
.unit-list-item {
  display: grid;
  grid-template-columns: 1fr auto; /* content | actions */
  grid-template-rows: auto auto;   /* header, meta */
  gap: .5rem 1rem;
  align-items: start;

  padding: .75rem .875rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  background: #fff;

  /* Avoid horizontal overflow inside */
  min-width: 0;
}

/* Header row: name + badge */
.unit-row {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}

.unit-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  min-width: 0;
}

.unit-name a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  max-width: 100%;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  line-height: 1;
  padding: .25rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.availability-badge.available { background: #e7f7ec; color: #0a7a33; }
.availability-badge.coming    { background: transparent; border: 1px solid #0a7a33; color: #0a7a33; }

/* Meta row */
.unit-meta {
  grid-column: 1 / 2;
  display: grid;
  grid-auto-rows: min-content;
  gap: .25rem;
  min-width: 0;
}

.rent-amount {
  font-weight: 700;
  font-size: 1rem;
}
.rent-amount .period { font-weight: 400; font-size: .9em; color: #666; }

.available-date,
.deposit,
.specials {
  font-size: .9rem;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* keeps row height steady */
}

/* Actions column */
.unit-actions {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  align-content: start;
  min-width: 0;
}

/* Buttons should not force horizontal scroll */
.unit-actions .btn {
  white-space: nowrap;
}

/* Small screens: stack actions under meta for width */
@media (max-width: 575.98px) {
  .unit-list-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .unit-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Optional: subtle hover */
.unit-list-item:hover {
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* ==========================================================================
   Related Floor Plans (Slider-Style)
   ========================================================================== */

.related-floorplans {
    padding-top: 40px;
    border-top: 2px solid #e9ecef;
}

.related-floorplans h2 {
    font-size: 1.8rem !important;
    font-weight: 600;
    margin-bottom: 25px;
    color: #333;
    text-align: center;
}

/* Desktop - centered grid, no scroll (only on large screens) */
@media (min-width: 1200px) {
    .related-floorplans .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .related-floorplans .col-md-4 {
        flex: 0 1 350px;
        max-width: 350px;
    }
}

/* Tablet/Medium screens - horizontal scroll to avoid 2-row layout */
@media (min-width: 769px) and (max-width: 1199px) {
    .related-floorplans .row {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        padding-bottom: 15px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: #000 #f0f0f0 !important;
    }
    
    .related-floorplans .row::-webkit-scrollbar {
        height: 8px;
    }
    
    .related-floorplans .row::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }
    
    .related-floorplans .row::-webkit-scrollbar-thumb {
        background: #000;
        border-radius: 4px;
    }
    
    .related-floorplans .col-md-4 {
        flex: 0 0 320px !important;
        max-width: 320px !important;
        scroll-snap-align: start !important;
    }
}

.related-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.related-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.related-card .floorplan-name {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
}

.related-card .floorplan-name a {
    color: #333;
    text-decoration: none;
}

.related-card .floorplan-name a:hover {
    color: var(--secondary-color, #007cba);
}

.floorplan-specs-small {
    color: #666;
    font-size: 0.85rem;
    padding: 4px;
    text-align: center;
}

.related-card .rent-amount {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--secondary-color, #007cba);
}

.related-card .rent-period {
    font-size: 0.9rem;
    color: #666;
}

/* ==========================================================================
   Responsive - Header Bar
   ========================================================================== */

/* Hide mobile version on desktop */
.header-row-2-mobile {
    display: none !important;
}

@media (max-width: 992px) {
    .header-row-1,
    .header-row-2 {
        flex-wrap: wrap;
    }
    
    .floorplan-title-main {
        font-size: 2.2rem !important;
    }
    
    .apartment-availability-wrapper .floorplan-content .col-lg-7,
    .apartment-availability-wrapper .floorplan-content .col-lg-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .floorplan-header-bar {
        padding: 15px;
    }
    
    /* Hide original header-row-2 in header on mobile */
    .floorplan-header-bar .header-row-2:not(.header-row-2-mobile) {
        display: none !important;
    }
    
    /* Show mobile version below image */
    .header-row-2-mobile {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 0.9rem !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
        padding: 12px 15px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    
    /* Style mobile version elements */
    .header-row-2-mobile .rent-label {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    .header-row-2-mobile .rent-value {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--secondary-color, #007cba) !important;
        white-space: nowrap !important;
    }
    
    .header-row-2-mobile .availability-text {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    .header-row-2-mobile .availability-text.available {
        color: #333 !important;
    }
    
    .header-row-2-mobile .availability-text.available strong {
        font-weight: 700 !important;
    }
    
    .header-row-2-mobile .availability-text.unavailable {
        color: #dc3545 !important;
    }
    
    .header-row-2-mobile .spec-item {
        font-size: 0.85rem !important;
    }
    
    .header-row-2-mobile .spec-divider {
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
    }
    
    .header-row-1 {
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
        margin-bottom: 8px !important;
        justify-content: center !important
    }
    
    .floorplan-title-main {
        font-size: 2rem !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    .header-row-2 {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        font-size: 0.85rem !important;
        align-items: center !important;
        justify-content: center !important
    }
    
    .spec-item {
        font-size: 1rem !important;
        white-space: nowrap !important;
    }
    
    .spec-divider {
        font-size: 0.85rem !important;
    }
    
    .rent-label {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    .rent-value {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    
    .availability-text {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    /* Mobile - horizontal scroll with smaller cards */
    .related-floorplans .row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        padding-bottom: 15px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: #000 #f0f0f0 !important;
    }
    
    .related-floorplans .row::-webkit-scrollbar {
        height: 8px;
    }
    
    .related-floorplans .row::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }
    
    .related-floorplans .row::-webkit-scrollbar-thumb {
        background: #000;
        border-radius: 4px;
    }
    
    .related-floorplans .col-md-4 {
        flex: 0 0 325px !important;
        max-width: 325px !important;
        scroll-snap-align: start !important;
    }
    
    .apartment-availability-wrapper .images-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Extra Small Screens (360px and below)
   ========================================================================== */

@media (max-width: 360px) {
    /* Adjust mobile header-row-2 for very small screens */
    .header-row-2-mobile {
        padding: 10px 8px !important;
        gap: 4px !important;
        font-size: 0.8rem !important;
    }
    
    .header-row-2-mobile .rent-label {
        font-size: 0.75rem !important;
    }
    
    .header-row-2-mobile .rent-value {
        font-size: 0.85rem !important;
    }
    
    .header-row-2-mobile .availability-text {
        font-size: 0.75rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    .header-row-2-mobile .spec-divider {
        font-size: 0.75rem !important;
    }
    
    .header-row-2-mobile .rent-label,
    .header-row-2-mobile .rent-value {
        white-space: nowrap !important;
    }
    
    /* Ensure container doesn't overflow */
    .apartment-availability-wrapper {
        overflow-x: hidden !important;
    }
    
    .apartment-availability-wrapper .container {
        padding: 0 10px !important;
    }
}

/* ==========================================================================
   Contact Options
   ========================================================================== */

.contact-options {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.contact-options .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    /* Make the element a flex container (often used alongside the utilities) */
    .d-flex { display: flex !important; }

    /* Push flex items to the right */
    .justify-content-end { justify-content: flex-end !important }
    .justify-content-center {justify-content: center !important;}

    /* Vertically center flex items */
    .align-items-center { align-items: center }

@media (max-width:992px) {
    .contact-options {
        justify-content: center;
    }
    .contact-options .btn {
        padding:10px;
    }
}


/* ==========================================================================
   Tour Links
   ========================================================================== */

.tour-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.tour-links .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tour-links .btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .tour-links {
        gap: 8px;
    }
    
    .contact-options {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .tour-buttons-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .tour-buttons-row .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Mobile Available Units Layout (720px and below)
   ========================================================================== */

@media (max-width: 720px) {
    /* container margin on mobile for FP archive */
    .apartment-availability-wrapper {
    margin: .6rem;
    }
    
    /* Floor plan specs - compact mobile layout */
    .floorplans-grid .floorplan-specs {
        display: flex !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .floorplans-grid .spec-item {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 8px 5px !important;
        font-size: 0.85rem !important;
    }
    
    .floorplans-grid .spec-label {
        font-size: 0.95rem !important;
        margin-bottom: 3px !important;
    }
    
    .floorplans-grid .spec-value {
        font-size: 0.95rem !important;
    }

    /* Force single column layout */
    .available-units-section .col-lg-4,
    .available-units-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Redesigned compact card layout with absolute positioning */
    .available-units-section .unit-card {
        padding: 12px !important;
        position: relative !important;
        min-height: 100px !important;
        height: auto !important;
    }

    /* Unit header with name only (no badge here) */
    .available-units-section .unit-header {
        display: block !important;
        margin-bottom: 50px !important;
        padding-right: 90px !important;
    }

    .available-units-section .unit-name {
        margin: 0 !important;
        font-size: 1rem !important;
    }

    /* Availability badge - ABSOLUTE positioned in top-right corner */
    /* .available-units-section .availability-badge {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    } */

    /* Unit details - positioned at bottom left */
    .available-units-section .unit-details {
        position: absolute !important;
        bottom: 12px !important;
        left: 12px !important;
        margin: 0 !important;
    }

    /* Rent amount at bottom left */
    .available-units-section .rent-amount {
        font-size: 1.1rem !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
    }

    /* Hide extra details on mobile for cleaner look */
    /* .available-units-section .available-date,
    .available-units-section .deposit,
    .available-units-section .specials {
        display: none !important;
    } */

    /* Buttons container - ABSOLUTE positioned at bottom right, horizontal */
    /* .available-units-section .unit-actions {
        position: absolute !important;
        bottom: 12px !important;
        right: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        margin: 0 !important;
    } */

    .available-units-section .unit-actions .btn {
        width: auto !important;
        white-space: nowrap !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        margin-bottom: 0 !important;
    }

    .available-units-section .unit-actions {
        grid-column: 2 / 2;
        display: grid;
        grid-auto-rows: min-content;
        gap: .25rem;
        min-width: 0;
    }
}

/* Ensure desktop layout isn't affected */
@media (min-width: 721px) {
    .available-units-section .unit-extra-details {
        display: block !important;
    }

    .available-units-section .unit-details {
        display: block !important;
    }

    .available-units-section .unit-actions {
        display: flex !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   Floor plan Page > Related Floor plans
   ========================================================================== */

/* Image at top with graceful cropping */
        .rfp-card-img-wrapper {
            position: relative;
            border-radius: .5rem .5rem 0 0;
            overflow: hidden;
            background: #f7f7f7;
            display: block;
        }
        .rfp-card-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        @media (min-width: 768px) { .rfp-card-img { height: 180px; } }
        @media (min-width: 1200px) { .rfp-card-img { height: 200px; } }

        /* Availability badge (moved to right) */
        .rfp-badge {
            position: absolute;
            top: 10px;
            right: 10px;  /* <-- right aligned */
            left: auto;   /* <-- ensure not left-aligned */
            padding: 6px 10px;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 600;
            color: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,.12);
            white-space: nowrap;
            background-color: #d4edda;
        }
        
        .rfp-badge.not-available { background: rgba(108,117,125,.95); } /* gray */

        /* Card polish */
        .related-card.card {
            border: 1px solid #eee;
            border-radius: .5rem;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,.06);
            transition: transform .15s ease, box-shadow .15s ease;
        }
        .related-card.card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,.08);
        }

        /* Center the card header/title */
        .related-card .card-title { 
            text-align: center; 
            margin-bottom: .5rem;
        }
        .related-card .card-title a { 
            text-decoration: none; 
        }
        .related-card .card-title a:hover { 
            text-decoration: underline; 
        }

        /* Minor spacing tweaks */
        .related-card .floorplan-specs-small span { color: #6c757d; }
        .related-card .rent-info .rent-amount { font-weight: 600; }

/* ==========================================================================
   Tour Buttons
   ========================================================================== */
.tour-buttons-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;            
    margin-top:.5rem;
    margin-bottom:.5rem;
}
.tour-buttons-row .btn{
    width:auto;         
    flex:0 0 auto;      
    white-space:nowrap; 
}

/* Tour section dividers */
.tour-section-divider {
    border: 0;
    border-top: 2px solid #e9ecef;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .tour-section-divider {
        margin: 15px 0;
    }
}

/* ==========================================================================
   Share Button
   ========================================================================== */

/* ===== Share Modal Styles ===== */
.share-modal-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: none; /* toggled by JS */
  align-items: center; justify-content: center;
  z-index: 10000;
}
.share-modal-overlay.is-open{ display: flex; }

.share-modal{
  background: #fff;
  width: min(560px, 92vw);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  position: relative;
  padding: 20px 18px 18px;
}
.share-close{
  position: absolute; top: 8px; right: 10px;
  border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.share-title{ margin: 0 0 12px; text-align: center; }

.share-row{ margin-bottom: 12px; }
.share-label{ display: block; font-weight: 600; margin-bottom: 6px; }

.share-copy-wrap{
  display: flex; gap: 8px; align-items: stretch;
}
.share-input{
  flex: 1 1 auto;
  border: 1px solid #dcdcdc; border-radius: 6px;
  padding: 8px 10px; font-size: 14px;
  background: #f9fafb;
}
#share-copy{ flex: 0 0 auto; white-space: nowrap; }
@media (max-width:768px) {
    #share-copy {
        width: auto;
    }
}

.share-actions{
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
}
.share-native-wrap{ text-align: center; margin-top: 10px; }
.share-hint{ font-size: 12px; color: #28a745; min-height: 1em; margin-top: 4px; }

/* Prevent body scroll when modal is open */
body.share-lock{ overflow: hidden; }

/* ==========================================================================
   Money Back Guarantee Section
   ========================================================================== */

/* Add spacing and center content */
.page-header + .row {
    margin-bottom: 30px;
    justify-content: center;
}

/* Container for the money back guarantee shortcode */
.apartment-availability-wrapper .row .col-12 {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Scale down the entire guarantee section */
.apartment-availability-wrapper .tcg-money-back-section {
    transform: scale(0.85);
    transform-origin: top center;
    margin: 0 auto 10px auto !important;
}

/* Responsive scaling for different screen sizes */
@media (max-width: 990px) {
    .apartment-availability-wrapper .tcg-money-back-section {
        transform: scale(0.9);
    }
}

@media (max-width: 768px) {
    .apartment-availability-wrapper .tcg-money-back-section {
        transform: scale(0.95);
    }
}

@media (max-width: 480px) {
    .apartment-availability-wrapper .tcg-money-back-section {
        transform: scale(1);
    }
}

@media (max-width:992px) {
    .features-card-desktop {
        display: block;
    }
    .features-card-mobile {
        display: none;
    }
}

@media (max-width:992px) {
    .features-card-desktop {
        display: none;
    }
    .features-card-mobile {
        display: block;
    }
}



/* ==========================================================================
   Apply Button Visibility
   ========================================================================== */
.mobile-apply-wrapper {
    display: block;
}
.desktop-apply-wrapper {
    display: none;
}

/* Override fpo-btn-cta-primary to be full-width and centered in apply wrappers */
.mobile-apply-wrapper .fpo-btn-cta-primary,
.desktop-apply-wrapper .fpo-btn-cta-primary {
    display: flex;
    width: 100%;
}

@media (min-width: 992px) {
    .mobile-apply-wrapper {
        display: none;
    }
    .desktop-apply-wrapper {
        display: block;
    }
}

@media (max-width: 767px) {
    .features-card-mobile {
        display: block;
    }

    .features-card-desktop {
        display: none;
    }

    .spec-divider:first-of-type {
        display: none !important;
    }
}

@media (min-width: 767px) {
    .features-card-mobile {
        display: none;
    }

    .features-card-desktop {
        display: block;
    }
}


@media (min-width: 992px) {
    .property-fees-mobile {
        display: none;
    }

    .property-fees-desktop {
        display: block;
    }
}

@media (max-width: 992px) {
    .property-fees-mobile {
        display: block;
    }

    .property-fees-desktop {
        display: none;
    }
}

.features-card {
    border: 1px solid #e9ecef;
}

.features-card .card-header {
    background: var(--primary-color, #dc3545) !important;
}

.features-card .card-header h4 {
    font-size: 1.4rem;
    color: white !important;
}

.view-toggle {
  display: flex;
  gap: 8px;              /* any gap is fine */
}

.view-toggle-btn {
  flex: 2 1 0;           /* inactive = 40% of available space */
  transition: flex-grow .2s ease, padding .18s ease;
  padding: .4rem .9rem;  /* thinner (inactive) */
  color: #000;           /* black text for inactive state */
}

.view-toggle-btn.active,
.view-toggle-btn[aria-pressed="true"] {
  flex-grow: 1.1;          /* active = 60% of available space */
  padding: .7rem 1rem;   /* taller (active) */
  /* optional extra styles... */
}

/* Prevent overflow issues with long labels */
.view-toggle-btn > span {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional focus styles */
.view-toggle-btn:focus-visible {
  outline: 2px solid var(--primary-color, #dc3545);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .view-toggle-btn { transition: none; }
}

.text-end {
    color: #666;
}

/* Hide filter results count */
.results-count {
    display: none !important;
}

/* Ensure money back guarantee float is clickable */
.guarantee-float {
    position: relative;
    z-index: 10;
}