* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: clamp(15px, 0.28vw + 14px, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: #1c032b;
    padding-top: 100px;
    &.has-hero {
        padding-top: 0;
    }
    &.is-loading {
        overflow: hidden;
    }
}

/* Page loader overlay */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #1a0a20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;

    &.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .loader-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        color: #e29454;

        .fa-spinner {
            font-size: 42px;
            animation: spin-loader 0.9s linear infinite;
        }

        p {
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.7);
        }
    }
}

@keyframes spin-loader {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Auth modal */
.auth-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;

    &.is-open {
        display: block;
    }

    .auth-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
    }

    .auth-modal-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #ffffff;
        border-radius: 14px;
        padding: 36px 32px 32px;
        width: min(440px, 92vw);
        z-index: 2001;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    }

    .auth-modal-close {
        position: absolute;
        top: 14px;
        right: 16px;
        background: none;
        border: none;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        color: #666;

        &:hover {
            color: #1a0a20;
        }
    }

    .auth-tabs {
        display: flex;
        margin-bottom: 26px;
    }

    .auth-tab {
        flex: 1;
        padding: 10px 6px;
        background: none;
        border: none;
        border-bottom: 2px solid #e8e8e8;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        color: #888;
        transition: color 0.2s, border-color 0.2s;

        &.is-active {
            color: #e29454;
            border-color: #e29454;
        }
    }

    .auth-field {
        margin-bottom: 16px;

        label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 6px;
            color: #333;
        }

        input {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;

            &:focus {
                border-color: #e29454;
            }
        }
    }

    .auth-error {
        color: #c0392b;
        font-size: 13px;
        min-height: 18px;
        margin-bottom: 10px;
    }

    .auth-submit-btn {
        width: 100%;
        padding: 12px;
        background: #e29454;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;

        &:hover {
            background: #c97d3e;
        }
    }
}

/* Scroll to top button */
#scroll-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e29454;
    color: #ffffff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;

    &.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    &:hover {
        background: #c97d3e;
    }
}

/* WhatsApp floating button */
.whatsapp-chat {
    position: fixed;
    right: 24px;
    bottom: 82px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    text-decoration: none;

    img, i {
        width: 28px;
        height: 28px;
        color: #fff;
        font-size: 28px;
        flex-shrink: 0;
    }

    span {
        display: none;
    }

    &:hover {
        transform: scale(1.1);
    }
}

/* Header navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;

    .navbar {
        background-color: transparent;

        .navbar-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            height: 100px;
            display: flex;
            align-items: center;

            .logo {
                flex-shrink: 0;
                text-align: center;
                margin-top: 40px;

                img {
                    height: 130px;
                    width: auto;
                    display: block;
                }
            }

            .menu {
                display: flex;
                list-style: none;
                gap: 24px;
                margin-left: auto;
                align-items: center;

                .item {
                    white-space: nowrap;
                }

                .link {
                    color: #ffffff;
                    text-decoration: none;
                    font-weight: 500;
                    font-size: 15px;
                    transition: color 0.2s ease;

                    &:hover,
                    &.active {
                        color: #e29454;
                    }
                }

                .language-dropdown {
                    position: relative;
                    margin-left: 6px;
                    cursor: pointer;

                    .selected-lang {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        color: #ffffff;
                        font-size: 14px;
                        font-weight: 500;
                        user-select: none;
                    }

                    .lang-menu {
                        display: none;
                        position: absolute;
                        top: calc(100% + 8px);
                        right: 0;
                        background: #ffffff;
                        border: 1px solid rgba(226, 148, 84, 0.4);
                        border-radius: 8px;
                        padding: 6px 0;
                        list-style: none;
                        min-width: 80px;
                        z-index: 200;
                        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

                        li {
                            padding: 7px 14px;
                            font-size: 14px;
                            cursor: pointer;
                            white-space: nowrap;
                            transition: color 0.15s;

                            &:hover {
                                color: #e29454;
                            }
                        }
                    }

                    &.active .lang-menu {
                        display: block;
                    }
                }

                .nav-cart-item {
                    .nav-cart-link {
                        color: #ffffff;
                        text-decoration: none;
                        position: relative;
                        display: inline-flex;
                        align-items: center;
                        font-size: 18px;
                        transition: color 0.2s;

                        &:hover {
                            color: #e29454;
                        }
                    }

                    .nav-cart-badge {
                        position: absolute;
                        top: -8px;
                        right: -9px;
                        background: #e29454;
                        color: #1a0a20;
                        border-radius: 50%;
                        width: 18px;
                        height: 18px;
                        font-size: 11px;
                        font-weight: 700;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        line-height: 1;
                    }
                }

                .nav-auth-item {
                    .nav-auth-btn {
                        color: #ffffff;
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        font-size: 15px;
                        font-weight: 500;
                        transition: color 0.2s;

                        &:hover {
                            color: #e29454;
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    body.has-hero.nav-on-content {
        header .navbar .navbar-container .menu .link:not(.active),
        header .navbar .navbar-container .menu .language-dropdown .selected-lang,
        header .navbar .navbar-container .menu .nav-cart-link,
        header .navbar .navbar-container .menu .nav-auth-btn {
            color: #1a0a20;
        }
    }
}

/* Hero section */
.hero {
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 120px 0 60px;
    background-image: url('../img/banner/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(26, 10, 32, 0.6) 0%,
            rgba(26, 10, 32, 0.3) 50%,
            rgba(26, 10, 32, 0.65) 100%
        );
        z-index: 0;
    }

    .container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;

        .content {
            max-width: 1024px;
            width: 100%;
            margin: 0 auto;
            .title {
                font-size: 48px;
                font-weight: 900;
                color: #ffffff;
                line-height: 1.2;
                margin-bottom: 20px;
                text-align: center;
            }

            .subtitle {
                font-size: 18px;
                color: rgba(255, 255, 255, 0.88);
                line-height: 1.7;
                margin-bottom: 45px;
                text-align: center;
            }

            .hero-service-search {
                width: min(1024px, 100%);
                margin: 32px 0 0;
                padding: 20px 18px 18px;
                border-radius: 18px;
                background: #fdf7f2b0;
                border: 1px solid rgba(226, 148, 84, 0.25);
                box-shadow: 0 14px 28px rgba(26, 10, 32, 0.22);
            }

            .hero-search-tabs {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                gap: 8px;
                width: fit-content;
                margin: -54px auto 14px;
                padding: 8px;
                border-radius: 10px;
                background: #ffffff;
                border: 1px solid rgba(226, 148, 84, 0.35);
                box-shadow: 0 6px 16px rgba(26, 10, 32, 0.18);
            }

            .hero-search-tab {
                border: none;
                background: transparent;
                color: #1a0a20;
                border-radius: 8px;
                padding: 10px 14px;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                transition: background 0.2s ease, color 0.2s ease;

                &:hover {
                    background: rgba(226, 148, 84, 0.12);
                }

                &.is-active {
                    color: #e29454;
                    box-shadow: inset 0 -3px 0 #e29454;
                }
            }

            .hero-search-form {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .hero-search-stay-toggle {
                display: flex;
                gap: 10px;
                margin-bottom: 2px;
            }

            .hero-stay-pill {
                border: 1px solid #c7cdda;
                background: #eceff4;
                color: #2d3a52;
                border-radius: 999px;
                min-height: 36px;
                padding: 0 18px;
                font-size: 14px;
                cursor: default;
            }

            .hero-stay-pill.is-active {
                border-color: #2e6cd7;
                color: #2e6cd7;
                background: #e8f0ff;
                box-shadow: inset 0 0 0 1px #2e6cd7;
            }

            .hero-search-header {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .hero-search-title {
                color: #1a0a20;
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 0.01em;
                margin: 0;
            }

            .hero-search-subtitle {
                color: rgba(26, 10, 32, 0.6);
                margin: 0;
                font-size: 13px;
                line-height: 1.5;
            }

            .hero-search-grid {
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 12px;
                align-items: end;
            }

            .hero-search-field {
                display: flex;
                flex-direction: column;
                gap: 6px;
                grid-column: span 1;
            }

            .hero-field-main {
                grid-column: span 2;
            }

            .hero-field-dates {
                grid-column: span 2;
            }

            .hero-field-wide {
                grid-column: span 2;
            }

            .hero-search-label {
                color: rgba(26, 10, 32, 0.65);
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 0.02em;
            }

            .hero-suggest-wrap {
                position: relative;
            }

            .hero-suggestions {
                display: none;
                position: absolute;
                top: calc(100% + 6px);
                left: 0;
                right: 0;
                z-index: 120;
                list-style: none;
                margin: 0;
                padding: 6px 0;
                border-radius: 10px;
                background: #ffffff;
                border: 1px solid rgba(226, 148, 84, 0.35);
                box-shadow: 0 8px 24px rgba(26, 10, 32, 0.18);
                max-height: 260px;
                overflow-y: auto;

                &.is-open {
                    display: block;
                }
            }

            .hero-suggestion-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 16px;
                font-size: 13px;
                font-weight: 500;
                color: #1a0a20;
                cursor: pointer;
                transition: background 0.15s ease;

                &::before {
                    content: '';
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #e29454;
                    flex-shrink: 0;
                }

                &:hover,
                &.is-active {
                    background: rgba(226, 148, 84, 0.1);
                }

                .hero-suggestion-match {
                    color: #e29454;
                    font-weight: 700;
                }
            }

            .hero-suggestion-empty {
                padding: 10px 16px;
                font-size: 13px;
                color: rgba(26, 10, 32, 0.45);
                font-style: italic;
            }

            .hero-search-control {
                display: flex;
                align-items: center;
                gap: 10px;
                min-height: 62px;
                border: 1px solid rgba(226, 148, 84, 0.3);
                border-radius: 10px;
                background: rgb(255 255 255 / 60%);
                padding: 0 14px;

                i {
                    color: #e29454;
                    font-size: 18px;
                    width: 22px;
                    text-align: center;
                    /* flex: 0 0 22px; */
                }
            }

            .hero-search-date-range {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .hero-date-control {
                min-height: 62px;
            }

            .hero-search-select {
                width: 100%;
                border-radius: 0;
                border: none;
                background: transparent;
                color: #1a0a20;
                font-size: 14px;
                font-weight: 600;
                padding: 0;
                min-height: 40px;
                outline: none;
            }

            .hero-search-input {
                width: 100%;
                border-radius: 0;
                border: none;
                background: transparent;
                color: #1a0a20;
                font-size: 12px;
                font-weight: 600;
                padding: 0;
                min-height: 40px;
                outline: none;
            }

            .hero-counter-field {
                grid-column: span 1;
            }

            .hero-counter-control {
                min-height: 62px;
                border: 1px solid rgba(226, 148, 84, 0.3);
                border-radius: 10px;
                background: rgb(255 255 255 / 60%);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                gap: 8px;
            }

            .hero-counter-btn {
                width: 34px;
                height: 34px;
                border: 1px solid rgba(226, 148, 84, 0.4);
                border-radius: 8px;
                background: rgb(255 255 255 / 60%);
                color: #e29454;
                font-size: 18px;
                font-weight: 700;
                line-height: 1;
                cursor: pointer;
            }

            .hero-counter-value {
                width: 48px;
                border: none;
                background: transparent;
                color: #1a0a20;
                text-align: center;
                font-size: 16px;
                font-weight: 700;
                outline: none;
            }

            .hero-search-input::-webkit-calendar-picker-indicator {
                filter: none;
                opacity: 0.75;
                cursor: pointer;
            }

            .hero-search-select option {
                color: #1a0a20;
                background: #ffffff;
            }

            .hero-search-actions {
                grid-column: span 6;
                display: flex;
                align-items: flex-end;
                justify-content: center;
            }

            .hero-search-btn {
                border: none;
                border-radius: 999px;
                background: #e29454;
                color: #1a0a20;
                font-weight: 700;
                font-size: 18px;
                letter-spacing: 0.02em;
                padding: 0 22px;
                min-height: 45px;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                transition: transform 0.2s ease, filter 0.2s ease;
                width: min(250px, 100%);
                margin: 4px auto 0;
                text-transform: uppercase;

                &:hover {
                    transform: translateY(-1px);
                    filter: brightness(1.04);
                }
            }

            .btn {
                display: inline-block;
                background: #e29454;
                color: #1a0a20;
                padding: 14px 36px;
                border-radius: 6px;
                font-weight: 700;
                font-size: 16px;
                text-decoration: none;
                transition: background 0.2s ease, transform 0.2s ease;

                &:hover {
                    background: #c97d3e;
                    transform: translateY(-3px);
                }
            }
        }
    }
}

