/* Shared hotel typography and spacing scale. Loaded after page-specific CSS. */
:root {
  --hotel-type-page: 32px;
  --hotel-type-page-mobile: 24px;
  --hotel-type-section: 26px;
  --hotel-type-section-mobile: 20px;
  --hotel-type-subsection: 18px;
  --hotel-type-subsection-mobile: 17px;
  --hotel-type-body: 16px;
  --hotel-type-body-mobile: 14px;
  --hotel-type-meta: 14px;
  --hotel-type-meta-mobile: 13px;
  --hotel-type-button: 16px;
  --hotel-type-button-mobile: 15px;
  --hotel-space-section: 56px;
  --hotel-space-section-mobile: 32px;
  --hotel-space-title-content: 24px;
  --hotel-space-title-content-mobile: 16px;
  --hotel-space-card-gap: 20px;
  --hotel-space-card-gap-mobile: 12px;
  --hotel-space-card-padding: 24px;
  --hotel-space-card-padding-mobile: 16px;
}

body {
  font-size: var(--hotel-type-body);
  line-height: 1.5;
}

/* Shared hotel search and hero rhythm. */
.top-searcher-nav {
  margin-top: 24px;
}

.top-searcher-nav-item {
  padding: 14px 0;
  font-size: var(--hotel-type-body);
  line-height: 1.35;
}

.top-searcher-box-title {
  padding-top: 20px;
  margin-bottom: 16px;
  font-size: var(--hotel-type-page);
  line-height: 1.25;
}

.top-searcher-box-form {
  margin-bottom: 32px;
  padding: 20px;
}

.top-searcher-box-form-condition {
  margin-top: 16px;
  gap: 8px;
}

.top-searcher-box-form-btn {
  margin-top: 16px;
}

.hotel-page .hotel-search-title {
  font-size: 40px;
  line-height: 1.2;
}

.hotel-page .hotel-search-subtitle {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 28px;
}

.top-notice-box {
  padding-block: 48px;
}

.top-notice-header {
  margin-bottom: var(--hotel-space-title-content);
}

.top-notice-header .top-notice-title,
.top-special-title {
  font-size: var(--hotel-type-section);
  line-height: 1.35;
}

.top-notice-grid,
.top-special-lists {
  gap: var(--hotel-space-card-gap);
}

.top-notice-card {
  padding: var(--hotel-space-card-padding);
}

.top-notice-card-content p {
  font-size: var(--hotel-type-body);
  line-height: 1.65;
}

/* Homepage sections. */
.hotel-page .hotel-history {
  margin-top: 32px;
}

.hotel-page .hotel-history-section + .hotel-history-section {
  margin-top: 24px;
}

.hotel-page .hotel-history-heading {
  margin-bottom: 16px;
}

.hotel-page .hotel-history-heading h2 {
  font-size: var(--hotel-type-section);
  line-height: 1.35;
}

.hotel-page .hotel-history-track {
  gap: var(--hotel-space-card-gap);
}

.hotel-page .popular-destinations.popular-destinations-refresh {
  padding-block: 48px 56px;
}

.hotel-page .popular-destinations-refresh .popular-destinations-header {
  margin-bottom: var(--hotel-space-title-content);
}

.hotel-page .popular-destinations-refresh .popular-destinations-title,
.hotel-page .featured-hotels-title,
.hotel-page .why-choose-us-title {
  font-size: var(--hotel-type-section);
  line-height: 1.35;
}

.hotel-page .popular-destinations-refresh .popular-destinations-grid {
  gap: var(--hotel-space-card-gap);
}

.hotel-page .featured-hotels {
  margin-bottom: 56px;
  gap: 20px 24px;
}

.hotel-page .featured-hotels-grid {
  gap: var(--hotel-space-card-gap);
}

.hotel-page .featured-hotels-grid-card-content-title {
  font-size: var(--hotel-type-subsection);
  line-height: 1.45;
}

.hotel-page .featured-hotels-grid-card-content-address,
.hotel-page .featured-hotels-grid-card-content-stars,
.hotel-page .featured-hotels-grid-card-content-amenities {
  font-size: var(--hotel-type-meta);
}

.hotel-page .why-choose-us {
  padding-block: var(--hotel-space-section);
}

.hotel-page .why-choose-us-title {
  margin-bottom: 32px;
}

.hotel-page .why-choose-us-grid {
  gap: var(--hotel-space-card-gap);
}

