/**
 * Sarisara Itinerary Booking Summary Styles
 *
 * Styles for:
 * - Frontend itinerary summary
 * - Real-time pricing display
 * - Inline booking integration
 *
 * @package Sarisara_Child
 * @since 3.0.0
 */

/* ========================================
   FRONTEND SUMMARY - Main Container
   ======================================== */

.sarisara-itinerary-frontend-summary {
    background: #ffffff;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Summary Header */
.sarisara-itinerary-frontend-summary .summary-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.sarisara-itinerary-frontend-summary .summary-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e1e1e;
}

/* Metadata Section */
.sarisara-itinerary-frontend-summary .summary-metadata {
    margin-bottom: 16px;
}

.sarisara-itinerary-frontend-summary .meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.sarisara-itinerary-frontend-summary .meta-row:last-child {
    border-bottom: none;
}

.sarisara-itinerary-frontend-summary .meta-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fc;
    border-radius: 8px;
    color: #5a67d8;
}

.sarisara-itinerary-frontend-summary .meta-content {
    flex: 1;
    font-size: 14px;
    color: #4a5568;
}

.sarisara-itinerary-frontend-summary .meta-content strong {
    color: #1e1e1e;
}

/* Locations Section */
.sarisara-itinerary-frontend-summary .summary-locations {
    margin-bottom: 16px;
    padding: 12px;
    background: #f7f9fc;
    border-radius: 8px;
}

.sarisara-itinerary-frontend-summary .locations-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #718096;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sarisara-itinerary-frontend-summary .location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sarisara-itinerary-frontend-summary .location-tag {
    background: #ffffff;
    color: #4a5568;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    border: 1px solid #e2e4e7;
}

/* Pricing Section */
.sarisara-itinerary-frontend-summary .summary-pricing {
    margin-bottom: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    color: #ffffff;
}

.sarisara-itinerary-frontend-summary .pricing-placeholder {
    text-align: center;
    padding: 20px;
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

/* Note Section */
.sarisara-itinerary-frontend-summary .summary-note {
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
}

.sarisara-itinerary-frontend-summary .note-text {
    margin: 0;
    font-size: 12px;
    color: #92400e;
    line-height: 1.5;
}

/* ========================================
   INLINE SUMMARY - Booking Form Integration
   ======================================== */

.sarisara-inline-pricing-summary {
    background: #f7f9fc;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
}

.sarisara-inline-pricing-summary .inline-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #d1d5db;
}

.sarisara-inline-pricing-summary .header-icon {
    color: #5a67d8;
}

.sarisara-inline-pricing-summary .header-text {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.sarisara-inline-pricing-summary .loading-placeholder {
    text-align: center;
    padding: 10px;
    color: #6b7280;
    font-size: 13px;
}

.sarisara-inline-pricing-summary .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #e2e4e7;
    border-top-color: #5a67d8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   DYNAMIC PRICING SUMMARY (JS Generated)
   ======================================== */

#sarisara-itinerary-booking-summary {
    margin-top: 20px;
}

.itinerary-booking-summary-content {
    background: #ffffff;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.itinerary-booking-summary-content .summary-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #1e1e1e;
}

/* Metadata Tags */
.itinerary-booking-summary-content .summary-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.itinerary-booking-summary-content .meta-item {
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #4b5563;
}

.itinerary-booking-summary-content .meta-item.days,
.itinerary-booking-summary-content .meta-item.nights {
    background: #dbeafe;
    color: #1e40af;
}

/* Price Breakdown */
.itinerary-booking-summary-content .summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.itinerary-booking-summary-content .breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.itinerary-booking-summary-content .breakdown-row .label {
    font-size: 14px;
    color: #4b5563;
}

.itinerary-booking-summary-content .breakdown-row .label .count {
    font-size: 12px;
    color: #9ca3af;
}

