.mtt-destination .mtt-intro h1 {
    margin-bottom: 0.5rem;
}

.mtt-freshness-note {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 1.25rem;
}

.mtt-venue-index ol {
    columns: 2;
    padding-left: 1.25rem;
}

@media (max-width: 480px) {
    .mtt-venue-index ol {
        columns: 1;
    }
}

.mtt-no-events-notice {
    padding: 1rem 1.25rem;
    background: #fff4e5;
    border: 1px solid #f0c36d;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.mtt-event {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.mtt-event h3 {
    margin-top: 0;
}

.mtt-event-section {
    padding: 1rem 0;
    border-top: 1px solid #eee;
}

.mtt-event-section:first-of-type {
    border-top: none;
    padding-top: 0.25rem;
}

.mtt-event-section h4 {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #777;
    margin-bottom: 0.6rem;
}

.mtt-event-description {
    margin-bottom: 0.75rem;
}

.mtt-event-meta {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mtt-event-meta li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mtt-event-meta i {
    color: #c0392b;
    width: 1.1em;
    text-align: center;
    flex-shrink: 0;
}

.mtt-event-meta-label {
    color: #777;
}

.mtt-event-meta-value {
    font-weight: 600;
}

/* Location: image + description side by side on wider screens (fills the
   white space next to a small stadium photo), stacked on mobile. */
.mtt-location-top {
    margin-bottom: 0.9rem;
}

.mtt-venue-description {
    margin-top: 0.6rem;
}

@media (min-width: 700px) {
    .mtt-location-top {
        display: flex;
        gap: 1.25rem;
        align-items: flex-start;
    }

    .mtt-venue-image {
        flex: 0 0 200px;
        margin-bottom: 0 !important;
    }

    .mtt-venue-description {
        margin-top: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
}

.mtt-venue-details {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mtt-venue-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
}

.mtt-venue-detail-row dt {
    color: #777;
    font-size: 0.85rem;
    font-weight: 600;
    flex: 0 0 140px;
}

.mtt-venue-detail-row dt i {
    color: #c0392b;
    width: 1.1em;
    text-align: center;
}

.mtt-venue-detail-row dd {
    margin: 0;
    flex: 1 1 200px;
}

.mtt-cta {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    background: #c0392b;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.mtt-cta:hover {
    background: #a93226;
    color: #fff;
}

.mtt-ticket-summary ul,
.mtt-tomorrow-list {
    list-style: none;
    padding-left: 0;
}

.mtt-ticket-summary li,
.mtt-tomorrow-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.mtt-destination-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.mtt-destination-card {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 1.25rem;
    overflow: hidden;
}

.mtt-card-status--tonight {
    color: #c0392b;
    font-weight: 600;
}

.mtt-card-status--none {
    color: #777;
}

.mtt-card-events {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
}

.mtt-destination-card-image {
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    margin: -1.25rem -1.25rem 0.9rem;
    width: calc(100% + 2.5rem);
    max-width: none;
    display: block;
}

.mtt-card-cta {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.mtt-card-cta:hover,
.mtt-card-cta:focus {
    background: #a93226;
    color: #fff;
}

/* Homepage hero: heading + map side by side on wide screens, stacked on
   narrow ones. The map itself is sized by viewport height as well as
   width, so it doesn't end up towering over the fold on a tall, narrow
   phone screen. */
/* Grid areas let each region (heading/map/legend) reflow independently
   per breakpoint, rather than just flipping the order of two blocks -
   mobile needs heading -> map -> legend top-to-bottom, while desktop
   needs the map on the left spanning both rows, heading and legend
   stacked in a column to its right. */
.mtt-hero {
    display: grid;
    gap: 1.5rem 2rem;
    grid-template-columns: 1fr;
    grid-template-areas:
        "heading"
        "map"
        "legend";
    align-items: start;
    margin-bottom: 1.75rem;
}

.mtt-hero-text {
    grid-area: heading;
}

.mtt-hero-map-wrap {
    grid-area: map;
    margin: 0 auto;
    width: 100%;
}

.mtt-hero-legend-wrap {
    grid-area: legend;
}

@media (min-width: 700px) {
    .mtt-hero {
        grid-template-columns: minmax(260px, 420px) 1fr;
        grid-template-areas:
            "map heading"
            "map legend";
    }
}

.mtt-destinations-map {
    position: relative;
    width: min(85vw, 420px, 44vh);
    aspect-ratio: 443 / 800;
    margin: 0 auto;
}

.mtt-destinations-map-img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Numbered markers - large enough to tap confidently on mobile, and
   labelled with a number (not name text) so tightly clustered pins, like
   the Krabi/Phuket/Khao Lak/Koh Lanta group, never have to overlap. The
   legend list underneath is the primary way to know what each number is
   before tapping - hover/focus tooltips are a bonus on top of that, not
   the only way to find out. */
.mtt-map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: clamp(22px, 6vw, 30px);
    height: clamp(22px, 6vw, 30px);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.7rem, 2.6vw, 0.85rem);
    text-decoration: none;
    cursor: pointer;
}

.mtt-map-pin:hover,
.mtt-map-pin:focus {
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 3px #ffce00;
    z-index: 10;
}

.mtt-map-pin--tonight {
    background: #c0392b;
}

.mtt-map-pin--none {
    background: #9a9a9a;
}

.mtt-map-legend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.mtt-map-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
}

