/**
 * TMBS SEO - frontend styles for rendered [tmbs_faq] blocks.
 * Deliberately minimal - inherits typography from the theme.
 */
.tmbs-faq-block {
    margin: 32px 0;
    max-width: 800px;
}
.tmbs-faq-heading {
    font-size: 1.6em;
    font-weight: 700;
    margin: 0 0 16px;
}
.tmbs-faq-list {
    margin: 0;
    padding: 0;
}
.tmbs-faq-question {
    font-weight: 700;
    font-size: 1.1em;
    margin: 24px 0 8px;
    line-height: 1.35;
}
.tmbs-faq-answer {
    margin: 0 0 8px;
    line-height: 1.6;
}
.tmbs-faq-answer p {
    margin: 0 0 12px;
}
.tmbs-faq-answer p:last-child {
    margin-bottom: 0;
}

/* ===== Generations section ===== */
.tmbs-generations {
    margin: 40px 0;
    max-width: 100%;
}
.tmbs-generations-heading {
    font-size: 1.6em;
    font-weight: 700;
    margin: 0 0 12px;
}
.tmbs-generations-intro {
    margin: 0 0 24px;
    line-height: 1.6;
    color: #444;
}
.tmbs-generations-summary {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
}
.tmbs-generations-summary thead {
    background: #f2f2f2;
}
.tmbs-generations-summary th,
.tmbs-generations-summary td {
    padding: 10px 12px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
    font-size: 0.95em;
}
.tmbs-generation-block {
    border: 1px solid #d0d7de;
    border-radius: 4px;
    margin: 0 0 12px;
    background: #fff;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.tmbs-generation-block:hover {
    border-color: #1d5a96;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.tmbs-generation-block[open] {
    border-color: #1d5a96;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.tmbs-generation-summary {
    padding: 16px 20px;
    cursor: pointer;
    background: #f0f7ff;
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    user-select: none;
}
.tmbs-generation-summary::-webkit-details-marker {
    display: none;
}
.tmbs-generation-summary::marker {
    content: '';
}
.tmbs-generation-summary:hover {
    background: #e1efff;
}
.tmbs-generation-block[open] .tmbs-generation-summary {
    background: #e1efff;
    border-bottom: 1px solid #d0d7de;
}
.tmbs-generation-summary-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1d5a96;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    transition: transform 0.2s ease;
}
.tmbs-generation-block[open] .tmbs-generation-summary-chevron {
    transform: rotate(90deg);
}
.tmbs-generation-summary-text {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}
.tmbs-generation-summary-title {
    color: #1d5a96;
    font-weight: 600;
    font-size: 1.05em;
}
.tmbs-generation-summary-meta {
    font-weight: 400;
    color: #555;
    font-size: 0.9em;
}
.tmbs-generation-body {
    padding: 20px;
}
.tmbs-generation-image {
    float: right;
    max-width: 320px;
    margin: 0 0 16px 20px;
    padding: 0;
}
.tmbs-generation-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 4px;
}
.tmbs-generation-image figcaption {
    font-size: 0.85em;
    color: #666;
    margin-top: 6px;
    text-align: center;
}
.tmbs-generation-overview p {
    margin: 0 0 12px;
    line-height: 1.6;
}
.tmbs-generation-engines,
.tmbs-generation-service,
.tmbs-generation-video,
.tmbs-generation-faq {
    margin-top: 24px;
    clear: both;
}
.tmbs-generation-engines h4,
.tmbs-generation-service h4,
.tmbs-generation-video h4,
.tmbs-generation-faq h4 {
    font-size: 1.1em;
    margin: 0 0 8px;
    font-weight: 600;
}
.tmbs-engine-block {
    margin-bottom: 12px;
}
.tmbs-engine-block strong {
    display: inline-block;
    min-width: 60px;
}
.tmbs-generation-inline-cta {
    margin-top: 24px;
    padding: 12px 16px;
    background: #fff8e1;
    border-left: 4px solid #cc9442;
}
.tmbs-generation-inline-cta a {
    font-weight: 600;
    color: #1d5a96;
    text-decoration: none;
}
.tmbs-generation-inline-cta a:hover {
    text-decoration: underline;
}
.tmbs-generations-cta {
    margin-top: 28px;
    padding: 20px;
    background: #f0f7ff;
    border-radius: 6px;
    text-align: center;
}
.tmbs-generations-cta-actions {
    margin: 12px 0 0;
}
.tmbs-cta-button {
    display: inline-block;
    padding: 12px 22px;
    background: #1d5a96;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}
.tmbs-cta-button:hover {
    background: #144572;
}

@media (max-width: 700px) {
    .tmbs-generations-summary {
        font-size: 0.85em;
    }
    .tmbs-generations-summary th,
    .tmbs-generations-summary td {
        padding: 6px 8px;
    }
    .tmbs-generation-image {
        float: none;
        max-width: 100%;
        margin: 0 0 16px 0;
    }
}

/* ============================================================
 * Lightbox (v0.3.6)
 * Native <dialog> element. JS in assets/generations-lightbox.js
 * ============================================================ */

.tmbs-generation-image-link {
    display: block;
    cursor: zoom-in;
    border: 0;
    text-decoration: none;
}
.tmbs-generation-image-link img {
    display: block;
    transition: opacity 0.15s ease;
}
.tmbs-generation-image-link:hover img,
.tmbs-generation-image-link:focus img {
    opacity: 0.92;
}

dialog.tmbs-lightbox {
    border: none;
    border-radius: 8px;
    padding: 0;
    max-width: min(95vw, 1400px);
    max-height: 95vh;
    background: #fff;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
dialog.tmbs-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.75);
}
.tmbs-lightbox-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    font-size: 28px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.tmbs-lightbox-close:hover,
.tmbs-lightbox-close:focus {
    background: #fff;
    outline: 2px solid #1a5490;
}
.tmbs-lightbox-figure {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}
.tmbs-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(95vh - 120px);
    width: auto;
    height: auto;
    margin: 0 auto;
}
.tmbs-lightbox-caption {
    padding: 12px 24px;
    font-size: 0.92em;
    color: #555;
    background: #fff;
    border-top: 1px solid #eee;
    text-align: center;
    line-height: 1.4;
}
.tmbs-lightbox-cta {
    padding: 16px 24px 20px;
    background: #fff;
    text-align: center;
    border-top: 1px solid #eee;
}
.tmbs-lightbox-cta-button {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.95em;
    font-weight: 600;
}
.tmbs-lightbox-cta-button .tmbs-lightbox-model-name {
    font-weight: 600;
}