.itinerary-booking-summary-content .breakdown-row .value {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

/* Guide Cost with Discount */
.itinerary-booking-summary-content .breakdown-row.guide-cost .original-price {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 12px;
    margin-right: 8px;
}

.itinerary-booking-summary-content .breakdown-row.guide-cost .discounted-price {
    color: #059669;
}

.itinerary-booking-summary-content .breakdown-row.guide-cost .discount-badge {
    background: #d1fae5;
    color: #059669;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 6px;
}

/* Divider */
.itinerary-booking-summary-content .breakdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

/* Total Row */
.itinerary-booking-summary-content .breakdown-row.total-cost {
    padding-top: 12px;
}

.itinerary-booking-summary-content .breakdown-row.total-cost .label {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.itinerary-booking-summary-content .breakdown-row.total-cost .value {
    font-size: 20px;
    font-weight: 700;
    color: #5a67d8;
}

/* Hotel Warnings */
.itinerary-booking-summary-content .hotel-warnings {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 12px;
}

.itinerary-booking-summary-content .hotel-warnings .warning-item {
    font-size: 12px;
    color: #92400e;
    margin: 4px 0;
}

.itinerary-booking-summary-content .hotel-warnings .warning-item:first-child {
    margin-top: 0;
}

/* Error State */
.itinerary-booking-summary-content .summary-error,
#sarisara-itinerary-booking-summary .summary-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 16px;
    color: #991b1b;
    font-size: 13px;
    text-align: center;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .sarisara-itinerary-frontend-summary {
        padding: 16px;
        margin: 16px 0;
    }

    .sarisara-itinerary-frontend-summary .summary-title {
        font-size: 16px;
    }

    .sarisara-itinerary-frontend-summary .meta-row {
        padding: 6px 0;
    }

    .sarisara-itinerary-frontend-summary .meta-icon {
        width: 28px;
        height: 28px;
    }

    .itinerary-booking-summary-content {
        padding: 16px;
    }

    .itinerary-booking-summary-content .breakdown-row.total-cost .value {
        font-size: 18px;
    }

    .itinerary-booking-summary-content .summary-metadata {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .sarisara-itinerary-frontend-summary {
        border-radius: 8px;
    }

    .sarisara-itinerary-frontend-summary .summary-locations {
        padding: 10px;
    }

    .sarisara-itinerary-frontend-summary .location-tag {
        font-size: 11px;
        padding: 3px 8px;
    }

    .itinerary-booking-summary-content .breakdown-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .itinerary-booking-summary-content .breakdown-row .value {
        align-self: flex-end;
    }

    .itinerary-booking-summary-content .breakdown-row.total-cost {
        flex-direction: row;
        align-items: center;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

.itinerary-booking-summary-content {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Price update animation */
.itinerary-booking-summary-content .breakdown-row .value {
    transition: color 0.3s ease;
}

.itinerary-booking-summary-content .breakdown-row .value.updated {
    animation: priceFlash 0.5s ease;
}

@keyframes priceFlash {
    0% { color: #059669; }
    50% { color: #059669; transform: scale(1.05); }
    100% { color: #1f2937; }
}

/* ========================================
   DARK MODE SUPPORT (if needed)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if the theme supports it */
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .sarisara-itinerary-frontend-summary {
        border: 1px solid #000;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .sarisara-itinerary-frontend-summary .summary-pricing {
        background: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
    }
}

/* ========================================
   FRONTEND MODERN SUMMARY - Above Itinerary
   Matches Admin Design with Purple Gradient
   ======================================== */

#sarisara-frontend-itinerary-summary {
    margin-bottom: 20px;
}

#sarisara-frontend-itinerary-summary .summary-wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

/* Two-Column Layout */
#sarisara-frontend-itinerary-summary .summary-wrapper.summary-two-column {
    display: flex;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 16px 20px;
}

#sarisara-frontend-itinerary-summary .summary-column-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#sarisara-frontend-itinerary-summary .summary-column-right {
    flex-shrink: 0;
}

/* Stats Row (4 cards in a row) */
#sarisara-frontend-itinerary-summary .summary-stats-row {
    display: flex;
    gap: 10px;
}

/* Compact stat cards (100x100) */
#sarisara-frontend-itinerary-summary .stat-card.stat-card-compact {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

/* Route row */
#sarisara-frontend-itinerary-summary .summary-route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 20px;
}

#sarisara-frontend-itinerary-summary .summary-route svg {
    stroke: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

/* Dates row */
#sarisara-frontend-itinerary-summary .summary-dates-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

#sarisara-frontend-itinerary-summary .summary-dates-row svg {
    stroke: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

/* Responsive: Stack columns on mobile */
@media screen and (max-width: 768px) {
    #sarisara-frontend-itinerary-summary .summary-wrapper.summary-two-column {
        flex-direction: column;
        gap: 16px;
    }

    #sarisara-frontend-itinerary-summary .summary-column-right {
        width: 100%;
    }

    #sarisara-frontend-itinerary-summary .summary-stats-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    #sarisara-frontend-itinerary-summary .stat-card.stat-card-compact {
        width: 80px;
        height: 80px;
    }
}

/* Stats Row - Legacy (keep for backward compatibility) */
#sarisara-frontend-itinerary-summary .summary-stats {
    display: flex;
    align-items: stretch;
    padding: 16px 20px;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Stat Cards */
#sarisara-frontend-itinerary-summary .stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    width: 100px;
}

#sarisara-frontend-itinerary-summary .stat-card .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

#sarisara-frontend-itinerary-summary .stat-card .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Pricing Card */
#sarisara-frontend-itinerary-summary .pricing-card {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    width: 250px;
    background: rgb(255 255 255 / 8%);
    color: #ffffff !important;
    border-radius: 8px;
}

#sarisara-frontend-itinerary-summary .pricing-card .price-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 3px 0;
    color: #fbfbfb;
    gap: 25px;
    font-weight: 400;
}

#sarisara-frontend-itinerary-summary .pricing-card .price-row.total {
    border-top: 1px solid #e0e0e0;
    margin-top: 4px;
    padding-top: 6px;
    font-weight: 600;
    color: #ffffff;
}

#sarisara-frontend-itinerary-summary .pricing-card .price-row.total span:last-child {
    color: #ffffff;
    font-size: 14px;
}

/* Footer Row */
#sarisara-frontend-itinerary-summary .summary-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    color: #555;
    flex-wrap: wrap;
    gap: 12px;
}

#sarisara-frontend-itinerary-summary .summary-locations,
#sarisara-frontend-itinerary-summary .summary-dates {
    display: flex;
    align-items: center;
    gap: 6px;
}

#sarisara-frontend-itinerary-summary .summary-footer svg {
    color: #667eea;
    stroke: #667eea;
    flex-shrink: 0;
}

/* Price Section Headers */
#sarisara-frontend-itinerary-summary .pricing-card .price-section-header {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-top: 6px;
}

#sarisara-frontend-itinerary-summary .pricing-card .price-section-header:first-child {
    padding-top: 0;
}

#sarisara-frontend-itinerary-summary .pricing-card .price-section-header.hotel-header {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 6px;
    padding-top: 8px;
}

/* Activity subtotal row */
#sarisara-frontend-itinerary-summary .pricing-card .price-row.activity-subtotal {
    font-weight: 500;
    padding-bottom: 4px;
}

/* Grand total styling */
#sarisara-frontend-itinerary-summary .pricing-card .price-row.grand-total {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
}

#sarisara-frontend-itinerary-summary .pricing-card .price-row.grand-total span:last-child {
    font-size: 15px;
}

/* Responsive */
@media screen and (max-width: 900px) {
    #sarisara-frontend-itinerary-summary .summary-stats {
        flex-wrap: wrap;
    }

    #sarisara-frontend-itinerary-summary .pricing-card {
        margin-left: 0;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    #sarisara-frontend-itinerary-summary .summary-stats {
        padding: 12px 15px;
        gap: 8px;
    }

    #sarisara-frontend-itinerary-summary .stat-card {
        padding: 10px 12px;
        min-width: 60px;
    }

    #sarisara-frontend-itinerary-summary .stat-card .stat-value {
        font-size: 20px;
    }

    #sarisara-frontend-itinerary-summary .stat-card .stat-label {
        font-size: 10px;
    }

    #sarisara-frontend-itinerary-summary .summary-footer {
        padding: 10px 15px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   ACTIVITY BREAKDOWN SECTION
   New styles for Adult/Child detailed breakdown
   ======================================== */

.itinerary-booking-summary-content .breakdown-section.activity-breakdown {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
}

