/* 通知樣式 */
.snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #3685cfdb;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 16px;
  position: fixed;
  z-index: 99999;
  right: 3%;
  bottom: 30px;
  font-size: 17px;
}

.snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* my-website_setting頁面專用的box樣式 */
.my_site_container .my-box {
  min-height: 300px;
  margin-bottom: 10px;
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 10px;
  padding: 0; /* 移除padding讓header能貼合邊框 */
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; /* 改為hidden確保header圓角正確顯示 */
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.my_site_container .my-box:hover {
  border: 1px solid #cd3f6282;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(205, 63, 98, 0.15);
}

/* 通用的my-box樣式（用於AI編輯器等其他頁面） */
.my-box {
  min-height: 300px;
  margin-bottom: 10px;
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 10px;
  padding: 15px; /* 保持原有的padding */
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
  overflow: visible; /* 保持原有的overflow */
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.my-box:hover {
  border: 1px solid #cd3f6282;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(205, 63, 98, 0.15);
}

/* 確保內容區域填滿可用空間 */
.my-box .profile-pic {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 10px auto 15px auto;
}

.my-box .box_title:not(.box-header .box_title) {
  padding-top: 0;
  margin-bottom: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.my-box p {
  flex-grow: 1;
  margin-bottom: 10px;
  text-align: center;
  color: #666;
  line-height: 1.4;
}

/* box header 樣式 */
.box-header {
  background: linear-gradient(135deg, #cd3f62, #e56b87);
  padding: 18px 20px; /* 稍微增加padding讓文字有適當間距 */
  margin: 0;
  border-radius: 10px 10px 0 0; /* 只有頂部圓角 */
  position: relative;
  text-align: center; /* 讓網站名稱置中 */
  flex-shrink: 0; /* 防止被壓縮 */
}

.box-header h3 {
  color: white !important;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  line-height: 1.3;
}

/* 確保box_title在header中的樣式 */
.box-header .box_title {
  color: white !important;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* box content 樣式 */
.box-content {
  padding: 20px; /* 調整padding確保內容有適當間距 */
  background: white;
  border-radius: 0 0 10px 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1; /* 讓content區域填滿剩餘空間 */
}

/* box content 內的文字樣式 */
.website-url {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.website-url i {
  color: #cd3f62;
  margin-right: 8px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.website-url a {
  color: #cd3f62;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
}

.website-url a:hover {
  color: #a23350;
  text-decoration: underline;
}

/* 模板類型樣式 */
.template-type {
  color: #666;
  font-size: 14px;
  margin: 8px 0 12px 0;
  display: flex;
  align-items: center;
}

.template-type i {
  color: #888;
  margin-right: 8px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* 到期日樣式 */
.box-content .date-info {
  color: #666;
  font-size: 15px;
  margin: 8px 0;
  line-height: 1.4;
}

.date-info i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

/* 過期日期特殊樣式 */
.expired-date {
  color: #ff4444 !important;
  font-weight: bold !important;
  font-size: 15px !important; /* 增加字體大小 */
  background: #fff5f5;
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid #ff4444;
  margin: 8px 0;
}

/* 有效日期特殊樣式 */
.valid-date {
  color: #28a745 !important;
  font-weight: bold !important;
  font-size: 15px !important;
  background: #f8fff9;
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid #28a745;
  margin: 8px 0;
}

/* 未設定網址樣式 */
.no-domain {
  color: #999 !important;
  font-style: italic;
  cursor: default;
}

.no-domain:hover {
  color: #999 !important;
  text-decoration: none !important;
}

.website-url .no-domain {
  color: #999 !important;
}

.col-3 {
  flex: 0 0 calc(25% - 30px);
  max-width: calc(25% - 30px);
}

.head_container {
  max-width: 1520px !important;
  width: 1520px;
  padding: 10px !important;
}

.my_site_container {
  max-width: 1520px !important;
  width: 1520px;
  background-color: #fff !important;
  padding: 10px !important;
  min-height: 600px;
}

.tablinks{
  font-size: medium;
  height: 40px;
  padding: 5px 10px;
}

.tablinks:hover {
  color: #cd3f62; /* 這將使文字變為紅色 */
}

.tablinks.active {
  color: #cd3f62; /* 這將使文字變為紅色 */
  border-bottom: 3px solid #cd3f62; /* 這將在底部添加一條黑色的邊框 */
}

.box_container {
  max-width: 1600px !important;
  width: 1600px;
  background-color: #fff !important;
  padding: 10px !important;
  min-height: 600px;
}

.add-body {
  max-width:50%; 
}

.talk-body {
  max-width:50%; 
}

.btn-add_editor {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #cd3f62;
  border: none;
  color: white;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-add_editor:hover {
  background-color: #a23350;
  transform: scale(1.05);
}

.btn-add_editor i {
  font-size: 2.5rem;
}

.share-button {
  position: absolute; 
  right: 10px; 
  top: 10px;
  border: 1px solid #ddd;
  background-color: #f8f9fa;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.share-button i {
  color: #6c757d;
  font-size: 14px;
}

.share-button:hover {
  border-color: #cd3f62;
  background-color: #cd3f62;
  transform: scale(1.05);
}

.share-button:hover i {
  color: white !important;
}

.line-notify-button {
  position: absolute; 
  right: 10px; 
  top: 52px;
  border: 1px solid #ddd;
  background-color: #f8f9fa;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.line-notify-button i {
  color: #6c757d;
  font-size: 14px;
}

.line-notify-button:hover {
  border-color: #cd3f62;
  background-color: #cd3f62;
  transform: scale(1.05);
}

.line-notify-button:hover i {
  color: white !important;
}


.delete-button {
  position: absolute; 
  left: 10px; 
  top: 10px;
  border: 1px solid #ddd;
  background-color: #f8f9fa;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.delete-button i {
  color: #6c757d;
  font-size: 14px;
}

.delete-button:hover {
  border-color: #cd3f62;
  background-color: #cd3f62;
  transform: scale(1.05);
}

.delete-button:hover i {
  color: white !important;
}

.tab_wrap {
  text-align: left;
}

.tablinks {
  background: none;
  border: none;
  color: black;
  text-decoration: none;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .col-3 {
    flex: 0 0 90%;
    max-width: 100%;
  }

  .box_container {
    padding: 20 !important;
    min-height: 400px;
  }

  .my_site_container {
    padding: 20 !important;
    min-height: 400px;
  }

  .add-body {
    max-width:90%; 
  }

  .talk-body {
    max-width:90%; 
  }

  .my-box {
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px;
  }
  
  .share-button, .delete-button, .line-notify-button {
    width: 32px;
    height: 32px;
  }
  
  .share-button i, .delete-button i, .line-notify-button i {
    font-size: 12px;
  }
  
  .btn-center .btn {
    min-width: 100px;
    padding: 10px 15px;
    font-size: 14px;
  }
  
  /* 手機版表單inline優化 */
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-inline .form-control {
    width: 100% !important;
    margin-bottom: 8px;
  }
  
  /* 子網域輸入框完整重寫 */
  .sub_domain_div {
    text-align: left;
    display: flex !important;
    flex-direction: column;
    position: relative;
  }
  
  .sub_domain_div .form-control {
    width: 100% !important;
    margin-bottom: 5px;
  }
  
  .sub_domain_div::after {
    content: "網址後綴：.easy-gogo.com";
    display: block;
    color: #666;
    font-size: 12px;
    margin-top: -3px;
    font-style: italic;
    padding-left: 3px;
  }
  
  /* 自有網域輸入框完整重寫 */
  .main_domain_div {
    text-align: left;
    display: flex !important;
    flex-direction: column;
    font-size: 0; /* 隱藏www.前綴 */
  }
  
  .main_domain_div .form-control {
    width: 100% !important;
    font-size: 16px; /* 恢復輸入框字體大小 */
  }
  
  .main_domain_div::before {
    content: "請輸入完整網域名稱 (例如: example.com)";
    display: block;
    font-weight: 500;
    color: #cd3f62;
    margin-bottom: 8px;
    font-size: 13px;
  }
}

/* 手機版額外優化 */
@media (max-width: 480px) {
  .modal-dialog {
    margin: 2% auto !important;
    width: 98%;
    max-width: 98%;
  }
  
  .modal-body {
    padding: 12px;
  }
  
  .form_group_submit .btn {
    width: 100%;
    margin: 5px 0;
  }
  
  .domain-options-container .radio_option {
    padding: 8px 10px;
  }
  
  .radio-text {
    font-size: 15px;
  }
  
  .option-description {
    font-size: 12px;
  }
}

.img_cloudfalre {
	width: 25px;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	filter: brightness(0) invert(1); /* 讓圖標變成白色 */
	z-index: 10; /* 確保圖標在最上層 */
}

.edit_bt {
	font-size: 18px;
  margin-right: 10px;
}

/* 主網域預設選項關閉，子網域預設顯示 */
.main_domain_div {
	display: none;
}

.sub_domain_div {
	display: block;
}

.container {
  display: inline-block;
  width: 100%;
}

.title_wrap {
  margin-bottom: 1%;
  margin-top: 1%;
  text-align: center;
}

.title_wrap_login {
  margin-bottom: 30px;
}


.box_row {
  flex-direction: row !important;
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.ast-page-builder-template .site-content > .ast-container {
  max-width: 100%;
  background-color: #F9FAFB !important;
}

.ast-container {
  display: flex;         /* 啟用Flexbox */
  justify-content: center; /* 水平置中 */
  align-items: center;     /* 垂直置中 */
  flex-direction: column;  /* 使元素垂直堆疊 */
  min-height: 80vh;       /* 使容器至少和視窗高度一樣高，這樣才能確保內容完全居中 */
}

.page_title {
  font-size: 32px;
  margin: auto;
  align-content: center;
  color:#cd3f62;
  padding-bottom:15px;
}

.btn-primary {
  background-color: #cd3f62;
  border-color: #cd3f62;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #cd3f62;
  border-color: #cd3f62;
  color:#fff;
}

.btn-ing, .btn-ing:focus, .btn-ing:hover {
  background-color: #2D6C80;
  border-color: #2D6C80;
  color:#fff;
}

.btn-failed, .btn-failed:focus, .btn-failed:hover {
  background-color: #FF4010;
  border-color: #FF4010;
  color:#fff;
}

.btn-ok, .btn-ok:focus, .btn-ok:hover {
  background-color: #506FCE;
  border-color: #506FCE;
  color:#fff;
}

.btn-center {
  margin-top: auto;
  text-align: center;
  padding-top: 15px;
}

.btn-center .btn {
  min-width: 120px;
  padding: 12px 20px;
  font-size: 15px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
}

/* 確保按鈕顏色正確 */
.btn-center .btn-primary {
  background-color: #cd3f62 !important;
  border-color: #cd3f62 !important;
  color: white !important;
}

.btn-center .btn-primary:hover {
  background-color: #a23350 !important;
  border-color: #a23350 !important;
}

.btn-center .btn-ing {
  background-color: #2D6C80 !important;
  border-color: #2D6C80 !important;
  color: white !important;
}

.btn-center .btn-failed {
  background-color: #FF4010 !important;
  border-color: #FF4010 !important;
  color: white !important;
}

.btn-center .btn-ok {
  background-color: #506FCE !important;
  border-color: #506FCE !important;
  color: white !important;
}

.form-inline .form-control {
  width: 91%;
}

.form_group_submit {
  text-align: right;
}

.modal-dialog {
  margin: 12% auto !important;
}

.modal-title {
  font-size: 20px;
}

.elementor-676 .elementor-element.elementor-element-4466a7e > .elementor-widget-container {
  margin-bottom: 0px !important;
}

.custom_product_titile_type {
  display: block; /* 讓方框在同一行並有間距 */
  padding: 10px; /* 方框內的間距 */
  margin: 10px; /* 方框之間的間距 */
  background-color: #f0f0f0; /* 底色灰色 */
  border: 1px solid #dcdcdc; /* 灰色框線 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 淡淡的陰影 */
  text-align: center; /* 文字置中 */
}

.wrap_not_login {
  display: none;
}

#select_designers {
  width: 100%;
}

.btn_close_falre {
  margin-top: 20px;
}

/* 表單組標籤美化 */
.form-group-label {
  display: block;
  margin-bottom: 6px; /* 減少下方間距 */
  font-weight: 600;
  color: #333;
  font-size: 15px;
}

/* 表單群組間距調整 */
.modal-body .form-group {
  margin-bottom: 20px; /* 統一表單群組的間距 */
}

.modal-body .form-group:last-of-type {
  margin-bottom: 0; /* 最後一個表單群組不需要下方間距 */
}

/* 移除舊的網域選項樣式，已改用新的卡片式設計 */

.active_user {
  background-color: #FF4010;
}

.active_user:hover, .active_user:focus {
  background-color: #f85026;
}

.switch_design {
  background-color: #2D6C80;
}

.switch_design:hover, .switch_design:focus {
  background-color: #3f869b;
}

.active_user, .stop_user {
  margin-left: 5px;
}

.profile-pic {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  display: block; /* 確保圖片是區塊級元素 */
  margin: 0 auto; /* 置中對齊 */
}

/* 移除重複的box_title定義，避免樣式衝突 */

.site-check-input {
  display: none;
}

.site-check-label {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.site-check-label:hover {
  background-color: #e0e0e0;
}

/* my-website_setting頁面專用的box-header和box-content樣式 */
.my_site_container .box-header {
  background: linear-gradient(135deg, #cd3f62, #e56b87);
  padding: 18px 20px;
  margin: 0;
  border-radius: 10px 10px 0 0;
  position: relative;
  text-align: center;
  flex-shrink: 0;
}

.my_site_container .box-header h3,
.my_site_container .box-header .box_title {
  color: white !important;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.my_site_container .box-content {
  padding: 20px;
  background: white;
  border-radius: 0 0 10px 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

/* 網域選項容器美化樣式 */
.domain-options-container {
  display: flex;
  gap: 15px;
  margin-top: 8px; /* 減少上方間距 */
  flex-wrap: wrap;
}

.domain-options-container .radio_option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 15px; /* 減少padding讓卡片更緊湊 */
  border: 2px solid #e9ecef;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 180px; /* 減少最小寬度 */
  margin: 0;
}

.domain-options-container .radio_option:hover {
  border-color: #cd3f62;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(205, 63, 98, 0.1);
}

.domain-options-container .radio_option input[type="radio"] {
  margin: 0 0 8px 0;
  transform: scale(1.2);
}

.domain-options-container .radio_option.selected {
  border-color: #cd3f62;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(205, 63, 98, 0.15);
}

.domain-options-container .radio-text {
  font-weight: 600;
  color: #333;
  font-size: 16px;
  margin-bottom: 4px;
}

.domain-options-container .option-description {
  color: #666;
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
}

.domain-options-container .radio_option.selected .radio-text {
  color: #cd3f62;
}

/* 網域輸入框美化樣式 */
.sub_domain_div, .main_domain_div {
  margin-top: 12px; /* 減少上方間距 */
  padding: 15px; /* 減少padding */
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.sub_domain_div {
  display: block; /* 預設顯示免費網域輸入框 */
}

.main_domain_div {
  display: none; /* 預設隱藏自有網域輸入框 */
}

.sub_domain_div .form-control, .main_domain_div .form-control {
  border: 2px solid #e9ecef;
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 15px;
  transition: border-color 0.3s ease;
}

.sub_domain_div .form-control:focus, .main_domain_div .form-control:focus {
  border-color: #cd3f62;
  box-shadow: 0 0 0 0.2rem rgba(205, 63, 98, 0.25);
}

.sub_domain_div::before {
  content: "免費網域";
  display: block;
  font-weight: 600;
  color: #cd3f62;
  margin-bottom: 10px;
  font-size: 14px;
}

.main_domain_div::before {
  content: "自有網域";
  display: block;
  font-weight: 600;
  color: #cd3f62;
  margin-bottom: 10px;
  font-size: 14px;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .domain-options-container {
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
  }
  
  .domain-options-container .radio_option {
    min-width: unset;
    padding: 15px 12px; /* 增加觸控區域 */
    width: 100%;
    position: relative;
  }
  
  .domain-options-container .radio_option input[type="radio"] {
    transform: scale(1.3); /* 放大radio按鈕 */
    margin: 0 0 10px 0;
  }
  
  .radio-text {
    font-size: 16px !important;
    font-weight: 600;
  }
  
  .option-description {
    font-size: 13px !important;
    color: #666;
    margin-top: 2px;
  }
  
  /* Modal在手機上的調整 */
  .modal-dialog {
    margin: 3% auto !important;
    width: 96%;
    max-width: 96%;
  }
  
  .modal-content {
    border-radius: 12px;
    border: none;
  }
  
  .modal-body {
    padding: 18px;
  }
  
  .modal-header {
    padding: 15px 18px;
    border-bottom: 1px solid #e9ecef;
  }
  
  .modal-title {
    font-size: 18px;
  }
  
  /* 表單輸入框手機優化 */
  .sub_domain_div, .main_domain_div {
    margin-top: 8px;
    padding: 12px;
  }
  
  .sub_domain_div {
    display: block; /* 確保在手機版也預設顯示 */
  }
  
  .main_domain_div {
    display: none; /* 確保在手機版也預設隱藏 */
  }
  
  .sub_domain_div .form-control, .main_domain_div .form-control {
    padding: 10px 12px;
    font-size: 16px; /* 防止iOS縮放 */
  }
  
  /* 手機版表單組間距調整 */
  .modal-body .form-group {
    margin-bottom: 15px;
  }
  
  /* 按鈕在手機上的調整 */
  .form_group_submit {
    text-align: center;
    margin-top: 20px;
  }
  
  .form_group_submit .btn {
    width: 48%;
    margin: 0 1%;
    padding: 12px 8px;
    font-size: 15px;
    font-weight: 500;
  }
}

/* 手機版額外優化 */
@media (max-width: 480px) {
  .modal-dialog {
    margin: 2% auto !important;
    width: 98%;
    max-width: 98%;
  }
  
  .modal-body {
    padding: 12px;
  }
  
  .form_group_submit .btn {
    width: 100%;
    margin: 5px 0;
  }
  
  .domain-options-container .radio_option {
    padding: 8px 10px;
  }
  
  .radio-text {
    font-size: 15px;
  }
  
  .option-description {
    font-size: 12px;
  }
}