@media (max-width: 700px) {
    dialog.tmbs-lightbox {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .tmbs-lightbox-image {
        max-height: calc(100vh - 140px);
    }
    .tmbs-lightbox-caption {
        font-size: 0.85em;
        padding: 10px 16px;
    }
    .tmbs-lightbox-cta {
        padding: 14px 16px 16px;
    }
}

/* =====================================================================
 * Locations module (0.4.0+)
 * ===================================================================== */

.tmbs-location {
    margin: 1.5em 0;
    font-size: 1rem;
}
.tmbs-location section,
.tmbs-location header {
    margin: 0 0 2em 0;
}
.tmbs-location h1 {
    margin: 0 0 0.2em 0;
}
.tmbs-location h2 {
    margin: 0 0 0.6em 0;
    font-size: 1.4em;
}
.tmbs-location-tagline {
    margin: 0 0 1em 0;
    font-size: 1.1em;
    line-height: 1.5;
}
.tmbs-location-trust {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    font-size: 0.95em;
    color: #555;
}
.tmbs-location-trust li::before {
    content: "✓ ";
    color: #1a7f37;
    font-weight: 700;
}
.tmbs-location-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin: 0.8em 0 0 0;
    justify-content: center;
}
.tmbs-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9em 1.6em;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05em;
    text-decoration: none;
    min-height: 48px;            /* tap-target floor on mobile */
    min-width: 180px;
}
.tmbs-cta-call {
    background: #1a7f37;
    color: #fff;
}
.tmbs-cta-book {
    background: #0a66c2;
    color: #fff;
}
.tmbs-cta:hover, .tmbs-cta:focus {
    text-decoration: none;
    filter: brightness(1.05);
}
.tmbs-pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0 1.5em 0;
}
.tmbs-pricing-table caption {
    text-align: left;
    font-weight: 600;
    margin: 0 0 0.3em 0;
    color: #333;
}
.tmbs-pricing-table th,
.tmbs-pricing-table td {
    padding: 0.6em 0.8em;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: top;
}
.tmbs-pricing-table thead th {
    background: #f5f5f5;
    font-weight: 600;
    border-bottom: 2px solid #d0d0d0;
}
.tmbs-pricing-table tbody th[scope="row"] {
    font-weight: 600;
    width: 18%;
}
.tmbs-pricing-table td:last-child {
    font-weight: 600;
    white-space: nowrap;
}
.tmbs-route-summary {
    font-weight: 600;
    margin: 0 0 0.5em 0;
}
.tmbs-map-frame iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 6px;
}
.tmbs-services-list {
    columns: 2;
    column-gap: 2em;
    padding-left: 1.2em;
}
@media (max-width: 600px) {
    .tmbs-services-list {
        columns: 1;
    }
    .tmbs-pricing-table thead {
        display: none;
    }
    .tmbs-pricing-table tbody, .tmbs-pricing-table tr, .tmbs-pricing-table td, .tmbs-pricing-table th {
        display: block;
        width: auto;
    }
    .tmbs-pricing-table tr {
        margin-bottom: 0.8em;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        padding: 0.4em 0.6em;
    }
    .tmbs-pricing-table td, .tmbs-pricing-table tbody th[scope="row"] {
        border-bottom: 0;
        padding: 0.3em 0;
    }
}

