@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root {
    /* Colors */
    --primary: #08245c;
    --primary-hover: #0b4ab8;
    --secondary: #f46b2a;
    --secondary-soft: #fff1e9;
    --success: #0f9f6e;
    --white: #ffffff;
    --ink: #333333;
    --muted: #667085;
    --line: #d7e3f3;
    --soft: #eef6ff;
    --page-soft: #f6f9fd;
    --text-muted: #526174;
    --border-hover: #bcd1ea;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 20px;

    /* Font Size */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-xxl: 26px;
    --fs-icon-md: 24px;
    --fs-icon-lg: 32px;
    --fs-icon-xl: 36px;

    /* Font Weight */
    --fw-sm: 400;
    --fw-md: 500;
    --fw-semibold: 600;
    --fw-lg: 700;
    --fw-bold: bold;
    --fw-extrabold: 800;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(8, 36, 92, .06);
    --shadow-md: 0 12px 30px rgba(8, 36, 92, .09);
    --shadow-lg: 0 20px 44px rgba(8, 36, 92, .14);
}

/* === Global Styles === */
* {
    text-decoration: none !important;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

/* === Header === */
header {
    nav.navbar {
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 1px 0 rgba(0, 29, 95, .08);

        .navbar-brand {
            display: inline-flex;
            align-items: center;
            line-height: 1;
            text-decoration: none;

            span {
                &:first-child {
                    color: var(--primary-hover);
                }

                &:last-child {
                    color: var(--secondary);
                }
            }

            img {
                display: block;
                height: auto;
            }
        }

        .nav-link {
            color: var(--primary) !important;
            font-size: var(--fs-sm);

            &:hover,
            &.active {
                color: var(--secondary) !important;
            }
        }

        .language-switch {

            a,
            span {
                color: var(--primary);
                font-size: var(--fs-sm);
                font-weight: var(--fw-semibold);
            }
        }
    }
}

/* === Animations === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* === Home Page === */
.main-content {
    background: linear-gradient(180deg, #f7fbff 0%, #fff 34%, #f8fbff 66%, #fff 100%);
    overflow: hidden;

    .wrapper {
        max-width: 1200px;
        padding: 0 20px;
        margin: 0 auto;
    }

    section {
        position: relative;
    }

    /* === Hero Form Search Section === */
    .form-search {
        position: relative;

        .card-wrapper {
            position: relative;
            background-image: url('../images/banner/banner-home.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 400px;

            &::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(0, 36, 92, .6) 0%, rgba(244, 107, 42, .6) 100%);
                z-index: 1;
            }

            .card-content {
                position: relative;
                z-index: 2;
                width: 100%;
                height: 100%;
                padding-top: 100px;

                .card-title {
                    font-size: var(--fs-xxl);
                    font-weight: var(--fw-bold);
                    color: var(--white);
                    text-align: center;

                    span:first-child {
                        color: var(--orange);
                    }

                    span:last-child {
                        text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.5);
                        font-weight: var(--fw-extrabold);
                        color: var(--martinique);

                        span {
                            color: var(--denim);
                        }

                    }
                }

                .card-form {
                    position: relative;
                    max-width: 1000px;
                    margin: 0 auto;
                    z-index: 100;
                }
            }
        }
    }

    .hero-media {
        display: none;

        &::after {
            display: none;
        }
    }

    /* === Features/Benefits Section === */
    .features {
        padding: 76px 0 34px;
        background: #fff;
        margin-top: -20px;
        position: relative;
        z-index: 1;
    }

    .benefit-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        align-items: center;
    }

    .benefit-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-height: 66px;
        color: var(--primary);
        font-size: var(--fs-sm);
        font-weight: var(--fw-lg);
        background: var(--page-soft);
        border: 1px solid #e7eef8;
        border-radius: var(--radius-md);
        padding: 12px 16px;

        &:last-child {
            border-right: 1px solid #e7eef8;
        }

        i {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 50%;
            background: #e8f1ff;
            color: var(--primary-hover);
            font-size: var(--fs-icon-md);
        }
    }

    /* === Common Section Styles === */
    .route-popular,
    .provider,
    .news-section,
    .booking-steps,
    .popular-destinations,
    .faq-preview {
        padding: 62px 0;
        background: transparent;
    }

    .provider,
    .booking-steps {
        background: #fff;
    }

    .route-popular,
    .faq-preview {
        background: var(--page-soft);
    }

    .content-title {
        margin-bottom: 28px;
        text-align: center;

        h2 {
            color: var(--primary);
            font-size: var(--fs-xxl);
            font-weight: var(--fw-extrabold);
            margin: 0;
            line-height: 1.25;
        }
    }

    .section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        text-align: left;

        a {
            color: var(--primary-hover);
            font-size: var(--fs-sm);
            font-weight: var(--fw-extrabold);
            transition: background .18s ease, color .18s ease, border-color .18s ease;

            &:hover {
                text-decoration: underline;
                color: var(--primary);
            }
        }
    }

    /* === Routes Section === */
    .route-list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px;
    }

    .route-item {
        display: flex;
        flex-direction: column;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        color: var(--primary);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

        &:hover {
            transform: translateY(-4px);
            border-color: var(--border-hover);
            box-shadow: var(--shadow-lg);
            color: var(--primary);

            .route-image img {
                transform: scale(1.035);
            }
        }
    }

    .route-image {
        width: 100%;
        height: 148px;
        overflow: hidden;
        background: var(--soft);

        img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform .28s ease;
        }
    }

    .route-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 16px;

        h3 {
            color: var(--primary);
            font-size: var(--fs-sm);
            font-weight: var(--fw-extrabold);
            line-height: 1.35;
            margin: 0 0 8px;
        }

        p {
            color: var(--secondary);
            font-size: var(--fs-sm);
            font-weight: var(--fw-extrabold);
            line-height: 1.6;
            margin-top: auto;
            margin-bottom: 0;
        }
    }

    /* === Route Carousel === */
    #route-carousel {
        &.route-list {
            display: block;
            gap: 0;
        }

        .owl-stage {
            display: flex;
        }

        .owl-item {
            display: flex;

            .route-item {
                width: 100%;
            }
        }

        .owl-nav {
            pointer-events: none;
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            button {

                &.owl-prev,
                &.owl-next {
                    pointer-events: auto;
                    width: 46px;
                    height: 46px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background: #fff !important;
                    color: var(--primary-hover) !important;
                    box-shadow: 0 10px 24px rgba(8, 36, 92, .18);
                    border: 1px solid var(--line) !important;
                    transform: translateY(-12px);

                    span {
                        display: none;
                    }
                }

                &.owl-prev {
                    margin-left: -24px;
                }

                &.owl-next {
                    margin-right: -24px;
                }
            }
        }
    }

    /* === Provider Section === */
    .provider {
        .content-body {
            overflow: hidden;
        }
    }

    .provider-carousel {
        .provider-item {
            padding: 8px;

            a {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 94px;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: var(--radius-md);
                padding: 12px;
                transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

                &:hover {
                    transform: translateY(-2px);
                    border-color: var(--line);
                    box-shadow: var(--shadow-md);
                }
            }

            img {
                max-width: 100%;
                max-height: 68px;
                object-fit: contain;
            }
        }
    }

    .provider-initials {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--primary-hover);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: var(--fw-extrabold);
    }

    /* === News & Articles Section === */
    .blog-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .blog-card {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        color: var(--primary);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

        &:hover {
            transform: translateY(-4px);
            border-color: var(--border-hover);
            box-shadow: var(--shadow-lg);
            color: var(--primary);

            .blog-image img {
                transform: scale(1.035);
            }
        }
    }

    .blog-image {
        width: 100%;
        height: 205px;
        overflow: hidden;
        background: var(--soft);

        img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: 0% 0%;
            transition: transform .28s ease;
        }
    }

    .blog-card-body {
        display: none;
        flex: 1;
        flex-direction: column;
        padding: 18px;
        gap: 8px;

        .blog-date {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: var(--fs-xs);
            font-weight: var(--fw-semibold);
            color: var(--text-muted);
        }

        h3 {
            color: var(--primary);
            font-size: var(--fs-md);
            font-weight: var(--fw-extrabold);
            line-height: 1.4;
            margin: 0;
        }
    }

    /* === Booking Steps Section === */
    .step-list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
        position: relative;
    }

    .step-item {
        position: relative;
        text-align: center;
        padding: 0 10px;

        &:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 37px;
            left: calc(50% + 45px);
            width: calc(100% - 72px);
            height: 1px;
            background: linear-gradient(90deg, #c9daef, transparent);
        }

        >span {
            display: none;
        }

        h3 {
            color: var(--primary);
            font-size: var(--fs-sm);
            font-weight: var(--fw-extrabold);
            line-height: 1.35;
            margin: 0 0 8px;
        }

        p {
            color: var(--text-muted);
            font-size: var(--fs-sm);
            line-height: 1.6;
            margin: 0;
        }
    }

    .step-icon {
        width: 74px;
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        border-radius: 50%;
        background: #fff;
        color: var(--primary-hover);
        border: 1px solid var(--line);
        box-shadow: 0 12px 28px rgba(8, 36, 92, .10);
        font-size: var(--fs-icon-lg);
    }

    .step-content {
        display: contents;
    }

    /* === Destinations Section === */
    .destination-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;

        &.owl-loaded {
            display: block;
        }
    }

    .destination-card {
        display: flex;
        flex-direction: column;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        color: var(--primary);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

        &:hover {
            transform: translateY(-4px);
            border-color: var(--border-hover);
            box-shadow: var(--shadow-lg);
            color: var(--primary);

            >img {
                transform: scale(1.035);
            }
        }

        >img {
            width: 100%;
            height: 148px;
            overflow: hidden;
            background: var(--soft);
            display: block;
            object-fit: cover;
            transition: transform .28s ease;
        }

        div {
            display: flex;
            flex: 1;
            flex-direction: column;
            padding: 16px;

            h3 {
                color: var(--primary);
                font-size: var(--fs-sm);
                font-weight: var(--fw-extrabold);
                line-height: 1.35;
                margin: 0 0 8px;
            }

            p {
                color: var(--muted);
                font-size: var(--fs-sm);
                line-height: 1.6;
                margin: 0;
            }
        }
    }

    #destination-carousel {
        &.destination-list {
            .destination-card {
                display: flex;
                flex-direction: column;
            }
        }

        .owl-stage {
            display: flex;
        }

        .owl-item {
            display: flex;

            .destination-card {
                width: 100%;
            }
        }

        .owl-dots {
            text-align: center;
            margin-top: 20px;
        }

        .owl-dot {
            width: 8px;
            height: 8px;
            background: #d0dff0;
            border-radius: 50%;
            display: inline-block;
            margin: 0 4px;
            transition: all .3s ease;

            &.active {
                width: 24px;
                border-radius: 999px;
                background: var(--primary-hover);
            }
        }
    }

    /* === Statistics Section === */
    .statistics {
        padding: 26px 0 50px;
    }

    .stats-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        overflow: hidden;
        border-radius: var(--radius-md);
        background: linear-gradient(100deg, #08245c 0%, #0b4ab8 62%, #f46b2a 140%);
        box-shadow: 0 22px 44px rgba(8, 36, 92, .22);
    }

    .stats-item {
        min-height: 100px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-content: center;
        column-gap: 15px;
        row-gap: 5px;
        padding: 10px 26px;
        color: #fff;
        border-right: 1px solid rgba(255, 255, 255, .28);

        &:last-child {
            border-right: 0;
        }

        i {
            grid-row: span 2;
            font-size: var(--fs-xxl);
        }

        strong {
            font-size: var(--fs-xxl);
            line-height: 1;
        }

        span {
            font-size: var(--fs-sm);
            opacity: .92;
        }
    }

    /* === FAQ Section === */
    .faq-preview {
        padding-top: 26px;
    }

    .faq-preview-grid {
        display: grid;
        grid-template-columns: 1.35fr .9fr;
        gap: 24px;
        align-items: stretch;
    }

    .faq-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 12px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .faq-item {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 15px 18px;
        cursor: pointer;
        transition: background .18s ease;

        &:hover,
        &.open {
            background: #eef5ff;

            i {
                transform: rotate(180deg);
            }
        }

        h3 {
            color: var(--primary);
            font-size: var(--fs-sm);
            font-weight: var(--fw-extrabold);
            margin: 0;
        }
    }

    .faq-answer {
        display: none;

        &.active {
            display: block;
            padding: 0 18px 16px;
        }

        p {
            color: var(--muted);
            font-size: var(--fs-sm);
            margin: 0;
        }
    }

    .faq-image {
        min-height: 100%;
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-md);

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