.hotel-page .why-feature-title {
  font-size: var(--hotel-type-subsection);
  line-height: 1.4;
}

.hotel-page .why-feature-desc {
  font-size: var(--hotel-type-body);
  line-height: 1.65;
}

/* Destination page. */
.destination-detail {
  padding-bottom: var(--hotel-space-section);
}

.destination-detail-hero {
  padding-block: 80px;
}

.destination-detail-hero-title {
  font-size: 40px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.destination-detail-hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
}

.destination-detail-section {
  margin-bottom: var(--hotel-space-section);
  padding-inline: 20px;
}

.destination-detail-section .default-title {
  padding: 0;
  margin-bottom: var(--hotel-space-title-content);
  font-size: var(--hotel-type-section);
  line-height: 1.35;
}

.destination-detail-intro {
  font-size: var(--hotel-type-body);
  line-height: 1.75;
  margin-bottom: 32px;
}

.destination-detail .featured-hotels {
  margin-bottom: var(--hotel-space-section);
}

.destination-detail .featured-hotels-title {
  margin-bottom: var(--hotel-space-title-content);
  font-size: var(--hotel-type-section);
  line-height: 1.35;
}

.destination-detail .featured-hotels-grid {
  gap: var(--hotel-space-card-gap);
}

.destination-detail .featured-hotels-grid-card-content {
  min-height: 148px;
  padding: var(--hotel-space-card-padding);
  gap: 10px;
}

.destination-detail .featured-hotels-grid-card-content-title {
  font-size: var(--hotel-type-subsection);
  line-height: 1.45;
}

.destination-detail .featured-hotels-grid-card-content-address,
.destination-detail .featured-hotels-grid-card-content-location,
.destination-detail .featured-hotels-grid-card-content-meta,
.destination-detail .featured-hotels-grid-card-content-ratingprice-stars-reviewinfo {
  font-size: var(--hotel-type-meta);
  line-height: 1.45;
}

.destination-detail .featured-hotels-grid-card-content-ratingprice {
  gap: 8px;
}

.destination-detail .featured-hotels-grid-card-content-ratingprice-price-amount,
.destination-detail .featured-hotels-grid-card-content-ratingprice-price-current-amount {
  font-size: var(--hotel-type-subsection);
  line-height: 1.2;
}

.destination-detail .featured-hotels-grid-card-content-ratingprice-price-unit,
.destination-detail .featured-hotels-grid-card-content-ratingprice-price-discount-original,
.destination-detail .featured-hotels-grid-card-content-ratingprice-price-discount-badge {
  font-size: var(--hotel-type-meta);
}

.destination-detail-highlights,
.destination-detail-attractions,
.destination-detail-blogs {
  gap: var(--hotel-space-card-gap);
}

.destination-detail-highlight-title,
.destination-detail-attractions-card-content-name,
.destination-detail-blogs-card-content-title {
  font-size: var(--hotel-type-subsection);
  line-height: 1.45;
}

.destination-detail-highlight-desc,
.destination-detail-attractions-card-content-info-location,
.destination-detail-attractions-card-content-info-popularity-label {
  font-size: var(--hotel-type-meta);
  line-height: 1.55;
}

.destination-detail-attractions-card-content,
.destination-detail-blogs-card-content {
  padding: var(--hotel-space-card-padding);
}

/* Search results and map entry page. */
.hotel-search-list {
  padding-block: 40px 48px;
  gap: 22px;
}

.hotel-search-list-sidebar > div {
  margin-bottom: 16px;
}

.hotel-search-list-sidebar-section,
.mini-hotel-search {
  padding: var(--hotel-space-card-padding);
}

.mini-search-title,
.hotel-search-list-sidebar-section-title {
  font-size: var(--hotel-type-subsection);
  line-height: 1.4;
}

.mini-search-form {
  gap: 14px;
}

.mini-field-label,
.hotel-search-list-sidebar-section-desc {
  font-size: var(--hotel-type-meta);
  line-height: 1.45;
}

.mini-search-input {
  height: 44px;
  font-size: var(--hotel-type-body);
}

.mini-search-button,
.hotel-search-list-sidebar-apply {
  font-size: var(--hotel-type-button);
}

.hotel-search-list-header {
  margin-bottom: 24px;
  gap: 20px;
}

.hotel-search-list-header-title {
  font-size: var(--hotel-type-page);
  line-height: 1.3;
  margin-bottom: 8px;
}

