/* ============================================================================
   Tour Itinerary Preview — Sarisara Design-System re-skin (2026-07-06, Chiran)
   ----------------------------------------------------------------------------
   Re-skins the tour-preview itinerary from the old bold-black "Figma" grid to
   the Sarisara Lanka Design System (purple-led, 'Google Sans', shadcn/ui). Tokens +
   itinerary component patterns come straight from the design-system codebase
   (~/Downloads/Sarisara Lanka Design System/: src/styles/theme.css +
   src/app/pages/itinerary.tsx — Trip Day Card, Accommodation Block, etc.).

   Loaded AFTER itinerary-redesign.css, so these rules win. Scoped to
   .sarisara-itinerary-redesign; !important only where the old CSS / Elementor
   overrides used !important on the same selector.
   ============================================================================ */

.sarisara-itinerary-redesign {
    /* Brand */
    --sr-primary: #7700FF;
    --sr-primary-light: #F0E5FF;
    --sr-primary-ultra: #F8F4FF;
    --sr-primary-dark: #5C00CC;
    --sr-green: #30B300;
    --sr-green-light: #E6F9E0;
    --sr-green-dark: #228A00;
    --sr-gold: #FFB700;
    --sr-gold-light: #FFF5D6;
    --sr-gold-dark: #CC9200;
    --sr-error: #E5243B;
    /* Neutrals + text */
    --sr-bg: #F8F8F8;
    --sr-surface: #FFFFFF;
    --sr-border: #E8E8EE;
    --sr-text: #090902;
    --sr-text-2: #5A5A6E;
    --sr-text-3: #8E8EA0;
    /* Radius / shadow */
    --sr-r-sm: 8px;
    --sr-r-md: 12px;
    --sr-r-lg: 16px;
    --sr-shadow-1: 0 1px 2px rgba(9,9,2,0.04), 0 1px 3px rgba(9,9,2,0.06);
    --sr-shadow-2: 0 2px 4px rgba(9,9,2,0.04), 0 4px 12px rgba(9,9,2,0.08);
    --sr-shadow-glow: 0 0 0 3px rgba(119,0,255,0.10);
    font-family: 'Google Sans', system-ui, -apple-system, sans-serif;
}

/* Kill the Elementor chrome-strip that forced padding:0 / radius:0 / grey bg
   onto the service header (the day header is now the builder's .aib-day-header,
   which sets its own white bg). */
.sarisara-itinerary-redesign .service-header {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   LEVEL 1 — Day card  →  design-system "Trip Day Card (expandable)"
   --------------------------------------------------------------------------- */
/* Match the builder exactly: white card, subtle grey border, rounded-xl. */
.sarisara-itinerary-redesign .day-card {
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-r-lg);
    background: var(--sr-surface);
    box-shadow: var(--sr-shadow-1);
    overflow: hidden;
    margin-bottom: 16px;
}

/* LEVEL 1 — Day header: TRUE REUSE of the builder.
   The header now emits the builder's exact DOM (.aib-day-header + .aib-collapse-day
   chevron, .day-label/.day-number, .day-rule, .day-head-main[.day-title-display +
   .day-head-meta], .day-price-col) and is styled 1:1 by itinerary-builder-redesign.css.
   We add only the PREVIEW-ONLY bridges the builder can't supply (no editable state):
     (a) reset the <button> chrome (the header is a real <button> here, a <div> in the builder),
     (b) drive chevron-rotation + open-border off our aria-expanded hook (the builder keys
         these off .aib-day.day-collapsed, which the read-only preview never toggles),
     (c) style .day-price-col directly — the JS live-updaters overwrite its text node, so we
         can't lean on the builder's nested `.day-head-price b`. */
.sarisara-itinerary-redesign.aib-preview-mode .day-header {
    -webkit-appearance: none; appearance: none;
    width: 100%; text-align: left; font-family: inherit; color: inherit;
}
.sarisara-itinerary-redesign.aib-preview-mode .day-header[aria-expanded="true"] .aib-collapse-day .svgico {
    transform: rotate(180deg);
}
.sarisara-itinerary-redesign.aib-preview-mode .day-header[aria-expanded="true"] {
    border-bottom: 1px solid var(--sr-border) !important;
}
.sarisara-itinerary-redesign.aib-preview-mode .aib-day-header .day-price-col {
    flex: none; width: 84px; text-align: right; white-space: nowrap;
    font-size: 16px !important; font-weight: 700 !important; color: var(--sr-text) !important;
    border: 0 !important; padding: 0 !important; font-variant-numeric: tabular-nums;
}
/* itinerary-redesign.css pollutes the reused day-header text (these legacy rules
   aren't on the dashboard builder, so the preview diverged):
   (1) line-height:0 on .day-header -> inherited into .day-title-display (overflow:hidden)
       so the DAY TITLE collapsed to 0 height and vanished;
   (2) `.day-date-value { flex:1; padding:0 10px; display:flex; font-size:18px }` -> the
       date grew to fill the row and pushed the calendar icon + "· N services" onto a
       second line.
   Restore the builder's exact text layout: title on top, meta on ONE row below. */
.sarisara-itinerary-redesign .aib-day-header { line-height: 1.4 !important; }
.sarisara-itinerary-redesign .aib-day-header .day-head-meta {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    gap: 9px !important;
}
.sarisara-itinerary-redesign .aib-day-header .day-meta-date {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    flex: none !important; padding: 0 !important; white-space: nowrap !important;
}
.sarisara-itinerary-redesign .aib-day-header .day-date-value {
    flex: none !important; padding: 0 !important; display: inline !important;
    font-size: 12.5px !important; font-weight: 500 !important; white-space: nowrap !important;
    min-height: 0 !important; line-height: 1.4 !important;
}
.sarisara-itinerary-redesign .aib-day-header .day-svc-count { white-space: nowrap !important; }

/* ---------------------------------------------------------------------------
   LEVEL 2 — Day content (expanded body)
   --------------------------------------------------------------------------- */
.sarisara-itinerary-redesign .day-content-inner {
    padding: 18px;
}

/* Day meta fields (image 143): DAY COUNT + DIRECTION as light grey CARDS in a row,
   generous white space above/below; airport transfer as a soft LABEL chip. */
.sarisara-itinerary-redesign .day-meta-fields {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;
    margin: 4px 0 20px;
}
.sarisara-itinerary-redesign .day-meta-box {
    background: #f7f7f9 !important; border: 1px solid #ececf1 !important; border-radius: 12px !important;
    padding: 12px 16px !important; margin: 0 !important;
    display: flex; flex-direction: column; gap: 6px; justify-content: center;
    min-width: 148px;
}
/* labels (Chiran's CSS: 11px / 1.3 / 700 / muted / uppercase) */
.sarisara-itinerary-redesign .day-field-label,
.sarisara-itinerary-redesign .direction-label {
    font-size: 11px !important; line-height: 1.3 !important; font-weight: 700 !important;
    color: var(--sr-text-2); text-transform: uppercase; letter-spacing: .05em; margin: 0 !important;
}
.sarisara-itinerary-redesign .day-field-value {
    background: transparent; border: none; padding: 0;
    font-size: 15px; font-weight: 500; color: var(--sr-text);
}
.sarisara-itinerary-redesign .direction-value {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: none; padding: 0; margin: 0;
    font-size: 15px !important; font-weight: 500; color: var(--sr-text);
}
.sarisara-itinerary-redesign .direction-value .ric-svg-route,
.sarisara-itinerary-redesign .direction-value .svgico { color: var(--sr-primary); flex: 0 0 auto; }
/* Airport transfer -> soft-tint LABEL chip (NOT a solid-fill button): light violet
   bg + violet text + subtle border + plane icon, no hover, cursor default — so it
   reads as an informational tag, not something clickable (Chiran's concern). */