/* === Footer === */
footer.footer {
    position: relative;
    padding: 48px 0 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(238, 246, 255, .98)),
        linear-gradient(90deg, rgba(0, 44, 134, .08), rgba(255, 106, 33, .06));
    border-top: 1px solid var(--line);

    .footer-logo {
        display: inline-flex;
        align-items: center;
        line-height: 1;
        margin-bottom: 16px;

        span {
            &:first-child {
                color: var(--primary-hover);
            }

            &:last-child {
                color: var(--secondary);
            }
        }

        img {
            display: block;
            height: auto;
        }
    }

    p,
    li,
    a {
        color: var(--muted);
        font-size: var(--fs-sm);
    }

    h3 {
        color: var(--primary);
        font-size: var(--fs-sm);
        font-weight: var(--fw-extrabold);
        margin-bottom: 14px;
    }

    li {
        margin-bottom: 8px;
    }

    a:hover {
        color: var(--secondary);
    }

    .footer-social {
        display: flex;
        gap: 10px;

        a {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--primary-hover);
            color: #fff;
        }
    }

    .footer-contact {
        p {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }
    }

    .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 26px;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: var(--fs-xs);
    }
}

.page-breadcrumb {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    background-image:
        linear-gradient(180deg, rgba(8, 36, 92, .72), rgba(8, 36, 92, .58)),
        var(--breadcrumb-bg);
    background-size: cover;
    background-position: center;
    color: var(--white);

    .page-breadcrumb__inner {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
    }

    .page-breadcrumb__title {
        color: var(--white);
        font-size: var(--fs-xxl);
        font-weight: var(--fw-extrabold);
        line-height: 1.25;
        margin: 0 0 14px;
    }

    .page-breadcrumb__links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    a {
        color: rgba(255, 255, 255, .86);
        font-size: var(--fs-sm);
        font-weight: var(--fw-md);
        transition: color .18s ease;

        &:hover {
            color: var(--white);
        }
    }

    &__sep {
        color: rgba(255, 255, 255, .62);
        font-size: var(--fs-sm);
        user-select: none;
    }

    &__current {
        color: var(--white);
        font-size: var(--fs-sm);
        font-weight: var(--fw-extrabold);
    }
}