.itinerary-booking-summary-content .activity-breakdown .section-header {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.itinerary-booking-summary-content .activity-breakdown .section-header .count {
    font-weight: 400;
    color: #94a3b8;
}

.itinerary-booking-summary-content .activity-breakdown .breakdown-row {
    padding: 6px 0;
}

.itinerary-booking-summary-content .activity-breakdown .breakdown-row.activity-adults .label,
.itinerary-booking-summary-content .activity-breakdown .breakdown-row.activity-children .label {
    font-size: 13px;
    color: #475569;
}

.itinerary-booking-summary-content .activity-breakdown .breakdown-row.activity-adults .value,
.itinerary-booking-summary-content .activity-breakdown .breakdown-row.activity-children .value {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

/* Activity Total Row - Emphasized */
.itinerary-booking-summary-content .activity-breakdown .breakdown-row.activity-total {
    border-top: 1px dashed #cbd5e1;
    margin-top: 4px;
    padding-top: 10px;
}

.itinerary-booking-summary-content .activity-breakdown .breakdown-row.activity-total .label {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.itinerary-booking-summary-content .activity-breakdown .breakdown-row.activity-total .value {
    font-size: 14px;
    font-weight: 600;
    color: #5a67d8;
}

/* ========================================
   ACTIVITY HEADER PRICE ANIMATION
   Styles for frontend itinerary activity headers
   ======================================== */

/* Price value transition */
.service-item.service-activity .price-value {
    display: inline-block;
    transition: transform 0.3s ease-out, color 0.3s ease-out;
    margin-left: 5px;
}

/* Price updating animation */
.service-item.service-activity .price-value.price-updating {
    transform: scale(1.15);
    color: #059669;
}

/* Activity price display container */
.service-item.service-activity .service-price-col .price-split-top,
.service-item.service-activity .service-price-col .price-split-bottom {
    transition: background-color 0.3s ease;
}

/* ========================================
   ACTIVITY HEADER TOOLTIPS
   Custom tooltip styling for price breakdown
   ======================================== */

.service-item.service-activity .activity-adult-price,
.service-item.service-activity .activity-child-price {
    position: relative;
    cursor: help;
}

/* Tooltip on hover - using data-tooltip to avoid browser native tooltip */
/* ============================================================================
   PRICE TOOLTIP — ONE BUBBLE FOR THE ADULT/CHILD PAIR
   ----------------------------------------------------------------------------
   Adult and Child are one price group, so hovering either shows both unit
   rates stacked. It sits vertically centred against the price block and opens
   to the LEFT, which keeps it clear of the card edge and of the service header
   that used to clip it (no z-index beats an ancestor's overflow).
   ========================================================================== */
.service-item.service-activity .service-price-display[data-price-tip] {
    position: relative;
    cursor: help;
}

.service-item.service-activity .service-price-display[data-price-tip]::after {
    content: attr(data-price-tip);
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translateY(-50%);
    background: #090920;
    color: #ffffff;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    white-space: pre;               /* keeps the newline, but never wraps "Adult $18" */
    z-index: 4000;
    box-shadow: 0 8px 22px rgba(9, 9, 32, 0.28);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease-in-out;
}

/* Arrow, pointing right at the price block. */
.service-item.service-activity .service-price-display[data-price-tip]::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(100% + 6px);
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #090920;
    z-index: 4001;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease-in-out;
}

.service-item.service-activity .service-price-display[data-price-tip]:hover::after,
.service-item.service-activity .service-price-display[data-price-tip]:hover::before {
    opacity: 1;
}

/* Nothing in the row may clip a tooltip that escapes its box. */
.service-item.service-activity .service-price-display,
.service-item.service-activity .svc-header-right,
.service-item.service-activity .svc-header,
.service-item.service-activity {
    overflow: visible;
}

@media (max-width: 768px) {
    .itinerary-booking-summary-content .breakdown-section.activity-breakdown {
        padding: 10px 12px;
    }

    .itinerary-booking-summary-content .activity-breakdown .section-header {
        font-size: 11px;
    }

    .itinerary-booking-summary-content .activity-breakdown .breakdown-row .label,
    .itinerary-booking-summary-content .activity-breakdown .breakdown-row .value {
        font-size: 12px;
    }

    /* On a narrow screen there is no room to the left, so the grouped tooltip
       drops below the price block instead of beside it. */
    .service-item.service-activity .service-price-display[data-price-tip]::after {
        top: calc(100% + 8px);
        right: 0;
        transform: none;
    }

    .service-item.service-activity .service-price-display[data-price-tip]::before {
        top: calc(100% + 2px);
        right: 12px;
        transform: none;
        border-left-color: transparent;
        border-bottom-color: #090920;
    }
}

/* ========================================
   SMART HOTEL ROOM OPTIMIZATION
   Styles for dynamic hotel room allocation UI
   ======================================== */

/* Hotel card optimizing state */
.service-item.service-hotel.hotel-optimizing {
    position: relative;
}

.service-item.service-hotel.hotel-optimizing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 10;
    pointer-events: none;
}

/* Loading spinner */
.hotel-optimize-loader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 12px;
}

.loader-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #5a67d8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-text {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Room Allocation Section */
.room-allocation-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

/* Optimized Rooms Container */
.optimized-rooms {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
}

/* Allocation Header */
.allocation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.allocation-header.exact .allocation-status {
    color: #059669;
    font-weight: 600;
    font-size: 13px;
}

.allocation-header.estimate .allocation-status {
    color: #d97706;
    font-weight: 600;
    font-size: 13px;
}

