/**
 * CONTENT SECTIONS COMPONENT CSS
 * 
 * Modern, modular styling for booking page content sections:
 * - Features/About This Place
 * - House Rules
 * - Cancellation Policy
 * 
 * Uses glassmorphism design for modern aesthetic
 * 
 * Version: 1.0
 * Created: 2025-01-27
 * Dependencies: glassmorphism.css, booking-base.css, booking-theme.css
 */

/* ==========================================================================
   FEATURES SECTION
   ========================================================================== */

.features-section {
    margin-bottom: var(--booking-space-xl, 24px);
}

.features-section__header {
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm, 12px);
    margin-bottom: var(--booking-space-lg, 20px);
}

.features-section__title {
    font-size: var(--booking-text-2xl, 1.5rem);
    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(280px, 1fr));
    gap: var(--booking-space-md, 16px);
}

/* Feature Card - Glassmorphism - More 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 8px 32px rgba(0, 0, 0, 0.1));
    border-radius: var(--booking-radius-lg, 12px);
    padding: var(--booking-space-md, 12px); /* More compact - reduced from lg */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-start;
    gap: var(--booking-space-sm, 10px); /* More compact - reduced from md */
}

[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(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    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: 36px; /* More compact - reduced from 48px */
    height: 36px; /* More compact - reduced from 48px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--booking-primary-bg, #eff6ff);
    border-radius: var(--booking-radius-md, 8px);
    /* Explicit icon color - ensure visibility */
    color: #3b82f6 !important; /* Blue icon - visible in light mode */
    font-size: 1.125rem; /* More compact - reduced from 1.5rem */
}

[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-sm, 0.875rem); /* 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: var(--booking-space-xs, 4px);
}

[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.75rem); /* More compact */
    /* Darker text in light mode */
    color: #4b5563 !important; /* Medium gray - visible in light mode */
    line-height: 1.4;
    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
   ========================================================================== */

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

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

.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-2xl, 1.5rem);
    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-xl, 16px);
    padding: var(--booking-space-lg, 20px);
    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-sm, 12px);
}

/* 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-sm, 8px);
    padding: var(--booking-space-xs, 8px) var(--booking-space-sm, 12px);
    border-radius: var(--booking-radius-md, 8px);
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    font-size: var(--booking-text-sm, 0.875rem);
}

[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
   ========================================================================== */

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

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

.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);
    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-xl, 16px);
    padding: var(--booking-space-xl, 24px);
    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-lg, 20px) 0;
}

.policy-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: var(--booking-space-md, 16px);
    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 140px;
    font-size: var(--booking-text-sm, 0.875rem);
    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);
    }
    
    /* 3 columns on mobile as requested */
    .features-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on mobile */
        gap: var(--booking-space-sm, 10px); /* More compact gap */
    }
    
    .feature-card {
        padding: var(--booking-space-sm, 10px); /* More compact - reduced from lg */
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 90px; /* More compact - reduced from 120px */
    }
    
    .feature-card__icon {
        width: 32px; /* More compact */
        height: 32px;
        font-size: 1rem; /* More compact */
        margin-bottom: var(--booking-space-xs, 6px);
        /* 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.75rem); /* More compact */
        margin-bottom: var(--booking-space-xs, 4px);
        /* 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.6875rem); /* 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 3 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, 12px);
    }
    
    /* Keep 3 columns even on small mobile */
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--booking-space-sm, 12px);
    }
    
    .feature-card {
        padding: var(--booking-space-sm, 8px); /* More compact */
        min-height: 80px; /* More compact */
    }
    
    .feature-card__icon {
        width: 28px; /* More compact */
        height: 28px;
        font-size: 0.875rem; /* 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.6875rem); /* 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 {
        display: none; /* Hide description on very small screens to save space */
    }
    
    .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;
    }
}