/* ============================================
   MODERN OFFERS STYLING
   Clean, Responsive Design with Custom Colors
   ============================================ */

:root {
    --offer-primary: #2077ba;
    --offer-secondary: #f9b33b;
    --offer-accent: #2c91ce;
    --offer-light: #ffbe5f;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --text-dark: #333333;
    --text-light: #666666;
    --shadow-light: rgba(32, 119, 186, 0.1);
    --shadow-medium: rgba(32, 119, 186, 0.2);
    --border-radius: 8px;
    --border-radius-small: 6px;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   MODERN OFFER CARDS - DETAILS PAGE
   ============================================ */

.modern-offer-card {
    background: var(--white) !important;
    border-radius: var(--border-radius) !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px var(--shadow-light) !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(32, 119, 186, 0.08) !important;
    transition: var(--transition) !important;
    width: 100% !important;
    max-width: none !important;
}

.modern-offer-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(32, 119, 186, 0.2) !important;
}

/* Offer Header */
.modern-offer-card > div:first-child {
    background: linear-gradient(135deg, var(--offer-primary) 0%, var(--offer-accent) 100%) !important;
    padding: 16px 18px !important;
    position: relative !important;
    overflow: hidden !important;
}

.modern-offer-card > div:first-child::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    opacity: 0.6;
}

.modern-offer-card > div:first-child::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

/* NEW Badge */
.modern-offer-card .offer-new-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: var(--offer-secondary) !important;
    color: var(--white) !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 1px 3px rgba(249, 179, 59, 0.3) !important;
}

/* Offer Title Section */
.modern-offer-header {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.modern-offer-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    backdrop-filter: blur(8px) !important;
    flex-shrink: 0 !important;
}

.modern-offer-icon i {
    color: var(--white) !important;
    font-size: 16px !important;
}

.modern-offer-title {
    color: var(--white) !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    line-height: 1.3 !important;
}

.modern-offer-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 2px 0 0 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Offer Content Area */
.modern-offer-card > div:last-child {
    background: var(--white) !important;
    padding: 16px 18px !important;
    position: relative !important;
}

/* Offer Details Grid */
.offer-details-grid {
    margin: 0 0 14px 0 !important;
    display: flex !important;
    gap: 10px !important;
}

.offer-detail-card {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    flex: 1 !important;
    color: var(--white) !important;
    transition: var(--transition) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.offer-detail-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.offer-detail-card.discount-card {
    background: linear-gradient(135deg, var(--offer-secondary) 0%, var(--offer-light) 100%) !important;
}

.offer-detail-card.date-card {
    background: linear-gradient(135deg, var(--offer-primary) 0%, var(--offer-accent) 100%) !important;
}

.offer-card-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
}

.offer-card-header i {
    font-size: 12px !important;
    margin-right: 6px !important;
    opacity: 0.9 !important;
}

.offer-card-header span {
    font-size: 10px !important;
    opacity: 0.9 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.offer-card-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    line-height: 1.2 !important;
}

/* Description Section */
.modern-offer-description {
    background: var(--light-gray) !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    border-left: 2px solid var(--offer-primary) !important;
    position: relative !important;
}

