/**
 * Tour Inquiry Booking System - Public Styles
 * FIGMA DESIGN MATCH - January 2026
 *
 * High-specificity CSS to override Traveler theme styles
 * All selectors prefixed with body.inquiry-page for maximum specificity
 *
 * @package Sarisara_Child
 * @subpackage Inquiry_Booking
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables - From Figma Design
   ========================================================================== */
:root {
    /* Primary Colors - From Figma */
    --inquiry-primary: #000000;
    --inquiry-primary-dark: #1a1a1a;
    --inquiry-success: #00ab45;
    --inquiry-success-dark: #009a3d;
    --inquiry-warning: #ffcd58;
    --inquiry-danger: #d4183d;
    --inquiry-info: #4FC1E9;

    /* Chat Bubble Colors - From Figma */
    --inquiry-bubble-user: #ffcd58;
    --inquiry-bubble-guide: #d9d9d9;

    /* Gray Scale */
    --inquiry-gray-100: #f3f3f5;
    --inquiry-gray-200: #e6e9ed;
    --inquiry-gray-300: #ccd1d9;
    --inquiry-gray-400: #969696;
    --inquiry-gray-500: #717182;
    --inquiry-gray-600: #4d4d4d;
    --inquiry-text: #000000;
    --inquiry-text-muted: #969696;

    /* Border & Radius - From Figma */
    --inquiry-border: #d9d9d9;
    --inquiry-border-dark: #000000;
    --inquiry-border-width: 1px;
    --inquiry-radius: 8px;
    --inquiry-radius-lg: 20px;
    --inquiry-radius-pill: 23px;

    /* Effects */
    --inquiry-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --inquiry-transition: 0.2s ease;

    /* Typography - DM Sans from Figma */
    --inquiry-font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   BASE STYLES - High Specificity Override
   ========================================================================== */
body.inquiry-page {
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.inquiry-page *,
body.inquiry-page *::before,
body.inquiry-page *::after {
    box-sizing: border-box !important;
}

/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */
body.inquiry-page .inquiry-page-wrapper {
    background: #ffffff !important;
    min-height: 100vh !important;
    font-family: 'Google Sans', sans-serif !important;
    /* Add top padding to prevent content from hiding under sticky Traveler header */
    padding-top: 100px !important;
}

/* Adjust for different header heights on mobile */
@media (max-width: 991px) {
    body.inquiry-page .inquiry-page-wrapper {
        padding-top: 80px !important;
    }
}

body.inquiry-page .inquiry-page-wrapper .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ==========================================================================
   PAGE HEADER - Figma Design
   ========================================================================== */
body.inquiry-page .inquiry-page-header {
    padding: 30px 0 !important;
    background: #ffffff !important;
}

body.inquiry-page .inquiry-page-breadcrumb {
    font-size: 14px !important;
    color: #969696 !important;
    margin-bottom: 15px !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-page-breadcrumb a {
    color: #000000 !important;
    text-decoration: none !important;
}

body.inquiry-page .inquiry-page-breadcrumb a:hover {
    text-decoration: underline !important;
}

body.inquiry-page .inquiry-page-breadcrumb span {
    margin: 0 8px !important;
}

/* Page Title Row */
body.inquiry-page .inquiry-page-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

body.inquiry-page .inquiry-page-title-row h1 {
    margin: 0 !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
    line-height: 1.2 !important;
}

/* Status Badge - Yellow from Figma */
body.inquiry-page .inquiry-status-badge-new {
    background: #ffb700 !important;
    color: #4d4d4d !important;
    padding: 3px 16px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-family: 'Google Sans', sans-serif !important;
    display: inline-block !important;
}

/* ==========================================================================
   DETAILS GRID - From Figma
   ========================================================================== */
body.inquiry-page .inquiry-details-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 32px !important;
    padding: 24px !important;
    background: #f3f3f5 !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
}

body.inquiry-page .inquiry-details-grid .detail-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.inquiry-page .inquiry-details-grid .detail-label {
    font-size: 12px !important;
    color: #969696 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 500 !important;
}

body.inquiry-page .inquiry-details-grid .detail-value {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* ==========================================================================
   INQUIRY META ROW - Figma Design (4 columns inline)
   ========================================================================== */
body.inquiry-page .inquiry-meta-row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 48px !important;
    padding: 20px 0 !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

body.inquiry-page .inquiry-meta-row .meta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

body.inquiry-page .inquiry-meta-row .meta-item-action {
    margin-left: auto !important;
}

body.inquiry-page .inquiry-meta-row .meta-label {
    font-size: 16px !important;
    color: #969696 !important;
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.inquiry-page .inquiry-meta-row .meta-value {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Inquiry ID - truncated with copy icon */
body.inquiry-page .inquiry-id-text {
    font-family: 'Google Sans', monospace !important;
}

body.inquiry-page .copy-inquiry-id {
    background: none !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    color: #969696 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

body.inquiry-page .copy-inquiry-id:hover {
    color: #000000 !important;
    background: #f0f0f0 !important;
}

body.inquiry-page .copy-inquiry-id.copied {
    color: #00ab45 !important;
}

/* Star icon for Tour Guide */
body.inquiry-page .star-icon {
    flex-shrink: 0 !important;
}

/* Done Customising button - inline green pill */
body.inquiry-page .btn-done-customising-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #00ab45 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 23px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Google Sans', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

body.inquiry-page .btn-done-customising-inline:hover {
    background: #009a3e !important;
    transform: translateY(-1px) !important;
}

body.inquiry-page .btn-done-customising-inline svg {
    flex-shrink: 0 !important;
}

/* Progressive reveal: hidden state for Done Customising button */
body.inquiry-page .btn-done-customising-inline.btn-done-hidden {
    display: none !important;
}

/* Reveal animation when guide replies or 5h fallback */
body.inquiry-page .btn-done-customising-inline.btn-done-revealing {
    animation: doneButtonReveal 0.4s ease-out;
}

@keyframes doneButtonReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header Actions - Legacy (kept for backwards compatibility) */
body.inquiry-page .inquiry-header-actions {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #d9d9d9 !important;
}

/* ==========================================================================
   SECOND META ROW - Tour Details (Interactive Steppers & Date)
   ========================================================================== */
body.inquiry-page .inquiry-meta-row-2 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 32px !important;
    gap: 20px !important;
}

/* Date Field Container */
body.inquiry-page .meta-date-field {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #969696 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    position: relative !important;
}

body.inquiry-page .meta-date-field:hover {
    border-color: #000000 !important;
}

body.inquiry-page .meta-date-field .calendar-icon {
    color: #969696 !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .meta-date-input {
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
    cursor: pointer !important;
    width: 110px !important;
    padding: 0 !important;
}

body.inquiry-page .meta-date-input:focus {
    outline: none !important;
}

/* Stepper Container */
body.inquiry-page .meta-stepper {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #969696 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

body.inquiry-page .meta-stepper:hover {
    border-color: #000000 !important;
}

/* Stepper Buttons */
body.inquiry-page .stepper-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    user-select: none !important;
}

body.inquiry-page .stepper-btn:hover {
    background: #f5f5f5 !important;
}

body.inquiry-page .stepper-btn:active {
    background: #e5e5e5 !important;
}

body.inquiry-page .stepper-btn:disabled {
    color: #d9d9d9 !important;
    cursor: not-allowed !important;
}

body.inquiry-page .stepper-btn:disabled:hover {
    background: #ffffff !important;
}

/* Stepper Value */
body.inquiry-page .stepper-value {
    min-width: 44px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
    padding: 0 4px !important;
}

/* Loading state for steppers */
body.inquiry-page .meta-stepper.loading,
body.inquiry-page .meta-date-field.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

body.inquiry-page .meta-stepper.loading .stepper-value::after,
body.inquiry-page .meta-date-field.loading .meta-date-input::after {
    content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 6px !important;
    border: 2px solid #000 !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: stepper-spin 0.6s linear infinite !important;
}

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

/* ==========================================================================
   FROZEN FIELD STATES
   Applied when status is customization_complete or later
   Neither party can modify frozen fields
   ========================================================================== */

/* Frozen stepper state */
body.inquiry-page .meta-stepper.stepper-frozen {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

body.inquiry-page .meta-stepper.stepper-frozen .stepper-btn {
    background-color: #ccc !important;
    cursor: not-allowed !important;
    color: #888 !important;
}

body.inquiry-page .meta-stepper.stepper-frozen .stepper-value {
    color: #666 !important;
}

/* Frozen date field state */
body.inquiry-page .meta-date-field.field-frozen {
    opacity: 0.6 !important;
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
}

body.inquiry-page .meta-date-field.field-frozen .meta-date-input {
    background-color: #f5f5f5 !important;
    color: #666 !important;
}

body.inquiry-page .meta-date-field.field-frozen .calendar-icon {
    color: #999 !important;
}

/* ==========================================================================
   CONTINUE CUSTOMISING BUTTON
   Guide action to reopen editing after traveler clicks Done Customising
   ========================================================================== */

.btn-continue-customising {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-continue-customising:hover:not(.disabled) {
    background-color: #5a6268;
}

.btn-continue-customising.disabled {
    background-color: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

.btn-continue-customising svg {
    flex-shrink: 0;
}

.btn-continue-customising .remaining-count {
    font-size: 12px;
    opacity: 0.8;
}

.btn-continue-customising .limit-reached {
    font-size: 12px;
    color: #dc3545;
}

/* ==========================================================================
   FLATPICKR CALENDAR CUSTOMIZATION
   Modern date picker styling matching Figma design
   ========================================================================== */

/* Calendar Container */
.flatpickr-calendar {
    font-family: 'Google Sans', sans-serif !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e5e5e5 !important;
    padding: 8px !important;
    width: 320px !important;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    display: none !important;
}

/* Month Navigation */
.flatpickr-months {
    padding: 8px 4px !important;
}

.flatpickr-months .flatpickr-month {
    height: 40px !important;
}

.flatpickr-current-month {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    padding-top: 8px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* Navigation Arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 8px !important;
    top: 8px !important;
    fill: #000000 !important;
    transition: background-color 0.2s ease !important;
    border-radius: 8px !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: #f5f5f5 !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
}

/* Weekday Headers */
.flatpickr-weekdays {
    height: 36px !important;
}

.flatpickr-weekday {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #969696 !important;
    text-transform: uppercase !important;
}

/* Day Grid */
.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Individual Day Cells */
.flatpickr-day {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    border-radius: 8px !important;
    height: 40px !important;
    line-height: 40px !important;
    max-width: 40px !important;
    margin: 2px !important;
    transition: all 0.15s ease !important;
}

.flatpickr-day:hover {
    background: #f5f5f5 !important;
    border-color: transparent !important;
}

/* Selected Day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Today */
.flatpickr-day.today {
    border-color: #ffcd58 !important;
}

.flatpickr-day.today:hover {
    background: #ffcd58 !important;
    border-color: #ffcd58 !important;
    color: #000000 !important;
}

.flatpickr-day.today.selected {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Disabled Days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #d9d9d9 !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* Previous/Next Month Days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d9d9d9 !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #f9f9f9 !important;
}

/* Animation */
.flatpickr-calendar.open {
    animation: flatpickrFadeIn 0.2s ease-out !important;
}

@keyframes flatpickrFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   TWO-PANEL LAYOUT - 60/40 from Figma
   ========================================================================== */
body.inquiry-page .inquiry-page-container {
    display: grid !important;
    grid-template-columns: 65% 35% !important;
    gap: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: calc(100vh - 200px) !important;
}

/* ==========================================================================
   LEFT PANEL - ITINERARY
   ========================================================================== */
body.inquiry-page .inquiry-itinerary-panel {
    background: #ffffff !important;
    padding-right: 40px !important;
    overflow-y: auto !important;
}

body.inquiry-page .inquiry-panel-header {
    padding: 20px 0 !important;
    border-bottom: 1px solid #d9d9d9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
}

body.inquiry-page .inquiry-panel-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.inquiry-page .inquiry-panel-body {
    padding: 24px 0 !important;
}

/* Trip Summary */
body.inquiry-page .inquiry-trip-summary {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    padding: 20px !important;
    background: #f3f3f5 !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
}

body.inquiry-page .inquiry-trip-summary .summary-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.inquiry-page .inquiry-trip-summary .summary-item .label {
    font-size: 12px !important;
    color: #969696 !important;
    text-transform: uppercase !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-trip-summary .summary-item .value {
    font-weight: 600 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* ==========================================================================
   ITINERARY CONTROLS BAR - Edit, Expand/Collapse, Delete buttons
   ========================================================================== */
body.inquiry-page .itinerary-controls-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    margin-bottom: 16px !important;
    gap: 16px !important;
}

body.inquiry-page .itinerary-controls-bar .controls-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.inquiry-page .itinerary-controls-bar .controls-right {
    display: flex !important;
    align-items: center !important;
}

/* Edit Itinerary Button */
body.inquiry-page .btn-edit-itinerary-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 6px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.inquiry-page .btn-edit-itinerary-top:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}

body.inquiry-page .btn-edit-itinerary-top svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}

/* Expand/Collapse Toggle Button */
body.inquiry-page .btn-expand-collapse-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 6px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.inquiry-page .btn-expand-collapse-toggle:hover {
    background: #f5f5f5 !important;
}

body.inquiry-page .btn-expand-collapse-toggle svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}

/* Delete Inquiry Button - Red text, underlined, no background */
body.inquiry-page .btn-delete-inquiry {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #dc3545 !important;
    border: none !important;
    padding: 8px 4px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

body.inquiry-page .btn-delete-inquiry:hover {
    color: #a71d2a !important;
}

/* Hide bottom Edit Itinerary button when controls bar is present */
body.inquiry-page .inquiry-action-group .btn-edit-itinerary {
    display: none !important;
}

/* Mobile Responsive Controls */
@media (max-width: 600px) {
    body.inquiry-page .itinerary-controls-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    body.inquiry-page .itinerary-controls-bar .controls-left {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body.inquiry-page .itinerary-controls-bar .controls-right {
        width: 100% !important;
        justify-content: flex-end !important;
    }

    body.inquiry-page .btn-edit-itinerary-top,
    body.inquiry-page .btn-expand-collapse-toggle {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   ITINERARY DAY CARDS - 3px Black Border from Figma
   ========================================================================== */
body.inquiry-page .inquiry-itinerary {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

body.inquiry-page .inquiry-itinerary-day {
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: -3px !important;
}

body.inquiry-page .inquiry-itinerary-day:first-child {
    border-radius: 8px 8px 0 0 !important;
}

body.inquiry-page .inquiry-itinerary-day:last-child {
    border-radius: 0 0 8px 8px !important;
    margin-bottom: 0 !important;
}

body.inquiry-page .inquiry-day-header {
    padding: 16px 20px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e6e9ed !important;
}

body.inquiry-page .inquiry-day-number {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-day-date {
    font-size: 14px !important;
    color: #969696 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-day-services {
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #f3f3f5 !important;
}

body.inquiry-page .inquiry-service-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
}

body.inquiry-page .inquiry-service-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #f3f3f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .inquiry-service-details {
    flex: 1 !important;
    min-width: 0 !important;
}

body.inquiry-page .inquiry-service-name {
    font-weight: 600 !important;
    color: #000000 !important;
    margin-bottom: 4px !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-service-meta {
    font-size: 13px !important;
    color: #969696 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-service-price {
    font-weight: 600 !important;
    color: #00ab45 !important;
    white-space: nowrap !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* ==========================================================================
   PRICING SUMMARY
   ========================================================================== */
body.inquiry-page .inquiry-pricing-summary {
    background: #f3f3f5 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-top: 24px !important;
}

body.inquiry-page .inquiry-pricing-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #e6e9ed !important;
}

body.inquiry-page .inquiry-pricing-row:last-child {
    border-bottom: none !important;
}

body.inquiry-page .inquiry-pricing-row.total-row {
    font-weight: 700 !important;
    font-size: 18px !important;
    border-top: 2px solid #ccd1d9 !important;
    margin-top: 8px !important;
    padding-top: 16px !important;
    border-bottom: none !important;
}

body.inquiry-page .inquiry-pricing-label {
    color: #4d4d4d !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-pricing-value {
    color: #000000 !important;
    font-weight: 600 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-pricing-row.total-row .inquiry-pricing-value {
    color: #00ab45 !important;
    font-size: 20px !important;
}

body.inquiry-page .inquiry-pricing-note {
    display: flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 50px !important;
    margin-top: 24px !important;
    overflow: hidden !important;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5b800 !important;
    padding: 16px 20px !important;
    border-right: 2px solid #1a1a1a !important;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-icon svg {
    width: 28px !important;
    height: 28px !important;
    color: #1a1a1a !important;
    stroke-width: 2.5 !important;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-text {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0px !important;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-text p {
    margin: 0 !important;
    color: #1a1a1a !important;
    font-size: 15px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 16px 28px !important;
    font-size: 15px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    margin: 8px !important;
    transition: background 0.2s ease !important;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-btn:hover {
    background: #333333 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   DELETE INQUIRY ACTION - Below Grand Total Note
   ========================================================================== */
body.inquiry-page .inquiry-delete-action {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 16px !important;
}

body.inquiry-page .inquiry-delete-action .btn-delete-inquiry {
    background: transparent !important;
    border: none !important;
    color: #dc3545 !important;
    font-size: 14px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
    transition: color 0.2s ease !important;
}

body.inquiry-page .inquiry-delete-action .btn-delete-inquiry:hover {
    color: #a71d2a !important;
}

/* The guide's "Decline this plan" sits beside Delete (4 Oct 2026, I015). Its look
   is the existing red-outline guide Decline button further down this file. */
body.inquiry-page .inquiry-delete-action {
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    /* Room below, so the buttons never touch the green "Traveler has accepted
       the itinerary" box that follows (Chiran, 9 Oct 2026). */
    margin-bottom: 28px !important;
}
body.inquiry-page .payment-delete-action .btn-decline-inquiry {
    margin-right: 20px;
}

/* ==========================================================================
   CHECK WHY MODAL
   ========================================================================== */
.check-why-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    /* display is controlled via inline style - do not use !important */
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

.check-why-modal {
    background: #ffffff !important;
    border-radius: 16px !important;
    max-width: 480px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 32px !important;
    position: relative !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    margin: auto !important;
}

.check-why-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: #f0f0f0 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 0 !important;
}

.check-why-modal-close:hover {
    background: #e0e0e0 !important;
}

.check-why-modal-close svg {
    width: 18px !important;
    height: 18px !important;
    color: #333333 !important;
    stroke: #333333 !important;
}

.check-why-modal-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    background: #f5b800 !important;
    border-radius: 50% !important;
    margin: 0 auto 20px !important;
}

.check-why-modal-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #1a1a1a !important;
    stroke: #1a1a1a !important;
}

.check-why-modal-title {
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px !important;
    font-family: 'Google Sans', sans-serif !important;
    padding-right: 30px !important;
}

.check-why-modal-content {
    color: #4a4a4a !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: 'Google Sans', sans-serif !important;
}

.check-why-modal-content > p:first-child {
    margin: 0 0 14px !important;
}

.check-why-modal-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}

.check-why-modal-content ul li {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px !important;
    background: #f8f9fa !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    border-left: 3px solid #f5b800 !important;
}

.check-why-modal-content ul li strong {
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
    font-size: 14px !important;
}

.check-why-modal-content ul li span {
    color: #666666 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.check-why-modal-note {
    background: #e8f5e9 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    color: #2e7d32 !important;
    font-size: 13px !important;
    border-left: 3px solid #4caf50 !important;
    margin: 0 !important;
}

.check-why-modal-btn {
    display: block !important;
    width: 100% !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'Google Sans', sans-serif !important;
    cursor: pointer !important;
    margin-top: 20px !important;
    text-align: center !important;
}

.check-why-modal-btn:hover {
    background: #333333 !important;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .check-why-modal-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        padding-top: 40px !important;
    }

    .check-why-modal {
        padding: 24px 20px !important;
        max-height: calc(100vh - 80px) !important;
        border-radius: 12px !important;
    }

    .check-why-modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .check-why-modal-close svg {
        width: 16px !important;
        height: 16px !important;
    }

    .check-why-modal-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 16px !important;
    }

    .check-why-modal-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .check-why-modal-title {
        font-size: 18px !important;
        padding-right: 24px !important;
    }

    .check-why-modal-content {
        font-size: 13px !important;
    }

    .check-why-modal-content ul li {
        padding: 10px 12px !important;
    }

    .check-why-modal-content ul li strong {
        font-size: 13px !important;
    }

    .check-why-modal-content ul li span {
        font-size: 12px !important;
    }

    .check-why-modal-note {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    .check-why-modal-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   DELETE INQUIRY MODAL - Warning Theme
   ========================================================================== */
.delete-inquiry-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    box-sizing: border-box;
}

.delete-inquiry-modal {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: deleteModalFadeIn 0.2s ease-out;
}

@keyframes deleteModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.delete-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
    color: #666;
}

.delete-modal-close:hover {
    background-color: #f0f0f0;
}

.delete-modal-close svg {
    display: block;
    width: 20px;
    height: 20px;
}

.delete-modal-icon {
    text-align: center;
    margin-bottom: 16px;
}

.delete-modal-icon svg {
    color: #dc3545;
    stroke: #dc3545;
}

.delete-modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 12px 0;
}

.delete-modal-warning {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    margin: 0 0 20px 0;
}

.delete-modal-reason {
    margin-bottom: 24px;
}

.delete-modal-reason label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.delete-modal-reason textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.delete-modal-reason textarea:focus {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.delete-modal-reason textarea::placeholder {
    color: #999;
}

.delete-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.delete-modal-actions .btn-delete-cancel {
    flex: 1;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-modal-actions .btn-delete-cancel:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.delete-modal-actions .btn-delete-confirm {
    flex: 1;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    background: #dc3545;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-modal-actions .btn-delete-confirm:hover {
    background: #c82333;
}

.delete-modal-actions .btn-delete-confirm:disabled {
    background: #e9a0a7;
    cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .delete-inquiry-modal-overlay {
        padding: 16px;
    }

    .delete-inquiry-modal {
        padding: 24px 20px;
    }

    .delete-modal-icon svg {
        width: 40px;
        height: 40px;
    }

    .delete-modal-title {
        font-size: 18px;
    }

    .delete-modal-warning {
        font-size: 13px;
    }

    .delete-modal-reason label {
        font-size: 13px;
    }

    .delete-modal-reason textarea {
        padding: 10px 12px;
        font-size: 14px;
    }

    .delete-modal-actions {
        flex-direction: column;
    }

    .delete-modal-actions .btn-delete-cancel,
    .delete-modal-actions .btn-delete-confirm {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   DONE CUSTOMISING MODAL - Success Theme
   ========================================================================== */
.done-customising-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    box-sizing: border-box;
}

.done-customising-modal {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: doneModalFadeIn 0.2s ease-out;
}

@keyframes doneModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.done-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
    color: #666;
}

.done-modal-close:hover {
    background-color: #f0f0f0;
}

.done-modal-close svg {
    display: block;
    width: 20px;
    height: 20px;
}

.done-modal-icon {
    text-align: center;
    margin-bottom: 16px;
}

.done-modal-icon svg {
    color: #28a745;
    stroke: #28a745;
}

.done-modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 12px 0;
}

.done-modal-message {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    margin: 0 0 24px 0;
}

.done-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.done-modal-actions .btn-done-cancel {
    flex: 1;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.done-modal-actions .btn-done-cancel:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.done-modal-actions .btn-done-confirm {
    flex: 1;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    background: #28a745;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.done-modal-actions .btn-done-confirm:hover {
    background: #218838;
}

.done-modal-actions .btn-done-confirm:disabled {
    background: #94d3a2;
    cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .done-customising-modal-overlay {
        padding: 16px;
    }

    .done-customising-modal {
        padding: 24px 20px;
    }

    .done-modal-icon svg {
        width: 40px;
        height: 40px;
    }

    .done-modal-title {
        font-size: 18px;
    }

    .done-modal-message {
        font-size: 13px;
    }

    .done-modal-actions {
        flex-direction: column;
    }

    .done-modal-actions .btn-done-cancel,
    .done-modal-actions .btn-done-confirm {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   RIGHT PANEL - CHAT/MESSAGING (Modern WhatsApp-style)
   ========================================================================== */
body.inquiry-page .inquiry-messaging-panel {
    background: #ffffff !important;
    border-left: 1px solid #d9d9d9 !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 200px) !important;
    position: sticky !important;
    top: 80px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   CHAT HEADER - Modern Design with Avatar
   ========================================================================== */
body.inquiry-page .inquiry-chat-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .chat-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.inquiry-page .chat-partner-avatar {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .chat-partner-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #f0f0f0 !important;
}

body.inquiry-page .chat-partner-avatar .online-indicator {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 12px !important;
    height: 12px !important;
    background: #00ab45 !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
}

body.inquiry-page .chat-partner-info h3 {
    margin: 0 0 2px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
    line-height: 1.2 !important;
}

body.inquiry-page .chat-status {
    font-size: 12px !important;
    color: #969696 !important;
    font-weight: 400 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .chat-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.inquiry-page .chat-action-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f5f5f5 !important;
    color: #666666 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body.inquiry-page .chat-action-btn:hover {
    background: #e5e5e5 !important;
    color: #000000 !important;
}

body.inquiry-page .chat-action-btn i {
    font-size: 14px !important;
}

/* ==========================================================================
   CHAT MESSAGES - WHATSAPP-STYLE BUBBLES
   ========================================================================== */
body.inquiry-page .inquiry-conversation {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #f5f5f5 !important;
}

/* Custom scrollbar for chat */
body.inquiry-page .inquiry-conversation::-webkit-scrollbar {
    width: 6px !important;
}

body.inquiry-page .inquiry-conversation::-webkit-scrollbar-track {
    background: transparent !important;
}

body.inquiry-page .inquiry-conversation::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 3px !important;
}

/* Date Separator */
body.inquiry-page .message-date-separator {
    display: flex !important;
    justify-content: center !important;
    margin: 12px 0 !important;
}

body.inquiry-page .message-date-separator span {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #666666 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-family: 'Google Sans', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Base Message Row */
body.inquiry-page .inquiry-message {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    max-width: 75% !important;
}

/* Own messages (right-aligned with avatar on right) */
body.inquiry-page .inquiry-message.message-own {
    align-self: flex-end !important;
    flex-direction: row !important;
}

/* Other person's messages (left-aligned with avatar on left) */
body.inquiry-page .inquiry-message.message-other {
    align-self: flex-start !important;
    flex-direction: row !important;
}

/* Message Avatar */
body.inquiry-page .message-avatar {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
}

body.inquiry-page .message-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Message Content Wrapper */
body.inquiry-page .message-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
}

/* Message Bubble - Own (Yellow/Gold) */
body.inquiry-page .inquiry-message.message-own .message-bubble {
    background: #ffcd58 !important;
    color: #000000 !important;
    border-radius: 18px 18px 4px 18px !important;
    padding: 12px 16px !important;
    position: relative !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Message Bubble - Other (Gray) */
body.inquiry-page .inquiry-message.message-other .message-bubble {
    background: #d0d0d0 !important;
    color: #000000 !important;
    border-radius: 18px 18px 18px 4px !important;
    padding: 12px 16px !important;
    position: relative !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Message Bubble Base */
body.inquiry-page .message-bubble {
    line-height: 1.5 !important;
    font-size: 15px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 400 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Hide the tail span (using CSS border tricks would be complex, keeping it simple) */
body.inquiry-page .message-tail {
    display: none !important;
}

/* Message Meta */
body.inquiry-page .message-meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    color: #999999 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-message.message-own .message-meta {
    justify-content: flex-end !important;
    padding-right: 4px !important;
}

body.inquiry-page .inquiry-message.message-other .message-meta {
    justify-content: flex-start !important;
    padding-left: 4px !important;
}

body.inquiry-page .message-time {
    cursor: default !important;
}

/* Read Receipts */
body.inquiry-page .message-status {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 2px !important;
}

body.inquiry-page .message-status i {
    font-size: 12px !important;
}

body.inquiry-page .sent-receipt {
    color: #999999 !important;
}

body.inquiry-page .read-receipt {
    color: #34b7f1 !important; /* WhatsApp blue for read */
}

/* System messages */
body.inquiry-page .inquiry-message.message-system {
    align-self: center !important;
    max-width: 90% !important;
    flex-direction: row !important;
}

body.inquiry-page .system-message-content {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #666666 !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-family: 'Google Sans', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.inquiry-page .system-message-content i {
    font-size: 14px !important;
    color: #888888 !important;
}

/* Empty State - Modern Design */
body.inquiry-page .inquiry-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    height: 100% !important;
}

body.inquiry-page .empty-state-icon {
    width: 80px !important;
    height: 80px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

body.inquiry-page .empty-state-icon i {
    font-size: 36px !important;
    color: #999999 !important;
}

body.inquiry-page .inquiry-empty-state h4 {
    margin: 0 0 8px 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-empty-state p {
    margin: 0 0 12px 0 !important;
    font-size: 14px !important;
    color: #666666 !important;
    font-family: 'Google Sans', sans-serif !important;
    line-height: 1.5 !important;
}

body.inquiry-page .inquiry-empty-state .hint {
    font-size: 13px !important;
    color: #888888 !important;
    background: rgba(0, 171, 69, 0.1) !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.inquiry-page .inquiry-empty-state .hint i {
    color: #00ab45 !important;
}

/* Legacy class support for backward compatibility */
body.inquiry-page .inquiry-message.message-traveler {
    align-self: flex-end !important;
    flex-direction: row !important;
}

body.inquiry-page .inquiry-message.message-traveler .message-bubble {
    background: #ffcd58 !important;
    color: #000000 !important;
    border-radius: 18px 18px 4px 18px !important;
    padding: 12px 16px !important;
}

body.inquiry-page .inquiry-message.message-guide {
    align-self: flex-start !important;
    flex-direction: row !important;
}

body.inquiry-page .inquiry-message.message-guide .message-bubble {
    background: #d0d0d0 !important;
    color: #000000 !important;
    border-radius: 18px 18px 18px 4px !important;
    padding: 12px 16px !important;
}

/* Hide sender name for cleaner look (avatar shows who sent it) */
body.inquiry-page .message-sender {
    display: none !important;
}

/* ==========================================================================
   MESSAGE COMPOSER - Modern WhatsApp-style Design
   ========================================================================== */
body.inquiry-page .inquiry-composer {
    padding: 16px 20px !important;
    border-top: 1px solid #e5e5e5 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

/* Attachment Preview Area */
body.inquiry-page .attachment-preview-area {
    margin-bottom: 12px !important;
    padding: 12px !important;
    background: #f5f5f5 !important;
    border-radius: 8px !important;
}

body.inquiry-page .attachment-preview-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.inquiry-page .attachment-preview-item {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
}

body.inquiry-page .attachment-preview-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.inquiry-page .attachment-preview-item .remove-attachment {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 20px !important;
    height: 20px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 50% !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

/* Composer Form */
body.inquiry-page .inquiry-composer-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Input Row - Inline layout */
body.inquiry-page .composer-input-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    background: #f5f5f5 !important;
    border-radius: 24px !important;
    padding: 8px 16px !important;
}

/* Attachment Button */
body.inquiry-page .attachment-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #666666 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .attachment-btn:hover {
    color: #000000 !important;
}

body.inquiry-page .attachment-btn i {
    font-size: 20px !important;
}

/* Textarea in input row */
body.inquiry-page .composer-input-row textarea {
    flex: 1 !important;
    padding: 10px 0 !important;
    border: none !important;
    background: transparent !important;
    resize: none !important;
    font-size: 15px !important;
    font-family: 'Google Sans', sans-serif !important;
    min-height: 40px !important;
    max-height: 100px !important;
    color: #000000 !important;
    line-height: 1.4 !important;
}

body.inquiry-page .composer-input-row textarea::placeholder {
    color: #999999 !important;
}

body.inquiry-page .composer-input-row textarea:focus {
    outline: none !important;
}

/* Send Button - Circular */
body.inquiry-page .btn-send-message {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background: #00ab45 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

body.inquiry-page .btn-send-message:hover {
    background: #009a3d !important;
    transform: scale(1.05) !important;
}

body.inquiry-page .btn-send-message:disabled {
    background: #ccd1d9 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

body.inquiry-page .btn-send-message i {
    font-size: 16px !important;
}

/* Composer Hint */
body.inquiry-page .composer-hint {
    text-align: center !important;
    padding-top: 4px !important;
}

body.inquiry-page .composer-hint small {
    font-size: 11px !important;
    color: #999999 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .btn-send-message:hover {
    background: #1a1a1a !important;
    transform: translateY(-1px) !important;
}

body.inquiry-page .btn-send-message:disabled {
    background: #ccd1d9 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Disabled Composer */
body.inquiry-page .inquiry-composer.disabled {
    padding: 20px !important;
    text-align: center !important;
    background: #f3f3f5 !important;
    color: #717182 !important;
}

body.inquiry-page .inquiry-composer.disabled p {
    margin: 0 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* ==========================================================================
   ATTACHMENT PREVIEW - Before Sending
   ========================================================================== */

body.inquiry-page .attachment-preview-area {
    background: #f5f5f5 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

body.inquiry-page .attachment-preview-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    position: relative !important;
}

body.inquiry-page .attachment-preview-item img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

body.inquiry-page .attachment-preview-item .attachment-doc-icon {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0f0f0 !important;
    border-radius: 4px !important;
}

body.inquiry-page .attachment-preview-item .attachment-doc-icon i {
    font-size: 24px !important;
    color: #666 !important;
}

body.inquiry-page .attachment-preview-item .attachment-name {
    font-size: 13px !important;
    color: #333 !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.inquiry-page .attachment-preview-item .remove-attachment {
    background: #ff4444 !important;
    color: #fff !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 12px !important;
    padding: 0 !important;
    transition: background 0.2s ease !important;
}

body.inquiry-page .attachment-preview-item .remove-attachment:hover {
    background: #cc0000 !important;
}

/* ==========================================================================
   MESSAGE ATTACHMENTS - In Message Bubbles
   ========================================================================== */

body.inquiry-page .message-attachments {
    margin-bottom: 8px !important;
}

body.inquiry-page .message-attachments .attachment-link {
    display: block !important;
    text-decoration: none !important;
    margin-bottom: 6px !important;
}

body.inquiry-page .message-attachments .attachment-link:last-child {
    margin-bottom: 0 !important;
}

body.inquiry-page .message-attachments .attachment-image img {
    max-width: 100% !important;
    max-height: 200px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

body.inquiry-page .message-attachments .attachment-doc {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 6px !important;
    color: #333 !important;
}

body.inquiry-page .message-attachments .attachment-doc i {
    font-size: 20px !important;
    color: #666 !important;
}

body.inquiry-page .message-attachments .attachment-doc span {
    font-size: 13px !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Attachments in own messages (right side) */
body.inquiry-page .message-own .message-attachments .attachment-doc {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.inquiry-page .message-own .message-attachments .attachment-doc i,
body.inquiry-page .message-own .message-attachments .attachment-doc span {
    color: #fff !important;
}

/* Message text wrapper when there's an attachment */
body.inquiry-page .message-text {
    word-break: break-word !important;
}

/* ==========================================================================
   WORKFLOW BUTTONS - From Figma Design
   ========================================================================== */

/* Done Customising Button - Green pill (Traveler) */
body.inquiry-page .btn-done-customising {
    background: #00ab45 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 23px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: 'Google Sans', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

body.inquiry-page .btn-done-customising:hover {
    background: #009a3d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 171, 69, 0.3) !important;
}

body.inquiry-page .btn-done-customising:disabled {
    background: #ccd1d9 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Payment Button - Green pill (Guide) */
body.inquiry-page .btn-payment {
    background: #00ab45 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 23px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Google Sans', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

body.inquiry-page .btn-payment:hover {
    background: #009a3d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 171, 69, 0.3) !important;
}

/* Continue Customizing Button removed - January 2026 */
/* Workflow simplified: 10 modifications only, no reopening */

/* Decline Button - Red outline (Guide) */
body.inquiry-page .btn-decline-inquiry {
    background: transparent !important;
    color: #d4183d !important;
    border: 2px solid #d4183d !important;
    padding: 10px 24px !important;
    border-radius: 23px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: 'Google Sans', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

body.inquiry-page .btn-decline-inquiry:hover {
    background: #d4183d !important;
    color: #ffffff !important;
}

/* Cancel Inquiry - Text link (Traveler) */
body.inquiry-page .btn-cancel-inquiry {
    background: transparent !important;
    color: #d4183d !important;
    border: none !important;
    padding: 8px 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Google Sans', sans-serif !important;
    text-decoration: underline !important;
    transition: all 0.2s ease !important;
}

body.inquiry-page .btn-cancel-inquiry:hover {
    color: #b8132f !important;
}

/* Edit Itinerary Button - Outlined (Guide) */
body.inquiry-page .btn-edit-itinerary {
    background: transparent !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    padding: 10px 24px !important;
    border-radius: 23px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: 'Google Sans', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body.inquiry-page .btn-edit-itinerary:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   ACTION GROUPS
   ========================================================================== */
body.inquiry-page .inquiry-action-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 24px !important;
}

body.inquiry-page .inquiry-action-group .primary-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.inquiry-page .inquiry-action-group .secondary-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding-top: 12px !important;
    border-top: 1px solid #e6e9ed !important;
}

/* ==========================================================================
   STATUS NOTICES
   ========================================================================== */
body.inquiry-page .inquiry-awaiting-approval {
    background: linear-gradient(135deg, rgba(255, 205, 88, 0.1) 0%, rgba(255, 205, 88, 0.2) 100%) !important;
    border: 1px solid #ffcd58 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #E8A317 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-customization-complete {
    background: linear-gradient(135deg, rgba(0, 171, 69, 0.1) 0%, rgba(0, 171, 69, 0.15) 100%) !important;
    border: 1px solid #00ab45 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #00ab45 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* SLA Warning */
body.inquiry-page .inquiry-sla-warning {
    background: rgba(255, 206, 84, 0.15) !important;
    border: 1px solid #ffcd58 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #E8A317 !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-sla-warning.breached {
    background: rgba(212, 24, 61, 0.15) !important;
    border-color: #d4183d !important;
    color: #d4183d !important;
}

/* Modification Counter */
body.inquiry-page .modification-counter {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #717182 !important;
    padding: 8px 12px !important;
    background: #f3f3f5 !important;
    border-radius: 20px !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .modification-counter .count {
    font-weight: 700 !important;
    color: #000000 !important;
}

body.inquiry-page .modification-counter.near-limit .count {
    color: #ffcd58 !important;
}

body.inquiry-page .modification-counter.at-limit .count {
    color: #d4183d !important;
}

/* ==========================================================================
   SPECIAL REQUESTS
   ========================================================================== */
body.inquiry-page .inquiry-special-requests {
    margin-top: 24px !important;
    padding: 16px !important;
    background: rgba(255, 206, 84, 0.1) !important;
    border-left: 3px solid #ffcd58 !important;
    border-radius: 0 8px 8px 0 !important;
}

body.inquiry-page .inquiry-special-requests h4 {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    color: #4d4d4d !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-special-requests p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #717182 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */
body.inquiry-page .inquiry-empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #717182 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .inquiry-empty-state p {
    margin: 0 !important;
    max-width: 300px !important;
    margin: 0 auto !important;
}

body.inquiry-page .inquiry-empty-state .hint {
    font-size: 12px !important;
    color: #969696 !important;
    margin-top: 8px !important;
}

/* ==========================================================================
   RESPONSIVE - Mobile First
   ========================================================================== */
@media (max-width: 1024px) {
    body.inquiry-page .inquiry-page-container {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    body.inquiry-page .inquiry-itinerary-panel {
        padding-right: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #d9d9d9 !important;
        padding-bottom: 24px !important;
    }

    body.inquiry-page .inquiry-messaging-panel {
        border-left: none !important;
        border-top: 1px solid #d9d9d9 !important;
        position: static !important;
        height: auto !important;
        min-height: 500px !important;
    }

    body.inquiry-page .inquiry-details-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    body.inquiry-page .inquiry-page-title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    body.inquiry-page .inquiry-page-title-row h1 {
        font-size: 24px !important;
    }

    body.inquiry-page .inquiry-trip-summary {
        grid-template-columns: 1fr !important;
    }

    body.inquiry-page .inquiry-details-grid {
        grid-template-columns: 1fr !important;
    }

    /* Meta Row - Stack on mobile */
    body.inquiry-page .inquiry-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    body.inquiry-page .inquiry-meta-row .meta-item-action {
        margin-left: 0 !important;
        width: 100% !important;
    }

    body.inquiry-page .btn-done-customising-inline {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Second Meta Row - 2x2 grid on mobile */
    body.inquiry-page .inquiry-meta-row-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    body.inquiry-page .inquiry-meta-row-2 .meta-item:first-child {
        grid-column: 1 / -1 !important;
    }

    body.inquiry-page .meta-stepper {
        justify-content: center !important;
    }

    body.inquiry-page .btn-done-customising,
    body.inquiry-page .btn-payment,
    body.inquiry-page .btn-decline-inquiry,
    body.inquiry-page .btn-edit-itinerary {
        width: 100% !important;
    }
    /* The chat send button stays a 40px circle on a phone (I074, 4 Oct 2026).
       It used to sit in this full-width list, so at 390px it stretched into a
       288px violet oval and squeezed the message box down to 28px. */

    body.inquiry-page .inquiry-action-group .primary-actions,
    body.inquiry-page .inquiry-action-group .secondary-actions {
        flex-direction: column !important;
    }
}

/* ==========================================================================
   TOUR PAGE STYLES - Hide Guest Names
   ========================================================================== */
body.sarisara-inquiry-mode .guest_name_input,
body.single-st_tours .guest_name_input {
    display: none !important;
}

/* ==========================================================================
   LOADING & NOTIFICATIONS
   ========================================================================== */
body.inquiry-page .inquiry-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
}

body.inquiry-page .inquiry-loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #e6e9ed !important;
    border-top-color: #000000 !important;
    border-radius: 50% !important;
    animation: inquiry-spin 0.8s linear infinite !important;
}

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

body.inquiry-page .inquiry-notification {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    background: #000000 !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    animation: slideInNotification 0.3s ease !important;
    font-family: 'Google Sans', sans-serif !important;
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

body.inquiry-page .inquiry-notification.success {
    background: #00ab45 !important;
}

body.inquiry-page .inquiry-notification.error {
    background: #d4183d !important;
}

body.inquiry-page .inquiry-notification.warning {
    background: #ffcd58 !important;
    color: #000000 !important;
}

/* ==========================================================================
   ITINERARY REDESIGN - Integration with Inquiry Page
   RETIRED 2026-07-10 (Chiran: inquiry must equal the preview 1:1). These
   January-2026 rules reasserted the old black-frame look with !important,
   beating the itinerary-ds-reskin layer the page already loads (3px black
   borders, 100px grid headers, black DAY underlines - img 54). Selectors
   renamed to body.inquiry-page-LEGACY-RETIRED so they never match.
   ========================================================================== */
body.inquiry-page .inquiry-itinerary {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
}

body.inquiry-page .inquiry-itinerary .sarisara-itinerary-redesign {
    width: 100% !important;
    max-width: 100% !important;
}

body.inquiry-page .sarisara-itinerary-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Day card styling within inquiry context */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-card {
    border: 3px solid #000000 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-header {
    background: #ffffff !important;
    padding: 0px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-header:hover {
    background: #f9f9f9 !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-number {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-date {
    font-size: 14px !important;
    color: #969696 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* Service items within inquiry */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-item {
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border: 3px solid #000000 !important;
}

/* ==========================================================================
   FIX: Service Header Column Borders (January 2026)
   Ensure vertical borders show between columns in inquiry page context
   ========================================================================== */

/* Service Header Grid - ensure grid layout applies */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-header {
    display: grid !important;
    grid-template-columns: 80px 180px 1fr 150px !important;
    height: 100px !important;
    padding: 0px !important;
    background: #ffffff !important;
    grid-template-rows: 100% !important;
    width: 100% !important;
    margin: 0px !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Override: when prices are hidden for non-guide viewers, the day-card
 * carries .day-card--no-prices and the service-header should collapse
 * to 3 columns (chevron | date | title) so the title fills the freed
 * 150px price slot. Specificity has to beat the rule above (which
 * pins 80px 180px 1fr 150px with body.inquiry-page prefix), so this
 * selector chains the same body prefix plus the day-card class. */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-card.day-card--no-prices .service-header {
    grid-template-columns: 80px 180px 1fr !important;
}
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-card.day-card--no-prices .service-title-col {
    border-right: none !important;
}

/* Column 1: Chevron - right border */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-chevron {
    border-right: 3px solid #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Column 2: Date & Time - right border and internal split */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-date-col {
    border-right: 3px solid #000000 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-date-top {
    height: 55% !important;
    border-bottom: 3px solid #000000 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-time-display {
    height: 45% !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

/* Column 3: Title & Location - right border */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-title-col {
    border-right: 3px solid #000000 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Column 4: Price - no right border (last column) */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-price-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Activity price split styling */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .price-split-top {
    height: 48.5px !important;
    border-bottom: 3px solid #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .price-split-bottom {
    height: 48.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-content {
    padding: 16px !important;
    background: #f9f9f9 !important;
}

/* Image carousel within inquiry */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-gallery {
    border-radius: 8px !important;
    overflow: hidden !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .gallery-nav {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Room tables within inquiry */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .room-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .room-table th,
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .room-table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #e6e9ed !important;
    text-align: left !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .room-table th {
    background: #f3f3f5 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Activity tabs within inquiry */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .activity-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .activity-tab {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    background: #f3f3f5 !important;
    border: none !important;
    cursor: pointer !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .activity-tab.active,
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .activity-tab:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Empty itinerary state */
body.inquiry-page .inquiry-empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    border: 2px dashed #d9d9d9 !important;
}

body.inquiry-page .inquiry-empty-state p {
    color: #969696 !important;
    font-size: 16px !important;
    margin: 0 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* ==========================================================================
   ITINERARY SUMMARY SECTION - Figma Design (ItinerarySection.tsx)
   ========================================================================== */

/* Summary Section Container */
body.inquiry-page .inquiry-summary-section {
    border: 1px solid #d9d9d9 !important;
    border-radius: 14px !important;
    padding: 24px 24px 24px 31px !important;
    margin-bottom: 24px !important;
    background: #ffffff !important;
}

/* Summary Content - Two Column Layout */
body.inquiry-page .summary-content {
    display: flex !important;
    justify-content: space-between !important;
    gap: 32px !important;
}

/* ==========================================================================
   LEFT SIDE: Itinerary Stats
   ========================================================================== */
body.inquiry-page .summary-left {
    flex: 1 !important;
}

body.inquiry-page .summary-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 16px 0 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* Stat Boxes Row */
body.inquiry-page .itinerary-stats {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    flex-wrap: wrap !important;
}

body.inquiry-page .stat-box {
    border: 1px solid #000000 !important;
    border-radius: 5px !important;
    width: 85px !important;
    height: 85px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}

body.inquiry-page .stat-number {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    line-height: 1.2 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .stat-label {
    font-size: 16px !important;
    color: #969696 !important;
    font-weight: 400 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* Route & Dates */
body.inquiry-page .itinerary-route {
    margin-bottom: 20px !important;
}

body.inquiry-page .itinerary-route p {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    margin: 8px 0 !important;
    font-family: 'Google Sans', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.inquiry-page .itinerary-route .icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   Tour Guide Section
   ========================================================================== */
body.inquiry-page .tour-guide-section {
    border-top: 1px solid #d9d9d9 !important;
    padding-top: 24px !important;
    margin-top: 20px !important;
}

body.inquiry-page .tour-guide-section .section-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 0 16px 0 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .guide-pricing-boxes {
    display: flex !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

body.inquiry-page .guide-box {
    border: 1px solid #d9d9d9 !important;
    border-radius: 5px !important;
    width: 102px !important;
    height: 85px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: #ffffff !important;
}

body.inquiry-page .guide-box span:first-child {
    font-size: 14px !important;
    color: #969696 !important;
    font-weight: 400 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .guide-box span:last-child {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* ==========================================================================
   RIGHT SIDE: Pricing Breakdown
   ========================================================================== */
body.inquiry-page .summary-right {
    border-left: 1px solid #d9d9d9 !important;
    padding-left: 24px !important;
    /* Bound the price panel so it doesn't expand to its content width and starve the
       left "Itinerary Stats" column (which needs ~340px for its stat-box row). Without a
       flex basis the right column took its full content width (~650px), squeezing the
       left to ~100px and breaking the stat-box layout. */
    flex: 0 0 320px !important;
    min-width: 280px !important;
    max-width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.inquiry-page .price-category {
    margin-bottom: 20px !important;
}

body.inquiry-page .price-category h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 16px !important;
    /* WCAG AA: muted grey #969696 was 2.95:1 on white. #6b7280 is 4.65:1
       and keeps the muted look (already used for the Check-Why link). */
    color: #6b7280 !important;
    margin-bottom: 4px !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .price-row span:last-child {
    font-weight: 500 !important;
    color: #000000 !important;
}

/* Price Subtotal */
body.inquiry-page .price-subtotal {
    border-top: 1px solid #d9d9d9 !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* 20px bold qualifies as WCAG "large text" (>=18.66px bold), so the green
       Sub Total value only needs 3:1 contrast. */
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    font-family: 'Google Sans', sans-serif !important;
}

body.inquiry-page .price-subtotal span:last-child {
    /* Brand green (CLAUDE.md palette) replaces arbitrary #00ab45; 3.32:1 on
       white passes large-text AA at the 20px bold size above. */
    color: #30B300 !important;
}

/* "Why is this not the final price?" link beneath Sub Total. Reuses the
 * existing Check Why modal. */
body.inquiry-page .price-subtotal-help {
    margin-top: 6px !important;
    text-align: right !important;
    font-family: 'Google Sans', sans-serif !important;
}
body.inquiry-page .price-subtotal-help .check-why-trigger {
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}
body.inquiry-page .price-subtotal-help .check-why-trigger:hover {
    color: #030213 !important;
}

/* Logged-out inquiry button — visually disabled with a tiny login hint
 * underneath. The click handler in inquiry-public.js still redirects to
 * login, but the styling makes it clear that authentication is required. */
.sarisara-inquiry-disabled {
    opacity: 0.55 !important;
    filter: grayscale(0.7) !important;
    cursor: not-allowed !important;
}
.sarisara-inquiry-disabled:hover {
    opacity: 0.55 !important;
}
.sarisara-login-hint {
    margin-top: 8px !important;
    text-align: center !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.sarisara-login-hint-link {
    color: #6b7280 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}
.sarisara-login-hint-link:hover {
    color: #030213 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   ITINERARY SUMMARY - Responsive Design
   ========================================================================== */
@media (max-width: 991px) {
    body.inquiry-page .summary-content {
        flex-direction: column !important;
        gap: 24px !important;
    }

    body.inquiry-page .summary-right {
        border-left: none !important;
        border-top: 1px solid #d9d9d9 !important;
        padding-left: 0 !important;
        padding-top: 24px !important;
        min-width: 100% !important;
        /* Stacked column: undo the desktop fixed basis/max-width so it goes full width
           (and flex-basis doesn't become a fixed HEIGHT in column direction). */
        flex: 1 1 auto !important;
        max-width: none !important;
    }
}

@media (max-width: 576px) {
    body.inquiry-page .inquiry-summary-section {
        padding: 16px !important;
    }

    body.inquiry-page .itinerary-stats {
        gap: 12px !important;
    }

    body.inquiry-page .stat-box {
        width: 70px !important;
        height: 70px !important;
    }

    body.inquiry-page .stat-number {
        font-size: 20px !important;
    }

    body.inquiry-page .stat-label {
        font-size: 14px !important;
    }

    body.inquiry-page .guide-pricing-boxes {
        gap: 12px !important;
    }

    body.inquiry-page .guide-box {
        width: 90px !important;
        height: 75px !important;
    }
}

/* ==========================================================================
   CRITICAL OVERRIDE SECTION - Maximum Specificity
   Added January 2026: Ensure chat background is always applied
   ========================================================================== */

/* Force light gray background on chat conversation area */
html body.inquiry-page .inquiry-messaging-panel .inquiry-conversation,
html body.inquiry-page div.inquiry-conversation,
body.inquiry-page .inquiry-conversation {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
}

/* Force yellow/gold background on own messages (sender's messages) */
html body.inquiry-page .inquiry-message.message-own .message-bubble,
html body.inquiry-page div.inquiry-message.message-own div.message-bubble {
    background: #ffcd58 !important;
    background-color: #ffcd58 !important;
}

/* Force gray background on other's messages (received messages) */
html body.inquiry-page .inquiry-message.message-other .message-bubble,
html body.inquiry-page div.inquiry-message.message-other div.message-bubble {
    background: #d0d0d0 !important;
    background-color: #d0d0d0 !important;
}

/* ==========================================================================
   ITINERARY EDIT MODE (AIB Integration)
   Added January 2026: Embed Advanced Itinerary Builder in inquiry page
   ========================================================================== */

/* Itinerary Wrapper */
body.inquiry-page .inquiry-itinerary-wrapper {
    position: relative;
}

/* Preview Mode (default read-only display) */
body.inquiry-page .itinerary-preview-mode {
    /* Uses existing inquiry-itinerary styles */
}

/* Edit Mode Container */
body.inquiry-page .itinerary-edit-mode {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #ffcd58;
    margin-top: 16px;
}

/* Edit Mode Header */
body.inquiry-page .aib-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

body.inquiry-page .aib-edit-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

body.inquiry-page .aib-edit-header h3 i {
    margin-right: 8px;
    color: #ffcd58;
}

/* Edit Mode Action Buttons */
body.inquiry-page .aib-edit-actions {
    display: flex;
    gap: 12px;
}

body.inquiry-page .btn-cancel-edit {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

body.inquiry-page .btn-cancel-edit:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

body.inquiry-page .btn-cancel-edit i {
    margin-right: 6px;
}

body.inquiry-page .btn-save-itinerary {
    background: #ffcd58;
    color: #000;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.inquiry-page .btn-save-itinerary:hover {
    background: #f5c043;
    transform: translateY(-1px);
}

body.inquiry-page .btn-save-itinerary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body.inquiry-page .btn-save-itinerary i {
    margin-right: 6px;
}

/* AIB Container Overrides for Inquiry Page */
body.inquiry-page #sarisara-advanced-itinerary-container {
    background: #fafafa;
    border-radius: 6px;
    padding: 16px;
    min-height: 400px;
}

/* Edit Itinerary Toggle Button - Match existing button styles */
body.inquiry-page .btn-edit-itinerary#toggle-aib-edit {
    background: linear-gradient(135deg, #ffcd58, #f5c043);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.inquiry-page .btn-edit-itinerary#toggle-aib-edit:hover {
    background: linear-gradient(135deg, #f5c043, #e8b339);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 205, 88, 0.4);
}

body.inquiry-page .btn-edit-itinerary#toggle-aib-edit i {
    font-size: 16px;
}

/* Responsive adjustments for edit mode */
@media screen and (max-width: 768px) {
    body.inquiry-page .aib-edit-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    body.inquiry-page .aib-edit-actions {
        width: 100%;
        justify-content: center;
    }

    body.inquiry-page .btn-cancel-edit,
    body.inquiry-page .btn-save-itinerary {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    body.inquiry-page .itinerary-edit-mode {
        padding: 16px;
    }
}

@media screen and (max-width: 480px) {
    body.inquiry-page .aib-edit-actions {
        flex-direction: column;
    }

    body.inquiry-page .btn-cancel-edit,
    body.inquiry-page .btn-save-itinerary {
        width: 100%;
    }
}

/* ==========================================================================
   DAY LABEL & ACTIVITY HEADER STYLING
   Added January 2026: Custom styles for day labels and activity headers
   ========================================================================== */

/* Day Label Styling */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .day-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    color: #030213 !important;
    border-bottom: 3px solid #030213 !important;
    padding: 10px !important;
}

/* Activity Header Styling */
body.inquiry-page-LEGACY-RETIRED .sarisara-itinerary-redesign .service-activity .activity-header {
    display: inline !important;
    grid-template-columns: 130px 1fr minmax(120px, auto) auto !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
    padding: 10px 20px 10px !important;
    background: #ffffff !important;
    border-bottom: 2px solid #030213 !important;
    align-items: stretch !important;
    margin: 0px !important;
}

/* ==========================================================================
   Modification Limit Messages - January 2026
   ========================================================================== */

/* Modification Limit Message Box (Guide View) */
body.inquiry-page .modification-limit-message {
    background: #fff3cd !important;
    border: 1px solid #ffc107 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin: 10px 0 !important;
}

body.inquiry-page .modification-limit-message .limit-icon {
    color: #856404 !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .modification-limit-message .limit-icon i {
    color: #856404 !important;
}

body.inquiry-page .modification-limit-message .limit-content {
    flex: 1 !important;
}

body.inquiry-page .modification-limit-message .limit-content strong {
    color: #856404 !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
}

body.inquiry-page .modification-limit-message .limit-content p {
    color: #856404 !important;
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.inquiry-page .modification-limit-message .limit-content p.limit-action {
    color: #665c00 !important;
    font-style: italic !important;
}

/* Traveler View - Blue Theme */
body.inquiry-page .modification-limit-message.traveler-view {
    background: #d1ecf1 !important;
    border-color: #17a2b8 !important;
}

body.inquiry-page .modification-limit-message.traveler-view .limit-icon,
body.inquiry-page .modification-limit-message.traveler-view .limit-icon i {
    color: #0c5460 !important;
}

body.inquiry-page .modification-limit-message.traveler-view .limit-content strong,
body.inquiry-page .modification-limit-message.traveler-view .limit-content p {
    color: #0c5460 !important;
}

/* Modification Limit Badge (Top Controls) */
body.inquiry-page .modification-limit-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: #e9ecef !important;
    border-radius: 4px !important;
    color: #6c757d !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body.inquiry-page .modification-limit-badge i {
    color: #6c757d !important;
    font-size: 14px !important;
}

/* ==========================================================================
   Refresh Link for System Messages - January 2026
   Text-only underlined style (like Delete Inquiry button)
   ========================================================================== */

body.inquiry-page .link-refresh-itinerary {
    display: inline !important;
    background: transparent !important;
    color: #007bff !important;
    border: none !important;
    padding: 0 0 0 8px !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

body.inquiry-page .link-refresh-itinerary:hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Initial Limit Reached Messages - January 2026
   ========================================================================== */

/* Guide View - Yellow/Warning Theme */
body.inquiry-page .initial-limit-reached-message.guide-view {
    background: #fff3cd !important;
    border: 1px solid #ffc107 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin: 10px 0 !important;
}

body.inquiry-page .initial-limit-reached-message.guide-view .limit-icon {
    color: #856404 !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .initial-limit-reached-message.guide-view .limit-icon i {
    color: #856404 !important;
}

body.inquiry-page .initial-limit-reached-message.guide-view .limit-content {
    flex: 1 !important;
}

body.inquiry-page .initial-limit-reached-message.guide-view .limit-content strong {
    color: #856404 !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
}

body.inquiry-page .initial-limit-reached-message.guide-view .limit-content p {
    color: #856404 !important;
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.inquiry-page .initial-limit-reached-message.guide-view .limit-content p.limit-action {
    color: #665c00 !important;
    font-style: italic !important;
}

/* Traveler View - Green/Success Theme */
body.inquiry-page .initial-limit-reached-message.traveler-view {
    background: #d4edda !important;
    border: 1px solid #28a745 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin: 10px 0 !important;
}

body.inquiry-page .initial-limit-reached-message.traveler-view .limit-icon {
    color: #155724 !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

body.inquiry-page .initial-limit-reached-message.traveler-view .limit-icon i {
    color: #155724 !important;
}

body.inquiry-page .initial-limit-reached-message.traveler-view .limit-content {
    flex: 1 !important;
}

body.inquiry-page .initial-limit-reached-message.traveler-view .limit-content strong {
    color: #155724 !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
}

body.inquiry-page .initial-limit-reached-message.traveler-view .limit-content p {
    color: #155724 !important;
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   SIMPLIFIED PAYMENT SECTION - January 2026
   ========================================================================== */

body.inquiry-page .inquiry-payment-section.simplified {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 15px;
}

body.inquiry-page .inquiry-payment-section.simplified .payment-countdown {
    text-align: center;
    padding: 12px 15px;
    margin-bottom: 15px;
    /* Light purple, never light yellow (HARD RULE 28 Oct; seen on Maria's trip page 3 Nov 2026). */
    background: #F5EEFF;
    border: 1px solid #D9BFFF;
    border-radius: 10px;
    color: #3D1A80;
}

body.inquiry-page .inquiry-payment-section.simplified .payment-countdown.urgent {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

body.inquiry-page .inquiry-payment-section.simplified .payment-countdown .countdown-icon {
    margin-right: 6px;
    display: inline-flex;
    vertical-align: -3px;
}
body.inquiry-page .inquiry-payment-section.simplified .payment-countdown .countdown-icon .svgico { width: 16px; height: 16px; }

body.inquiry-page .inquiry-payment-section.simplified .payment-countdown .countdown-text {
    font-size: 14px;
    font-weight: 500;
}

body.inquiry-page .inquiry-payment-section.simplified .subtotal-btn {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 30px;
    background: #28a745;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

body.inquiry-page .inquiry-payment-section.simplified .subtotal-btn:hover {
    background: #218838;
}

body.inquiry-page .inquiry-payment-section.simplified .advance-payment-info {
    text-align: center;
    margin-top: 8px;
}

body.inquiry-page .inquiry-payment-section.simplified .advance-payment-note {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

body.inquiry-page .inquiry-payment-section.simplified .payment-delete-action {
    text-align: right;
    margin-top: 12px;
}

body.inquiry-page .inquiry-payment-section.simplified .payment-delete-action .btn-delete-inquiry {
    background: none;
    border: none;
    color: #dc3545;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 0;
}

body.inquiry-page .inquiry-payment-section.simplified .payment-delete-action .btn-delete-inquiry:hover {
    color: #c82333;
    text-decoration: none;
}

/* Payment Breakdown - Added January 2026 for checkout integration */
body.inquiry-page .inquiry-payment-section.simplified .payment-breakdown {
    margin-bottom: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

body.inquiry-page .inquiry-payment-section.simplified .breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

body.inquiry-page .inquiry-payment-section.simplified .breakdown-row:last-child {
    border-bottom: none;
}

body.inquiry-page .inquiry-payment-section.simplified .breakdown-row .label {
    color: #666;
    font-size: 14px;
}

body.inquiry-page .inquiry-payment-section.simplified .breakdown-row .amount {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

body.inquiry-page .inquiry-payment-section.simplified .breakdown-row.subtotal-row .label {
    font-weight: 500;
    color: #333;
}

body.inquiry-page .inquiry-payment-section.simplified .breakdown-row.tax-row .label,
body.inquiry-page .inquiry-payment-section.simplified .breakdown-row.fee-row .label {
    font-size: 13px;
    color: #888;
}

body.inquiry-page .inquiry-payment-section.simplified .breakdown-row.tax-row .amount,
body.inquiry-page .inquiry-payment-section.simplified .breakdown-row.fee-row .amount {
    font-size: 13px;
    color: #666;
}

/* Grand Total Button - replaces subtotal-btn */
body.inquiry-page .inquiry-payment-section.simplified .grandtotal-btn {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 30px;
    background: #28a745;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

body.inquiry-page .inquiry-payment-section.simplified .grandtotal-btn:hover {
    background: #218838;
}

body.inquiry-page .inquiry-payment-section.simplified .grandtotal-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* ==========================================================================
   Journey Route Map Section
   ========================================================================== */

body.inquiry-page .inquiry-journey-map-section {
    margin-top: 30px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid var(--inquiry-border);
    border-radius: var(--inquiry-radius);
}

body.inquiry-page .inquiry-journey-map-section .journey-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--inquiry-border);
}

body.inquiry-page .inquiry-journey-map-section .journey-map-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--inquiry-text);
}

body.inquiry-page .inquiry-journey-map-section .journey-map-title svg {
    stroke: var(--inquiry-text);
}

body.inquiry-page .inquiry-journey-map-section .journey-map-subtitle {
    font-size: 13px;
    color: var(--inquiry-text-muted);
}

/* Override journey map default styles for inquiry page */
body.inquiry-page .journey-map-wrapper {
    background: transparent !important;
    padding: 0 !important;
}

body.inquiry-page .journey-map-wrapper .journey-map-header {
    display: none; /* Hide duplicate header from JS-built interface */
}

body.inquiry-page #journey-map-canvas {
    height: 400px !important;
    border-radius: var(--inquiry-radius);
    border-color: var(--inquiry-border) !important;
}

body.inquiry-page .journey-map-controls {
    margin-bottom: 15px !important;
}

body.inquiry-page .journey-map-controls button {
    background: var(--inquiry-primary) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    cursor: pointer;
    transition: background 0.2s ease;
}

body.inquiry-page .journey-map-controls button:hover {
    background: var(--inquiry-primary-dark) !important;
}

body.inquiry-page .journey-map-legend {
    background: var(--inquiry-gray-100) !important;
    border-radius: var(--inquiry-radius) !important;
    padding: 12px 15px !important;
    margin-top: 15px !important;
}

body.inquiry-page .journey-map-legend strong {
    font-size: 13px;
    color: var(--inquiry-text);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body.inquiry-page .inquiry-journey-map-section {
        padding: 15px;
        margin-top: 20px;
    }

    body.inquiry-page .inquiry-journey-map-section .journey-map-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    body.inquiry-page #journey-map-canvas {
        height: 300px !important;
    }

    body.inquiry-page .journey-map-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    body.inquiry-page .journey-map-controls button {
        flex: 1;
        min-width: 120px;
    }
}

/* ==========================================================================
   Progress Stepper - Workflow Position Indicator
   ========================================================================== */

body.inquiry-page .inquiry-progress-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 0 20px;
    margin: 0 0 4px;
    position: relative;
}

body.inquiry-page .stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Connector line between steps */
body.inquiry-page .stepper-connector {
    position: absolute;
    top: 16px;
    right: 50%;
    width: 100%;
    height: 2px;
    z-index: 0;
}

body.inquiry-page .step-completed .stepper-connector {
    background: #00ab45;
}

body.inquiry-page .step-current .stepper-connector {
    background: linear-gradient(to right, #00ab45 50%, #d9d9d9 50%);
}

body.inquiry-page .step-upcoming .stepper-connector {
    background-image: repeating-linear-gradient(
        to right,
        #d9d9d9 0,
        #d9d9d9 6px,
        transparent 6px,
        transparent 10px
    );
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: center;
}

body.inquiry-page .step-terminal .stepper-connector {
    background: linear-gradient(to right, #00ab45 50%, #d9d9d9 50%);
}

body.inquiry-page .step-terminal.terminal-red .stepper-connector {
    background: linear-gradient(to right, #00ab45 50%, #d9d9d9 50%);
}

body.inquiry-page .step-terminal.terminal-amber .stepper-connector {
    background: linear-gradient(to right, #00ab45 50%, #d9d9d9 50%);
}

body.inquiry-page .step-terminal.terminal-gray .stepper-connector {
    background: linear-gradient(to right, #00ab45 50%, #d9d9d9 50%);
}

/* Circle - Base */
body.inquiry-page .stepper-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Circle - Completed */
body.inquiry-page .step-completed .stepper-circle {
    background: #00ab45;
    border: 2px solid #00ab45;
}

/* Circle - Current */
body.inquiry-page .step-current .stepper-circle {
    width: 36px;
    height: 36px;
    background: #000;
    border: 2px solid #000;
    animation: stepper-pulse 2s ease-in-out infinite;
}

/* Circle - Upcoming */
body.inquiry-page .step-upcoming .stepper-circle {
    background: #fff;
    border: 2px solid #d9d9d9;
}

/* Circle - Terminal states */
body.inquiry-page .step-terminal.terminal-red .stepper-circle {
    width: 36px;
    height: 36px;
    background: #dc3545;
    border: 2px solid #dc3545;
}

body.inquiry-page .step-terminal.terminal-amber .stepper-circle {
    width: 36px;
    height: 36px;
    background: #f59e0b;
    border: 2px solid #f59e0b;
}

body.inquiry-page .step-terminal.terminal-gray .stepper-circle {
    width: 36px;
    height: 36px;
    background: #9ca3af;
    border: 2px solid #9ca3af;
}

/* Step number inside circle */
body.inquiry-page .stepper-number {
    font-family: 'Google Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

body.inquiry-page .step-current .stepper-number {
    color: #fff;
}

body.inquiry-page .step-upcoming .stepper-number {
    color: #9ca3af;
}

body.inquiry-page .step-terminal .stepper-number {
    color: #fff;
}

/* Step label below circle */
body.inquiry-page .stepper-label {
    display: block;
    margin-top: 8px;
    font-family: 'Google Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

body.inquiry-page .step-completed .stepper-label {
    color: #1a1a1a;
}

body.inquiry-page .step-current .stepper-label {
    color: #1a1a1a;
}

body.inquiry-page .step-upcoming .stepper-label {
    color: #9ca3af;
}

body.inquiry-page .step-terminal .stepper-label {
    color: #1a1a1a;
}

/* Hint text - only shown for current/terminal step */
body.inquiry-page .stepper-hint {
    display: block;
    margin-top: 4px;
    font-family: 'Google Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
    max-width: 140px;
    white-space: normal;
}

/* Pulse animation for current step */
@keyframes stepper-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
}

/* ==========================================================================
   Progress Stepper - Mobile Responsive (Vertical Layout)
   ========================================================================== */

@media (max-width: 768px) {
    body.inquiry-page .inquiry-progress-stepper {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 0 12px;
        gap: 0;
    }

    body.inquiry-page .stepper-step {
        flex-direction: row;
        align-items: center;
        flex: none;
        width: 100%;
        padding-left: 0;
        min-height: 48px;
    }

    /* Vertical connector */
    body.inquiry-page .stepper-connector {
        position: absolute;
        top: auto;
        bottom: 50%;
        left: 15px;
        right: auto;
        width: 2px;
        height: 100%;
    }

    body.inquiry-page .step-current .stepper-connector {
        left: 17px;
        background: linear-gradient(to bottom, #00ab45 50%, #d9d9d9 50%);
    }

    body.inquiry-page .step-terminal .stepper-connector,
    body.inquiry-page .step-terminal.terminal-red .stepper-connector,
    body.inquiry-page .step-terminal.terminal-amber .stepper-connector,
    body.inquiry-page .step-terminal.terminal-gray .stepper-connector {
        left: 17px;
        background: linear-gradient(to bottom, #00ab45 50%, #d9d9d9 50%);
    }

    body.inquiry-page .step-upcoming .stepper-connector {
        background-image: repeating-linear-gradient(
            to bottom,
            #d9d9d9 0,
            #d9d9d9 6px,
            transparent 6px,
            transparent 10px
        );
        background-size: 2px 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    body.inquiry-page .stepper-circle {
        flex-shrink: 0;
        margin-right: 12px;
    }

    body.inquiry-page .stepper-label {
        margin-top: 0;
        text-align: left;
        white-space: nowrap;
        font-size: 13px;
    }

    body.inquiry-page .stepper-hint {
        margin-top: 0;
        margin-left: 8px;
        text-align: left;
        max-width: none;
        font-size: 11px;
    }

    /* Hide hint on separate line for mobile - show inline */
    body.inquiry-page .stepper-step .stepper-hint::before {
        content: "— ";
    }
}

/* ==========================================================================
   6-Step Stepper Adjustments (March 2026)
   Reduce label font-size on medium screens to prevent overflow with 6 steps
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1100px) {
    body.inquiry-page .stepper-label {
        font-size: 11px;
    }

    body.inquiry-page .stepper-hint {
        font-size: 10px;
        max-width: 110px;
    }
}

/* ==========================================================================
   Post-Deposit Status Message (March 2026)
   Shown after deposit paid while services are being arranged
   ========================================================================== */

body.inquiry-page .inquiry-post-deposit-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--inquiry-radius);
    margin: 16px 0;
}

body.inquiry-page .inquiry-post-deposit-status .post-deposit-icon {
    flex-shrink: 0;
    color: #16a34a;
    margin-top: 2px;
}

body.inquiry-page .inquiry-post-deposit-status .post-deposit-text h4 {
    font-family: var(--inquiry-font-family);
    font-size: 14px;
    font-weight: 600;
    color: #15803d;
    margin: 0 0 4px;
}

body.inquiry-page .inquiry-post-deposit-status .post-deposit-text p {
    font-family: var(--inquiry-font-family);
    font-size: 13px;
    color: #166534;
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   Balance Payment Section (March 2026)
   Countdown timer + Pay Balance button after admin enables payment
   ========================================================================== */

body.inquiry-page .inquiry-balance-payment-section {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--inquiry-radius);
    padding: 24px;
    margin: 20px 0;
    text-align: center;
}

/* Countdown Timer */
body.inquiry-page .balance-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

body.inquiry-page .balance-countdown-timer .countdown-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    flex-shrink: 0;
}

body.inquiry-page .balance-countdown-timer .countdown-days {
    font-family: var(--inquiry-font-family);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

body.inquiry-page .balance-countdown-timer .countdown-label {
    font-family: var(--inquiry-font-family);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    margin-top: 2px;
    opacity: 0.9;
}

body.inquiry-page .balance-countdown-timer .countdown-info {
    text-align: left;
}

body.inquiry-page .balance-countdown-timer .countdown-info h4 {
    font-family: var(--inquiry-font-family);
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 4px;
}

body.inquiry-page .balance-countdown-timer .countdown-info p {
    font-family: var(--inquiry-font-family);
    font-size: 13px;
    color: #78350f;
    margin: 0;
    line-height: 1.5;
}

/* Balance Amount Display */
body.inquiry-page .inquiry-balance-payment-section .balance-amount-display {
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: var(--inquiry-radius);
    padding: 16px;
    margin-bottom: 16px;
    display: inline-block;
    min-width: 200px;
}

body.inquiry-page .inquiry-balance-payment-section .balance-amount-label {
    font-family: var(--inquiry-font-family);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #92400e;
    margin: 0 0 4px;
}

body.inquiry-page .inquiry-balance-payment-section .balance-amount-value {
    font-family: var(--inquiry-font-family);
    font-size: 24px;
    font-weight: 700;
    color: #78350f;
    margin: 0;
}

/* Pay Balance Button */
body.inquiry-page .balance-payment-form .btn-pay-balance,
body.inquiry-page .inquiry-balance-payment-section .btn-pay-balance {
    display: inline-block;
    padding: 12px 32px;
    background: #000;
    color: #fff !important;
    font-family: var(--inquiry-font-family);
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: var(--inquiry-radius);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

body.inquiry-page .balance-payment-form .btn-pay-balance:hover,
body.inquiry-page .inquiry-balance-payment-section .btn-pay-balance:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}

body.inquiry-page .balance-payment-form .btn-pay-balance:active,
body.inquiry-page .inquiry-balance-payment-section .btn-pay-balance:active {
    transform: translateY(0);
}

/* Guide note in balance section */
body.inquiry-page .inquiry-balance-payment-section .balance-guide-note {
    font-family: var(--inquiry-font-family);
    font-size: 13px;
    color: #78350f;
    margin: 16px 0 0;
    font-style: italic;
}

/* ==========================================================================
   Balance Payment Section - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    body.inquiry-page .inquiry-balance-payment-section {
        padding: 16px;
    }

    body.inquiry-page .balance-countdown-timer {
        flex-direction: column;
        gap: 12px;
    }

    body.inquiry-page .balance-countdown-timer .countdown-circle {
        width: 72px;
        height: 72px;
    }

    body.inquiry-page .balance-countdown-timer .countdown-days {
        font-size: 22px;
    }

    body.inquiry-page .balance-countdown-timer .countdown-info {
        text-align: center;
    }

    body.inquiry-page .inquiry-balance-payment-section .balance-amount-value {
        font-size: 20px;
    }
}

/* ==========================================================================
   Guest Constraint Hint & Info Label
   ========================================================================== */
body.inquiry-page .inquiry-guest-constraint-hint {
    padding: 8px 16px;
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 6px;
    margin: -4px 0 12px 0;
    font-size: 13px;
    color: #6D4C00;
    font-family: 'Google Sans', sans-serif;
}

body.inquiry-page .constraint-info-label {
    font-size: 12px;
    color: #888;
    font-style: italic;
    line-height: 1.4;
}

body.inquiry-page .meta-item-constraint-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ============================================
   ADMIN INTERVENTION PANEL
   ============================================ */
/* ============================================
   ADMIN INTERVENTION PANEL + COMPOSER
   Re-skinned to the Sarisara design system 2026-07-29 (Chiran): violet #7700FF
   primary, navy #090920 text, the section-card shape with a violet left accent,
   uppercase muted group labels, pill buttons. The old navy/blue #3b5998 look was
   raw theme chrome and read as a different product.
   ============================================ */
.inquiry-admin-panel {
    margin-top: 16px;
    background: #faf8ff;
    border: 1px solid #e3d6ff;
    border-left: 4px solid #7700FF;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(9, 9, 32, 0.06);
}

.admin-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ece3ff;
}

.admin-panel-badge {
    display: inline-block;
    background: #7700FF;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.admin-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #090920;
}

.admin-action-group {
    margin-bottom: 16px;
}

.admin-action-group > label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #8a8a9a;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.admin-action-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-select,
.admin-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e3d6ff;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: #090920;
    min-width: 0;
}

.admin-select:focus,
.admin-input:focus {
    outline: none;
    border-color: #7700FF;
    box-shadow: 0 0 0 3px rgba(119, 0, 255, 0.12);
}

.admin-action-btn {
    padding: 10px 20px;
    border: 1.5px solid #7700FF;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #7700FF;
    color: #fff;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
}

.admin-action-btn:hover {
    background: #6200d6;
    border-color: #6200d6;
}

.admin-action-btn:active { transform: translateY(1px); }

.admin-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-action-btn.btn-disabled {
    background: #d6d6e0;
    border-color: #d6d6e0;
    color: #6b6b80;
    cursor: default;
}

/* The full-width report button reads as the secondary action of the panel. */
.admin-action-btn.btn-generate-report {
    background: #fff;
    color: #7700FF;
}

.admin-action-btn.btn-generate-report:hover {
    background: #f3eeff;
    color: #6200d6;
}

.admin-action-group > small {
    display: block;
    font-size: 12px;
    color: #8a8a9a !important;
    margin-top: 6px;
    line-height: 1.5;
}

/* ============================================
   ADMIN COMPOSER (Messaging)
   ============================================ */
.admin-composer {
    background: #faf8ff !important;
    border-top: 2px solid #e3d6ff !important;
}

/* "Send to" — three radio buttons rather than a dropdown, so the admin can see
   at a glance who is about to receive the message (Chiran 2026-07-29). */
.admin-mention-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px 0;
}

.admin-mention-bar > label {
    font-size: 11px;
    font-weight: 700;
    color: #8a8a9a;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.admin-mention-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-mention-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid #e3d6ff;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4a4a63;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    user-select: none;
}

.admin-mention-option:hover {
    border-color: #c9aaff;
    color: #090920;
}

/* The native radio stays in the DOM for accessibility and keyboard use; the pill
   is the visible control. */
.admin-mention-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.admin-mention-option.is-selected {
    background: #7700FF;
    border-color: #7700FF;
    color: #fff;
}

.admin-mention-option input[type="radio"]:focus-visible + .admin-mention-label {
    outline: 2px solid #7700FF;
    outline-offset: 3px;
    border-radius: 4px;
}

.admin-composer .composer-hint small {
    color: #8a8a9a;
}

/* ============================================
   PRIVATE MESSAGE STYLING
   ============================================ */
.inquiry-message.message-private .message-bubble {
    border: 1px dashed #c3d4f7;
    background: #f0f4ff;
}

.inquiry-message.message-private.message-own .message-bubble {
    background: #e8eef8;
}

.message-private-label {
    display: inline-block;
    font-size: 11px;
    color: #6366f1;
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 3px;
    font-weight: 500;
}

.message-private-label .fa-lock {
    font-size: 10px;
    margin-right: 3px;
}

/* ============================================
   AVATAR ROLE LABELS (Overlay on avatar circle)
   ============================================ */
.message-avatar {
    position: relative;
}

.avatar-role-label {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 5px;
    border-radius: 6px;
    line-height: 1.2;
    white-space: nowrap;
    z-index: 1;
    border: 1.5px solid #fff;
}

/* Admin — Blue */
.avatar-role-admin {
    background: #345CFE;
    color: #fff;
}

/* Traveler — Green */
.avatar-role-traveler {
    background: #30B300;
    color: #fff;
}

/* Guide — Yellow/Gold */
.avatar-role-guide {
    background: #FFB700;
    color: #1a1a1a;
}

/* ============================================
   QUICK MESSAGE POPUP (ShadCN-inspired)
   ============================================ */
.quick-message-popup {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-bottom: 4px;
    display: none;
}

.qm-popup-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    padding: 10px 14px 6px;
    border-bottom: 1px solid #f1f5f9;
}

.qm-popup-list {
    padding: 4px 0;
}

.qm-popup-item {
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.qm-popup-item:hover,
.qm-popup-item.qm-popup-item-active {
    background: #f0f4ff;
}

.qm-popup-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.qm-popup-preview {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Booking ID in Dashboard & Inquiry Page
   ========================================================================== */
.inquiry-booking-id {
    display: block;
    font-size: 11px;
    color: #166534;
    font-weight: 500;
    margin-top: 1px;
}

/* ==========================================================================
   Provider Status Banners (Service Cards)
   ========================================================================== */
.provider-status-banner {
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.provider-status-banner.provider-status-confirmed {
    background: #F0FDF4;
    border-bottom: 1px solid #BBF7D0;
}
.provider-status-banner.provider-status-pending {
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}
.provider-status-banner.provider-status-unavailable {
    background: #FEF2F2;
    border-bottom: 1px solid #FECACA;
}
.provider-status-banner.provider-status-alt-suggested {
    background: #FFFBEB;
    border-bottom: 1px solid #FDE68A;
}

.provider-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.provider-status-badge.confirmed { background: #D1FAE5; color: #065F46; }
.provider-status-badge.pending { background: #E5E7EB; color: #6B7280; }
.provider-status-badge.unavailable { background: #FEE2E2; color: #991B1B; }
.provider-status-badge.alt-suggested { background: #FEF3C7; color: #92400E; }

.provider-alt-details {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}
.alt-dates-info {
    font-size: 13px;
    color: #92400E;
}
.provider-alt-actions {
    display: flex;
    gap: 8px;
}
.btn-accept-alt,
.btn-reject-alt {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-accept-alt { background: #30B300; color: #fff; }
.btn-accept-alt:hover { background: #098700; }
.btn-reject-alt { background: #FF0A1F; color: #fff; }
.btn-reject-alt:hover { background: #D6081A; }

.btn-replace-service {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #345CFE;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-replace-service:hover { background: #2547D4; }

/* Fix All Dates Button */
.btn-fix-all-dates {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: #F59E0B;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-fix-all-dates:hover { background: #D97706; }

/* ==========================================================================
   Scoped Mini-Editor (Replacement Search Panel)
   ========================================================================== */
.replacement-editor {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.replacement-editor.open { transform: translateX(0); }

.replacement-editor-header {
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.replacement-editor-header h3 { font-size: 16px; color: #1F2937; margin: 0; }
.replacement-editor-close {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: #F3F4F6;
    cursor: pointer;
    font-size: 18px;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.replacement-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.replacement-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}
.replacement-search-input:focus { outline: none; border-color: #345CFE; }

.replacement-search-results {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.replacement-search-results li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.replacement-search-results li:hover { background: #F9FAFB; }
.replacement-search-results li.selected { border-color: #345CFE; background: #EEF2FF; }
.replacement-result-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}
.replacement-result-info { flex: 1; min-width: 0; }
.replacement-result-name { font-size: 14px; font-weight: 500; color: #1F2937; }
.replacement-result-location { font-size: 12px; color: #6B7280; }

/* ── Hotel Replacement: Room Type Cards ── */
.rep-hotel-header {
    margin-top: 14px;
    padding: 0 0 10px 0;
}
.rep-hotel-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--inquiry-text, #090920);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0;
}
.rep-hotel-location {
    font-size: 12px;
    color: var(--inquiry-text-secondary, #6B7280);
    margin: 2px 0 0 0;
}
.rep-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--inquiry-text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}
.rep-room-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rep-room-card {
    border: 1px solid var(--inquiry-border, #E5E7EB);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s ease;
    overflow: hidden;
}
.rep-room-card:hover {
    border-color: #000;
}
.rep-room-card.selected {
    border: 2px solid #000;
}
.rep-room-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
    user-select: none;
}
.rep-room-checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    margin-top: 1px;
    background: #fff;
    transition: all 0.15s ease;
}
.rep-room-card.selected .rep-room-checkbox {
    background: #000;
    border-color: #000;
}
.rep-room-card.selected .rep-room-checkbox::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.rep-room-info {
    flex: 1;
    min-width: 0;
}
.rep-room-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--inquiry-text, #090920);
    margin: 0 0 4px 0;
}
.rep-room-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--inquiry-text, #090920);
    white-space: nowrap;
    margin-top: 1px;
}
.rep-room-price span {
    font-size: 11px;
    font-weight: 400;
    color: var(--inquiry-text-secondary, #6B7280);
}
.rep-room-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.rep-amenity-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: #f3f3f5;
    border-radius: 9999px;
    font-size: 11px;
    color: var(--inquiry-text-secondary, #6B7280);
    line-height: 1.4;
}
/* Config section — collapsed by default */
.rep-room-config {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.rep-room-card.selected .rep-room-config {
    max-height: 300px;
}
.rep-room-config-inner {
    padding: 0 12px 12px 12px;
    border-top: 1px solid var(--inquiry-border, #E5E7EB);
}
.rep-config-field {
    margin-top: 10px;
}
.rep-config-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--inquiry-text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    display: block;
}
.rep-config-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--inquiry-border, #E5E7EB);
    border-radius: 6px;
    font-size: 13px;
    color: var(--inquiry-text, #090920);
    background: #fff;
    appearance: auto;
}
.rep-stepper-row {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}
.rep-stepper-group {
    flex: 1;
}
.rep-stepper-group .rep-config-label {
    margin-bottom: 5px;
}
.rep-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--inquiry-border, #E5E7EB);
    border-radius: 6px;
    overflow: hidden;
    height: 36px;
}
.rep-stepper-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f9fafb;
    color: var(--inquiry-text, #090920);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.1s;
    padding: 0;
    line-height: 1;
}
.rep-stepper-btn:hover {
    background: #e5e7eb;
}
.rep-stepper-value {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--inquiry-text, #090920);
    border-left: 1px solid var(--inquiry-border, #E5E7EB);
    border-right: 1px solid var(--inquiry-border, #E5E7EB);
    line-height: 36px;
}
.rep-room-subtotal {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--inquiry-border, #E5E7EB);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.rep-room-subtotal-label {
    color: var(--inquiry-text-secondary, #6B7280);
}
.rep-room-subtotal-value {
    font-weight: 700;
    color: var(--inquiry-text, #090920);
}
/* Grand total bar */
.rep-total-bar {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rep-total-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--inquiry-text, #090920);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.rep-total-value {
    font-size: 18px;
    font-weight: 700;
    color: #30B300;
}
/* Responsive */
@media (max-width: 480px) {
    .rep-stepper-row {
        flex-direction: column;
        gap: 10px;
    }
}

.replacement-editor-footer {
    padding: 16px 20px;
    border-top: 1px solid #E5E7EB;
}
/* The panel's primary action: violet with white text (Chiran, 28 Aug 2026).
   It was #0BA300 — and not even the current brand green, but the one retired
   in April 2026. Green belongs to confirmations and prices, not to the button
   that performs the action. */
.btn-submit-replacement {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    background: #7700FF;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-submit-replacement:hover:not(:disabled) { background: #6200D6; }
.btn-submit-replacement:disabled { opacity: 0.5; cursor: not-allowed; }

/* Service locking during replacement */
.service-item.service-locked {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
}
.service-item.service-locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.3);
    z-index: 5;
}

/* Replacement editor overlay/backdrop */
.replacement-editor-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 999;
    display: none;
}
.replacement-editor-backdrop.active { display: block; }

/* ==========================================================================
   Fix All Dates Modal
   ========================================================================== */
.fix-dates-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1001;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.fix-dates-modal.active { display: flex; }
.fix-dates-modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}
.fix-dates-modal-content h3 { font-size: 18px; color: #1F2937; margin: 0 0 12px 0; }
.fix-dates-modal-content p { font-size: 14px; color: #6B7280; margin: 0 0 16px 0; }
.fix-dates-change-list { list-style: none; padding: 0; margin: 0 0 20px 0; }
.fix-dates-change-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}
.fix-dates-change-list .change-service { font-weight: 500; color: #1F2937; }
.fix-dates-change-list .change-arrow { color: #F59E0B; font-weight: 600; margin: 0 8px; }
.fix-dates-modal-actions { display: flex; gap: 12px; }
.fix-dates-modal-actions button {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.btn-fix-cancel { background: #F3F4F6; color: #374151; border: 1px solid #E5E7EB; }
.btn-fix-confirm { background: #F59E0B; color: #fff; border: none; }
.btn-fix-confirm:hover { background: #D97706; }

@media (max-width: 640px) {
    .provider-status-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .provider-alt-details {
        flex-direction: column;
        align-items: flex-start;
    }
    .replacement-editor { width: 100%; max-width: 100%; }
}

/* ==========================================================================
   TRAVELER ONBOARDING - Welcome Banner, Suggestion Chips, Smart Modal
   ========================================================================== */

/* --- Component 1: Welcome Orientation Banner --- */
body.inquiry-page .traveler-welcome-banner {
    display: none; /* shown by JS after localStorage check */
    background: rgba(255, 183, 0, 0.1) !important;
    border: 1px solid rgba(255, 183, 0, 0.35) !important;
    border-radius: var(--inquiry-radius) !important;
    padding: 16px 20px !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--inquiry-font-family) !important;
    animation: welcomeBannerSlideIn 0.3s ease-out;
}

@keyframes welcomeBannerSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

body.inquiry-page .welcome-banner-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

body.inquiry-page .welcome-banner-icon {
    flex-shrink: 0 !important;
    color: #FFB700 !important;
    margin-top: 2px !important;
}

body.inquiry-page .welcome-banner-icon svg {
    stroke: #FFB700 !important;
}

body.inquiry-page .welcome-banner-text {
    flex: 1 !important;
    font-size: 14px !important;
    color: var(--inquiry-text) !important;
    line-height: 1.5 !important;
}

body.inquiry-page .welcome-banner-text strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #090920 !important;
}

body.inquiry-page .welcome-banner-text ul {
    margin: 0 !important;
    padding: 0 0 0 18px !important;
    list-style: disc !important;
}

body.inquiry-page .welcome-banner-text ul li {
    margin-bottom: 4px !important;
    font-size: 13px !important;
    color: #4d4d4d !important;
    line-height: 1.5 !important;
}

body.inquiry-page .welcome-banner-text ul li em {
    font-weight: 600 !important;
    font-style: normal !important;
    color: #090920 !important;
}

/* "Got it" dismisses a hint — it is a secondary action, so it takes the
   design system's outline treatment (white, violet border, violet text), not
   a filled button. It was gold, which Chiran retired on 28 Aug 2026, and it
   sat immediately beside the violet "Send to your guide" button competing
   with it for attention. */
body.inquiry-page .welcome-banner-dismiss {
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
    color: #7700FF !important;
    border: 1.5px solid #7700FF !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: var(--inquiry-font-family) !important;
    transition: background-color 0.2s !important;
    white-space: nowrap !important;
    align-self: center !important;
}

body.inquiry-page .welcome-banner-dismiss:hover {
    background: #F4EBFF !important;
}

/* Mobile: stack banner content */
@media (max-width: 768px) {
    body.inquiry-page .welcome-banner-content {
        flex-direction: column !important;
        gap: 12px !important;
    }

    body.inquiry-page .welcome-banner-icon {
        display: none !important;
    }

    body.inquiry-page .welcome-banner-dismiss {
        align-self: flex-start !important;
    }
}

/* --- Component 2: Enhanced Chat Empty State with Suggestion Chips --- */
body.inquiry-page .traveler-empty-state h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--inquiry-text) !important;
    margin: 0 0 8px 0 !important;
}

body.inquiry-page .traveler-empty-state p {
    max-width: 360px !important;
}

body.inquiry-page .suggestion-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 16px !important;
}

body.inquiry-page .suggestion-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--inquiry-font-family) !important;
    color: #090920 !important;
    background: #ffffff !important;
    border: 1px solid var(--inquiry-border) !important;
    border-radius: var(--inquiry-radius-pill) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    line-height: 1.3 !important;
}

body.inquiry-page .suggestion-chip:hover {
    background: rgba(255, 183, 0, 0.1) !important;
    border-color: #FFB700 !important;
    color: #090920 !important;
}

body.inquiry-page .suggestion-chip:active {
    transform: scale(0.97) !important;
}

/* Mobile: chips stack vertically */
@media (max-width: 768px) {
    body.inquiry-page .suggestion-chips {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.inquiry-page .suggestion-chip {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* --- Component 3: Early Warning Modal Variant --- */
.done-modal-icon--warning svg {
    color: #FFB700 !important;
    stroke: #FFB700 !important;
}

.done-modal-actions .btn-done-message-guide {
    flex: 1;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    background: #FFB700;
    color: #090920;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--inquiry-font-family);
}

.done-modal-actions .btn-done-message-guide:hover {
    background: #e6a500;
}

.done-modal-actions .btn-done-finalize-anyway {
    flex: 1;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: #969696;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--inquiry-font-family);
}

.done-modal-actions .btn-done-finalize-anyway:hover {
    background: #f5f5f5;
    color: #666;
}

/* ==========================================================================
   BAR Rate Tooltips on Flatpickr Calendar
   ========================================================================== */
.flatpickr-day.has-bar-rate {
    position: relative;
    border-bottom: 2px solid #FFB700;
}
.flatpickr-day .bar-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #090920;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(9, 9, 32, 0.2);
}
.flatpickr-day .bar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #090920;
}
.flatpickr-day:hover .bar-tooltip {
    display: block;
}

/* ============================================
 * Dynamic Price Re-Evaluation Indicators (Traveler side)
 * March 2026 - Visual feedback when prices update after date change
 * ============================================ */
.price-updated {
    background-color: rgba(255, 183, 0, 0.15) !important;
    transition: background-color 3s ease-out;
}
.room-data-price.price-updated,
.room-price-display.price-updated {
    border-radius: 4px;
    padding: 2px 4px;
}

/* ==============================================
 * Fix: Service header grid in edit mode needs a 5th column for action buttons
 * April 2026 - The read-only grid (80px 180px 1fr 150px) has higher specificity
 * than the builder's grid, so action buttons get squeezed into the price column,
 * creating a double-border effect. Add the action column for edit mode.
 * ============================================== */
body.inquiry-page .sarisara-itinerary-redesign .itinerary-edit-mode .service-header {
    grid-template-columns: 170px 1fr 152px 50px !important;
    grid-template-rows: 50% 50% !important;
}

/* ==========================================================================
   INQUIRY SUMMARY RE-SKIN (2026-08-18)
   --------------------------------------------------------------------------
   Brings the inquiry page's "Itinerary Summary" panel in line with the tour
   preview's summary card, so a traveller sees the same thing on both pages:
   white card + short violet accent pill, uppercase section head, quiet
   #faf9fd stat tiles with violet-tinted borders, navy money — instead of the
   hard black-bordered boxes.

   Values mirror the tour block in assets/css/itinerary-booking-summary.css
   ("SUMMARY RE-SKIN"). Loads last in this file, so it wins over the earlier
   !important rules at the same specificity. Pure styling: no markup, no
   figures, no behaviour.
   ========================================================================== */
body.inquiry-page .inquiry-summary-section {
    position: relative !important;
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(9, 9, 32, 0.05) !important;
    padding: 22px 26px !important;
    color: #090920 !important;
}
/* The canonical section-head accent: short violet pill on the left edge */
body.inquiry-page .inquiry-summary-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    height: 26px;
    width: 3px;
    background: #7700FF;
    border-radius: 0 3px 3px 0;
}
/* The two columns sit on a white card inside the tinted shell */
body.inquiry-page .inquiry-summary-section .summary-content {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
}

/* Section head */
body.inquiry-page .summary-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #090920 !important;
    margin: 0 !important;
}
body.inquiry-page .summary-head-sub {
    margin: 2px 0 16px !important;
    font-size: 13px !important;
    color: #6b6b7b !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* Stat tiles */
body.inquiry-page .itinerary-stats {
    gap: 10px !important;
    margin-bottom: 18px !important;
}
body.inquiry-page .stat-box {
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    width: 92px !important;
    height: 92px !important;
}
body.inquiry-page .stat-number {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #090920 !important;
}
body.inquiry-page .stat-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6b6b7b !important;
}

/* Route / dates */
body.inquiry-page .itinerary-route p {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #090920 !important;
}
body.inquiry-page .itinerary-route .route-icon,
body.inquiry-page .itinerary-route .date-icon {
    color: #6b6b7b !important;
}

/* Tour Guide per-person boxes — same tile treatment */
body.inquiry-page .tour-guide-section {
    border-top: 1px solid #eeeaf6 !important;
}
body.inquiry-page .tour-guide-section .section-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6b6b7b !important;
    margin: 0 0 12px 0 !important;
}
body.inquiry-page .guide-box {
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 12px !important;
    height: 92px !important;
}
body.inquiry-page .guide-box span:first-child {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6b6b7b !important;
}
body.inquiry-page .guide-box span:last-child {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #090920 !important;
}

/* Pricing column */
body.inquiry-page .summary-right {
    border-left: 1px solid #eeeaf6 !important;
}
body.inquiry-page .price-category h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6b6b7b !important;
    border-bottom: 1px solid #eeeaf6 !important;
    padding-bottom: 6px !important;
    margin: 0 0 8px 0 !important;
}
body.inquiry-page .price-row {
    font-size: 14px !important;
    color: #6b6b7b !important;
}
body.inquiry-page .price-row span:last-child {
    font-weight: 500 !important;
    color: #090920 !important;
}
body.inquiry-page .price-subtotal {
    border-top: 1px solid #eeeaf6 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #090920 !important;
}
/* Sub Total in navy, matching the tour summary (higher contrast than the old
   green, so the WCAG note above still holds). */
body.inquiry-page .price-subtotal span:last-child {
    color: #090920 !important;
    font-weight: 600 !important;
}

/* Itinerary controls → the same pill buttons the tour preview uses
   (itinerary-ds-reskin.css:453). "Edit Itinerary" is the primary action, so it
   takes the violet pill; "Expand All" is the quiet outline pill. */
body.inquiry-page .btn-edit-itinerary-top {
    background: #7700FF !important;
    border: 1px solid #7700FF !important;
    border-radius: 30px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 26px !important;
    box-shadow: none !important;
}
body.inquiry-page .btn-edit-itinerary-top:hover {
    background: #6300d6 !important;
    border-color: #6300d6 !important;
    color: #ffffff !important;
}
body.inquiry-page .btn-expand-collapse-toggle {
    background: #ffffff !important;
    border: 1px solid #E8E8EE !important;
    border-radius: 30px !important;
    color: #090920 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 26px !important;
    box-shadow: 0 1px 2px rgba(9, 9, 2, 0.04), 0 1px 3px rgba(9, 9, 2, 0.06) !important;
}
body.inquiry-page .btn-expand-collapse-toggle:hover {
    background: #F8F4FF !important;
    border-color: rgba(119, 0, 255, .30) !important;
    color: #7700FF !important;
}

/* ==========================================================================
   HAND IT TO THE GUIDE  (finding F1)

   The inquiry used to reach the guide only if the traveller happened to open
   the chat and type something. This is the missing step, made impossible to
   miss: it sits directly under the progress stepper, above everything else on
   the page, and it is the only violet button in view.

   Deliberately NOT a modal or a toast. The traveller is meant to edit the trip
   first and send it when they are ready — so this has to sit there patiently,
   not interrupt.
   ========================================================================== */
body.inquiry-page .inquiry-handoff {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(119, 0, 255, 0.25) !important;
    /* The violet edge is what carries the "this is your move" signal — a full
       violet fill would compete with the button inside it. */
    border-left: 4px solid #7700FF !important;
    border-radius: var(--inquiry-radius) !important;
    padding: 18px 22px !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--inquiry-font-family) !important;
    box-shadow: 0 2px 10px rgba(9, 9, 32, 0.06) !important;
}

body.inquiry-page .inquiry-handoff__body {
    min-width: 0 !important;
}

body.inquiry-page .inquiry-handoff__eyebrow {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #7700FF !important;
    margin: 0 0 6px 0 !important;
}

body.inquiry-page .inquiry-handoff__title {
    display: block !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #090920 !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
}

body.inquiry-page .inquiry-handoff__note {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #5B5B72 !important;
    margin: 0 !important;
}

body.inquiry-page .inquiry-handoff__action {
    flex: 0 0 auto !important;
}

/* The design-system primary button, restated here.
   `.ss-btn--primary` is the canonical component, but its stylesheet
   (partner-price-layout.css / host-experience.css) is not enqueued on the
   inquiry page — the button rendered as the browser's default grey, which the
   test caught. These are the same values, not new ones: violet #7700FF, white
   lettering, pill radius, DM Sans 700. */
body.inquiry-page .inquiry-handoff__btn,
body.inquiry-page .inquiry-handoff__btn:link,
body.inquiry-page .inquiry-handoff__btn:visited,
body.inquiry-page button.ss-btn.sl-contact-sarisara {
    display: inline-block !important;
    white-space: nowrap !important;
    background: #7700FF !important;
    background-color: #7700FF !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 13px 28px !important;
    font-family: var(--inquiry-font-family), 'Google Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(119, 0, 255, 0.25) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.inquiry-page .inquiry-handoff__btn:hover:not(:disabled),
body.inquiry-page button.ss-btn.sl-contact-sarisara:hover {
    background-color: #6200D6 !important;
    box-shadow: 0 4px 14px rgba(119, 0, 255, 0.32) !important;
}

body.inquiry-page .inquiry-handoff__btn:disabled {
    opacity: 0.65 !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* "Contact Sarisara" on a cancelled trip (4 Oct 2026) sits in the chips row,
   which already spaces it. */
body.inquiry-page button.ss-btn.sl-contact-sarisara { margin-top: 0 !important; }

/* Sent. The panel stays put and changes its mind, rather than vanishing —
   a traveller who pressed the button needs to see that it worked. */
body.inquiry-page .inquiry-handoff.is-sent {
    border-left-color: #30B300 !important;
    border-color: rgba(48, 179, 0, 0.3) !important;
}

body.inquiry-page .inquiry-handoff.is-sent .inquiry-handoff__eyebrow {
    color: #30B300 !important;
}

@media (max-width: 640px) {
    body.inquiry-page .inquiry-handoff {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }
    body.inquiry-page .inquiry-handoff__btn {
        width: 100% !important;
    }
}

/* The replacement search list: an empty state that says WHY, and the capacity
   line the guide judges a swap by. The list used to render nothing at all —
   both for "no matches" and for "the search was refused" — because a broken
   escaping helper threw on the first result (finding D1). */
body.inquiry-page .replacement-result-empty,
.replacement-result-empty {
    padding: 14px 16px !important;
    color: #5B5B72 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    list-style: none !important;
    cursor: default !important;
}

body.inquiry-page .replacement-result-meta,
.replacement-result-meta {
    font-size: 12px !important;
    color: #7700FF !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}

/* THE LOCKED COMPOSER — one button instead of an empty typing box.
   The chat does not open until the guide has been told, so the traveller has
   an instruction rather than an invitation to guess (Chiran, 30 Aug 2026). */
body.inquiry-page .inquiry-composer--locked {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px 18px !important;
    text-align: center !important;
}
body.inquiry-page .inquiry-composer--locked .composer-hint {
    max-width: 340px !important;
}
body.inquiry-page .inquiry-composer--locked .composer-hint small {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #5B5B72 !important;
}
body.inquiry-page .inquiry-notify-guide,
body.inquiry-page .inquiry-notify-guide:link,
body.inquiry-page .inquiry-notify-guide:visited {
    display: inline-block !important;
    background: #7700FF !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 13px 28px !important;
    font-family: var(--inquiry-font-family), 'Google Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(119, 0, 255, 0.25) !important;
}
body.inquiry-page .inquiry-notify-guide:hover:not(:disabled) {
    background: #6200D6 !important;
}
body.inquiry-page .inquiry-notify-guide:disabled {
    opacity: 0.65 !important;
    cursor: default !important;
}

/* Chiran's own values, 30 Aug 2026 — the guide-cancellation controls. A
   destructive action reads red, the confirming one green, and a plain .ss-btn
   keeps dark text so it never disappears on a light panel. */
button.ss-btn.ss-btn--outline.sl-gc-open-btn {
    background: #ff0000;
    color: #ffffff !important;
    border: 1px solid;
    padding: 5px 20px;
    border-radius: 999px;
    margin-top: 20px;
}
button.ss-btn {
    color: #000000 !important;
    border: 1px solid;
    padding: 5px 20px;
    border-radius: 999px;
    margin-top: 20px;
}
button.ss-btn.ss-btn--primary.sl-gc-send {
    background: #30B300;
    color: #fff !important;
}

/* ==========================================================================
   REPLACE SERVICE — a floating drawer, not a slab welded to the screen edges.

   Chiran, image 209 (1 Sep 2026): "the Replace Service text on the top has been
   cropped out... it is stuck to the bottom area. What I am looking for is
   something that comes out from the right side in a very modern way, but it
   should NOT stick to the top and bottom of the screen — it should have clear
   spacing on the top and bottom."

   It was top:0 / bottom:0 / right:0, so it ran edge to edge and the WordPress
   admin bar sat on top of its own heading. Now it is inset on all four sides,
   rounded, and floats.
   ========================================================================== */
.replacement-editor {
    top: 26px;
    bottom: 26px;
    right: 22px;
    /* WIDE ENOUGH FOR THE CARD. At 460px the shared card had to wrap: the hotel
       name broke over three lines and the FREE badge was clipped to "FR". The
       card is the content, so the drawer is sized to it rather than the other
       way round. */
    width: 660px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(9, 9, 32, .22);
    /* Clear the admin bar when it is there — that is what clipped the title. */
    top: calc(26px + var(--wp-admin--admin-bar--height, 0px));
}
/* Slide clear of its own right-hand gap when closed. */
.replacement-editor { transform: translateX(calc(100% + 34px)); }
.replacement-editor.open { transform: translateX(0); }

.replacement-editor-header {
    padding: 18px 22px;
    border-bottom: 1px solid #EFEFF4;
}
.replacement-editor-header h3 {
    font-size: 17px; font-weight: 700; color: #090920; letter-spacing: -.01em;
}
.replacement-editor-body { padding: 18px 20px; }

.replacement-search-input {
    border: 1px solid #E4E4EC;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 14.5px;
    background: #FAFAFC;
    margin-bottom: 16px;
}
.replacement-search-input:focus {
    border-color: #7700FF; background: #fff;
    box-shadow: 0 0 0 3px rgba(119, 0, 255, .10);
}

/* THE CARD IS THE BOX. The list item used to draw its own border, padding and
   thumbnail, so the shared card ended up nested inside a second frame. */
.replacement-search-results li:has(.srs-card),
.replacement-search-results li.selected:has(.srs-card) {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: block !important;
}
.replacement-search-results li:has(.srs-card) .srs-card { cursor: pointer; }
.replacement-search-results li.selected .srs-card {
    border-color: #7700FF;
    box-shadow: 0 0 0 3px rgba(119, 0, 255, .10);
}
.replacement-result-empty {
    padding: 22px 4px; text-align: center; color: #6B6B80; font-size: 13.5px; line-height: 1.5;
}

@media (max-width: 560px) {
    .replacement-editor {
        top: 14px; bottom: 14px; right: 12px; left: 12px;
        width: auto; max-width: none; border-radius: 16px;
    }
}

/* THE SEARCH BAR, as the builder draws it (Chiran, image 227, 1 Sep 2026).
   Was a white box with a violet border and no icon; the builder's is a soft grey
   field with the magnifier inside it. Same control, so: same look. */
.replacement-search-bar {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid #E4E4EC; border-radius: 10px;
    padding: 11px 14px; margin-bottom: 16px;
    background: #FAFAFC; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.replacement-search-bar:focus-within {
    border-color: #7700FF; background: #fff; box-shadow: 0 0 0 3px rgba(119,0,255,.10);
}
.replacement-search-bar svg { width: 17px; height: 17px; color: #A0A0B0; flex: none; }
.replacement-search-bar .replacement-search-input {
    border: 0 !important; outline: none !important; box-shadow: none !important;
    background: transparent !important; padding: 0 !important; margin: 0 !important;
    flex: 1; height: auto !important;
    font-size: 14.5px !important; font-weight: 500;
    font-family: 'Google Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color: #090920 !important;
}
.replacement-search-bar .replacement-search-input::placeholder { color: #8A8A9A; font-weight: 500; }

/* The card inside the drawer: a touch tighter than in the builder, because a
   drawer is narrower than a page — but never so tight that anything wraps. */
.replacement-editor .srs-card { padding: 12px; gap: 12px; }
.replacement-editor .srs-card__media { width: 62px; height: 62px; }
.replacement-editor .srs-card__title { font-size: 16px; }
.replacement-editor .srs-card__meta { font-size: 13.5px; }
.replacement-editor .srs-card__right { gap: 11px; }
.replacement-editor .srs-card__add { padding: 9px 18px !important; }
/* The availability badge must never be shortened to "FR". */
.replacement-editor .srs-card__avail { flex: none; }

@media (max-width: 760px) {
    .replacement-editor { width: auto; left: 12px; right: 12px; }
}

/* ==========================================================================
   UNRESOLVED SERVICES — the trip cannot be saved yet
   --------------------------------------------------------------------------
   Chiran, 8 September 2026: a partner who said no, or who offered a different
   date and is still waiting for an answer, must be dealt with before the guide
   can save. This panel is what he sees instead of the save going through.

   Deliberately NOT a toast. A toast fades in four seconds and cannot carry a
   list — the guide has to read which service and what to do about it, and it
   has to still be on screen while he fixes it.

   Colours: red #FF0A1F (destructive/blocked) and gold #FFB700 (waiting) from
   the locked brand palette, on the standard violet-accent section card from
   RULE 5.5. Nothing invented here.
   ========================================================================== */
.ss-unresolved {
    background: #fff;
    border: 1px solid rgba(255, 10, 31, .22);
    border-left: 4px solid #FF0A1F;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 22px;
    box-shadow: 0 2px 10px rgba(9, 9, 32, .06);
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #090920;
}
.ss-unresolved__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.ss-unresolved__head strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #FF0A1F;
}
.ss-unresolved__close {
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #6b6b80;
    cursor: pointer;
    padding: 0 4px;
}
.ss-unresolved__close:hover { color: #090920; }
.ss-unresolved__lead {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #4a4a63;
}
.ss-unresolved__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ss-unresolved__item {
    background: #fafafa;
    border: 1px solid #ececf2;
    border-radius: 10px;
    padding: 12px 14px;
}
.ss-unresolved__name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.ss-unresolved__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.ss-unresolved__tag--unavailable {
    background: rgba(255, 10, 31, .1);
    color: #c40017;
}
.ss-unresolved__tag--alternative_suggested {
    background: rgba(255, 183, 0, .16);
    color: #8a6200;
}
.ss-unresolved__what,
.ss-unresolved__why {
    font-size: 13px;
    color: #4a4a63;
    margin-bottom: 3px;
}
.ss-unresolved__why { font-style: italic; }
.ss-unresolved__fix {
    font-size: 13px;
    font-weight: 600;
    color: #7700FF;
}

/* ============================================================================
   ITINERARY SUMMARY — a colour and an icon for every kind of service
   ----------------------------------------------------------------------------
   Chiran, 13 September 2026: "the accommodation, the text should be coloured
   also in the relevant service colour, which is blue, then activities green,
   the other is in orange brown colour that you have used in the itinerary...
   tour driver colour is orange... the tour guide colour should be purple."

   SUPERSEDED 13 September 2026: the colours no longer live in this file at all.
   All eight partner types (the seven providers plus Sarisara itself) are
   defined once in Sarisara_Payout_Partner_Types and printed onto each heading
   as --ss-ink and --ss-mark. See the block further down.

   Icons all come from the canonical sheet via sarisara_ric_svg(). Same 14px
   box, same stroke, sharing the heading's line-height so the cap-height of the
   label and the icon sit on one line.
   ============================================================================ */

body.inquiry-page .price-category h4,
body.inquiry-page .tour-guide-section .section-title {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    line-height: 1.3 !important;
}

body.inquiry-page .price-category h4 .svgico,
body.inquiry-page .tour-guide-section .section-title .svgico {
    width: 14px !important;
    height: 14px !important;
    flex: none;
    /* currentColor, so each icon takes the colour of its own heading */
    color: inherit;
}

/* NO HEX LIVES HERE ANY MORE.
   Every one of these headings names a partner type, and Chiran gave the seven
   types one colour each on 13 September 2026 with one instruction: keep them in
   a single place. That place is Sarisara_Payout_Partner_Types. The template
   prints each heading's own --ss-ink and --ss-mark from it, so changing a
   partner's colour is one edit in one file and this stylesheet never needs
   touching again. */
body.inquiry-page .price-category h4,
body.inquiry-page .tour-guide-section .section-title {
    color: var(--ss-ink, #6b6b7b) !important;
}
body.inquiry-page .price-category h4 .svgico,
body.inquiry-page .tour-guide-section .section-title .svgico {
    color: var(--ss-mark, currentColor) !important;
}

/* A driver has no per-person rate, so his block is one or two wide tiles
   instead of three narrow ones. */
/* ONE TILE, holding the vehicle, the sum and the trip cost together. */
body.inquiry-page .guide-pricing-boxes--driver {
    display: block !important;
}
body.inquiry-page .guide-box--trip {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 14px 16px !important;
    background: #faf9fd !important;
    border: 1px solid #ece3ff !important;
    border-radius: 12px !important;
}
body.inquiry-page .guide-box--trip .gb-veh {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid #ece3ff;
}
body.inquiry-page .guide-box--trip .gb-veh__name {
    font-size: 14px !important; font-weight: 700 !important;
    color: #090920 !important; text-align: right; margin-left: auto;
}
body.inquiry-page .guide-box--trip .gb-sum {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
body.inquiry-page .guide-box--trip .gb-sum__k {
    font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: .06em; text-transform: uppercase; color: #6b6b7b !important;
}
body.inquiry-page .guide-box--trip .gb-sum__v {
    font-size: 18px !important; font-weight: 800 !important; color: #090920 !important;
    font-variant-numeric: tabular-nums;
}
body.inquiry-page .guide-box--trip .gb-note {
    margin: 6px 0 0 !important;
    font-size: 12px !important; font-weight: 400 !important;
    line-height: 1.45 !important; color: #6b6b7b !important;
    font-variant-numeric: tabular-nums;
}

/* A figure that just moved, so the eye catches it. */
body.inquiry-page .ssdv-flash {
    animation: ssdvFlash .9s ease;
    border-radius: 5px;
}
@keyframes ssdvFlash {
    0%   { background: #ECE3FF; box-shadow: 0 0 0 4px #ECE3FF; }
    100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    body.inquiry-page .ssdv-flash { animation: none; }
}

/* The vehicle panel was touching the map card above it (Chiran, image 50:
   "please have enough gap between these two sections"). */
body.inquiry-page .ssdv {
    margin-top: 26px !important;
}

/* ============================================================================
   THE PRICING NOTE, RESTYLED
   ----------------------------------------------------------------------------
   Chiran, 13 September 2026 (image 60): "this has been added as the initial
   section with the yellow colour but I don't like the design. Can you please
   improve this design of the section according to our recent brand styling."

   It was a black-outlined pill with a mustard block on one end and a black
   pill button on the other — three heavy shapes fighting for a line of quiet
   explanation. It now reads the way every other Sarisara card reads: a white
   card, a violet accent bar, the icon in violet at the size the rest of the
   page uses, and the link as a link rather than a black pill.

   These rules override the block above, which is left in place so the old look
   is one deletion away if it is ever wanted back.
   ============================================================================ */

body.inquiry-page .inquiry-pricing-note {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #fff !important;
    border: 1px solid #E8E8E6 !important;
    border-radius: 14px !important;
    padding: 16px 20px 16px 22px !important;
    margin-top: 24px !important;
    overflow: visible !important;
    box-shadow: 0 1px 2px rgba(20, 20, 30, .04) !important;
}
/* the violet accent bar every Sarisara section carries */
body.inquiry-page .inquiry-pricing-note::before {
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    background: #7700FF;
    border-radius: 0 3px 3px 0;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-icon {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F3ECFF !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    width: 34px !important;
    height: 34px !important;
}
body.inquiry-page .inquiry-pricing-note .pricing-note-icon svg {
    width: 17px !important;
    height: 17px !important;
    color: #7700FF !important;
    stroke-width: 1.8 !important;
}

body.inquiry-page .inquiry-pricing-note .pricing-note-text p {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #3a3a40 !important;
}

/* A quiet link, not a black pill — it opens an explanation, it does not
   perform an action, and it was competing with the real buttons on the page. */
body.inquiry-page .inquiry-pricing-note .pricing-note-btn {
    flex: none !important;
    margin: 0 0 0 auto !important;
    padding: 9px 18px !important;
    background: #fff !important;
    border: 1px solid #DCDCD9 !important;
    border-radius: 999px !important;
    color: #7700FF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: border-color .16s ease, background .16s ease !important;
}
body.inquiry-page .inquiry-pricing-note .pricing-note-btn:hover {
    background: #F3ECFF !important;
    border-color: #7700FF !important;
    color: #5C00CC !important;
}

@media (max-width: 640px) {
    body.inquiry-page .inquiry-pricing-note {
        flex-wrap: wrap !important;
    }
    body.inquiry-page .inquiry-pricing-note .pricing-note-btn {
        margin: 4px 0 0 48px !important;
    }
}

/* The tour page's own summary headings, coloured from the same one file. */
.price-section-header.ss-cat {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ss-ink, inherit) !important;
}
.price-section-header.ss-cat .svgico {
    width: 13px !important;
    height: 13px !important;
    flex: none;
    color: var(--ss-mark, currentColor) !important;
}

/* A new guide for her trip (23 September 2026). The design-system buttons, the
   same values as .inquiry-handoff__btn above: violet #7700FF primary, white +
   violet-border outline, pill radius, DM Sans 700. Scoped to .sl-gs so the plain
   .ss-btn rule above (dark text, thin border) still holds everywhere else. */
body.inquiry-page .sl-gs button.ss-btn {
    margin-top: 0;
    padding: 11px 24px;
    border-radius: 999px;
    font-family: var(--inquiry-font-family), 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}
body.inquiry-page .sl-gs button.ss-btn.ss-btn--primary {
    background: #7700FF;
    border: 1px solid #7700FF;
    color: #FFFFFF !important;
}
body.inquiry-page .sl-gs button.ss-btn.ss-btn--primary:hover:not(:disabled) { background: #6200D6; border-color: #6200D6; }
body.inquiry-page .sl-gs button.ss-btn.ss-btn--outline {
    background: #FFFFFF;
    border: 1px solid #7700FF;
    color: #7700FF !important;
}
body.inquiry-page .sl-gs button.ss-btn:disabled { opacity: .5; cursor: default; }

/* A replaced guide's old messages: greyed out, clearly labelled, so they are never
   read as the new guide's words (Chiran, 2 Oct 2026). */
html body .inquiry-conversation .inquiry-message.message-other.message-prev-guide-msg .message-bubble,
html body .inquiry-conversation .inquiry-message.message-prev-guide-msg .message-bubble { background: #EEEEF2 !important; color: #8E8EA0 !important; border-color: #E2E2E8 !important; box-shadow: none !important; }
html body .inquiry-conversation .inquiry-message.message-prev-guide-msg .message-bubble * { color: #8E8EA0 !important; }
.inquiry-message.message-prev-guide-msg .message-tail { display: none !important; }
.inquiry-message.message-prev-guide-msg .message-avatar { filter: grayscale(1); opacity: .55; }
.inquiry-message.message-prev-guide-msg .message-meta { color: #B0B0BC !important; }
.inquiry-message .message-private-label.message-prev-guide { display: inline-block; align-self: flex-start; width: auto; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px;
    background: #090920; color: #FFFFFF; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }


/* 3 Oct 2026: the warning's buttons had no style of their own, so the Traveler
   theme painted "Message Guide" gold. Sarisara buttons: violet pill + outline. */
html body .done-modal-actions .btn-done-message-guide,
html body .done-modal-actions .btn-done-finalize-anyway {
    border-radius: 999px !important; padding: 12px 26px !important;
    font-family: 'Google Sans', sans-serif !important; font-weight: 700 !important; font-size: 14px !important;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important;
}
html body .done-modal-actions .btn-done-message-guide { background: #7700FF !important; color: #fff !important; border: 1.5px solid #7700FF !important; }
html body .done-modal-actions .btn-done-message-guide:hover { background: #6300D6 !important; border-color: #6300D6 !important; }
html body .done-modal-actions .btn-done-finalize-anyway { background: #fff !important; color: #7700FF !important; border: 1.5px solid #7700FF !important; }

/* The guide closed this plan — its icon (4 Oct 2026, path test I015). */
body.inquiry-page .sl-guide-closed .svgico {
    width: 18px;
    height: 18px;
    flex: none;
}

/* PARTNER PULL-OUT (4 Oct 2026): the facts line under each replacement card —
   whole price, road distance, free or not — and the note at the top of the list.
   Wraps on a 390px phone instead of pushing the card wider. */
.replacement-pullout-note {
    background: #f7f4ff;
    border: 1px solid #d9c2ff;
    border-radius: 10px;
    color: #090920 !important;
    font-weight: 600;
}
.rep-pullout-facts {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #52526A;
    overflow-wrap: anywhere;
}

/* STRICT SUGGESTIONS (5 Oct 2026): at most 3. A short line says what the list
   is; when nothing passes, a plain note replaces it. The admin-only rows that
   fail a check say which check, in red, under a divider. */
.replacement-search-results li.replacement-strict-intro,
.replacement-search-results li.rep-override-divider {
    border: 0 !important;
    background: transparent !important;
    cursor: default;
    display: block;
}
.replacement-search-results li.replacement-strict-intro {
    padding: 4px 2px 10px !important;
    text-align: left !important;
    font-size: 12.5px !important;
    color: #52526A !important;
}
.replacement-search-results li.replacement-none-note {
    display: block;
    cursor: default;
    background: #f7f4ff !important;
    border: 1px solid #d9c2ff !important;
    border-radius: 10px !important;
    color: #090920 !important;
    font-weight: 600 !important;
    padding: 16px 14px !important;
}
.replacement-search-results li.rep-override-divider {
    padding: 14px 2px 8px !important;
    text-align: left !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #090920 !important;
}
/* The facts line belongs to the card ABOVE it: tight on top, a gap below. */
.replacement-search-results li:has(.srs-card) .rep-pullout-facts {
    margin: 6px 4px 16px;
}
.rep-override-fails {
    margin: 4px 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #FF0A1F;
    overflow-wrap: anywhere;
}

/* Traveller view of a pulled-out service: a calm note, no button. */
.provider-status-banner.provider-status-unavailable .provider-status-note {
    font-size: 12px;
    color: #090920;
    line-height: 1.4;
}

/* REPLACEMENT CARD FACTS (5 Oct 2026): one labelled line per fact, icon from
   the canonical sheet, label muted, value ink — instead of one long line. */
.replacement-search-results .rep-facts {
    list-style: none;
    margin: 8px 4px 16px;
    padding: 0;
    display: grid;
    gap: 6px;
}
.replacement-search-results .rep-fact {
    display: grid !important;
    grid-template-columns: 18px 72px 1fr;
    align-items: start;
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}
.replacement-search-results .rep-fact__ico {
    color: #7700FF;
    display: inline-flex;
    padding-top: 1px;
}
.replacement-search-results .rep-fact__ico svg { width: 16px; height: 16px; }
.replacement-search-results .rep-fact__ico .star { color: #FFB700; }
.replacement-search-results .rep-fact__label { color: #6B7280; }
.replacement-search-results .rep-fact__value { color: #090920; font-weight: 500; overflow-wrap: anywhere; }

/* SARISARA RECOMMENDS: the best fit of the three, marked for a quick pick. */
.replacement-search-results .rep-reco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 8px;
}
.replacement-search-results .rep-reco__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #7700FF;
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px 4px 8px;
    font-size: 12px;
    font-weight: 700;
}
.replacement-search-results .rep-reco__badge svg { width: 15px; height: 15px; }
.replacement-search-results .rep-reco__why { font-size: 12.5px; color: #52526A; }
.replacement-search-results li.rep-recommended .srs-card {
    box-shadow: 0 0 0 2px #7700FF;
}

/* Room choice inside the chosen card: a sentence-case heading, not a shout. */
#replacement-details-panel .rep-section-heading {
    font-size: 14px;
    font-weight: 600;
    color: #090920;
    margin: 4px 0 10px;
}

/* THE TOTAL STANDS OUT FROM THE LINES ABOVE IT (Chiran, 12 Oct 2026).
   It sat as plain text ("Total USD 1,162") under the Sub Total and the fees.
   Now: a line above it, the label on the left, the amount on the right in
   brand green, bold, like the Sub Total row's own layout. */
body.inquiry-page .price-grandtotal {
    border-top: 1px solid #d9d9d9 !important;
    padding-top: 14px !important;
    margin-top: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #090920 !important;
}
body.inquiry-page .price-grandtotal .grandtotal-value {
    color: #30B300 !important;
}