@media (max-width: 1100px) {
    .hero {
        .container {
            .content {
                .hero-search-tabs {
                    width: 100%;
                    margin: 0 0 12px;
                    justify-content: flex-start;
                }

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

                .hero-field-main,
                .hero-field-dates {
                    grid-column: span 2;
                }

                .hero-field-wide,
                .hero-search-field {
                    grid-column: span 1;
                }

                .hero-search-actions {
                    grid-column: span 2;
                }

                .hero-search-date-range {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 90px 0 40px;

        .container {
            padding: 0 16px;

            .content {
                .title {
                    font-size: 28px;
                    margin-bottom: 12px;
                }

                .subtitle {
                    font-size: 14px;
                    margin-bottom: 20px;
                }

                .hero-service-search {
                    margin-top: 16px;
                    padding: 14px 12px 12px;
                    border-radius: 12px;
                }

                .hero-search-tabs {
                    width: 100%;
                    margin: 0 0 10px;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                }

                .hero-search-tab {
                    font-size: 12px;
                    padding: 8px 10px;
                }

                .hero-search-title {
                    font-size: 16px;
                }

                .hero-search-subtitle {
                    font-size: 12px;
                }

                .hero-search-grid {
                    grid-template-columns: 1fr 1fr;
                    gap: 8px;
                }

                .hero-field-main {
                    grid-column: span 2;
                }

                .hero-field-dates {
                    grid-column: span 2;
                }

                .hero-search-date-range {
                    grid-template-columns: 1fr 1fr;
                }

                .hero-field-wide,
                .hero-search-field {
                    grid-column: span 1;
                }

                .hero-search-actions {
                    grid-column: span 2;
                }

                .hero-search-control,
                .hero-date-control,
                .hero-counter-control {
                    min-height: 50px;
                }

                .hero-search-btn {
                    width: 100%;
                    font-size: 15px;
                    min-height: 42px;
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 80px 0 32px;

        .container {
            padding: 0 12px;

            .content {
                .title {
                    font-size: 22px;
                    margin-bottom: 8px;
                }

                .subtitle {
                    font-size: 13px;
                    margin-bottom: 16px;
                }

                .hero-service-search {
                    padding: 12px 10px;
                    border-radius: 10px;
                }

                .hero-search-tabs {
                    gap: 4px;
                }

                .hero-search-tab {
                    font-size: 11px;
                    padding: 7px 8px;
                }

                .hero-search-title {
                    font-size: 14px;
                }

                .hero-search-subtitle {
                    font-size: 11px;
                }

                .hero-search-grid {
                    grid-template-columns: 1fr;
                    gap: 6px;
                }

                .hero-field-main,
                .hero-field-dates,
                .hero-field-wide,
                .hero-search-field,
                .hero-search-actions {
                    grid-column: span 1;
                }

                .hero-search-date-range {
                    grid-template-columns: 1fr;
                    gap: 6px;
                }

                .hero-search-control,
                .hero-date-control,
                .hero-counter-control {
                    min-height: 46px;
                }

                .hero-counter-btn {
                    width: 30px;
                    height: 30px;
                    font-size: 16px;
                }

                .hero-counter-value {
                    font-size: 14px;
                }

                .hero-search-btn {
                    font-size: 14px;
                    min-height: 40px;
                }
            }
        }
    }
}

/* Activities icon grid (top of main) */
main .activities {
    padding: 30px 0;

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;

        .grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 14px;
            padding-top: 8px;

            .card {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                position: relative;
                isolation: isolate;
                padding: 16px 10px;
                background: rgba(255, 255, 255, 0.06);
                border-radius: 10px;
                cursor: pointer;
                text-decoration: none;
                overflow: hidden;
                transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
                border: 2px solid #e29454;

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -130%;
                    width: 70%;
                    height: 100%;
                    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
                    transform: skewX(-24deg);
                    z-index: 0;
                    pointer-events: none;
                }

                &:hover {
                    background: #e294547a;
                    transform: translateY(-6px);
                    z-index: 2;
                    box-shadow: 0 10px 22px rgba(226, 148, 84, 0.33);

                    &::after {
                        animation: activities-shine 0.75s ease;
                    }

                    img {
                        transform: scale(1.08) rotate(-3deg);
                    }
                }

                img {
                    width: 44px;
                    height: 44px;
                    object-fit: contain;
                    transition: transform 0.25s ease;
                    z-index: 1;
                }

                p {
                    font-size: 12px;
                    font-weight: 600;
                    color: #e29454;
                    text-align: center;
                    letter-spacing: 0.5px;
                    z-index: 1;
                }
            }
        }
    }
}

@keyframes activities-shine {
    from {
        left: -130%;
    }

    to {
        left: 150%;
    }
}

/* ========== ACTIVITY DETAIL PAGE ========== */
.activity-detail-page {
    background: #ffffff;

    .ttd-sidebar a,
    .ttd-sidebar a:visited,
    .ttd-sidebar a:hover,
    .ttd-sidebar a:focus,
    .ttd-sidebar a:active {
        text-decoration: none !important;
    }

    .page-breadcrumb-bar,
    .ttd-banner-slider,
    .ttd-quick-facts-section,
    .ttd-layout-wrapper,
    .activity-gallery-section {
        background: #ffffff;
    }

    .activity-detail-main {
        max-width: 1240px;
        margin: 0 auto;
        padding: 44px 20px 92px;
    }

    .activity-detail-hero {
        border: 1px solid #ece3f4;
        border-radius: 20px;
        background: linear-gradient(145deg, #fffdf9 0%, #ffffff 60%);
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 34px;
        padding: 30px;
        align-items: center;
        margin-bottom: 30px;
        box-shadow: 0 8px 24px rgba(31, 9, 44, 0.04);
    }

    .activity-icon-wrap {
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: radial-gradient(circle at center, rgba(226, 148, 84, 0.22), rgba(226, 148, 84, 0.03));
    }

    .activity-icon-wrap img {
        width: 144px;
        height: 144px;
        object-fit: contain;
        animation: activity-float 2.8s ease-in-out infinite;
    }

    .activity-meta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #845970;
        background: #f6eefb;
        border-radius: 999px;
        padding: 7px 14px;
        margin: 20px 0px;
    }

    .activity-title {
        font-size: clamp(30px, 3vw, 46px);
        line-height: 1.2;
        color: #1c032b;
        margin-bottom: 12px;
    }

    .activity-lead {
        font-size: 16px;
        color: #5e4d6a;
        margin-bottom: 20px;
    }

    .activity-info-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
    }

    .activity-pill {
        font-size: 13px;
        font-weight: 700;
        color: #5e3f52;
        border: 1px solid #edd7c5;
        background: #fff;
        border-radius: 999px;
        padding: 8px 14px;
    }

    .activity-cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .activity-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .activity-btn:hover {
        transform: translateY(-2px);
        opacity: 0.9;
    }

    .activity-btn.primary {
        background: #1c032b;
        color: #fff;
    }

    .activity-btn.ghost {
        border: 1px solid #d8ccdf;
        color: #1c032b;
        background: #fff;
    }

    .activity-detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
        gap: 22px;
        align-items: start;
    }

    .activity-content-col,
    .activity-side-col {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border: 1px solid #efe8f6;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(31, 9, 44, 0.05);
        overflow: hidden;
    }

    .activity-box {
        padding: 22px;
    }

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

    .activity-box h2 {
        font-size: 20px;
        color: #1c032b;
        margin-bottom: 10px;
    }

    .activity-box p {
        color: #5e4d6a;
        line-height: 1.75;
    }

    .activity-steps {
        margin: 8px 0 0;
        padding-left: 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .activity-steps li {
        color: #50395f;
        line-height: 1.6;
        font-size: 14px;
    }

    .activity-facts {
        list-style: none;
        padding: 0;
        margin: 4px 0 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .activity-facts li {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ece3f4;
    }

    .activity-facts li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .activity-facts strong {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #8e769d;
    }

    .activity-facts span {
        color: #2f1b3e;
        font-weight: 600;
        font-size: 14px;
    }

    .activity-highlights {
        list-style: none;
        padding: 0;
        margin: 10px 0 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .activity-highlights li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #50395f;
        font-size: 14px;
    }

    .activity-highlights li i {
        color: #e29454;
        margin-top: 3px;
    }
}

@keyframes activity-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 900px) {
    .activity-detail-page {
        .activity-detail-hero {
            grid-template-columns: 1fr;
            gap: 22px;
            padding: 22px;
        }

        .activity-icon-wrap {
            height: 190px;
        }

        .activity-detail-grid {
            grid-template-columns: 1fr;
        }

        .activity-box {
            padding: 18px;
        }
    }
}

/* ========== END ACTIVITY DETAIL PAGE ========== */

/* -- Testimonials Slider - editorial design ------------------------------- */
    .info-section {
        padding: 0px;
        text-align: center;
        color: #222222;
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding-bottom: 20px;
            .title {
                font-size: 36px;
                font-weight: 800;
                margin-bottom: 20px;
                letter-spacing: -0.02em;
                text-transform: uppercase;
            }
            .description {
                font-size: 19px;
                font-weight: 300;
                line-height: 1.4;
                margin: 0;
                opacity: 0.9;
                .line-break {
                    display: block;
                    margin-top: 4px;
                }
            }
        }
    }
    .landscape-hero {
        height: 120vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-image: url('../img/background/cambodia-field.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 3. The Custom Gradient Overlay Layer */
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* This creates the dark-to-clear fade across the bottom */
            background: linear-gradient(
            to top,
            rgba(0, 50, 40, 0.9) 0%,
            rgba(0, 50, 40, 0.5) 25%,
            rgba(0, 0, 0, 0) 50%
            );
            z-index: 1;
        }

        .landscape-hero-content {
            position: relative;
            z-index: 2;
            width: min(90%, 980px);
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                display: block;
                max-width: 100%;
                height: auto;
            }

            .cambodia-map-svg {
                display: block;
                width: min(100%, 900px);
                height: auto;
                overflow: visible;
            }

            .cambodia-map-svg #features path {
                opacity: 0.95;
            }

            .cambodia-map-svg #features path.is-active {
                filter: brightness(1.22) saturate(1.15);
                opacity: 1;
            }

            .cambodia-map-svg .province-label {
                font-weight: 700;
                fill: #000000;
                pointer-events: none;
                font-size: 30px;
                stroke: none;
            }

            .cambodia-map-svg #features path.current-province {
                filter: brightness(1.08) saturate(1.05);
            }

            .cambodia-map-svg .live-location-marker .dot {
                fill: #e63946;
                stroke: #ffffff;
                stroke-width: 2;
                animation: locationBounce 1s ease-in-out infinite;
                filter: drop-shadow(0 0 6px rgba(230, 57, 70, 0.9));
                transform-box: fill-box;
                transform-origin: center;
            }

            .cambodia-map-svg .live-location-marker .pulse {
                fill: rgba(230, 57, 70, 0.45);
                animation: mapPulse 1.4s ease-out infinite;
                transform-box: fill-box;
                transform-origin: center;
            }

            .cambodia-map-svg .live-location-marker .live-location-text {
                font-size: 12px;
                font-weight: 800;
                fill: #e63946;
                stroke: none;
                animation: textPulse 1s ease-in-out infinite;
                transform-origin: center;
            }

            .cambodia-map-svg .live-location-marker {
                filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
            }

            .province-info-popup {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 40;
                width: min(260px, calc(100% - 20px));
                padding: 10px 12px;
                border-radius: 10px;
                border: 1px solid rgba(255, 255, 255, 0.42);
                background: linear-gradient(140deg, rgba(20, 10, 34, 0.94), rgba(38, 20, 58, 0.9));
                color: #fff6df;
                pointer-events: none;
                opacity: 0;
                visibility: hidden;
                transform: translateY(8px) scale(0.98);
                transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
                box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);

                strong {
                    display: block;
                    font-size: 13px;
                    font-weight: 800;
                    color: #ffcf8f;
                    margin-bottom: 4px;
                    letter-spacing: 0.2px;
                }

                span {
                    display: block;
                    font-size: 11px;
                    line-height: 1.45;
                    color: #f3ede0;
                }

                &.is-visible {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0) scale(1);
                }
            }
        }
    }

    @keyframes mapPulse {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }
        100% {
            transform: scale(2.6);
            opacity: 0;
        }
    }

    @keyframes locationBounce {
        0%, 100% {
            transform: translateY(0) scale(1);
            filter: drop-shadow(0 0 4px rgba(230, 57, 70, 0.8));
        }
        50% {
            transform: translateY(-1px) scale(1.15);
            filter: drop-shadow(0 0 8px rgba(230, 57, 70, 1));
        }
    }

    @keyframes textPulse {
        0%, 100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        50% {
            opacity: 0.35;
            transform: translateY(-0.5px) scale(1.03);
        }
    }

    @keyframes templePulse {
        0% {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0.8;
        }
        100% {
            transform: translate(-50%, -50%) scale(2.8);
            opacity: 0;
        }
    }

    @keyframes routeFlow {
        from {
            stroke-dashoffset: 0;
        }
        to {
            stroke-dashoffset: -10;
        }
    }

    .services-section {
        padding: 60px 0px;
        text-align: center;
        font-family: sans-serif;
        background-color: #ffffff;
        .title {
            font-size: 32px;
            font-weight: 800;
            color: #333;
            margin-bottom: 50px;
            text-transform: uppercase;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
            .card {
                display: flex;
                position: relative;
                width: 100%;
                background-color: #e29a5d;
                box-shadow: 8px 8px 0px #f0c9a8; 
                margin-bottom: 20px;
                text-decoration: none;
                color: inherit;
                cursor: pointer;
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -15px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-left: 15px solid transparent;
                    border-right: 15px solid transparent;
                    border-top: 15px solid #e29a5d;
                }
                .icon-box {
                    background-color: #1a0a20;
                    width: 100px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    .service-icon {
                    width: 50px;
                    height: auto;
                    color: #e29a5d;
                    font-size: 42px;
                    line-height: 1;
                    }
                }
                .content {
                    padding: 20px;
                    text-align: left;
                    color: #1a0a20;
                    cursor: pointer;
                    .title {
                    font-size: 16px;
                    font-weight: 700;
                    margin: 0 0 8px 0;
                    }
                    .description {
                    font-size: 14px;
                    line-height: 1.4;
                    margin: 0;
                    font-weight: 500;
                    }
                }
            }
        }
    }
    .tours-section {
        padding: 80px 0px 120px;
        max-width: 1400px;
        margin: 0 auto;
        font-family: 'Noto Sans KR', sans-serif;
        .tours-header {
            text-align: center;
            margin-bottom: 40px;
            .main-title {
                font-size: 32px;
                font-weight: 900;
                margin-bottom: 10px;
            }
            .subtitle {
                font-size: 18px;
                line-height: 1.6;
                color: #333;
                max-width: 900px;
                margin: 0 auto;
            }
        }
        .tours-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            .card {
                position: relative;
                height: 350px;
                border-radius: 6px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 15px;
                color: #fff;
                cursor: pointer;
                    img {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        z-index: 0;
                        transition: transform 0.6s ease;
                    }
                    &::before {
                        content: '';
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(
                            to top,
                            rgba(0, 0, 0, 0.85) 0%,
                            rgba(0, 0, 0, 0.4) 50%,
                            transparent 100%
                        );
                        z-index: 1;
                    }
                    &:hover {
                        img {
                            transform: scale(1.15);
                        }
                    }
                &:first-child {
                    grid-column: span 2;
                    grid-row: span 2;
                    height: 100%;
                    .location {
                        ul {
                            gap: 30px;
                            li {
                                font-size: 30px;
                                img {
                                    width: 20px;
                                    height: 50px;
                                }
                            }
                        }
                    }
                    .description {
                        font-size: 20px;
                        font-weight: 400;
                    }
                    .badge {
                        padding: 10px 14px;
                        font-size: 30px;
                        span:last-child {
                            font-size: 20px;
                        }
                    }
                }
            } 
            .badge {
                position: absolute;
                top: 8px;
                right: 8px;
                background: #e29a5d;
                padding: 5px 8px;
                border-radius: 6px;
                text-align: center;
                font-weight: 800;
                z-index: 2;
                span {
                    display: block;
                    font-size: 10px;
                    font-weight: 600;
                }
            }
            .info {
                position: relative;
                z-index: 2;
            .location {
            display: flex;
            ul {
                display: flex;
                align-items: center;
                gap: 18px;
                list-style: none;
            }
            li {
                display: flex;
                align-items: center;
                gap: 6px;
                img {
                    width: 14px;
                    height: 25px;
                    display: block;
                    flex: 0 0 14px;
                    object-fit: contain;
                }
            }
            li:last-child {
                font-size: 18px;
                font-weight: 700;
            }
            }
                .description {
                    font-size: 14px;
                    line-height: 1.3;
                    font-weight: 400;
                }
            }
        }
    }
    .daily-life, .apsara-dance {
        height: 120vh;
        width: 100%;
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.6;
            z-index: 1;
        }
    }
    .daily-life {
        background-image: url('../img/background/daily-life.png');
        &::after {
            background: #1e0f2b;
        }

        .daily-life-content {
            position: relative;
            z-index: 2;
            max-width: 1240px;
            height: 100%;
            margin: 0 auto;
            padding: 72px 24px;
            display: flex;
            align-items: center;

            .angkor-map-interactive {
                position: relative;
                width: min(1200px, 100%);
                margin: 0 auto;
                border-radius: 18px;
                overflow: hidden;

                #angkor-map-object {
                    display: block;
                    width: 100%;
                    aspect-ratio: 400 / 323.33;
                }

                #angkor-map-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 3;
                    cursor: pointer;
                }

                .temple-hover-tooltip {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    min-width: 220px;
                    max-width: 320px;
                    padding: 12px 14px;
                    border-radius: 12px;
                    color: #fff;
                    background: rgba(14, 8, 20, 0.94);
                    border: 1px solid rgba(255, 255, 255, 0.26);
                    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
                    font-size: 13px;
                    line-height: 1.45;
                    pointer-events: none;
                    opacity: 0;
                    transform: translate3d(0, 0, 0);
                    transition: opacity 0.18s ease;
                    will-change: transform, opacity;

                    strong {
                        display: block;
                        margin-bottom: 6px;
                        color: #ffd695;
                        font-size: 14px;
                    }

                    span {
                        display: block;
                        margin-bottom: 4px;
                    }

                    b {
                        color: #ffd695;
                        font-weight: 700;
                    }

                    &.is-visible {
                        opacity: 1;
                    }
                }
            }

            .angkor-map-widget {
                width: 100%;
                color: #f5efe7;

                .angkor-map-intro {
                    margin-bottom: 20px;

                    .eyebrow {
                        display: inline-block;
                        padding: 6px 12px;
                        border-radius: 999px;
                        font-size: 12px;
                        letter-spacing: 0.6px;
                        text-transform: uppercase;
                        background: rgba(242, 148, 84, 0.2);
                        border: 1px solid rgba(242, 148, 84, 0.5);
                    }

                    .title {
                        margin-top: 12px;
                        font-size: clamp(26px, 2.3vw, 38px);
                        line-height: 1.2;
                    }

                    .subtitle {
                        margin-top: 8px;
                        max-width: 820px;
                        color: #eadfcf;
                        line-height: 1.5;
                    }

                    .angkor-map-legend {
                        margin-top: 12px;
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px 14px;

                        span {
                            display: inline-flex;
                            align-items: center;
                            gap: 7px;
                            font-size: 12px;
                            color: #e9dcc7;
                        }

                        i {
                            display: inline-block;
                            border-radius: 999px;
                        }

                        .line-main {
                            width: 24px;
                            height: 4px;
                            background: #8f6db0;
                        }

                        .line-highlight {
                            width: 24px;
                            height: 4px;
                            background: linear-gradient(90deg, #f15d6b, #f2994f, #6fd0a2);
                        }

                        .stop-icon {
                            width: 10px;
                            height: 10px;
                            border: 2px solid #fff;
                            background: #f2994f;
                        }
                    }
                }

                .angkor-map-layout {
                    display: grid;
                    grid-template-columns: 1.4fr 1fr;
                    gap: 22px;
                }

                .angkor-map-canvas {
                    position: relative;
                    border-radius: 18px;
                    min-height: 470px;
                    padding: 20px;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    background:
                        radial-gradient(circle at 82% 20%, rgba(242, 148, 84, 0.22), transparent 40%),
                        radial-gradient(circle at 20% 75%, rgba(114, 196, 151, 0.2), transparent 45%),
                        linear-gradient(150deg, rgba(44, 23, 64, 0.95), rgba(24, 12, 36, 0.95));
                    overflow: hidden;

                    .temple-route-overlay {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        pointer-events: none;
                    }

                    .route-glow {
                        stroke: rgba(241, 93, 107, 0.3);
                        stroke-width: 2.7;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        stroke-dasharray: 2.5 1.6;
                        animation: routeFlow 3s linear infinite;
                    }

                    .route-main {
                        stroke: url(#templeRouteGradient);
                        stroke-width: 1.2;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        stroke-dasharray: 1.1 0.9;
                        animation: routeFlow 4.5s linear infinite;
                    }

                    .route-stop {
                        fill: #3a294d;
                        stroke: rgba(255, 255, 255, 0.85);
                        stroke-width: 0.38;
                        transition: fill 0.2s ease, r 0.2s ease;
                    }

                    .route-stop.is-active {
                        fill: #f2994f;
                        r: 1.55;
                    }

                    .water-ring {
                        position: absolute;
                        right: 12%;
                        top: 10%;
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        border: 1px solid rgba(122, 190, 225, 0.4);
                        box-shadow: inset 0 0 0 16px rgba(122, 190, 225, 0.08);
                    }

                    .temple-pins {
                        position: absolute;
                        inset: 0;
                    }

                    .temple-pin {
                        position: absolute;
                        transform: translate(-50%, -50%);
                        border: 0;
                        background: transparent;
                        color: inherit;
                        cursor: pointer;
                        font-family: inherit;

                        .pulse {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                            transform: translate(-50%, -50%);
                            background: rgba(241, 93, 107, 0.35);
                            animation: templePulse 1.6s ease-out infinite;
                        }

                        .dot {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            width: 11px;
                            height: 11px;
                            border-radius: 50%;
                            transform: translate(-50%, -50%);
                            background: #f15d6b;
                            border: 2px solid #ffffff;
                            box-shadow: 0 0 0 6px rgba(241, 93, 107, 0.12);
                        }

                        .label {
                            position: absolute;
                            left: 14px;
                            top: -11px;
                            padding: 5px 10px;
                            border-radius: 7px;
                            background: rgba(12, 8, 18, 0.7);
                            border: 1px solid rgba(255, 255, 255, 0.25);
                            font-size: 11px;
                            font-weight: 700;
                            letter-spacing: 0.2px;
                            white-space: nowrap;
                        }

                        &.is-active .dot,
                        &:hover .dot,
                        &:focus-visible .dot {
                            background: #f2994f;
                            box-shadow: 0 0 0 8px rgba(242, 153, 79, 0.16);
                        }

                        &:focus-visible {
                            outline: none;
                        }
                    }
                }

                .angkor-map-info {
                    border-radius: 18px;
                    padding: 22px;
                    min-height: 470px;
                    border: 1px solid rgba(255, 255, 255, 0.22);
                    background: linear-gradient(180deg, rgba(233, 146, 80, 0.16), rgba(28, 16, 44, 0.78));

                    .temple-name {
                        font-size: 28px;
                        line-height: 1.2;
                        margin-bottom: 14px;
                        color: #ffd9a4;
                    }

                    .temple-zone,
                    .temple-distance,
                    .temple-visit-time,
                    .temple-highlight {
                        font-size: 15px;
                        line-height: 1.55;
                        margin-bottom: 10px;
                        color: #f9f3ea;
                    }

                    .temple-highlight {
                        margin-top: 14px;
                        padding-top: 14px;
                        border-top: 1px solid rgba(255, 255, 255, 0.22);
                        color: #ffe7bf;
                    }
                }
            }
        }
    }
    .apsara-dance {
        background-image: url('../img/background/apsara.png');
        &::after {
            background: #e29454;
        }
    }

    .destinations {
        padding: 120px 0px;
        max-width: 1400px;
        margin: 0 auto;
        .header {
            text-align: center;
            margin-bottom: 50px;
            .title {
                font-size: 28px;
                font-weight: 800;
                margin-bottom: 10px;
            }
            .description {
                font-size: 18px;
                line-height: 1.5;
                max-width: 900px;
                margin: 0 auto;
                color: #333;
            }
        }
        .destinations-card {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            .item {
                display: flex;
                gap: 20px;
                .item-container {
                    position: relative;
                    /* flex: 0 0 280px; */
                    height: 320px;
                    .image-wrapper {
                        width: 100%;
                        height: 220px;
                        border-radius: 20px;
                        overflow: hidden;
                        position: relative;
                        .destination-img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: transform 0.6s ease;
                            cursor: pointer;
                        }
                        &::after {
                            content: "";
                            position: absolute;
                            inset: 0;
                            border-radius: 20px;
                            background: linear-gradient(
                                to top,
                                rgb(0, 0, 0),
                                rgba(255, 255, 255, 0)
                            );
                            opacity: 0.4;
                            transition: opacity 0.4s ease;
                            pointer-events: none;
                        }
                    }
                    .location-badge {
                        position: absolute;
                        top: 191px;
                        left: 10px;
                        right: 10px;
                        background: #1a0a20;
                        color: white;
                        border-radius: 40px;
                        display: flex;
                        align-items: center;
                        padding: 4px 15px;
                        z-index: 2;
                            .pin-icon {
                                position: absolute;
                                img {
                                    position: relative;
                                    width: 35px;
                                    height: 35px;
                                    display: block;
                                    flex: 0 0 14px;
                                    object-fit: contain;
                                    z-index: 10;
                                    background: #e29a5d;
                                    border-radius: 50%;
                                    padding: 6px;
                                    left: -25px;
                                }
                            }
                            .title {
                                font-size: 14px;
                                flex-grow: 1;
                                position: relative;
                                margin-left: 15px;
                                color: #e29454;
                                font-weight: 600;
                                .time {
                                    font-size: 22px;
                                    color: #e29a5d;
                                    font-weight: 800;
                                }
                            }
                        .chevron {
                            img {
                                position: relative;
                                width: 20px;
                                height: 25px;
                                display: block;
                                flex: 0 0 14px;
                                object-fit: contain;
                                margin-top: 5px;
                            }
                        }
                    }
                    .transport-badge {
                        position: absolute;
                        bottom: 30px;
                        left: 10px;
                        right: 10px;
                        background: rgb(226, 154, 93);
                        border-radius: 12px;
                        padding: 4px 10px;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        z-index: 1;
                        .car-circle {
                            background: #1a0a20;
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                                img {
                                        position: relative;
                                        width: 14px;
                                        height: 25px;
                                        display: block;
                                        flex: 0 0 14px;
                                        object-fit: contain;
                                        z-index: 10;
                                    }
                                }

                        .transport-info {
                        display: flex;
                        flex-direction: column;
                        line-height: 1.2;
                        strong { font-size: 14px; color: #1a0a20; }
                        span { font-size: 12px; color: #1a0a20; }
                        ul {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            li {
                                font-size: 12px;
                                color: #1a0a20;
                                &.kilometre {
                                    font-size: 20px;
                                    font-weight: 800;
                                    color: #1a0a20;
                                }
                            }
                        }
                        }
                    }
                }
                .text-content {
                    flex: 1;
                    .heading {
                        font-size: 18px;
                        font-weight: 800;
                        margin-bottom: 4px;
                    }
                    ul.tour-type {
                        display: flex;
                        flex-direction: row;
                        font-style: italic;
                        color: #e29454;
                        font-size: 14px;
                        margin-bottom: 6px;
                        list-style: none;
                            li {
                                img {
                                    width: 14px;
                                    height: 14px;
                                    margin-right: 4px;
                                }
                            }
                        
                    }
                    .description {
                        font-size: 16px;
                        line-height: 1.4;
                        color: #444;
                        font-weight: 400;
                    }
                }
                &:hover {
                    .destination-img {
                        transform: scale(1.1);
                    }
                    .image-wrapper::after {
                        opacity: 0.1;
                    }
                }
            }
        }
    }
    .activities-section {
        padding: 120px 0px;
        max-width: 1400px;
        margin: 0 auto;
        .header {
            text-align: center;
            margin-bottom: 50px;
            .title {
                font-size: 32px;
                font-weight: 800;
                margin-bottom: 10px;
            }
            .subtitle {
                font-size: 15px;
                color: #333;
            }
        }
        .activities-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 28px;
            align-items: start;
        }
        .activities-content {
            min-width: 0;
        }
        .activities-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            .card {
                background: #fff;
                border-radius: 15px;
                overflow: hidden;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                .media {
                    position: relative;
                    height: 350px;
                    overflow: hidden;

                    .activity-media-link {
                        display: block;
                        width: 100%;
                        height: 100%;
                        text-decoration: none;
                    }

                    .activity-img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.6s ease;
                        cursor: pointer;
                    }
                    .category {
                        position: absolute;
                        top: 15px;
                        left: 0px;
                        background: rgba(226, 154, 93, 0.9);
                        color: #000;
                        padding: 5px 15px;
                        border-radius: 0px 20px 20px 0px;
                        font-size: 14px;
                        font-weight: 600;
                        z-index: 2;
                    }
                    .overlay {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        padding: 30px 14px 18px;
                        background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
                        color: #fff;
                        z-index: 1;
                        .title {
                            font-size: 18px;
                            font-weight: 700;
                            margin: 0px;
                            text-transform: uppercase;
                            a {
                                color: inherit;
                                text-decoration: none;
                                transition: color 0.3s ease;
                                &:hover { color: #e29454; }
                            }
                        }
                        .summary {
                            font-size: 14px;
                            opacity: 0.9;
                            margin: 0;
                        }
                    }
                }
                .details {
                    padding: 12px;
                    .top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .location {
                            ul {
                                list-style: none;
                                display: flex;
                                flex-direction: row;
                                align-items: flex-end;
                                gap: 5px;
                                li {
                                    font-weight: 600;
                                    color: #e29454;
                                    font-size: 14px;
                                    img {
                                        width: 14px;
                                        height: auto;
                                    }
                                    & span {
                                        color: #666;
                                        font-weight: 300;
                                    }
                                }
                            }
                        }
                    }
                    .view-btn-row {
                        display: flex;
                        justify-content: center;
                        margin-top: 14px;
                        margin-bottom: 0;
                    }
                    .view-btn {
                        background: #1a0a20;
                        color: #e29454;
                        border: none;
                        display: inline-flex;
                        padding: 12px 22px;
                        align-items: center;
                        justify-content: center;
                        border-radius: 8px;
                        text-decoration: none;
                        font-size: 14px;
                        font-weight: 700;
                        cursor: pointer;
                        transition: background 0.3s ease, color 0.3s ease;
                        display: inline-block;
                        margin: 0 auto;
                    }
                    .view-btn:hover {
                        background: #e29454;
                        color: #1a0a20;
                    }
                    .details-bottom {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        ul {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            list-style: none;
                            li {
                                &.reviews {
                                    font-size: 14px;
                                    color: #666;
                                    margin-left: 10px;
                                    margin-bottom: 5px;
                                }
                                img {
                                    width: 100px;
                                    height: auto;
                                }
                            }
                        }
                    }
                }
                &:hover {
                    .activity-img {
                        transform: scale(1.1);
                    }
                }
            }
        }
        .activities-sidebar {
            position: sticky;
            top: 140px;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .sidebar-widget {
                background: #ffffff;
                border-radius: 14px;
                border: 1px solid #f0e7dd;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                padding: 22px 20px;

                h3 {
                    margin: 0 0 14px;
                    font-size: 20px;
                    font-weight: 800;
                    color: #1a0a20;
                }
            }

            .sidebar-search-form {
                display: flex;
                gap: 8px;

                input {
                    width: 100%;
                    border: 1px solid #d9cedf;
                    border-radius: 8px;
                    padding: 10px 12px;
                    font-size: 14px;
                    color: #1c032b;

                    &:focus {
                        outline: none;
                        border-color: #e29454;
                        box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.18);
                    }
                }

                button {
                    border: none;
                    border-radius: 8px;
                    padding: 10px 14px;
                    background: #1a0a20;
                    color: #e29454;
                    font-size: 13px;
                    font-weight: 700;
                    cursor: pointer;
                    transition: background 0.3s ease, color 0.3s ease;

                    &:hover {
                        background: #e29454;
                        color: #1a0a20;
                    }
                }
            }

            .sidebar-list {
                list-style: none;

                li {
                    border-bottom: 1px solid #efe9f3;

                    &:last-child {
                        border-bottom: none;
                    }

                    a {
                        display: block;
                        padding: 10px 0;
                        color: #321347;
                        text-decoration: none;
                        font-size: 15px;
                        font-weight: 600;
                        transition: color 0.3s ease;

                        &:hover {
                            color: #e29454;
                        }
                    }
                }
            }

            .sidebar-help {
                p {
                    font-size: 14px;
                    color: #5b5264;
                    margin-bottom: 14px;
                }

                .sidebar-help-btn {
                    display: inline-block;
                    text-decoration: none;
                    background: #e29454;
                    color: #1a0a20;
                    border-radius: 8px;
                    padding: 10px 14px;
                    font-size: 14px;
                    font-weight: 700;
                    transition: background 0.3s ease;

                    &:hover {
                        background: #c97d3e;
                    }
                }
            }
        }
    }
    .reviews-section {
        position: relative;
        padding: 100px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .reviews-bg-overlay {
            position: absolute;
            inset: 0;
            z-index: -1;

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.75);
            }

            .bg-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .reviews-container {
            width: 100%;
            margin: 0 auto;
            padding: 0 20px;

            .reviews-header {
                text-align: center;
                color: #fff;
                margin-bottom: 50px;

                .sub-title {
                    font-size: 18px;
                    font-weight: 500;
                }

                .main-title {
                    font-size: 42px;
                    color: #e29a5d;
                    margin: 10px 0;
                    font-weight: 800;
                }

                .description {
                    max-width: 650px;
                    margin: 0 auto;
                    opacity: 0.9;
                    font-size: 18px;
                }
            }

            .reviews-slider {
                position: relative;
                padding: 0 52px;

                .reviews-track-wrap {
                    overflow: hidden;
                    width: 100%;
                    padding-top: 8px;
                    margin-top: -8px;
                }

                .reviews-track {
                    display: flex;
                    gap:  18px;
                    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
                    will-change: transform;
                }

                .review-card {
                    flex-shrink: 0;
                    width: min(550px, calc(100vw - 140px));
                    background: rgba(255, 255, 255, 0.08);
                    backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    border-radius: 20px;
                    padding: 24px 22px 20px;
                    display: flex;
                    flex-direction: column;
                    min-height: 236px;
                    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

                    &:hover {
                        transform: translateY(-6px);
                        border-color: rgba(226, 148, 84, 0.55);
                        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
                    }

                    .rv-quote {
                        font-size: 24px;
                        color: rgba(226, 148, 84, 0.6);
                        margin-bottom: 10px;
                        flex-shrink: 0;
                        line-height: 1;
                    }

                    .rv-stars {
                        color: #f4b942;
                        font-size: 15px;
                        letter-spacing: 2px;
                        margin-bottom: 10px;
                        flex-shrink: 0;
                    }

                    .rv-text {
                        font-size: 14px;
                        line-height: 1.6;
                        color: rgba(255, 255, 255, 0.82);
                        margin: 0 0 14px;
                        flex: 1;
                    }

                    .rv-author {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding-top: 12px;
                        border-top: 1px solid rgba(255, 255, 255, 0.12);
                        margin-top: auto;

                        .rv-avatar-wrap {
                            position: relative;
                            width: 46px;
                            height: 46px;
                            flex-shrink: 0;

                            .rv-avatar {
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                                object-fit: cover;
                                border: 2px solid rgba(226, 148, 84, 0.65);
                            }

                            .rv-ta-badge {
                                position: absolute;
                                bottom: -2px;
                                right: -6px;
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                                border: 2px solid rgba(255, 255, 255, 0.15);
                                background: #fff;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                overflow: hidden;

                                img {
                                    width: 100%;
                                }
                            }
                        }

                        .rv-author-info {
                            .rv-name {
                                display: block;
                                color: #ffffff;
                                font-size: 14px;
                                font-weight: 700;
                            }

                            .rv-date {
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.42);
                            }
                        }
                    }
                }

                .rv-arrow {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    background: rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(8px);
                    color: #ffffff;
                    font-size: 14px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background 0.25s ease, border-color 0.25s ease;
                    z-index: 10;

                    &:hover {
                        background: #e29454;
                        border-color: #e29454;
                    }

                    &:focus-visible {
                        outline: 2px solid #e29454;
                        outline-offset: 2px;
                    }

                    &.rv-prev {
                        left: 0;
                    }

                    &.rv-next {
                        right: 0;
                    }
                }
            }

            .rv-dots {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 8px;
                margin-top: 30px;

                button {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    border: none;
                    background: rgba(255, 255, 255, 0.3);
                    cursor: pointer;
                    padding: 0;
                    transition: background 0.3s ease, width 0.35s ease, border-radius 0.35s ease;

                    &.is-active {
                        background: #e29454;
                        width: 26px;
                        border-radius: 4px;
                    }
                }
            }

            .view-all {
                text-align: center;
                margin-top: 40px;

                .view-all-btn {
                    display: inline-block;
                    background: #e29454;
                    padding: 14px 45px;
                    border-radius: 6px;
                    font-weight: 600;
                    font-size: 16px;
                    text-decoration: none;
                    color: #000;
                    transition: all 0.3s ease;
                    position: relative;

                    &::after {
                        content: "\2192";
                        margin-left: 8px;
                        display: inline-block;
                        transition: transform 0.3s ease;
                    }

                    &:hover {
                        transform: translateY(-5px);
                        box-shadow: 0 5px 10px #e29454;

                        &::after {
                            transform: translateX(6px);
                        }
                    }
                }
            }
        }
    }

