/**
 * CONTENT SECTIONS COMPONENT CSS - COMPACT REDESIGN
 * 
 * Modern, modular styling for booking page content sections:
 * - Features/About This Place
 * - House Rules
 * - Cancellation Policy
 * 
 * Uses glassmorphism design for modern aesthetic
 * 
 * Version: 2.0 - Compact Design
 * Created: 2025-01-27
 * Updated: 2025-01-28 - More compact spacing
 * Dependencies: glassmorphism.css, booking-base.css, booking-theme.css
 */

/* ==========================================================================
   FEATURES SECTION - COMPACT
   ========================================================================== */

.features-section {
    margin-bottom: var(--booking-space-lg, 20px); /* Reduced from xl */
}

.features-section__header {
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm, 12px);
    margin-bottom: var(--booking-space-md, 16px); /* Reduced from lg */
}

.features-section__title {
    font-size: var(--booking-text-xl, 1.25rem); /* Reduced from 2xl */
    font-weight: var(--booking-font-bold, 700);
    color: var(--booking-text-primary, #111827);
    font-family: var(--font-family-heading, 'Playfair Display', serif);
}

[data-theme="dark"] .features-section__title {
    color: var(--booking-text-primary, #f9fafb);
}

.features-section__icon {
    font-size: var(--booking-text-xl, 1.25rem);
    color: var(--booking-primary, #3b82f6);
}

[data-theme="dark"] .features-section__icon {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Much more compact */
    gap: var(--booking-space-sm, 10px); /* Reduced gap */
}

/* Responsive: 2 per row on mobile, 3-4 on tablet, 4+ on desktop */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 per row on mobile */
        gap: var(--booking-space-xs, 8px) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 per row on tablet */
        gap: var(--booking-space-sm, 10px);
    }
}

@media (min-width: 1025px) {
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Auto-fit on desktop */
        gap: var(--booking-space-sm, 12px);
    }
}

/* Feature Card - Glassmorphism - Ultra Compact */
.feature-card {
    /* Glassmorphism styling */
    background: var(--glass-bg-light, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(var(--glass-blur-base, 20px));
    -webkit-backdrop-filter: blur(var(--glass-blur-base, 20px));
    border: 1px solid var(--glass-border-light, rgba(255, 255, 255, 0.3));
    box-shadow: var(--glass-shadow-light, 0 4px 16px rgba(0, 0, 0, 0.08));
    border-radius: var(--booking-radius-md, 8px);
    padding: var(--booking-space-xs, 8px) var(--booking-space-sm, 10px); /* More compact padding */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center; /* Center align for compact look */
    gap: var(--booking-space-xs, 6px); /* Reduced gap */
    min-height: auto; /* Remove fixed min-height */
}

[data-theme="dark"] .feature-card {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* Match property detail shadows */
}

.feature-card:hover {
    transform: translateY(-2px); /* Reduced from -4px */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .feature-card:hover {
    background: var(--color-background-secondary, #1f2937) !important;
    border-color: var(--accent-color, #d4af37) !important; /* Gold border on hover */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important; /* Match property detail hover shadow */
}

.feature-card__icon {
    flex-shrink: 0;
    width: 28px; /* More compact */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--booking-primary-bg, #eff6ff);
    border-radius: var(--booking-radius-sm, 6px);
    /* Explicit icon color - ensure visibility */
    color: #3b82f6 !important; /* Blue icon - visible in light mode */
    font-size: 0.875rem; /* More compact */
}

[data-theme="dark"] .feature-card__icon {
    background: rgba(212, 175, 55, 0.2) !important; /* Gold background like property detail */
    color: var(--accent-color, #d4af37) !important; /* Gold icon */
}

.feature-card__content {
    flex: 1;
}

.feature-card__title {
    font-size: var(--booking-text-xs, 0.6875rem); /* More compact */
    font-weight: var(--booking-font-semibold, 600);
    /* Darker text in light mode for visibility */
    color: #111827 !important; /* Dark gray - visible in light mode */
    margin-bottom: 0; /* No margin for compact look */
    line-height: 1.2;
}

[data-theme="dark"] .feature-card__title {
    /* Lighter text in dark mode for visibility */
    color: #f9fafb !important; /* Light gray - visible in dark mode */
}

.feature-card__description {
    font-size: var(--booking-text-xs, 0.6875rem); /* Smaller */
    /* Darker text in light mode */
    color: #4b5563 !important; /* Medium gray - visible in light mode */
    line-height: 1.3; /* Tighter */
    margin: 0;
}

[data-theme="dark"] .feature-card__description {
    /* Lighter text in dark mode */
    color: #d1d5db !important; /* Light gray - visible in dark mode */
}

/* ==========================================================================
   HOUSE RULES SECTION - COMPACT
   ========================================================================== */

.house-rules-section {
    margin-bottom: var(--booking-space-lg, 20px);
}

.house-rules-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--booking-space-sm, 12px);
    margin-bottom: var(--booking-space-md, 16px);
}

.house-rules-section__title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm, 12px);
}

.house-rules-section__title {
    font-size: var(--booking-text-xl, 1.25rem); /* Reduced */
    font-weight: var(--booking-font-bold, 700);
    color: var(--booking-text-primary, #111827);
    font-family: var(--font-family-heading, 'Playfair Display', serif);
}

[data-theme="dark"] .house-rules-section__title {
    color: var(--booking-text-primary, #f9fafb);
}

/* House Rules Accordion */
.house-rules-accordion {
    /* Glassmorphism container */
    background: var(--glass-bg-light, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(var(--glass-blur-base, 20px));
    -webkit-backdrop-filter: blur(var(--glass-blur-base, 20px));
    border: 1px solid var(--glass-border-light, rgba(255, 255, 255, 0.3));
    box-shadow: var(--glass-shadow-light, 0 8px 32px rgba(0, 0, 0, 0.1));
    border-radius: var(--booking-radius-lg, 12px);
    padding: var(--booking-space-md, 16px); /* Reduced from lg */
    overflow: hidden;
}

[data-theme="dark"] .house-rules-accordion {
    background: var(--glass-bg-dark, rgba(31, 41, 55, 0.7));
    border-color: var(--glass-border-dark, rgba(255, 255, 255, 0.1));
    box-shadow: var(--glass-shadow-dark, 0 8px 32px rgba(0, 0, 0, 0.3));
}

.house-rules-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--booking-space-xs, 8px); /* Reduced */
}

/* Responsive: Single column on mobile */
@media (max-width: 767px) {
    .house-rules-list {
        grid-template-columns: 1fr;
    }
}

.rule-item {
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs, 6px); /* Reduced */
    padding: var(--booking-space-xs, 6px) var(--booking-space-sm, 10px); /* Compact */
    border-radius: var(--booking-radius-sm, 6px);
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    font-size: var(--booking-text-xs, 0.75rem); /* Smaller */
}

[data-theme="dark"] .rule-item {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
}

.rule-item:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateX(4px);
}