.allocation-warning {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* Room List */
.room-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.room-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.room-details {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-name {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.room-quantity {
    font-size: 13px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

.room-capacity {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #64748b;
}

.capacity-adults,
.capacity-children {
    display: flex;
    align-items: center;
    gap: 4px;
}

.room-price {
    text-align: right;
}

.price-per-night {
    display: block;
    font-size: 12px;
    color: #94a3b8;
}

.price-total {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

/* Allocation Total */
.allocation-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid #e2e8f0;
}

.total-capacity {
    font-size: 12px;
    color: #64748b;
}

.total-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-price .label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.total-price .value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

/* Hotel price value updating animation */
.service-item.service-hotel .hotel-price-value.price-updating,
.service-item.service-hotel .service-price-value.price-updating {
    transform: scale(1.1);
    color: #059669;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* ========================================
   RESPONSIVE - HOTEL OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
    .room-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .room-details {
        justify-content: space-between;
    }

    .room-capacity {
        justify-content: flex-start;
    }

    .room-price {
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    .allocation-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .allocation-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ========================================
   ACTIVITY FRONTEND SUMMARY - MODERN
   Purple gradient design for Activity pages
   ======================================== */

#sarisara-activity-frontend-summary {
    margin-bottom: 20px;
}

#sarisara-activity-frontend-summary .summary-wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

/* Two-Column Layout */
#sarisara-activity-frontend-summary .summary-wrapper.summary-two-column {
    display: flex;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 16px 20px;
}

#sarisara-activity-frontend-summary .summary-column-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#sarisara-activity-frontend-summary .summary-column-right {
    flex-shrink: 0;
}

/* Stats Row (4 cards in a row) */
#sarisara-activity-frontend-summary .summary-stats-row {
    display: flex;
    gap: 10px;
}

/* Compact stat cards (100x100) */
#sarisara-activity-frontend-summary .stat-card.stat-card-compact {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

#sarisara-activity-frontend-summary .stat-card .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

#sarisara-activity-frontend-summary .stat-card .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Route row */
#sarisara-activity-frontend-summary .summary-route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 20px;
}

#sarisara-activity-frontend-summary .summary-route svg {
    stroke: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

/* Dates row */
#sarisara-activity-frontend-summary .summary-dates-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

#sarisara-activity-frontend-summary .summary-dates-row svg {
    stroke: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

/* Pricing Card */
#sarisara-activity-frontend-summary .pricing-card {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    width: 250px;
    background: rgb(255 255 255 / 8%);
    color: #ffffff !important;
    border-radius: 8px;
}

#sarisara-activity-frontend-summary .pricing-card .price-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 3px 0;
    color: #fbfbfb;
    gap: 25px;
    font-weight: 400;
}

#sarisara-activity-frontend-summary .pricing-card .price-section-header {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-top: 6px;
}

#sarisara-activity-frontend-summary .pricing-card .price-section-header:first-child {
    padding-top: 0;
}

#sarisara-activity-frontend-summary .pricing-card .price-section-header.hotel-header {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 6px;
    padding-top: 8px;
}

#sarisara-activity-frontend-summary .pricing-card .price-row.activity-subtotal {
    font-weight: 500;
    padding-bottom: 4px;
}

#sarisara-activity-frontend-summary .pricing-card .price-row.grand-total {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
}

#sarisara-activity-frontend-summary .pricing-card .price-row.grand-total span:last-child {
    font-size: 15px;
}

/* Responsive: Stack columns on mobile */
@media screen and (max-width: 768px) {
    #sarisara-activity-frontend-summary .summary-wrapper.summary-two-column {
        flex-direction: column;
        gap: 16px;
    }

    #sarisara-activity-frontend-summary .summary-column-right {
        width: 100%;
    }

    #sarisara-activity-frontend-summary .pricing-card {
        width: 100%;
    }

    #sarisara-activity-frontend-summary .summary-stats-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    #sarisara-activity-frontend-summary .stat-card.stat-card-compact {
        width: 80px;
        height: 80px;
    }
}

/* ============================================================================
   ACTIVITY / LOCAL EXPERT DAY CARDS — Sarisara design system (2026-08-18)
   ----------------------------------------------------------------------------
   Replaces the legacy 3px-black grid. This is the SAME look as the tour
   itinerary's day cards: values are copied verbatim from the tour builder's
   own stylesheet (assets/css/itinerary-builder-redesign.css, `.aib-redesign
   .aib-day…`) and from the preview re-skin (assets/css/itinerary-ds-reskin.css,
   day body + airport chip), so the two surfaces cannot drift apart.

   Styling only. Every hook the accordion JS uses is untouched:
     .day-card / .day-card-header / .day-card-content / .expanded / .collapsed
     .activity-item / .activity-item-header / .activity-item-content
     .item-gallery / .gallery-nav / .gallery-dots .dot
   `.day-date` stays a LEAF node — cascadeActivityDates() rewrites it with
   .text(), which would wipe any child icon.
   ============================================================================ */

.sarisara-activity-day-cards {
    /* tokens — mirror of .aib-redesign in itinerary-builder-redesign.css */
    --sad-card: #ffffff;
    --sad-ink: #1a1a1d;
    --sad-ink-soft: #3a3a40;
    --sad-muted: #6a6a73;
    --sad-faint: #9a9aa3;
    --sad-line: #e8e8e6;
    --sad-line-2: #dcdcd9;
    --sad-field-bg: #fafafa;
    --sad-violet: #7700FF;
    --sad-violet-tint: #F0E5FF;
    --sad-violet-dark: #5C00CC;
    --sad-act: #3c6b52;
    --sad-act-tint: #ecf2ee;
    --sad-radius: 16px;
    --sad-radius-sm: 11px;
    --sad-shadow-sm: 0 1px 2px rgba(20, 20, 30, .04);
    --sad-shadow: 0 4px 18px -8px rgba(20, 20, 30, .10);
    --sad-t: .16s ease;

    font-family: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--sad-ink);
    margin: 32px 0;
}

/* ---------------------------------------------------------------- day card */
.sarisara-activity-day-cards .day-card {
    position: relative;
    background: var(--sad-card);
    border: 1px solid var(--sad-line);
    border-radius: var(--sad-radius);
    box-shadow: var(--sad-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

/* ------------------------------------------------------------- day header */
.sarisara-activity-day-cards .day-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    height: auto;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--sad-line);
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--sad-t);
}

.sarisara-activity-day-cards .day-card.collapsed .day-card-header {
    border-bottom: 0;
}

.sarisara-activity-day-cards .day-card-header:hover {
    background-color: var(--sad-field-bg);
}

/* chevron — 36x36 bordered square (matches the tour builder's .aib-collapse-day) */
.sarisara-activity-day-cards .day-card-toggle {
    width: 36px;
    height: 36px;
    border: 1px solid var(--sad-line);
    border-radius: 9px;
    background: #ffffff;
    display: grid;
    place-items: center;
    color: var(--sad-muted);
    flex: none;
    padding: 0;
    transition: var(--sad-t);
}

