@charset "UTF-8";

/* =========================================================
   Form & Input System  (適用全站的表單風格)
   - input / textarea / select / button
   - form 排版
   - 錯誤 / 成功狀態
========================================================= */

/* 基本：表單容器 */
form {
  margin: 0 0;
}
form.entrust {
	margin:15px 0;

}
/* 每個欄位外框： */
.form-group {
	margin-bottom: 20px; 
	height:auto;
	overflow:hidden;
}

.form-row { 
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;

}


.form-row > * {
  min-width: 0;
}

.form-row input,
.form-row textarea {
  width: 100%;
  box-sizing: border-box;
}


.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-1 { flex: 1; }

/* label 樣式 */
.form-group label {
    display: block;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #334155;
    font-size: 15px;
}

/* 小小補充說明文字 */
.form-hint {
  font-size: 0.8rem;
  color: #777;
  margin-top: 3px;
}



/* =========================================================
   Input / Textarea / Select 基本樣式
========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="radio"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #CCC;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
  outline: none; /* 交給 :focus 控制 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* placeholder 顏色 */
input::placeholder,
textarea::placeholder {
  color: #AAA;
}

/* focus 狀態：用你的主色 #00a0e9 */
input:focus,
textarea:focus,
select:focus {
    background-color: #f8fafc;
  border-color: #00a0e9;
  box-shadow: 0 0 0 2px rgba(0, 160, 233, 0.15);
}

/* disabled 狀態 */
input[disabled],
textarea[disabled],
select[disabled] {
  background-color: #f5f5f5;
  color: #888;
  cursor: not-allowed;
}


/* --- 特殊區塊排版 --- */
.radio-inline-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding:0;
}
.radio-inline-group {
    display: flex;
    gap: 20px;
}

.radio-btn {
    flex: 1; /* 讓兩個按鈕平分寬度 */
    cursor: pointer;
    margin: 0 0 0 0;
}

/* 隱藏原本的收音機圓圈 */
.radio-btn input[type="radio"] {
    display: none;
}

/* 按鈕預設外觀 */
.radio-btn span {
    display: block;
    text-align: center;
    padding: 10px 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 15px;
    transition: all 0.2s ease;
}

/* 當 Radio 被選中時，改變 span 的樣式 */
.radio-btn input[type="radio"]:checked + span {
    background-color: #f0f9ff;
    border-color: #00a0e9;
    color: #00a0e9;
    font-weight: 600;
}

/* 滑鼠懸停效果 */
.radio-btn:hover span {
    border-color: #00a0e9;
    background-color: #f8fafc;
}



.birthday-row, .address-top-row, .captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
}



.unit-text { 
white-space: nowrap; 
font-size: 14px; 
}

.zip-input { 
flex: 0 0 150px; 
 }


/* --- 驗證碼 --- */
.col-code { flex: 1; }
.captcha-img-wrapper {
    flex: 0 0 120px;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}
.captcha-img-wrapper img { 
width: 100%; height: 100%; }


/* --- 頁尾 --- */

.form-actions { margin-top: 30px; }

.form-footer {
    margin-top: 20px;
    text-align: center;
}

.footer-link {
}



.form-row textarea.cooperation{
		height:100px;

}


.form-row input:focus,
.form-row textarea:focus {
    border-color: #ff5b87;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
    color: #999;
}

.form-row.file-row {
    grid-template-columns: 110px 1fr 190px;
    align-items: center;
}

