:root {
    --page-header-image: url('/Rebooking/assets/images/6.1.2_PageHeader(Overlap)_1_1024up.webp');
}
.main-wrapper {
    width: 100%;
    position: relative;
}
.special-header__ci-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}
.tabs--check-in {
    margin-bottom: 28px;

    @media (min-width: 600px) {
        margin-bottom: 36px;
    }

    @media (min-width: 1024px) {
        margin-bottom: 48px;
    }
}

.checks-host{
    flex-wrap: nowrap !important;
}

.checkin-remarks {
    padding: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .checkin-remarks table {
        width: 100%;
    }

#notification-single-action {
    max-width: 600px;
}

@media (max-width: 768px) {
    #notification-single-action {
        width: calc(100vw - 32px);
        max-width: none;
    }
}

.loading__text {
    text-align: center;
}

.loading__image {
    display: flex;
    justify-content: center;
}

.login-form__captcha {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.cf-turnstile {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

    .cf-turnstile iframe {
        max-width: 100% !important;
    }

.login-form__inputs input {
    width: 100%;
    box-sizing: border-box;
}

.login-form__buttons .button {
    width: 100%;
}

@media (min-width: 1024px) {
    .login-form__buttons .button {
        width: auto;
        min-width: 180px;
    }
}

.page-content-h2 {
    margin-top: 24px;
    margin-bottom: 12px;
    &:first-child

{
    margin-top: 0;
}

}

ul.page-content-list {
    margin-top: 0;
    padding-inline-start: 20px;
    list-style-type: disc;
    &:not(:list-child)

{
    margin-bottom: 24px;
}

li + li {
    margin-top: 4px;
}

& ul {
    margin-top: 4px;
    margin-left: -4px;
    padding-inline-start: 20px;
    list-style-type: circle;
}

}
h1,
h2,
h3,
p {
  margin: 0;
}

.page-header--overlap {
  position: relative;
  height: 260px;
  display: flex;
  flex-direction: column;

  /* 由上至下 overlay black -> overlay blue -> overlay gradient -> cover image */
  background-image: linear-gradient(
      rgba(23, 24, 28, 0.1),
      rgba(23, 24, 28, 0.1)
    ),
    linear-gradient(rgba(26, 47, 81, 0.4), rgba(26, 47, 81, 0.4)),
    linear-gradient(
      90deg,
      var(--Brand-Primary-Blue-900, rgba(26, 47, 81, 0.7)) -9.37%,
      var(--alpha-primary-blue-90040, rgba(26, 47, 81, 0.28)) 30.32%,
      var(--alpha-primary-blue-9000, rgba(26, 47, 81, 0)) 64.58%
    ),
    var(--page-header-image);
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;

  @media (min-width: 600px) {
    height: 400px;
  }

  @media (min-width: 1440px) {
    height: 420px;
  }
}

.page-header__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gs-margin) 60px;

  @media (min-width: 600px) {
    padding-bottom: 180px;
  }

  @media (min-width: 1440px) {
    padding-bottom: 200px;
  }
}

.main-content {
  margin-top: var(--Spacing-Section-Container-Top-minus);

  @media (min-width: 600px) {
    padding-inline: var(--gs-margin);
  }
}

.basic-form {
  background-color: var(--brand-bw-white);
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: var(--z-card);

  padding: 20px;
  border-radius: 20px;

  @media (min-width: 600px) {
    padding: 32px;
    border-radius: 24px;
  }

  @media (min-width: 1024px) {
    padding: 40px 48px;
    border-radius: 28px;

    display: grid;
    column-gap: 60px;
    grid-template-columns: 1fr 460px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'title form'
      'action form';
  }

  @media (min-width: 1440px) {
    padding: 48px 64px;
    column-gap: 80px;
    grid-template-columns: 1fr 580px;
  }
}

.basic-form__title {
  grid-area: title;
}
.basic-form__caption {
  margin-top: 12px;
}

.basic-form__form {
  grid-area: form;
  margin-top: 32px;

  @media (min-width: 600px) {
    margin-top: 40px;
  }

  @media (min-width: 1024px) {
    margin-top: 0;
  }
}

.basic-form__action {
  text-align: center;
  grid-area: action;

  @media (min-width: 1024px) {
    padding-top: 12px;
    text-align: left;
  }
}
.basic-form__action-button {
  margin-top: 24px;
  width: 100%;

  @media (min-width: 1024px) {
    width: fit-content;
    min-width: 160px !important;
  }
}