.sarisara-activity-day-cards .day-card-header:hover .day-card-toggle {
    color: var(--sad-ink);
    background: var(--sad-field-bg);
    border-color: var(--sad-line-2);
}

.sarisara-activity-day-cards .day-card-toggle .svgico {
    width: 18px;
    height: 18px;
    transition: transform var(--sad-t);
}

.sarisara-activity-day-cards .day-card.expanded .day-card-toggle .svgico {
    transform: rotate(180deg);
}

/* DAY n label + vertical rule */
.sarisara-activity-day-cards .day-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sad-violet);
    text-align: center;
    flex: none;
    width: 104px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    height: auto;
    border: 0;
    background: none;
    display: block;
    line-height: 1.3;
}

.sarisara-activity-day-cards .day-label .day-number {
    color: var(--sad-violet);
    font-weight: 800;
}

.sarisara-activity-day-cards .day-rule {
    width: 1px;
    align-self: stretch;
    min-height: 34px;
    background: var(--sad-line-2);
    border-radius: 1px;
    flex: none;
}

/* title + meta */
.sarisara-activity-day-cards .day-head-main {
    flex: 1;
    min-width: 0;
}

.sarisara-activity-day-cards .day-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sad-ink);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    line-height: 1.35;
}

.sarisara-activity-day-cards .day-head-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--sad-muted);
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 3px;
    flex-wrap: nowrap;
}

.sarisara-activity-day-cards .day-meta-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    white-space: nowrap;
}

.sarisara-activity-day-cards .day-head-meta .svgico {
    width: 13px;
    height: 13px;
    color: var(--sad-faint);
    flex: none;
}

.sarisara-activity-day-cards .day-date {
    display: inline;
    color: var(--sad-muted);
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.4;
    white-space: nowrap;
    padding: 0;
    height: auto;
    border: 0;
    margin: 0;
}

.sarisara-activity-day-cards .day-svc-count {
    white-space: nowrap;
}

.sarisara-activity-day-cards .day-head-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cdcdce;
    display: inline-block;
    flex: none;
}

/* --------------------------------------------------------------- day body */
.sarisara-activity-day-cards .day-card-content {
    padding: 18px;
    background: #ffffff;
    display: none;
}

.sarisara-activity-day-cards .day-card.expanded .day-card-content {
    display: block;
}

/* DIRECTION as a light grey card; airport transfer as a soft violet label chip */
.sarisara-activity-day-cards .day-meta-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin: 4px 0 20px;
}

.sarisara-activity-day-cards .day-meta-box {
    background: #f7f7f9;
    border: 1px solid #ececf1;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-width: 148px;
}

.sarisara-activity-day-cards .direction-label {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--sad-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}

.sarisara-activity-day-cards .direction-value {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--sad-ink);
    line-height: 1.35;
}

.sarisara-activity-day-cards .direction-value .svgico {
    width: 16px;
    height: 16px;
    color: var(--sad-violet);
    flex: 0 0 auto;
}

.sarisara-activity-day-cards .airport-transfer-label {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sad-violet-tint);
    color: var(--sad-violet-dark);
    border: 1px solid rgba(119, 0, 255, .18);
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
    padding: 8px 14px;
    margin: 0;
    cursor: default;
    white-space: nowrap;
}

.sarisara-activity-day-cards .airport-transfer-label .svgico {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------ item cards */
.sarisara-activity-day-cards .activity-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sarisara-activity-day-cards .activity-item {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--sad-line);
    border-radius: var(--sad-radius-sm);
    margin: 0;
    overflow: hidden;
    box-shadow: var(--sad-shadow-sm);
    transition: box-shadow var(--sad-t), border-color var(--sad-t);
}

/* activity-green left rail — same tone the tour itinerary gives activities */
.sarisara-activity-day-cards .activity-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--sad-act);
    z-index: 1;
}

.sarisara-activity-day-cards .activity-item:hover {
    box-shadow: var(--sad-shadow);
}

.sarisara-activity-day-cards .activity-item.expanded {
    border: 1.5px solid var(--sad-act);
    box-shadow: var(--sad-shadow);
}

.sarisara-activity-day-cards .activity-item-header {
    display: flex;
    align-items: center;
    gap: 13px;
    height: auto;
    padding: 13px 14px 13px 16px;
    background: #ffffff;
    border: 0;
    cursor: pointer;
    transition: background-color var(--sad-t);
}

.sarisara-activity-day-cards .activity-item-header:hover {
    background-color: var(--sad-field-bg);
}

.sarisara-activity-day-cards .activity-item.expanded .activity-item-header {
    background: linear-gradient(180deg, #dfeae4 0%, var(--sad-act-tint) 45%, #ffffff 100%);
}

/* item chevron — 28x28 bordered square */
.sarisara-activity-day-cards .item-toggle {
    width: 28px;
    height: 28px;
    border: 1px solid var(--sad-line-2);
    border-radius: 8px;
    background: #ffffff;
    display: grid;
    place-items: center;
    color: var(--sad-faint);
    flex: none;
    padding: 0;
    transition: var(--sad-t);
}

.sarisara-activity-day-cards .item-toggle .svgico {
    width: 16px;
    height: 16px;
    transition: transform var(--sad-t);
}

.sarisara-activity-day-cards .activity-item.expanded .item-toggle {
    color: var(--sad-act);
    border-color: var(--sad-act);
}

.sarisara-activity-day-cards .activity-item.expanded .item-toggle .svgico {
    transform: rotate(180deg);
}

/* item time — the itinerary's date/time pill */
.sarisara-activity-day-cards .item-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: auto;
    padding: 5px 11px;
    border: 1px solid var(--sad-line-2);
    border-radius: 999px;
    background: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sad-ink-soft);
    text-align: left;
    white-space: nowrap;
    flex: none;
    transition: var(--sad-t);
}

.sarisara-activity-day-cards .item-time .svgico {
    width: 13px;
    height: 13px;
    color: var(--sad-faint);
    flex: none;
}

.sarisara-activity-day-cards .activity-item-header:hover .item-time {
    border-color: var(--sad-act);
    color: var(--sad-act);
}

.sarisara-activity-day-cards .activity-item-header:hover .item-time .svgico {
    color: var(--sad-act);
}