.page-content {
    background: linear-gradient(180deg, #f7fbff 0%, #fff 34%, #f8fbff 66%, #fff 100%);
    min-height: 100vh;

    .wrapper {
        max-width: 1200px;
        padding: 0 20px;
        margin: 0 auto;
    }

    /* === Routes Page === */
    &.routes-page {

        .routes-section {
            padding: 48px 0;
        }

        .page-header {
            text-align: center;
            margin-bottom: 52px;

            h1 {
                color: var(--primary);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-extrabold);
                margin: 0 0 12px;
            }

            p {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0;
            }
        }

        .all-routes {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .city-card {
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            overflow: visible;

            &:hover {
                transform: none;
                border-color: transparent;
                box-shadow: none;
            }
        }

        .city-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            background: transparent;
            border-bottom: 2px solid var(--line);
            margin-bottom: 16px;

            h3 {
                flex: 1;
                color: var(--primary);
                font-size: var(--fs-lg);
                font-weight: var(--fw-extrabold);
                margin: 0;
                text-transform: capitalize;
            }

            .route-count {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 4px 10px;
                background: var(--secondary-soft);
                color: var(--secondary);
                font-size: var(--fs-xs);
                font-weight: var(--fw-extrabold);
                border-radius: 999px;
            }
        }

        .route-list {
            padding: 0 0 0 20px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px 18px;
        }

        .route-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 10px;
            color: var(--text-muted);
            font-size: var(--fs-sm);
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            transition: background .18s ease, color .18s ease, border-color .18s ease;

            &:hover {
                background: var(--soft);
                color: var(--primary);
                border-color: var(--primary-hover);

                i {
                    color: var(--secondary);
                }
            }

            i {
                font-size: var(--fs-md);
                color: var(--primary-hover);
                transition: color .18s ease;
                flex-shrink: 0;
            }

            span {
                text-transform: capitalize;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    /* === Timetable Page === */
    &.timetable-page {

        .page-header {
            text-align: center;
            padding: 48px 0 40px;

            h1 {
                color: var(--primary);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-extrabold);
                margin: 0 0 12px;
            }

            .page-description {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0;
                max-width: 600px;
                margin: 0 auto;
            }
        }

        .operators-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding-bottom: 60px;
        }

        .operator-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            padding: 24px 20px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            transition: all 0.25s ease;
            cursor: pointer;

            &:hover {
                border-color: var(--primary-hover);
                box-shadow: var(--shadow-md);
                transform: translateY(-4px);

                .operator-link-text {
                    color: var(--secondary);
                }
            }
        }

        .operator-logo {
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--soft);
            border-radius: var(--radius-md);
            padding: 12px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .operator-initials {
                font-size: 26px;
                font-weight: var(--fw-extrabold);
                color: var(--primary);
            }
        }

        .operator-info {
            text-align: center;
            width: 100%;
        }

        .operator-name {
            color: var(--primary);
            font-size: var(--fs-md);
            font-weight: var(--fw-bold);
            margin: 0 0 6px;
        }

        .operator-link-text {
            color: var(--primary-hover);
            font-size: var(--fs-xs);
            font-weight: var(--fw-medium);
            transition: color 0.18s ease;
        }
    }

    /* === Timetable Detail Page === */
    &.timetable-detail-page {

        .operator-header {
            display: flex;
            align-items: center;
            gap: 32px;
            padding: 48px 0 40px;
            border-bottom: 2px solid var(--line);
            margin-bottom: 40px;
        }

        .operator-logo-large {
            width: 140px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--soft);
            border-radius: var(--radius-md);
            padding: 20px;
            flex-shrink: 0;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .operator-initials {
                font-size: 40px;
                font-weight: var(--fw-extrabold);
                color: var(--primary);
            }
        }

        .operator-header-info {
            flex: 1;

            h1 {
                color: var(--primary);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-extrabold);
                margin: 0 0 12px;
            }

            .route-count {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: var(--text-muted);
                font-size: var(--fs-md);
                font-weight: var(--fw-medium);

                svg {
                    flex-shrink: 0;
                }
            }
        }

        .operator-info {
            margin: 0 0 44px;
        }

        .info-block {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
            gap: 32px;
            align-items: start;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            box-shadow: none;
            padding: 0;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 4px;
                background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 52%, var(--secondary) 100%);
            }

            &.info-block--wide {
                grid-template-columns: 1fr;

                .info-text {
                    grid-column: 1;
                    border-right: 0;
                }
            }

            &.info-block--has-gallery {
                .info-address {
                    grid-row: 2;
                    margin-top: 16px;
                }

                .map-iframe {
                    grid-row: 3;
                    margin-bottom: 0px;
                }
            }
        }

        .info-text {
            grid-column: 1;
            grid-row: 1 / span 3;
            color: var(--ink);
            font-size: var(--fs-md);
            line-height: 1.9;
            font-weight: var(--fw-sm);
            padding: 28px 0 28px 28px;
            border-right: 1px solid rgba(8, 36, 92, .10);

            &:empty {
                display: none;
            }

            p {
                margin: 0 0 14px;
            }

            a {
                color: var(--primary-hover);

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

            strong {
                font-size: var(--fs-md);
                font-weight: var(--fw-bold);
            }

            table {
                width: 100%;
                border-collapse: collapse;
                margin: 14px 0;

                th,
                td {
                    padding: 10px 12px;
                    border: 1px solid rgba(8, 36, 92, .10);
                    text-align: left;
                }

                th {
                    background: var(--soft);
                    color: var(--primary);
                    font-weight: var(--fw-bold);
                }
            }
        }

        .info-address {
            grid-column: 2;
            grid-row: 1;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 28px 28px 0 0;
            padding: 12px 0 14px;
            background: transparent;
            border-top: 2px solid var(--primary);
            border-bottom: 1px solid rgba(8, 36, 92, .12);
            border-radius: 0;
            color: var(--text-muted);
            font-size: var(--fs-sm);
            line-height: 1.65;

            &::before {
                content: "";
                width: 8px;
                height: 8px;
                margin-top: 8px;
                border-radius: 2px;
                background: var(--secondary);
                flex-shrink: 0;
            }

            strong {
                color: var(--primary);
                font-weight: var(--fw-bold);
            }
        }

        .map-iframe {
            grid-column: 2;
            grid-row: 2;
            min-height: 220px;
            margin: 0 28px 0 0;
            background: var(--soft);
            border: 1px solid rgba(8, 36, 92, .14);
            border-radius: 0;
            overflow: hidden;

            iframe {
                display: block;
                width: 100% !important;
                height: 100% !important;
                min-height: 220px;
                border: 0;
            }
        }

        .operator-gallery {
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
            margin: 28px 28px 0 0;
            padding: 0 0 14px;
            border-bottom: 1px solid rgba(8, 36, 92, .12);
        }

        .operator-gallery-main {
            margin: 0;
            background: var(--soft);
            border: 1px solid rgba(8, 36, 92, .14);
            overflow: hidden;

            img {
                display: block;
                width: 100%;
                aspect-ratio: 4 / 3;
                object-fit: cover;
                background: var(--soft);
            }
        }

        .operator-gallery-thumbs {
            display: flex;
            gap: 8px;
            margin: 10px 0 0;
            padding: 2px 2px 4px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }

        .operator-gallery-thumb {
            display: block;
            flex: 0 0 64px;
            width: 64px;
            aspect-ratio: 1;
            padding: 0;
            background: var(--white);
            border: 1px solid rgba(8, 36, 92, .14);
            border-radius: 0;
            cursor: pointer;
            overflow: hidden;
            transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;

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

            &:hover,
            &.is-active {
                border-color: var(--secondary);
            }

            &.is-active {
                box-shadow: 0 0 0 2px var(--secondary-soft);
            }
        }

        .routes-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-bottom: 60px;
        }

        .route-item {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            overflow: hidden;
            transition: border-color 0.18s ease;

            &.is-open {
                border-color: var(--primary-hover);

                .route-toggle svg {
                    transform: rotate(180deg);
                }

                .route-stops {
                    max-height: 3000px;
                    opacity: 1;
                }
            }
        }

        .route-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 20px 24px;
            cursor: pointer;
            background: var(--white);
            transition: background 0.18s ease;

            &:hover {
                background: var(--soft);
            }
        }

        .route-info {
            flex: 1;
        }

        .route-name {
            color: var(--primary);
            font-size: var(--fs-lg);
            font-weight: var(--fw-bold);
            margin: 0 0 6px;
        }

        .stops-count {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            background: var(--secondary-soft);
            color: var(--secondary);
            font-size: var(--fs-xs);
            font-weight: var(--fw-bold);
            border-radius: 999px;
        }

        .route-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: transparent;
            border: 1px solid var(--line);
            border-radius: 50%;
            color: var(--primary);
            cursor: pointer;
            transition: all 0.18s ease;
            flex-shrink: 0;

            &:hover {
                background: var(--primary);
                border-color: var(--primary);
                color: var(--white);
            }

            svg {
                transition: transform 0.25s ease;
            }
        }

        .route-stops {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease;
            border-top: 1px solid var(--line);
        }

        .stops-list {
            list-style: none;
            margin: 0;
            padding: 24px 24px 24px 44px;
            counter-reset: stop-counter;
        }

        .stop-item {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 12px 0;
            counter-increment: stop-counter;

            &::before {
                content: '';
                position: absolute;
                left: 11px;
                top: 32px;
                width: 2px;
                height: calc(100% - 20px);
                background: var(--line);
            }

            &:last-child::before {
                display: none;
            }

            &.is-first .stop-marker {
                background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
                color: var(--white);
                font-weight: var(--fw-extrabold);
            }

            &.is-last .stop-marker {
                background: linear-gradient(135deg, var(--secondary) 0%, #ff7a47 100%);
                color: var(--white);
                font-weight: var(--fw-extrabold);
            }
        }

        .stop-marker {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: var(--soft);
            border: 2px solid var(--white);
            border-radius: 50%;
            color: var(--primary);
            font-size: 10px;
            font-weight: var(--fw-bold);
            flex-shrink: 0;
            box-shadow: 0 0 0 1px var(--line);
            position: relative;
            z-index: 1;

            &::after {
                content: counter(stop-counter);
            }
        }

        .stop-details {
            flex: 1;
            padding-top: 2px;
        }

        .stop-name {
            display: block;
            color: var(--primary);
            font-size: var(--fs-md);
            font-weight: var(--fw-medium);
            margin-bottom: 4px;
        }

        .stop-province {
            display: block;
            color: var(--text-muted);
            font-size: var(--fs-xs);
        }

        .no-routes {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 20px;
            text-align: center;

            svg {
                color: var(--text-muted);
                opacity: 0.5;
                margin-bottom: 24px;
            }

            p {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0;
            }
        }
    }

    /* === Blog Pages === */
    &.blogs-page {

        .page-header {
            text-align: center;
            padding: 48px 0 40px;

            h1 {
                color: var(--primary);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-extrabold);
                margin: 0 0 12px;
            }

            .page-description {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0;
                max-width: 700px;
                margin: 0 auto;
            }
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            padding-bottom: 60px;
        }

        .blog-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            overflow: hidden;
            transition: all 0.25s ease;

            &:hover {
                border-color: var(--primary-hover);
                box-shadow: var(--shadow-md);
                transform: translateY(-4px);

                .blog-title {
                    color: var(--primary-hover);
                }

                .blog-read-more {
                    color: var(--secondary);
                }
            }
        }

        .blog-card-link {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .blog-image {
            width: 100%;
            height: 220px;
            overflow: hidden;
            background: var(--soft);

            img {
                width: 100%;
                height: 100%;
                object-position: 0% 0%;
                object-fit: cover;
                transition: transform 0.3s ease;
            }
        }

        .blog-card:hover .blog-image img {
            transform: scale(1.05);
        }

        .blog-content {
            padding: 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .blog-date {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
            font-size: var(--fs-xs);
            font-weight: var(--fw-medium);
            margin-bottom: 12px;

            svg {
                flex-shrink: 0;
            }
        }

        .blog-title {
            color: var(--primary);
            font-size: var(--fs-lg);
            font-weight: var(--fw-bold);
            margin: 0 0 12px;
            line-height: 1.4;
            transition: color 0.18s ease;
        }

        .blog-excerpt {
            color: var(--text-muted);
            font-size: var(--fs-sm);
            line-height: 1.6;
            margin: 0 0 16px;
            flex: 1;
        }

        .blog-read-more {
            color: var(--primary-hover);
            font-size: var(--fs-sm);
            font-weight: var(--fw-bold);
            transition: color 0.18s ease;
        }
    }

    /* === Blog Detail Page === */
    &.blog-detail-page {
        .wrapper {
            max-width: 900px;
        }

        .article-header {
            text-align: center;
            padding: 48px 0 32px;
            border-bottom: 2px solid var(--line);
            margin-bottom: 32px;
        }

        .article-title {
            color: var(--primary);
            font-size: var(--fs-xxl);
            font-weight: var(--fw-extrabold);
            margin: 0 0 16px;
            line-height: 1.3;
        }

        .article-date {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-muted);
            font-size: var(--fs-sm);
            font-weight: var(--fw-medium);

            svg {
                flex-shrink: 0;
            }
        }

        .article-featured-image {
            width: 100%;
            max-height: 500px;
            overflow: hidden;
            border-radius: var(--radius-md);
            margin-bottom: 40px;

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

        .article-content {
            color: var(--primary);
            font-size: var(--fs-md);
            line-height: 1.8;
            padding-bottom: 40px;

            p {
                margin: 0 0 20px;
            }

            h3 {
                color: var(--primary);
                font-size: var(--fs-lg);
                font-weight: var(--fw-bold);
                margin: 32px 0 16px;
            }

            strong {
                font-weight: var(--fw-bold);
                color: var(--primary);
            }

            img {
                max-width: 100%;
                height: auto;
                border-radius: var(--radius-md);
                margin: 24px 0;
            }

            ul,
            ol {
                margin: 0 0 20px;
                padding-left: 28px;
            }

            li {
                margin-bottom: 8px;
            }

            a {
                color: var(--primary-hover);
                font-weight: var(--fw-medium);

                &:hover {
                    color: var(--secondary);
                }
            }
        }

        .article-footer {
            padding: 32px 0 60px;
            border-top: 2px solid var(--line);
        }

        .back-to-blog {
            display: inline-flex;
            align-items: center;
            padding: 12px 24px;
            color: var(--primary);
            font-size: var(--fs-sm);
            font-weight: var(--fw-bold);
            background: var(--soft);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            transition: all 0.18s ease;

            &:hover {
                background: var(--primary);
                border-color: var(--primary);
                color: var(--white);
            }
        }
    }

    /* === Contact Page === */
    &.contact-page {
        .wrapper {
            max-width: 1000px;
        }

        .page-header {
            text-align: center;
            padding: 48px 0 40px;

            h1 {
                color: var(--primary);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-extrabold);
                margin: 0 0 12px;
            }

            .page-description {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0;
                max-width: 700px;
                margin: 0 auto;
            }
        }

        .contact-list {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding-bottom: 40px;
        }

        .contact-card {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 32px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            transition: all 0.25s ease;

            &:hover {
                border-color: var(--primary-hover);
                box-shadow: var(--shadow-md);
                transform: translateY(-2px);
            }
        }

        .contact-card__icon {
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--soft);
            border-radius: var(--radius-md);
            flex-shrink: 0;

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

            i {
                color: var(--primary);
            }
        }

        .contact-card--line .contact-card__icon {
            background: #e8faf0;
            color: #06c755;
        }

        .contact-card--facebook .contact-card__icon {
            background: #e7f3ff;
            color: #1877f2;
        }

        .contact-card--email .contact-card__icon {
            background: var(--soft);
            color: var(--primary);
        }

        .contact-card__body {
            flex: 1;

            h2 {
                color: var(--primary);
                font-size: var(--fs-lg);
                font-weight: var(--fw-bold);
                margin: 0 0 8px;
            }

            p {
                color: var(--text-muted);
                font-size: var(--fs-sm);
                line-height: 1.6;
                margin: 0;
            }
        }

        .contact-email-address {
            display: inline-block;
            margin-top: 8px;
            color: var(--primary-hover);
            font-size: var(--fs-sm);
            font-weight: var(--fw-medium);
        }

        .contact-card__action {
            flex-shrink: 0;
        }

        .btn-contact {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            color: var(--white);
            font-size: var(--fs-sm);
            font-weight: var(--fw-bold);
            background: var(--primary);
            border-radius: var(--radius-sm);
            transition: all 0.18s ease;

            &:hover {
                background: var(--primary-hover);
                transform: translateX(4px);
            }

            i {
                transition: transform 0.18s ease;
            }

            &:hover i {
                transform: translateX(4px);
            }
        }

        .btn-contact--line {
            background: linear-gradient(135deg, #06c755 0%, #00b448 100%);

            &:hover {
                background: linear-gradient(135deg, #05b04c 0%, #009d3e 100%);
            }
        }

        .btn-contact--facebook {
            background: linear-gradient(135deg, #1877f2 0%, #0c5fcd 100%);

            &:hover {
                background: linear-gradient(135deg, #1668d6 0%, #0b55b8 100%);
            }
        }

        .btn-contact--email {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
        }

        .contact-footer {
            padding: 32px;
            background: var(--soft);
            border-radius: var(--radius-md);
            text-align: center;
            margin-bottom: 60px;

            p {
                color: var(--text-muted);
                font-size: var(--fs-sm);
                line-height: 1.7;
                margin: 0;
                max-width: 700px;
                margin: 0 auto;
            }
        }
    }

    /* === FAQs Page === */
    &.faqs-page {
        .wrapper {
            max-width: 900px;
        }

        .page-header {
            text-align: center;
            padding: 48px 0 40px;

            h1 {
                color: var(--primary);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-extrabold);
                margin: 0 0 12px;
            }

            .page-description {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0;
                max-width: 700px;
                margin: 0 auto;
            }
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding-bottom: 60px;
        }

        .faq-item {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            overflow: hidden;
            transition: border-color 0.18s ease;

            &.is-open {
                border-color: var(--primary-hover);

                .faq-icon {
                    transform: rotate(180deg);
                }

                .faq-answer {
                    max-height: 1000px;
                    opacity: 1;
                    padding: 0 28px 24px;
                }
            }
        }

        .faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 24px 28px;
            background: transparent;
            border: 0;
            cursor: pointer;
            transition: background 0.18s ease;
            text-align: left;

            &:hover {
                background: var(--soft);
            }

            h3 {
                flex: 1;
                color: var(--primary);
                font-size: var(--fs-lg);
                font-weight: var(--fw-bold);
                margin: 0;
                line-height: 1.4;
            }
        }

        .faq-icon {
            flex-shrink: 0;
            color: var(--primary);
            transition: transform 0.25s ease;
        }

        .faq-answer {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;

            p {
                color: var(--text-muted);
                font-size: var(--fs-sm);
                line-height: 1.7;
                margin: 0;
            }
        }
    }

    /* === How to Book Page === */
    &.how-to-book-page {
        .wrapper {
            max-width: 1000px;
        }

        .page-header {
            text-align: center;
            padding: 48px 0 40px;

            h1 {
                color: var(--primary);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-extrabold);
                margin: 0 0 12px;
            }

            .page-description {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0;
            }
        }

        .booking-steps {
            display: flex;
            flex-direction: column;
            gap: 32px;
            padding-bottom: 48px;
        }

        .step-card {
            display: flex;
            gap: 28px;
            padding: 32px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            transition: all 0.25s ease;

            &:hover {
                border-color: var(--primary-hover);
                box-shadow: var(--shadow-md);
                transform: translateY(-2px);

                .step-number {
                    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
                    transform: scale(1.1);
                }
            }
        }

        .step-number {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
            color: var(--white);
            font-size: 28px;
            font-weight: var(--fw-extrabold);
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(8, 36, 92, 0.15);
            transition: all 0.25s ease;
        }

        .step-content {
            flex: 1;
        }

        .step-title {
            color: var(--primary);
            font-size: var(--fs-xl);
            font-weight: var(--fw-bold);
            margin: 0 0 12px;
        }

        .step-description {
            color: var(--text-muted);
            font-size: var(--fs-sm);
            line-height: 1.7;
            margin: 0 0 20px;
        }

        .step-image {
            width: 100%;
            max-width: 500px;
            height: 280px;
            background: var(--soft);
            border-radius: var(--radius-sm);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

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

        .booking-cta {
            text-align: center;
            padding: 48px 40px;
            background: linear-gradient(135deg, var(--soft) 0%, #e8f2ff 100%);
            border-radius: var(--radius-md);
            margin-bottom: 48px;

            h2 {
                color: var(--primary);
                font-size: var(--fs-xl);
                font-weight: var(--fw-bold);
                margin: 0 0 12px;
            }

            p {
                color: var(--text-muted);
                font-size: var(--fs-md);
                margin: 0 0 24px;
            }
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 32px;
            color: var(--white);
            font-size: var(--fs-md);
            font-weight: var(--fw-bold);
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
            border-radius: var(--radius-sm);
            transition: all 0.18s ease;

            &:hover {
                background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
                transform: translateY(-2px);
                box-shadow: var(--shadow-md);
            }
        }

        .help-links {
            padding-bottom: 60px;

            h3 {
                color: var(--primary);
                font-size: var(--fs-lg);
                font-weight: var(--fw-bold);
                text-align: center;
                margin: 0 0 28px;
            }
        }

        .help-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .help-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
            padding: 28px 24px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            transition: all 0.25s ease;

            &:hover {
                border-color: var(--primary-hover);
                box-shadow: var(--shadow-md);
                transform: translateY(-4px);

                svg {
                    color: var(--secondary);
                    transform: scale(1.1);
                }
            }

            svg {
                color: var(--primary);
                transition: all 0.25s ease;
            }

            h4 {
                color: var(--primary);
                font-size: var(--fs-md);
                font-weight: var(--fw-bold);
                margin: 0;
            }

            p {
                color: var(--text-muted);
                font-size: var(--fs-xs);
                margin: 0;
            }
        }
    }
}

