/* ============================================================
   TOUR ITINERARY — assets/css/tour-itinerary.css
   ============================================================ */
/* ══════════════════════════════════════════════════════════════
   ADD TO: tour-booking-form.css
   Multi-addon price info box — shown below .tbf-adventure-options
   (unrelated to the itinerary redesign — left untouched)
══════════════════════════════════════════════════════════════ */

/* Outer container — vertical stack */
.tbf-addon-price-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f0faf0;
    border: 1px solid #d4edda;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 10px;
}

/* One row per selected addon — full width, stacked */
.tbf-addon-price-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    font-size: 0.875rem;
    color: #333;
    width: 100%;
}

/* Divider between addon rows */
.tbf-addon-price-row + .tbf-addon-price-row {
    border-top: 1px solid #c8e6c9;
}

/* Addon name */
.tbf-addon-price-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

/* "Adult: RM… Child: RM…" on one line */
.tbf-addon-price-vals {
    display: flex;
    gap: 16px;
    align-items: center;
    color: #555;
    font-size: 0.875rem;
}

.tbf-addon-price-vals strong {
    color: #1a8a1a;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   ITINERARY — tab bar + vertical timeline
══════════════════════════════════════════════════════════════ */
.tif-wrap {
    width: 100%;
}

/* ── Addon info bar ── */
.tif-addon-bar {
    background: #f0fdf4;
    border: 1px solid #d4edda;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    animation: tifFade .3s ease;
}

.tif-addon-bar-name {
    font-size: 15px;
    font-weight: 700;
    color: #16a34a;
    margin-bottom: 8px;
}

.tif-addon-bar-meta {
    font-size: 13px;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tif-addon-prices {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tif-addon-price-pill {
    background: #fff;
    border: 1.5px solid #22c55e;
    border-radius: 50px;
    padding: 3px 13px;
    font-size: 13px;
    color: #16a34a;
    font-weight: 700;
}

.tif-addon-notes strong,
.tif-addon-policy strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #888;
    margin-bottom: 2px;
}

/* ── Outer wrap ── */
.tif-table-wrap {
    width: 100%;
    transition: opacity .25s;
}

/* ── Day tab bar ── */
.tif-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
	padding-bottom: 20px;
	border-bottom: 1px solid #dddddd;
}

.tif-tab {
    border: 1px solid #BEBEBE !important;
    background: #fff !important;
    color: #BEBEBE !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

.tif-tab.active {
    background: #20C210  !important;
    border-color: #20C210 !important;
    color: #fff !important;
}

.tif-tabs.tif-tabs--bottom {
    margin-top: 20px;
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
	display: none;
}

/* Newly-injected addon tab starts here, then transitions to the
   normal state above (fade + scale in) — see appendNewDayTab() in JS. */
.tif-tab.tif-tab-enter {
    opacity: 0;
    transform: scale(.82);
}

/* ── Panels ── */
.tif-panels {
    width: 100%;
    transition: opacity .25s ease;
}

/* Dim the day content (not the tabs, not the loading row) while an
   addon request is in flight, so it's clear something is happening
   without the whole box jumping or flashing. */
.tif-table-wrap.tif-content-loading .tif-panels {
    opacity: .5;
}

.tif-panel {
    display: none;
}

.tif-panel.active {
    display: block;
    animation: tifFade .25s ease;
}

img.tif-thumb {
    width: 100%;
    height: 92px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* Mobile image hidden on desktop */
.tif-thumb-mobile {
    display: none;
}

/* ── Loading indicator ──
   Lives inside .tif-table-wrap, directly under .tif-panels, so it's
   always visually attached to the itinerary content — never a stray
   block floating between the itinerary and whatever section follows
   it (e.g. the Map). Height/opacity animate instead of display:none
   so it fades in and collapses away smoothly, with no layout jump. */
.tif-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #888;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0 4px;
    margin-top: 0;
    transition: opacity .25s ease, max-height .3s ease, padding .3s ease, margin-top .3s ease;
}

.tif-loading.tif-loading-active {
    opacity: 1;
    max-height: 60px;
    padding: 14px 4px 2px;
    margin-top: 4px;
}

.tif-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e5e7eb;
    border-top-color: #22c55e;
    border-radius: 50%;
    animation: tifSpin .7s linear infinite;
    flex-shrink: 0;
}

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

@keyframes tifFade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tif-empty {
    color: #888;
    font-size: 13px;
    padding: 12px 0;
}

/* ── Removing state (deselecting an addon) ──
   Applied by removeAddonNodesByIndexes() in JS to whichever nodes
   belong to a deselected addon (a .tif-tab, its .tif-panel, or — for
   single-day base tours where addon items are merged straight into
   the Day 1 panel — individual .tif-timeline-item rows). Mirrors the
   tif-tab-enter fade-in used for newly appended tabs, so removal
   reads as a deliberate transition instead of content abruptly
   vanishing. JS removes the node from the DOM once this transition
   has finished (~200ms). */

.for-border {
    position: relative;
}

.tif-timeline-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    padding: 24px 0;
	position: relative;
}