.mtt-map-legend-item:hover,
.mtt-map-legend-item:focus {
    border-color: #c0392b;
}

.mtt-map-legend-number {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
}

.mtt-map-legend-item--tonight .mtt-map-legend-number {
    background: #c0392b;
}

.mtt-map-legend-item--none .mtt-map-legend-number {
    background: #9a9a9a;
}

.mtt-map-legend-name {
    font-weight: 600;
    flex-grow: 1;
}

.mtt-map-legend-status {
    color: #777;
    font-size: 0.78rem;
    white-space: nowrap;
}

.mtt-tonight-seo-intro {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.mtt-tonight-shortlist {
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 1rem 1.5rem 1rem 2.5rem;
    margin-bottom: 1rem;
}

.mtt-tonight-shortlist a {
    text-decoration: none;
}

.mtt-tonight-skip-links {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1.5rem;
}

.mtt-tonight-skip-links p {
    margin: 0 0 0.6rem;
}

.mtt-tonight-skip-links p:last-child {
    margin-bottom: 0;
}

.mtt-tomorrow-tickets {
    font-weight: 600;
}

.mtt-tomorrow-tickets:hover,
.mtt-tomorrow-tickets:focus {
    color: #a93226;
}

.mtt-outro {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e2e2;
    color: #444;
}

/* Widget 1: sticky ticket bar */
.mtt-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #1a1a1a;
    color: #fff;
    padding: 0.75rem 2.25rem 0.75rem 1.25rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}

.mtt-sticky-bar--hidden {
    transform: translateY(100%);
}

.mtt-sticky-bar-close {
    position: absolute;
    top: 2px;
    right: 6px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.7;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}

.mtt-sticky-bar-close:hover,
.mtt-sticky-bar-close:focus {
    opacity: 1;
}

.mtt-sticky-bar-text {
    font-size: 0.95rem;
}

.mtt-sticky-bar-cta {
    flex-shrink: 0;
    background: #c0392b;
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.mtt-sticky-bar-cta:hover,
.mtt-sticky-bar-cta:focus {
    background: #a93226;
    color: #fff;
}

/* Widget 2: price comparison cards */
.mtt-price-cards {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.mtt-price-card {
    flex: 0 0 240px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 0.9rem;
    text-align: left;
}

.mtt-price-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.mtt-price-card-body {
    min-width: 0;
}

.mtt-price-card-venue {
    font-weight: 600;
    font-size: 0.9rem;
}

.mtt-price-card-event {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.mtt-price-card-price {
    font-weight: 700;
    color: #c0392b;
    margin-bottom: 0.5rem;
}

.mtt-price-card-cta {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.mtt-price-card-cta:hover,
.mtt-price-card-cta:focus {
    background: #a93226;
    color: #fff;
}

/* Widget 3: countdown timer */
.mtt-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    background: #fff4e5;
    border: 1px solid #f0c36d;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.mtt-countdown-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Widget 4: provider comparison table */
.mtt-provider-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
}

.mtt-provider-table th,
.mtt-provider-table td {
    border: 1px solid #e2e2e2;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.mtt-provider-table th {
    background: #fafafa;
}

/* Below ~640px, drop the table layout entirely and show each row as a
   stacked card instead - a wide 4-column table simply can't fit a phone
   screen without horizontal scrolling, which is worse UX than stacking. */
@media (max-width: 640px) {
    .mtt-provider-table table,
    .mtt-provider-table thead,
    .mtt-provider-table tbody,
    .mtt-provider-table th,
    .mtt-provider-table td,
    .mtt-provider-table tr {
        display: block;
    }

    .mtt-provider-table thead {
        display: none;
    }

    .mtt-provider-table tr {
        border: 1px solid #e2e2e2;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        overflow: hidden;
    }

    .mtt-provider-table td {
        border: none;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .mtt-provider-table td:last-child {
        border-bottom: none;
    }

    .mtt-provider-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        flex-shrink: 0;
    }

    .mtt-provider-table td[data-label=""] {
        justify-content: flex-end;
    }
}

.mtt-hero-image {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0.75rem 0 1rem;
}

.mtt-venue-image {
    width: 100%;
    max-width: 320px;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    display: block;
}

.mtt-faq-item {
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
}

.mtt-faq-item summary {
    font-weight: 600;
    cursor: pointer;
}

.mtt-faq-item div {
    margin-top: 0.5rem;
    color: #444;
}

.mtt-other-destinations ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem 1.5rem;
}

.mtt-other-destinations li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.mtt-upcoming-week-list {
    list-style: none;
    padding-left: 0;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    overflow: hidden;
}

.mtt-upcoming-week-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #eee;
    font-size: 0.92rem;
}

.mtt-upcoming-week-list li:last-child {
    border-bottom: none;
}

.mtt-upcoming-day-label {
    flex: 0 0 90px;
    font-weight: 600;
}

.mtt-upcoming-day-events {
    color: #333;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mtt-upcoming-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    font-size: 0.88rem;
}

.mtt-upcoming-event-tickets {
    font-weight: 600;
    white-space: nowrap;
}

.mtt-upcoming-day-none {
    color: #999;
}

.mtt-ticket-tiers {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.75rem;
}

.mtt-ticket-tiers li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed #e2e2e2;
}

.mtt-ticket-tiers li:last-child {
    border-bottom: none;
}

.mtt-tier-label {
    color: #444;
}

.mtt-tier-price {
    font-weight: 700;
    white-space: nowrap;
}