.hotel-search-list-header-results,
.sort-label,
.sort-dropdown-toggle,
.sort-dropdown-item {
  font-size: var(--hotel-type-meta);
}

.hotel-search-list-items {
  gap: 16px;
}

.hotel-search-list-item-content {
}

.hotel-search-list-item-header {
  margin-bottom: 10px;
}

.hotel-search-list-item-title {
  font-size: var(--hotel-type-subsection);
  line-height: 1.45;
}

.hotel-search-list-item-stars,
.hotel-search-list-item-location {
  font-size: var(--hotel-type-meta);
}

.hotel-search-list-item-location {
  margin-bottom: 14px;
  line-height: 1.5;
}

.hotel-search-list-item-badge,
.hotel-search-list-item-price-meta,
.hotel-search-list-item-price-hint {
  font-size: var(--hotel-type-meta);
}

.hotel-search-list-item-actions {
  padding-left: 20px;
}

.hotel-search-list-item-book {
  font-size: var(--hotel-type-button);
}

/* Hotel detail page. */
.hotel-detail-container {
  margin-bottom: 48px;
}

.hotel-basic-info {
  margin-top: 32px;
}

.hotel-detail-container .hotel-name {
  font-size: 28px;
  line-height: 1.3;
}

.location-text {
  font-size: var(--hotel-type-body);
  line-height: 1.5;
}

.hotel-gallery {
  gap: 12px;
}

.detail-navigation .nav-item {
  padding-block: 14px;
  font-size: var(--hotel-type-body);
}

.hotel-detail-content {
  padding-block: 32px 56px;
}

.detail-container {
  padding-inline: 20px;
}

.hotel-detail-content .detail-main {
  gap: 24px;
  margin-bottom: 24px;
}

.hotel-detail-content .detail-left {
  gap: 28px;
}

.hotel-detail-content .section-title {
  margin-bottom: 20px;
}

.hotel-detail-content .section-title-h2 {
  font-size: var(--hotel-type-section);
  line-height: 1.35;
}

.hotel-detail-content .room-types-container {
  gap: var(--hotel-space-card-gap);
}

.hotel-detail-content .room-type-group {
  margin-bottom: var(--hotel-space-card-gap);
}

.hotel-detail-content .room-type-name,
.hotel-detail-content .plan-name {
  font-size: var(--hotel-type-subsection);
  line-height: 1.45;
}

.hotel-detail-content .room-type-features,
.hotel-detail-content .room-type-specs-inline,
.hotel-detail-content .plan-features,
.hotel-detail-content .stock-info {
  font-size: var(--hotel-type-meta);
  line-height: 1.5;
}

.hotel-detail-content .plan-card {
  padding: var(--hotel-space-card-padding);
  gap: 10px;
}

/* Reservation input, confirmation and payment flow. */
.reservation-header-container {
  padding-block: 14px;
}

.reservation-title {
  font-size: 18px;
  line-height: 1.4;
}

.reservation-process {
  margin-block: 16px;
  padding-block: 18px 10px;
}

.reservation-step-text {
  font-size: var(--hotel-type-meta);
  line-height: 1.35;
}

.reservation-container {
  padding-block: 40px 48px;
}

.reservation-main {
  gap: 32px;
}

.form-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 20px;
}

.form-grid {
  gap: 20px;
}

.form-label {
  font-size: var(--hotel-type-meta);
  line-height: 1.4;
}

.form-input,
.reservation-container select,
.reservation-container textarea {
  font-size: var(--hotel-type-body);
}

.reservation-summary .summary-card {
  padding: var(--hotel-space-card-padding);
}

.payment-amount-section,
.payment-method-section,
.confirmation-section,
.info-confirm-group,
.policy-section,
.agreement-main-section {
  margin-bottom: 24px;
}

.payment-amount-section,
.payment-method-section {
  padding: var(--hotel-space-card-padding);
}

.method-options {
  gap: 12px;
}

.method-label {
  font-size: var(--hotel-type-body);
}

.method-description,
.method-subtitle,
.policy-content p,
.confirm-label,
.confirm-value {
  font-size: var(--hotel-type-meta);
  line-height: 1.6;
}

.confirm-subtitle {
  font-size: var(--hotel-type-subsection);
  line-height: 1.4;
  margin-bottom: 16px;
}

.info-confirm-group,
.policy-section,
.agreement-main-section {
  padding: var(--hotel-space-card-padding);
}