/* =====================================================================
 * Locations matrix (0.5.0+)
 * Replaces the simple per-tier table with engine-class columns
 * ===================================================================== */

.tmbs-location-reg-lookup {
    margin: 1em 0 1.5em 0;
}
.tmbs-reg-lookup-widget {
    margin-bottom: 0.8em;
}
.tmbs-pricing-matrix-scroll {
    overflow-x: auto;
    margin: 0.5em 0 1.5em 0;
}
.tmbs-pricing-matrix {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.tmbs-pricing-matrix caption {
    text-align: left;
    font-weight: 600;
    margin: 0 0 0.3em 0;
    color: #333;
}
.tmbs-pricing-matrix th,
.tmbs-pricing-matrix td {
    padding: 0.6em 0.7em;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: top;
}
.tmbs-pricing-matrix thead th {
    background: #f5f5f5;
    font-weight: 600;
    border-bottom: 2px solid #d0d0d0;
}
.tmbs-pricing-matrix thead th .tmbs-tier-label {
    display: block;
}
.tmbs-pricing-matrix thead th .tmbs-tier-examples {
    display: block;
    font-weight: 400;
    font-size: 0.85em;
    color: #666;
    margin-top: 2px;
}
.tmbs-pricing-matrix tbody th[scope="row"] {
    font-weight: 600;
}
.tmbs-pricing-matrix tbody th[scope="row"] .tmbs-service-name {
    display: block;
}
.tmbs-pricing-matrix tbody th[scope="row"] .tmbs-service-desc {
    display: block;
    font-weight: 400;
    font-size: 0.85em;
    color: #666;
    margin-top: 2px;
}
.tmbs-pricing-matrix tbody td {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}
.tmbs-price-na {
    color: #bbb;
    font-weight: 400;
}
.tmbs-pricing-footnote {
    font-size: 0.9em;
    color: #555;
    margin-top: 0.8em;
}

/* Responsive matrix.
 *
 * Strategy: at full width the Service column expands naturally to fit
 * the long descriptions. As the viewport shrinks the Service column
 * is constrained progressively — first by font size, then by hiding
 * the description text — so the price columns stay visible rather
 * than disappearing off-screen.
 *
 * On a desktop or wide tablet the customer sees the full description;
 * on a phone they see just the service name and the prices, which is
 * what they actually need to compare. */

/* Medium viewports: shrink the description but keep it visible.
   Triggers at ~tablet portrait and below. */
@media (max-width: 900px) {
    .tmbs-pricing-matrix th,
    .tmbs-pricing-matrix td {
        padding: 0.5em 0.4em;
        font-size: 0.95em;
    }
    .tmbs-pricing-matrix tbody th[scope="row"] {
        max-width: 200px;
    }
    .tmbs-pricing-matrix tbody th[scope="row"] .tmbs-service-desc {
        font-size: 0.78em;
        line-height: 1.3;
    }
    .tmbs-pricing-matrix thead th .tmbs-tier-examples {
        font-size: 0.78em;
        line-height: 1.3;
    }
}

/* Narrow viewports: hide the service description AND the tier
   examples; keep just the names. Frees up the most space, all five
   tier columns become visible. Customers on phones get the at-a-glance
   matrix they need; the descriptions and examples are still in the
   page source so AI Overviews and rich-results extraction still see
   the full context. */
@media (max-width: 600px) {
    .tmbs-pricing-matrix th,
    .tmbs-pricing-matrix td {
        padding: 0.5em 0.3em;
        font-size: 0.9em;
    }
    .tmbs-pricing-matrix tbody th[scope="row"] .tmbs-service-desc,
    .tmbs-pricing-matrix thead th .tmbs-tier-examples {
        display: none;
    }
    .tmbs-pricing-matrix tbody th[scope="row"] {
        max-width: 110px;
    }
}

/* WhatsApp CTA — uses WhatsApp brand green to differentiate from
   the phone Call button (which is a darker neutral green). */
.tmbs-cta-whatsapp {
    background: #25d366;
    color: #fff;
}
.tmbs-cta-whatsapp:hover,
.tmbs-cta-whatsapp:focus {
    background: #1ebe5d;
    color: #fff;
    text-decoration: none;
}

/* =====================================================================
 * Locations reviews block (0.5.4+)
 * Renders a visible counterpart to the AggregateRating + Review schema
 * so the structured data has user-visible content backing it. Required
 * by Google's review-snippet policy.
 * ===================================================================== */

.tmbs-location-reviews {
    margin: 1.5em 0 2em 0;
}
.tmbs-location-reviews h2 {
    margin: 0 0 0.6em 0;
    font-size: 1.4em;
}
.tmbs-reviews-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
    margin: 0 0 1em 0;
    padding: 0.8em 1em;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}