/* ══════════════════════════════════════════════════════════════
COOKIE AGREEMENT
══════════════════════════════════════════════════════════════ */
.cookie-agreement {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: calc(100% - 48px);
    max-width: 920px;
    background: #001664;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    animation: cookieSlideUp .35s cubic-bezier(.22, .68, 0, 1.2) both;

    &.cookie-hiding {
        animation: cookieSlideDown .28s ease-in forwards;
    }
}

.cookie-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}

.cookie-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    flex-shrink: 0;

    i {
        font-size: 20px;
        color: #fff;
    }
}

.cookie-text {
    flex: 1;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .82);
    line-height: 1.6;
    margin: 0;

    a {
        color: #fff;
        font-weight: var(--fw-semibold);
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
            opacity: .8;
        }
    }
}

.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--secondary);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, transform .1s;

    &:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }

    &:active {
        transform: translateY(0);
    }
}

@keyframes cookieSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes cookieSlideDown {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
}

/* === Responsive Design === */

@media (max-width: 1199.98px) {
    .main-content {

        .route-list,
        .destination-list {
            grid-template-columns: repeat(3, 1fr);
        }

        .blog-list {
            grid-template-columns: repeat(3, 1fr);
        }

        .hero-media {
            width: 46vw;
        }

        .form-search {
            .card-wrapper {
                height: 500px;

                .card-content {
                    padding-top: 80px;

                    .card-title {
                        font-size: var(--fs-xxl);
                    }

                    .card-form {
                        max-width: 900px;
                    }
                }
            }
        }
    }
}