.confirm-item {
  padding-block: 12px;
}

.top-status-wrapper {
  padding: 32px;
  margin-bottom: 24px;
}

.success-title {
  font-size: 26px;
  line-height: 1.35;
}

.success-subtitle {
  font-size: var(--hotel-type-body);
  line-height: 1.6;
}

.success-summary-card .summary-card-content {
  padding: var(--hotel-space-card-padding);
}

.state-action-panel {
  gap: 12px;
  margin-bottom: 24px;
}

.state-action-btn,
.form-actions button,
.form-actions a {
  font-size: var(--hotel-type-button);
}

.cancel-content {
  padding: 40px 32px;
}

.cancel-title {
  font-size: 26px;
  line-height: 1.35;
}

.cancel-message {
  font-size: var(--hotel-type-body);
  line-height: 1.7;
}

@media screen and (max-width: 768px) {
  body {
    font-size: var(--hotel-type-body-mobile);
  }

  .top-searcher-nav {
    margin-top: 12px;
  }

  .top-searcher-nav-item {
    padding-block: 10px;
    font-size: var(--hotel-type-body-mobile);
  }

  .top-searcher-box {
    padding-inline: 12px;
  }

  .top-searcher-box-title {
    padding-top: 12px;
    margin-bottom: 10px;
    font-size: var(--hotel-type-page-mobile);
  }

  .top-searcher-box-form {
    margin-bottom: 24px;
    padding: 14px 12px;
  }

  .top-searcher-box-form-condition {
    margin-top: 8px;
    gap: 8px;
  }

  .hotel-page .hotel-search-title {
    font-size: 28px;
  }

  .hotel-page .hotel-search-subtitle {
    font-size: var(--hotel-type-body-mobile);
    margin-bottom: 20px;
  }

  .top-notice-box {
    padding-block: 32px;
  }

  .top-notice-header .top-notice-title,
  .top-special-title {
    font-size: var(--hotel-type-section-mobile);
  }

  .top-notice-card {
    padding: var(--hotel-space-card-padding-mobile);
  }

  .top-notice-card-content p {
    font-size: var(--hotel-type-body-mobile);
  }

  .hotel-page .hotel-history {
    margin-top: 24px;
    padding-inline: 12px;
  }

  .hotel-page .hotel-history-heading {
    margin-bottom: 12px;
  }

  .hotel-page .hotel-history-heading h2,
  .hotel-page .popular-destinations-refresh .popular-destinations-title,
  .hotel-page .featured-hotels-title,
  .hotel-page .why-choose-us-title {
    font-size: var(--hotel-type-section-mobile);
  }

  .hotel-page .hotel-history-track,
  .hotel-page .popular-destinations-refresh .popular-destinations-grid,
  .hotel-page .featured-hotels-grid,
  .hotel-page .why-choose-us-grid {
    gap: var(--hotel-space-card-gap-mobile);
  }

  .hotel-page .why-choose-us-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hotel-page .why-feature {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 13px 4px;
    text-align: left;
    border-bottom: 1px solid var(--hotel-border, #E5E7EB);
  }

  .hotel-page .why-feature:last-child {
    border-bottom: 0;
  }

  .hotel-page .why-feature:not(:last-child)::after {
    display: none;
  }

  .hotel-page .why-feature-icon-wrapper {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .hotel-page .why-feature-title {
    margin: 0;
    line-height: 1.35;
  }

  .hotel-page .why-feature-desc {
    margin-top: 3px;
    line-height: 1.4;
  }

  .hotel-page .popular-destinations.popular-destinations-refresh {
    padding-block: 32px 40px;
  }

  .hotel-page .popular-destinations-refresh .popular-destinations-header {
    margin-bottom: var(--hotel-space-title-content-mobile);
  }

  .hotel-page .featured-hotels {
    margin-bottom: 40px;
    gap: 16px;
  }

  .hotel-page .featured-hotels-grid-card-content-title {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .hotel-page .featured-hotels-grid-card-content-address,
  .hotel-page .featured-hotels-grid-card-content-stars,
  .hotel-page .featured-hotels-grid-card-content-amenities {
    font-size: var(--hotel-type-meta-mobile);
  }

  .hotel-page .why-choose-us {
    padding-block: 32px;
  }

  .hotel-page .why-choose-us-title {
    margin-bottom: 20px;
  }

  .hotel-page .why-feature-title {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .hotel-page .why-feature-desc {
    font-size: var(--hotel-type-body-mobile);
  }

  .destination-detail {
    padding-bottom: var(--hotel-space-section-mobile);
  }

  .destination-detail-hero {
    padding-block: 48px;
  }

  .destination-detail-hero-title {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .destination-detail-hero-subtitle {
    font-size: var(--hotel-type-body-mobile);
  }

  .destination-detail-section {
    margin-bottom: var(--hotel-space-section-mobile);
    padding-inline: 15px;
  }

  .destination-detail-section .default-title {
    margin-bottom: var(--hotel-space-title-content-mobile);
    font-size: var(--hotel-type-section-mobile);
  }

  .destination-detail-intro {
    font-size: var(--hotel-type-body-mobile);
    margin-bottom: 24px;
  }

  .destination-detail .featured-hotels {
    margin-bottom: var(--hotel-space-section-mobile);
  }

  .destination-detail .featured-hotels-title {
    margin-bottom: var(--hotel-space-title-content-mobile);
    font-size: var(--hotel-type-section-mobile);
  }

  .destination-detail .featured-hotels-grid {
    gap: var(--hotel-space-card-gap-mobile);
  }

  .destination-detail .featured-hotels-grid-card-content {
    min-height: 0;
    padding: var(--hotel-space-card-padding-mobile);
    gap: 8px;
  }

  .destination-detail .featured-hotels-grid-card-content-title {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .destination-detail .featured-hotels-grid-card-content-address,
  .destination-detail .featured-hotels-grid-card-content-location,
  .destination-detail .featured-hotels-grid-card-content-meta {
    font-size: var(--hotel-type-meta-mobile);
  }

  .destination-detail .featured-hotels-grid-card-content-ratingprice-stars-reviewinfo {
    font-size: var(--hotel-type-meta-mobile);
  }

  .destination-detail .featured-hotels-grid-card-content-ratingprice-price-amount,
  .destination-detail .featured-hotels-grid-card-content-ratingprice-price-current-amount {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .destination-detail .featured-hotels-grid-card-content-ratingprice-price-unit,
  .destination-detail .featured-hotels-grid-card-content-ratingprice-price-discount-original,
  .destination-detail .featured-hotels-grid-card-content-ratingprice-price-discount-badge {
    font-size: var(--hotel-type-meta-mobile);
  }

  .destination-detail-highlights,
  .destination-detail-attractions,
  .destination-detail-blogs {
    gap: var(--hotel-space-card-gap-mobile);
  }

  .destination-detail-highlight-title,
  .destination-detail-attractions-card-content-name,
  .destination-detail-blogs-card-content-title {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .destination-detail-highlight-desc,
  .destination-detail-attractions-card-content-info-location,
  .destination-detail-attractions-card-content-info-popularity-label {
    font-size: var(--hotel-type-meta-mobile);
  }

  .destination-detail-attractions-card-content,
  .destination-detail-blogs-card-content {
    padding: var(--hotel-space-card-padding-mobile);
  }

  .hotel-search-list {
    padding: 20px 12px 32px;
    gap: 16px;
  }

  .hotel-search-list-sidebar-section,
  .mini-hotel-search {
    padding: var(--hotel-space-card-padding-mobile);
  }

  .mini-search-title,
  .hotel-search-list-sidebar-section-title {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .mini-field-label,
  .hotel-search-list-sidebar-section-desc,
  .hotel-search-list-header-results,
  .sort-label,
  .sort-dropdown-toggle,
  .sort-dropdown-item {
    font-size: var(--hotel-type-meta-mobile);
  }

  .mini-search-input {
    height: 42px;
    font-size: var(--hotel-type-body-mobile);
  }

  .mini-search-button,
  .hotel-search-list-sidebar-apply {
    font-size: var(--hotel-type-button-mobile);
  }

  .hotel-search-list-header {
    margin-bottom: 16px;
    gap: 12px;
  }

  .hotel-search-list-header-title {
    font-size: var(--hotel-type-page-mobile);
  }

  .hotel-search-list-items {
    gap: var(--hotel-space-card-gap-mobile);
  }

  .hotel-search-list-item-content {
    padding: 16px 14px;
    gap: 12px;
  }

  .hotel-search-list-item-title {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .hotel-search-list-item-stars,
  .hotel-search-list-item-location,
  .hotel-search-list-item-badge,
  .hotel-search-list-item-price-meta,
  .hotel-search-list-item-price-hint {
    font-size: var(--hotel-type-meta-mobile);
  }

  .hotel-search-list-item-location {
    margin-bottom: 10px;
  }

  .hotel-detail-container {
    margin-bottom: 24px;
    padding-inline: 12px;
  }

  .hotel-basic-info {
    margin-top: 16px;
  }

  .hotel-detail-container .hotel-name {
    font-size: 22px;
    line-height: 1.35;
  }

  .location-text {
    font-size: var(--hotel-type-meta-mobile);
  }

  .hotel-gallery {
    gap: 8px;
  }

  .detail-navigation .nav-item {
    padding-block: 10px;
    font-size: var(--hotel-type-meta-mobile);
  }

  .hotel-detail-content {
    padding-block: 20px 40px;
  }

  .detail-container {
    padding-inline: 12px;
  }

  .hotel-detail-content .detail-main {
    gap: 20px;
  }

  .hotel-detail-content .detail-left {
    gap: 20px;
  }

  .hotel-detail-content .section-title {
    margin-bottom: var(--hotel-space-title-content-mobile);
  }

  .hotel-detail-content .section-title-h2 {
    font-size: var(--hotel-type-section-mobile);
  }

  .hotel-detail-content .room-type-group {
    margin-bottom: var(--hotel-space-card-gap-mobile);
  }

  .hotel-detail-content .room-type-name,
  .hotel-detail-content .plan-name {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .hotel-detail-content .room-type-features,
  .hotel-detail-content .room-type-specs-inline,
  .hotel-detail-content .plan-features,
  .hotel-detail-content .stock-info {
    font-size: var(--hotel-type-meta-mobile);
  }

  .hotel-detail-content .plan-card {
    padding: var(--hotel-space-card-padding-mobile);
    gap: 14px;
  }

  .reservation-header-container {
    padding-block: 12px;
  }

  .reservation-title {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .reservation-process {
    margin-block: 12px;
    padding-block: 14px 8px;
  }

  .reservation-step-text {
    font-size: var(--hotel-type-meta-mobile);
  }

  .reservation-container {
    padding: 24px 15px 32px;
  }

  .reservation-main {
    gap: 20px;
  }

  .form-section {
    margin-bottom: 24px;
  }

  .section-title {
    font-size: var(--hotel-type-section-mobile);
    margin-bottom: 16px;
  }

  .form-grid {
    gap: 14px;
  }

  .form-label {
    font-size: var(--hotel-type-meta-mobile);
  }

  .form-input,
  .reservation-container select,
  .reservation-container textarea {
    font-size: 16px;
  }

  .reservation-summary .summary-card {
    padding: var(--hotel-space-card-padding-mobile);
  }

  .payment-amount-section,
  .payment-method-section,
  .confirmation-section,
  .info-confirm-group,
  .policy-section,
  .agreement-main-section {
    margin-bottom: 20px;
  }

  .payment-amount-section,
  .payment-method-section,
  .info-confirm-group,
  .policy-section,
  .agreement-main-section {
    padding: var(--hotel-space-card-padding-mobile);
  }

  .method-label {
    font-size: var(--hotel-type-body-mobile);
  }

  .method-description,
  .method-subtitle,
  .policy-content p,
  .confirm-label,
  .confirm-value {
    font-size: var(--hotel-type-meta-mobile);
  }

  .confirm-subtitle {
    font-size: var(--hotel-type-subsection-mobile);
  }

  .confirm-item {
    padding-block: 10px;
  }

  .top-status-wrapper {
    padding: 24px 16px;
    margin-bottom: 20px;
  }

  .success-title,
  .cancel-title {
    font-size: var(--hotel-type-page-mobile);
  }

  .success-subtitle,
  .cancel-message {
    font-size: var(--hotel-type-body-mobile);
  }

  .success-summary-card .summary-card-content {
    padding: var(--hotel-space-card-padding-mobile);
  }

  .state-action-panel {
    gap: 10px;
    margin-bottom: 20px;
  }

  .state-action-btn,
  .form-actions button,
  .form-actions a {
    font-size: var(--hotel-type-button-mobile);
  }

  .cancel-content {
    padding: 28px 16px;
  }
}

@media screen and (max-width: 380px) {
  .top-searcher-box-title,
  .hotel-search-list-header-title,
  .success-title,
  .cancel-title {
    font-size: 22px;
  }
}