.tmbs-reviews-stars {
    font-size: 1.4em;
    letter-spacing: 0.05em;
    line-height: 1;
}
.tmbs-stars-filled {
    color: #fbbc04;          /* Google reviews yellow */
}
.tmbs-stars-empty {
    color: #d0d0d0;
}
.tmbs-reviews-headline strong {
    font-size: 1.2em;
    font-weight: 700;
    margin-right: 0.4em;
}
.tmbs-reviews-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1em;
    margin: 0 0 1em 0;
}
.tmbs-review-card {
    padding: 1em 1.1em;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
}
.tmbs-review-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4em;
    margin: 0 0 0.5em 0;
}
.tmbs-review-author {
    font-weight: 600;
    color: #222;
}
.tmbs-review-card .tmbs-review-stars {
    font-size: 1em;
    letter-spacing: 0.03em;
}
.tmbs-review-text {
    margin: 0 0 0.5em 0;
    color: #333;
    line-height: 1.45;
}
.tmbs-review-date {
    margin: 0;
    font-size: 0.85em;
    color: #777;
}
.tmbs-reviews-link {
    margin: 0;
    text-align: right;
}
.tmbs-reviews-link a {
    font-weight: 600;
}

@media (max-width: 600px) {
    .tmbs-reviews-cards {
        grid-template-columns: 1fr;
    }
    .tmbs-reviews-link {
        text-align: left;
    }
}