/* Japan trip typography scale. Loaded after each page's component CSS. */
:root {
    --jp-type-page: 28px;
    --jp-type-page-mobile: 22px;
    --jp-type-section: 20px;
    --jp-type-section-mobile: 18px;
    --jp-type-card: 16px;
    --jp-type-body: 14px;
    --jp-type-body-mobile: 14px;
    --jp-type-meta: 13px;
    --jp-type-meta-mobile: 12px;
    --jp-type-button: 16px;
    --jp-type-button-mobile: 15px;
    --jp-space-section: 56px;
    --jp-space-section-mobile: 32px;
    --jp-space-title-content: 28px;
    --jp-space-title-content-mobile: 18px;
    --jp-space-card-gap: 20px;
    --jp-space-card-gap-mobile: 12px;
    --jp-space-card-padding: 24px;
    --jp-space-card-padding-mobile: 16px;
}

/* Home and list pages */
.jp-trip-hero .hero-content h1 {
    /* Keep the desktop hero title aligned with the flight and bus homepages. */
    font-size: 50px;
    line-height: 1.2;
}

.jp-trip-hero .hero-content p {
    font-size: 16px;
    line-height: 1.6;
}

.jp-trip-hero .search-container input {
    font-size: 16px;
}

.jp-trip-hero .search-btn {
    font-size: var(--jp-type-button);
}

.jp-section .section-head h2 {
    font-size: 24px;
    line-height: 1.35;
}

.jp-section .section-head p,
.about-text p,
.service-item p {
    font-size: var(--jp-type-body);
    line-height: 1.7;
}

.about-text h3 {
    font-size: 24px;
    line-height: 1.35;
}

.service-item h3 {
    font-size: 18px;
    line-height: 1.4;
}

.motto-tag,
.loading-text,
.list-count {
    font-size: var(--jp-type-meta);
}

.trip-name {
    font-size: var(--jp-type-card);
    line-height: 1.45;
}

.trip-features-row {
    font-size: var(--jp-type-meta);
}

.trip-tag,
.badge-promo,
.badge-duration {
    font-size: 12px;
}

.promo-deadline-text {
    font-size: 11px;
}

.price-symbol {
    font-size: 13px;
}

.price-num {
    font-size: 22px;
}

.price-old,
.price-unit {
    font-size: 12px;
}

.btn-view-more,
.cta-btn-main {
    font-size: var(--jp-type-button);
}

.cta-content h2 {
    font-size: 34px;
    line-height: 1.25;
}

.cta-content p {
    font-size: 16px;
}

.list-header h1 {
    font-size: var(--jp-type-page);
    line-height: 1.3;
}

.list-header p {
    font-size: 16px;
    line-height: 1.6;
}

.list-search input {
    font-size: 16px;
}

/* Detail page */
.jp-detail-wrap .jp-breadcrumb {
    font-size: var(--jp-type-meta);
}

.jp-detail-wrap .jp-title {
    font-size: var(--jp-type-page);
    line-height: 1.35;
}

.jp-detail-wrap .jp-subtitle {
    font-size: 16px;
    line-height: 1.6;
}

.jp-detail-wrap .jp-tag {
    font-size: 12px;
}

.jp-detail-wrap .jp-spec-label {
    font-size: 15px;
}

.jp-detail-wrap .jp-spec-val {
    font-size: var(--jp-type-meta);
    line-height: 1.5;
}

.jp-detail-wrap .jp-section-title {
    font-size: var(--jp-type-section);
    line-height: 1.4;
}

.jp-detail-wrap .jp-highlight-item span,
.jp-detail-wrap .jp-fee-box-title {
    font-size: var(--jp-type-card);
}

.jp-detail-wrap .jp-desc-box {
    font-size: 15px;
    line-height: 1.8;
}

.jp-detail-wrap .jp-itin-card-name {
    font-size: 18px;
    line-height: 1.45;
}