.modern-offer-description h4 {
    color: var(--text-dark) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.modern-offer-description h4 i {
    color: var(--offer-primary) !important;
    margin-right: 6px !important;
    font-size: 11px !important;
}

.modern-offer-description div {
    color: var(--text-light) !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
}

/* Terms Section */
.modern-offer-terms {
    background: rgba(249, 179, 59, 0.08) !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    border: 1px solid rgba(249, 179, 59, 0.15) !important;
}

.modern-offer-terms h4 {
    color: var(--offer-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.modern-offer-terms h4 i {
    margin-right: 6px !important;
    font-size: 10px !important;
}

.modern-offer-terms div {
    color: var(--text-dark) !important;
    line-height: 1.4 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Book Now Button */
.modern-offer-button {
    background: linear-gradient(135deg, var(--offer-primary) 0%, var(--offer-accent) 100%) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    box-shadow: 0 2px 8px rgba(32, 119, 186, 0.2) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.modern-offer-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(32, 119, 186, 0.3) !important;
    background: linear-gradient(135deg, var(--offer-accent) 0%, var(--offer-primary) 100%) !important;
}

.modern-offer-button i {
    font-size: 11px !important;
}

/* ============================================
   LISTING RESULTS OFFER BADGES
   ============================================ */

.offer_with_img {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 15 !important;
}

.offer-badge {
    background: linear-gradient(135deg, var(--offer-secondary) 0%, var(--offer-light) 100%) !important;
    color: var(--white) !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 3px 8px rgba(249, 179, 59, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
    max-width: calc(100% - 16px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.offer-badge::before {
    content: '🏷️';
    font-size: 9px;
    flex-shrink: 0;
}

.offer-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(249, 179, 59, 0.6);
}

/* Override any existing offer badge styles */
.property_listing .offer_with_img,
.modern-image-container .offer_with_img,
.listing-unit-img-wrapper .offer_with_img {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 15 !important;
}

.property_listing .offer-badge,
.modern-image-container .offer-badge,
.listing-unit-img-wrapper .offer-badge {
    background: linear-gradient(135deg, var(--offer-secondary) 0%, var(--offer-light) 100%) !important;
    color: var(--white) !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 3px 8px rgba(249, 179, 59, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
}

/* Modern Status Badges for Listing */
.modern-status-offer {
    background: linear-gradient(135deg, var(--offer-secondary) 0%, var(--offer-light) 100%) !important;
    color: var(--white) !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 3px 8px rgba(249, 179, 59, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.modern-status-offer i {
    font-size: 10px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
    .modern-offer-card > div:first-child {
        padding: 14px 16px !important;
    }
    
    .modern-offer-card > div:last-child {
        padding: 14px 16px !important;
    }
    
    .offer-details-grid {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .modern-offer-title {
        font-size: 15px !important;
    }
    
    .modern-offer-icon {
        width: 32px !important;
        height: 32px !important;
        margin-right: 10px !important;
    }
    
    .modern-offer-icon i {
        font-size: 14px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .modern-offer-card {
        margin-bottom: 14px !important;
    }
    
    .modern-offer-card > div:first-child {
        padding: 12px 14px !important;
    }
    
    .modern-offer-card > div:last-child {
        padding: 12px 14px !important;
    }
    
    .modern-offer-title {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }
    
    .modern-offer-subtitle {
        font-size: 10px !important;
    }
    
    .modern-offer-icon {
        width: 28px !important;
        height: 28px !important;
        margin-right: 8px !important;
    }
    
    .modern-offer-icon i {
        font-size: 12px !important;
    }
    
    .offer-detail-card {
        padding: 10px 12px !important;
    }
    
    .offer-card-value {
        font-size: 13px !important;
    }
    
    .modern-offer-description,
    .modern-offer-terms {
        padding: 10px 12px !important;
    }
    
    .modern-offer-button {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    .offer-badge {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .offer_with_img {
        top: 6px !important;
        left: 6px !important;
    }
}

/* Ultra Small Mobile */
@media (max-width: 360px) {
    .modern-offer-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    
    .modern-offer-icon {
        margin-right: 0 !important;
        margin-bottom: 6px !important;
    }
    
    .modern-offer-title {
        font-size: 13px !important;
    }
    
    .offer-card-header span {
        font-size: 9px !important;
    }
    
    .offer-card-value {
        font-size: 12px !important;
    }
}

/* ============================================
   OVERRIDE EXISTING STYLES
   ============================================ */

/* Override existing offer card styles with higher specificity */
.collapsible-content .modern-offer-card,
.section-offers .modern-offer-card,
div.modern-offer-card {
    background: var(--white) !important;
    border-radius: var(--border-radius) !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(32, 119, 186, 0.1) !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(32, 119, 186, 0.15) !important;
    transition: var(--transition) !important;
    width: 100% !important;
    max-width: none !important;
}

/* Override existing offer detail card gradients */
.modern-offer-card .offer-detail-card.discount-card {
    background: linear-gradient(135deg, var(--offer-secondary) 0%, var(--offer-light) 100%) !important;
}

.modern-offer-card .offer-detail-card.date-card {
    background: linear-gradient(135deg, var(--offer-primary) 0%, var(--offer-accent) 100%) !important;
}

/* Ensure proper spacing override */
.modern-offer-card > div:first-child,
.modern-offer-card > div:last-child {
    padding: 16px 18px !important;
}

/* Override any conflicting Bootstrap or theme styles */
.modern-offer-card .row.offer-details-grid {
    margin: 0 0 14px 0 !important;
    display: flex !important;
    gap: 10px !important;
}

/* ============================================
   TEXT OVERFLOW AND TRUNCATION FIXES
   ============================================ */

.modern-offer-title,
.offer-card-value {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

.modern-offer-description div,
.modern-offer-terms div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
}

/* Ensure text doesn't overflow on small screens */
@media (max-width: 480px) {
    .modern-offer-title {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    .offer-card-value {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}