.sarisara-itinerary-redesign .airport-transfer-label {
    align-self: center;
    display: inline-flex !important; align-items: center; gap: 6px;
    background: var(--sr-primary-light) !important; color: var(--sr-primary-dark) !important;
    border: 1px solid rgba(119,0,255,.18) !important;
    border-radius: 999px !important; font-weight: 600 !important; font-size: 12.5px !important;
    padding: 8px 14px !important; margin: 0 !important; cursor: default; white-space: nowrap;
}
.sarisara-itinerary-redesign .airport-transfer-label .svgico { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   LEVEL 3 — Service components: the header (card shell, icon tile, type label,
   name/location, date/time pills, price) is styled entirely by the REUSED
   itinerary-builder-redesign.css (`.aib-redesign .service-component.t-* …`),
   because the card now carries `.service-component .t-{tone} .collapsed` and the
   header emits the builder's exact markup. We only:
     (a) hide the builder's EDIT chrome (read-only preview), and
     (b) keep the expanded-content styling below (preview .service-details-inner,
         which the builder's .service-body rules don't target).
   --------------------------------------------------------------------------- */
.aib-preview-mode .service-date-input,
.aib-preview-mode .service-time-input,
.aib-preview-mode .service-date-placeholder,
.aib-preview-mode .service-time-placeholder,
.aib-preview-mode .service-date-edit-icon,
.aib-preview-mode .service-time-edit-icon,
.aib-preview-mode .add-service-btn,
.aib-preview-mode .add-day-btn { display: none !important; }
/* The read-only preview renders NO delete button, and itinerary-redesign.css:24-26
   forces .service-header padding:0 !important (an Elementor guard) — together those
   flattened the builder's header padding and jammed the price against the card's right
   edge. Restore the builder's EXACT header padding (13px 14px 13px 16px, all types) so
   the price sits at its natural inset like the builder. */
.sarisara-itinerary-redesign .service-component.t-hotel .service-header,
.sarisara-itinerary-redesign .service-component.t-activity .service-header,
.sarisara-itinerary-redesign .service-component.t-curated .service-header,
.sarisara-itinerary-redesign .service-component.t-custom .service-header {
    padding: 8px 14px 8px 16px !important;   /* Chiran, 25 Oct 2026 (was 13px top and bottom) */
}

/* The pollution guard in itinerary-redesign.css:36-41 blanket-forces
   text-transform:none / letter-spacing:normal on ALL .day-header/.service-header
   descendants (to stop Elementor uppercasing the titles). But it also kills the
   builder's intended uppercase on the two TYPE labels — and only on the preview
   (that rule isn't loaded on the dashboard builder), which is why "HOTEL"/"DAY 1"
   rendered as "Hotel"/"Day 1" here. Restore the builder's exact values on just
   those two labels so preview == builder. */
.sarisara-itinerary-redesign .service-title-column .svc-type-label {
    text-transform: uppercase !important; letter-spacing: .08em !important;
}
.sarisara-itinerary-redesign .aib-day-header .day-label {
    text-transform: uppercase !important; letter-spacing: .12em !important;
}

/* Service-header title / price normalisation across ALL types (images 121/122).
   The builder only styles .t-hotel + .service-activity titles and a hotel-scoped
   .svc-rate-ref, so the CUSTOM title fell through to pollution (14px/400/lh26) and
   the custom "$40" rate lost its weight; the ACTIVITY Adult/Child labels use
   .price-row-label (not the builder's .price-label) so they weren't styled. */
.sarisara-itinerary-redesign .service-component .service-title-name {
    font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important;
    color: var(--sr-text) !important;
    /* Long titles truncate with an ellipsis (builder behaviour) so they never push
       the date/time/price out of the header (image 134). Full title shows on expand. */
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.sarisara-itinerary-redesign .service-component .service-title-column {
    flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important;
}
.sarisara-itinerary-redesign .service-component .svc-rate-ref {
    font-size: 15px !important; font-weight: 700 !important; color: var(--sr-text) !important; line-height: 1.25 !important;
}
.sarisara-itinerary-redesign .service-component .svc-rate-ref small {
    font-size: 11px !important; font-weight: 500 !important; color: var(--sr-text-3) !important;
}
.sarisara-itinerary-redesign .service-activity .price-row-label {
    font-size: 11px !important; font-weight: 600 !important; color: var(--sr-text-3) !important;
}
.sarisara-itinerary-redesign .service-activity .price-row b {
    font-size: 14px !important; font-weight: 700 !important; color: var(--sr-text) !important;
}

/* --- 2026-07-07 batch (images 130-133) --- */
/* Date/time pills are read-only LABELS in the preview: no hover cursor, no
   highlight/colour change (they auto-update from the calendar selection). */
.sarisara-itinerary-redesign.aib-preview-mode .dt-chip { cursor: default !important; }
.sarisara-itinerary-redesign.aib-preview-mode .dt-chip:hover {
    border-color: var(--sr-border) !important; color: inherit !important; background: transparent !important;
}
.sarisara-itinerary-redesign.aib-preview-mode .dt-chip:hover .dt-ico,
.sarisara-itinerary-redesign.aib-preview-mode .dt-chip:hover .service-date-display,
.sarisara-itinerary-redesign.aib-preview-mode .dt-chip:hover .service-time-display { color: inherit !important; }

/* The ACTIVITY collapse chevron had no bordered box (the builder only styles the
   t-hotel + custom collapse buttons). Give it the same accordion box as the rest. */
.sarisara-itinerary-redesign .service-activity .collapse-service-btn {
    width: 28px !important; height: 28px !important; flex: none;
    border: 1px solid var(--sr-border) !important; border-bottom: 1px solid var(--sr-border) !important;
    background: #fff !important; border-radius: 8px !important;
    display: grid !important; place-items: center; color: var(--sr-text-3);
    padding: 0 !important; margin: 0 !important; box-shadow: none !important; cursor: pointer;
}
.sarisara-itinerary-redesign .service-activity .collapse-service-btn .svgico { width: 16px !important; height: 16px !important; }

/* Activity Adult/Child price: a 2-column grid (label | value) so labels align and the
   "$" values align, with a tight column gap (no big Adult-to-$ gap, $ sticks to number —
   image 138), and "/day" on its own THIRD line spanning both rows (image 137). The whole
   block sits at the right of the header, lining up with the hotel's price (image 133). */
.sarisara-itinerary-redesign .service-activity .service-price-display {
    display: grid !important; grid-template-columns: auto auto;
    column-gap: 6px !important; row-gap: 0px;
    align-items: baseline; justify-content: end; line-height: 18px;
}
.sarisara-itinerary-redesign .service-activity .price-row { display: contents !important; }
.sarisara-itinerary-redesign .service-activity .price-row-label {
    justify-self: start; text-align: left;
    font-size: 11px !important; font-weight: 600 !important; color: var(--sr-text-3) !important;
}
.sarisara-itinerary-redesign .service-activity .price-row b {
    justify-self: start; text-align: left; min-width: 0 !important; letter-spacing: 0 !important;
    font-size: 14px !important; font-weight: 700 !important; color: var(--sr-text) !important;
}
/* kill the legacy 5px margin between the "$" and the number ($ sticks to value, img 138) */
.sarisara-itinerary-redesign .service-activity .price-row b .price-value { margin: 0 !important; }
.sarisara-itinerary-redesign .service-activity .price-per-line {
    grid-column: 1 / -1; justify-self: end; text-align: right;
    font-size: 11px !important; font-weight: 500 !important; color: var(--sr-text-3) !important;
}

/* Kill the legacy -40px service-card bleed (from itinerary-redesign.css) so the
   builder card sits inside the day body. */
.aib-preview-mode .service-item { margin-left: 0 !important; margin-right: 0 !important; }
/* The reused card shell keeps its click affordance without a native button. */
.aib-preview-mode .service-header { cursor: pointer; -webkit-appearance: none; appearance: none; }

.sarisara-itinerary-redesign .service-details-inner {
    padding: 4px 16px 16px;
    background: #fff;
}
/* Remove the legacy 3px black border-top under the expanded service header
   (itinerary-redesign.css .service-details) — the builder blends the header
   gradient straight into the body with no divider. */
.sarisara-itinerary-redesign .service-details {
    border-top: 0 !important; margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   Expanded service content — clean up the broken bold-black look
   --------------------------------------------------------------------------- */
/* Guard any legacy broken description images. */
.sarisara-itinerary-redesign .service-details-inner .broken-img { display: none !important; }

/* Name + location LINKS (open the listing / location in a new tab):
   leading service-type icon (bed/activity/custom/pin) + trailing external-link icon. */
.sarisara-itinerary-redesign .hotel-name-link { margin: 0 0 4px; }
.sarisara-itinerary-redesign .hotel-name-link a {
    display: inline-flex; align-items: center; gap: 8px; line-height: 1.3;
    font-size: 16px; font-weight: 700; color: var(--sr-text); text-decoration: none;
}
.sarisara-itinerary-redesign .hotel-location-link { margin: 0 0 12px; }
.sarisara-itinerary-redesign .hotel-location-link a {
    display: inline-flex; align-items: center; gap: 6px; line-height: 1.3;
    font-size: 13px; font-weight: 500; color: var(--sr-text-2); text-decoration: none;
}
.sarisara-itinerary-redesign .hotel-name-link a:hover,
.sarisara-itinerary-redesign .hotel-location-link a:hover { color: var(--sr-primary); }
.sarisara-itinerary-redesign .hotel-name-link a:hover .link-text,
.sarisara-itinerary-redesign .hotel-location-link a:hover .link-text { text-decoration: underline; }
/* icons: leading type icon (violet/muted), trailing external-link icon (muted) */
.sarisara-itinerary-redesign .hotel-name-link a > .svgico { width: 16px; height: 16px; flex: none; color: var(--sr-text-3); }
.sarisara-itinerary-redesign .hotel-location-link a > .svgico { width: 14px; height: 14px; flex: none; color: var(--sr-text-3); }
.sarisara-itinerary-redesign .hotel-name-link a .ext-ico,
.sarisara-itinerary-redesign .hotel-location-link a .ext-ico {
    width: 13px !important; height: 13px !important; color: var(--sr-text-3) !important; flex: none;
}
.sarisara-itinerary-redesign .details-description {
    font-size: 14px; line-height: 1.6; color: var(--sr-text-2);
}
.sarisara-itinerary-redesign .read-more-toggle {
    color: var(--sr-primary) !important; font-weight: 600; font-size: 13px;
    text-decoration: none; border: none; background: none; cursor: pointer;
}

/* Image carousel — soft rounded frame like the builder's photo tile */
.sarisara-itinerary-redesign .image-carousel {
    border: none !important; border-radius: var(--sr-r-md);
    overflow: hidden; margin: 12px 0 14px;
    box-shadow: none;
}

/* Room table → clean design-system table (no 3px black grid) */
.sarisara-itinerary-redesign .room-table,
.sarisara-itinerary-redesign .room-table-header,
.sarisara-itinerary-redesign .room-table-row,
.sarisara-itinerary-redesign .room-allocation-section,
.sarisara-itinerary-redesign .room-allocation-section table,
.sarisara-itinerary-redesign .room-allocation-section th,
.sarisara-itinerary-redesign .room-allocation-section td {
    border-color: var(--sr-border) !important;
}
.sarisara-itinerary-redesign .room-table,
.sarisara-itinerary-redesign .room-allocation-section table {
    border: 1px solid var(--sr-border) !important;
    border-radius: var(--sr-r-md);
    overflow: hidden;
    border-collapse: separate; border-spacing: 0;
}
.sarisara-itinerary-redesign .room-table *,
.sarisara-itinerary-redesign .room-allocation-section table * {
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;
    border-color: var(--sr-border) !important;
}
.sarisara-itinerary-redesign .room-table-header,
.sarisara-itinerary-redesign .room-allocation-section thead,
.sarisara-itinerary-redesign .room-allocation-section thead th {
    background: var(--sr-bg) !important;
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--sr-text-3) !important;
    text-transform: uppercase; letter-spacing: .04em;
}
.sarisara-itinerary-redesign .room-allocation-section td,
.sarisara-itinerary-redesign .room-table-row > div {
    font-size: 13px; color: var(--sr-text); padding: 10px 12px !important;
}

/* ============================================================================
   PHASE 3 — remaining components to finish the builder-look port
   ============================================================================ */

/* (Day-date calendar icon is now a real .svgico sibling emitted by the builder DOM —
   the old ::before data-URI hack is gone. .day-date-value is styled as .day-date-display
   by itinerary-builder-redesign.css; SIBS still rewrites only its text node.) */

/* Carousel → TOP of the expanded body (builder order), without moving markup */
.sarisara-itinerary-redesign .service-details-inner { display: flex; flex-direction: column; }
.sarisara-itinerary-redesign .service-details-inner > * { min-width: 0; }
.sarisara-itinerary-redesign .image-carousel { order: -1; margin-top: 0 !important; }

/* ---------------------------------------------------------------------------
   Activity PROGRAM (expanded activity body) → green design-system look (img 123).
   Was: gold (#FFB700) active day tab + 2px black borders everywhere. Now: green
   selected tab, clean 1px grey borders, soft cards.
   Markup: .activity-two-column-layout > .activity-day-navigation > .activity-day-card
   (.active) + .activity-content-area > .activity-header + .activity-day-content
   > .activity-day-meta + .activity-items-list
   --------------------------------------------------------------------------- */
/* recolour every black grid line in the program to the grey token */
.sarisara-itinerary-redesign .service-activity .activity-two-column-layout *,
.sarisara-itinerary-redesign .service-activity .activity-two-column-layout {
    border-color: var(--sr-border) !important;
}
/* day tabs (left rail) — violet pills (Chiran's CSS) */
.sarisara-itinerary-redesign .service-activity .activity-day-navigation {
    background: #fff !important; border-right: none !important;
    display: flex !important; flex-direction: column; overflow: hidden;
}
.sarisara-itinerary-redesign .service-activity .activity-day-card {
    background: var(--sr-surface) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: 30px !important;
    color: var(--sr-text-2) !important; font-weight: 700 !important; font-size: 15px !important;
    box-shadow: none !important;
    padding: 10px !important; margin: 5px 30px !important; text-align: center;
}
.sarisara-itinerary-redesign .service-activity .activity-day-card.active {
    background: #7700ff36 !important;
    border-color: #7700ff !important;
    color: #7700ff !important;
    border-radius: 30px !important;
}
/* content card + header divider */
.sarisara-itinerary-redesign .service-activity .activity-content-area {
    background: var(--sr-surface) !important;
    border: 1px solid var(--sr-border) !important; border-radius: var(--sr-r-md) !important;
    overflow: hidden;
}
.sarisara-itinerary-redesign .service-activity .activity-header {
    border-bottom: 1px solid var(--sr-border) !important; border-width: 0 0 1px 0 !important;
    padding: 12px 14px !important;
}
.sarisara-itinerary-redesign .service-activity .activity-title {
    font-size: 14px !important; font-weight: 700 !important; color: var(--sr-text) !important; margin: 0 !important;
}
.sarisara-itinerary-redesign .service-activity .activity-day-subtitle {
    font-size: 12px !important; font-weight: 500 !important; color: var(--sr-text-3) !important; margin: 2px 0 0 !important;
}
/* timeline items — clean, no black separators */
.sarisara-itinerary-redesign .service-activity .activity-day-meta {
    border: 0 !important; color: var(--sr-text-2) !important;
    font-size: 12.5px !important; padding: 10px 14px !important;
}
.sarisara-itinerary-redesign .service-activity .activity-items-list {
    padding: 0 14px 12px !important;
}
.sarisara-itinerary-redesign .service-activity .activity-day-content {
    border: 0 !important;
}

/* Expand / Collapse All controls → design-system outline buttons */
.sarisara-itinerary-redesign button.itinerary-control-btn.expand-all,
.sarisara-itinerary-redesign button.itinerary-control-btn.collapse-all,
.sarisara-itinerary-redesign .itinerary-control-btn {
    border: 1px solid var(--sr-border) !important;
    border-radius: 30px !important;
    background: #fff !important;
    color: var(--sr-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 18px 16px !important;
    box-shadow: var(--sr-shadow-1) !important;
    transition: background-color .2s, border-color .2s, color .2s !important;
}
.sarisara-itinerary-redesign button.itinerary-control-btn.expand-all:hover,
.sarisara-itinerary-redesign button.itinerary-control-btn.collapse-all:hover {
    background: var(--sr-primary-ultra) !important;
    border-color: rgba(119,0,255,.30) !important;
    color: var(--sr-primary) !important;
}

/* ---------------------------------------------------------------------------
   ACCOMMODATION room table → Sarisara Design System
   Markup: .room-table.optimized-room-table (grid) >
     .room-table-header (grid of .col-*) + .room-row (grid of .col-*) +
     .room-amenities (4-col grid of .amenity-card > .amenity-label + .amenity-value)
   Replaces the legacy bold-black grid (itinerary-redesign.css:534+/1415+).
   --------------------------------------------------------------------------- */
.sarisara-itinerary-redesign .room-table {
    border: 1px solid var(--sr-border) !important;
    border-radius: var(--sr-r-md) !important; overflow: hidden;
    background: var(--sr-surface); box-shadow: none;
    margin: 12px 0 14px;
}
/* neutralise the legacy 3px black per-cell grid */
.sarisara-itinerary-redesign .room-table *,
.sarisara-itinerary-redesign .room-table-header > div,
.sarisara-itinerary-redesign .room-row > div { border: 0 !important; }

/* header row — light-grey cells with thin column dividers (Chiran's screenshot).
   Alignment left as-is (room-type left, numeric cols centred) so labels sit over
   their already-centred data. */
.sarisara-itinerary-redesign .room-table-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--sr-border) !important;
    padding: 0 !important;
}
.sarisara-itinerary-redesign .room-table-header > div {
    font-size: 10.5px !important; font-weight: 700 !important;
    color: #a0a0a0 !important;
    text-transform: uppercase !important; letter-spacing: .05em !important; line-height: 1.2 !important;
    background: #fafafa !important;
    border-right: 1px solid var(--sr-border) !important;
    padding: 13px 16px !important;
}
.sarisara-itinerary-redesign .room-table-header > div:last-child { border-right: 0 !important; }
/* data row */
.sarisara-itinerary-redesign .room-row {
    padding: 0 !important; align-items: center;
    border-bottom: 1px solid var(--sr-border) !important;
}
.sarisara-itinerary-redesign .room-row > div {
    font-size: 13px !important; font-weight: 500 !important; color: var(--sr-text) !important;
    padding: 14px 16px !important;
}
.sarisara-itinerary-redesign .room-row .col-room-type { font-weight: 700 !important; line-height: 18px !important; }
.sarisara-itinerary-redesign button.itinerary-control-btn.collapse-all { margin: 10px 10px 0 0 !important; }
/* prices → black (per screenshot, not green) */
.sarisara-itinerary-redesign .room-row .col-price,
.sarisara-itinerary-redesign .room-row .col-total {
    color: var(--sr-text) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums;
}
/* meal / extra-bed selects → clean bordered select, NO drop shadow (Chiran) */
.sarisara-itinerary-redesign .room-meal-select,
.sarisara-itinerary-redesign .room-extra-bed-select {
    border: 1px solid var(--sr-border) !important; border-radius: var(--sr-r-sm) !important;
    background: var(--sr-surface) !important; color: var(--sr-text) !important;
    font-size: 12px !important; font-weight: 600 !important; padding: 5px 10px !important;
    box-shadow: none !important; transition: border-color .15s;
}
.sarisara-itinerary-redesign .room-meal-select:hover,
.sarisara-itinerary-redesign .room-extra-bed-select:hover,
.sarisara-itinerary-redesign .room-meal-select:focus,
.sarisara-itinerary-redesign .room-extra-bed-select:focus {
    border-color: var(--sr-primary) !important; box-shadow: none !important; outline: none !important;
}

/* room-detail stat cards (ROOM SIZE / BEDS / MAX ADULTS / MAX CHILDREN) */
.sarisara-itinerary-redesign .room-amenities {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important; margin: 0 !important;
    padding: 10px 40px 10px !important;
    border-top: 0 !important;
    background: #fafafa !important;
}
/* Homestay "Experiences at this home" block (Chiran's CSS) */
.sarisara-itinerary-redesign .homestay-experiences {
    margin: 16px 0 8px; padding: 14px 16px;
    background: #fafafa; border: 1px solid #e7e7ee; border-radius: 12px;
}
/* The itinerary's `.sarisara-itinerary-redesign button { background:rgba(255,255,255,.3) }`
   (0,0,2,0!) bleeds onto the experience toggle + carousel arrows (0,0,1,0). Restore
   solid white + their radii with a higher-specificity override. */
.sarisara-itinerary-redesign .hx-exp-card .hx-exp-toggle { background: #ffffff !important; border-radius: 8px !important; }
.sarisara-itinerary-redesign .hx-exp-card .hx-exp-toggle:hover { background: #f8f8fa !important; }
.sarisara-itinerary-redesign .hx-exp-card .hx-exp-nav,
.sarisara-itinerary-redesign .hx-exp-card .hx-exp-nav:hover { background: #ffffff !important; border-radius: 50% !important; }
.sarisara-itinerary-redesign .amenity-card {
    border: 1px solid var(--sr-border) !important; border-radius: var(--sr-r-md) !important;
    background: var(--sr-surface) !important; box-shadow: none !important;
    padding: 12px 10px !important; text-align: center;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.sarisara-itinerary-redesign .amenity-card .amenity-label {
    font-size: 10.5px !important; font-weight: 700 !important; color: var(--sr-text-3) !important;
    text-transform: uppercase !important; letter-spacing: .05em !important; text-decoration: none !important;
}
.sarisara-itinerary-redesign .amenity-card .amenity-value {
    font-size: 18px !important; font-weight: 700 !important; color: var(--sr-text) !important;
    text-decoration: none !important;
}

/* Inquiry-page provider-status banner → Sarisara pills/buttons */
.sarisara-itinerary-redesign .provider-status-banner {
    border-radius: var(--sr-r-sm); border: 1px solid var(--sr-border);
    background: var(--sr-bg); padding: 10px 12px; margin: 0 0 10px;
}
.sarisara-itinerary-redesign .provider-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 12px;
}
.sarisara-itinerary-redesign .provider-status-badge.confirmed     { background: var(--sr-green-light); color: var(--sr-green-dark); }
.sarisara-itinerary-redesign .provider-status-badge.pending       { background: var(--sr-gold-light); color: var(--sr-gold-dark); }
.sarisara-itinerary-redesign .provider-status-badge.alt-suggested { background: var(--sr-gold-light); color: var(--sr-gold-dark); }
.sarisara-itinerary-redesign .provider-status-badge.unavailable   { background: #FDE7EA; color: #B3081A; }
/* Accept / Reject / Replace Service.
   itinerary-redesign.css:18 applies a blanket Elementor reset to EVERY button
   inside the itinerary — `padding: 0 !important; background-color: #ffffff4d
   !important` — which stripped these three of their padding and their colour.
   The result was white label text on a near-white pill, unreadable and jammed
   against its container (Chiran 2026-08-17). These are action buttons on a
   money decision, so they are restored explicitly, in brand colours, at a
   specificity that beats the reset. */
.sarisara-itinerary-redesign .btn-accept-alt,
.sarisara-itinerary-redesign .btn-reject-alt,
.sarisara-itinerary-redesign .btn-replace-service {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background-color .15s ease, border-color .15s ease !important;
}
.sarisara-itinerary-redesign .btn-accept-alt {
    background-color: #30B300 !important; color: #fff !important;
}
.sarisara-itinerary-redesign .btn-accept-alt:hover,
.sarisara-itinerary-redesign .btn-accept-alt:focus-visible {
    background-color: #279000 !important;
}
.sarisara-itinerary-redesign .btn-reject-alt {
    background-color: #fff !important; color: #FF0A1F !important;
    border-color: #FF0A1F !important;
}
.sarisara-itinerary-redesign .btn-reject-alt:hover,
.sarisara-itinerary-redesign .btn-reject-alt:focus-visible {
    background-color: #FFF1F2 !important;
}
.sarisara-itinerary-redesign .btn-replace-service {
    background-color: #7700FF !important; color: #fff !important;
}
.sarisara-itinerary-redesign .btn-replace-service:hover,
.sarisara-itinerary-redesign .btn-replace-service:focus-visible {
    background-color: #6400d6 !important;
}
/* The reset also clears the text colour of any span the label is wrapped in. */
.sarisara-itinerary-redesign .btn-accept-alt *,
.sarisara-itinerary-redesign .btn-reject-alt *,
.sarisara-itinerary-redesign .btn-replace-service * {
    color: inherit !important;
}
/* Breathing room between the status pill and its action buttons. */
.sarisara-itinerary-redesign .provider-alt-actions { gap: 10px !important; }
.sarisara-itinerary-redesign .provider-status-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* Responsive: keep the soft look on mobile (override the old black-border stacks) */
@media (max-width: 767px) {
    /* Day header wraps naturally (builder flex); just tighten the fixed side widths. */
    .sarisara-itinerary-redesign.aib-preview-mode .aib-day-header .day-label { width: 84px !important; }
    .sarisara-itinerary-redesign.aib-preview-mode .aib-day-header .day-price-col { width: 70px !important; }
    .sarisara-itinerary-redesign .service-header { flex-wrap: wrap; }
    .sarisara-itinerary-redesign .service-title-col { flex: 1 1 100%; order: 3; }
    .sarisara-itinerary-redesign .service-date-col { order: 4; flex-direction: row; align-items: center; }
    .sarisara-itinerary-redesign .service-price-col { order: 5; }
    .sarisara-itinerary-redesign .day-content-inner { padding: 12px 12px 14px; }
}

/* ---- FIX: the global tour-header rule `.single.st-header-9 p` (added for the
   tour description paragraph) leaks its padding/line-height/font-size onto the
   itinerary's <p> elements (DIRECTION label, service title/location) — the
   DIRECTION label rendered 62px tall from a stray 10/30px padding. Neutralize
   it inside the itinerary so our own type/spacing wins. ---- */
.sarisara-itinerary-redesign .day-content-inner p,
.sarisara-itinerary-redesign .service-header p,
.sarisara-itinerary-redesign .service-details-inner p {
    padding: 0 !important;
}
.sarisara-itinerary-redesign .direction-label { font-size: 11px !important; line-height: 1.3 !important; }
.sarisara-itinerary-redesign .service-title-text { font-size: 15px !important; line-height: 1.3 !important; }
.sarisara-itinerary-redesign .service-location-text { font-size: 12.5px !important; line-height: 1.3 !important; }
.sarisara-itinerary-redesign .day-field-label { line-height: 1.35 !important; }
.sarisara-itinerary-redesign .day-field-value,
.sarisara-itinerary-redesign .direction-value { line-height: 1.35 !important; }

/* ============================================================================
   INQUIRY LEAK GUARD (Chiran 2026-07-10 — inquiry must equal the preview 1:1)
   On inquiry pages the AIB injects ~1,400 lines of UNSCOPED builder CSS at
   runtime (#sarisara-aib-minimalist-styles) for the guide's edit mode. Being
   injected last, it beats every stylesheet and repaints the READ-ONLY
   itinerary with the old black-frame look (3px borders, black DAY underline,
   100px grid headers — img 54). These counters pin the read-only itinerary
   (.aib-preview-mode, which the edit-mode builder never carries) to the
   builder-redesign values. The injected sheet still styles edit mode freely.
   ============================================================================ */
.sarisara-itinerary-redesign.aib-preview-mode .aib-day-header .day-label {
    grid-column: auto !important;
    grid-row: auto !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--sr-violet, #7700FF) !important;
    text-align: center !important;
    flex: none !important;
    width: 104px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: none !important;
}
.sarisara-itinerary-redesign.aib-preview-mode .aib-day-header .day-label .day-number {
    color: var(--sr-violet, #7700FF) !important;
    font-weight: 800 !important;
    border: 0 !important;
    background: none !important;
}
.sarisara-itinerary-redesign.aib-preview-mode .day-card {
    border: 1px solid var(--sr-border) !important;
    border-radius: var(--sr-r-lg) !important;
    background: var(--sr-surface) !important;
    box-shadow: var(--sr-shadow-1) !important;
}
.sarisara-itinerary-redesign.aib-preview-mode .day-header {
    border: 0 !important;
    background: transparent !important;
    height: auto !important;
}
.sarisara-itinerary-redesign.aib-preview-mode .day-header[aria-expanded="true"] {
    border-bottom: 1px solid var(--sr-border) !important;
}
.sarisara-itinerary-redesign.aib-preview-mode .service-item,
.sarisara-itinerary-redesign.aib-preview-mode .service-component {
    border-color: var(--sr-border) !important;
}

/* LEAK GUARD, round 2 (Chiran img 55/56): the AIB-injected sheet also draws
   2px #030213 COLUMN DIVIDERS through activity/curator/custom service headers
   (date/time + price columns). The preview has none — kill them on the
   read-only itinerary. The dt-chip pill borders are untouched. */
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-datetime-col,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-date-col,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-time-display,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-title-col,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-price-col,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-chevron,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .price-split-top,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .price-split-bottom,
.sarisara-itinerary-redesign.aib-preview-mode .service-activity .activity-header {
    border: 0 !important;
}

/* LEAK GUARD, round 3: the injected sheet's column dividers use BOTH class
   spellings (-col and -column). Zero every left/right border on the service
   header's direct columns — the preview has none; the dt-chip pills sit
   deeper and keep their own borders. */
.sarisara-itinerary-redesign.aib-preview-mode .service-header > *,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-title-column,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-datetime-column,
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-price-column {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* LEAK GUARD, round 4: the last survivor — the injected sheet's
   .service-price-display border (the stroke to the right of Adult/Child
   prices on activity/curator rows). */
.sarisara-itinerary-redesign.aib-preview-mode .service-price-display {
    border: 0 !important;
}

/* ============================================================================
   PRICE TYPOGRAPHY PARITY (Chiran imgs 63/64, 2026-07-10): activity/curator/
   custom header prices match the hotel's "from $200" — 15px/700 values,
   tight Adult/Child rows, right-aligned.
   ============================================================================ */
.sarisara-itinerary-redesign .service-price-display .price-row b,
.sarisara-itinerary-redesign .service-price-display .svc-rate-ref,
.sarisara-itinerary-redesign .service-price-display .svc-flat-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sr-text) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
.sarisara-itinerary-redesign .service-price-display .price-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* Chiran's rule (verbatim) — custom price block */
.aib-redesign .service-custom .service-price-display {
    grid-column: auto !important;
    grid-row: auto !important;
    border: 0 !important;
    display: block !important;
    text-align: right !important;
    flex: none;
    padding: 0 !important;
    min-width: 64px;
    line-height: 16px;
}

/* Date + time chips sit SIDE BY SIDE (img 60) — the injected sheet's grid
   stacked them vertically on the inquiry. */
.sarisara-itinerary-redesign.aib-preview-mode .service-header .service-datetime-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: auto !important;
    border: 0 !important;
    padding: 0 !important;
}

/* PREVIEW MODE = READ-ONLY (Chiran img 61): on the inquiry page the date and
   time pickers must not even OPEN until the guide enters Edit Itinerary —
   the wrapper's data-mode flips to "edit" there (which swaps in the AIB
   editor anyway). */
body.inquiry-page .inquiry-itinerary-wrapper[data-mode="preview"] .sarisara-itinerary-redesign .dt-chip,
body.inquiry-page .inquiry-itinerary-wrapper[data-mode="preview"] .sarisara-itinerary-redesign .service-date-wrapper,
body.inquiry-page .inquiry-itinerary-wrapper[data-mode="preview"] .sarisara-itinerary-redesign .service-time-wrapper,
body.inquiry-page .inquiry-itinerary-wrapper[data-mode="preview"] .sarisara-itinerary-redesign .service-datetime-col input,
body.inquiry-page .inquiry-itinerary-wrapper[data-mode="preview"] .sarisara-itinerary-redesign .service-datetime-col select {
    pointer-events: none !important;
}

/* Price rows stack vertically (Adult over Child, tight 2px gap), right-aligned
   — matching the preview reference; the /person line sits beneath. */
.sarisara-itinerary-redesign .service-component .service-price-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
    border: 0 !important;
}

/* =========================================================================
   CHEVRON UNIFICATION (Chiran 2026-07-17, review-hub round 3 — noticed on
   the preview too): ONE chevron style everywhere, the hotel service chevron
   (28x28, radius 8, uniform --line-2 border). Fixes:
   1. the day-header chevron was 36x36 radius 9 (a different control);
   2. legacy CSS leaked mixed border-colors onto the activity/custom chevrons
      (left/right #9a9aa3 vs top/bottom #dcdcd9).
   ========================================================================= */
.sarisara-itinerary-redesign .aib-day-header .aib-collapse-day {
    width: 28px !important; height: 28px !important; border-radius: 8px !important;
    border: 1px solid var(--line-2, #dcdcd9) !important;
}
.sarisara-itinerary-redesign .aib-day-header .aib-collapse-day .svgico { width: 16px !important; height: 16px !important; }
.sarisara-itinerary-redesign .service-activity .activity-collapse-btn,
.sarisara-itinerary-redesign .service-custom .collapse-service-btn,
.sarisara-itinerary-redesign .service-component .collapse-service-btn {
    border: 1px solid var(--line-2, #dcdcd9) !important;
}

/* ============================================================================
   DAY-CARD PROVIDER STATUS ROLL-UP (Chiran 2026-08-17)

   A collapsed day used to be silent: a day whose hotel had gone unavailable
   looked exactly like a day where every partner had confirmed, so the only way
   to find the one needing attention was to expand all of them. The day header
   now carries the WORST status of the services inside it, on the same colour
   scale as the service cards, plus a green tick when the whole day is settled.

     red    — a provider is unavailable, the service needs replacing
     amber  — alternative dates to decide on, or still waiting on a provider
     green  — every provider in this day has confirmed

   Follows the existing .aib-capacity-day-broken pattern above so the day-level
   flags all behave the same way.
   ============================================================================ */
.sarisara-itinerary-redesign .day-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Google Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    white-space: nowrap;
}
.sarisara-itinerary-redesign .day-provider-badge--unavailable { background: #FDE7EA; color: #B3081A; }
.sarisara-itinerary-redesign .day-provider-badge--alt         { background: var(--sr-gold-light, #FFF5D6); color: var(--sr-gold-dark, #CC9200); }
.sarisara-itinerary-redesign .day-provider-badge--pending     { background: var(--sr-gold-light, #FFF5D6); color: var(--sr-gold-dark, #CC9200); }
.sarisara-itinerary-redesign .day-provider-badge--confirmed   { background: var(--sr-green-light, #E6F9E0); color: var(--sr-green-dark, #228A00); }

.sarisara-itinerary-redesign .day-provider-tick { font-size: 12px; line-height: 1; }
.sarisara-itinerary-redesign .day-provider-count {
    font-weight: 600;
    opacity: .8;
    padding-left: 6px;
    margin-left: 2px;
    border-left: 1px solid currentColor;
}

/* Frame the whole day card so the state is readable at a glance, collapsed,
   without having to find the badge. Red outranks amber outranks green.

   NOT for a confirmed day (Chiran 30 Aug):
     > "This all-time green border around the day component needs to be removed.
     >  It should not be highlighted through the border — it's already confirmed
     >  because we have the label on the header saying all providers confirmed.
     >  That's more than enough."
   Confirmed is the normal, expected state of a day; outlining every one of them
   spends the reader's attention on nothing. The outline is kept for the states
   that need action. */
.sarisara-itinerary-redesign .day-card.day-provider-confirmed {
    border: 1px solid var(--sr-border) !important;
}

/* The tick inside the "All providers confirmed" chip, from the Sarisara icon
   set rather than the font's ✓ — a glyph renders differently on every device. */
.sarisara-itinerary-redesign .day-provider-tick {
    display: inline-flex;
    align-items: center;
}
.sarisara-itinerary-redesign .day-provider-tick .svgico {
    width: 13px;
    height: 13px;
    stroke-width: 1.6;
}
.sarisara-itinerary-redesign .day-card.day-provider-pending,
.sarisara-itinerary-redesign .day-card.day-provider-alt {
    border: 1.5px solid rgba(255, 183, 0, .55) !important;
    box-shadow: 0 0 0 3px rgba(255, 183, 0, .08) !important;
}
.sarisara-itinerary-redesign .day-card.day-provider-unavailable {
    border: 1.5px solid #FF0A1F !important;
    box-shadow: 0 0 0 3px rgba(255, 10, 31, .08) !important;
}
/* A day that needs a replacement is the one thing the guide must act on, so its
   DAY label reads red — same treatment as a capacity break. The builder pins
   the label violet with a 3-class !important rule, hence the specificity. */
.sarisara-itinerary-redesign .day-provider-unavailable .aib-day-header .day-label,
.sarisara-itinerary-redesign .day-provider-unavailable .aib-day-header .day-label .day-number {
    color: #FF0A1F !important;
}

@media (max-width: 767px) {
    /* The day header already wraps; let the badge drop to its own line rather
       than squeeze the title out. */
    .sarisara-itinerary-redesign .day-provider-badge { font-size: 11px; padding: 2px 8px; }
}

/* ============================================================================
   SERVICE PRICE — TOTALS, WITH THE BASIS UNDERNEATH
   ----------------------------------------------------------------------------
   Service rows now show what the party actually pays (a 2-night stay reads
   $170, not "from $85 /night"), so the day header is the sum of its rows.
   The rate the total is built from moves to a second line so the two never
   run together as "$1702 nights at $85".
   ========================================================================== */
.sarisara-itinerary-redesign .service-price-display .svc-rate-ref {
    display: block !important;
    text-align: right !important;
    white-space: normal !important;
}
.sarisara-itinerary-redesign .service-price-display .svc-rate-ref small,
.sarisara-itinerary-redesign .service-component .svc-rate-ref small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--sr-text-3) !important;
    white-space: nowrap !important;
}
/* "2 adults · 1 child" sits under the Adult/Child rows, same treatment. */
.sarisara-itinerary-redesign .service-price-display .price-per-line {
    display: block !important;
    margin-top: 2px !important;
    text-align: right !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--sr-text-3) !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   HIGHLIGHTS · INCLUDED · EXCLUDED — three lists, three icons
   --------------------------------------------------------------------------
   All three used the same pale tick, so a highlight looked like an inclusion.
   They now read the way they do in the partner's own editor: a gold star for
   a highlight, a green tick for what's included, a red cross for what is not.
   Same colours in both places, so a guide sees what a traveller will.
   ========================================================================== */

.st-highlight li > i,
ul.include li > i,
ul.exclude li > i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    flex: 0 0 auto;
}

/* Included — green tick */
ul.include li > i {
    background: rgba(48, 179, 0, .14) !important;
    color: #30B300 !important;
}

/* Excluded — red cross */
ul.exclude li > i {
    background: rgba(255, 10, 31, .12) !important;
    color: #FF0A1F !important;
}

/* Highlights — gold star. The theme prints a tick glyph here, so the glyph is
   replaced rather than recoloured. */
.st-highlight li > i {
    background: rgba(255, 183, 0, .18) !important;
    color: #E09E00 !important;
    position: relative;
}

.st-highlight li > i::before {
    content: '' !important;
}

.st-highlight li > i::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #E09E00;
    -webkit-mask: var(--ss-star) center / 12px 12px no-repeat;
    mask: var(--ss-star) center / 12px 12px no-repeat;
}

:root {
    --ss-star: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* Keep the row itself tidy now the icons are chips. */
.st-highlight li,
ul.include li,
ul.exclude li {
    display: flex;
    align-items: center;
}

/* The theme's spacer rule between sections. */
.st-height2 {
    height: 1px !important;
}

/* ==========================================================================
   AN EMPTY ATTRIBUTES BOX DRAWS ITS OWN BORDER
   The theme renders #st-attributes whether or not the listing has any
   attributes to show, so a tour without them got a bordered empty box sitting
   directly under another bordered box — reading as a double line.
   ========================================================================== */
#st-attributes:not(:has(li)):not(:has(.attribute-item)):not(:has(img)) {
    display: none !important;
}

/* ==========================================================================
   BUTTON HOVER IS VIOLET, NOT AMBER
   The theme hovers its buttons to its own gold. Sarisara's primary is violet;
   the pressed/active charcoal stays as it is.
   ========================================================================== */
.btn-v2:hover,
.btn-v2:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.st-btn:hover,
.st-btn:focus,
button.btn-primary:hover,
button.btn-primary:focus,
input[type="submit"].btn-primary:hover,
.form-book-wrapper .btn:hover,
.btn-book-ajax:hover,
.btn-add-cart:hover,
.st-add-cart-btn:hover,
#btn-search-hotel:hover,
.btn-inquiry:hover,
.btn-enquire:hover {
    background-color: #7700FF !important;
    border-color: #7700FF !important;
    color: #ffffff !important;
}

/* Gold-on-hover also reaches links styled as buttons. */
a.btn:hover,
a.btn-v2:hover,
a.btn-primary:hover {
    background-color: #7700FF !important;
    border-color: #7700FF !important;
    color: #ffffff !important;
}

/* ==========================================================================
   THE SEARCH BUTTON STAYS INSIDE THE SEARCH BAR
   The button is absolutely placed inside the rounded white bar, so its size is
   only ever as right as whatever CSS happens to win. Tie it to the bar itself:
   inset on the right, and never taller than the bar minus its own padding.
   ========================================================================== */
.st-search-form-el .search-form,
.st-banner-search-form .search-form {
    position: relative;
    overflow: visible;
}

.st-search-form-el .btn-search,
.st-banner-search-form .btn-search,
.st-search-form-el .button-search-wrapper,
.st-banner-search-form .button-search-wrapper {
    max-height: calc(100% - 20px);
    align-self: center;
}

.st-search-form-el .btn-search,
.st-banner-search-form .btn-search {
    right: 10px !important;
    height: auto;
    min-height: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    white-space: nowrap;
}

/* The play glyph on a hovered button has to stay legible against violet. */
span.stt-icon.stt-icon-play:hover {
    color: #ffffff !important;
}

.btn:hover span.stt-icon,
.btn-v2:hover span.stt-icon,
a.btn:hover span.stt-icon {
    color: #ffffff !important;
}

/* ============================================================================
   CONFIRMED, AND A SUGGESTION — two rows that used to be whole blocks
   ----------------------------------------------------------------------------
   Chiran, 30 August 2026. Both of these were banner rows stacked on top of a
   service header, and both made every card taller to say one short thing.
   ============================================================================ */

/* A service the provider has confirmed. The shield from the icon set's
   booking-lifecycle group, green fill and white tick, sitting at the end of the
   service name — replacing a full-width "Provider Confirmed" strip above the
   header. */
.sarisara-itinerary-redesign .svc-confirmed-mark {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    color: var(--sr-green, #30B300);
    vertical-align: -3px;
    flex: 0 0 auto;
}
.sarisara-itinerary-redesign .svc-confirmed-mark .svgico {
    width: 17px;
    height: 17px;
}

/* A provider's suggestion, in ONE row. The old block was a pale-yellow panel
   four lines tall carrying a pale-on-pale pill, a sentence and two buttons. */
.sarisara-itinerary-redesign .svc-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--sr-primary-ultra, #F8F4FF);
    border-bottom: 1px solid #E4D3FF;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sr-primary-dark, #5C00CC);
}
.sarisara-itinerary-redesign .svc-suggestion__ico {
    display: inline-flex;
    color: var(--sr-primary, #7700FF);
    flex: 0 0 auto;
}
.sarisara-itinerary-redesign .svc-suggestion__ico .svgico { width: 16px; height: 16px; }
.sarisara-itinerary-redesign .svc-suggestion__text { flex: 1 1 auto; min-width: 0; }
.sarisara-itinerary-redesign .svc-suggestion__text b { font-weight: 700; color: var(--sr-primary-dark, #5C00CC); }
.sarisara-itinerary-redesign .svc-suggestion__acts { display: flex; gap: 7px; flex: 0 0 auto; }

/* !important on background/padding only — the Traveler theme pins those on
   every <button> with !important, which flattened these to a transparent
   0-padding box (a white sliver where "Accept" should be). Everything else
   wins on specificity alone. */
.sarisara-itinerary-redesign .svc-sug-yes,
.sarisara-itinerary-redesign .svc-sug-no {
    padding: 6px 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 12.5px !important;
    font-weight: 700;
    line-height: 1.35 !important;
    height: auto !important;
    min-height: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .15s, border-color .15s, color .15s;
}
.sarisara-itinerary-redesign .svc-sug-yes {
    background: var(--sr-green, #30B300) !important;
    border-color: var(--sr-green, #30B300);
    color: #fff !important;
}
.sarisara-itinerary-redesign .svc-sug-yes:hover {
    background: #228A00 !important;
    border-color: #228A00;
}
.sarisara-itinerary-redesign .svc-sug-no {
    background: #fff !important;
    border-color: #D8D8E2;
    color: #5A5A6E !important;
}
.sarisara-itinerary-redesign .svc-sug-no:hover {
    border-color: #FF0A1F;
    color: #C1071A !important;
}

@media (max-width: 560px) {
    .sarisara-itinerary-redesign .svc-suggestion { gap: 8px; }
    .sarisara-itinerary-redesign .svc-suggestion__text { flex: 1 1 100%; }
}

/* ============================================================================
   HER GUIDE RUNS THIS SERVICE (Chiran, 5 Oct 2026)
   ----------------------------------------------------------------------------
   One quiet line under the service name on the traveller's own booking:
   "Run by Ravi Perera, your guide". Neutral on purpose — it is information,
   not a warning — so it takes the location line's muted grey and size.
   ============================================================================ */
.sarisara-itinerary-redesign .svc-own-guide {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--muted, #6B7280);
}
.sarisara-itinerary-redesign .svc-own-guide .svgico {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}


/* ACTIVITY PRICE — total on top, then one adult, then one child (Chiran, 23 Oct 2026; Design System
   "Single listing pages", 2b). The old Adult/Child line-total rows stay in the page for the sums, hidden. */
.sarisara-itinerary-redesign .service-activity .service-price-display:has(.ss-pb-total) { display: flex !important; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.sarisara-itinerary-redesign .service-activity .service-price-display > .price-row.activity-adult-price,
.sarisara-itinerary-redesign .service-activity .service-price-display > .price-row.activity-child-price,
.sarisara-itinerary-redesign .service-activity .service-price-display:has(.ss-pb-total) > .price-per-line { display: none !important; }
.sarisara-itinerary-redesign .service-price-display .ss-pb-total { font-size: 16px; font-weight: 700; color: var(--sr-text, #090920); white-space: nowrap; }
.sarisara-itinerary-redesign .service-price-display .ss-pb-unit { margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--sr-text-3, #8a8a99); white-space: nowrap; }

/* ============================================================================
   OPEN AND CLOSED DAYS — Design System 2g option A (Chiran chose it, 24 Oct 2026)
   An open day: violet edge on the left, pale violet head, filled violet ROUND button; "End of Day n" and a
   "Close Day n" button at its foot. A closed day stays plain white. Day buttons are round and violet; the
   stay/activity buttons stay small, square and grey, so the two can no longer be mixed up. Everywhere the
   shared renderer draws a trip (trip page, trip request, trace).
   ========================================================================= */
.sarisara-itinerary-redesign .day-card:has(> .day-header[aria-expanded="true"]) {
    border-color: #CDB3FF !important;
    box-shadow: inset 4px 0 0 #7700FF, 0 6px 22px -10px rgba(119,0,255,.35) !important;
}
.sarisara-itinerary-redesign .day-card > .day-header[aria-expanded="true"] { background: #FAF6FF !important; border-bottom: 1px solid #E9DCFF !important; }
.sarisara-itinerary-redesign .aib-day-header .aib-collapse-day {
    width: 38px !important; height: 38px !important; border-radius: 50% !important;
    border: 1.5px solid #D9C2FF !important; background: #fff !important; color: #7700FF !important;
    display: grid !important; place-items: center !important; flex: none !important;
}
.sarisara-itinerary-redesign .aib-day-header .aib-collapse-day .svgico { width: 18px !important; height: 18px !important; color: inherit !important; stroke: currentColor !important; }
.sarisara-itinerary-redesign .day-header[aria-expanded="true"] .aib-collapse-day { background: #7700FF !important; border-color: #7700FF !important; color: #fff !important; }
.sarisara-itinerary-redesign .day-header:hover .aib-collapse-day { border-color: #7700FF !important; }
/* the service buttons: small, square, grey */
.sarisara-itinerary-redesign .service-component .collapse-service-btn,
.sarisara-itinerary-redesign .service-item .collapse-service-btn { width: 28px !important; height: 28px !important; border-radius: 7px !important; color: #8E8EA0 !important; background: #fff !important; }
/* the foot of an open day */
.sarisara-itinerary-redesign .ss-day-end { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 18px 18px; padding-top: 12px; border-top: 1px dashed #E3D6FF; }
.sarisara-itinerary-redesign .ss-day-end span { font-family: var(--font-label, 'Google Sans', sans-serif); font-size: 12.5px; color: #8E8EA0; }
body .sarisara-itinerary-redesign button.ss-day-end__close { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
    border: 1.5px solid #7700FF; color: #7700FF; background: #fff; font-family: var(--font-label, 'Google Sans', sans-serif); font-size: 13px; font-weight: 700; line-height: 1.2; }
body .sarisara-itinerary-redesign button.ss-day-end__close:hover { background: #F6F0FF; }
body .sarisara-itinerary-redesign button.ss-day-end__close svg { width: 14px; height: 14px; transform: rotate(180deg); }
/* no violet bar on the left of an open day (Chiran, 24 Oct 2026) — the violet edge, pale head and round button stay */
.sarisara-itinerary-redesign .day-card:has(> .day-header[aria-expanded="true"]) { box-shadow: 0 6px 22px -10px rgba(119,0,255,.35) !important; }
body .sarisara-itinerary-redesign .ss-day-end button.ss-day-end__close { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 14px !important; margin: 0 !important; border-radius: 999px !important;
    border: 1.5px solid #7700FF !important; background: #fff !important; color: #7700FF !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important;
    text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; outline: none !important; }
body .sarisara-itinerary-redesign .ss-day-end button.ss-day-end__close:hover, body .sarisara-itinerary-redesign .ss-day-end button.ss-day-end__close:focus-visible { background: #F6F0FF !important; }

/* PHONE (Chiran, 24 Oct 2026, phone screenshots) ------------------------------------------------------------
   1. The day header: "DAY 3-4" kept its 104px desktop box (the 84px phone rule above lost to the preview-mode
      rule further up), so the day's name and dates were cut off on the right. On a phone the day label takes
      only the room it needs and the name / dates take the rest; the date line may wrap.
   2. A service card: the big type tile (the activity / hotel picture square) is dropped on a phone — the small
      icon beside "ACTIVITY · SLTDA" stays — so the title and place sit on the first line next to the chevron,
      and the date and time go underneath. */
@media (max-width: 600px) {
    .sarisara-itinerary-redesign .aib-day-header { gap: 10px !important; padding: 14px 12px !important; }
    .sarisara-itinerary-redesign.aib-preview-mode .aib-day-header .day-label { width: auto !important; flex: 0 0 auto !important; padding: 0 !important; font-size: 13px !important; letter-spacing: .06em !important; }
    .sarisara-itinerary-redesign .aib-day-header .day-head-main { flex: 1 1 auto !important; min-width: 0 !important; }
    .sarisara-itinerary-redesign .aib-day-header .day-head-meta { flex-wrap: wrap !important; row-gap: 2px !important; white-space: normal !important; }
    .sarisara-itinerary-redesign .service-component .service-header > .svc-tile,
    .sarisara-itinerary-redesign .service-item .service-header > .svc-tile { display: none !important; }
    .sarisara-itinerary-redesign .service-component .service-header .service-title-column { flex: 1 1 calc(100% - 44px) !important; order: 2 !important; }
    .sarisara-itinerary-redesign .service-component .service-header .svc-header-right { flex: 1 1 100% !important; order: 3 !important; }
    .sarisara-itinerary-redesign .service-component .service-header .service-datetime-col { flex-wrap: wrap !important; gap: 8px !important; }
}