/* Reusable View All button across pages */
.view-all {
    text-align: center;
    margin-top: 40px;

    .view-all-btn {
        display: inline-block;
        background: #e29454;
        padding: 14px 45px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 16px;
        text-decoration: none;
        color: #000;
        transition: all 0.3s ease;
        position: relative;

        &::after {
            content: "\2192";
            margin-left: 8px;
            display: inline-block;
            transition: transform 0.3s ease;
        }

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 10px #e29454;

            &::after {
                transform: translateX(6px);
            }
        }
    }
}

.ttd-testimonials {
    position: relative;
    padding: 0 0 80px;
    background: #e294542e;

    .ttd-testi-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 72px 24px 0;
    }

    .ttd-testi-head {
        display: flex;
        align-items: flex-end;
        gap: 48px;
        margin-bottom: 48px;
        padding-bottom: 36px;
        border-bottom: 1px solid #e8ddd0;

        .ttd-testi-head-left {
            flex-shrink: 0;

            .ttd-testi-eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                color: #e29454;
                font-size: 11px;
                font-weight: 800;
                letter-spacing: 2.5px;
                text-transform: uppercase;
                margin-bottom: 14px;
                padding-bottom: 8px;
                border-bottom: 2px solid #e29454;
            }

            .ttd-testi-title {
                color: #1a0a20;
                font-size: 42px;
                font-weight: 800;
                line-height: 1.15;
                margin: 0;
            }
        }

        .ttd-testi-subtitle {
            color: #6b5f7a;
            font-size: 16px;
            line-height: 1.75;
            max-width: 380px;
            padding-bottom: 4px;
        }
    }

    .ttd-testi-stage {
        display: flex;
        align-items: stretch;
    }

    .ttd-track {
        flex: 1;
        display: flex;
        gap: 24px;
        min-width: 0;
        overflow: hidden;
    }

    .ttd-slide {
        display: none;
        flex-direction: column;
        flex: 1;
        position: relative;
        background: #ffffff;
        border: 1px solid #eadfce;
        border-radius: 16px;
        padding: 36px 28px 28px 32px;
        box-shadow: 0 10px 24px rgba(26, 10, 32, 0.08);
        overflow: hidden;

        &::after {
            content: none;
        }

        &.ttd-pos-prev,
        &.ttd-pos-next {
            display: flex;
        }

        &.ttd-pos-active {
            display: flex;
            border-color: #e29454;
            box-shadow: 0 14px 30px rgba(26, 10, 32, 0.14);
            animation: ttd-slide-in 0.4s ease;
        }

        .ttd-slide-ordinal {
            position: absolute;
            top: 18px;
            right: 22px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.6px;
            color: #b6a6c4;
            opacity: 1;
        }

        .ttd-slide-quote {
            font-size: 32px;
            line-height: 1;
            color: #e8ddd0;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .ttd-slide-text {
            font-size: 15px;
            line-height: 1.75;
            color: #2e1a3e;
            font-style: normal;
            margin: 0 0 24px;
            flex: 1;
        }

        .ttd-slide-author {
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid #f0e4d4;
            padding-top: 18px;
            margin-top: auto;

            .ttd-slide-avatar {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                object-fit: cover;
                flex-shrink: 0;
                transform: none;
                border: 2px solid #f1e6d8;
            }

            .ttd-author-info {
                flex: 1;
                min-width: 0;

                .ttd-author-name {
                    display: block;
                    color: #1a0a20;
                    font-size: 14px;
                    font-weight: 800;
                    letter-spacing: 0.3px;
                }

                .ttd-author-meta {
                    color: #9b8faa;
                    font-size: 12px;
                }
            }

            .ttd-slide-stars {
                font-size: 13px;
                color: #f4b942;
                letter-spacing: 1px;
                flex-shrink: 0;
            }
        }
    }

    .ttd-testi-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 36px;
    }

    .ttd-arrow {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 0;
        border: 2px solid #1a0a20;
        background: transparent;
        color: #1a0a20;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

        &:hover {
            background: #1a0a20;
            color: #e29454;
        }

        &:focus-visible {
            outline: 2px solid #e29454;
            outline-offset: 2px;
        }
    }

    .ttd-dots {
        display: flex;
        align-items: center;
        gap: 8px;

        button {
            height: 4px;
            width: 22px;
            border-radius: 0;
            border: none;
            background: #d9cce5;
            cursor: pointer;
            padding: 0;
            transition: background 0.3s ease, width 0.35s ease;

            &.is-active {
                background: #e29454;
                width: 44px;
            }
        }
    }
}

@keyframes ttd-slide-in {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.main-footer {
    color: #ffffff;
    padding: 200px 0 40px;
    position: relative;
    font-family: sans-serif;
    margin-top: 300px;
    .silhouette {
        position: absolute;
        top: -80px;
        left: 0;
        width: 100%;
        z-index: 1;
        img {
            width: 100%;
            height: 80%;
            display: block;
        }
    }
    .footer-container {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.2fr 1.2fr 1fr 1fr;
        gap: 40px;
        position: relative;
        z-index: 2;
    }
   .footer-col {
        .footer-heading {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
        }
        .address {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 20px;
            opacity: 0.9;
        }
        .contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
            a {
                color: white;
                text-decoration: none;
                font-size: 15px;
                &:hover { text-decoration: underline; }
            }
            .icon {
                background: #e29454;
                color: #1a0a20;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .tour-list {
            list-style: none;
            padding: 0;
            li {
                display: flex;
                align-items: center;
                gap: 15px;
                margin-bottom: 15px;
                img {
                    width: 60px;
                    height: 45px;
                    object-fit: cover;
                    border-radius: 4px;
                }
                span {
                    font-size: 14px;
                    line-height: 1.4;
                }
            }
        }
        .links-grid {
            display: flex;
            gap: 30px;
            .link-list {
                list-style: none;
                padding: 0;
                li {
                    margin-bottom: 12px;
                    a {
                        color: white;
                        text-decoration: none;
                        font-size: 15px;
                        opacity: 0.8;
                        transition: opacity 0.3s;
                        &:hover { opacity: 1; }
                    }
                }
            }
        }
        .instagram-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            img {
                width: 100%;
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: 2px;
                cursor: pointer;
                transition: transform 0.3s;
                &:hover { transform: scale(1.05); }
            }
        }
    }
    .footer-bottom {
        text-align: center;
        margin-top: 60px;
        position: relative;
        z-index: 20;
        p {
            font-size: 18px;
        }
    }
}



/* page contact */
.contact-banner {
    width: 100%;
    position: relative;
    
    .map-container {
        height: 450px;
        position: relative;
        
        iframe { 
            filter: grayscale(15%); 
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .map-fade-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 120px;
            background: linear-gradient(to bottom, transparent, #ffffff);
            pointer-events: none;
            z-index: 3;
        }
    }
}
.contact-main-section {
  background: #ffffff;
  padding: 60px 0 100px;
  .contact-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .contact-header {
    text-align: center;
    margin-bottom: 50px;
    .header-label { 
        font-size: 18px; 
        font-weight: 500; 
        color: #333; 
        letter-spacing: 1px; 
    }
    .header-title { 
        font-size: 52px; 
        font-weight: 800; 
        margin: 5px 0; 
        color: #1a1a1a; 
    }
    .header-desc { 
        font-size: 16px; 
        color: #555; 
    }
  }
  .contact-grid {
    display: flex;
    gap: 0;
    padding-top: 60px;
  }
  .contact-info {
    flex: 0 0 350px;
    padding-right: 40px;
    .info-row {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 35px;
      .icon-square {
        width: 65px;
        height: 65px;
        background: #1a0a20;
        color: #e29a5d;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
      }
      .info-text {
        h4 { 
            font-size: 18px; 
            font-weight: 700; 
            margin-bottom: 4px; 
            color: #111; 
        }
        p { 
            font-size: 14px; 
            line-height: 1.6; 
            color: #444; 
            margin: 0; 
        }
      }
    }
    .expert-box {
      margin-top: 50px;
      .expert-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        .expert-img { 
            width: 55px; 
            height: 55px; 
            border-radius: 50%; 
            object-fit: cover; 
        }
        .expert-meta { 
          font-size: 13px; 
          line-height: 1.4;
          strong { 
            display: block; 
            font-size: 15px; 
          }
        }
      }
      .chat-outline-btn {
        width: 100%;
        background: transparent;
        border: 1px solid #cccccc;
        padding: 12px;
        border-radius: 4px;
        font-weight: 500;
        cursor: pointer;
        i {
            color: #e29a5d;
        }
        &:hover {
            background: #f9f9f9; 
        }
      }
    }
  }
  .vertical-divider {
    width: 1px;
    background-color: #eeeeee;
    margin: 0 20px;
  }
  .contact-form-side {
    flex: 1;
    padding-left: 40px;
    .form-title { 
        font-size: 34px; 
        font-weight: 600; 
        color: #1a1a1a; 
        margin-bottom: 10px; 
    }
    .form-instruction { 
        font-size: 14px; 
        color: #777; 
        margin-bottom: 35px; 
    }
    .reply-form {
      .form-top-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
      }
      .form-full-row {
        margin-bottom: 20px;
      }
      input, textarea {
        width: 100%;
        padding: 18px;
        border: 1px solid #dddddd;
        border-radius: 4px;
        font-size: 15px;
        outline: none;
        box-sizing: border-box;
        &:focus { border-color: #e29a5d; }
      }
      textarea { 
        resize: none; }
      .consent-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 35px;
        cursor: pointer;
        input { 
            width: auto; 
            margin-top: 4px; 
        }
        label { 
            font-size: 14px; 
            color: #555; 
            line-height: 1.4; 
        }
      }

      .orange-submit-btn {
        background: #e29a5d;
        color: #ffffff;
        border: none;
        padding: 16px 50px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
        &:hover { 
            background: #c9844a; 
        }
      }
    }
  }
}

/* privacy policy page */
.privacy-banner {
    width: 100%;
    position: relative;

    .banner-container {
        height: 450px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 140px 24px 48px;
        overflow: hidden;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(16, 9, 23, 0.35) 0%, rgba(16, 9, 23, 0.62) 58%, rgba(16, 9, 23, 0.78) 100%);
            z-index: 1;
        }

        img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .banner-copy {
            position: relative;
            z-index: 2;
            width: min(880px, 100%);
            text-align: center;
            color: #ffffff;
        }

        .banner-title {
            font-size: clamp(32px, 4.8vw, 58px);
            line-height: 1.08;
            font-weight: 800;
            margin: 0 0 14px;
        }

        .banner-description {
            font-size: clamp(15px, 1.3vw, 20px);
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.92);
            max-width: 760px;
            margin: 0 auto;
        }
    }
}

.privacy-main-section {
    padding: 0 0 90px;

    .privacy-container {
        max-width: 1100px;
        margin: 0 auto;
        border-top: 0;
    }

    .privacy-title {
        text-align: center;
        font-size: 36px;
        font-weight: 500;
        letter-spacing: 0.4px;
        color: #222222;
        margin: 0;
        padding: 24px 20px;
    }

    .privacy-accordion {
        padding: 0 28px 20px;
    }

    .privacy-item {

        &:first-child {
            border-top: 0;
        }

        summary {
            position: relative;
            list-style: none;
            cursor: pointer;
            padding: 16px 0;
            font-size: 23px;
            font-weight: 700;
            color: #1f1f1f;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                right: 28px;
                bottom: 0;
                height: 1px;
                background: #cfd8dc;
            }

            &::-webkit-details-marker {
                display: none;
            }

            &::after {
                content: "\f107";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                font-size: 14px;
                color: #2e4778;
                transition: transform 0.2s ease;
            }
        }

        &[open] summary::after {
            transform: rotate(180deg);
        }

        .privacy-content {
            padding: 0 0 18px;

            p,
            li {
                font-size: 18px;
                color: #111111;
                line-height: 1.62;
            }

            p {
                margin: 0 0 6px;
            }

            ul {
                margin: 4px 0 6px;
                padding: 0;
                list-style: none;

                li::before {
                    content: "- ";
                }
            }

            a {
                color: #1d4f9d;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

/* ===================== Blog Page ===================== */
.blog-banner {
    width: 100%;
    position: relative;

    .banner-container {
        height: 450px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 140px 24px 48px;
        overflow: hidden;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(16, 9, 23, 0.28) 0%, rgba(16, 9, 23, 0.55) 55%, rgba(16, 9, 23, 0.78) 100%);
            z-index: 1;
        }

        img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
        }

        .banner-copy {
            position: relative;
            z-index: 2;
            width: min(880px, 100%);
            text-align: center;
            color: #ffffff;
        }

        .banner-title {
            font-size: clamp(32px, 4.8vw, 58px);
            line-height: 1.08;
            font-weight: 800;
            margin: 0 0 14px;
        }

        .banner-description {
            font-size: clamp(15px, 1.3vw, 20px);
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.92);
            max-width: 760px;
            margin: 0 auto;
        }
    }
}

.privacy-banner .banner-container,
.blog-banner .banner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.privacy-banner .banner-container > img,
.blog-banner .banner-container > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-banner .banner-container > img {
    object-position: center top;
}

.privacy-banner .banner-container > .banner-copy,
.blog-banner .banner-container > .banner-copy {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, calc(100% - 48px));
    z-index: 2;
    text-align: center;
    color: #ffffff;
}

.privacy-banner .banner-container > .banner-copy .banner-title,
.blog-banner .banner-container > .banner-copy .banner-title {
    font-size: clamp(32px, 4.8vw, 58px);
    line-height: 1.08;
    font-weight: 800;
    margin: 0 0 14px;
    color: #ffffff;
}

