@charset "UTF-8";
/*表單*/
form {
  width: 100%;
  margin: auto auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  background-color:#eeeeee;
  color: #ffffff;
}
.form-block h2{
  margin-top: 2rem;
  margin-bottom: 1.6rem;
  text-align: center;
}

form h3{
  margin-top: 2rem;
  margin-bottom: 0.3rem;
}

/* 表單標題 */
.form-title {
  color: #4d4d4d;
  letter-spacing: 0.2em;
}

/* 性別、姓名 */
.form-group-name {
  width: 100%;
  color: #4d4d4d;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding-left: 0.1rem;
}

/* 可預約時段 */
.form-group-time{
  padding: 1rem 0.3rem;
  display: flex;
  flex-direction: column;
  color: #4d4d4d;
  gap: 0.4rem;

  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  letter-spacing: 0.1em;
}

/* 可預約日期偏好 */
.form-group-date{
  padding: 1rem 0.3rem;
  display: flex;
  flex-direction: column;
  color: #4d4d4d;
  gap: 0.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;

  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  letter-spacing: 0.1em;
}

/* 填寫欄位 */
.form-input, textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 15px;
  font-size: 1rem;
  color: #4d4d4d;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: #afafaf;
}


/* 騙機器人用欄位 */
.botcheck {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

/* 送出按鈕 */
.form-buttom{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rotate-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #4d4d4d;
  font-size: 0.8em;
  text-align: center;

  background-color: #ffffff;
  transition: transform 0.6s ease;
}
.rotate-btn:hover {
  transform: rotate(360deg);
  background-color: #cbbea6;
  color: #ffffff;
}

/* 回應文字 */
.form-response {
  margin-top: 1rem;
  color: #4d4d4d;
  text-align: center;
  color: #4d4d4d;
}

/* ------------------------------------------------- */

  /* 平板專用樣式 */
  @media (min-width: 768px) and (max-width: 1023px) {
   .row-wrap{
     margin: 6rem auto;
     transition: width 0.35s ease;
    }
   form{
      padding: 0 5rem;
    }
  }

  /* ------------------------------------------------- */
  /* 桌機小螢幕（含 iPad 橫向）優化樣式 */
   @media (min-width: 1024px) and (max-width: 1279px) {
    .row-wrap{
     width: min(800px, calc(100% - 12rem));
     margin: 0.5rem auto;
     padding: 0 5rem;
     transition: width 0.35s ease;
    }
  }
    /* ------------------------------------------------- */
    /* 一般桌機 */
    @media (min-width: 1280px) and (max-width: 1599px){
    .row-wrap{
      width: min(1200px, calc(100% - 10rem));
      margin: 6rem auto ;
      padding: 0 10rem;
      transition: width 0.35s ease;
    }
  }

  /* ------------------------------------------------- */
  /* 大螢幕專用樣式 */
  @media (min-width: 1600px) {
    .row-wrap{
      width: min(1280px, calc(100% - 15rem));
      margin: 6rem auto ;
      padding: 0 10rem;
      transition: width 0.35s ease;
    }
    form {
      margin: 2rem auto;
    }

  }