/*
 THAI FINANCE CUSTOMER THEME
 STEP 583
 Visual styles only. No business logic.
*/

:root {
  --tf-primary: #3D525D;
  --tf-primary-dark: #293D47;
  --tf-green: #00A650;
  --tf-green-dark: #00572D;
  --tf-white: #FFFFFF;
  --tf-background: #F4F7F5;
  --tf-surface: #FFFFFF;
  --tf-text: #263B44;
  --tf-muted: #73838A;
  --tf-border: #E2EAE6;
  --tf-radius: 20px;
  --tf-shadow: 0 10px 30px rgba(34,65,51,.08);
}

/* Page foundation */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--tf-text);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0,166,80,.35);
  outline-offset: 3px;
}

/* Shared financial UI components */

.tf-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
}

.tf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.tf-button:active {
  transform: scale(.985);
}

.tf-button-primary {
  background: var(--tf-green);
  color: var(--tf-white);
  box-shadow: 0 6px 16px rgba(0,166,80,.18);
}

.tf-button-secondary {
  background: var(--tf-white);
  color: var(--tf-green-dark);
  border: 1px solid var(--tf-green);
}

.tf-field {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  background: var(--tf-white);
  color: var(--tf-text);
  padding: 11px 14px;
}

.tf-field:focus {
  border-color: var(--tf-green);
  outline: 3px solid rgba(0,166,80,.12);
}

.tf-label {
  display: block;
  margin-bottom: 8px;
  color: var(--tf-primary);
  font-size: 13px;
  font-weight: 700;
}

.tf-muted {
  color: var(--tf-muted);
}

.tf-section-title {
  color: var(--tf-primary-dark);
  font-weight: 800;
  line-height: 1.5;
}

.tf-divider {
  border: 0;
  border-top: 1px solid var(--tf-border);
}

.tf-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 11px;
  background: #E5F7ED;
  color: var(--tf-green-dark);
  font-size: 12px;
  font-weight: 700;
}

/* Responsive safety */

img {
  max-width: 100%;
}

.tf-container {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

@media (max-width: 480px) {
  .tf-card {
    border-radius: 18px;
  }

  .tf-button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tf-button {
    transition: none;
  }
}



/* THAI_FINANCE_GREEN_VISUAL_STEP587 */

/* Global foundation */
html body {
  background:#F4F7F5;
  color:#263B44;
}

body .app,
body .wrap,
body main {
  background-color:#F4F7F5;
}

/* Text and headings */
body h1,
body h2,
body h3,
body .section-title {
  color:#293D47;
}

/* Primary action buttons */
body .btn,
body .primary-btn,
body .btn-primary,
body .submit-btn,
body button[type="submit"] {
  background:#00A650;
  color:#FFFFFF;
  border-color:#00A650;
  box-shadow:0 6px 18px rgba(0,166,80,.18);
}

/* Secondary actions */
body .btn-secondary,
body .secondary-btn,
body .outline-btn {
  background:#FFFFFF;
  color:#00572D;
  border:1px solid #00A650;
}

/* Home page */
body .hero .btn {
  background:#00A650;
  color:#FFFFFF;
  border-color:#00A650;
}

body .stats,
body .step {
  background:#FFFFFF;
  border:1px solid #E2EAE6;
  box-shadow:0 8px 22px rgba(34,65,51,.07);
}

body .stat b,
body .step strong {
  color:#00572D;
}

/* Profile member card */
body .member-card {
  background:linear-gradient(125deg,#3D525D,#00572D);
  color:#FFFFFF;
  box-shadow:0 10px 26px rgba(0,87,45,.17);
}

/* Wallet financial actions */
body .summary button,
body .summary-actions button,
body .summary-actions a {
  border-color:#00A650;
}

body .summary-actions button:first-child,
body .summary-actions a:first-child {
  background:#00A650;
  color:#FFFFFF;
}

body .summary-actions button:last-child,
body .summary-actions a:last-child {
  background:#FFFFFF;
  color:#00572D;
}

/* General cards */
body .card,
body .menu-card,
body .summary,
body .stats,
body .step {
  border-color:#E2EAE6;
}

/* Form focus */
body input:focus,
body select:focus,
body textarea:focus {
  border-color:#00A650;
  outline-color:rgba(0,166,80,.2);
}

/* Bottom navigation */
body .nav {
  background:#FFFFFF;
  border-top:1px solid #E2EAE6;
}

body .nav a {
  color:#73838A;
}

body .nav a.active,
body .nav a[aria-current="page"] {
  color:#00572D;
  background:#E5F7ED;
}

/* Icons and visual accents */
body .menu-icon,
body .icon-box,
body .step-number {
  color:#00572D;
  background:#E5F7ED;
}

/* Links */
body a:focus-visible,
body button:focus-visible {
  outline:3px solid rgba(0,166,80,.35);
  outline-offset:2px;
}

/* Responsive */
@media(max-width:480px) {
  body .card,
  body .menu-card,
  body .summary {
    border-radius:20px;
  }
}