.sarisara-activity-day-cards .item-title {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sad-ink);
    line-height: 1.3;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------- item expanded body */
.sarisara-activity-day-cards .activity-item-content {
    padding: 2px 16px 16px 20px;
    border: 0;
    background: #ffffff;
    display: none;
}

.sarisara-activity-day-cards .activity-item.expanded .activity-item-content {
    display: block;
}

.sarisara-activity-day-cards .item-description-label {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--sad-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 6px;
}

.sarisara-activity-day-cards .item-description {
    font-size: 14px;
    font-weight: 400;
    color: var(--sad-muted);
    line-height: 1.6;
    margin: 0 0 14px;
}

/* gallery shell — the rest (slides/nav/dots) stays in frontend-itinerary.css */
.sarisara-activity-day-cards .activity-item-content .item-gallery {
    position: relative;
    border: 1px solid var(--sad-line);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    margin-top: 0;
}

.sarisara-activity-day-cards .gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sad-faint);
    font-size: 14px;
    background: var(--sad-field-bg);
}

.sarisara-activity-day-cards .no-items {
    color: var(--sad-muted);
    font-size: 14px;
    margin: 0;
    padding: 18px;
    text-align: center;
    background: #f7f7f9;
    border: 1px solid #ececf1;
    border-radius: 12px;
}

/* ------------------------------------------------------------- responsive */
@media screen and (max-width: 768px) {
    .sarisara-activity-day-cards .day-card-header {
        gap: 12px;
        padding: 14px;
    }

    .sarisara-activity-day-cards .day-label {
        width: 74px;
        font-size: 12.5px;
        letter-spacing: .08em;
    }

    .sarisara-activity-day-cards .day-title {
        font-size: 15px;
    }

    .sarisara-activity-day-cards .day-card-content {
        padding: 14px;
    }
}

@media screen and (max-width: 640px) {
    .sarisara-activity-day-cards .day-card-header {
        flex-wrap: wrap;
    }

    .sarisara-activity-day-cards .day-rule {
        display: none;
    }

    .sarisara-activity-day-cards .day-head-main {
        flex: 1 0 100%;
        order: 3;
    }

    .sarisara-activity-day-cards .day-head-meta {
        flex-wrap: wrap;
    }

    .sarisara-activity-day-cards .activity-item-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .sarisara-activity-day-cards .item-title {
        flex: 1 0 100%;
    }

    .sarisara-activity-day-cards .activity-item-content {
        padding: 2px 14px 14px 16px;
    }
}

/* ============================================================================
   Hide the "Book / Inquiry" tabs on the single-service booking widget.
   Every booking flows through the "Inquire Now" inquiry workflow (preview →
   inquiry page → customise itinerary), so the tab switcher is redundant and
   misleads travellers. Hidden, NOT removed — the booking form (date/guests/
   Inquire Now) stays visible, and deleting this rule brings the tabs back.
   ============================================================================ */
.st-wrapper-form-booking > nav,
.st-wrapper-form-booking nav .nav-tabs#nav-tab {
    display: none !important;
}

/* ============================================================================
   SUMMARY RE-SKIN (Chiran 2026-07-09) — design-system look for the TOUR
   itinerary summary. Navy-on-white; violet ONLY as pills/buttons/accent bars;
   site default font (no DM Sans); old purple gradient retired. Pure override
   layer: every selector/class the money-JS reads is unchanged.
   ============================================================================ */
#sarisara-frontend-itinerary-summary,
#sarisara-frontend-itinerary-summary * {
    font-family: inherit;
}
#sarisara-frontend-itinerary-summary {
    position: relative;
    background: #ffffff !important;
    border: 1px solid #ece3ff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(9, 9, 32, 0.05);
    padding: 22px 26px;
    color: #090920;
}
/* Section-head violet accent pill (highlight only) */
#sarisara-frontend-itinerary-summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    height: 26px;
    width: 3px;
    background: #7700FF;
    border-radius: 0 3px 3px 0;
}
#sarisara-frontend-itinerary-summary .summary-head { margin: 0 0 16px; }
#sarisara-frontend-itinerary-summary .summary-head-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #090920;
}
#sarisara-frontend-itinerary-summary .summary-head-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6b6b7b;
}

/* Stat tiles: quiet white cards, navy numbers */
#sarisara-frontend-itinerary-summary .stat-card,
#sarisara-frontend-itinerary-summary .stat-card.stat-card-compact {
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#sarisara-frontend-itinerary-summary .stat-card .stat-value {
    color: #090920 !important;
    font-weight: 700;
}
#sarisara-frontend-itinerary-summary .stat-card .stat-label {
    color: #6b6b7b !important;
    letter-spacing: 0.06em;
}

/* Route / capacity / dates rows: navy text, muted icons */
#sarisara-frontend-itinerary-summary .summary-route,
#sarisara-frontend-itinerary-summary .summary-dates-row {
    color: #090920 !important;
}
#sarisara-frontend-itinerary-summary .summary-route svg,
#sarisara-frontend-itinerary-summary .summary-dates-row svg {
    color: #6b6b7b !important;
    stroke: #6b6b7b !important;
}
/* "Fits up to N" is a PILL (violet allowed) */
#sarisara-frontend-itinerary-summary .summary-capacity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e3d5ff;
    border-radius: 999px;
    padding: 5px 14px;
    color: #7700FF !important;
    font-weight: 700;
    font-size: 13px;
    width: fit-content;
}
#sarisara-frontend-itinerary-summary .summary-capacity svg {
    color: #7700FF !important;
    stroke: #7700FF !important;
}

/* Pricing column: white card, gray uppercase section heads, navy money */
#sarisara-frontend-itinerary-summary .pricing-card {
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #090920 !important;
}
#sarisara-frontend-itinerary-summary .pricing-card .price-section-header {
    color: #6b6b7b !important;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #eeeaf6 !important;
}
#sarisara-frontend-itinerary-summary .pricing-card .price-row {
    color: #090920 !important;
    border-color: #eeeaf6 !important;
}
#sarisara-frontend-itinerary-summary .pricing-card .price-row.grand-total {
    border-top: 2px solid #090920 !important;
    color: #090920 !important;
}
#sarisara-frontend-itinerary-summary .pricing-card .price-row.grand-total span:last-child {
    color: #090920 !important;
    font-weight: 800;
}