.jp-detail-wrap .jp-itin-card-desc,
.jp-detail-wrap .jp-notes-box p {
    font-size: 14px;
    line-height: 1.75;
}

.jp-detail-wrap .jp-fee-list li {
    font-size: var(--jp-type-body);
    line-height: 1.65;
}

.floating-booking-bar .f-label {
    font-size: var(--jp-type-meta);
}

.floating-booking-bar .f-price {
    font-size: 26px;
}

.floating-booking-bar .f-btn-book,
.booking-modal .booking-btn,
.booking-modal .booking-select {
    font-size: var(--jp-type-button);
}

/* Booking drawer */
.booking-drawer .bk-drawer-title {
    font-size: 18px;
}

.booking-drawer .bk-ps-label {
    font-size: 12px;
}

.booking-drawer .bk-price-row {
    font-size: 15px;
}

.booking-drawer .bk-price-row.total {
    font-size: 18px;
}

.booking-drawer .bk-price-row.total .amt,
.booking-drawer .bk-confirm-total .ct-price {
    font-size: 22px;
}

.booking-drawer .bk-form-group label,
.booking-drawer .bk-confirm-row .ck {
    font-size: var(--jp-type-body);
}

.booking-drawer .bk-input,
.booking-drawer .bk-select {
    font-size: 16px;
}

.booking-drawer .bk-err-msg,
.booking-drawer .bk-promo-status {
    font-size: 12px;
}

.booking-drawer .bk-section-label {
    font-size: var(--jp-type-body);
}

.booking-drawer .bk-confirm-row .cv {
    font-size: 15px;
}

.booking-drawer .bk-confirm-total .ct-label {
    font-size: 16px;
}

.booking-drawer .bk-btn-back,
.booking-drawer .bk-btn-next,
.booking-drawer .bk-promo-apply-btn {
    font-size: var(--jp-type-button);
}

.booking-drawer .bk-success-panel h3 {
    font-size: 22px;
}

.booking-drawer .bk-success-panel p {
    font-size: 15px;
    line-height: 1.7;
}

/* Payment result page */
.pr-main .pr-title {
    font-size: var(--jp-type-page);
    line-height: 1.35;
}

.pr-main .pr-desc {
    font-size: 15px;
    line-height: 1.7;
}

.pr-main .pr-polling-bar,
.pr-main .pr-alert-box .ab-title {
    font-size: var(--jp-type-body);
}

.pr-main .pr-alert-box .ab-sub,
.pr-main .pr-email-notice .en-sub {
    font-size: var(--jp-type-meta);
    line-height: 1.6;
}

.pr-main .pr-email-notice .en-title {
    font-size: var(--jp-type-body);
}

.pr-main .pr-order-card-title {
    font-size: var(--jp-type-body);
}

.pr-main .pr-order-row {
    font-size: var(--jp-type-body);
}

.pr-main .pr-order-row .ov.is-amount {
    font-size: 22px;
}

.pr-main .pr-btn-primary,
.pr-main .pr-btn-secondary {
    font-size: var(--jp-type-button);
}