.file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-note {
    font-size: 14px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-btn {
    display: inline-block;
    font-size: 16px;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.upload-btn input[type="file"] {
    display: none;
}

/* --- 按鈕 --- */
.form-actions {
		width:100%;
    margin: 25px auto ;
    text-align:center;
	  display: block;
}

.btn-submit-full {
    width: 100%;
    background-color: #00a0e9;
    color: #ffffff;
    border: none;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.btn-submit-full:hover {
    background-color: #008cd1;
    box-shadow: 0 4px 12px rgba(0,160,233,0.3);
}

.btn-primary-lg {
    width: 100%;
    background: #00a0e9;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-primary-lg:hover {
    background: #008cd1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 160, 233, 0.2);
}


button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display: inline-block;
  padding: 8px 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color: #EEE;
  color: #333;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* 主按鈕（主色） */
.btn-primary {
  background-color: #00a0e9;
  border-color: #00a0e9;
  color: #FFF;
}
.btn-primary:hover {
  background-color: #0ab4ff;
  border-color: #0ab4ff;
}

/* 次要按鈕（深藍） */
.btn-secondary {
  background-color: #27548A;
  border-color: #27548A;
  color: #FFF;
}
.btn-secondary:hover {
  background-color: #32619f;
  border-color: #32619f;
}

/* 淺灰按鈕 */
.btn-light {
  background-color: #f5f5f5;
  border-color: #DDD;
  color: #333;
}
.btn-light:hover {
  background-color: #e9e9e9;
}
/* 紅色按鈕 */
.btn-red {
  background-color: #D25353;
  border: 1px solid #d32f2f;
  color: #FFF;
	border-radius: 5px;
}

.btn-red:hover {
  background-color: #FFF;
  color: #d32f2f;
}
/* 黃色按鈕 */
.btn-yellow {
  background-color: #fff;
  border: 1px solid #fbb034;
  color: #fbb034;
	border-radius: 5px;
}

.btn-yellow:hover {
  background-color: #FFF;
  color: #fbb034;
	border-radius: 5px;
}

/*橘色按鈕*/
.btn-outline {
    background-color: #fff;
    border: 1px solid #ff9800;
    color: #ff9800;
}

.btn-outline:hover {
    background-color: #fff3e0;
}

    .btn-promo { 
    		width:87%;
        background: #ffecf0; 
        color: #d0021b; 
        border: 1px solid #ffd4dc !important;
    }
    
.btn-promo:hover {
    background-color: #ffd4dc;
}



/* 危險類按鈕 */
.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #FFF;
}
.btn-danger:hover {
  background-color: #e55363;
  border-color: #e55363;
}

/* 禁用按鈕 */
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* 小按鈕 */
.btn-sm {
  padding: 5px 10px;
  font-size: 0.85rem;
}

.btn-xsm {
  padding: 5px 8px;
  margin:-3px 0 0 100px;
  position: absolute;

}

/* 大按鈕 */
.btn-lg {
  padding: 10px 24px;
  font-size: 1.05rem;
}

.btn-join {
    display: inline-block;
    background-color: #00a0e9;
    color: #ffffff;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s;
}

.btn-join:hover {
    background-color: #008cd1;
    box-shadow: 0 4px 12px rgba(0, 160, 233, 0.3);
}
.btn-submit {
    background-color: #00a0e9;
    color: #ffffff;
    border: none;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin: 10px auto 0 auto;
}


.back-button{
    padding: 18px 20px;
}

.checkout-button{
    background: #27548A;
    color: #fff ;
    padding: 18px 50px;
    font-size: 18px;
    font-weight: bold;
    text-align:center;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	 	line-height: 1;
	  border-radius: 0;
  	border:none;
  }

.checkout-button .pay{
    padding: 18px 20px;

}

.checkout-button:hover {
    background: #00a0e9;
    text-decoration: none;
}

/* --- 移除按鈕 --- */
.delete-btn {
    color: #a0aec0;
    transition: color 0.2s;
    display: inline-block;
}

.delete-btn:hover {
    color: #3A0519; /* 懸停變酒紅 */
}





/* ==========================================
   TABLES - 訂單與數據展示
   ========================================== */
   

    /* 主表格樣式 */
    .order-table, .class-table {
        width: 100%;
        border-collapse: collapse;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-radius: 8px;
        overflow: hidden;
    }

    /* 表頭 */
    .order-table thead tr, .class-table thead tr{
        text-align: left;
    }

    .order-table tfoot tr, .class-table tfoot tr {
        text-align: right;
    }
    
    .order-table th, 
    .order-table td,
    .class-table th, 
    .class-table td {
        padding: 10px 10px;
        border-bottom: 1px solid #eee;
        line-height:1.5;
    }
    
    .order-table tbody td:first-child {
    		width:55%;
    }

    /* 條紋背景 */
    .order-table tbody tr:nth-of-type(even) {
        background-color: #f9f9f9;
    }

    .order-table tbody tr:hover {
        background-color: #f1f7ff;
    }
.mobile-label{
    display:none;
}

    /* 狀態標籤 (Badge) */
    .status-badge {
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: 500;
        margin:0 5px;
        display:inline-block;
    }


.btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 1.95rem;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}


    
  .social-table {
  width: 650px;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  font-size: 1.15rem;
  background: #f8f4ea;
  margin-left:25px;
}

.social-table tr{
  width: 600px;
  border: 1px solid #333;
}

.social-table th,
.social-table td {
  text-align: center;
  vertical-align: middle;
}

.social-table th {
  width: 220px;
  height:50px;
  color: #fff;
  font-weight: normal;
  padding-top:15px;
	display:inline-block;
}

.social-table th img{
	width:35px;
	float:right;
	margin-right:15px;
	margin-top:-8px;
}

.social-table td {
  width: 100%;
}
.social-table td a{
  color: #222;
}


.social-table .line {
  background: #13c653;
}

.social-table .facebook {
  background: #1877f2;
}

.social-table .instagram {
  background: #ff0069;
}

.social-table .youtube {
  background: #ff1200;
}

 	@media screen and ( max-width: 768px ){
 	
    .class-table {
 width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    }
    
    
    
  .social-table {
 width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

    .order-table thead{
        display:none;
    }

    .order-table,
    .order-table tbody,
    .order-table tr,
    .order-table td{
        display:block;
        width:100%;
    }
      .order-table tbody td:first-child, .order-table tbody td:last-child{
        width:100%;
    }

    .order-table tbody tr{
        margin-bottom:10px;
        padding:10px;
        border-radius:8px;
    }

    /* 保留奇偶數不同顏色 */
    .order-table tbody tr:nth-child(odd){
        background:#fff;
        color:#146eb4;
    }

    .order-table tbody tr:nth-child(even){
        background:#f5f5f5;
        color:#da1884;
    }

    .order-table td{
        border:none;
        padding:4px 0;
    }

    /* 考試名稱 */
    .order-table tbody td:first-child {
        width:100%;
        margin-bottom:5px;
    }

    /* 報名期間 */

    .mobile-label{
        display:inline;
    }

        /* 隱藏線上報名 */
    .online-reg{
        display:none;
    }


    .order-table tfoot td{
        text-align:center;
        padding:12px;
    }
    .order-table tfoot td .footer-link{  
    font-size:0.85rem;
    }
    

    /* 狀態標籤 (Badge) */
    .status-badge {
        padding: 2px 5px;
    }


    /* STYLE/JET 一行 */
    .order-table tfoot a:nth-of-type(2),
    .order-table tfoot a:nth-of-type(3){
        display:inline-block;
        margin:3px;
    }

    /* KITE 換到下一行 */
    .order-table tfoot a:nth-of-type(4){
        display:inline-block;
        margin-top:10px;
    }

    .order-table tfoot a:nth-of-type(4),
    .order-table tfoot a:nth-of-type(5){
        margin-left:3px;
        margin-right:3px;
    }
      .social-table{
    width:100%;
    margin-left:0;
  }

  .social-table,
  .social-table tbody,
  .social-table tr,
  .social-table th,
  .social-table td{
    display:block;
  }

  .social-table tr{
    width:100%;
    border-bottom:1px solid #333;
  }

  .social-table th{
    width:100%;
    height:auto;
    padding:10px 0;
    text-align:center;
    display:block;
  }

  .social-table th img{
    float:none;
    width:28px;
    margin:0 0 0 8px;
    vertical-align:middle;
  }

  .social-table td{
    width:100%;
    padding:12px 8px;
    text-align:center;
    background:#f8f4ea;
    box-sizing:border-box;
  }

  .social-table td a{
    display:inline-block;
    margin:0 8px;
  }
}