@media (max-width: 991.98px) {
    header {
        nav.navbar {
            .language-switch {
                margin-top: 12px;
                margin-left: 0 !important;
            }
        }
    }

    .main-content {
        .form-search {
            .card-wrapper {
                height: 500px;

                .card-content {
                    padding-top: 60px;

                    .card-title {
                        font-size: var(--fs-xl);
                    }

                    .card-form {
                        max-width: 100%;
                        padding: 0 20px;
                    }
                }
            }
        }

        .hero-media {
            display: none;
        }

        .features {
            padding-top: 62px;
            margin-top: -20px;
        }

        .benefit-list,
        .stats-list,
        .blog-list {
            grid-template-columns: repeat(2, 1fr);
        }

        .benefit-item {
            &:nth-child(2) {
                border-right: 0;
            }
        }

        .step-list {
            grid-template-columns: repeat(3, 1fr);
            row-gap: 28px;
        }

        .step-item {
            &::after {
                display: none;
            }
        }

        .destination-list {
            grid-template-columns: repeat(3, 1fr);
        }

        .faq-preview-grid {
            grid-template-columns: 1fr;
        }
    }

    .page-content {
        &.routes-page {
            .city-grid {
                gap: 24px;
            }

            .page-header {
                h1 {
                    font-size: var(--fs-xl);
                }
            }

            .alphabet-header {
                h2 {
                    font-size: var(--fs-xl);
                }
            }

            .route-list {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        &.timetable-page {
            .operators-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
            }

            .operator-card {
                padding: 20px 16px;
                gap: 14px;
            }

            .operator-logo {
                width: 80px;
                height: 80px;
                padding: 10px;

                .operator-initials {
                    font-size: 22px;
                }
            }

            .operator-name {
                font-size: var(--fs-sm);
            }
        }

        &.timetable-detail-page {
            .operator-header {
                gap: 24px;
                padding: 40px 0 32px;
            }

            .operator-logo-large {
                width: 120px;
                height: 120px;
            }

            .operator-header-info h1 {
                font-size: var(--fs-xl);
            }

            .info-block {
                grid-template-columns: 1fr;
                gap: 18px;
                padding: 0;
            }

            .info-text,
            .info-address,
            .map-iframe,
            .operator-gallery {
                grid-column: 1;
            }

            .info-address,
            .map-iframe {
                grid-row: auto;
            }

            .info-text {
                grid-row: auto;
                padding: 24px 24px 0;
                border-right: 0;
            }

            .info-address {
                margin: 0 24px;
            }

            .map-iframe {
                margin: 0 24px;
            }

            .operator-gallery {
                grid-row: auto;
                margin: 0 24px;
            }

            .info-block--has-gallery {
                .operator-gallery {
                    grid-row: 1;
                }

                .info-text {
                    grid-row: 4;
                }

                .info-address {
                    grid-row: 3;
                }

                .map-iframe {
                    grid-row: 4;
                }
            }

            .operator-gallery-thumb {
                flex-basis: 62px;
                width: 62px;
            }
        }

        &.blogs-page {
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }

            .blog-image {
                height: 200px;
            }
        }

        &.blog-detail-page {
            .article-title {
                font-size: var(--fs-xl);
            }

            .article-featured-image {
                max-height: 400px;
            }
        }

        &.contact-page {
            .contact-card {
                padding: 28px;
            }

            .contact-card__icon {
                width: 60px;
                height: 60px;

                img {
                    width: 45px;
                    height: 45px;
                }
            }
        }

        &.faqs-page {
            .faq-question {
                padding: 20px 24px;

                h3 {
                    font-size: var(--fs-md);
                }
            }

            .faq-item.is-open .faq-answer {
                padding: 0 24px 20px;
            }
        }
    }
}