@media (max-width: 768px) {
    .jp-trip-hero .hero-content h1 {
        font-size: 28px;
    }

    .jp-trip-hero .hero-content p,
    .section-head p,
    .list-header p,
    .cta-content p {
        font-size: var(--jp-type-body-mobile);
    }

    .jp-section .section-head h2,
    .about-text h3,
    .jp-detail-wrap .jp-section-title {
        font-size: var(--jp-type-section-mobile);
    }

    .service-item h3,
    .trip-name,
    .jp-detail-wrap .jp-highlight-item span,
    .jp-detail-wrap .jp-fee-box-title {
        font-size: var(--jp-type-card);
    }

    .service-item p,
    .about-text p,
    .jp-detail-wrap .jp-desc-box,
    .jp-detail-wrap .jp-itin-card-desc,
    .jp-detail-wrap .jp-notes-box p {
        font-size: var(--jp-type-body-mobile);
    }

    .trip-features-row,
    .motto-tag,
    .loading-text,
    .list-count,
    .jp-detail-wrap .jp-spec-val,
    .pr-main .pr-alert-box .ab-sub,
    .pr-main .pr-email-notice .en-sub {
        font-size: var(--jp-type-meta-mobile);
    }

    .trip-tag,
    .badge-promo,
    .badge-duration {
        font-size: 11px;
    }

    .price-num {
        font-size: 20px;
    }

    .cta-content h2,
    .pr-main .pr-title {
        font-size: var(--jp-type-page-mobile);
    }

    .cta-btn-main,
    .btn-view-more,
    .jp-trip-hero .search-btn,
    .floating-booking-bar .f-btn-book,
    .booking-modal .booking-btn,
    .booking-drawer .bk-btn-back,
    .booking-drawer .bk-btn-next,
    .booking-drawer .bk-promo-apply-btn,
    .pr-main .pr-btn-primary,
    .pr-main .pr-btn-secondary {
        font-size: var(--jp-type-button-mobile);
    }

    .jp-detail-wrap .jp-title,
    .list-header h1 {
        font-size: var(--jp-type-page-mobile);
    }

    .jp-detail-wrap .jp-subtitle {
        font-size: var(--jp-type-body-mobile);
    }

    .jp-detail-wrap .jp-itin-card-name {
        font-size: 16px;
    }

    .floating-booking-bar .f-price {
        font-size: 22px;
    }

    .booking-drawer .bk-price-row.total .amt,
    .booking-drawer .bk-confirm-total .ct-price,
    .pr-main .pr-order-row .ov.is-amount {
        font-size: 20px;
    }
}

@media (max-width: 380px) {
    .jp-trip-hero .hero-content h1,
    .jp-detail-wrap .jp-title,
    .list-header h1,
    .cta-content h2,
    .pr-main .pr-title {
        font-size: 21px;
    }
}

/* Shared spacing scale */
.jp-trip-hero ~ .jp-section {
    padding-block: var(--jp-space-section);
}

.jp-trip-hero ~ .jp-section .section-head {
    margin-bottom: var(--jp-space-title-content);
}

.trips-container,
.service-grid {
    gap: var(--jp-space-card-gap);
}

.view-more-container {
    margin-top: 32px;
}

.list-header {
    padding: 20px 20px 24px;
}

.list-controls {
    padding: 16px;
    gap: 12px;
}

.pagination-container {
    margin-top: 32px;
    padding-bottom: 48px;
}

/* Detail page content rhythm */
.jp-detail-wrap {
    padding-bottom: 56px;
}

.jp-detail-wrap .jp-breadcrumb {
    padding-top: 16px;
}

.jp-detail-wrap .jp-header {
    padding: 16px 0 20px;
    margin-bottom: 20px;
}

.jp-detail-wrap .jp-gallery {
    margin-bottom: 20px;
}

.jp-detail-wrap .jp-specs-bar {
    gap: 16px;
    margin-bottom: 28px;
}

.jp-detail-wrap .jp-spec {
    padding: 20px;
    gap: 16px;
}

.jp-detail-wrap .jp-section {
    margin-bottom: 32px;
}

.jp-detail-wrap .jp-section-title {
    margin-bottom: 20px;
}

.jp-detail-wrap .jp-highlights-box {
    padding: 20px 24px;
}

.jp-detail-wrap .jp-highlights-grid,
.jp-detail-wrap .jp-fee-grid {
    gap: 16px;
}

.jp-detail-wrap .jp-desc-box {
    padding: 24px 28px;
}

.jp-detail-wrap .jp-itin-card {
    padding-bottom: 32px;
}

.jp-detail-wrap .jp-itin-card-inner,
.jp-detail-wrap .jp-fee-box,
.jp-detail-wrap .jp-notes-box {
    padding: var(--jp-space-card-padding);
}

/* Booking drawer rhythm */
.booking-drawer .bk-drawer-head {
    padding: 20px 24px;
}

