/* Enhanced Offering Tiles - Interactive Styles */

/* Multiple Progress Bars */
.offering-progress + .offering-progress {
    margin-top: 0.5rem !important; /* Reduced spacing between multiple progress bars */
}

/* Ensure content doesn't get cut off */
.offering-tile-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: visible !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
}

.offering-tile-link:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    color: inherit !important;
}

.offering-tile-link:focus {
    outline: 3px solid var(--c1-link) !important;
    outline-offset: 2px !important;
}

/* Main Tile Container */
.offering-tile {
    position: relative !important;
    border-radius: 16px 16px 0 0 !important; /* Remove bottom border radius since progress bar acts as bottom */
    height: 600px !important; /* Fixed height for consistency */
    width: 100% !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important; /* Keep hidden to maintain clean edges */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    margin: 0 0 2rem 0 !important; /* Only keep bottom margin, remove top/left/right */
    border-radius: 30px !important;
}

.offering-tile:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

/* Link overlay for navigation */
.offering-tile-link-overlay {
    position: absolute !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 45px !important; /* Account for progress bar height */
    z-index: 10 !important; /* Lowest z-index but still above tile content */
    cursor: pointer !important;
    text-decoration: none !important;
    pointer-events: auto !important; /* Ensure it's clickable */
    margin-bottom: 2rem !important;
}

.offering-tile-link-overlay:hover {
    text-decoration: none !important;
}

/* Ensure the expand button is above the link overlay */
.offering-expand-btn {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--c1-link) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 100 !important; /* HIGHEST: Ensure it's above everything */
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto !important; /* Ensure it's clickable */
}

.offering-expand-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Subtle pulse animation to draw attention when content might be cut off */
.offering-expand-btn::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    animation: expandButtonPulse 4s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes expandButtonPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.4;
    }
}

.offering-expand-btn i {
    font-size: 1.1rem !important;
    color: var(--c1-link) !important;
}

/* Hide any text content within the button - only show the icon */
.offering-expand-btn > *:not(i) {
    display: none !important;
}

.offering-expand-btn::before,
.offering-expand-btn::after {
    display: none !important;
}

/* Main Tile Container */
.offering-tile-inner {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%) !important;
    padding: 2rem !important;
    padding-top: 4rem !important;
    padding-bottom: 3rem !important; /* Add bottom padding to account for progress bar */
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
    border-radius: 16px 16px 0 0 !important; /* Remove bottom border radius to match tile */
    overflow: hidden !important;
}

/* Content fade-out effect to indicate more content below */
.offering-tile-inner::after {
    content: '' !important;
    position: absolute !important;
    bottom: 45px !important; /* Position just above progress bar */
    left: 0 !important;
    right: 0 !important;
    height: 60px !important; /* Height of fade effect */
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%) !important;
    pointer-events: none !important; /* Allow clicks to pass through */
    z-index: 3 !important; /* Above content but below progress bar */
}

/* Interactive Overlay */
.offering-tile-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 45px !important; /* Account for progress bar height */
    background: linear-gradient(135deg, rgba(var(--c1-link), 0.1) 0%, rgba(var(--c1-link), 0.05) 100%) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 25 !important; /* Above link overlay, below status bar */
    pointer-events: none !important; /* Allow clicks to pass through to link overlay */
}

.offering-tile:hover .offering-tile-overlay {
    opacity: 1 !important;
}

.offering-tile-cta {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--c1-link) !important;
    padding: 1rem 2rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transform: translateY(20px) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto !important; /* Make CTA clickable */
}

.offering-tile:hover .offering-tile-cta {
    transform: translateY(0) !important;
}

.cta-arrow {
    font-size: 1.2rem !important;
    transition: transform 0.3s ease !important;
}

.offering-tile:hover .cta-arrow {
    transform: translateX(4px) !important;
}

/* Status Bar */
.offering-status-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.5rem 1.5rem !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    text-align: center !important;
    z-index: 50 !important; /* Above interactive overlay, below expand button */
    backdrop-filter: blur(10px) !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Project Status Bar Colors */
.offering-status-bar.status-invest {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Active/Live */
}

.offering-status-bar.status-now-live {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Active/Live */
}

.offering-status-bar.status-view-offering {
    background: rgba(76, 175, 80, 0.9) !important; /* Purple - View details */
}

.offering-status-bar.status-fully-subscribed {
    background: rgba(255, 152, 0, 0.9) !important; /* Orange - Warning/Full */
}

.offering-status-bar.status-fully-funded {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Success */
}

.offering-status-bar.status-successful {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Success */
}