/* Guest-limit / capacity message — LEFT column, white card + RED accent bar */
#sarisara-frontend-itinerary-summary .guest-limit-warning {
    position: relative;
    margin: 14px 0 0;
    background: #ffffff;
    border: 1px solid #ffd6da;
    border-radius: 12px;
    padding: 12px 16px 12px 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #090920;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: #FF0A1F;
    border-radius: 0 3px 3px 0;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning.at-minimum::before { background: #FFB700; }
#sarisara-frontend-itinerary-summary .guest-limit-warning.at-minimum { border-color: #ffe9b8; }
#sarisara-frontend-itinerary-summary .guest-limit-warning .ask-guide-larger-group {
    color: #7700FF;
    font-weight: 700;
    text-decoration: none;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning .ask-guide-confirm {
    display: block;
    margin-top: 4px;
    color: #30B300;
    font-weight: 600;
}
/* Attention flash when the message triggers (auto-scroll companion) */
#sarisara-frontend-itinerary-summary .guest-limit-warning.warning-flash {
    animation: sibsWarnFlash 1.6s ease-out 2;
}
@keyframes sibsWarnFlash {
    0%   { box-shadow: 0 0 0 0 rgba(255, 10, 31, 0.35); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 10, 31, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 10, 31, 0); }
}

/* ============================================================================
   APPLY-TO-CALCULATE guest bar (booking sidebar) + date display overlay
   ============================================================================ */
.sibs-guest-apply {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 4px;
}
.sibs-guest-apply-btn {
    background: #7700FF;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 9px 26px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.sibs-guest-apply-btn:hover { background: #6600db; }
.sibs-guest-calc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b6b7b;
}
.sibs-guest-calc-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #e3d5ff;
    border-top-color: #7700FF;
    border-radius: 50%;
    animation: sibsSpin 0.8s linear infinite;
}
@keyframes sibsSpin { to { transform: rotate(360deg); } }

/* Date shown as "11 Jul 2026" — real input value stays in site format */
input.sibs-date-masked {
    color: transparent !important;
    text-shadow: none !important;
}
.sibs-date-display {
    position: absolute;
    pointer-events: none;
    color: #090920;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Re-skin: retire the inner wrapper gradient too (both rules above). */
#sarisara-frontend-itinerary-summary .summary-wrapper,
#sarisara-frontend-itinerary-summary .summary-wrapper.summary-two-column {
    background: transparent !important;
    padding: 0 !important;
}
/* Route pill + capacity pill + date row breathing room on white */
#sarisara-frontend-itinerary-summary .summary-route { margin-top: 14px; }
#sarisara-frontend-itinerary-summary .summary-dates-row { margin-top: 10px; color: #090920 !important; }

/* ============================================================================
   CHIRAN'S REFINEMENTS (2026-07-09, round 2)
   ============================================================================ */
/* Wrapper keeps its breathing room on the white card */
#sarisara-frontend-itinerary-summary .summary-wrapper,
#sarisara-frontend-itinerary-summary .summary-wrapper.summary-two-column {
    background: transparent !important;
    padding: 16px 20px !important;
}
/* Sub Total: weight 600 (was 800) */
#sarisara-frontend-itinerary-summary .pricing-card .price-row.grand-total span:last-child {
    font-weight: 600 !important;
}
/* "Fits up to N travelers" pill: weight 500 */
#sarisara-frontend-itinerary-summary .summary-capacity {
    font-weight: 500 !important;
}
/* Ask-the-guide = solid violet pill button (img 29) */
#sarisara-frontend-itinerary-summary .guest-limit-warning .ask-guide-larger-group {
    color: #ffffff !important;
    font-weight: 500;
    text-decoration: none;
    background: #7700ff;
    padding: 5px 10px;
    margin: 10px 0px 10px !important;
    display: inline-block;
    border-radius: 20px;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning .ask-guide-larger-group:hover {
    background: #6600db;
    color: #ffffff;
}

/* Apply bar: full-width, centered, separator above — the apply is COMMON to
   adults + children + infants, never visually tied to the infant row (img 32) */
.sibs-guest-apply {
    display: block;
    width: 100%;
    margin: 0px 0 4px;
    padding: 14px 0 10px;
    border-top: 1px solid #e7e3f0;
    text-align: center;
}
.sibs-guest-apply .sibs-guest-apply-btn {
    display: inline-block;
    margin: 0 auto;
    min-width: 160px;
}
.sibs-guest-apply .sibs-guest-calc {
    display: inline-flex;
    justify-content: center;
    margin-top: 4px;
}

/* Date mask: some theme skins paint input text via -webkit-text-fill-color —
   the raw 11/07/2026 must never show under the "11 Jul 2026" overlay (img 30) */