.divider {
  margin: 24px 0;
  width: 100%;
  height: 0;
  border-top: 1px solid var(--Brand-Gray-300);

  @media (min-width: 1024px) {
    display: none;
  }
}

.login-form__inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-form__inputs label {
    font-size: 1rem;
    color: #39414B;
}

.login-form__consent {
  margin-top: 40px;

  a {
    color: var(--Brand-Primary-Blue-600);
    letter-spacing: 0.16px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }
}

.login-form__captcha {
  margin-top: 28px;

  @media (min-width: 1440px) {
    margin-top: 32px;
  }
}

.login-form__buttons {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  @media (min-width: 600px) {
    margin-top: 48px;
  }

  @media (min-width: 1024px) {
    margin-top: 60px;
  }

}
@media (max-width: 768px) {

    .main-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .basic-form {
        padding: 20px;
        border-radius: 16px;
    }

    .page-header__content {
/*        padding-bottom: 100px;*/
    }

        .page-header__content h1 {
            font-size: 1.8rem;
        }

    .login-form__buttons {
        margin-top: 32px;
    }
}
/* =========================
   Modal Overlay（全畫面遮罩）
========================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


/* =========================
   Modal Box（白色視窗）
========================= */
.modal-box {
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    width: 420px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}


    /* =========================
   Title / 說明文字
========================= */
    .modal-box h2 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .modal-box p {
        font-size: 14px;
        color: #666;
    }


/* =========================
   OTP 輸入框區域
========================= */
.otp-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
}


/* =========================
   OTP 單格輸入框
========================= */
.otp-input {
    width: 48px;
    height: 56px;
    font-size: 22px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 10px;
    transition: all 0.2s ease;
}


    /* Focus 狀態（藍色高亮） */
    .otp-input:focus {
        border-color: #1a4fa3;
        box-shadow: 0 0 0 3px rgba(26,79,163,0.2);
        outline: none;
    }


    /* 已填寫的格子 */
    .otp-input.filled {
        border-color: #1a4fa3;
        background: #f3f7ff;
    }


/* =========================
   按鈕區（確認 / 取消）
========================= */
.modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

    /* 如果你原本 button 沒有撐滿 */
    .modal-actions .button {
        flex: 1;
    }


/* =========================
   Resend（預留）
========================= */
.resend {
    font-size: 13px;
    color: #1a4fa3;
    cursor: pointer;
    margin-top: 10px;
}

    .resend:hover {
        text-decoration: underline;
    }


/* =========================
   禁止背景滾動（可選）
========================= */
body.modal-open {
    overflow: hidden;
}

.error-msg {
    color: var(--brand-error-500-main) !important;
    display: flex;
    justify-content: center;
    ;
}
/* =====================================
   OTP Modal RWD
===================================== */

@media (max-width: 768px) {

    .modal-overlay {
        padding: 16px;
        box-sizing: border-box;
    }

    .modal-box {
        width: 100%;
        max-width: 420px;
        padding: 24px 20px;
        border-radius: 16px;
    }

        .modal-box h2 {
            font-size: 20px;
        }

    .otp-container {
        gap: 12px;
    }

    .otp-input {
        width: 42px;
        height: 50px;
        font-size: 20px;
    }

    .modal-actions {
/*        flex-direction: column;*/
    }

        .modal-actions .button {
            width: 100%;
        }
}

/* iPhone SE / 320px 以下 */
@media (max-width: 375px) {

    .modal-box {
        padding: 20px 16px;
    }

    .otp-container {
        gap: 12px;
    }

    .otp-input {
        width: 38px;
        height: 46px;
        font-size: 18px;
    }

    .modal-box h2 {
        font-size: 18px;
    }

    .modal-box p {
        font-size: 13px;
    }
}

/* 超小裝置 */
@media (max-width: 320px) {

    .otp-container {
        gap: 10px;
    }

    .otp-input {
        width: 34px;
        height: 42px;
        font-size: 16px;
    }
}
@media (max-width: 768px) {

    .checkin-remarks {
        max-height: 280px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 16px 0 12px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #fff;
    }

        /* 捲軸美化 */
        .checkin-remarks::-webkit-scrollbar {
            width: 4px;
        }

        .checkin-remarks::-webkit-scrollbar-thumb {
            background: #bfc6d1;
            border-radius: 10px;
        }
}