.offering-status-bar.status-acquisition {
    background: rgba(255, 193, 7, 0.9) !important; /* Yellow - In progress */
}

.offering-status-bar.status-renovation {
    background: rgba(255, 152, 0, 0.9) !important; /* Orange - Active work */
}

.offering-status-bar.status-stabilization {
    background: rgba(158, 158, 158, 0.9) !important; /* Gray - Stabilizing */
}

.offering-status-bar.status-cash-flow {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Positive cash flow */
}

.offering-status-bar.status-sold {
    background: linear-gradient(135deg, rgba(228, 194, 1, 0.9) 0%, rgba(228, 179, 34, 0.9) 100%) !important; /* Gold - Celebratory success! */
}

.offering-status-bar.status-empty {
    display: none !important;
}

/* Legacy status classes for backward compatibility */
.offering-status-bar.invest {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Active/Live */
}

.offering-status-bar.nowlive {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Active/Live */
}

.offering-status-bar.viewoffering {
    background: rgba(76, 175, 80, 0.9) !important; /* Purple - View details */
}

.offering-status-bar.fullysubscribed {
    background: rgba(255, 152, 0, 0.9) !important; /* Orange - Warning/Full */
}

.offering-status-bar.fullyfunded {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Success */
}

.offering-status-bar.successful {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Success */
}

.offering-status-bar.acquisition {
    background: rgba(255, 193, 7, 0.9) !important; /* Yellow - In progress */
}

.offering-status-bar.renovation {
    background: rgba(255, 152, 0, 0.9) !important; /* Orange - Active work */
}

.offering-status-bar.stabilization {
    background: rgba(158, 158, 158, 0.9) !important; /* Gray - Stabilizing */
}

.offering-status-bar.cashflow {
    background: rgba(76, 175, 80, 0.9) !important; /* Green - Positive cash flow */
}

.offering-status-bar.sold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(255, 193, 7, 0.9) 100%) !important; /* Gold - Celebratory success! */
}

/* Legacy status classes for backward compatibility */
.offering-status-bar.open {
    background: rgba(76, 175, 80, 0.9) !important;
}

.offering-status-bar.closed {
    background: rgba(244, 67, 54, 0.9) !important;
}

.offering-status-bar.funding {
    background: rgba(255, 152, 0, 0.9) !important;
}

.offering-status-bar.coming-soon {
    background: rgba(156, 39, 176, 0.9) !important;
}

/* Content Sections */
.offering-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important; /* Reduced gap to fit more content */
    height: 100% !important;
    padding-top: 2rem !important; /* Increased to prevent overlap */
    overflow: hidden !important; /* Prevent content overflow */
    min-height: 0 !important; /* Allow content to shrink */
}

/* Container for the tile to handle positioning */
.offering-tile-container {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important; /* Ensure no margins */
    padding: 0 !important; /* Ensure no padding */
}

/* Ensure Bootstrap column has no default margins affecting our tiles */
.col-lg-4 .offering-tile-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the expand button doesn't interfere with tile content */
.offering-tile-inner {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%) !important;
    padding: 2rem !important;
    padding-top: 4rem !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.offering-header {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* Reduced margin */
    flex-shrink: 0 !important;
}