.tif-timeline-dot {
    position: relative;
    z-index: 2;
}

.tif-timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13px;             
    top: 28px;               
    bottom: -24px;           
    width: 1px;
    border-left: 2px dashed rgba(15, 113, 221, 0.15);
    z-index: 1;
}

.for-border:last-child .tif-timeline-item::after {
    display: none;
}

.border-bot {
    background: #e5e7eb;
    width: 95%;
    height: 1px;
    margin-left: 40px;	
}

.border-bot:last-child {
	display: none;
}

.tif-timeline-item:first-child {
    padding-top: 20px;
}

.tif-timeline-item:last-child {
    padding-bottom: 0;
}

.tif-wrapper {
    display: flex;
	gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.tif-timeline-dot {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tif-timeline-dot img {
    width: 100%;
    height: 100%above;
    display: block;
    object-fit: contain;
}

.tif-timeline-time {
    color: #0F71DD;
	margin-bottom: 12px;
	margin-top: 4px;
}

.tif-timeline-content {
    color: #505050;
}

.tif-thumb-mobile {
    display: none;
}

.tif-timeline-img {
    width: 223px;
    flex-shrink: 0;
}

img.tif-thumb {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.tif-removing {
    transition: opacity .2s ease, transform .2s ease;
}

.tif-removing.tif-removing-active {
    opacity: 0;
    transform: scale(.9);
}

/* ── Read More / Read Less (per timeline item description) ──
   .tif-desc-wrap wraps the description text (.tif-desc) and the
   toggle button (.tif-desc-toggle). The button is hidden inline by
   PHP by default; JS only reveals it once it measures that the text
   actually overflows the clamped height, so short descriptions never
   show a toggle. Adjust -webkit-line-clamp below to change how many
   lines show before truncation. */
.tif-desc {
    overflow: hidden;
}

.tif-desc.tif-desc-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tif-desc-toggle {
    background: none !important;
    border: none !important;
    padding: 6px 0 0 !important;
    color: #20C210 !important;
	font-size: 16px !important;
}

.tif-desc-toggle:hover {
    text-decoration: underline;
}

/* ── Add Adventure controls, locked while an addon request runs ──
   Applied to #adventureOptions / .adventure-options (the booking popup's
   addon button container) by tour-itinerary.js so a second addon can't
   be clicked until the first one's itinerary has finished loading. */
.tif-addons-disabled {
    opacity: .5;
    pointer-events: none;
    filter: grayscale(.2);
    transition: opacity .2s ease;
}

@media only screen and (max-width: 1199px) {
	.tif-timeline-item {
		gap: 30px;
	}
}

/* ── Responsive mobile ── */
@media (max-width: 640px) {

    .tif-timeline-item {
        flex-wrap: wrap;
        gap: 0;
    }

    .tif-timeline-img {
        display: none;
    }

    .tif-thumb-mobile {
    	display: block;
    	width: 100%;
    	max-width: 223px !important;
    	height: 130px !important;
		object-fit: cover;
    	border-radius: 8px !important;
    	margin-top: 12px;
	}

    .tif-tabs {
        gap: 8px;
    }

    .tif-tab {
        padding: 8px 10px;
    }
}