[data-theme="dark"] .rule-item:hover {
    background: var(--color-background-secondary, #1f2937) !important;
    border-color: var(--accent-color, #d4af37) !important; /* Gold border on hover */
}

.rule-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--booking-success-bg, #d1fae5);
    border-radius: 50%;
    color: var(--booking-success, #10b981);
    font-size: 0.75rem;
}

[data-theme="dark"] .rule-item__icon {
    background: rgba(212, 175, 55, 0.2) !important; /* Gold background like property detail */
    color: var(--accent-color, #d4af37) !important; /* Gold icon */
}

.rule-item__text {
    flex: 1;
    font-size: var(--booking-text-sm, 0.875rem);
    color: var(--booking-text-primary, #111827);
    font-weight: var(--booking-font-medium, 500);
    line-height: 1.4;
}

[data-theme="dark"] .rule-item__text {
    color: var(--color-text-primary, #f9fafb) !important;
}

/* Rule Badge (for rule types) */
.rule-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--booking-space-xs, 4px);
    padding: var(--booking-space-xs, 4px) var(--booking-space-sm, 12px);
    border-radius: var(--booking-radius-full, 9999px);
    font-size: var(--booking-text-xs, 0.75rem);
    font-weight: var(--booking-font-semibold, 600);
    background: var(--booking-warning-bg, #fed7aa);
    color: var(--booking-warning, #f59e0b);
}

.rule-badge--required {
    background: var(--booking-error-bg, #fee2e2);
    color: var(--booking-error, #ef4444);
}

.rule-badge--optional {
    background: var(--booking-info-bg, #dbeafe);
    color: var(--booking-info, #3b82f6);
}

[data-theme="dark"] .rule-badge--optional {
    background: rgba(212, 175, 55, 0.2) !important; /* Gold background */
    color: var(--accent-color, #d4af37) !important; /* Gold text */
}

/* ==========================================================================
   CANCELLATION POLICY SECTION - COMPACT
   ========================================================================== */

.cancellation-policy-section {
    margin-bottom: var(--booking-space-lg, 20px);
}

.cancellation-policy-section__header {
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm, 12px);
    margin-bottom: var(--booking-space-md, 16px);
}

.cancellation-policy-section__title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm, 12px);
}

.cancellation-policy-section__title-wrapper i {
    color: var(--booking-primary, #3b82f6);
    font-size: var(--booking-text-xl, 1.25rem);
}

[data-theme="dark"] .cancellation-policy-section__title-wrapper i {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

.cancellation-policy-section__title {
    font-size: var(--booking-text-xl, 1.25rem); /* Reduced from 2xl */
    font-weight: var(--booking-font-bold, 700);
    color: var(--booking-text-primary, #111827);
    font-family: var(--font-family-heading, 'Playfair Display', serif);
    margin: 0;
}

[data-theme="dark"] .cancellation-policy-section__title {
    color: var(--color-text-primary, #f9fafb) !important;
}

/* Policy Card - Glassmorphism with colored accent */
.cancellation-policy-card {
    /* Glassmorphism styling */
    background: var(--glass-bg-light, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(var(--glass-blur-base, 20px));
    -webkit-backdrop-filter: blur(var(--glass-blur-base, 20px));
    border: 2px solid var(--glass-border-light, rgba(255, 255, 255, 0.3));
    border-left: 4px solid var(--booking-primary, #3b82f6); /* Colored accent */
    box-shadow: var(--glass-shadow-light, 0 8px 32px rgba(0, 0, 0, 0.1));
    border-radius: var(--booking-radius-lg, 12px);
    padding: var(--booking-space-md, 16px); /* Reduced from xl */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .cancellation-policy-card {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail cards */
    border-color: var(--color-border, #374151) !important;
    border-left-color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* Match property detail shadows */
}

.cancellation-policy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .cancellation-policy-card:hover {
    background: var(--color-background-secondary, #1f2937) !important;
    border-color: var(--accent-color, #d4af37) !important; /* Gold border on hover */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important; /* Match property detail hover shadow */
}

/* Policy Type Badge */
.policy-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--booking-space-xs, 4px);
    padding: var(--booking-space-sm, 12px) var(--booking-space-lg, 20px);
    border-radius: var(--booking-radius-lg, 12px);
    font-size: var(--booking-text-base, 1rem);
    font-weight: var(--booking-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--booking-space-md, 16px);
}

.policy-type-badge--flexible {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.policy-type-badge--moderate {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[data-theme="dark"] .policy-type-badge--moderate {
    background: linear-gradient(135deg, var(--accent-color-dark, #b49225) 0%, var(--accent-color, #d4af37) 100%) !important; /* Gold gradient */
    color: var(--color-text-primary, #f9fafb) !important;
    border: 1px solid var(--accent-color, #d4af37) !important;
}

.policy-type-badge--strict {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[data-theme="dark"] .policy-type-badge--strict {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #fbbf24 !important;
}

.policy-type-badge--non-refundable {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[data-theme="dark"] .policy-type-badge--non-refundable {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
}

/* Policy Timeline */
.policy-timeline {
    margin: var(--booking-space-md, 16px) 0; /* Reduced */
}

.policy-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: var(--booking-space-sm, 12px); /* Reduced */
    padding: var(--booking-space-md, 16px) 0;
    border-bottom: 1px solid var(--booking-border, #e5e7eb);
}

[data-theme="dark"] .policy-timeline__item {
    border-bottom-color: var(--color-border, #374151) !important;
}

.policy-timeline__item:last-child {
    border-bottom: none;
}

.policy-timeline__period {
    flex: 0 0 120px; /* Reduced */
    font-size: var(--booking-text-xs, 0.75rem); /* Smaller */
    font-weight: var(--booking-font-semibold, 600);
    color: var(--booking-text-primary, #111827);
}

[data-theme="dark"] .policy-timeline__period {
    color: var(--color-text-primary, #f9fafb) !important;
}

.policy-timeline__refund {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm, 12px);
}

.policy-timeline__refund-percentage {
    font-size: var(--booking-text-xl, 1.25rem);
    font-weight: var(--booking-font-bold, 700);
    color: var(--booking-success, #10b981);
}

[data-theme="dark"] .policy-timeline__refund-percentage {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

.policy-timeline__refund-text {
    font-size: var(--booking-text-sm, 0.875rem);
    color: var(--booking-text-secondary, #4b5563);
}

[data-theme="dark"] .policy-timeline__refund-text {
    color: var(--color-text-secondary, #d1d5db) !important;
}

/* Policy Description */
.policy-description {
    font-size: var(--booking-text-base, 1rem);
    color: var(--booking-text-secondary, #6b7280);
    line-height: 1.6;
    margin-bottom: var(--booking-space-md, 16px);
    padding: 0;
}

[data-theme="dark"] .policy-description {
    color: var(--color-text-secondary, #d1d5db) !important;
}

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

/* Tablet */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .features-section__title,
    .house-rules-section__title,
    .cancellation-policy-section__title {
        font-size: var(--booking-text-xl, 1.25rem);
    }
    
    /* 2 columns on mobile as requested */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 per row on mobile */
        gap: var(--booking-space-xs, 8px) !important; /* More compact gap */
    }
    
    .feature-card {
        padding: var(--booking-space-xs, 6px) var(--booking-space-sm, 8px) !important; /* Ultra compact */
        flex-direction: row; /* Horizontal layout */
        align-items: center;
        text-align: left;
        min-height: auto !important; /* Remove fixed height */
    }
    
    .feature-card__icon {
        width: 24px !important; /* More compact */
        height: 24px !important;
        font-size: 0.8125rem !important; /* More compact */
        margin-bottom: 0 !important;
        /* Ensure icon is visible */
        color: #3b82f6 !important; /* Blue in light mode */
    }
    
    [data-theme="dark"] .feature-card__icon {
        background: rgba(212, 175, 55, 0.2) !important; /* Gold background */
        color: var(--accent-color, #d4af37) !important; /* Gold icon like property detail */
    }
    
    .feature-card__title {
        font-size: var(--booking-text-xs, 0.625rem) !important; /* More compact */
        margin-bottom: 0 !important;
        /* Ensure text is visible */
        color: #111827 !important; /* Dark in light mode */
        line-height: 1.2;
    }
    
    [data-theme="dark"] .feature-card__title {
        color: #f9fafb !important; /* Light in dark mode */
    }
    
    .feature-card__description {
        font-size: var(--booking-text-xs, 0.5625rem) !important; /* More compact */
        /* Ensure description is visible */
        color: #4b5563 !important; /* Medium gray in light mode */
    }
    
    [data-theme="dark"] .feature-card__description {
        color: #d1d5db !important; /* Light gray in dark mode */
    }
    
    .house-rules-accordion,
    .cancellation-policy-card {
        padding: var(--booking-space-lg, 20px); /* Larger padding for consistency */
    }
    
    .rule-item {
        padding: var(--booking-space-xs, 8px) var(--booking-space-sm, 12px); /* More compact */
        font-size: var(--booking-text-sm, 0.875rem);
    }
    
    .policy-timeline__period {
        flex: 0 0 100px;
        font-size: var(--booking-text-xs, 0.75rem);
    }
}

/* Extra Small Mobile - Still 2 columns but smaller */
@media (max-width: 480px) {
    .features-section__header,
    .house-rules-section__header,
    .cancellation-policy-section__header {
        flex-direction: row;
        align-items: center;
        gap: var(--booking-space-sm, 10px);
    }
    
    /* Keep 2 columns even on small mobile */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--booking-space-xs, 6px) !important;
    }
    
    .feature-card {
        padding: var(--booking-space-xs, 5px) var(--booking-space-sm, 6px) !important; /* Ultra compact */
        min-height: auto !important; /* Remove fixed height */
    }
    
    .feature-card__icon {
        width: 22px !important; /* More compact */
        height: 22px !important;
        font-size: 0.75rem !important; /* More compact */
        /* Ensure icon is visible */
        color: #3b82f6 !important; /* Blue in light mode */
    }
    
    [data-theme="dark"] .feature-card__icon {
        background: rgba(212, 175, 55, 0.2) !important; /* Gold background */
        color: var(--accent-color, #d4af37) !important; /* Gold icon like property detail */
    }
    
    .feature-card__title {
        font-size: var(--booking-text-xs, 0.5625rem) !important; /* More compact */
        /* Ensure text is visible */
        color: #111827 !important; /* Dark in light mode */
    }
    
    [data-theme="dark"] .feature-card__title {
        color: #f9fafb !important; /* Light in dark mode */
    }
    
    .feature-card__description {
        font-size: var(--booking-text-xs, 0.5rem) !important; /* More compact */
        display: none; /* Hide description on very small screens to save space */
    }
    
    [data-theme="dark"] .feature-card__description {
        color: #d1d5db !important; /* Light gray in dark mode */
    }
    
    .house-rules-accordion,
    .cancellation-policy-card {
        padding: var(--booking-space-md, 16px);
    }
    
    .rule-item {
        padding: var(--booking-space-xs, 8px) var(--booking-space-sm, 12px);
        flex-direction: row;
        align-items: center;
        gap: var(--booking-space-sm, 12px);
    }
    
    .policy-timeline__item {
        flex-direction: row;
        gap: var(--booking-space-sm, 12px);
    }
    
    .policy-timeline__period {
        flex: 0 0 80px;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.feature-card:focus,
.rule-item:focus,
.cancellation-policy-card:focus {
    outline: 2px solid var(--booking-primary, #3b82f6);
    outline-offset: 2px;
}

[data-theme="dark"] .feature-card:focus,
[data-theme="dark"] .rule-item:focus,
[data-theme="dark"] .cancellation-policy-card:focus {
    outline-color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .rule-item,
    .cancellation-policy-card {
        transition: none;
    }
    
    .feature-card:hover,
    .rule-item:hover {
        transform: none;
    }
}