.offering-title {
    color: white !important;
    text-align: center;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.offering-description {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem !important; /* Slightly smaller font */
    line-height: 1.4 !important; /* Tighter line height */
    margin: 0 0 0.75rem 0 !important; /* Reduced margin */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Style HTML elements within tile descriptions */
.offering-description h1,
.offering-description h2,
.offering-description h3,
.offering-description h4,
.offering-description h5,
.offering-description h6 {
    color: white !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.offering-description h1 { font-size: 1.1rem !important; }
.offering-description h2 { font-size: 1rem !important; }
.offering-description h3 { font-size: 0.95rem !important; }
.offering-description h4 { font-size: 0.9rem !important; }
.offering-description h5 { font-size: 0.85rem !important; }
.offering-description h6 { font-size: 0.8rem !important; }

.offering-description p {
    margin: 0.25rem 0 !important;
}

.offering-description ul,
.offering-description ol {
    margin: 0.25rem 0 !important;
    padding-left: 1rem !important;
}

.offering-description li {
    margin: 0.1rem 0 !important;
}

.offering-description strong,
.offering-description b {
    font-weight: 600 !important;
    color: white !important;
}

.offering-description em,
.offering-description i {
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Specifications */
.offering-specs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important; /* Reduced gap */
    margin: 0.75rem 0 !important; /* Reduced margin */
    flex-shrink: 0 !important;
}

.spec-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.spec-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.75rem !important; /* Smaller font */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.spec-value {
    color: white !important;
    font-size: 0.95rem !important; /* Slightly smaller */
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Special Content for REIT */
.offering-type-reit {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 1rem !important; /* Even more compact */
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
    margin-bottom: 0.75rem !important;
}

.reit-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important; /* Tighter spacing */
    margin-bottom: 0 !important;
}

.reit-metric {
    text-align: center !important;
}

.reit-metric-value {
    display: block !important;
    color: var(--c1-link) !important;
    font-size: 1rem !important; /* Smaller for compact layout */
    font-weight: 700 !important;
    margin-bottom: 0.2rem !important;
}

.reit-metric-label {
    display: block !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.65rem !important; /* Smaller font */
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
}

/* Special Content for AMOF */
.offering-type-amof {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 1rem !important; /* More compact */
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 0.75rem !important;
}

.amof-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important; /* Tighter spacing */
    margin-bottom: 0 !important;
}

.amof-metric {
    text-align: center !important;
}

.amof-metric-value {
    display: block !important;
    color: var(--c1-link) !important;
    font-size: 1rem !important; /* Smaller for compact layout */
    font-weight: 700 !important;
    margin-bottom: 0.2rem !important;
}

.amof-metric-label {
    display: block !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.65rem !important; /* Smaller font */
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
}

/* Legacy AMOF classes for backward compatibility */
.amof-highlight {
    color: var(--c1-link) !important;
    font-size: 1.4rem !important; /* Smaller for compact layout */
    font-weight: 700 !important;
    margin-bottom: 0.2rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.amof-highlight-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.65rem !important; /* Smaller font */
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 1rem !important; /* Reduced margin */
    line-height: 1.2 !important;
}

/* Expand Button */
.offering-expand-btn {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--c1-link) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    overflow: hidden !important; /* Added to prevent content overflow */
    text-overflow: ellipsis !important; /* Added to handle text overflow */
    white-space: nowrap !important; /* Added to prevent text wrapping */
    transition: all 0.3s ease !important;
    z-index: 100 !important; /* SECOND: Ensure it's above everything */
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto !important; /* Ensure it's clickable */
}

.offering-expand-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.offering-expand-btn i {
    font-size: 1.1rem !important;
    color: var(--c1-link) !important;
}

/* Hide any text content within the button - only show the icon */
.offering-expand-btn > *:not(i) {
    display: none !important;
}

.offering-expand-btn::before,
.offering-expand-btn::after {
    display: none !important;
}

/* Expand Modal */
.offering-expand-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 1001 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.offering-expand-modal.active {
    display: flex !important;
    opacity: 1 !important;
}

/* Ensure modal is visible when active */
.offering-expand-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hidden description divs for storing full HTML content */
.offering-description-hidden {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Modal Description Styling */
.offering-expand-description {
    padding: 1.5rem !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

.offering-expand-description p {
    margin-bottom: 1rem !important;
}

.offering-expand-description p:last-child {
    margin-bottom: 0 !important;
}

.offering-expand-description h1,
.offering-expand-description h2,
.offering-expand-description h3,
.offering-expand-description h4,
.offering-expand-description h5,
.offering-expand-description h6 {
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    color: var(--c1-link) !important;
    font-weight: 600 !important;
}

.offering-expand-description ul,
.offering-expand-description ol {
    margin: 1rem 0 !important;
    padding-left: 1.5rem !important;
}

.offering-expand-description li {
    margin-bottom: 0.5rem !important;
}

.offering-expand-description strong,
.offering-expand-description b {
    font-weight: 600 !important;
    color: var(--c1-link) !important;
}

.offering-expand-description em,
.offering-expand-description i {
    font-style: italic !important;
    color: #666 !important;
}

.offering-expand-description .no-description {
    color: #999 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 2rem !important;
}

.offering-expand-modal:not(.active) {
    visibility: hidden !important;
}

.offering-expand-content {
    background: white !important;
    border-radius: 20px 20px 20px 20px !important;
    max-width: 800px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    transform: scale(0.8) translateY(20px) !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.offering-expand-modal.active .offering-expand-content {
    transform: scale(1) translateY(0) !important;
}

.offering-expand-header {
    background: linear-gradient(135deg, var(--c1-link) 0%, var(--c2-link) 100%) !important;
    color: white !important;
    border-radius: 20px 20px 0 0 !important;
    position: relative !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* Enhanced modal header with background image */
.offering-expand-header[style*="background-image"] {
    background: none !important;
    position: relative !important;
}

.offering-expand-header[style*="background-image"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 1 !important;
}

.offering-expand-header[style*="background-image"] > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Modal status bar */
.modal-status-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.75rem 1.5rem !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    text-align: center !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 3 !important;
}

.modal-status-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Modal status bar colors - matching tile status colors */
.modal-status-bar.status-invest {
    background: rgba(33, 150, 243, 0.9) !important;
}

.modal-status-bar.status-now-live {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.status-view-offering {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.status-fully-subscribed {
    background: rgba(255, 152, 0, 0.9) !important;
}

.modal-status-bar.status-fully-funded {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.status-successful {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.status-acquisition {
    background: rgba(255, 193, 7, 0.9) !important;
}

.modal-status-bar.status-renovation {
    background: rgba(255, 152, 0, 0.9) !important;
}

.modal-status-bar.status-stabilization {
    background: rgba(158, 158, 158, 0.9) !important;
}

.modal-status-bar.status-cash-flow {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.status-sold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(255, 193, 7, 0.9) 100%) !important;
}

/* Legacy status classes for backward compatibility */
.modal-status-bar.invest {
    background: rgba(33, 150, 243, 0.9) !important;
}

.modal-status-bar.nowlive {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.viewoffering {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.fullysubscribed {
    background: rgba(255, 152, 0, 0.9) !important;
}

.modal-status-bar.fullyfunded {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.successful {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.acquisition {
    background: rgba(255, 193, 7, 0.9) !important;
}

.modal-status-bar.renovation {
    background: rgba(255, 152, 0, 0.9) !important;
}

.modal-status-bar.stabilization {
    background: rgba(158, 158, 158, 0.9) !important;
}

.modal-status-bar.cashflow {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.sold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(255, 193, 7, 0.9) 100%) !important;
}

.modal-status-bar.open {
    background: rgba(76, 175, 80, 0.9) !important;
}

.modal-status-bar.closed {
    background: rgba(244, 67, 54, 0.9) !important;
}

.modal-status-bar.funding {
    background: rgba(255, 152, 0, 0.9) !important;
}

.modal-status-bar.coming-soon {
    background: rgba(156, 39, 176, 0.9) !important;
}

/* Modal Progress Section */
.offering-expand-progress {
    margin: 2rem 0 !important;
    padding: 1.5rem !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
}

.progress-section-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin: 0 0 1rem 0 !important;
    text-align: center !important;
}

.modal-progress-bar {
    margin-bottom: 1.5rem !important;
}

.modal-progress-container {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 25px !important;
    height: 45px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 0.5rem !important;
}

.modal-progress-fill {
    height: 100% !important;
    border-radius: 25px !important;
    transition: width 0.8s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(90deg, rgba(var(--c1-link), 1) 0%, rgba(var(--c2-link), 1) 100%) !important;
    overflow: hidden !important;
}

.modal-progress-fill::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 30% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%) !important;
    border-radius: 25px 25px 0 0 !important;
    z-index: 1 !important;
}

.modal-progress-percentage {
    color: white !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    z-index: 2 !important;
    position: relative !important;
}

.modal-progress-label {
    text-align: center !important;
    font-size: 0.9rem !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

.modal-investor-info {
    text-align: center !important;
    padding-top: 1rem !important;
    border-top: 1px solid #dee2e6 !important;
}

.modal-investor-count {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.investor-number {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--c1-link) !important;
}

.investor-label {
    font-size: 0.9rem !important;
    color: #6c757d !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

/* Modal Details Section */
.offering-expand-details {
    margin: 2rem 0 !important;
    padding: 1.5rem !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
}

.details-section-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin: 0 0 1rem 0 !important;
    text-align: center !important;
}

.details-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
}

.detail-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
    background: white !important;
    border-radius: 8px !important;
    border: 1px solid #e9ecef !important;
    text-align: center !important;
}

.detail-label {
    font-size: 0.8rem !important;
    color: #6c757d !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

.detail-value {
    font-size: 1rem !important;
    color: #495057 !important;
    font-weight: 600 !important;
}

.status-highlight {
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Status highlight colors matching the status bar colors */
.status-highlight.status-invest {
    background: rgba(33, 150, 243, 0.9) !important;
}

.status-highlight.status-now-live {
    background: rgba(76, 175, 80, 0.9) !important;
}

.status-highlight.status-view-offering {
    background: rgba(76, 175, 80, 0.9) !important;
}

.status-highlight.status-fully-subscribed {
    background: rgba(255, 152, 0, 0.9) !important;
}

.status-highlight.status-fully-funded {
    background: rgba(76, 175, 80, 0.9) !important;
}

.status-highlight.status-successful {
    background: rgba(76, 175, 80, 0.9) !important;
}

.status-highlight.status-acquisition {
    background: rgba(255, 193, 7, 0.9) !important;
}

.status-highlight.status-renovation {
    background: rgba(255, 152, 0, 0.9) !important;
}

.status-highlight.status-stabilization {
    background: rgba(158, 158, 158, 0.9) !important;
}

.status-highlight.status-cash-flow {
    background: rgba(76, 175, 80, 0.9) !important;
}

.status-highlight.status-sold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(255, 193, 7, 0.9) 100%) !important;
}

.offering-expand-close {
    position: absolute !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.offering-expand-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) !important;
}

.offering-expand-close i {
    font-size: 1.2rem !important;
}

.offering-expand-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem 0 !important;
    text-align: center !important;
}

.offering-expand-subtitle {
    font-size: 1.1rem !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    padding: 2rem;
}

.offering-expand-body {
    padding: 0rem 2rem 2rem 2rem !important;
}

.offering-expand-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.offering-expand-stat {
    background: #f8f9fa !important;
    padding: 2rem 1rem 1rem 1rem !important;
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
}

.offering-expand-stat-value {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--c1-link) !important;
    margin-bottom: 0.5rem !important;
}

.offering-expand-stat-label {
    font-size: 0.9rem !important;
    color: #6c757d !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

.offering-expand-description {
    color: #495057 !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
    font-size: 1.1rem !important;
}

.offering-expand-actions {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
    margin-top: 2rem !important;
}

.offering-expand-btn-primary {
    background: rgba(var(--c4-link), 1) !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

    .offering-expand-btn-primary:hover {
        background: rgba(var(--c4-link), 1) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        text-decoration: none !important;
        color: white !important;
    }

.offering-expand-btn-secondary {
    background: transparent !important;
    color: rgba(var(--c2-link), 1) !important;
    border: 2px solid var(--c2-link) !important;
    padding: 1rem 2rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

    .offering-expand-btn-secondary:hover {
        background: rgba(var(--c2-link), 1) !important;
        color: white !important;
        transform: translateY(-2px) !important;
    }

/* Progress Thermometer */
.offering-progress {
    margin: 0 !important; /* Remove all margins */
    flex-shrink: 0 !important;
    padding: 0 !important; /* Remove all padding */
    position: absolute !important; /* Position absolutely at bottom */
    bottom: 0 !important; /* Anchor to bottom */
    left: 0 !important; /* Full width */
    right: 0 !important; /* Full width */
    z-index: 5 !important; /* Above tile content but below overlays */
}

.offering-progress:last-child {
    margin-bottom: 0 !important;
}

.thermometer-container {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 0 25px 25px !important; /* Rounded bottom, straight top */
    height: 45px !important; /* Slightly smaller height */
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-bottom: none !important; /* Remove bottom border since it's now the tile's bottom */
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Remove all padding */
}

/* Liquid surface effect */
.thermometer-fill {
    height: 100% !important;
    border-radius: 0px 0px 0px 25px !important; /* Rounded bottom, straight top */
    transition: width 0.8s ease, background 0.8s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Default color - will be overridden by data attributes */
    background: linear-gradient(90deg, #44aa44 0%, #66cc66 100%) !important;
    overflow: hidden !important;
}

/* Liquid surface effect */
.thermometer-fill::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 30% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%) !important;
    /* border-radius: 25px 25px 0 0 !important; */
    z-index: 1 !important;
}

/* Liquid bubbles */
.thermometer-fill::after {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    top: 20% !important;
    left: 15% !important;
    animation: bubbleFloat 6s ease-in-out infinite !important;
    z-index: 2 !important;
}

/* Additional bubble elements */
.thermometer-fill .bubble {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    z-index: 2 !important;
}

.thermometer-fill .bubble:nth-child(1) {
    width: 6px !important;
    height: 6px !important;
    top: 30% !important;
    right: 20% !important;
    animation: bubbleFloat 5s ease-in-out infinite 1s !important;
}

.thermometer-fill .bubble:nth-child(2) {
    width: 4px !important;
    height: 4px !important;
    top: 60% !important;
    left: 25% !important;
    animation: bubbleFloat 7s ease-in-out infinite 2s !important;
}

.thermometer-fill .bubble:nth-child(3) {
    width: 5px !important;
    height: 5px !important;
    top: 40% !important;
    right: 30% !important;
    animation: bubbleFloat 4s ease-in-out infinite 0.5s !important;
}

/* Hide bubbles for closed offerings, REITs, and AMOFs */
.offering-tile[data-offering-type="Regulation A"] .thermometer-fill::after,
.offering-tile[data-amof="true"] .thermometer-fill::after,
.offering-tile[data-offering-type="Regulation A"] .thermometer-fill .bubble,
.offering-tile[data-amof="true"] .thermometer-fill .bubble {
    display: none !important;
}

/* Hide bubbles for closed offerings (status not INVEST, VIEW OFFERING, or NOW LIVE) */
.offering-tile:not([data-status="INVEST"]):not([data-status="VIEW OFFERING"]):not([data-status="NOW LIVE"]) .thermometer-fill::after,
.offering-tile:not([data-status="INVEST"]):not([data-status="VIEW OFFERING"]):not([data-status="NOW LIVE"]) .thermometer-fill .bubble {
    display: none !important;
}

/* Dynamic colors based on progress using data attributes */
.thermometer-fill[data-progress="0"],
.thermometer-fill[data-progress="1"],
.thermometer-fill[data-progress="2"],
.thermometer-fill[data-progress="3"],
.thermometer-fill[data-progress="4"],
.thermometer-fill[data-progress="5"],
.thermometer-fill[data-progress="6"],
.thermometer-fill[data-progress="7"],
.thermometer-fill[data-progress="8"],
.thermometer-fill[data-progress="9"],
.thermometer-fill[data-progress="10"] {
    background: linear-gradient(90deg, #ff4444 0%, #ff6666 50%, #ff8888 100%) !important;
    background-size: 200% 100% !important;
}

.thermometer-fill[data-progress="11"],
.thermometer-fill[data-progress="12"],
.thermometer-fill[data-progress="13"],
.thermometer-fill[data-progress="14"],
.thermometer-fill[data-progress="15"],
.thermometer-fill[data-progress="16"],
.thermometer-fill[data-progress="17"],
.thermometer-fill[data-progress="18"],
.thermometer-fill[data-progress="19"],
.thermometer-fill[data-progress="20"],
.thermometer-fill[data-progress="21"],
.thermometer-fill[data-progress="22"],
.thermometer-fill[data-progress="23"],
.thermometer-fill[data-progress="24"],
.thermometer-fill[data-progress="25"],
.thermometer-fill[data-progress="26"],
.thermometer-fill[data-progress="27"],
.thermometer-fill[data-progress="28"],
.thermometer-fill[data-progress="29"],
.thermometer-fill[data-progress="30"],
.thermometer-fill[data-progress="31"],
.thermometer-fill[data-progress="32"],
.thermometer-fill[data-progress="33"],
.thermometer-fill[data-progress="34"],
.thermometer-fill[data-progress="35"],
.thermometer-fill[data-progress="36"],
.thermometer-fill[data-progress="37"],
.thermometer-fill[data-progress="38"],
.thermometer-fill[data-progress="39"],
.thermometer-fill[data-progress="40"] {
    background: linear-gradient(90deg, #ff8800 0%, #ffaa00 50%, #ffcc00 100%) !important;
    background-size: 200% 100% !important;
}

.thermometer-fill[data-progress="41"],
.thermometer-fill[data-progress="42"],
.thermometer-fill[data-progress="43"],
.thermometer-fill[data-progress="44"],
.thermometer-fill[data-progress="45"],
.thermometer-fill[data-progress="46"],
.thermometer-fill[data-progress="47"],
.thermometer-fill[data-progress="48"],
.thermometer-fill[data-progress="49"],
.thermometer-fill[data-progress="50"],
.thermometer-fill[data-progress="51"],
.thermometer-fill[data-progress="52"],
.thermometer-fill[data-progress="53"],
.thermometer-fill[data-progress="54"],
.thermometer-fill[data-progress="55"],
.thermometer-fill[data-progress="56"],
.thermometer-fill[data-progress="57"],
.thermometer-fill[data-progress="58"],
.thermometer-fill[data-progress="59"],
.thermometer-fill[data-progress="60"],
.thermometer-fill[data-progress="61"],
.thermometer-fill[data-progress="62"],
.thermometer-fill[data-progress="63"],
.thermometer-fill[data-progress="64"],
.thermometer-fill[data-progress="65"],
.thermometer-fill[data-progress="66"],
.thermometer-fill[data-progress="67"],
.thermometer-fill[data-progress="68"],
.thermometer-fill[data-progress="69"],
.thermometer-fill[data-progress="70"],
.thermometer-fill[data-progress="71"],
.thermometer-fill[data-progress="72"],
.thermometer-fill[data-progress="73"],
.thermometer-fill[data-progress="74"],
.thermometer-fill[data-progress="75"],
.thermometer-fill[data-progress="76"],
.thermometer-fill[data-progress="77"],
.thermometer-fill[data-progress="78"],
.thermometer-fill[data-progress="79"],
.thermometer-fill[data-progress="80"],
.thermometer-fill[data-progress="81"],
.thermometer-fill[data-progress="82"],
.thermometer-fill[data-progress="83"],
.thermometer-fill[data-progress="84"],
.thermometer-fill[data-progress="85"],
.thermometer-fill[data-progress="86"],
.thermometer-fill[data-progress="87"],
.thermometer-fill[data-progress="88"],
.thermometer-fill[data-progress="89"],
.thermometer-fill[data-progress="90"],
.thermometer-fill[data-progress="91"],
.thermometer-fill[data-progress="92"],
.thermometer-fill[data-progress="93"],
.thermometer-fill[data-progress="94"],
.thermometer-fill[data-progress="95"],
.thermometer-fill[data-progress="96"],
.thermometer-fill[data-progress="97"],
.thermometer-fill[data-progress="98"],
.thermometer-fill[data-progress="99"] {
    background: linear-gradient(90deg, #44aa44 0%, #66cc66 50%, #88dd88 100%) !important;
    background-size: 200% 100% !important;
}

.thermometer-fill[data-progress="100"] {
    background: linear-gradient(90deg, #4CAF50 0%, #45a049 50%, #66bb6a 100%) !important;
    background-size: 200% 100% !important;
}

/* Enhanced liquid sloshing animation */
@keyframes liquidSlosh {
    0%, 100% {
        transform: translateX(0) scaleY(1) rotate(0deg);
        border-radius: 25px 25px 25px 25px;
        filter: brightness(1) contrast(1);
    }
    10% {
        transform: translateX(1px) scaleY(0.98) rotate(0.5deg);
        border-radius: 25px 22px 22px 25px;
        filter: brightness(1.05) contrast(1.1);
    }
    20% {
        transform: translateX(2px) scaleY(0.95) rotate(1deg);
        border-radius: 25px 20px 20px 25px;
        filter: brightness(1.1) contrast(1.2);
    }
    30% {
        transform: translateX(1px) scaleY(0.97) rotate(0.5deg);
        border-radius: 25px 21px 21px 25px;
        filter: brightness(1.05) contrast(1.1);
    }
    40% {
        transform: translateX(0) scaleY(1) rotate(0deg);
        border-radius: 25px 25px 25px 25px;
        filter: brightness(1) contrast(1);
    }
    50% {
        transform: translateX(-1px) scaleY(1.02) rotate(-0.5deg);
        border-radius: 22px 25px 25px 22px;
        filter: brightness(0.95) contrast(0.9);
    }
    60% {
        transform: translateX(-2px) scaleY(1.05) rotate(-1deg);
        border-radius: 20px 25px 25px 20px;
        filter: brightness(0.9) contrast(0.8);
    }
    70% {
        transform: translateX(-1px) scaleY(1.03) rotate(-0.5deg);
        border-radius: 21px 25px 25px 21px;
        filter: brightness(0.95) contrast(0.9);
    }
    80% {
        transform: translateX(0) scaleY(1.01) rotate(0deg);
        border-radius: 23px 25px 25px 23px;
        filter: brightness(1) contrast(1);
    }
    90% {
        transform: translateX(0.5px) scaleY(0.99) rotate(0.2deg);
        border-radius: 24px 25px 25px 24px;
        filter: brightness(1.02) contrast(1.05);
    }
}

/* Liquid surface ripple effect */
@keyframes liquidSurface {
    0%, 100% {
        transform: translateY(0) scaleX(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-2px) scaleX(1.02);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-1px) scaleX(0.98);
        opacity: 0.2;
    }
    75% {
        transform: translateY(-3px) scaleX(1.01);
        opacity: 0.5;
    }
}

/* Floating bubble animation */
@keyframes bubbleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-8px) translateX(2px) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-15px) translateX(-1px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-10px) translateX(3px) scale(1.2);
        opacity: 0.7;
    }
}

.thermometer-percentage {
    color: white !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    z-index: 1 !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .offering-specs {
        grid-template-columns: 1fr !important;
    }
    
    .reit-metrics {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .amof-metrics {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .offering-tile {
        height: 600px !important; /* Maintain consistent height */
    }
}

@media (max-width: 768px) {
    .offering-tile {
        height: 600px !important; /* Maintain consistent height */
    }
    
    .offering-tile-inner {
        padding: 1.5rem !important;
        padding-top: 3.5rem !important;
    }
    
    .offering-content {
        padding-top: 3.5rem !important;
        gap: 0.75rem !important; /* Even tighter spacing on mobile */
    }
    
    .offering-title {
        font-size: 1.3rem !important;
    }
    
    .offering-description {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .offering-tile-cta {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .reit-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .amof-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .amof-metric-value {
        font-size: 1.3rem !important;
    }
    
    .offering-specs {
        gap: 0.5rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .offering-type-reit,
    .offering-type-amof {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Expand button positioning on mobile */
    .offering-expand-btn {
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: 36px !important; /* Keep consistent size with desktop */
        height: 36px !important; /* Keep consistent size with desktop */
        z-index: 100 !important; /* Keep highest z-index for mobile */
    }
    
    /* Ensure expand button is always visible on mobile */
    .offering-expand-btn,
    .offering-expand-btn::before {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Mobile-specific button styling */
    .offering-expand-btn {
        background: rgba(255, 255, 255, 0.98) !important; /* Slightly more opaque on mobile */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important; /* Stronger shadow for mobile */
    }
    
    /* Modal responsive adjustments */
    .offering-expand-modal {
        padding: 1rem !important;
    }
    
    .offering-expand-content {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }
    
    .offering-expand-header {
        padding: 1.5rem !important;
    }
    
    .offering-expand-title {
        font-size: 1.5rem !important;
    }
    
    .offering-expand-body {
        padding: 1.5rem !important;
    }
    
    .offering-expand-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .offering-expand-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Enhanced modal sections responsive adjustments */
    .offering-expand-progress,
    .offering-expand-details {
        margin: 1.5rem 0 !important;
        padding: 1rem !important;
    }
    
    .details-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .detail-item {
        padding: 0.75rem !important;
    }
    
    .modal-progress-container {
        height: 40px !important;
    }
    
    .modal-progress-percentage {
        font-size: 0.9rem !important;
    }
    
    .investor-number {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .offering-tile {
        height: 600px !important; /* Maintain consistent height */
    }
    
    .offering-tile-inner {
        padding: 1rem !important;
        padding-top: 3rem !important;
    }
    
    .offering-content {
        padding-top: 3rem !important;
        gap: 0.5rem !important; /* Tightest spacing on small mobile */
    }
    
    .offering-title {
        font-size: 1.2rem !important;
    }
    
    .offering-description {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .reit-highlight,
    .amof-metric-value {
        font-size: 1.2rem !important;
    }
    
    .reit-metrics {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .amof-metrics {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .offering-specs {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .offering-type-reit,
    .offering-type-amof {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .thermometer-container {
        height: 40px !important; /* Smaller on mobile */
    }
    
    /* Ensure expand button is visible on small mobile */
    .offering-expand-btn {
        top: 0.5rem !important;
        right: 0.5rem !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 100 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    .offering-expand-btn::before {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .offering-tile-link {
        border: 2px solid var(--c1-link) !important;
    }
    
    .offering-tile-link:hover {
        border-color: var(--c2-link) !important;
    }
    
    .offering-tile-overlay {
        background: rgba(var(--c1-link), 0.3) !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .offering-tile-link,
    .offering-tile,
    .offering-tile-inner,
    .offering-tile-overlay,
    .offering-tile-cta,
    .cta-arrow,
    .thermometer-fill {
        transition: none !important;
    }
    
    .offering-tile-link:hover {
        transform: none !important;
    }
    
    .offering-tile-link:hover .offering-tile-cta {
        transform: none !important;
    }
    
    .offering-tile-link:hover .cta-arrow {
        transform: none !important;
    }
}

/* Focus Styles for Accessibility */
.offering-tile-link:focus-visible {
    outline: 3px solid var(--c1-link) !important;
    outline-offset: 4px !important;
    border-radius: 16px !important;
}

/* Print Styles */
@media print {
    .offering-tile-link {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .offering-tile-overlay {
        display: none !important;
    }
    
    .offering-tile-inner {
        background: white !important;
        color: black !important;
    }
    
    .offering-title,
    .spec-value,
    .reit-highlight,
    .amof-metric-value {
        color: black !important;
    }
    
    .spec-label,
    .reit-metric-label,
    .reit-highlight-label,
    .amof-metric-label {
        color: #666 !important;
    }
}