@media (max-width: 768px) {
    header {
        nav.navbar {
            .navbar-brand {
                font-size: var(--fs-xl);
            }
        }
    }

    footer.footer {
        .footer-logo {
            font-size: var(--fs-xl);
        }
    }

    .page-breadcrumb {
        min-height: 210px;
        padding: 44px 16px;
        gap: 6px;

        .page-breadcrumb__title {
            font-size: var(--fs-xl);
            margin-bottom: 12px;
        }

        a,
        &__sep,
        &__current {
            font-size: var(--fs-xs);
        }
    }

    .main-content {
        .wrapper {
            padding: 0 16px;
        }

        .form-search {
            .card-wrapper {
                height: 600px;

                .card-content {
                    padding-top: 40px;

                    .card-title {
                        font-size: var(--fs-xl);
                        padding: 0 20px;
                    }

                    .card-form {
                        max-width: 100%;
                        padding: 0 16px;
                    }
                }
            }
        }

        .hero-media {
            display: none;
        }

        .features {
            padding-top: 56px;
            margin-top: -10px;
        }

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

        .benefit-list,
        .stats-list {
            grid-template-columns: 1fr;
        }

        .benefit-item,
        .stats-item {
            border-right: 0;
            border-bottom: 1px solid var(--line);
        }

        .stats-item {
            border-bottom-color: rgba(255, 255, 255, .28);
        }

        .section-head {
            align-items: flex-end;
        }

        .content-title {
            h2 {
                font-size: var(--fs-xl);
            }
        }

        .route-list {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            padding: 0 2px 8px;
            scroll-snap-type: x mandatory;
        }

        #route-carousel.route-list {
            display: block;
            overflow: visible;
            padding: 0;
        }

        .route-item {
            min-width: 236px;
            scroll-snap-align: start;
        }

        #route-carousel {
            .route-item {
                min-width: 0;
            }
        }

        /* === Booking Steps Mobile === */
        .booking-steps {
            padding-top: 38px;
            padding-bottom: 46px;
        }

        .step-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
            padding: 0;

            &::before {
                display: none;
            }
        }

        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 0 16px 28px;
            text-align: center;
            position: relative;

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

            &::after {
                display: none;
            }
        }

        .step-icon {
            width: 74px;
            height: 74px;
            flex-shrink: 0;
            margin: 0;
            position: relative;
            z-index: 2;
        }

        /* === Destination Carousel Mobile === */
        #destination-carousel {
            &.destination-list {
                display: block;
            }

            .destination-card {
                display: flex;
                flex-direction: column;
            }

            .owl-stage {
                display: flex;
            }

            .owl-item {
                display: flex;

                .destination-card {
                    width: 100%;
                }
            }

            .owl-dots {
                text-align: center;
                margin-top: 20px;
            }

            .owl-dot {
                width: 8px;
                height: 8px;
                background: #d0dff0;
                border-radius: 50%;
                display: inline-block;
                margin: 0 4px;
                transition: all .3s ease;

                &.active {
                    width: 24px;
                    border-radius: 999px;
                    background: var(--primary-hover);
                }
            }
        }

        .footer-bottom {
            flex-wrap: wrap;
            text-align: center;
        }
    }

    .page-content {
        .wrapper {
            padding: 0 16px;
        }

        &.routes-page {
            .routes-section {
                padding: 32px 0;
            }

            .page-header {
                margin-bottom: 36px;

                h1 {
                    font-size: var(--fs-lg);
                }

                p {
                    font-size: var(--fs-sm);
                }
            }

            .all-routes {
                gap: 32px;
            }

            .city-card-header {
                padding: 10px 0;

                h3 {
                    font-size: var(--fs-md);
                }
            }

            .route-list {
                padding: 0;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px 14px;
            }
        }

        &.timetable-page {
            .page-header {
                padding: 32px 0 28px;

                h1 {
                    font-size: var(--fs-xl);
                }

                .page-description {
                    font-size: var(--fs-sm);
                }
            }

            .operators-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
                padding-bottom: 40px;
            }

            .operator-card {
                padding: 20px 14px;
                gap: 12px;
            }

            .operator-logo {
                width: 70px;
                height: 70px;
                padding: 10px;

                .operator-initials {
                    font-size: 20px;
                }
            }

            .operator-name {
                font-size: var(--fs-sm);
                margin-bottom: 4px;
            }

            .operator-link-text {
                font-size: 11px;
            }
        }

        &.timetable-detail-page {
            .operator-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
                padding: 32px 0 28px;
            }

            .operator-logo-large {
                width: 100px;
                height: 100px;
                padding: 16px;

                .operator-initials {
                    font-size: 32px;
                }
            }

            .operator-header-info h1 {
                font-size: var(--fs-lg);
            }

            .operator-header-info .route-count {
                font-size: var(--fs-sm);

                svg {
                    width: 16px;
                    height: 16px;
                }
            }

            .operator-info {
                margin-bottom: 28px;
            }

            .info-block {
                gap: 16px;
            }

            .info-text {
                font-size: var(--fs-sm);
                line-height: 1.75;
                padding: 20px 20px 0;
            }

            .info-address {
                margin: 0 20px;
                padding: 12px 14px;
                padding-left: 0;
                padding-right: 0;
            }

            .map-iframe,
            .map-iframe iframe {
                min-height: 220px;
            }

            .map-iframe {
                margin: 0 20px;
            }

            .operator-gallery {
                margin: 0 20px;
                padding-bottom: 12px;
            }

            .operator-gallery-thumbs {
                gap: 10px;
            }

            .operator-gallery-thumb {
                flex-basis: 58px;
                width: 58px;
            }

            .routes-list {
                gap: 16px;
                padding-bottom: 40px;
            }

            .route-header {
                padding: 16px 20px;
            }

            .route-name {
                font-size: var(--fs-md);
            }

            .route-toggle {
                width: 32px;
                height: 32px;

                svg {
                    width: 18px;
                    height: 18px;
                }
            }

            .stops-list {
                padding: 20px 20px 20px 36px;
            }

            .stop-item {
                padding: 10px 0;
                gap: 12px;

                &::before {
                    left: 9px;
                }
            }

            .stop-marker {
                width: 20px;
                height: 20px;
                font-size: 9px;
            }

            .stop-name {
                font-size: var(--fs-sm);
            }

            .stop-province {
                font-size: 11px;
            }
        }

        &.blogs-page {
            .page-header {
                padding: 32px 0 28px;

                h1 {
                    font-size: var(--fs-xl);
                }

                .page-description {
                    font-size: var(--fs-sm);
                }
            }

            .blog-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                padding-bottom: 40px;
            }

            .blog-image {
                height: 240px;
            }

            .blog-content {
                padding: 20px;
            }

            .blog-title {
                font-size: var(--fs-md);
            }
        }

        &.blog-detail-page {
            .article-header {
                padding: 32px 0 24px;
                margin-bottom: 24px;
            }

            .article-title {
                font-size: var(--fs-lg);
                margin-bottom: 12px;
            }

            .article-date {
                font-size: var(--fs-xs);

                svg {
                    width: 16px;
                    height: 16px;
                }
            }

            .article-featured-image {
                max-height: 300px;
                margin-bottom: 32px;
            }

            .article-content {
                font-size: var(--fs-sm);
                line-height: 1.7;
                padding-bottom: 32px;

                h3 {
                    font-size: var(--fs-md);
                    margin: 24px 0 12px;
                }

                img {
                    margin: 20px 0;
                }
            }

            .article-footer {
                padding: 24px 0 40px;
            }

            .back-to-blog {
                padding: 10px 20px;
                font-size: var(--fs-xs);
            }
        }

        &.contact-page {
            .page-header {
                padding: 32px 0 28px;

                h1 {
                    font-size: var(--fs-xl);
                }

                .page-description {
                    font-size: var(--fs-sm);
                }
            }

            .contact-list {
                gap: 20px;
                padding-bottom: 32px;
            }

            .contact-card {
                flex-direction: column;
                align-items: flex-start;
                padding: 24px;
                gap: 20px;
            }

            .contact-card__icon {
                width: 60px;
                height: 60px;
            }

            .contact-card__body {
                h2 {
                    font-size: var(--fs-md);
                }

                p {
                    font-size: var(--fs-xs);
                }
            }

            .btn-contact {
                width: 100%;
                justify-content: center;
                padding: 12px 20px;
                font-size: var(--fs-xs);
            }

            .contact-footer {
                padding: 24px;
                margin-bottom: 40px;

                p {
                    font-size: var(--fs-xs);
                }
            }
        }

        &.faqs-page {
            .page-header {
                padding: 32px 0 28px;

                h1 {
                    font-size: var(--fs-xl);
                }

                .page-description {
                    font-size: var(--fs-sm);
                }
            }

            .faq-list {
                gap: 12px;
                padding-bottom: 40px;
            }

            .faq-question {
                padding: 18px 20px;
                gap: 16px;

                h3 {
                    font-size: var(--fs-sm);
                }
            }

            .faq-icon {
                width: 18px;
                height: 18px;
            }

            .faq-item.is-open .faq-answer {
                padding: 0 20px 18px;
            }

            .faq-answer p {
                font-size: var(--fs-xs);
            }
        }

        &.how-to-book-page {
            .page-header {
                padding: 32px 0 28px;

                h1 {
                    font-size: var(--fs-xl);
                }

                .page-description {
                    font-size: var(--fs-sm);
                }
            }

            .booking-steps {
                gap: 24px;
                padding-bottom: 32px;
            }

            .step-card {
                flex-direction: column;
                padding: 24px;
                gap: 20px;
            }

            .step-number {
                width: 56px;
                height: 56px;
                font-size: 24px;
            }

            .step-title {
                font-size: var(--fs-lg);
            }

            .step-image {
                max-width: 100%;
                height: 220px;
            }

            .booking-cta {
                padding: 32px 24px;
                margin-bottom: 32px;

                h2 {
                    font-size: var(--fs-lg);
                }

                p {
                    font-size: var(--fs-sm);
                }
            }

            .help-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .help-card {
                padding: 24px 20px;
            }
        }
    }
}