.privacy-banner .banner-container > .banner-copy .banner-description,
.blog-banner .banner-container > .banner-copy .banner-description {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(15px, 1.3vw, 20px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}

.blog-main-section {
    padding: 60px 20px 90px;
    max-width: 1200px;
    margin: 0 auto;

    .blog-page-title {
        text-align: center;
        font-size: 32px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #1a1a1a;
        margin: 0 0 40px;
        text-transform: uppercase;
    }

    .blog-layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 40px;
        align-items: start;
        .blog-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;

            .blog-card {
                background: #ffffff;
                border-radius: 6px;
                overflow: hidden;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

                .blog-card-img {
                    width: 100%;
                    height: 200px;
                    object-fit: cover;
                    display: block;
                    cursor: pointer;
                }

                .blog-card-body {
                    padding: 16px 16px 20px;

                    .blog-card-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        margin-bottom: 10px;

                        .blog-card-title {
                            font-size: 15px;
                            font-weight: 700;
                            color: #1a1a1a;
                            margin: 0;
                            line-height: 1.4;
                            flex: 1;
                            padding-right: 10px;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }

                        .blog-bookmark {
                            flex-shrink: 0;
                            background: #e29a5d;
                            color: #ffffff;
                            border: none;
                            width: 28px;
                            height: 28px;
                            border-radius: 4px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            font-size: 12px;
                            transition: background 0.3s;

                            &:hover {
                                background: #c9844a;
                            }
                        }
                    }

                    .blog-card-meta {
                        display: flex;
                        align-items: center;
                        gap: 14px;
                        margin-bottom: 10px;

                        .meta-item {
                            display: flex;
                            align-items: center;
                            gap: 5px;
                            font-size: 12px;
                            color: #777777;

                            i {
                                color: #e29a5d;
                                font-size: 11px;
                            }

                            span {
                                color: #555555;
                            }
                        }
                    }

                    .blog-card-desc {
                        font-size: 13px;
                        color: #666666;
                        line-height: 1.6;
                        margin: 0 0 16px;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }

                    .blog-read-more {
                        display: inline-block;
                        background: #e29a5d;
                        color: #ffffff;
                        text-decoration: none;
                        font-size: 13px;
                        font-weight: 600;
                        padding: 9px 22px;
                        border-radius: 5px;
                        transition: background 0.3s;

                        &:hover {
                            background: #c9844a;
                        }
                    }
                }
            }
        }

        .blog-detail-primary {
            display: flex;
            flex-direction: column;
            gap: 28px;

            .blog-card {
                background: #ffffff;
                border-radius: 6px;
                overflow: hidden;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

                .blog-card-img {
                    width: 100%;
                    height: 380px;
                    object-fit: cover;
                    display: block;
                }

                .blog-card-body {
                    padding: 18px 18px 22px;

                    .blog-card-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        gap: 12px;
                        margin-bottom: 12px;

                        .blog-card-title {
                            font-size: 23px;
                            font-weight: 700;
                            color: #1b1b1b;
                            margin: 0;
                            line-height: 1.35;
                        }
                    }

                    .blog-card-meta {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 10px;
                        margin-bottom: 12px;

                        .meta-item {
                            display: inline-flex;
                            align-items: center;
                            gap: 7px;
                            padding: 6px 10px;
                            border-radius: 999px;
                            background: #f7efe8;
                            border: 1px solid #f0dfd2;

                            i {
                                color: #d7863f;
                                font-size: 12px;
                                line-height: 1;
                            }

                            span {
                                color: #7a4c25;
                                font-size: 13px;
                                font-weight: 600;
                                line-height: 1;
                            }
                        }
                    }

                    .blog-card-desc {
                        font-size: 15px;
                        color: #5d5d5d;
                        line-height: 1.7;
                        margin: 0;
                    }
                }
            }

            .blog-detail-content {
                background: #ffffff;
                border-radius: 6px;
                border: 1px solid #eeeeee;
                padding: 24px;

                .detail-heading {
                    font-size: 24px;
                    color: #1a1a1a;
                    margin: 0 0 14px;
                    line-height: 1.35;
                }

                .detail-text {
                    font-size: 15px;
                    color: #555555;
                    line-height: 1.75;
                    margin: 0 0 14px;
                }

                .detail-list {
                    margin: 0 0 14px;
                    padding-left: 22px;

                    li {
                        font-size: 15px;
                        color: #555555;
                        line-height: 1.7;
                        margin-bottom: 6px;
                    }
                }

                .detail-quote {
                    margin: 12px 0 14px;
                    padding: 14px 16px;
                    border-left: 4px solid #e29a5d;
                    background: #fdf7f2;
                    color: #6b4b2e;
                    font-size: 15px;
                    font-style: italic;
                    line-height: 1.65;
                }
            }

            .related-blog-detail {
                background: #ffffff;

                .related-title {
                    font-size: 22px;
                    color: #1a1a1a;
                    margin: 0 0 18px;
                }

                .related-detail-grid {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 16px;

                    .related-detail-card {
                        border: 1px solid #f0f0f0;
                        border-radius: 6px;
                        overflow: hidden;
                        background: #ffffff;
                        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

                        .related-detail-img {
                            width: 100%;
                            height: 180px;
                            object-fit: cover;
                            display: block;
                        }

                        .related-detail-body {
                            padding: 14px;

                            .related-detail-heading {
                                font-size: 16px;
                                color: #1f1f1f;
                                margin: 0 0 8px;
                                line-height: 1.4;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }

                            .related-detail-meta {
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                margin: 0 0 10px;

                                .meta-item {
                                    display: inline-flex;
                                    align-items: center;
                                    gap: 5px;
                                    font-size: 12px;
                                    color: #8b8b8b;

                                    i {
                                        color: #e29a5d;
                                        font-size: 11px;
                                    }
                                }
                            }

                            .related-detail-text {
                                font-size: 14px;
                                color: #666666;
                                line-height: 1.7;
                                margin: 0 0 10px;
                                display: -webkit-box;
                                -webkit-line-clamp: 3;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }

                            .related-detail-link {
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                padding: 8px 14px;
                                border: 1px solid #e29a5d;
                                border-radius: 4px;
                                background: #ffffff;
                                cursor: pointer;
                                font-size: 13px;
                                font-weight: 600;
                                color: #e29a5d;
                                text-decoration: none;
                                transition: background-color 0.2s ease, color 0.2s ease;

                                &:hover {
                                    background-color: #e29a5d;
                                    color: #ffffff;
                                }

                                &:focus-visible {
                                    outline: 2px solid #e29a5d;
                                    outline-offset: 2px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .blog-sidebar {
            display: flex;
            flex-direction: column;
            gap: 28px;

            .sidebar-widget {
                border: 1px solid #eeeeee;
                border-radius: 6px;
                overflow: hidden;

                .widget-title {
                    font-size: 15px;
                    font-weight: 700;
                    color: #1a1a1a;
                    margin: 0;
                    padding: 14px 18px;
                    border-bottom: 1px solid #eeeeee;
                    letter-spacing: 0.3px;
                }

                .widget-body {
                    padding: 14px 18px;
                }
            }

            .blog-search-form {
                display: flex;
                align-items: center;
                border: 1px solid #dddddd;
                border-radius: 5px;
                overflow: hidden;

                .search-input {
                    flex: 1;
                    border: none;
                    outline: none;
                    padding: 10px 14px;
                    font-size: 14px;
                    color: #333333;
                    background: transparent;

                    &::placeholder {
                        color: #aaaaaa;
                    }
                }

                .search-btn {
                    background: none;
                    border: none;
                    padding: 10px 14px;
                    cursor: pointer;
                    color: #555555;
                    font-size: 15px;
                    transition: color 0.2s;

                    &:hover {
                        color: #e29a5d;
                    }
                }
            }

            .category-list {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 2px;

                li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 8px 0;
                    border-bottom: 1px solid #f4f4f4;

                    &:last-child {
                        border-bottom: none;
                    }

                    .cat-left {
                        display: flex;
                        align-items: center;
                        gap: 9px;

                        i {
                            color: #e29a5d;
                            font-size: 13px;
                            width: 16px;
                            text-align: center;
                        }

                        span {
                            font-size: 14px;
                            color: #444444;
                            cursor: pointer;

                            &:hover {
                                color: #e29a5d;
                            }
                        }
                    }

                    .cat-count {
                        font-size: 12px;
                        color: #888888;
                    }
                }
            }

            .popular-post-list {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 12px;

                li {
                    display: flex;
                    gap: 12px;
                    align-items: flex-start;
                    padding-bottom: 12px;
                    border-bottom: 1px solid #f4f4f4;

                    &:last-child {
                        border-bottom: none;
                        padding-bottom: 0;
                    }

                    .pop-thumb {
                        width: 70px;
                        height: 60px;
                        object-fit: cover;
                        border-radius: 4px;
                        flex-shrink: 0;
                    }

                    .pop-info {
                        flex: 1;

                        .pop-title {
                            font-size: 13px;
                            font-weight: 600;
                            color: #222222;
                            margin: 0 0 5px;
                            line-height: 1.4;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            cursor: pointer;

                            &:hover {
                                color: #e29a5d;
                            }
                            a {
                                color: inherit;
                                text-decoration: none;
                            }
                        }

                        .pop-meta {
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 11px;
                            color: #999999;

                            i {
                                color: #e29a5d;
                                font-size: 10px;
                            }
                        }
                    }
                }
            }

            .tag-cloud {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;

                .tag-pill {
                    background: #f5f5f5;
                    color: #444444;
                    font-size: 12px;
                    padding: 6px 14px;
                    border-radius: 20px;
                    cursor: pointer;
                    transition: background 0.2s, color 0.2s;

                    &:hover {
                        background: #e29a5d;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}

/* ===== ABOUT US PAGE ===== */

.about-banner {
    height: 520px;
    width: 100%;
    background:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        url("../img/banner/banner.png") center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;

    .about-banner-content {
        width: min(860px, calc(100% - 32px));
    }

    .about-banner-title {
        font-size: clamp(36px, 5vw, 64px);
        font-weight: 800;
        letter-spacing: 0.02em;
        margin-bottom: 12px;
    }

    .about-banner-description {
        max-width: 720px;
        margin: 0 auto 18px;
        font-size: clamp(15px, 1.2vw, 19px);
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.92);
    }

    .about-banner-breadcrumb {
        font-size: 15px;
        font-weight: 400;
        opacity: 0.85;

        a {
            color: #e29454;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        span {
            margin: 0 6px;
            opacity: 0.6;
        }
    }
}

.page-breadcrumb-bar {
    background: #ffffff;

    .page-breadcrumb-wrap {
        width: min(1200px, 100%);
        margin: 0 auto;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        color: #6b5f7a;
        font-size: 14px;
        font-weight: 600;
    }

    a {
        color: #1c032b;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    span[aria-current="page"] {
        color: #1a0a20;
    }
}

.page-breadcrumb-bar + main {
    padding-top: 40px;
}

.page-breadcrumb-bar + main > *:first-child {
    padding-top: 0;
    margin-top: 0;
}

.page-breadcrumb-bar + .td-wrap {
    margin-top: 40px;
}

.about-intro {
    padding: 80px 16px 60px;

    .about-intro-container {
        max-width: 860px;
        margin: 0 auto;
        text-align: center;

        .about-intro-title {
            font-size: clamp(26px, 3vw, 40px);
            font-weight: 800;
            letter-spacing: -0.01em;
            margin-bottom: 24px;
            color: #1c032b;
        }

        .about-intro-text {
            font-size: clamp(14px, 1vw, 17px);
            font-weight: 300;
            line-height: 1.8;
            color: #444;
        }
    }
}

.about-features {
    padding: 0 16px 80px;

    .about-features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1000px;
        margin: 0 auto;

        .about-feature-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 32px 20px 28px;
            text-align: center;
            background: #e29454;
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            cursor: pointer;

            &:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            }

            .about-feature-icon {
                width: 64px;
                height: 64px;
                margin: 0 auto 16px;
                background: #fff5eb;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    font-size: 26px;
                    color: #e29454;
                }
            }

            .about-feature-label {
                font-size: 14px;
                font-weight: 700;
                color: #1c032b;
                letter-spacing: 0.02em;
            }
        }
    }
}

.about-history {
    padding: 80px 16px 100px;
    background: #fafafa;

    .about-history-title {
        font-size: clamp(26px, 3vw, 40px);
        font-weight: 800;
        text-align: center;
        letter-spacing: -0.01em;
        margin-bottom: 70px;
        color: #1c032b;
    }

    .about-timeline {
        position: relative;
        max-width: 860px;
        margin: 0 auto;
    }

    .timeline-item {
        display: grid;
        grid-template-columns: 1fr 48px 1fr;
        align-items: stretch;
        margin-bottom: 0;
        position: relative;
    }

    /* Each center column IS the colored bar segment */
    .timeline-center {
        position: relative;
        width: 22px;
        align-self: stretch;
        min-height: 160px;
        z-index: 1;
        box-sizing: content-box;
    }

    .timeline-text {
        padding-top: 50px;
        padding-bottom: 50px;

        .timeline-heading {
            font-size: 16px;
            font-weight: 800;
            color: #1c032b;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .timeline-desc {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.7;
            color: #555;
        }
    }

    /* Right side: 2005, 2015, 2025 — text LEFT | bar | circle+year RIGHT */
    .timeline-right {
        /* Orange bar segment — shifted right */
        .timeline-center {
            background: #e29454;
            margin-left: 20px;
            margin-right: 0;
        }

        .timeline-text {
            text-align: right;
            padding-right: 34px;
        }

        .timeline-year-block {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
            padding-left: 60px;
            position: relative;
            z-index: 2;

            /* Horizontal connector line — starts from dot center outward */
            &::before {
                content: '';
                position: absolute;
                left: -12px;         /* dot radius = 9px, line starts at dot center */
                top: 50%;
                transform: translateY(-50%);
                width: 50px;       /* 60px padding - 9px dot radius */
                height: 4px;
                background: #e29454;
                z-index: 1;
            }

            /* Round dot sitting ON the bar edge */
            &::after {
                content: '';
                position: absolute;
                left: 24px;
                top: 50%;
                transform: translateY(-50%);
                width: 18px;
                height: 18px;
                background: #e29454;
                border-radius: 50%;
                z-index: 3;
            }

            .timeline-icon-circle {
                background: #e29454;

                /* Orange circle → icon tinted dark purple */
                img {
                    filter: brightness(0) saturate(100%) invert(5%) sepia(50%) saturate(1500%) hue-rotate(265deg) brightness(70%);
                       transform: scaleX(-1);
                }
            }
        }
    }

    /* Left side: 2010, 2020, 2030 — year+circle LEFT | bar | text RIGHT */
    .timeline-left {
        /* Dark purple bar segment — shifted left */
        .timeline-center {
            background: #1a0a20;
            margin-left: 0;
            margin-right: auto;
        }

        .timeline-text {
            text-align: left;
            padding-left: 34px;
        }

        .timeline-year-block {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
            padding-right: 60px;
            position: relative;
            z-index: 2;

            /* Horizontal connector line — starts from dot center outward */
            &::before {
                content: '';
                position: absolute;
                right: -12px;
                top: 50%;
                transform: translateY(-50%);
                width: 51px;
                height: 4px;
                background: #1a0a20;
                z-index: 1;
            }

            /* Round dot sitting ON the bar edge */
            &::after {
                content: '';
                position: absolute;
                right: 26px;
                top: 50%;
                transform: translateY(-50%);
                width: 18px;
                height: 18px;
                background: #1a0a20;
                border-radius: 50%;
                z-index: 3;
            }

            .timeline-icon-circle {
                background: #1a0a20;

                /* Purple circle → icon tinted orange */
                img {
                    filter: brightness(0) saturate(100%) invert(64%) sepia(45%) saturate(600%) hue-rotate(340deg) brightness(108%);
                }
            }
        }
    }

    /* Orange segment shape */
    .timeline-right .timeline-center {
        border-radius: 10px 60px 60px 10px;
    }

    /* Purple segment mirrors orange shape */
    .timeline-left .timeline-center {
        border-radius: 60px 10px 10px 60px;
    }

    .timeline-icon-circle {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        z-index: 1;

        img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }
    }

    .timeline-year {
        font-size: clamp(32px, 4vw, 54px);
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    /* Right-side years (2005, 2015, 2025) = orange */
    .timeline-right .timeline-year {
        color: #e29454;
    }

    /* Left-side years (2010, 2020, 2030) = dark purple */
    .timeline-left .timeline-year {
        color: #1a0a20;
    }
}

/* ===== TOURS PAGE ===== */
.tours-page-banner {
    min-height: 340px;
    padding: 110px 16px 64px;
    background:
        linear-gradient(110deg, rgba(26, 10, 32, 0.88) 0%, rgba(26, 10, 32, 0.62) 48%, rgba(226, 148, 84, 0.48) 100%),
        url('../img/banner/banner.png') center/cover no-repeat;

    .tours-page-banner-content {
        width: min(1280px, 100%);
        margin: 0 auto;
    }

    .tours-page-title {
        font-size: clamp(30px, 4.5vw, 52px);
        line-height: 1.08;
        margin-bottom: 12px;
        font-weight: 900;
        color: #ffffff;
        text-align: center;
    }

    .tours-page-subtitle {
        font-size: clamp(14px, 1.1vw, 19px);
        color: #f6ecff;
        text-align: center;
    }
}

/* Banner responsive — matches screen.css navbar breakpoints */
@media (max-width: 1199px) {
    .tours-page-banner {
        padding-top: 104px;
    }
}
@media (max-width: 991px) {
    .tours-page-banner {
        min-height: 280px;
        padding: 100px 16px 48px;
    }
}
@media (max-width: 767px) {
    .tours-page-banner {
        min-height: 240px;
        padding: 96px 14px 40px;
    }
}
@media (max-width: 479px) {
    .tours-page-banner {
        min-height: 196px;
        padding: 90px 12px 32px;
    }
}

.tours-page-main {
    padding: 34px 16px 90px;
    background: #ffffff;
    .tours-page-wrap {
        width: min(1280px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 290px 1fr;
        gap: 24px;
    }

    .tour-filter-panel {
        background: #ffffff;
        border: 1px solid #ebeaf0;
        border-radius: 14px;
        padding: 22px 18px;
        position: sticky;
        top: 96px;
        height: fit-content;

        .filter-title {
            font-size: 24px;
            font-weight: 900;
            margin-bottom: 20px;
            color: #1a0a20;
        }

        .filter-group {
            label,
            h3 {
                font-size: 13px;
                font-weight: 800;
                color: #1a0a20;
                margin-bottom: 8px;
                display: block;
            }

            select,
            input {
                width: 100%;
                border: 1px solid #dddbe5;
                border-radius: 9px;
                min-height: 42px;
                font-size: 14px;
                color: #1c032b;
                background: #ffffff;
            }

            select,
            input[type='date'],
            input[type='number'] {
                padding: 0 12px 0 40px;
            }
        }

        .filter-input-wrap {
            position: relative;

            i {
                position: absolute;
                left: 14px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 14px;
                color: #e29454;
                pointer-events: none;
            }
        }

        .price-range-values {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            span {
                font-size: 12px;
                font-weight: 700;
                color: #e29454;
                background: #e2945452;
                border-radius: 6px;
                padding: 4px 8px;
            }
        }

        input[type='range'] {
                    padding: 0;
                    accent-color: #e29454;
                }
        
        /* Remove gradient, use solid #e29454 for price filter slider */
        #price-range-slider {
          accent-color: #e29454;
          width: 100%;
          height: 6px;
          border-radius: 6px;
          background: #e29454;
          outline: none;
          transition: background 0.3s;
        }
        /* Ensure slider thumb is perfectly centered on the progress bar */
        #price-range-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: #fff;
          border: 2px solid #e29454;
          box-shadow: 0 2px 8px rgba(0,0,0,0.12);
          cursor: pointer;
          margin-top: -5px; /* Center the thumb vertically on a 6px track */
          transition: border 0.2s;
        }
        #price-range-slider:focus::-webkit-slider-thumb {
          border: 2px solid #1a0a20;
        }
        #price-range-slider::-moz-range-thumb {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: #fff;
          border: 2px solid #e29454;
          box-shadow: 0 2px 8px rgba(0,0,0,0.12);
          cursor: pointer;
          transition: border 0.2s;
        }
        #price-range-slider:focus::-moz-range-thumb {
          border: 2px solid #1a0a20;
        }
        #price-range-slider::-ms-thumb {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: #fff;
          border: 2px solid #e29454;
          box-shadow: 0 2px 8px rgba(0,0,0,0.12);
          cursor: pointer;
          transition: border 0.2s;
        }
        #price-range-slider::-webkit-slider-runnable-track {
          height: 6px;
          border-radius: 6px;
          background: #e29454;
        }
        #price-range-slider::-ms-fill-lower,
        #price-range-slider::-ms-fill-upper {
          background: #e29454;
        }
        #price-range-slider:focus {
          outline: none;
        }

        .rating-list {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                margin-bottom: 8px;
            }

            label {
                margin: 0;
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
                color: #3f3552;

                input {
                    width: auto;
                    min-height: auto;
                }
            }
        }

        .filter-group-options {
            margin-top: 8px;

            h3 {
                font-size: 16px;
                font-weight: 900;
                margin-bottom: 14px;
            }
        }

        .filter-guests-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .filter-guest-label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: #6b5f7a;
            margin-bottom: 6px;

            i {
                color: #e29454;
                margin-right: 4px;
            }
        }

        .filter-guest-col .filter-input-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #dddbe5;
            border-radius: 9px;
            padding: 6px 10px;

            input[type='number'] {
                text-align: center;
                padding: 0;
                min-width: 0;
                flex: 1;
                border: none;
                background: transparent;
                min-height: auto;
                font-size: 15px;
                font-weight: 700;
                color: #1c032b;
                -moz-appearance: textfield;
                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button { -webkit-appearance: none; }
            }

            .filter-guest-minus,
            .filter-guest-plus {
                position: static;
                transform: none;
                top: auto;
                left: auto;
                width: 26px;
                height: 26px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1.5px solid #e29454;
                border-radius: 50%;
                color: #e29454;
                font-size: 10px;
                cursor: pointer;
                pointer-events: all;
                transition: background-color 0.18s ease, color 0.18s ease;
                &:hover { background: #e29454; color: #ffffff; }
            }
        }

        .filter-check-list {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                margin-bottom: 8px;
            }

            label {
                margin: 0;
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 14px;
                font-weight: 600;
                color: #1c032b;
            }

            input[type='checkbox'] {
                width: 20px;
                height: 20px;
                min-height: 20px;
                border: 1px solid #cfcad9;
                border-radius: 2px;
                accent-color: #e29454;
            }
        }

        .filter-divider {
            height: 1px;
            background: #e8e4ef;
            margin: 10px 0 18px;
        }

        .filter-submit-btn {
            width: 100%;
            min-height: 50px;
            border: none;
            border-radius: 8px;
            background: #e29454;
            color: #ffffff;
            font-size: 15px;
            font-weight: 800;
            margin: 8px 0 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            &:hover {
                background: #c77a3a;
            }
        }
    }

    .tour-results-panel {
        min-width: 0;
    }

    .tour-results-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;

        .tour-count {
            font-size: clamp(20px, 1.9vw, 30px);
            font-weight: 900;
            color: #12121a;

            a {
                font-size: 14px;
                font-weight: 700;
                color: #e29454;
                margin-left: 6px;
            }
        }

        .tour-toolbar-controls {
            display: flex;
            align-items: center;
            gap: 10px;

            label {
                font-size: 13px;
                font-weight: 700;
                color: #4f4660;
            }

            select {
                border: 1px solid #dddbe5;
                border-radius: 8px;
                height: 38px;
                padding: 0 10px;
                background: #ffffff;
                color: #231739;
                font-size: 13px;
            }
        }
    }

    .tour-view-toggle {
        display: inline-flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid #dddbe5;
        border-radius: 8px;
        overflow: hidden;
    }

    .tour-view-btn {
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        color: #807591;
        cursor: pointer;

        &.is-active {
            background: #e2945462;
            color: #e29454;
        }
    }

    .tour-card-layout {
        display: grid;
        gap: 16px;

        &.is-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        &.is-list {
            grid-template-columns: 1fr;
        }
    }

    .tour-card {
        border: 1px solid #ebeaf0;
        border-radius: 12px;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(23, 14, 35, 0.06);
        transition: transform 0.25s ease, box-shadow 0.25s ease;

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 26px rgba(23, 14, 35, 0.1);
        }
    }

    .tour-card-layout.is-grid {
        .tour-card {
            display: flex;
            flex-direction: column;
        }

        .tour-body {
            flex: 1;
        }

        .tour-media {
            height: 218px;
        }

        .tour-desc {
            display: none;
        }

        .tour-stats {
            display: none;
        }

        .tour-footer {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .tour-btns {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .tour-points {
            gap: 5px;
        }
    }

    .tour-card-layout.is-list {
        .tour-card {
            display: grid;
            grid-template-columns: 260px 1fr;
            align-items: stretch;
            background: #ffffff;
        }

        .tour-media {
            height: 100%;
            min-height: 226px;
        }

        .tour-body {
            padding: 12px 24px 12px 28px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 210px;
            column-gap: 22px;
            row-gap: 6px;
            align-content: start;
        }

        .tour-name,
        .tour-location,
        .tour-rating,
        .tour-points,
        .tour-desc {
            grid-column: 1;
        }

        .tour-location {
            display: none;
        }

        .tour-name {
            font-size: clamp(17px, 1vw, 26px);
            margin-bottom: 8px;
        }

        .tour-desc {
            position: relative;
            max-width: none;
            margin-bottom: 0;
        }

        .tour-points {
            margin-top: 10px;
            margin-bottom: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px 14px;
            overflow: visible;
            white-space: normal;
            padding-bottom: 0;
        }

        .tour-point {
            font-size: 13px;
            flex-shrink: 0;
            margin-bottom: 0;
        }

        .tour-duration {
            display: none;
        }

        .tour-footer {
            grid-column: 2;
            grid-row: 1 / span 6;
            border-left: 1px solid #dddde1;
            margin-top: 0;
            padding: 18px 16px;
            align-items: center;
            justify-content: center;
            min-height: 100%;

            strong {
                font-size: 28px;
            }
        }

        .tour-btns {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
            width: 100%;

            .tour-btn,
            .tour-add-cart-btn {
                width: 100%;
                justify-content: center;
            }
        }

        .tour-stats {
            display: flex;
        }
    }

    .tour-media {
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    .tour-wishlist {
        position: absolute;
        top: 10px;
        right: 12px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #dbdbe1;
        color: #9f99ab;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
    }

    .tour-badge {
        position: absolute;
        top: 10px;
        left: 0px;
        background: #e29454;
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 8px;
        border-radius: 0px 5px 5px 0px;
    }

    .tour-duration {
        position: absolute;
        left: 10px;
        bottom: 10px;
        background: #ffffff;
        border: 1px solid #41cfbb;
        color: #18aa95;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 700;
        padding: 4px 8px;

        i {
            margin-right: 4px;
        }
    }

    .tour-body {
        padding: 14px;
        display: flex;
        flex-direction: column;
    }

    .tour-name {
        font-size: clamp(15px, 0.95vw, 22px);
        line-height: 1.28;
        margin-bottom: 6px;
        color: #1c032b;
    }

    .tour-location {
        display: none;
    }

    .tour-rating {
        color: #f6b500;
        font-size: 13px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px;

        i {
            margin-right: 1px;
        }
    }

    .tour-desc {
        margin-bottom: 14px;
        color: #494056;
        line-height: 1.62;
        font-size: 14px;
    }

    .tour-points {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 10px;
    }

    .tour-point {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        color: #4e445f;
        line-height: 1.45;

        i {
            color: #e29454;
            font-size: 12px;
            width: 14px;
            text-align: center;
            flex-shrink: 0;
        }

        strong {
            color: #1a0a20;
            font-weight: 800;
        }
    }

    .tour-point.transport span {
        font-weight: 700;
    }

    .tour-type-ribbon {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #ff5a6e;
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
        padding: 3px 10px 3px 8px;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.6;

        i {
            font-size: 10px;
            color: #ffffff;
        }
    }

    .tour-footer {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 12px;

        strong {
            font-size: 22px;
            line-height: 1;
            color: #1a0a20;
        }
    }

    .tour-stats {
        display: flex;
        gap: 6px;
    }

    .tour-stat {
        height: 32px;
        border: 1px solid #e29454;
        border-radius: 7px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 700;
        color: #e29454;

        i {
            font-size: 12px;
        }
    }

    .tour-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        min-width: 88px;
        padding: 0 16px;
        border-radius: 5px;
        background: #e29454;
        color: #ffffff;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
    }

    .tour-add-cart-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 30px;
        min-width: 88px;
        padding: 0 14px;
        border-radius: 5px;
        border: 1.5px solid #e29454;
        background: #ffffff;
        color: #e29454;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;

        i {
            font-size: 13px;
        }

        &:hover {
            background: #e29454;
            color: #ffffff;
        }

        &:focus-visible {
            outline: 2px solid #e29454;
            outline-offset: 2px;
        }
    }

    .tour-pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 8px;

        a {
            min-width: 34px;
            height: 34px;
            border-radius: 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e6e3ee;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            color: #433855;
            background: #ffffff;
            padding: 0px 10px;

            &.is-current {
                background: #e29454;
                border-color: #e29454;
                color: #ffffff;
            }
        }
    }
}




