/**
 * Product Content Styles — Shared across all booking modules
 *
 * Scoped under `.bc-description` to style user/AI-generated content:
 * tables, lists, headings, paragraphs, images.
 *
 * Priority: LOW (no !important). Module-specific overrides in
 * design-system.css take precedence via higher specificity + !important.
 *
 * Classes used by AI-generated content:
 *   .bc-product-table  — general product info table
 *   .bc-price-table    — pricing reference table
 *   .bc-product-list   — styled list
 *   .bc-location-card  — location info block
 */

/* ===================================================================
   1. TABLES — Base styles for all tables inside product content
   =================================================================== */

.bc-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bc-description thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: left;
}

.bc-description th,
.bc-description td {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

.bc-description tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.bc-description tbody tr:hover {
    background-color: #f0f4f8;
}

/* --- Price Table variant --- */
.bc-description table.bc-price-table th {
    background-color: #e8f4fd;
    color: #1a5276;
}

.bc-description table.bc-price-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* --- Generic product table --- */
.bc-description table.bc-product-table th {
    background-color: #f8f9fa;
}

/* --- Responsive wrapper for wide tables --- */
.bc-description .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1em 0;
}

.bc-description .table-responsive table {
    margin: 0;
}


/* ===================================================================
   2. LISTS — ul/ol inside product content
   =================================================================== */

.bc-description ul,
.bc-description ol {
    padding-left: 1.2em;
    margin: 0.5em 0 1em;
    list-style: none;          /* bullets handled by li::before in app.css */
}

.bc-description li {
    margin-bottom: 0.35em;
    line-height: 1.65;
    list-style: none;          /* explicit on li — prevents inheritance override */
}

/* Nested lists */
.bc-description ul ul,
.bc-description ol ul {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

/* --- Styled product list variant --- */
.bc-description ul.bc-product-list {
    list-style: none;
    padding-left: 0;
}

.bc-description ul.bc-product-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.bc-description ul.bc-product-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}


/* ===================================================================
   3. HEADINGS — h2-h4 inside product content
   =================================================================== */

.bc-description h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 1.5em 0 0.5em;
    color: #2c3e50;
}

.bc-description h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    margin: 1.25em 0 0.5em;
    color: #2c3e50;
}

.bc-description h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 1em 0 0.4em;
    color: #34495e;
}


/* ===================================================================
   4. PARAGRAPHS & INLINE — text content
   =================================================================== */

.bc-description p {
    line-height: 1.7;
    margin-bottom: 0.85em;
}

.bc-description strong,
.bc-description b {
    font-weight: 600;
}


/* ===================================================================
   5. IMAGES — responsive images in content
   =================================================================== */

.bc-description img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}


/* ===================================================================
   6. LOCATION CARD — AI-generated location blocks
   =================================================================== */

.bc-description .bc-location-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1em 1.25em;
    margin: 1em 0;
}

.bc-description .bc-location-card h4 {
    margin-top: 0;
    color: #1a5276;
}


/* ===================================================================
   7. RESPONSIVE — Mobile adjustments
   =================================================================== */

@media (max-width: 991px) {
    .bc-description table {
        font-size: 0.8125rem;
    }

    .bc-description th,
    .bc-description td {
        padding: 8px 10px;
    }

    .bc-description h2 {
        font-size: 1.25rem;
    }

    .bc-description h3 {
        font-size: 1.0625rem;
    }
}