.booking-drawer .bk-progress {
    padding: 0 24px;
}

.booking-drawer .bk-progress-step {
    padding-block: 16px;
}

.booking-drawer .bk-drawer-body {
    padding: 20px;
}

.booking-drawer .bk-price-summary {
    padding: 20px;
    margin-bottom: 24px;
}

.booking-drawer .bk-form-group {
    margin-bottom: 14px;
}

.booking-drawer .bk-form-row {
    gap: 12px;
}

/* Payment result rhythm */
.pr-main {
    padding-block: 48px;
}

.pr-main .pr-card {
    padding: 48px 40px 40px;
}

.pr-main .pr-icon-wrap {
    margin-bottom: 24px;
}

.pr-main .pr-desc {
    margin-bottom: 24px;
}

.pr-main .pr-polling-bar,
.pr-main .pr-email-notice,
.pr-main .pr-alert-box,
.pr-main .pr-order-card {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .jp-trip-hero ~ .jp-section {
        padding-block: var(--jp-space-section-mobile);
    }

    .jp-trip-hero ~ .jp-section .section-head {
        margin-bottom: var(--jp-space-title-content-mobile);
    }

    .trips-container,
    .service-grid {
        gap: var(--jp-space-card-gap-mobile);
    }

    .view-more-container {
        margin-top: 24px;
    }

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

    .list-controls {
        padding: 12px;
        gap: 10px;
    }

    .pagination-container {
        margin-top: 24px;
        padding-bottom: 40px;
    }

    .jp-detail-wrap {
        padding: 0 16px 40px;
    }

    .jp-detail-wrap .jp-breadcrumb {
        padding-top: 12px;
    }

    .jp-detail-wrap .jp-header {
        padding: 12px 0 16px;
        margin-bottom: 16px;
    }

    .jp-detail-wrap .jp-gallery {
        margin-bottom: 16px;
    }

    .jp-detail-wrap .jp-specs-bar {
        gap: 10px;
        margin-bottom: 24px;
    }

    .jp-detail-wrap .jp-spec {
        padding: var(--jp-space-card-padding-mobile);
        gap: 12px;
    }

    .jp-detail-wrap .jp-section {
        margin-bottom: 24px;
    }

    .jp-detail-wrap .jp-section-title {
        margin-bottom: 16px;
    }

    .jp-detail-wrap .jp-highlights-box {
        padding: var(--jp-space-card-padding-mobile);
    }

    .jp-detail-wrap .jp-highlights-grid,
    .jp-detail-wrap .jp-fee-grid {
        gap: var(--jp-space-card-gap-mobile);
    }

    .jp-detail-wrap .jp-desc-box {
        padding: var(--jp-space-card-padding-mobile);
    }

    .jp-detail-wrap .jp-itin-card {
        padding-bottom: 24px;
    }

    .jp-detail-wrap .jp-itin-card-inner,
    .jp-detail-wrap .jp-fee-box,
    .jp-detail-wrap .jp-notes-box {
        padding: var(--jp-space-card-padding-mobile);
    }

    .booking-drawer .bk-drawer-head {
        padding: 16px;
    }

    .booking-drawer .bk-progress {
        padding: 0 16px;
    }

    .booking-drawer .bk-progress-step {
        padding-block: 12px;
    }

    .booking-drawer .bk-drawer-body {
        padding: 16px;
    }

    .booking-drawer .bk-price-summary {
        padding: 16px;
        margin-bottom: 20px;
    }

    .pr-main {
        padding-block: 28px;
    }

    .pr-main .pr-card {
        padding: 28px 16px 24px;
    }

    .pr-main .pr-icon-wrap {
        margin-bottom: 20px;
    }

    .pr-main .pr-desc {
        margin-bottom: 20px;
    }

    .pr-main .pr-polling-bar,
    .pr-main .pr-email-notice,
    .pr-main .pr-alert-box,
    .pr-main .pr-order-card {
        margin-bottom: 20px;
    }
}