/* 植光積品牌色系（cream / cocoa / sun / moss，同官網首頁） */
:root {
  --theme-color: #FFC72C;
  --theme-color2: #FAF8F3;
  --vs-secondary-color: #4A7C59;
  --black-color: #5C4033;
  --title-font: "M PLUS Rounded 1c", sans-serif;
  --body-font: "M PLUS Rounded 1c", sans-serif;
}

/* 文字 Logo（植光積尚無圖檔 Logo） */
.text-logo {
  font-family: var(--title-font);
  font-size: 30px;
  font-weight: 800;
  color: var(--black-color);
  text-decoration: none;
}
.text-logo:hover {
  color: var(--vs-secondary-color);
}
.text-logo-light,
.text-logo-light:hover {
  color: #fff;
}
.text-black {
  color: var(--black-color) !important;
}
.vs-wave-shape.style4 .wave-path {
  fill: var(--theme-color);
}
.header-links li {
    color: var(--black-color);
}
.header-links.style3 i {
  color: var(--white-color);
  background-color: var(--vs-secondary-color);
}
.header-layout4 .header-logo2 img {
    height: 80px;
}
.header-layout2 .searchBoxTggler::before {
  display: none;
}
@media (max-width: 1399px) {
  .header-layout2 {
    background-color: var(--theme-color);
  }
  .header-layout2 .menu-area {
    padding: 0 35px;
  }
}
.vs-btn {
  background-color: var(--vs-secondary-color);
}
@media (max-width: 1299px) {
    .vs-btn {
        padding: 19px 26px 20px 26px;
    }
}
.sec-subtitle {
  color: var(--vs-secondary-color);
}
.feature-style .feature-icon {
  background-color: rgba(43, 177, 207, 0.1);
}
.feature-style:nth-child(2) .feature-icon {
  background-color: rgba(255, 86, 39, 0.1);
}
.feature-style:nth-child(3) .feature-icon {
  background-color: rgba(255, 246, 234, 0.8);
}
.feature-style:nth-child(4) .feature-icon {
  background-color: rgba(237, 249, 244, 0.7);
}
@media (max-width: 768px) {
    .feature-style .feature-icon {
        width: 100px;
        height: 100px;
    }
}
.testi-style1 {
  background-color: var(--theme-color);
}
.testi-style1 .testi-icon {
  background-color: var(--vs-secondary-color);
}
.testi-style1 .testi-name {
  font-size: 32px;
  color: var(--black-color);
}
.testi-style1 .testi-text {
  font-size: 16px;
  color: var(--black-color);
}
a.blog-btn {
  color: var(--vs-secondary-color);
}
.footer-logo img {
    height: 100px;
    margin-top: -30px;
}

/*==============================
  Account Page
==============================*/
.account-section {
  background-color: #f6fbfd;
}

/* Hero header with avatar + name */
.account-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 20px;
  background: linear-gradient(120deg, var(--theme-color) 0%, #d8f3df 100%);
  box-shadow: 0 12px 30px rgba(70, 130, 180, 0.12);
}
.account-hero-avatar img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(34, 34, 34, 0.15);
}
.account-hero-name {
  margin: 0 0 4px;
  color: var(--black-color);
  font-weight: 700;
}
.account-hero-email {
  margin: 0;
  color: var(--vs-secondary-color);
  font-size: 16px;
}
.account-hero-email i {
  margin-right: 6px;
}
@media (max-width: 575px) {
  .account-hero {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
}

/* Field cards */
.account-card {
  background: #fff;
  border: 1px solid #eaf1f5;
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(70, 130, 180, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.account-card:hover {
  box-shadow: 0 10px 28px rgba(70, 130, 180, 0.12);
}
.account-card:last-child {
  margin-bottom: 0;
}
.account-card-danger {
  border-color: #f5d6d6;
  background: #fffafa;
}
.account-card-avatar {
  text-align: center;
}

/* Section header inside each card */
.account-card .section-title {
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef3f6 !important;
}
.account-card .section-title h5 {
  margin: 0;
  color: var(--black-color);
  font-weight: 700;
}
.account-card-danger .section-title h5 {
  color: #c0392b;
}
.account-card .section-title .btn-outline-secondary {
  border-color: var(--vs-secondary-color);
  color: var(--vs-secondary-color);
  border-radius: 30px;
  padding: 4px 18px;
}
.account-card .section-title .btn-outline-secondary:hover {
  background-color: var(--vs-secondary-color);
  color: #fff;
}

/* Read-only field values */
.account-card .field-value {
  color: var(--black-color);
  font-weight: 500;
}
.account-card label {
  margin-bottom: 0;
}

/* Inputs */
.account-card .form-control {
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid #dbe7ed;
}
.account-card .form-control:focus {
  border-color: var(--vs-secondary-color);
  box-shadow: 0 0 0 0.2rem rgba(70, 130, 180, 0.15);
}

/* Action buttons row */
.account-card .section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.account-card .section-actions .btn-primary {
  background-color: var(--vs-secondary-color);
  border-color: var(--vs-secondary-color);
  border-radius: 30px;
  padding: 8px 28px;
}
.account-card .section-actions .btn-primary:hover {
  background-color: #3a6d97;
  border-color: #3a6d97;
}
.account-card .section-actions .btn-link {
  color: #8a99a3;
  text-decoration: none;
}

/* Avatar preview */
.account-card-avatar .img-thumbnail {
  border-radius: 16px;
  border: 1px solid #eaf1f5;
  padding: 8px;
}