@media (max-width: 600px) {
    .cookie-agreement {
        bottom: 16px;
        width: calc(100% - 24px);
        border-radius: var(--radius-sm);
    }

    .cookie-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }

    .cookie-icon {
        display: none;
    }

    .cookie-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 550px) {
    .main-content {
        .form-search {
            .card-wrapper {
                height: 600px;

                .card-content {
                    padding-top: 30px;

                    .card-title h1 {
                        font-size: var(--fs-xxl);
                        padding: 0 16px;
                    }

                    .card-form {
                        max-width: 100%;
                        padding: 0 16px;
                    }
                }
            }
        }

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

    .page-content {
        &.routes-page {
            .route-list {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .route-link {
                padding: 10px 12px;

                span {
                    white-space: normal;
                }
            }
        }

        &.timetable-page {
            .operators-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .operator-card {
                padding: 18px;
                gap: 12px;
            }

            .operator-logo {
                width: 70px;
                height: 70px;
            }
        }

        &.timetable-detail-page {
            .operator-header {
                padding: 24px 0 20px;
            }

            .info-block {
                gap: 14px;
            }

            .info-text {
                padding: 18px 16px 0;
            }

            .info-address,
            .map-iframe,
            .operator-gallery {
                margin-left: 16px;
                margin-right: 16px;
            }

            .map-iframe,
            .map-iframe iframe {
                min-height: 190px;
            }

            .operator-gallery-thumb {
                flex-basis: 54px;
                width: 54px;
            }

            .route-header {
                padding: 14px 16px;
                gap: 12px;
            }

            .stops-list {
                padding: 16px 16px 16px 28px;
            }

            .stop-item {
                padding: 8px 0;
                gap: 10px;

                &::before {
                    left: 7px;
                }
            }

            .stop-marker {
                width: 18px;
                height: 18px;
                font-size: 8px;
            }
        }

        &.blogs-page {
            .blog-image {
                height: 200px;
            }

            .blog-content {
                padding: 16px;
            }

            .blog-title {
                font-size: var(--fs-sm);
            }

            .blog-excerpt {
                font-size: var(--fs-xs);
            }
        }

        &.blog-detail-page {
            .article-title {
                font-size: var(--fs-md);
            }

            .article-featured-image {
                max-height: 240px;
            }

            .article-content {
                font-size: var(--fs-xs);

                h3 {
                    font-size: var(--fs-sm);
                }
            }
        }

        &.contact-page {
            .contact-card {
                padding: 20px;
                gap: 16px;
            }

            .contact-card__icon {
                width: 55px;
                height: 55px;

                img {
                    width: 38px;
                    height: 38px;
                }
            }

            .contact-footer {
                padding: 20px;
            }
        }

        &.faqs-page {
            .faq-question {
                padding: 16px;

                h3 {
                    font-size: var(--fs-xs);
                }
            }

            .faq-item.is-open .faq-answer {
                padding: 0 16px 16px;
            }
        }

        &.how-to-book-page {
            .step-card {
                padding: 20px;
                gap: 16px;
            }

            .step-number {
                width: 48px;
                height: 48px;
                font-size: 20px;
            }

            .step-title {
                font-size: var(--fs-md);
            }

            .step-description {
                font-size: var(--fs-xs);
            }

            .step-image {
                height: 180px;
            }

            .booking-cta {
                padding: 24px 20px;

                h2 {
                    font-size: var(--fs-md);
                }

                p {
                    font-size: var(--fs-xs);
                }
            }

            .btn-primary {
                padding: 12px 24px;
                font-size: var(--fs-sm);
            }

            .help-links h3 {
                font-size: var(--fs-md);
                margin-bottom: 20px;
            }

            .help-card {
                padding: 20px;
                gap: 12px;

                svg {
                    width: 28px;
                    height: 28px;
                }

                h4 {
                    font-size: var(--fs-sm);
                }
            }
        }
    }
}