/**
 * Sarisara Tour Itinerary Redesign - Frontend Styles
 * Pixel-perfect implementation matching Figma design specifications
 *
 * @package Sarisara_Child
 * @version 2.0.0
 */

/* ============================================================================
   ELEMENTOR STYLE OVERRIDES (High Priority)
   ============================================================================ */

/**
 * Override Elementor global button styles (.elementor-kit-8)
 * These overrides ensure itinerary buttons maintain pixel-perfect design
 * with sharp corners and no padding (grid layout handles spacing)
 */
.sarisara-itinerary-redesign button,
.sarisara-itinerary-redesign .elementor-button,
.sarisara-itinerary-redesign input[type="button"],
.sarisara-itinerary-redesign input[type="submit"],
.sarisara-itinerary-redesign .day-header,
.sarisara-itinerary-redesign .service-header,
.sarisara-itinerary-redesign .itinerary-control-btn {
    border-radius: 0 !important;
    padding: 0 !important;
    font-family: 'Google Sans', sans-serif !important;
    background-color: #ffffff4d !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Ensure button text doesn't inherit Elementor uppercase/spacing */
.sarisara-itinerary-redesign button *,
.sarisara-itinerary-redesign .day-header *,
.sarisara-itinerary-redesign .service-header * {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Expand/Collapse All Control Buttons */
button.itinerary-control-btn.expand-all {
    padding: 15px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

button.itinerary-control-btn.collapse-all {
    padding: 15px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* ============================================================================
   ROOT CONTAINER & VARIABLES
   ============================================================================ */

.sarisara-itinerary-redesign {
    font-family: 'Google Sans', sans-serif;
    position: relative;
    width: 100%;
    margin: 40px auto;
}

.sarisara-itinerary-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    background: #ffffff00;
}

/* ============================================================================
   LEVEL 1: DAY CARD & HEADER (97px height, 4-column grid)
   ============================================================================ */

.day-card {
    border: 3px solid #000000;
    margin-bottom: 24px;
    position: relative;
    background: #ffffff;
}

.day-header {
    display: grid;
    grid-template-columns: 180px 2fr minmax(120px, auto) 60px;
    grid-template-rows: auto auto;
    border-bottom: 3px solid #000000;
    background: #ffffff;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
}

.day-header:hover {
    background-color: #f9fafb;
}

/* Column 1: Day & Date (auto width, 2 rows) */
.day-info-col {
    grid-column: 1;
    grid-row: 1 / 3;
    border-right: 3px solid #000000;
    display: flex;
    flex-direction: column;
}

.day-label {
    flex: 1;
    border-bottom: 3px solid #000000;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    min-height: 48px;
}

.day-date-value {
    flex: 1;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    min-height: 48px;
    line-height: 20px;
}

/* Inquiry-page-specific Day label override (matches Figma — same chrome
 * the inquiry summary panel uses elsewhere). */
body.inquiry-page .sarisara-itinerary-redesign .day-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    white-space: nowrap !important;
    color: #030213 !important;
    border-bottom: 3px solid #030213 !important;
    padding: 10px !important;
}

/* Column 2: Title (2fr, spans both rows) */
.day-title-col {
    grid-column: 2;
    grid-row: 1 / 3;
    border-right: 3px solid #000000;
    padding: 0 24px;
    display: flex;
    align-items: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    text-align: left;
    line-height: 24px;
}

/* Column 3: Price (minmax(120px, auto), spans both rows) */
.day-price-col {
    grid-column: 3;
    grid-row: 1 / 3;
    border-right: 3px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
}

/* Column 4: Chevron (60px width, row 1 only) */
.day-chevron {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin-top: 25px;
}

.chevron-icon {
    width: 48px;
    height: 48px;
    border: 3px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chevron-svg {
    transition: transform 0.3s ease;
}

.day-header[aria-expanded="true"] .chevron-svg,
.service-header[aria-expanded="true"] .chevron-svg {
    transform: rotate(180deg);
}

/* ============================================================================
   LEVEL 2: DAY CONTENT (Expandable)
   ============================================================================ */

.day-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0px !important;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.day-content.expanded {
    max-height: 10000px;
    opacity: 1;
}

.day-content-inner {
    padding: 30px 70px;
}

/* Direction Section */
.direction-section {
    margin-bottom: 50px;
    margin-top: 20px;
    margin-left: -30px;
}

.direction-label {
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #4d4d4d;
    margin-bottom: 6px;
}

.direction-value {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 18px !important;
    color: #000000;
    margin: 0;
}

.airport-transfer-label {
    display: inline-block;
    background-color: #10953a6e;
    color: #23660d;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 2px;
    margin-top: 10px;
}

/* ============================================================================
   LEVEL 3: SERVICE ITEM (Hotel/Activity/Custom) - 100px height
   ============================================================================ */

.service-item {
    border: 3px solid #000000;
    margin-bottom: 24px;
    margin-left: -40px;
    margin-right: -40px;
}

.service-header {
    display: grid;
    grid-template-columns: 80px 180px 1fr 150px;
    height: 100px;
    background: #ffffff;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0;
    border: none;
    text-align: left;
}

.service-header:hover {
    background-color: #f9fafb;
}

/* Column 1: Chevron (80px) */
.service-chevron {
    border-right: 3px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Column 2: Date & Time (180px, split horizontally) */
.service-date-col {
    border-right: 3px solid #000000;
    display: flex;
    flex-direction: column;
}

.service-date-top {
    height: 55%;
    border-bottom: 3px solid #000000;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    line-height: 20px;
}

.service-time-display {
    height: 50%;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #000000;
}

/* Column 3: Title & Location (1fr) */
.service-title-col {
    border-right: 3px solid #000000;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    /* Anchor for the floating capacity-warning chip — without this the
       chip falls back to static positioning and overflows the row's
       fixed 100px height when title + location are both rendered. */
    position: relative;
}

.service-title-text {
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px !important;
    color: #000000;
    margin-bottom: 4px;
    line-height: 1.25 !important;
    margin-top: 0;
}

.service-location-text {
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px !important;
    color: #787878;
    margin: 0;
}

/* Column 4: Price (150px) - with split pricing for activities */
.service-price-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #000000;
}

.price-split-top {
    height: 48.5px;
    border-bottom: 3px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.price-split-bottom {
    height: 48.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

/* ============================================================================
   LEVEL 4: SERVICE DETAILS (Expandable)
   ============================================================================ */

.service-details {
    border-top: 3px solid #000000;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    margin-top: -3px !important;
}

.service-details.expanded {
    max-height: 10000px;
    opacity: 1;
}

.service-details-inner {
    padding: 24px;
    background: #fafafa;
}

/* Title Section */
.details-title-section {
    margin-bottom: 16px;
}

.details-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
}

.pin-icon {
    font-size: 14px;
    margin: 0 4px;
}

.details-location {
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #969696;
}

/* Description */
.details-description {
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #4d4d4d;
    line-height: 22px;
    margin-bottom: -10px;
}

.details-description p {
    margin: 0 0 12px 0;
}

.details-description p:last-child {
    margin-bottom: 0;
    font-size: 14px !important;
}

/* Read More/Less Truncation for Descriptions */
.details-description {
    position: relative;
}

.details-description.truncatable {
    max-height: 110px; /* ~5 lines at 22px line-height */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.details-description.truncatable.expanded {
    max-height: 2000px; /* Large enough for any content */
}

.details-description.truncatable::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, white);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.details-description.truncatable.expanded::after {
    opacity: 0;
}

.read-more-toggle {
    display: block;
    text-align: right;
    margin: 8px 0px 12px;
    padding: 4px 0;
    font-size: 14px;
    color: #000 !important;
    font-weight: 600 !important;
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
}

/* ============================================================================
   ROOM TABLE (5-column grid for hotels)
   ============================================================================ */

.room-table {
    border: 2px solid #000000;
    margin-bottom: 16px;
}

/* Room separator between multiple selected rooms */
.room-separator {
    height: 20px;
}

/* Ensure proper spacing when multiple room tables are displayed */
.room-table + .room-separator {
    margin-bottom: 0;
}

.room-table-header,
.room-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.room-table-header {
    border-bottom: 2px solid #000000;
    background-color: #dcdcdc;
}

.room-table-header > div {
    padding: 12px;
    border-right: 2px solid #000000;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
    display: flex;
    align-items: center;
    line-height: 18px;
}

.room-table-header > div:last-child {
    border-right: none;
}

.room-row {
    border-bottom: 2px solid #000000;
    background: #ffffff;
}

.room-row:last-child {
    border-bottom: none;
}

.room-row > div {
    padding: 12px;
    border-right: 2px solid #000000;
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #000000;
    display: flex;
    align-items: center;
}

.room-row > div:last-child {
    border-right: none;
}

/* Column specific styles */
.col-room-type {
    justify-content: flex-start;
    overflow-wrap: break-word;
}

.col-guests,
.col-price,
.col-count,
.col-nights,
.col-meals,
.col-total {
    justify-content: center;
    text-align: center;
}

/* Room data values in second row (columns 2-7) */
.room-row .room-data-guests,
.room-row .room-data-price,
.room-row .room-data-count,
.room-row .room-data-nights,
.room-row .room-data-meals,
.room-row .room-data-total {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.col-meals.room-data-meals {
    font-size: 14px;
    justify-content: center;
    color: #000;
}

.col-total.room-data-total {
    font-size: 16px;
    justify-content: center;
    color: #0BA300;
    font-weight: 800 !important;
}

/* Extra bed column alignment */
.col-extra-bed {
    justify-content: center;
    text-align: center;
}

/* Interactive dropdowns in room table */
.room-row select.room-meal-select,
.room-row select.room-extra-bed-select {
    border: 1px solid var(--inquiry-border, #d9d9d9);
    border-radius: var(--inquiry-radius, 8px);
    font-family: var(--inquiry-font-family, 'Google Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    height: 32px;
    background: #fff;
    cursor: pointer;
    color: #000;
    text-align: center;
    min-width: 55px;
}
.room-row select.room-meal-select:focus,
.room-row select.room-extra-bed-select:focus {
    border-color: var(--inquiry-primary, #000);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* ============================================================================
   FACILITIES SECTION (with tooltips)
   ============================================================================ */

.facilities-section {
    margin-top: 16px;
}

.facilities-label {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
    margin-bottom: 8px;
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.facility-badge {
    background: rgba(217, 217, 217, 0.4);
    border: 1px solid rgba(217, 217, 217, 0.4);
    border-radius: 2px;
    padding: 8px;
    text-align: center;
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #000000;
    position: relative;
    cursor: help;
}

.facility-badge:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 100;
    margin-bottom: 4px;
}

/* ============================================================================
   IMAGE CAROUSEL (with dot navigation)
   ============================================================================ */

.image-carousel {
    border: 2px solid #000000;
    border-radius: 5px;
    height: 306px;
    background: #ffffff;
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}

.carousel-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
    opacity: 1;
    position: relative;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Carousel Dots */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 40;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #000000;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carousel-dots .dot.active {
    background: #ffffff;
}

.carousel-dots .dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Carousel Navigation Buttons (Previous/Next Arrows) */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: 3px solid #00000000;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    padding: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Override border-radius specifically for carousel navigation buttons */
.sarisara-itinerary-redesign .carousel-nav {
    border-radius: 30px !important;
}

.carousel-prev {
    left: 24px;
}

.carousel-next {
    right: 24px;
}

.carousel-nav:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.carousel-nav:active {
    transform: translateY(-50%) scale(1.05);
}

.carousel-nav svg {
    display: block;
}

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

/* Tablet (< 768px) */
@media (max-width: 768px) {
    .day-content-inner {
        padding: 20px 40px;
    }

    .service-item {
        margin-left: -20px;
        margin-right: -20px;
    }

    .direction-section {
        margin-left: -10px;
    }

    .facilities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile (< 640px) */
@media (max-width: 640px) {
    /* Stack day header columns vertically */
    .day-header {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .day-info-col,
    .day-title-col,
    .day-price-col,
    .day-chevron {
        grid-column: 1;
        grid-row: auto;
        border-right: none;
        border-bottom: 3px solid #000000;
    }

    .day-chevron {
        border-bottom: none;
    }

    .day-info-col {
        flex-direction: row;
    }

    .day-label {
        border-bottom: none;
        border-right: 3px solid #000000;
        flex: 1;
    }

    .day-date-value {
        flex: 1;
    }

    .day-title-col {
        padding: 16px;
    }

    .day-price-col {
        padding: 16px;
    }

    /* Stack service header columns vertically */
    .service-header {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .service-chevron,
    .service-date-col,
    .service-title-col,
    .service-price-col {
        border-right: none;
        border-bottom: 3px solid #000000;
    }

    .service-price-col {
        border-bottom: none;
        flex-direction: row;
    }

    .service-date-col {
        flex-direction: row;
    }

    .service-date-top {
        border-bottom: none;
        border-right: 3px solid #000000;
        flex: 1;
    }

    .service-time-display {
        flex: 1;
    }

    .price-split-top {
        border-bottom: none;
        border-right: 3px solid #000000;
        flex: 1;
    }

    .price-split-bottom {
        flex: 1;
    }

    /* Content padding */
    .day-content-inner {
        padding: 20px;
    }

    .service-item {
        margin-left: 0;
        margin-right: 0;
    }

    .direction-section {
        margin-left: 0;
    }

    /* Room table */
    .room-table-header,
    .room-row {
        grid-template-columns: 1fr;
    }

    .room-table-header > div,
    .room-row > div {
        border-right: none;
        border-bottom: 2px solid #000000;
    }

    .room-table-header > div:last-child,
    .room-row > div:last-child {
        border-bottom: none;
    }

    .facilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chevron-icon {
        width: 40px;
        height: 40px;
    }

    .image-carousel {
        height: 200px;
    }

    /* Smaller carousel navigation buttons on mobile */
    .carousel-nav {
        width: 44px;
        height: 44px;
    }

    .carousel-nav svg {
        width: 20px;
        height: 20px;
    }

    .carousel-prev {
        left: 12px;
    }

    .carousel-next {
        right: 12px;
    }
}

/* ============================================================================
   ACCESSIBILITY & PRINT STYLES
   ============================================================================ */

/* Focus styles for keyboard navigation */
.day-header:focus,
.service-header:focus {
    outline: 3px solid #4d90fe;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .day-content {
        max-height: none !important;
        opacity: 1 !important;
    }

    .service-details {
        max-height: none !important;
        opacity: 1 !important;
    }

    .chevron-icon {
        display: none;
    }

    .day-header,
    .service-header {
        cursor: default;
    }

    .day-header:hover,
    .service-header:hover {
        background-color: #ffffff;
    }
}

/* ============================================================================
   HOTEL NAME/LOCATION LINKS
   ============================================================================ */

.hotel-name-link {
    margin-bottom: 0px;
}

.hotel-name-link a {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hotel-name-link a:hover {
    text-decoration: underline;
}

.hotel-name-link i {
    font-size: 14px;
    color: #000000;
}

.hotel-name-link img.link-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.hotel-location-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.hotel-location-link i {
    color: #969696;
    font-size: 14px;
}

.hotel-location-link img.link-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    object-fit: contain;
}

.hotel-location-link a {
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 16px !important;
    color: #969696;
    text-decoration: none;
}

.hotel-location-link a:hover {
    text-decoration: underline;
}

/* ============================================================================
   AIRPORT TRANSFER ERROR MESSAGES
   ============================================================================ */

.itinerary-errors {
    background: #fee;
    border: 3px solid #c00;
    padding: 16px;
    margin-bottom: 24px;
    border-radius: 0;
}

.itinerary-errors h4 {
    color: #c00;
    margin-top: 0;
    margin-bottom: 12px;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.itinerary-errors ul {
    margin: 0;
    padding-left: 24px;
}

.itinerary-errors li {
    color: #c00;
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.itinerary-errors li:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   ACTIVITY TWO-COLUMN LAYOUT (Multi-day Activities)
   ============================================================================ */

/* Main Container: Two Column Grid */
.activity-two-column-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    margin-top: 24px;
    margin-bottom: 24px;
    border: none;
    background: #ffffff;
    min-height: 300px;
}

/* Left Column: Day Navigation */
.activity-day-navigation {
    background: #ffffff;
    border-right: 2px solid #000000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.activity-day-card {
    padding: 14px;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #000000;
    position: relative;
    text-align: center;
    background: #ffffff;
    margin: 10px 30px;
}

.activity-day-card:last-child {
    border-bottom: 2px solid;
}

.activity-day-card:hover {
    background: #f9f9f9;
}

.activity-day-card.active {
    background: #FFB700;
}

/* Right Column: Activity Content Area */
.activity-content-area {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Activity Header (Title + Day Subtitle) */
.activity-header {
    padding: 20px 24px;
    border-bottom: 2px solid #000000;
    background: #ffffff;
}

.activity-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* Override Elementor theme margins */
body.st-mod-style .st-style-elementor h5.activity-title {
    margin: 0px !important;
    font-size: 16px !important;
}

.activity-day-subtitle {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #808080;
    margin: 0;
}

/* Day Content (Hidden by default) */
.activity-day-content {
    display: none;
    padding: 0;
}

.activity-day-content.active {
    display: block;
}

/* Activity Items List (Full-width vertical layout) */
.activity-items-list {
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.activity-item-row {
    padding: 20px 24px;
    border-bottom: 1px solid #d5d5d5;
}

.activity-item-row:last-child {
    border-bottom: none;
}

/* Activity Item Header (Time - Title on same line) */
.activity-item-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.activity-time {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
}

.activity-separator {
    font-family: 'Google Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    margin: 0 4px;
}

.activity-item-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #000000;
    line-height: 1.4;
}

.activity-item-description {
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 14px !important;
    color: #4d4d4d;
    line-height: 1.5 !important;
    margin: 0;
}

/* Mobile Responsive for Activity Two-Column Layout */
@media (max-width: 768px) {
    .activity-two-column-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .activity-day-navigation {
        border-right: none;
        border-bottom: 2px solid #000000;
        flex-direction: row;
        overflow-x: auto;
    }

    .activity-day-card {
        border-bottom: none;
        border-right: 1px solid #e0e0e0;
        min-width: 100px;
        flex-shrink: 0;
    }

    .activity-day-card:last-child {
        border-right: none;
    }

    .activity-day-card.active {
        border-left: none;
        border-bottom: 4px solid #F9C349;
        padding-left: 16px;
        padding-bottom: 12px;
    }

    .activity-header {
        padding: 16px;
    }

    .activity-item-row {
        padding: 16px;
    }
}

/* ============================================
   ROOM TYPE DROPDOWN & AMENITIES STYLES
   ============================================ */

/* Room Type Dropdown Styling */
.room-type-dropdown {
    width: 100%;
    padding: 8px 12px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    border: 2px solid #000000;
    background-color: #FFFFFF;
    cursor: pointer;
    border-radius: 4px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    transition: all 0.2s ease;
}

.room-type-dropdown:hover {
    background-color: #F9F9F9;
}

.room-type-dropdown:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Room Description Section */
.room-description-section {
    grid-column: 1 / -1;
    padding: 20px 0;
    border-top: 1px solid #E5E5E5;
    margin-top: 12px;
}

.room-description-title {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
}

.room-description-content {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4A4A4A;
}

.room-description-content p {
    margin: 0 0 8px 0;
}

.room-description-content p:last-child {
    margin-bottom: 0;
}

/* Room Amenities Grid */
.room-amenities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 10px;
    padding-top: 0px;
    border-top: 0px;
}

.amenity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 16px;
    background-color: #F9F9F9;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.amenity-card:hover {
    background-color: #F0F0F0;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.amenity-icon {
    width: 32px;
    height: 32px;
    display: none;
    margin: 0 auto 12px auto;
    object-fit: contain;
}

.amenity-label {
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #838383;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amenity-value {
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
}

/* Responsive Design for Amenities */
@media (max-width: 768px) {
    .room-amenities {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .amenity-card {
        padding: 16px 12px;
    }

    .amenity-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
    }

    .amenity-label {
        font-size: 11px;
    }

    .amenity-value {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .room-amenities {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .room-description-section {
        padding: 16px 0;
    }

    .room-description-title {
        font-size: 15px;
    }

    .room-description-content {
        font-size: 13px;
    }
}

/* ============================================================================
   CUSTOM TYPE NOTICE BANNERS
   ============================================================================ */

.custom-type-notice {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    margin-bottom: 4px;
    border-left: 3px solid;
    grid-column: 1 / -1;
}

.custom-type-notice--warning {
    border-left-color: #FFB700;
    background: rgba(255, 183, 0, 0.08);
    color: #78350f;
}

.custom-type-notice--info {
    border-left-color: #345CFE;
    background: rgba(52, 92, 254, 0.06);
    color: #1e3a5f;
}

/* ── Activity Capacity Warnings ── */
.service-item.activity-under-min {
    border-left: 10px solid #FFB700;
}
.service-item.activity-over-max {
    border-left: 10px solid #FF0A1F;
}
.activity-capacity-warning {
    /* Float at the bottom-right of the title column so the chip never
       fights for vertical space inside the fixed-height service-header
       row (100px). Without this, adding the location row pushed the
       chip out below the row boundary into the panel beneath. */
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0;
    z-index: 5;
}
.capacity-under-min {
    background: #FFB700;
    color: #090920;
    padding: 4px 8px;
}
.capacity-over-max {
    background: rgb(255 0 22);
    color: #ffffff;
    padding: 4px 8px;
}

/* On narrower viewports the service header reflows to stacked rows,
   so absolute positioning would clip the chip against the next column.
   Restore inline flow + tighter padding there. */
@media (max-width: 768px) {
    .activity-capacity-warning {
        position: static;
        display: inline-block;
        margin-top: 4px;
    }
}

/* Activity unavailability warning */
.service-item.activity-unavailable {
    border-left: 3px solid #FF0A1F;
}
.activity-unavailable-warning {
    display: inline-block;
    align-items: center;
    padding: 12px 16px;
    margin: 0;
    background: #FF0A1F;
    border-bottom: 2px solid #FF0A1F;
    font-family: 'Google Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.4;
}
.activity-unavailable-warning .warning-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* ── Day Header Warning Indicators ── */

/* Yellow: capacity warnings (min not met) — left border accent */
.day-card.day-has-warning .day-header {
    border-left: 4px solid #FFB700;
    transition: border-color 0.3s ease;
}

/* Red: critical errors (unavailable activity, max exceeded) — left border accent */
.day-card.day-has-error .day-header {
    border-left: 4px solid #FF0A1F;
    transition: border-color 0.3s ease;
}

/* Error takes precedence over warning */
.day-card.day-has-error.day-has-warning .day-header {
    border-left-color: #FF0A1F;
}

/* Guest limit warning banner in pricing card */
.guest-limit-warning {
    background: #FFF3CD;
    border: 1px solid #FFB700;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #856404;
}
.guest-limit-warning.at-maximum {
    background: #FFE0E0;
    border-color: #FF0A1F;
    color: #CC0000;
}

/* ============================================================
 * Price-hidden variants (April 2026 platform pivot).
 * For travelers, curators, hotels, activity hosts, and anonymous
 * visitors the per-service price columns are not rendered at all.
 * The remaining columns absorb the freed space so the layout
 * stays clean instead of leaving empty slots.
 * ============================================================ */

/* Day header collapses from 4 columns (info | title | price | chevron)
 * to 3 columns (info | title | chevron). The chevron's explicit
 * `grid-column: 4` from the base rules is overridden so it sits
 * in column 3 of the no-prices variant. */
.day-header.day-header--no-prices {
    grid-template-columns: 180px 1fr 60px;
}
.day-header.day-header--no-prices .day-chevron {
    grid-column: 3;
}

/* Room table collapses from 8 columns to 6. Room Type widens from
 * 3fr to 4fr to absorb roughly the same proportion as the dropped
 * Per Room + Total columns. */
.room-table.room-table--no-prices .room-table-header,
.room-table.room-table--no-prices .room-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
}

/* Service header collapses from 4 cols (chevron | date | title | price)
 * to 3 cols (chevron | date | title) when the price column is not
 * rendered. Title-col loses its right border so we don't show a stray
 * separator at the now-rightmost edge. !important is required because
 * the base .service-header rule pins a 4-column template; when only
 * 3 children are present the empty 150px slot would otherwise stay
 * visible beside the title. */
.day-card.day-card--no-prices .service-header {
    grid-template-columns: 80px 180px 1fr !important;
}
.day-card.day-card--no-prices .service-title-col {
    border-right: none;
}

/* ============================================================
   HOST EXPERIENCES (Phase 5b) — traveller checklist inside a
   hosted home-stay service card. Additive block below the rooms
   table; brand palette (#7700FF selected accent, #30B300 price).
   ============================================================ */
.homestay-experiences {
    margin: 16px 0 8px;
    padding: 14px 16px;
    background: #faf7ff;
    border: 1px solid #ece3ff;
    border-radius: 12px;
}
.homestay-experiences-label {
    margin: 0 0 10px;
    font-weight: 600;
    color: #090920;
    font-size: 14px;
}
.homestay-experiences-hint {
    font-weight: 400;
    color: #6b6b7b;
    font-size: 12px;
}
.homestay-experiences-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* NOTE: the flat .homestay-experience-item / -check / -name / -price rules that
   used to live here are gone — the shared accordion card (.hx-exp-card, styled in
   homestay-experience-card.css) now renders in every context (property page, tour
   preview, itinerary builder). The old display:flex rule fought the card's stacked
   head/body layout, so it was removed (2026-07-06). The list + label rules below
   stay: the card CSS doesn't define them. */

/* ============================================================
   LOCAL EXPERTS (HX-2, restyled 2026-07-21) — attached Local
   Expert experiences use the SAME hx-exp-card as host experiences
   (markup from sarisara_render_local_expert_card). The builder
   wrapper is a seamless CONTINUATION of the experiences list: no
   background, no border, no heading — it exists only so selection
   save/reload can tell expert cards from host-experience cards.
   ============================================================ */
.homestay-localexperts-section {
    margin: 6px 0 8px;
    padding: 0;
    background: none;
    border: none;
}
.homestay-localexperts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.homestay-localexpert-check {
    width: 16px;
    height: 16px;
    accent-color: #7700FF;
    flex: 0 0 auto;
}
/* Read-only preview block (selected experts on the tour/inquiry preview). */
.homestay-localexperts-preview {
    margin: 16px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.homestay-localexperts-title {
    margin: 0 0 6px;
    font-weight: 600;
    color: #090920;
    font-size: 14px;
}
.homestay-localexpert-price {
    font-weight: 700;
    color: #30B300;
    font-size: 13px;
    flex: 0 0 auto;
}

/* ============================================================
   LISTING RETIREMENT — never-silent render (Phase 2,
   docs/LISTING-RETIREMENT-PLAN.md). A service whose listing was
   removed (gone) or is retiring renders from the stored blob with
   a red flag — on BOTH the tour preview and the inquiry surface.
   Self-contained: does not depend on inquiry-public.css banners.
   ============================================================ */
.service-component.svc-listing-gone,
.service-component.svc-listing-retiring {
    border: 1.5px solid #FF0A1F !important;
}
.service-component.svc-listing-gone::before,
.service-component.svc-listing-retiring::before {
    background: #FF0A1F !important; /* tone stripe turns red */
}
.svc-gone-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff5f6;
    border-bottom: 1px solid #ffd6da;
    padding: 9px 16px;
    font-family: inherit;
}
.svc-gone-banner .provider-status-badge.unavailable {
    background: #FF0A1F;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.svc-gone-banner .svc-gone-note {
    font-size: 12.5px;
    color: #090920;
    line-height: 1.45;
}

/* TAKEN OUT OF THE TRIP (9 Oct 2026, audit item 18). Muted, struck through and
   labelled — not red: nothing is wrong, the service was removed by agreement.
   Same grey as the trace page's muted pill. */
.service-component.svc-taken-off .service-title-name,
.service-component.svc-taken-off .service-title-location {
    text-decoration: line-through;
    color: #5b5b73;
}
.service-component.svc-taken-off .svc-tile,
.service-component.svc-taken-off .service-price-display {
    opacity: .55;
}
.svc-taken-off-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #f1f1f5;
    border-bottom: 1px solid #e2e2ea;
    padding: 9px 16px;
    font-family: inherit;
}
.svc-taken-off-banner .provider-status-badge {
    background: #5b5b73;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.svc-taken-off-banner .svc-gone-note {
    font-size: 12.5px;
    color: #090920;
    line-height: 1.45;
}

/* Day-level flag: a day containing a removed/retiring service is findable
   with everything collapsed (same grammar as the capacity day flag). */
.day-card.day-has-gone-service {
    border: 1.5px solid #FF0A1F !important;
    box-shadow: 0 0 0 3px rgba(255, 10, 31, 0.08) !important;
}
.day-card.day-has-gone-service .day-label,
.day-card.day-has-gone-service .day-label .day-number {
    color: #FF0A1F !important;
}

/* HX — "New" badge on a recently accepted Local Expert (builder checklist) */
.homestay-localexpert-badge {
    display: inline-block;
    background: #7700FF;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 8px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: 1px;
}

/* ============================================================
   CARD MESSAGE RIBBON — on the PREVIEW / INQUIRY surfaces.
   
   Chiran, 1 Sep 2026: "I really liked it — that does not add any
   additional space to the service component. It is just half a
   ribbon." Ported from the builder so ONE message style serves
   every itinerary surface instead of five different ones.
   
   error red · warning amber · success green · info violet ·
   neutral grey (a general message that is none of the above).
   ============================================================ */
.sarisara-itinerary-redesign .service-item,
.sarisara-itinerary-redesign .day-card { position: relative; }

.sarisara-itinerary-redesign .svc-ribbon {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 8;
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    max-width: calc(100% - 40px);
    padding: 15px 20px 5px; border-radius: 0 0 12px 12px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: #fff; white-space: nowrap;
}
.sarisara-itinerary-redesign .svc-ribbon.error   { background:#FF0A1F; box-shadow:0 5px 9px -3px rgba(255,10,31,.35); }
.sarisara-itinerary-redesign .svc-ribbon.warning { background:#F2A024; box-shadow:0 5px 9px -3px rgba(242,160,36,.35); }
.sarisara-itinerary-redesign .svc-ribbon.success { background:#2BA23C; box-shadow:0 5px 9px -3px rgba(43,162,60,.35); }
.sarisara-itinerary-redesign .svc-ribbon.info    { background:#7700FF; box-shadow:0 5px 9px -3px rgba(119,0,255,.3); }
.sarisara-itinerary-redesign .svc-ribbon.neutral { background:#E7E7EE; color:#3A3A4A; box-shadow:0 5px 9px -3px rgba(9,9,32,.14); }

/* Room between the tucked ribbon and the card content. */
.sarisara-itinerary-redesign .service-item.has-svc-ribbon > .service-header,
.sarisara-itinerary-redesign .service-item.has-svc-ribbon > .service-item-header { padding-top: 26px !important; }

/* Actions are LINKS, never buttons — a padded button would make the ribbon
   taller, and its whole value is that it adds no height to the card. */
.sarisara-itinerary-redesign .svc-ribbon__text { overflow:hidden; text-overflow:ellipsis; }
.sarisara-itinerary-redesign .svc-ribbon__acts { display:inline-flex; align-items:center; gap:14px; margin-left:14px; }
.sarisara-itinerary-redesign .svc-ribbon__acts::before {
    content:''; width:1px; height:11px; margin-right:14px; display:inline-block;
    background:rgba(255,255,255,.4);
}
.sarisara-itinerary-redesign .svc-ribbon.neutral .svc-ribbon__acts::before { background:rgba(9,9,32,.22); }
.sarisara-itinerary-redesign .svc-ribbon__act {
  /* A <button> keeps the browser's own surface unless it is told not to, which
     painted a pale block behind the link inside the red ribbon. */
  appearance:none; -webkit-appearance:none; background-color:transparent !important;
  box-shadow:none !important; border-radius:0;
    display:inline-flex; align-items:center; gap:4px;
    font:inherit; letter-spacing:inherit; text-transform:inherit;
    color:inherit; background:none; border:0; padding:0; cursor:pointer;
    text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); opacity:.92;
}
.sarisara-itinerary-redesign .svc-ribbon.neutral .svc-ribbon__act { border-bottom-color:rgba(9,9,32,.28); }
.sarisara-itinerary-redesign .svc-ribbon__act:hover { opacity:1; border-bottom-color:currentColor; }
.sarisara-itinerary-redesign .svc-ribbon__act svg { width:12px; height:12px; }

@media (max-width: 640px) {
    .sarisara-itinerary-redesign .svc-ribbon {
        white-space:normal; max-width:calc(100% - 20px); font-size:10px; padding:13px 14px 5px;
    }
}

/* PUBLIC PLACE — ENTRANCE TICKET (20 Oct 2026). The ticket is never in the price;
   the traveller pays cash at the gate. Gold = information, not a problem. */
.svc-gate-ticket {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #FFF8E6;
    border-bottom: 1px solid #FFE3A3;
    padding: 9px 16px;
    font-family: inherit;
}
.svc-gate-ticket--trip {
    border: 1px solid #FFE3A3;
    border-radius: 12px;
    margin-bottom: 16px;
}
.svc-gate-ticket .provider-status-badge {
    background: #FFB700;
    color: #090920;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.svc-gate-ticket .svc-gone-note {
    font-size: 12.5px;
    color: #090920;
    line-height: 1.45;
}