/* ========== TOUR DETAIL PAGE (moved from tour-detail.html) ========== */
        /* ========== TOUR DETAIL LAYOUT ========== */
        .td-page { background: #ffffff; font-family: 'Noto Sans KR', sans-serif; }

        .td-page .td-wrap {
            max-width: 1200px;
            margin: 36px auto 80px;
            padding: 0 24px;
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 32px;
            align-items: start;
        }

        /* ========== MAIN CONTENT ========== */
        .td-page .td-main {}

        /* Hero */
        .td-page .td-hero {
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 28px;
            position: relative;
            box-shadow: 0 4px 24px rgba(0,0,0,.12);
        }
        .td-page .td-hero img {
            width: 100%;
            height: 420px;
            object-fit: cover;
            display: block;
        }
        .td-page .td-hero-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: #e29454;
            color: #fff;
            padding: 6px 16px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
        }
        .td-page .td-hero-duration {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0,0,0,.55);
            backdrop-filter: blur(4px);
            color: #fff;
            padding: 7px 16px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        /* Title block */
        .td-page .td-title-block { margin-bottom: 24px; }
        .td-page .td-title {
            font-size: 26px;
            font-weight: 900;
            color: #1c032b;
            line-height: 1.3;
            margin-bottom: 12px;
        }
        .td-page .td-meta-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 18px;
            font-size: 13px;
            color: #7a6f5e;
            margin-bottom: 14px;
        }
        .td-page .td-meta-row span { display: flex; align-items: center; gap: 6px; }
        .td-page .td-meta-row i { color: #e29454; }
        .td-page .td-stars { display: flex; align-items: center; gap: 3px; }
        .td-page .td-stars i { color: #f5a623; font-size: 13px; }
        .td-page .td-review-count { font-size: 12px; color: #9a8f7e; margin-left: 4px; }

        .td-page .td-desc {
            font-size: 14.5px;
            line-height: 1.8;
            color: #4a3f30;
            margin-bottom: 0;
        }

        /* Section wrapper */
        .td-page .td-section {
            background: #fff;
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,.04);
        }
        .td-page .td-section-title {
            font-size: 16px;
            font-weight: 800;
            color: #1c032b;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f0ebe2;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .td-page .td-section-title i { color: #e29454; }

        /* Include / Exclude */
        .td-page .td-inc-exc-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        .td-page .td-inc-exc-col h4 {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .7px;
            margin-bottom: 14px;
        }
        .td-page .td-inc-exc-col.inc h4 { color: #e29454; }
        .td-page .td-inc-exc-col.exc h4 { color: #1c032b; }
        .td-page .td-inc-exc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
        .td-page .td-inc-exc-list li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 13.5px;
            color: #4a3f30;
            line-height: 1.4;
        }
        .td-page .td-inc-exc-list li i { margin-top: 2px; flex-shrink: 0; font-size: 13px; }
        .td-page .td-inc-exc-col.inc li i { color: #e29454; }
        .td-page .td-inc-exc-col.exc li i { color: #1c032b; }

        /* Tour Plan */
        .td-page .td-plan-list { display: flex; flex-direction: column; border: 1px solid #ede9e0; border-radius: 12px; overflow: hidden; gap: 10px; padding: 10px; }

        /* Main Itinerary Tabs Section (SASS-like parent-child structure) */
        .td-page {
            #main-itinerary {
                margin-top: 28px;

                .td-itinerary-tabs {
                    display: flex;
                    gap: 10px;
                    margin-bottom: 10px;
                    flex-wrap: wrap;

                    .td-itinerary-tab {
                        flex: 1 1 0;
                        background: #faf8f4;
                        border: 1.5px solid #ede9e0;
                        /* border-bottom: none; */
                        border-radius: 2px;
                        padding: 12px 0;
                        font-size: 14px;
                        font-weight: 700;
                        color: #9a8f7e;
                        cursor: pointer;
                        text-align: center;
                        transition: all .18s;
                        outline: none;
                        position: relative;
                        z-index: 1;
                    }
                    .td-itinerary-tab.is-active {
                        background: #e2945433;
                        color: #e29454;
                        border-bottom: 2px solid #fff;
                        z-index: 2;
                    }
                }

                .td-itinerary-content {
                    border: 1.5px solid #ede9e0;
                    border-radius: 0 0 12px 12px;
                    background: #fff;
                    padding: 24px 18px 18px 18px;
                    position: relative;
                    min-height: 120px;

                    .td-itinerary-panel {
                        display: none;
                        animation: fadeInTab 0.3s;

                        h3 {
                            font-size: 17px;
                            font-weight: 800;
                            color: #1c032b;
                            margin-bottom: 10px;
                        }
                        p {
                            font-size: 13.5px;
                            color: #7a6f5e;
                            margin-bottom: 10px;
                        }
                        ul {
                            padding-left: 18px;
                            margin-bottom: 0;
                        }
                        li {
                            font-size: 13px;
                            color: #4a3f30;
                            margin-bottom: 6px;
                            list-style: disc;
                        }
                    }
                    .td-itinerary-panel.is-active {
                        display: block;
                    }
                }
            }
        }

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

        /* Main Itinerary Tabs Section */
        .td-page #main-itinerary {
            margin-top: 28px;
        }
        .td-page .td-itinerary-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 18px;
            flex-wrap: wrap;
        }
        .td-page .td-itinerary-tab {
            flex: 1 1 0;
            background: #faf8f4;
            border: 1.5px solid #ede9e0;
            border-radius: 8px 8px 0 0;
            padding: 12px 0;
            font-size: 14px;
            font-weight: 700;
            color: #9a8f7e;
            cursor: pointer;
            text-align: center;
            transition: all .18s;
            outline: none;
            position: relative;
            z-index: 1;
        }
        .td-page .td-itinerary-tab.is-active {
            background: #fff;
            color: #e29454;
            border-bottom: 2px solid #fff;
            z-index: 2;
        }
        .td-page .td-itinerary-content {
            border: 1.5px solid #ede9e0;
            border-radius: 0 0 12px 12px;
            background: #fff;
            padding: 24px 18px 18px 18px;
            position: relative;
            min-height: 120px;
        }
        .td-page .td-itinerary-panel {
            display: none;
            animation: fadeInTab 0.3s;
        }
        .td-page .td-itinerary-panel.is-active {
            display: block;
        }
        @keyframes fadeInTab {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .td-page .td-itinerary-panel h3 {
            font-size: 17px;
            font-weight: 800;
            color: #1c032b;
            margin-bottom: 10px;
        }
        .td-page .td-itinerary-panel p {
            font-size: 13.5px;
            color: #7a6f5e;
            margin-bottom: 10px;
        }
        .td-page .td-itinerary-panel ul {
            padding-left: 18px;
            margin-bottom: 0;
        }
        .td-page .td-itinerary-panel li {
            font-size: 13px;
            color: #4a3f30;
            margin-bottom: 6px;
            list-style: disc;
        }

        .td-page .td-day-block {}
        .td-page .td-day-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            background: #faf8f4;
            cursor: pointer;
            user-select: none;
            transition: background .18s;
        }
        .td-page .td-day-header:hover { background: #f3ede3; }
        .td-page .td-day-header.is-open { background: #f3ede3; }
        .td-page .td-day-left { display: flex; align-items: center; gap: 14px; }
        .td-page .td-day-label {
            background: #e29454;
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .6px;
            padding: 4px 12px;
            border-radius: 999px;
            white-space: nowrap;
        }
        .td-page .td-day-name { font-size: 14px; font-weight: 700; color: #1c032b; }
        .td-page .td-day-toggle { color: #9a8f7e; font-size: 13px; transition: transform .2s; }
        .td-page .td-day-header.is-open .td-day-toggle { transform: rotate(180deg); }

        .td-page .td-day-body { display: none; padding: 0 24px 24px; background: #fff; }
        .td-page .td-day-body.is-open { display: block; }

        .td-page .td-stop-list { list-style: none; padding: 0; margin: 16px 0 0; }
        .td-page .td-stop-item { display: flex; gap: 18px; position: relative; }
        .td-page .td-stop-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            width: 36px;
        }
        .td-page .td-stop-num {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #e29454;
            color: #fff;
            font-size: 15px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .td-page .td-stop-vline {
            width: 2px;
            flex: 1;
            border-left: 2px dashed #e29454;
            opacity: .3;
            min-height: 20px;
            margin-top: 6px;
        }
        .td-page .td-stop-item:last-child .td-stop-vline { display: none; }
        .td-page .td-stop-info { flex: 1; padding-bottom: 28px; }
        .td-page .td-stop-item:last-child .td-stop-info { padding-bottom: 6px; }
        .td-page .td-stop-header {
            font-size: 13.5px;
            font-weight: 700;
            color: #1c032b;
            margin-bottom: 10px;
            line-height: 1.5;
            padding-top: 6px;
        }
        .td-page .td-stop-time {
            font-size: 12px;
            font-weight: 700;
            color: #e29454;
            margin-right: 4px;
        }
        .td-page .td-stop-desc {
            font-size: 13px;
            line-height: 1.75;
            color: #7a6f5e;
        }

        /* Tour Guide */
        .td-page .td-guide-intro { font-size: 13.5px; color: #7a6f5e; margin-bottom: 16px; line-height: 1.6; }
        .td-page .td-guide-row { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 18px; }
        .td-page .td-guide-col { flex: 1; min-width: 200px; }
        .td-page .td-guide-col-label {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: #9a8f7e;
            margin-bottom: 10px;
        }
        .td-page .td-gender-options { display: flex; gap: 10px; }
        .td-page .td-gender-option input[type="radio"] { display: none; }
        .td-page .td-gender-option {
            flex: 1;
            border: 1.5px solid #e7dfd3;
            border-radius: 10px;
            background: #fff;
            padding: 12px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            text-align: center;
            transition: all .2s;
        }
        .td-page .td-gender-option:hover { border-color: #e29454; box-shadow: 0 4px 14px rgba(226,148,84,.13); }
        .td-page .td-gender-option.is-active { border-color: #e29454; background: #fff8f1; box-shadow: 0 4px 14px rgba(226,148,84,.18); }
        .td-page .td-gender-icon { font-size: 22px; color: #e29454; }
        .td-page .td-gender-name { font-size: 13px; font-weight: 700; color: #1c032b; }
        .td-page .td-gender-sub { font-size: 11px; color: #9a8f7e; }
        .td-page .td-lang-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .td-page .td-lang-option input[type="checkbox"] { display: none; }
        .td-page .td-lang-option {
            border: 1.5px solid #e7dfd3;
            border-radius: 8px;
            background: #fff;
            padding: 8px 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 12.5px;
            font-weight: 600;
            color: #4a3f30;
            transition: all .2s;
            white-space: nowrap;
        }
        .td-page .td-lang-option:hover { border-color: #e29454; }
        .td-page .td-lang-option.is-active { border-color: #e29454; background: #fff8f1; color: #1c032b; }
        .td-page .td-lang-check {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            border: 1.5px solid #ccc;
            background: #fff;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            color: #fff;
            transition: all .2s;
        }
        .td-page .td-lang-option.is-active .td-lang-check { background: #e29454; border-color: #e29454; }
        .td-page .td-guide-summary {
            margin-top: 14px;
            padding: 12px 16px;
            background: #faf8f4;
            border-radius: 10px;
            border: 1px solid #ede9e0;
            font-size: 13px;
            color: #4a3f30;
            line-height: 1.6;
            display: none;
        }
        .td-page .td-guide-summary.has-selection { display: block; }
        .td-page .td-guide-summary strong { color: #e29454; }

        /* Transportation */
        .td-page .td-transport-intro {
            font-size: 13.5px;
            color: #7a6f5e;
            margin-bottom: 14px;
            line-height: 1.6;
        }
        .td-page .td-vehicle-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }
        .td-page .td-vehicle-option input[type="radio"] { display: none; }
        .td-page .td-vehicle-option {
            border: 1px solid #e7dfd3;
            border-radius: 10px;
            background: #fff;
            padding: 10px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            text-align: center;
            transition: all .2s;
            min-height: 88px;
        }
        .td-page .td-vehicle-option:hover {
            border-color: #e29454;
            box-shadow: 0 4px 14px rgba(226,148,84,.15);
        }
        .td-page .td-vehicle-option.is-active {
            border-color: #e29454;
            background: #fff8f1;
            box-shadow: 0 4px 14px rgba(226,148,84,.2);
        }
        .td-page .td-vehicle-icon { font-size: 20px; color: #e29454; }
        .td-page .td-vehicle-name {
            font-size: 12.5px;
            color: #1c032b;
            font-weight: 700;
            line-height: 1.2;
        }
        .td-page .td-vehicle-sub {
            font-size: 11px;
            color: #9a8f7e;
            font-weight: 600;
            line-height: 1.2;
        }
        .td-page .td-transport-table-wrap {
            border: 1px solid #ede9e0;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 8px;
            overflow-x: auto;
        }
        .td-page .td-transport-selected {
            background: #faf8f4;
            border-bottom: 1px solid #ede9e0;
            padding: 12px 14px;
            font-size: 13px;
            color: #4a3f30;
            font-weight: 700;
        }
        .td-page .td-transport-selected span { color: #e29454; }
        .td-page .td-transport-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 520px;
            background: #fff;
        }
        .td-page .td-transport-table th,
        .td-page .td-transport-table td {
            font-size: 12.5px;
            line-height: 1.5;
            padding: 10px 12px;
            border-bottom: 1px solid #f1ece3;
            text-align: left;
            vertical-align: top;
        }
        .td-page .td-transport-table th {
            width: 34%;
            color: #1c032b;
            font-weight: 700;
            background: #fffdfa;
        }
        .td-page .td-transport-table tr:last-child th,
        .td-page .td-transport-table tr:last-child td { border-bottom: 0; }

        /* Optional Add-ons */
        .td-page .td-plan-subtitle {
            margin-top: 24px;
            margin-bottom: 8px;
            font-size: 18px;
            color: #1c032b;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .td-page .td-plan-subtitle i { color: #e29454; }
        .td-page .td-addons-intro { font-size: 13.5px; color: #7a6f5e; margin-bottom: 18px; line-height: 1.6; }
        .td-page .td-addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .td-page .td-addon-card.is-hidden { display: none; }
        .td-page .td-addon-card {
            border: 2px solid #ede9e0;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: border-color .2s, box-shadow .2s;
            position: relative;
            background: #fff;
        }
        .td-page .td-addon-card:hover { border-color: #e29454; box-shadow: 0 4px 14px rgba(226,148,84,.15); }
        .td-page .td-addon-card.is-selected { border-color: #e29454; box-shadow: 0 4px 14px rgba(226,148,84,.2); }
        .td-page .td-addon-card input[type="checkbox"] { display: none; }
        .td-page .td-addon-check {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #e29454;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #fff;
            transition: background .2s;
            z-index: 2;
        }
        .td-page .td-addon-card.is-selected .td-addon-check { background: #e29454; }
        .td-page .td-addon-img { width: 100%; height: 110px; object-fit: cover; display: block; }
        .td-page .td-addon-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,.5);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 999px;
            letter-spacing: .4px;
        }
        .td-page .td-addon-body { padding: 12px; }
        .td-page .td-addon-name { font-size: 12.5px; font-weight: 700; color: #1c032b; line-height: 1.4; margin-bottom: 6px; }
        .td-page .td-addon-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #9a8f7e; }
        .td-page .td-addon-location { display: flex; align-items: center; gap: 4px; }
        .td-page .td-addon-price { font-weight: 800; color: #e29454; font-size: 13px; white-space: nowrap; }
        .td-page .td-addon-price::after {
            content: " / person";
            font-size: 11px;
            font-weight: 600;
            color: #9a8f7e;
        }
        .td-page .td-addon-summary {
            margin-top: 18px;
            padding: 14px 18px;
            background: #faf8f4;
            border-radius: 10px;
            border: 1px solid #ede9e0;
            font-size: 13px;
            color: #4a3f30;
            display: none;
        }
        .td-page .td-addon-summary.has-selection { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
        .td-page .td-addon-summary-text { font-weight: 600; }
        .td-page .td-addon-summary-total { font-weight: 800; color: #e29454; font-size: 14px; }
        .td-page .td-addon-actions { margin-top: 14px; display: flex; justify-content: center; }
        .td-page .td-custom-itinerary {
            margin-top: 18px;
            padding: 14px;
            background: #faf8f4;
            border: 1px solid #ede9e0;
            border-radius: 10px;
        }
        .td-page .td-custom-itinerary-title {
            font-size: 14px;
            font-weight: 800;
            color: #1c032b;
            margin-bottom: 6px;
        }
        .td-page .td-custom-itinerary-note {
            font-size: 12.5px;
            color: #7a6f5e;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        .td-page .td-custom-itinerary-textarea {
            width: 100%;
            min-height: 120px;
            resize: vertical;
            border: 1px solid #e2d9cc;
            border-radius: 8px;
            background: #fff;
            color: #1c032b;
            font-size: 13px;
            line-height: 1.6;
            padding: 11px 12px;
            font-family: inherit;
            outline: none;
        }
        .td-page .td-custom-itinerary-textarea:focus {
            border-color: #e29454;
            box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.12);
        }
        .td-page .td-load-more-btn {
            border: 1px solid #e29454;
            background: #fff;
            color: #e29454;
            font-size: 13px;
            font-weight: 700;
            border-radius: 999px;
            padding: 9px 18px;
            cursor: pointer;
            transition: all .2s;
        }
        .td-page .td-load-more-btn:hover { background: #e29454; color: #fff; }

        /* Related Tours */
        .td-page .td-related-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .td-page .td-related-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,.06);
            transition: transform .2s, box-shadow .2s;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
        }
        .td-page .td-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
        .td-page .td-related-img { width: 100%; height: 140px; object-fit: cover; display: block; flex-shrink: 0; }
        .td-page .td-related-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
        .td-page .td-related-location { font-size: 11.5px; color: #e29454; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
        .td-page .td-related-name { font-size: 13.5px; font-weight: 700; color: #1c032b; line-height: 1.4; margin-bottom: 8px; }
        .td-page .td-related-desc { font-size: 12px; color: #9a8f7e; line-height: 1.5; margin-bottom: 10px; flex: 1; }
        .td-page .td-related-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
        .td-page .td-related-price { font-size: 14px; font-weight: 800; color: #1c032b; }
        .td-page .td-related-btn {
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            background: #e29454;
            padding: 5px 12px;
            border-radius: 6px;
            text-decoration: none;
            transition: background .18s;
        }
        .td-page .td-related-btn:hover { background: #c97d3e; }

        /* ========== SIDEBAR ========== */
        .td-page .td-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }

        .td-page .td-sidebar-card {
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,.07);
        }

        /* Map */
        .td-page .td-map-view { position: relative; }
        .td-page .td-map-view iframe { width: 100%; height: 220px; border: none; display: block; }
        /* Booking form */
        .td-page .td-booking-form { padding: 22px 16px; }
        .td-page .td-form-group { margin-bottom: 16px; }
        .td-page .td-form-label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .8px;
            color: #9a8f7e;
            margin-bottom: 7px;
        }
        .td-page .td-form-input {
            width: 100%;
            padding: 11px 14px;
            border: 1.5px solid #ede9e0;
            border-radius: 9px;
            font-size: 14px;
            color: #1c032b;
            font-family: inherit;
            background: #faf8f4;
            transition: border-color .2s, box-shadow .2s;
            cursor: pointer;
        }
        .td-page .td-form-input:focus {
            outline: none;
            border-color: #e29454;
            box-shadow: 0 0 0 3px rgba(226,148,84,.12);
            background: #fff;
        }
        .td-page .td-form-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

        /* Booking summary */
        .td-page .td-summary { border-top: 1px solid #f0ebe2; padding: 20px 16px; }
        .td-page .td-summary-title {
            font-size: 13px;
            font-weight: 800;
            color: #1c032b;
            text-transform: uppercase;
            letter-spacing: .7px;
            margin-bottom: 16px;
        }
        .td-page .td-summary-name {
            font-size: 13.5px;
            font-weight: 700;
            color: #1c032b;
            margin-bottom: 14px;
            line-height: 1.4;
        }
        .td-page .td-summary-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
        .td-page .td-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
        }
        .td-page .td-summary-row .lbl { color: #9a8f7e; }
        .td-page .td-summary-row .val { font-weight: 700; color: #1c032b; }
        .td-page .td-summary-divider { border: none; border-top: 1px dashed #ede9e0; margin: 12px 0; }
        .td-page .td-summary-total {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
            font-weight: 800;
            color: #1c032b;
            margin-bottom: 18px;
        }
        .td-page .td-summary-total .price { color: #e29454; }
        .td-page .td-book-btn {
            display: block;
            width: 100%;
            padding: 14px;
            background: #e29454;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            transition: background .2s;
        }
        .td-page .td-book-btn:hover { background: #c97d3e; }
        .td-page .td-sum-section-label {
            font-size: 11px;
            font-weight: 700;
            color: #9a8f7e;
            text-transform: uppercase;
            letter-spacing: .6px;
            margin-bottom: 8px;
        }
        .td-page .td-sum-empty {
            font-size: 12.5px;
            color: #c0b8ab;
            font-style: italic;
        }
        .td-page .td-sum-addon-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            font-size: 12.5px;
            gap: 8px;
            line-height: 1.4;
        }
        .td-page .td-sum-addon-item .name { color: #4a3f52; font-weight: 500; flex: 1; }
        .td-page .td-sum-addon-item .price-tag { color: #e29454; font-weight: 700; white-space: nowrap; }
        .td-page .td-sum-addon-total-row { margin-top: 2px; }
        .td-page .td-coupon-wrap { margin: 12px 0 14px; }
        .td-page .td-coupon-input-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .td-page .td-coupon-input {
            flex: 1;
            min-width: 0;
            height: 38px;
            border: 1px solid #e7dccf;
            border-radius: 8px;
            background: #fff;
            padding: 0 10px;
            font-size: 12.5px;
            color: #1c032b;
            font-family: inherit;
        }
        .td-page .td-coupon-input:focus {
            outline: none;
            border-color: #e29454;
            box-shadow: 0 0 0 3px rgba(226,148,84,.12);
        }
        .td-page .td-coupon-btn {
            height: 38px;
            border: none;
            border-radius: 8px;
            background: #1c032b;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .3px;
            padding: 0 12px;
            cursor: pointer;
            font-family: inherit;
            transition: background .2s;
        }
        .td-page .td-coupon-btn:hover { background: #31134a; }
        .td-page .td-coupon-status {
            margin-top: 7px;
            font-size: 11.5px;
            color: #9a8f7e;
            min-height: 16px;
        }
        .td-page .td-coupon-status.is-success { color: #2f8a57; }
        .td-page .td-coupon-status.is-error { color: #c15a5a; }

        /* Last Minute Deals */
        .td-page .td-deals-card { padding: 20px 16px; }
        .td-page .td-deals-title {
            font-size: 13px;
            font-weight: 800;
            color: #1c032b;
            text-transform: uppercase;
            letter-spacing: .7px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0ebe2;
        }
        .td-page .td-deal-list { display: flex; flex-direction: column; gap: 12px; }
        .td-page .td-deal-item { display: flex; align-items: flex-start; gap: 12px; }
        .td-page .td-deal-thumb { width: 60px; height: 60px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
        .td-page .td-deal-info { flex: 1; }
        .td-page .td-deal-name {
            font-size: 12.5px;
            font-weight: 700;
            color: #1c032b;
            line-height: 1.4;
            margin-bottom: 3px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .td-page .td-deal-desc {
            font-size: 11.5px;
            color: #9a8f7e;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Other Destinations */
        .td-page .td-dest-card { padding: 20px 16px; }
        .td-page .td-dest-title {
            font-size: 13px;
            font-weight: 800;
            color: #1c032b;
            text-transform: uppercase;
            letter-spacing: .7px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0ebe2;
        }
        .td-page .td-dest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .td-page .td-dest-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            height: 100px;
        }
        .td-page .td-dest-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .td-page .td-dest-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(28,3,43,.65) 0%, transparent 60%);
        }
        .td-page .td-dest-name {
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: 13px;
            font-weight: 800;
            color: #fff;
            line-height: 1.2;
        }
        .td-page .td-dest-sub { font-size: 10px; opacity: .8; font-weight: 500; }

/* ========== END TOUR DETAIL PAGE ========== */

/* ========== ADD TO CART PAGE ========== */
.cart-page {
    header .navbar {
        background: #ffffff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    header .navbar .navbar-container .menu .link,
    header .navbar .navbar-container .menu .link:visited {
        color: #1c032b;
    }

    header .navbar .navbar-container .menu .link:hover,
    header .navbar .navbar-container .menu .link.active {
        color: #e29454;
    }

    header .navbar .navbar-container .menu .language-dropdown .selected-lang,
    header .navbar .navbar-container .menu .nav-cart-link,
    header .navbar .navbar-container .menu .nav-auth-btn {
        color: #1c032b;
    }

    .page-breadcrumb-bar {
        background: #ffffff;
    }

    .cart-page-main {
        padding: 48px 20px 96px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .cart-page-title {
        font-size: clamp(26px, 3vw, 38px);
        font-weight: 900;
        color: #1a0a20;
        margin-bottom: 32px;

        span {
            color: #e29454;
        }
    }

    .cart-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 28px;
        align-items: start;
    }

    .cart-empty {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 20px;
        text-align: center;
        grid-column: 1 / -1;

        &.is-visible {
            display: flex;
        }

        h2 {
            font-size: 24px;
            font-weight: 800;
            color: #1a0a20;
            margin-bottom: 10px;
        }

        p {
            font-size: 15px;
            color: #6b6479;
            margin-bottom: 26px;
        }
    }

    .cart-empty-icon {
        font-size: 64px;
        color: #e0dcea;
        margin-bottom: 20px;
    }

    .cart-empty-btn {
        display: inline-block;
        background: #e29454;
        color: #1a0a20;
        padding: 12px 34px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;

        &:hover {
            background: #c97d3e;
            transform: translateY(-2px);
        }
    }

    .cart-items-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #cart-items-dynamic {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cart-quick-add {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 6px;
    }

    .cart-quick-add-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #dddbe5;
        border-radius: 8px;
        padding: 10px 14px;
        background: #f7f5fc;
        color: #1a0a20;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        transition: all 0.2s ease;

        &:hover {
            border-color: #e29454;
            color: #e29454;
            background: #fff;
        }
    }

    .cart-item {
        display: grid;
        grid-template-columns: 120px 1fr auto;
        gap: 16px;
        align-items: start;
        background: #ffffff;
        border: 1px solid #ebeaf0;
        border-radius: 14px;
        padding: 16px;
    }

    .cart-item-img {
        width: 120px;
        height: 90px;
        border-radius: 8px;
        object-fit: cover;
        display: block;
        flex-shrink: 0;
    }

    .cart-item-body {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cart-item-name {
        font-size: 17px;
        font-weight: 800;
        color: #1a0a20;
        margin: 0;
    }

    .cart-item-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 13px;
        color: #6b6479;

        span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        i {
            color: #e29454;
        }
    }

    .cart-item-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
    }

    .cart-item-price {
        font-size: 22px;
        font-weight: 900;
        color: #1a0a20;
        white-space: nowrap;
    }

    .cart-item-remove {
        background: none;
        border: none;
        color: #b0abc0;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0;
        transition: color 0.2s;

        &:hover {
            color: #c0392b;
        }
    }

    .cart-summary {
        background: #ffffff;
        border: 1px solid #ebeaf0;
        border-radius: 14px;
        padding: 24px 22px;
        position: sticky;
        top: 112px;

        h2 {
            font-size: 20px;
            font-weight: 900;
            color: #1a0a20;
            margin-bottom: 20px;
        }
    }

    .cart-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #4a4459;
        padding: 9px 0;
        border-bottom: 1px solid #f1eff7;

        &:last-of-type {
            border-bottom: none;
        }

        &.total {
            font-size: 18px;
            font-weight: 900;
            color: #1a0a20;
            padding-top: 16px;
            margin-top: 4px;
            border-top: 2px solid #ebeaf0;

            span:last-child {
                color: #e29454;
            }
        }
    }

    .cart-promo {
        display: flex;
        gap: 8px;
        margin: 18px 0;

        input {
            flex: 1;
            border: 1px solid #dddbe5;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 14px;
            color: #1c032b;
            outline: none;
            transition: border-color 0.2s;

            &:focus {
                border-color: #e29454;
            }
        }

        button {
            background: #1a0a20;
            color: #ffffff;
            border: none;
            border-radius: 8px;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.2s;

            &:hover {
                background: #2e1040;
            }
        }
    }

    .cart-checkout-btn {
        display: block;
        width: 100%;
        background: #e29454;
        color: #1a0a20;
        border: none;
        border-radius: 10px;
        padding: 14px;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;
        margin-top: 4px;

        &:hover {
            background: #c97d3e;
            transform: translateY(-2px);
        }
    }

    .cart-continue-link {
        display: block;
        text-align: center;
        font-size: 13px;
        color: #7a7090;
        margin-top: 12px;
        text-decoration: none;
        transition: color 0.2s;

        &:hover {
            color: #e29454;
        }
    }
}

@media (max-width: 960px) {
    .cart-page {
        .cart-layout {
            grid-template-columns: 1fr;
        }

        .cart-summary {
            position: static;
        }
    }
}

@media (max-width: 600px) {
    .cart-page {
        .cart-item {
            grid-template-columns: 90px 1fr;
            grid-template-rows: auto auto;
        }

        .cart-item-img {
            width: 90px;
            height: 70px;
        }

        .cart-item-actions {
            grid-column: 1 / -1;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }
}

@media (max-width: 479px) {
    .cart-page {
        .cart-page-main {
            padding: 28px 14px 72px;
        }
    }
}

/* ========== CHECKOUT PAGE ========== */
.checkout-page {
    /* Steps indicator */
    .checkout-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 36px 20px 0;
        max-width: 500px;
        margin: 0 auto;
    }

    .checkout-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .step-circle {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        background: #e8e0ef;
        color: #9e8aaf;
        transition: background 0.2s, color 0.2s;
    }

    .checkout-step.active .step-circle {
        background: #1c032b;
        color: #fff;
    }

    .checkout-step.completed .step-circle {
        background: #e29454;
        color: #fff;
    }

    .step-label {
        font-size: 12px;
        font-weight: 600;
        color: #9e8aaf;
        white-space: nowrap;
    }

    .checkout-step.active .step-label {
        color: #1c032b;
    }

    .checkout-step.completed .step-label {
        color: #e29454;
    }

    .checkout-step-line {
        flex: 1;
        height: 2px;
        background: #e8e0ef;
        margin-bottom: 22px;
        min-width: 48px;
        max-width: 100px;
    }

    .checkout-step-line.completed {
        background: #e29454;
    }

    /* Layout */
    .checkout-main {
        padding: 0 20px 96px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .checkout-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 32px;
        margin-top: 40px;
        align-items: start;
    }

    /* Section cards */
    .checkout-section {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #ede9f3;
        padding: 28px 28px 24px;
        margin-bottom: 20px;
    }

    .checkout-section-title {
        font-size: 17px;
        font-weight: 700;
        color: #1c032b;
        margin: 0 0 22px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #1c032b;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Form grid */
    .checkout-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        font-size: 13px;
        font-weight: 600;
        color: #4a3358;
    }

    .required {
        color: #e74c3c;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 14px;
        border: 1.5px solid #ddd6e8;
        border-radius: 10px;
        font-size: 14px;
        font-family: inherit;
        color: #1c032b;
        background: #faf9fc;
        transition: border-color 0.2s, box-shadow 0.2s;
        outline: none;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #1c032b;
        box-shadow: 0 0 0 3px rgba(28, 3, 43, 0.08);
        background: #fff;
    }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
    }

    /* Phone input */
    .phone-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }

    .phone-prefix {
        position: absolute;
        left: 12px;
        color: #9e8aaf;
        font-size: 13px;
        pointer-events: none;
    }

    .phone-input-wrap input {
        padding-left: 32px;
        width: 100%;
    }

    /* Select wrap */
    .select-wrap {
        position: relative;
    }

    .select-wrap select {
        width: 100%;
        appearance: none;
        cursor: pointer;
    }

    .select-arrow {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #9e8aaf;
        font-size: 12px;
        pointer-events: none;
    }

    select:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .geo-text-input {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid #ddd6e8;
        border-radius: 10px;
        font-size: 14px;
        font-family: inherit;
        color: #1c032b;
        background: #faf9fc;
        transition: border-color 0.2s, box-shadow 0.2s;
        outline: none;
    }

    .geo-text-input:focus {
        border-color: #1c032b;
        box-shadow: 0 0 0 3px rgba(28, 3, 43, 0.08);
        background: #fff;
    }

    /* Qty control */
    .qty-control {
        display: flex;
        align-items: center;
        border: 1.5px solid #ddd6e8;
        border-radius: 10px;
        overflow: hidden;
        background: #faf9fc;
    }

    .qty-btn {
        width: 38px;
        height: 40px;
        border: 0;
        background: transparent;
        color: #1c032b;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
    }

    .qty-btn:hover {
        background: #ede9f3;
    }

    .qty-control input[type="number"] {
        flex: 1;
        border: 0;
        border-left: 1.5px solid #ddd6e8;
        border-right: 1.5px solid #ddd6e8;
        border-radius: 0;
        text-align: center;
        font-weight: 700;
        font-size: 15px;
        background: transparent;
        padding: 0;
        height: 40px;
        -moz-appearance: textfield;
    }

    .qty-control input[type="number"]::-webkit-inner-spin-button,
    .qty-control input[type="number"]::-webkit-outer-spin-button {
        appearance: none;
    }

    .qty-control input:focus {
        box-shadow: none;
        border-color: #ddd6e8;
    }

    /* Payment methods */
    .payment-methods {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

    .payment-method-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border: 1.5px solid #ddd6e8;
        border-radius: 10px;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
        user-select: none;
    }

    .payment-method-option:has(input:checked) {
        border-color: #1c032b;
        background: #f9f6ff;
    }

    .payment-method-option input[type="radio"] {
        width: 16px;
        height: 16px;
        accent-color: #1c032b;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .method-icon {
        font-size: 18px;
        color: #1c032b;
        width: 22px;
        text-align: center;
    }

    .method-label {
        font-size: 14px;
        font-weight: 600;
        color: #1c032b;
        flex: 1;
    }

    .method-brands {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .method-brands img {
        opacity: 0.85;
    }

    /* Payment panels */
    .payment-panel {
        margin-top: 4px;
    }

    .payment-panel.hidden {
        display: none;
    }

    /* Card input */
    .card-input-wrap {
        position: relative;
    }

    .card-icon {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #9e8aaf;
        font-size: 14px;
        pointer-events: none;
    }

    .card-input-wrap input {
        padding-left: 36px;
        width: 100%;
    }

    .cvv-help {
        background: none;
        border: none;
        padding: 0 0 0 4px;
        cursor: pointer;
        color: #9e8aaf;
        font-size: 13px;
        vertical-align: middle;
    }

    .cvv-help:hover {
        color: #1c032b;
    }

    .secure-note {
        font-size: 12px;
        color: #7a6888;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 14px;
        padding: 10px 14px;
        background: #f0faf4;
        border-radius: 8px;
    }

    .secure-note i {
        color: #e29454;
    }

    /* PayPal panel */
    .paypal-info {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 18px;
        background: #f0f8ff;
        border-radius: 10px;
        color: #003087;
        font-size: 14px;
    }

    .paypal-info i {
        font-size: 28px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* Bank info */
    .bank-info {
        padding: 18px;
        background: #faf9fc;
        border-radius: 10px;
        font-size: 14px;
        color: #4a3358;
    }

    .bank-details {
        list-style: none;
        padding: 12px 0 4px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .bank-details li strong {
        color: #1c032b;
        margin-right: 4px;
    }

    .bank-note {
        font-size: 12px;
        color: #7a6888;
        margin-top: 10px;
    }

    /* Submit row */
    .checkout-submit-row {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .terms-check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: #4a3358;
        cursor: pointer;
        line-height: 1.5;
    }

    .terms-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 2px;
        accent-color: #1c032b;
        cursor: pointer;
    }

    .terms-check a {
        color: #e29454;
        text-decoration: underline;
    }

    .place-order-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px;
        background: #1c032b;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        font-family: inherit;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.2s, transform 0.15s;
    }

    .place-order-btn:hover:not(:disabled) {
        background: #e29454;
        transform: translateY(-1px);
    }

    .place-order-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .back-to-cart-link {
        text-align: center;
        font-size: 13px;
        color: #9e8aaf;
        text-decoration: none;
    }

    .back-to-cart-link:hover {
        color: #1c032b;
    }

    /* Summary sidebar */
    .checkout-summary {
        position: sticky;
        top: 110px;
    }

    .checkout-summary-inner {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #ede9f3;
        padding: 24px;
    }

    .checkout-summary-title {
        font-size: 17px;
        font-weight: 700;
        color: #1c032b;
        margin: 0 0 18px;
    }

    .checkout-summary-items {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 6px;
    }

    .co-summary-item {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .co-item-img {
        width: 58px;
        height: 44px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .co-item-info {
        flex: 1;
        min-width: 0;
    }

    .co-item-name {
        font-size: 13px;
        font-weight: 600;
        color: #1c032b;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    .co-item-meta {
        font-size: 11px;
        color: #9e8aaf;
        display: flex;
        gap: 8px;
        margin: 0;
    }

    .co-item-meta span {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .co-item-price {
        font-size: 14px;
        font-weight: 700;
        color: #1c032b;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .co-empty-note {
        font-size: 13px;
        color: #9e8aaf;
    }

    .co-empty-note a {
        color: #e29454;
    }

    .checkout-summary-divider {
        height: 1px;
        background: #ede9f3;
        margin: 14px 0;
    }

    .checkout-summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #4a3358;
        padding: 3px 0;
    }

    .checkout-summary-row.total {
        font-size: 17px;
        font-weight: 700;
        color: #1c032b;
        padding-top: 6px;
    }

    /* Trust badges */
    .checkout-trust-badges {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid #ede9f3;
    }

    .trust-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        color: #7a6888;
    }

    .trust-badge i {
        color: #1c032b;
        font-size: 14px;
        width: 16px;
    }

    /* Error toast */
    #checkout-toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: #c0392b;
        color: #fff;
        padding: 12px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s, transform 0.25s;
        max-width: 90vw;
        text-align: center;
    }

    #checkout-toast.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 900px) {
    .checkout-page {
        .checkout-layout {
            grid-template-columns: 1fr;
        }

        .checkout-summary {
            position: static;
            order: -1;
        }
    }
}

@media (max-width: 600px) {
    .checkout-page {
        .checkout-section {
            padding: 20px 16px;
        }

        .checkout-form-grid {
            grid-template-columns: 1fr;
        }

        .form-group.full-width {
            grid-column: auto;
        }

        .checkout-steps {
            padding-top: 24px;
        }

        .checkout-step-line {
            min-width: 28px;
        }
    }
}

/* ========== END CHECKOUT PAGE ========== */

/* ========== CONFIRMATION PAGE ========== */
.confirmation-page {
    /* Steps base layout */
    .checkout-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 36px 20px;
        max-width: 500px;
        margin: 0 auto;
    }

    .checkout-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .step-circle {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        background: #e8e0ef;
        color: #9e8aaf;
        transition: background 0.2s, color 0.2s;
    }

    .step-label {
        font-size: 12px;
        font-weight: 600;
        color: #9e8aaf;
        white-space: nowrap;
    }

    .checkout-step-line {
        flex: 1;
        height: 2px;
        background: #e8e0ef;
        margin-bottom: 22px;
        min-width: 48px;
        max-width: 100px;
    }

    /* Steps colors */
    .checkout-step.completed .step-circle {
        background: #e29454;
        color: #fff;
    }

    .checkout-step.completed .step-label {
        color: #e29454;
    }

    .checkout-step-line.completed {
        background: #e29454;
    }

    .checkout-step.active .step-circle {
        background: #e29454;
        color: #fff;
    }

    .checkout-step.active .step-label {
        color: #e29454;
    }

    /* Hero banner */
    .confirm-hero {
        background: linear-gradient(135deg, #1c032b 0%, #3a0a52 60%, #e29454 100%);
        padding: 60px 20px 50px;
        text-align: center;
        color: #fff;
    }

    .confirm-hero-inner {
        max-width: 680px;
        margin: 0 auto;
    }

    .confirm-checkmark {
        font-size: 72px;
        color: #e29454;
        margin-bottom: 16px;
        filter: drop-shadow(0 0 24px rgba(39, 174, 96, 0.5));
        animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .confirm-title {
        font-size: 2.4rem;
        font-weight: 700;
        margin: 0 0 10px;
        color: #fff;
    }

    .confirm-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.85);
        margin: 0 0 18px;
    }

    .confirm-ref {
        display: inline-block;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        padding: 8px 20px;
        font-size: 1rem;
        margin-bottom: 12px;
        letter-spacing: 0.03em;
    }

    .confirm-email-note {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.75);
        margin: 0;
    }

    /* Layout */
    .confirm-layout {
        max-width: 860px;
        margin: 40px auto 0;
        padding: 0 20px 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* Cards */
    .confirm-card {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
        padding: 28px 32px;
    }

    .confirm-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #1c032b;
        margin: 0 0 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid #f0eaf5;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .confirm-card-title i {
        color: #e29454;
    }

    /* Order items */
    .confirm-items {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 20px;
    }

    .confirm-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid #f5f0f9;
    }

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

    .confirm-item-img {
        width: 72px;
        height: 56px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .confirm-item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .confirm-item-name {
        font-weight: 600;
        color: #1c032b;
        font-size: 0.95rem;
    }

    .confirm-item-meta {
        font-size: 0.82rem;
        color: #888;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .confirm-item-price {
        font-weight: 700;
        color: #1c032b;
        font-size: 1rem;
        white-space: nowrap;
    }

    .confirm-no-items {
        color: #999;
        font-style: italic;
    }

    /* Totals */
    .confirm-totals {
        border-top: 2px solid #f0eaf5;
        padding-top: 14px;
    }

    .confirm-total-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.92rem;
        color: #555;
        padding: 5px 0;
    }

    .confirm-total-row.discount span:last-child {
        color: #e29454;
        font-weight: 600;
    }

    .confirm-total-row.total {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1c032b;
        border-top: 1px solid #e0d7ec;
        margin-top: 8px;
        padding-top: 10px;
    }

    /* Contact details grid */
    .confirm-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 24px;
    }

    .confirm-detail-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .confirm-detail-label {
        font-size: 0.78rem;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .confirm-detail-value {
        font-size: 0.95rem;
        color: #1c032b;
        font-weight: 500;
    }

    /* Payment */
    .confirm-pay-method {
        font-size: 1.05rem;
        color: #1c032b;
        font-weight: 500;
        margin: 0;
    }

    /* Next steps */
    .next-steps-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
        counter-reset: ns;
    }

    .next-steps-list li {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .ns-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f5eeff;
        color: #7c3aed;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .next-steps-list li > div strong {
        display: block;
        font-size: 0.95rem;
        color: #1c032b;
        margin-bottom: 3px;
    }

    .next-steps-list li > div p {
        margin: 0;
        font-size: 0.87rem;
        color: #666;
        line-height: 1.5;
    }

    /* CTA row */
    .confirm-cta-row {
        max-width: 860px;
        margin: 0 auto 60px;
        padding: 0 20px;
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .confirm-cta-row .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 13px 26px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
        border: none;
    }

    .confirm-cta-row .btn:hover {
        opacity: 0.88;
        transform: translateY(-1px);
    }

    .confirm-btn-tours {
        background: #e29454;
        color: #fff;
    }

    .confirm-btn-home,
    .confirm-btn-print {
        background: #fff;
        color: #1c032b;
        border: 2px solid #1c032b !important;
    }

    .confirm-btn-print {
        cursor: pointer;
        font-family: inherit;
    }
}

@keyframes pop-in {
    from {
        transform: scale(0.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media print {
    .confirmation-page {
        header,
        footer,
        .checkout-steps,
        .confirm-cta-row,
        #scroll-top-btn,
        .whatsapp-chat,
        #page-loader {
            display: none !important;
        }

        .confirm-hero {
            background: #1c032b !important;
            -webkit-print-color-adjust: exact;
        }

        .confirm-layout {
            max-width: 100%;
            padding: 0;
        }

        .confirm-card {
            box-shadow: none;
            border: 1px solid #ddd;
        }
    }
}

@media (max-width: 600px) {
    .confirmation-page {
        .confirm-title {
            font-size: 1.8rem;
        }

        .confirm-checkmark {
            font-size: 54px;
        }

        .confirm-card {
            padding: 20px 18px;
        }

        .confirm-details-grid {
            grid-template-columns: 1fr;
        }

        .confirm-item-img {
            width: 56px;
            height: 44px;
        }
    }
}

/* ========== END CONFIRMATION PAGE ========== */


/* ==========================================================================
   ACTIVITY DETAIL PAGE  (activity-detail.html)
   ========================================================================== */

.activity-detail-page {

    /* ── Photo Gallery ──────────────────────────────────────────── */
    .activity-gallery-section {
        padding: 40px 20px 20px;
        margin-top: 20px;
        border-radius: 15px;
        background: #ffffff;
    }

    .activity-gallery-header {
        text-align: center;
        margin-bottom: 36px;
        h2 {
            font-size: 1.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #1a1a1a;
            margin: 0 0 10px;
        }

        p {
            color: #666;
            font-size: 1rem;
            margin: 0;
        }
    }

    .activity-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
        max-width: 1200px;
        margin: 0 auto;

        img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.25s, box-shadow 0.25s;
            display: block;

            &:hover {
                transform: scale(1.04);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
            }
        }
    }

    /* ── Lightbox ───────────────────────────────────────────────── */
    .gallery-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.93);
        z-index: 9999;
        align-items: center;
        justify-content: center;

        &.active {
            display: flex;
        }
    }

    .gallery-lb-img {
        max-width: 90vw;
        max-height: 85vh;
        object-fit: contain;
        border-radius: 6px;
        user-select: none;
    }

    .gallery-lb-close {
        position: absolute;
        top: 16px;
        right: 24px;
        font-size: 2.4rem;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        line-height: 1;
        padding: 4px;
        opacity: 0.85;

        &:hover {
            opacity: 1;
        }
    }

    .gallery-lb-prev,
    .gallery-lb-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.8rem;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border: none;
        cursor: pointer;
        padding: 14px 18px;
        border-radius: 6px;
        transition: background 0.2s;
        user-select: none;

        &:hover {
            background: rgba(255, 255, 255, 0.28);
        }
    }

    .gallery-lb-prev {
        left: 16px;
    }

    .gallery-lb-next {
        right: 16px;
    }

    .gallery-lb-counter {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        pointer-events: none;
    }

    /* ── Itinerary-focused content layout ──────────────────────── */

    .activity-content-col {
        .itinerary-board {
            border: 1px solid rgba(226, 148, 84, 0.24);
            background:
                radial-gradient(circle at top right, rgba(226, 148, 84, 0.18), rgba(226, 148, 84, 0) 42%),
                linear-gradient(135deg, #fffdfb 0%, #fff8f2 100%);
            border-radius: 18px;
            padding: 24px;
        }

        .itinerary-board-head {
            margin-bottom: 18px;

            h2 {
                color: #1a0a20;
                margin: 10px 0 10px;
                font-size: 1.45rem;
                letter-spacing: 0.01em;
            }

            p {
                margin: 0;
                color: rgba(26, 10, 32, 0.72);
                line-height: 1.75;
                font-size: 1rem;
            }
        }

        .itinerary-kicker {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 999px;
            background: rgba(26, 10, 32, 0.9);
            color: #f8d6bf;
            font-size: 0.76rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .itinerary-columns {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 16px;
        }

        .itinerary-lane {
            border-radius: 14px;
            border: 1px solid rgba(26, 10, 32, 0.1);
            background: rgba(255, 255, 255, 0.76);
            padding: 14px;

            h3 {
                margin: 0 0 10px;
                color: #1a0a20;
                font-size: 0.96rem;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                display: inline-flex;
                align-items: center;
                gap: 8px;

                i {
                    color: #e29454;
                }
            }
        }

        .itinerary-timeline {
            list-style: none;
            margin: 0;
            padding: 0;
            counter-reset: itinerary-step;

            li {
                position: relative;
                margin: 0;
                padding: 0 0 14px 46px;
                color: rgba(26, 10, 32, 0.8);
                line-height: 1.55;
                counter-increment: itinerary-step;

                &::before {
                    content: counter(itinerary-step);
                    position: absolute;
                    left: 0;
                    top: 1px;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background: #1a0a20;
                    color: #ffffff;
                    font-size: 0.82rem;
                    font-weight: 800;
                    display: grid;
                    place-items: center;
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 14px;
                    top: 34px;
                    bottom: 2px;
                    width: 2px;
                    background: linear-gradient(to bottom, rgba(226, 148, 84, 0.72), rgba(26, 10, 32, 0.08));
                }

                &:last-child {
                    padding-bottom: 0;

                    &::after {
                        display: none;
                    }
                }
            }
        }

        .itinerary-highlights {
            margin: 0;
            padding: 0;

            li {
                margin: 0;
                padding: 10px 12px;
                border-radius: 10px;
                border: 1px solid rgba(226, 148, 84, 0.2);
                background: rgba(226, 148, 84, 0.08);

                i {
                    color: #1a0a20;
                    background: rgba(255, 255, 255, 0.92);
                    border-radius: 50%;
                    width: 22px;
                    height: 22px;
                    display: inline-grid;
                    place-items: center;
                    font-size: 0.72rem;
                }

                span {
                    font-size: 0.94rem;
                    color: rgba(26, 10, 32, 0.86);
                    line-height: 1.45;
                }
            }
        }

        .itinerary-offers-box {
            margin-top: 14px;
            border: 1px solid rgba(26, 10, 32, 0.12);
            background: linear-gradient(145deg, #ffffff 0%, #fff6ee 100%);
            border-radius: 16px;
            padding: 20px;
        }

        .itinerary-offers-head {
            margin-bottom: 14px;

            h2 {
                margin: 0 0 6px;
                font-size: 1.2rem;
                color: #1a0a20;
                letter-spacing: 0.01em;
            }

            p {
                margin: 0;
                color: rgba(26, 10, 32, 0.66);
                font-size: 0.94rem;
                line-height: 1.55;
            }
        }

        .itinerary-offers-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .itinerary-offer-card {
            border: 1px solid rgba(226, 148, 84, 0.28);
            border-radius: 12px;
            padding: 14px;
            background: #fff;
            box-shadow: 0 8px 20px rgba(26, 10, 32, 0.08);

            h3 {
                margin: 0 0 6px;
                font-size: 1rem;
                color: #1a0a20;
            }
        }

        .itinerary-offer-note {
            margin: 0 0 10px;
            color: rgba(26, 10, 32, 0.64);
            font-size: 0.86rem;
            min-height: 38px;
        }

        .itinerary-offer-meta {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 8px;

            li {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                color: rgba(26, 10, 32, 0.8);
                font-size: 0.87rem;
                line-height: 1.45;

                i {
                    color: #e29454;
                    margin-top: 3px;
                }
            }
        }

        .itinerary-offer-footer {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed rgba(26, 10, 32, 0.16);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .itinerary-price {
            color: #1a0a20;
            font-weight: 800;
            font-size: 1.08rem;

            small {
                font-size: 0.75rem;
                font-weight: 600;
                color: rgba(26, 10, 32, 0.55);
            }
        }

        .itinerary-reserve-btn {
            text-decoration: none;
            background: #e29454;
            color: #1a0a20;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition: transform 0.18s ease, filter 0.18s ease;

            &:hover {
                transform: translateY(-1px);
                filter: brightness(1.03);
            }
        }
    }

    .activity-side-col {
        /* Quick Facts */
        .activity-box:nth-child(1) {
            h2 {
                color: #1a0a20;
                border-left: 4px solid #1a0a20;
                padding-left: 10px;
                font-size: 1.1rem;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
        }

        /* Who Is This For */
        .activity-box:nth-child(2) {
            h2 {
                color: #e29454;
                border-bottom: 2px dashed #1a0a20;
                padding-bottom: 6px;
                font-size: 1.1rem;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
        }

        /* What To Bring */
        .activity-box:nth-child(3) {
            h2 {
                color: #fff;
                background: #e29454;
                display: inline-block;
                padding: 4px 14px;
                border-radius: 20px;
                font-size: 1rem;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
        }
    }
}

@media (max-width: 980px) {
    .activity-detail-page {
        .activity-content-col {
            .itinerary-board {
                padding: 16px;
            }

            .itinerary-columns {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .itinerary-board-head {
                h2 {
                    font-size: 1.2rem;
                }

                p {
                    font-size: 0.95rem;
                }
            }

            .itinerary-offers-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
    }
}

@media (max-width: 520px) {
    .activity-detail-page {
        .activity-content-col {
            .itinerary-board {
                border-radius: 12px;
                padding: 12px;
            }

            .itinerary-lane {
                border-radius: 10px;
                padding: 10px;
            }

            .itinerary-timeline li {
                padding-left: 40px;
                font-size: 0.92rem;

                &::before {
                    width: 26px;
                    height: 26px;
                    font-size: 0.74rem;
                }

                &::after {
                    left: 12px;
                    top: 30px;
                }
            }

            .itinerary-highlights li span {
                font-size: 0.9rem;
            }

            .itinerary-offers-box {
                padding: 12px;
                border-radius: 12px;
            }

            .itinerary-offers-grid {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .itinerary-offer-card {
                padding: 11px;
            }

            .itinerary-offer-note {
                min-height: 0;
            }

            .itinerary-offer-footer {
                flex-direction: column;
                align-items: flex-start;
            }

            .itinerary-reserve-btn {
                width: 100%;
                text-align: center;
            }
        }
    }
}

/* ========== THINGS TO DO DETAIL PAGE (migrated from inline CSS) ========== */
.activity-detail-page {
    .ttd-detail-main {
        background: #f8f6fb;
    }

    .ttd-banner-slider {
        position: relative;
        height: 400px;
        background: #f0ecf7;
        overflow: hidden;
    }

    .ttd-banner-track {
        display: flex;
        height: 100%;
        cursor: grab;
        user-select: none;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

        &.is-dragging {
            transition: none;
            cursor: grabbing;
        }
    }

    .ttd-banner-slide {
        min-width: 33.333%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f0ecf7 0%, #e8e4f0 100%);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }
    }

    .ttd-banner-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(226, 148, 84, 0.9);
        color: #fff;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: background 0.2s ease;

        &:hover {
            background: #c97d3e;
        }
    }

    .ttd-banner-prev { left: 16px; }
    .ttd-banner-next { right: 16px; }

    .ttd-banner-dots {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 10;
    }

    .ttd-banner-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: background 0.3s ease;

        &.is-active {
            background: #e29454;
        }
    }

    .ttd-quick-facts-section {
        background: #fff;
        padding: 32px 20px;
        border-bottom: 1px solid #f0ecf7;
    }

    .ttd-quick-facts-wrap {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 28px;
    }

    .ttd-quick-fact {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .ttd-qf-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #7b3fe4 0%, #a855d9 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .ttd-qf-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ttd-qf-label {
        font-size: 11px;
        font-weight: 700;
        color: #9f99ab;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .ttd-qf-value {
        font-size: 15px;
        font-weight: 800;
        color: #1c032b;
        line-height: 1.4;
    }

    .ttd-layout-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px 20px;
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 32px;
    }

    .ttd-main-content {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .ttd-content-box {
        background: #fff;
        padding: 32px;
        border-radius: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

        h2 {
            font-size: 22px;
            font-weight: 800;
            color: #1c032b;
            margin-bottom: 16px;
        }

        > p {
            font-size: 15px;
            line-height: 1.8;
            color: #5e4d6a;
        }
    }

    .ttd-content-subtitle {
        font-size: 14px;
        color: #9f99ab;
        margin-bottom: 20px;
    }

    .ttd-route-timeline {
        margin-top: 22px;
        position: relative;
        padding-left: 34px;
        display: flex;
        flex-direction: column;
        gap: 16px;

        &::before {
            content: '';
            position: absolute;
            left: 11px;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background: linear-gradient(180deg, #e29454 0%, #7b3fe4 100%);
        }
    }

    .ttd-route-stop {
        position: relative;
        background: #fff8f2;
        border: 1px solid #f4e2d4;
        border-radius: 12px;
        padding: 14px 14px 12px;

        &::before {
            content: '';
            position: absolute;
            left: -29px;
            top: 16px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #e29454;
            box-shadow: 0 0 0 4px #fff;
        }
    }

    .ttd-route-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 6px;
    }

    .ttd-route-title {
        font-size: 14px;
        font-weight: 800;
        color: #1c032b;
    }

    .ttd-route-time {
        background: #f0ebff;
        color: #7b3fe4;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

    .ttd-route-meta {
        font-size: 12px;
        color: #5e4d6a;
        line-height: 1.6;

        strong {
            color: #1c032b;
        }
    }

    .ttd-route-rest {
        margin-top: 6px;
        font-size: 12px;
        color: #7b3fe4;
        font-weight: 600;
    }

    .ttd-route-pin {
        margin-top: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #f9f8fc;
        border-radius: 6px;
        transition: all 0.2s ease;
        font-size: 12px;
        color: #5e4d6a;
        font-weight: 600;

        &:hover {
            background: #f0ebff;
            color: #7b3fe4;
        }

        i {
            color: #e29454;
            font-size: 14px;
        }
    }

    .ttd-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 14px;
    }

    .activity-gallery-item {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        height: 220px;
        background: #ddd;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        &:hover img {
            transform: scale(1.08);
        }
    }

    .ttd-options-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 18px;
    }

    .activity-offer-card {
        background: linear-gradient(135deg, #fff9f7 0%, #fff5f2 100%);
        border: 2px solid #f0ecf7;
        border-radius: 14px;
        padding: 24px;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;

        &:hover {
            border-color: #e29454;
            box-shadow: 0 12px 32px rgba(226, 148, 84, 0.15);
            transform: translateY(-4px);
        }
    }

    .offer-head { margin-bottom: 12px; }

    .offer-name {
        font-size: 15px;
        font-weight: 800;
        color: #1c032b;
        margin-bottom: 6px;
    }

    .offer-comfort {
        display: inline-block;
        background: #f0ebff;
        color: #7b3fe4;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 600;
    }

    .offer-time {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #e29454;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .offer-note {
        font-size: 12px;
        color: #5e4d6a;
        line-height: 1.5;
        margin-bottom: 12px;
        flex: 1;
    }

    .offer-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid #f0ecf7;
        a {
            color: inherit;
            text-decoration: none;
        }
    }

    .offer-price {
        font-size: 18px;
        font-weight: 800;
        color: #e29454;
    }

    .offer-btn {
        background: #e29454;
        color: #1c032b;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
        transition: background 0.2s ease;
        border: none;
        cursor: pointer;

        &:hover {
            background: #c97d3e;
        }
    }

    .ttd-content-cta {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }

    .ttd-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;

        &.primary-btn {
            background: #e29454;
            color: #fff;

            &:hover {
                background: #c97d3e;
            }
        }

        &.secondary-btn {
            background: #fff;
            color: #1c032b;
            border: 2px solid #e8e4f0;

            &:hover {
                border-color: #e29454;
                color: #e29454;
            }
        }
    }

    .ttd-three-column {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .ttd-column-box {
        background: #fff;
        padding: 28px;
        border-radius: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

        h2 {
            font-size: 16px;
            font-weight: 800;
            color: #1c032b;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;

            i {
                color: #e29454;
                font-size: 18px;
            }
        }
    }

    .ttd-steps-list {
        list-style: none;
        counter-reset: step-counter;

        li {
            counter-increment: step-counter;
            display: flex;
            gap: 12px;
            margin-bottom: 14px;
            font-size: 13px;
            color: #5e4d6a;
            line-height: 1.6;

            &::before {
                content: counter(step-counter);
                background: #e29454;
                color: #fff;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 11px;
                flex-shrink: 0;
            }
        }
    }

    .ttd-who-list,
    .ttd-bring-list,
    .ttd-features-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;

        li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: #5e4d6a;
            line-height: 1.5;

            &::before {
                content: '✓';
                color: #e29454;
                font-weight: 800;
                font-size: 14px;
                flex-shrink: 0;
            }
        }
    }

    .ttd-sidebar {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .ttd-sidebar-box {
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

        h3 {
            font-size: 15px;
            font-weight: 800;
            color: #1c032b;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f0ecf7;

            i {
                color: #e29454;
            }
        }
    }

    .ttd-popular-list,
    .ttd-related-list {
        list-style: none;
    }

    .ttd-popular-list li {
        padding: 10px 0;
        border-bottom: 1px solid #f0ecf7;
        font-size: 12px;

        &:last-child {
            border-bottom: none;
        }
    }

    .ttd-popular-list a {
        color: #7b3fe4;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;

        &:hover {
            color: #e29454;
        }
    }

    .ttd-related-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        li {
            display: flex;
            gap: 10px;
            padding: 8px;
            border-radius: 8px;
            transition: background 0.2s ease;

            &:hover {
                background: #f8f6fb;
            }
        }
    }

    .ttd-related-item-img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        background: #f0ecf7;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
    }

    .ttd-related-item-content {
        flex: 1;
    }

    .ttd-related-item-name {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #1c032b;
        text-decoration: none;
        margin-bottom: 4px;

        &:hover {
            color: #e29454;
        }
    }

    .ttd-related-item-meta {
        font-size: 10px;
        color: #9f99ab;
    }

    .map-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;

        &.is-open {
            display: flex;
        }
    }

    .map-modal-content {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        width: 100%;
        max-width: 700px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .map-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #f0ecf7;
    }

    .map-modal-title {
        font-size: 18px;
        font-weight: 800;
        color: #1c032b;
        margin: 0;
    }

    .map-modal-close {
        background: none;
        border: none;
        font-size: 28px;
        color: #9f99ab;
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease;

        &:hover {
            color: #1c032b;
        }
    }

    .map-modal-body {
        position: relative;
        flex: 1;
        overflow: hidden;
    }

    .map-container {
        width: 100%;
        height: 100%;
        min-height: 420px;
        background: #f0ecf7;
        overflow: hidden;
    }

    .map-modal-info {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(2px);
        pointer-events: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

        p {
            margin: 0;
            font-size: 13px;
            color: #1c032b;
            line-height: 1.4;
            font-weight: 600;
        }
    }
}

@media (max-width: 1024px) {
    .activity-detail-page {
        .ttd-layout-wrapper {
            grid-template-columns: 1fr;
        }

        .ttd-sidebar {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

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

        .ttd-banner-slider {
            height: 300px;
        }

        .ttd-quick-facts-wrap {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
    }
}

@media (max-width: 768px) {
    .activity-detail-page {
        .ttd-banner-slider {
            height: 240px;
        }

        .ttd-route-timeline {
            padding-left: 26px;
        }

        .ttd-route-stop::before {
            left: -22px;
        }

        .ttd-route-head {
            flex-direction: column;
            align-items: flex-start;
        }

        .ttd-page-title {
            font-size: 28px;
        }

        .ttd-layout-wrapper {
            padding: 20px;
            gap: 20px;
        }

        .ttd-content-box {
            padding: 20px;
        }

        .ttd-sidebar {
            grid-template-columns: 1fr;
        }

        .ttd-three-column,
        .ttd-options-grid {
            grid-template-columns: 1fr;
        }

        .ttd-content-cta {
            flex-direction: column;
        }

        .ttd-cta-btn {
            width: 100%;
            justify-content: center;
        }

        .ttd-quick-facts-wrap {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .map-modal-content {
            max-width: 100%;
            max-height: 90vh;
        }

        .map-container {
            min-height: 320px;
        }
    }
}

/* ========== END ACTIVITY DETAIL PAGE ========== */

/* ==================================================================
   SERVICE DETAIL PAGE (service-detail.html)
   ================================================================== */

.service-detail-page {
    .service-detail-main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 20px 80px;
    }

    .service-detail-hero {
        display: grid;
        grid-template-columns: minmax(90px, 120px) 1fr;
        gap: 22px;
        align-items: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 28px;
        padding: 24px;
        border-radius: 16px;
        background: radial-gradient(circle at center, rgba(226, 148, 84, 0.22), rgba(226, 148, 84, 0.03));

        .service-icon-wrap {
            width: 100px;
            height: 100px;
            border-radius: 14px;
            background: #1a0a20;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 58px;
                height: auto;
            }
        }

        .service-meta {
            color: #1a0a20;
            font-weight: 700;
            letter-spacing: 0.4px;
            display: inline-flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }

        .service-title {
            margin: 0 0 10px;
            font-size: clamp(28px, 3.2vw, 42px);
            line-height: 1.15;
            color: #1a0a20;
        }

        .service-lead {
            margin: 0;
            color: #3e3343;
            font-size: 16px;
            line-height: 1.7;
            max-width: 760px;
        }
    }

    .service-detail-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 22px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .service-box {
        background: #fff;
        border: 1px solid rgba(26, 10, 32, 0.08);
        border-radius: 14px;
        padding: 22px;
        margin-bottom: 16px;
        box-shadow: 0 10px 24px rgba(26, 10, 32, 0.04);
        transition: transform 0.2s ease, box-shadow 0.2s ease;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(26, 10, 32, 0.09);
        }

        h2 {
            margin: 0 0 12px;
            font-size: 18px;
            font-weight: 800;
            color: #1a0a20;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        p {
            margin: 0;
            color: #4a3f4f;
            font-size: 15px;
            line-height: 1.75;
        }
    }

    .service-content-col {
        .service-box-overview {
            h2 {
                border-left: 4px solid #e29454;
                padding-left: 10px;
            }
        }

        .service-box-included {
            h2 {
                color: #e29454;
                border-bottom: 2px solid rgba(226, 148, 84, 0.6);
                padding-bottom: 6px;
            }
        }

        .service-box-how {
            h2 {
                display: inline-block;
                background: #1a0a20;
                color: #fff;
                padding: 6px 12px;
                border-radius: 999px;
                font-size: 15px;
            }
        }
    }

    .service-side-col {
        .service-box-selected-vehicle {
            /* border-top: 4px solid #1a0a20; */

            h2 {
                color: #1a0a20;

                #planner-selected-vehicle-name {
                    color: #e29454;
                }
            }

            .planner-vehicle-table {
                th,
                td {
                    padding: 6px 8px;
                    font-size: 12px;
                    text-align: left;
                }
            }
        }

        .service-box-facts {
            /* border-top: 4px solid #e29454; */

            h2 {
                color: #1a0a20;
            }
        }
    }

    .service-box-planner {
        /* border-top: 4px solid #1a0a20; */

        .planner-lead {
            margin-bottom: 14px;
            color: #4a3f4f;
            font-size: 14px;
        }

        .transport-options-wrap {
            margin-bottom: 14px;

            h3 {
                margin: 0 0 6px;
                font-size: 18px;
                color: #1a0a20;
            }

            p {
                margin: 0 0 12px;
                font-size: 14px;
                color: #5e5165;
                line-height: 1.6;
            }

            .transport-options-grid {
                display: grid;
                grid-template-columns: repeat(5, minmax(120px, 1fr));
                gap: 10px;

                .vehicle-card {
                    border: 1px solid rgba(26, 10, 32, 0.18);
                    border-radius: 12px;
                    padding: 12px 10px;
                    background: #fff;
                    color: #1a0a20;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    cursor: pointer;
                    transition: 0.2s ease;

                    i {
                        font-size: 18px;
                        color: #e29454;
                    }

                    .vehicle-name {
                        font-weight: 800;
                        font-size: 14px;
                    }

                    .vehicle-pax {
                        font-size: 13px;
                        color: #75687c;
                    }

                    &:hover,
                    &.active {
                        border-color: #e29454;
                        box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.12);
                        background: rgba(226, 148, 84, 0.06);
                    }
                }
            }
        }

        .planner-vehicle-details {
            margin-bottom: 14px;
            border: 1px solid rgba(26, 10, 32, 0.16);
            border-radius: 12px;
            overflow: hidden;

            h4 {
                margin: 0;
                padding: 12px;
                background: rgba(26, 10, 32, 0.04);
                font-size: 16px;
                color: #1a0a20;

                span {
                    color: #e29454;
                }
            }

            .planner-vehicle-table {
                width: 100%;
                border-collapse: collapse;

                th,
                td {
                    padding: 10px 12px;
                    border-top: 1px solid rgba(26, 10, 32, 0.1);
                    text-align: left;
                    font-size: 14px;
                    vertical-align: top;
                }

                th {
                    width: 34%;
                    color: #1a0a20;
                    background: rgba(26, 10, 32, 0.03);
                }

                td {
                    color: #403547;
                    background: #fff;
                }
            }
        }

        .planner-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 14px;

            .planner-field {
                display: flex;
                flex-direction: column;
                gap: 6px;

                label {
                    font-size: 13px;
                    font-weight: 700;
                    color: #1a0a20;
                }

                input,
                select {
                    width: 100%;
                    border: 1px solid rgba(26, 10, 32, 0.2);
                    border-radius: 10px;
                    padding: 11px 12px;
                    background: #fff;
                    color: #1a0a20;
                    font-family: inherit;
                    font-size: 14px;
                    outline: none;
                    transition: border-color 0.2s ease, box-shadow 0.2s ease;

                    &:focus {
                        border-color: #e29454;
                        box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.18);
                    }
                }
            }
        }

        .planner-packages-wrap {
            margin-top: 16px;

            .planner-packages-label {
                font-size: 13px;
                font-weight: 700;
                color: #1a0a20;
                margin: 0 0 10px;

                span {
                    font-weight: 400;
                    color: #6b5d75;
                    font-size: 12px;
                }
            }
        }

        .planner-packages-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .package-days-list[hidden],
        .day-stops-list[hidden] {
            display: none !important;
        }

        .package-select-card {
            border: 2px solid rgba(26, 10, 32, 0.15);
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;

            &.selected {
                border-color: #e29454;
                box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.18);
            }

            .package-card-header {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 14px;
                cursor: pointer;
                user-select: none;

                input[type="checkbox"] {
                    display: none;
                }

                .package-card-check-icon {
                    flex-shrink: 0;
                    width: 22px;
                    height: 22px;
                    border-radius: 6px;
                    border: 2px solid rgba(26, 10, 32, 0.25);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    transition: background 0.2s, border-color 0.2s;

                    i {
                        font-size: 11px;
                        color: #fff;
                        opacity: 0;
                        transition: opacity 0.15s;
                    }
                }

                .package-card-meta {
                    flex: 1;
                    min-width: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 3px;
                }

                .package-card-title {
                    font-size: 14px;
                    font-weight: 700;
                    color: #1a0a20;
                    line-height: 1.3;
                }

                .package-card-desc {
                    font-size: 12px;
                    color: #6b5d75;
                    line-height: 1.4;
                }

                .package-card-tag {
                    flex-shrink: 0;
                    background: rgba(26, 10, 32, 0.08);
                    color: #1a0a20;
                    border-radius: 999px;
                    padding: 4px 10px;
                    font-size: 11px;
                    font-weight: 700;
                    white-space: nowrap;
                }

                &:has(input:checked) .package-card-check-icon {
                    background: #e29454;
                    border-color: #e29454;

                    i {
                        opacity: 1;
                    }
                }
            }

            .package-days-list {
                display: flex;
                flex-direction: column;
                gap: 0;
                padding: 12px;
                border-top: 2px solid rgba(226, 148, 84, 0.35);
                background: rgba(226, 148, 84, 0.04);

                .day-accordion {
                    border-radius: 0;
                    border-left: none;
                    border-right: none;
                    border-top: none;
                    border-bottom: 1px solid rgba(26, 10, 32, 0.09);

                    &:first-child {
                        border-radius: 8px 8px 0 0;
                        border-top: 1.5px solid rgba(26, 10, 32, 0.12);
                        border-left: 1.5px solid rgba(26, 10, 32, 0.12);
                        border-right: 1.5px solid rgba(26, 10, 32, 0.12);
                    }

                    &:last-child {
                        border-radius: 0 0 8px 8px;
                        border-bottom: 1.5px solid rgba(26, 10, 32, 0.12);
                        border-left: 1.5px solid rgba(26, 10, 32, 0.12);
                        border-right: 1.5px solid rgba(26, 10, 32, 0.12);
                    }

                    &:only-child {
                        border-radius: 8px;
                        border: 1.5px solid rgba(26, 10, 32, 0.12);
                    }

                    &.selected {
                        border-color: rgba(226, 148, 84, 0.6);
                        background: rgba(226, 148, 84, 0.06);
                    }

                    .day-accordion-header {
                        background: transparent;
                    }
                }
            }
        }

        /* ── Day accordion (standalone, outside package-days-list) ── */
        .day-accordion {
            border: 1.5px solid rgba(26, 10, 32, 0.12);
            border-radius: 10px;
            background: #fff;
            overflow: hidden;
            transition: border-color 0.2s, background 0.2s;

            &.selected {
                border-color: rgba(226, 148, 84, 0.6);
                background: rgba(226, 148, 84, 0.06);
            }

            .day-accordion-header {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 12px;
                cursor: pointer;
                user-select: none;
                background: rgba(26, 10, 32, 0.03);

                .day-accordion-check {
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    input[type="checkbox"] {
                        display: none;
                    }

                    .day-check-icon {
                        width: 18px;
                        height: 18px;
                        border-radius: 4px;
                        border: 2px solid rgba(26, 10, 32, 0.25);
                        background: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: background 0.2s, border-color 0.2s;

                        i {
                            font-size: 9px;
                            color: #fff;
                            opacity: 0;
                            transition: opacity 0.15s;
                        }
                    }

                    &:has(input:checked) .day-check-icon {
                        background: #e29454;
                        border-color: #e29454;

                        i {
                            opacity: 1;
                        }
                    }
                }

                .day-badge {
                    background: #1a0a20;
                    color: #e29454;
                    font-size: 10px;
                    font-weight: 800;
                    padding: 3px 8px;
                    border-radius: 999px;
                    white-space: nowrap;
                    letter-spacing: 0.05em;
                }

                .day-accordion-main {
                    flex: 1;
                    min-width: 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;

                    .day-accordion-title {
                        min-width: 0;
                        font-size: 13px;
                        font-weight: 700;
                        color: #1a0a20;
                        line-height: 1.3;
                    }

                    .day-accordion-price {
                        flex-shrink: 0;
                        padding: 3px 8px;
                        border-radius: 999px;
                        background: rgba(226, 148, 84, 0.14);
                        color: #1a0a20;
                        font-size: 11px;
                        font-weight: 800;
                        white-space: nowrap;
                    }
                }

                .day-accordion-chevron {
                    color: #6b5d75;
                    font-size: 12px;
                }
            }
        }

        /* ── Stops list inside day accordion ───────── */
        .day-stops-list {
            display: flex;
            flex-direction: column;
            padding: 12px;
            gap: 0;
        }

        /* ── Individual stop card ───────────────────── */
        .stop-card {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px dashed rgba(26, 10, 32, 0.12);
            position: relative;

            &:last-child {
                border-bottom: none;
            }

            .stop-marker {
                width: 34px;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: center;

                .stop-number {
                    flex-shrink: 0;
                    width: 26px;
                    height: 26px;
                    border-radius: 50%;
                    background: #e29454;
                    color: #fff;
                    font-size: 12px;
                    font-weight: 800;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 2px;
                    position: relative;
                    z-index: 2;
                    box-shadow: 0 0 0 4px #fff;
                }

                .stop-connector {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    flex: 1;
                    min-height: 74px;
                    padding-top: 6px;
                }

                .stop-connector-dot {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #e29454;
                    box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.12);
                    flex-shrink: 0;
                }

                .stop-connector-line {
                    width: 2px;
                    flex: 1;
                    min-height: 16px;
                    background: linear-gradient(180deg, rgba(226, 148, 84, 0.7) 0%, rgba(26, 10, 32, 0.18) 100%);
                }

                .stop-connector-icon {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: #1a0a20;
                    color: #e29454;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    box-shadow: 0 8px 18px rgba(26, 10, 32, 0.14);
                    margin: 4px 0;
                    flex-shrink: 0;
                }
            }

            .stop-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .stop-time-row {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 2px;

                .stop-time-input {
                    border: 1px solid rgba(26, 10, 32, 0.2);
                    border-radius: 6px;
                    padding: 3px 6px;
                    font-size: 12px;
                    font-weight: 700;
                    color: #e29454;
                    background: #fff;
                    font-family: inherit;
                    outline: none;
                    cursor: pointer;
                    width: auto;

                    &:focus {
                        border-color: #e29454;
                        box-shadow: 0 0 0 2px rgba(226, 148, 84, 0.2);
                    }
                }

                .stop-time-sep {
                    font-size: 12px;
                    color: #6b5d75;
                    font-weight: 700;
                }
            }

            .stop-place {
                border: none;
                background: transparent;
                padding: 0;
                font-size: 14px;
                font-weight: 700;
                color: #1a0a20;
                line-height: 1.3;
                font-family: inherit;
                text-align: left;
                display: inline-flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 3px;
                cursor: pointer;

                .stop-place-map-hint {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    font-size: 11px;
                    font-weight: 700;
                    color: #e29454;
                    letter-spacing: 0.02em;
                }

                &:hover {
                    color: #e29454;
                }
            }

            .stop-route {
                font-size: 12px;
                color: #6b5d75;
                line-height: 1.4;

                i {
                    color: #e29454;
                    margin-right: 3px;
                    font-size: 11px;
                }
            }

            .stop-note {
                margin: 0;
                font-size: 12px;
                color: #4a3f4f;
                line-height: 1.55;
            }

            .stop-visit-list {
                margin: 4px 0 0;
                padding: 0;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;

                li {
                    background: rgba(26, 10, 32, 0.06);
                    border-radius: 999px;
                    padding: 0;
                    font-size: 11px;
                    color: #1a0a20;
                    display: flex;
                    align-items: center;
                }
            }

            .visit-place-btn {
                background: none;
                border: none;
                cursor: pointer;
                border-radius: 999px;
                padding: 2px 8px;
                font-size: 11px;
                color: #1a0a20;
                display: flex;
                align-items: center;
                gap: 4px;
                transition: background 0.15s, color 0.15s;

                i {
                    color: #e29454;
                    font-size: 10px;
                    transition: color 0.15s;
                }

                &:hover {
                    background: rgba(226, 148, 84, 0.18);
                    color: #a0460a;

                    i { color: #a0460a; }
                }
            }

            .stop-visit-wrap {
                margin-top: 6px;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .stop-visit-label {
                font-size: 11px;
                font-weight: 700;
                color: #e29454;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                display: flex;
                align-items: center;
                gap: 5px;

                i {
                    font-size: 10px;
                }
            }
        }
    }

    .service-box-card-itinerary {
        border-top: 4px solid #e29454;

        .planner-lead {
            margin-bottom: 16px;
            color: #5b4e63;
        }

        .service-itinerary-card-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .service-itinerary-card {
            border: 1px solid rgba(26, 10, 32, 0.12);
            border-radius: 14px;
            padding: 18px;
            background: linear-gradient(180deg, rgba(226, 148, 84, 0.08), rgba(255, 255, 255, 0.98));
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

            &.is-active {
                border-color: #e29454;
                box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.16);
                transform: translateY(-2px);
            }

            h3 {
                margin: 0;
                font-size: 18px;
                color: #1a0a20;
            }

            p {
                color: #5d5163;
                font-size: 14px;
                line-height: 1.65;
            }

            .service-itinerary-card-top {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .service-itinerary-card-badge {
                align-self: flex-start;
                background: #1a0a20;
                color: #fff;
                border-radius: 999px;
                padding: 6px 12px;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.4px;
            }

            .service-itinerary-card-list {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 9px;

                li {
                    display: flex;
                    gap: 10px;
                    align-items: flex-start;
                    color: #403547;
                    font-size: 14px;
                    line-height: 1.55;
                }

                i {
                    color: #e29454;
                    margin-top: 3px;
                }
            }

            .service-itinerary-card-btn {
                border: none;
                border-radius: 10px;
                background: #1a0a20;
                color: #fff;
                font: inherit;
                font-weight: 700;
                padding: 12px 14px;
                cursor: pointer;
                transition: background 0.2s ease;

                &:hover {
                    background: #e29454;
                }
            }
        }
    }

    .service-box-card-summary {
        border-top: 4px solid #1a0a20;

        .service-card-summary-top {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 18px;

            h3 {
                margin: 0;
                font-size: 20px;
                color: #1a0a20;
            }

            p {
                color: #5d5163;
            }
        }

        .service-card-summary-badge {
            align-self: flex-start;
            background: rgba(226, 148, 84, 0.14);
            color: #b7681d;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 700;
        }

        .service-card-summary-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 16px;
        }

        .service-card-summary-label {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: #1a0a20;
        }

        .service-card-summary-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;

            li {
                display: flex;
                gap: 10px;
                align-items: flex-start;
                color: #403547;
                line-height: 1.5;
            }

            i {
                color: #e29454;
                margin-top: 3px;
            }
        }
    }

    /* ── Sidebar booking summary elements ───────── */
    .planner-summary {
        font-size: 13px;
        color: #1a0a20;
        line-height: 1.7;
        .summary-pkg-title {
            display: block;
            margin-top: 10px;
            font-size: 13px;
            color: #1a0a20;
            border-bottom: 1px solid rgba(226, 148, 84, 0.4);
            padding-bottom: 4px;

            &:first-child {
                margin-top: 0;
            }
        }

        .summary-day-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 8px;
            font-size: 12px;
            font-weight: 700;
            color: #e29454;

            .summary-day-main {
                min-width: 0;
            }

            .summary-day-price {
                flex-shrink: 0;
                padding: 1px 7px;
                border-radius: 999px;
                background: rgba(226, 148, 84, 0.12);
                color: #1a0a20;
                font-size: 11px;
                font-weight: 800;
            }

            i {
                font-size: 10px;
                margin-right: 3px;
            }
        }

        .summary-stop-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-top: 5px;
            font-size: 12px;
            color: #1a0a20;

            i {
                color: #e29454;
                font-size: 9px;
                flex-shrink: 0;
                margin-top: 2px;
            }

            strong {
                flex: 1;
                font-weight: 700;
            }

            .summary-stop-time {
                flex-shrink: 0;
                font-size: 11px;
                color: #6b5d75;
                font-weight: 600;
                background: rgba(26, 10, 32, 0.06);
                padding: 1px 6px;
                border-radius: 999px;
            }
        }

        .summary-visit-list {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
            margin-left: 16px;
        }

        .summary-visit-pill {
            background: rgba(226, 148, 84, 0.12);
            border: 1px solid rgba(226, 148, 84, 0.35);
            color: #1a0a20;
            font-size: 10px;
            padding: 2px 7px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 3px;

            i {
                color: #e29454;
                font-size: 9px;
            }
        }

        .summary-package-total,
        .summary-total-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 8px;
            font-size: 12px;
            color: #5b4e63;

            strong {
                color: #1a0a20;
                font-weight: 800;
            }
        }

        .summary-package-total {
            padding-top: 6px;
            border-top: 1px dashed rgba(26, 10, 32, 0.12);
        }

        .summary-total-row {
            padding-top: 6px;
            border-top: 1px solid rgba(26, 10, 32, 0.1);
        }

        .summary-total-row.discount strong {
            color: #c15a5a;
        }

        .summary-total-row.grand {
            font-size: 13px;

            strong {
                color: #e29454;
            }
        }
    }

    .planner-coupon-wrap {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed rgba(26, 10, 32, 0.14);

        .planner-coupon-label {
            display: block;
            margin-bottom: 7px;
            font-size: 11px;
            font-weight: 700;
            color: #6b5d75;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .planner-coupon-input-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .planner-coupon-input {
            flex: 1;
            min-width: 0;
            height: 38px;
            border: 1px solid rgba(26, 10, 32, 0.16);
            border-radius: 8px;
            padding: 0 10px;
            font-size: 12.5px;
            color: #1a0a20;
            background: #fff;
            font-family: inherit;
            outline: none;

            &:focus {
                border-color: #e29454;
                box-shadow: 0 0 0 3px rgba(226, 148, 84, 0.12);
            }
        }

        .planner-coupon-btn {
            height: 38px;
            border: none;
            border-radius: 8px;
            background: #1a0a20;
            color: #fff;
            padding: 0 12px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;

            &:hover {
                background: #2a1235;
            }
        }

        .planner-coupon-status {
            margin-top: 7px;
            min-height: 16px;
            font-size: 11.5px;
            color: #8c8196;

            &.is-success {
                color: #2f8a57;
            }

            &.is-error {
                color: #c15a5a;
            }
        }
    }

    .service-facts {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;

        li {
            color: #473b4c;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px;
            align-items: baseline;
            padding-bottom: 8px;
            border-bottom: 1px dashed rgba(26, 10, 32, 0.2);

            &:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            strong {
                color: #1a0a20;
                margin-right: 0;
            }
        }
    }
    .service-cta-row {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .service-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            padding: 11px 16px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 14px;
            transition: 0.2s ease;
        }

        .service-btn.primary {
            background: #1a0a20;
            color: #fff;

            &:hover {
                background: #e29454;
                color: #1a0a20;
            }
        }

        .service-btn.ghost {
            border: 1px solid #1a0a20;
            color: #1a0a20;

            &:hover {
                border-color: #e29454;
                color: #e29454;
            }
        }
    }

    .transport-gallery-section {
        margin-top: 6px;

        .transport-gallery-lead {
            margin: 0 0 14px;
            color: #5a4d62;
            font-size: 14px;
            line-height: 1.6;
        }
    }

    .location-map-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;

        &.is-open {
            display: flex;
        }

        .location-map-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 10, 18, 0.74);
            backdrop-filter: blur(3px);
        }

        .location-map-dialog {
            position: relative;
            z-index: 1;
            width: min(1020px, 100%);
            max-height: calc(100vh - 40px);
            overflow: auto;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 24px 60px rgba(26, 10, 32, 0.28);
        }

        .location-map-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: rgba(26, 10, 32, 0.82);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2;
        }

        .location-map-content {
            display: grid;
            grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.05fr);
            gap: 0;
        }

        .location-map-media {
            min-height: 100%;
            background: #f6f2fb;

            img {
                width: 100%;
                height: 100%;
                min-height: 320px;
                object-fit: cover;
                display: block;
            }
        }

        .location-map-info {
            padding: 30px 26px 24px;
        }

        .location-map-kicker {
            display: inline-flex;
            margin-bottom: 10px;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(226, 148, 84, 0.14);
            color: #e29454;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        #location-map-title {
            margin: 0 0 8px;
            font-size: clamp(24px, 2.2vw, 32px);
            line-height: 1.15;
            color: #1a0a20;
        }

        .location-map-route,
        .location-map-note {
            margin: 0 0 10px;
            color: #5a4d62;
            font-size: 14px;
            line-height: 1.65;
        }

        .location-map-frame-wrap {
            overflow: hidden;
            border-radius: 14px;
            border: 1px solid rgba(26, 10, 32, 0.1);
            margin-top: 14px;
            background: #f7f4fb;
        }

        .location-map-frame {
            width: 100%;
            height: 320px;
            border: 0;
            display: block;
        }

        .location-map-link {
            margin-top: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 10px;
            background: #1a0a20;
            color: #ffffff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
        }
    }

    body.location-map-open {
        overflow: hidden;
    }

    .transport-gallery-section {
        margin-top: 6px;

        .transport-gallery-lead {
            margin: 0 0 14px;
            color: #5a4d62;
            font-size: 14px;
            line-height: 1.6;
        }

        .transport-gallery-current {
            margin: 0 0 14px;
            font-size: 13px;
            color: #5a4d62;

            strong {
                color: #1a0a20;
            }
        }

        .transport-gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .transport-gallery-card {
            margin: 0;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(26, 10, 32, 0.12);
            background: #fff;
            box-shadow: 0 8px 20px rgba(26, 10, 32, 0.05);

            img {
                width: 100%;
                height: 200px;
                object-fit: cover;
                display: block;
            }

            figcaption {
                padding: 8px 10px;
                font-size: 12px;
                color: #5b4e63;
                border-top: 1px solid rgba(26, 10, 32, 0.08);
                line-height: 1.4;
            }
        }
    }

    @media (max-width: 960px) {
        .service-detail-grid {
            grid-template-columns: 1fr;
        }

        .service-box-card-itinerary {
            .service-itinerary-card-grid {
                grid-template-columns: 1fr;
            }
        }

        .location-map-modal {
            .location-map-content {
                grid-template-columns: 1fr;
            }

            .location-map-media img {
                min-height: 240px;
                max-height: 320px;
            }
        }

        .transport-gallery-section {
            .transport-gallery-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    }

    @media (max-width: 640px) {
        .service-detail-main {
            padding-top: 18px;
        }

        .service-detail-hero {
            grid-template-columns: 1fr;
            text-align: center;

            .service-icon-wrap {
                margin: 0 auto;
            }
        }

        .service-cta-row {
            justify-content: center;
        }

        .service-box-planner {
            .transport-options-wrap {
                .transport-options-grid {
                    grid-template-columns: repeat(2, minmax(120px, 1fr));
                }
            }

            .planner-grid {
                grid-template-columns: 1fr;
            }

            .package-select-card {
                .package-card-header {
                    flex-wrap: wrap;

                    .package-card-tag {
                        order: 1;
                    }
                }

                .day-accordion {
                    .day-accordion-header {
                        align-items: flex-start;

                        .day-accordion-main {
                            flex-direction: column;
                            align-items: flex-start;

                            .day-accordion-price {
                                margin-top: 2px;
                            }
                        }
                    }
                }
            }
        }

        .location-map-modal {
            padding: 12px;

            .location-map-dialog {
                max-height: calc(100vh - 24px);
            }

            .location-map-info {
                padding: 22px 18px 18px;
            }

            .location-map-frame {
                height: 260px;
            }
        }

        .transport-gallery-section {
            .transport-gallery-grid {
                grid-template-columns: 1fr;
            }

            .transport-gallery-card {
                img {
                    height: 190px;
                }
            }
        }
    }
}

/* ========== END SERVICE DETAIL PAGE ========== */