input.sibs-date-masked {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

/* ============================================================================
   CHIRAN'S REFINEMENTS (2026-07-09, round 3)
   ============================================================================ */
#sarisara-frontend-itinerary-summary .summary-wrapper,
#sarisara-frontend-itinerary-summary .summary-wrapper.summary-two-column {
    background: #ffffff !important;
    padding: 16px 20px !important;
}
#sarisara-frontend-itinerary-summary {
    background: #faf9fd !important;
}
#sarisara-frontend-itinerary-summary .pricing-card .price-row.grand-total {
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    font-weight: 600 !important;
}
/* Capacity message: BRAND VIOLET frame (img 36 — was red), LEFT-aligned */
#sarisara-frontend-itinerary-summary .guest-limit-warning {
    border-color: #e3d5ff !important;
    text-align: left !important;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning::before {
    background: #7700FF !important;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning .warning-text,
#sarisara-frontend-itinerary-summary .guest-limit-warning .ask-guide-larger-group {
    text-align: left;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning .ask-guide-larger-group {
    display: table;
    margin-left: 0 !important;
}
#sarisara-frontend-itinerary-summary .guest-limit-warning.warning-flash {
    animation: sibsWarnFlashViolet 1.6s ease-out 2;
}
@keyframes sibsWarnFlashViolet {
    0%   { box-shadow: 0 0 0 0 rgba(119, 0, 255, 0.35); }
    70%  { box-shadow: 0 0 0 9px rgba(119, 0, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(119, 0, 255, 0); }
}

/* ============================================================================
   APPLY BUTTON — a light glowing line CIRCLING the pill border (Chiran
   2026-07-09). A conic light-sweep rotates behind the button (::before);
   the violet face (::after) covers everything except a 3px ring, so the
   light visibly orbits the pill shape. Text WHITE in all states — hover is
   the same violet family with a deeper gradient, never yellow.
   ============================================================================ */
.sibs-guest-apply .sibs-guest-apply-btn {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 20px 30px !important;
    box-shadow: 0 0 14px rgba(119, 0, 255, 0.35);
}
/* The orbiting light: an oversized rotating conic sweep behind everything. */
.sibs-guest-apply .sibs-guest-apply-btn::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -150%;
    width: 200%;
    height: 400%;
    background: conic-gradient(
        #9b4dff 0deg,
        #7700FF 120deg,
        #c9a2ff 300deg,
        #ffffff 330deg,
        #9b4dff 360deg
    );
    animation: sibsOrbit 2.4s linear infinite;
}
/* The button face: solid violet, inset 3px so the rotating ring shows. */
.sibs-guest-apply .sibs-guest-apply-btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 3px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7700FF, #6f00e8);
}
.sibs-guest-apply .sibs-guest-apply-btn:hover,
.sibs-guest-apply .sibs-guest-apply-btn:focus,
.sibs-guest-apply .sibs-guest-apply-btn:active {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: 0 0 20px rgba(119, 0, 255, 0.55);
}
.sibs-guest-apply .sibs-guest-apply-btn:hover::after,
.sibs-guest-apply .sibs-guest-apply-btn:focus::after {
    background: linear-gradient(135deg, #8a1fff, #5e00cc);
}
@keyframes sibsOrbit {
    to { transform: rotate(360deg); }
}

/* Inquire Now frozen while guest changes are unapplied (Chiran 2026-07-09,
   img 50): visibly dimmed + unclickable until Apply commits the party. */
.sibs-inquire-frozen {
    pointer-events: none !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    filter: saturate(0.6);
}

/* ============================================================================
   ACTIVITY / LOCAL EXPERT SUMMARY RE-SKIN (2026-08-18)
   ----------------------------------------------------------------------------
   Retires the purple-gradient summary on activity + curator-listing pages and
   gives it the SAME design-system card as the tour itinerary summary. Values
   are the tour block's resolved values (see "SUMMARY RE-SKIN" above plus
   Chiran's rounds 2 & 3), so the two summaries stay identical by construction.
   Pure override layer — every class the money JS reads is unchanged.
   ============================================================================ */
#sarisara-activity-frontend-summary,
#sarisara-activity-frontend-summary * {
    font-family: inherit;
}
#sarisara-activity-frontend-summary {
    position: relative;
    background: #faf9fd !important;
    border: 1px solid #ece3ff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(9, 9, 32, 0.05);
    padding: 22px 26px;
    color: #090920;
}
/* Section-head violet accent pill (highlight only) */
#sarisara-activity-frontend-summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    height: 26px;
    width: 3px;
    background: #7700FF;
    border-radius: 0 3px 3px 0;
}
/* Retire the inner wrapper gradient — white card, same breathing room */
#sarisara-activity-frontend-summary .summary-wrapper,
#sarisara-activity-frontend-summary .summary-wrapper.summary-two-column {
    background: #ffffff !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-radius: 12px !important;
}
#sarisara-activity-frontend-summary .summary-head { margin: 0 0 16px; }
#sarisara-activity-frontend-summary .summary-head-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #090920;
}
#sarisara-activity-frontend-summary .summary-head-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6b6b7b;
}

/* Stat tiles: quiet white cards, navy numbers */
#sarisara-activity-frontend-summary .stat-card,
#sarisara-activity-frontend-summary .stat-card.stat-card-compact {
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#sarisara-activity-frontend-summary .stat-card .stat-value {
    color: #090920 !important;
    font-weight: 700;
}
#sarisara-activity-frontend-summary .stat-card .stat-label {
    color: #6b6b7b !important;
    letter-spacing: 0.06em;
}

/* Route / capacity / dates rows: navy text, muted icons */
#sarisara-activity-frontend-summary .summary-route,
#sarisara-activity-frontend-summary .summary-dates-row {
    color: #090920 !important;
}
#sarisara-activity-frontend-summary .summary-route { margin-top: 14px; }
#sarisara-activity-frontend-summary .summary-dates-row { margin-top: 10px; }
#sarisara-activity-frontend-summary .summary-route svg,
#sarisara-activity-frontend-summary .summary-dates-row svg {
    color: #6b6b7b !important;
    stroke: #6b6b7b !important;
}
/* "Fits up to N travelers" is a PILL (violet allowed) */
#sarisara-activity-frontend-summary .summary-capacity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e3d5ff;
    border-radius: 999px;
    padding: 5px 14px;
    color: #7700FF !important;
    font-weight: 500;
    font-size: 13px;
    width: fit-content;
}
#sarisara-activity-frontend-summary .summary-capacity svg {
    color: #7700FF !important;
    stroke: #7700FF !important;
}

/* Pricing column: white card, grey uppercase section heads, navy money */
#sarisara-activity-frontend-summary .pricing-card {
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #090920 !important;
}
#sarisara-activity-frontend-summary .pricing-card .price-section-header {
    color: #6b6b7b !important;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #eeeaf6 !important;
}
#sarisara-activity-frontend-summary .pricing-card .price-section-header.hotel-header {
    border-top: 1px solid #eeeaf6 !important;
}
#sarisara-activity-frontend-summary .pricing-card .price-row {
    color: #090920 !important;
    border-color: #eeeaf6 !important;
}
/* Grand total: the legacy purple-gradient bar (frontend-itinerary.css:434,
   unscoped) is retired here — plain navy money on the white card, exactly
   like the tour's Sub Total row. */
#sarisara-activity-frontend-summary .pricing-card .price-row.grand-total {
    background: none !important;
    background-image: none !important;
    border-top: 1px solid #eeeaf6 !important;
    border-radius: 0 !important;
    color: #090920 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
    padding: 8px 0 3px !important;
}
#sarisara-activity-frontend-summary .pricing-card .price-row.grand-total span:last-child {
    color: #090920 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}