:root {
  /* ===================================== */
  /* === Brand & Core Palette (Deep Harmony) === */
  /* ===================================== */

  --color-primary: #4C9BA0;         /* Teal/blue accent from app */
  --color-secondary: #8CA6B0;       /* Muted grey-blue from app */
  --color-accent: #5AD1D0;          /* Brighter teal for contrast/highlights */

  /* Semantic Colors (Adapted for Dark Theme) */
  --color-success: #5CB85C;         /* Green */
  --color-info: #0dcaf0;            /* Cyan (can be subtly adjusted for dark if desired, but often okay) */
  --color-warning: #ffc107;         /* Yellow */
  --color-danger: #FF6B6B;          /* Red from app's error color */

  /* Neutrals & Grays (Optimized for Dark Palette) */
  --color-white: #E4E6EB;           /* App's textPrimary, now used as a 'white' for dark theme */
  --color-light: #A1AAB3;           /* App's textSecondary, used for lighter text/elements */
  --color-dark: #121C24;            /* App's background, now a general 'dark' */
  --color-black: #0F1115;           /* App's even darker if needed, for deepest blacks */

  /* =============================== */
  /* === Backgrounds & Surfaces === */
  /* =============================== */

  --body-bg: #1A2833;               /* Main page background - slightly less intense than app's #121C24 */
  --body-secondary-bg: #1E2A36;     /* App's surface, for elevated containers/cards */
  --body-tertiary-bg: #223240;      /* Slightly lighter dark for more variation/subtle sections */

  --component-bg: var(--body-secondary-bg); /* General background for components like cards, modals */
  --component-hover-bg: #283C4B;     /* Slightly lighter for hover states */
  --component-active-bg: #324D62;    /* Even lighter/more pronounced for active states */

  /* ======================== */
  /* === Typography === */
  /* ======================== */

  --body-color: var(--color-white); /* Main text color, light on dark */
  --body-secondary-color: var(--color-light); /* Dimmer text for secondary info, from app */
  --body-tertiary-color: #6C7A87;   /* Mid-grey for subtle details, captions */

  --heading-color: var(--color-white); /* Headings inherit main body color */
  --link-color: var(--color-primary);
  --link-hover-color: var(--color-accent);
  --link-decoration: none;
  --link-hover-decoration: underline;

  /* ====================== */
  /* === Borders & Shadows === */
  /* ====================== */

  --border-color: #2E3A46;           /* Slightly lighter than surface, for subtle borders */
  --border-radius: 0.375rem;         /* Standard small border radius (Bootstrap default) */
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;

  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  --box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* ==================== */
  /* === Form Elements === */
  /* ==================== */

  --form-control-bg: var(--body-tertiary-bg); /* Input backgrounds */
  --form-control-color: var(--body-color);
  --form-control-border-color: var(--border-color);
  --form-control-focus-border-color: var(--color-primary); /* Primary for focus */
  --form-control-placeholder-color: var(--body-secondary-color);
  --form-control-disabled-bg: #1A222B; /* Slightly darker for disabled inputs */
  --form-control-disabled-color: var(--body-tertiary-color);

  /* ================= */
  /* === Buttons === */
  /* ================= */

  --btn-padding-y: 0.375rem;
  --btn-padding-x: 0.75rem;
  --btn-font-weight: 500;
  --btn-border-radius: var(--border-radius);

  --btn-primary-bg: var(--color-primary);
  --btn-primary-color: var(--color-white);
  --btn-primary-border: var(--color-primary);
  --btn-primary-hover-bg: #408F94; /* Slightly darker primary */
  --btn-primary-hover-border: #408F94;
  --btn-primary-active-bg: #357B80; /* Even darker */
  --btn-primary-active-border: #357B80;
  --btn-primary-disabled-bg: #306D71;
  --btn-primary-disabled-color: var(--body-tertiary-color);
  --btn-primary-disabled-border: #306D71;

  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-color: var(--color-dark); /* Dark text on lighter secondary */
  --btn-secondary-border: var(--color-secondary);
  --btn-secondary-hover-bg: #7C9AA5; /* Slightly darker secondary */
  --btn-secondary-hover-color: var(--color-dark);
  --btn-secondary-hover-border: #7C9AA5;
  --btn-secondary-active-bg: #6B8B97;
  --btn-secondary-active-border: #6B8B97;
  --btn-secondary-disabled-bg: #5D7983;
  --btn-secondary-disabled-color: var(--body-tertiary-color);
  --btn-secondary-disabled-border: #5D7983;

  --btn-light-bg: var(--body-secondary-bg); /* For light buttons on dark background */
  --btn-light-color: var(--color-white);
  --btn-light-border: var(--border-color);
  --btn-light-hover-bg: var(--component-hover-bg);
  --btn-light-hover-color: var(--color-white);
  --btn-light-hover-border: var(--component-hover-bg);

  /* ==================== */
  /* === Transitions === */
  /* ==================== */
  --transition-base: all 0.2s ease-in-out;
  --transition-fade: opacity 0.15s linear;
}

/* ================================== */
/* === Global/Base Styles (Existing) === */
/* ================================== */

body {
  background-color: var(--body-bg);
  color: var(--body-color);
  font-family: 'Kanit', sans-serif !important;
  line-height: 1.6; /* Good default for readability */
}

/* Bootstrap is now assumed to be linked via <link> in HTML */

/* Custom styles for headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem; /* Standard spacing below headings */
}

/* Optional: Use primary brand color for emphasis in specific headings or sections */
.h1-brand, h1.brand-emphasis {
    color: var(--color-primary);
}

a {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  transition: var(--transition-base); /* Smooth transitions for links */
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: var(--link-hover-decoration);
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.img-app-icon {
  height:50px; width:auto;
}

.img-hero {
  height: 500px;
  width: auto;
}

/* ============================ */
/* === Custom Component Styles === */
/* ============================ */

/* Background gradient for specific sections */
.bg {
  background: linear-gradient(
    135deg,
    var(--body-secondary-bg) 0%,   /* Your app's surface color */
    var(--color-dark) 50%,         /* Your app's background color */
    var(--color-black) 100%        /* Your app's darkest color */
  );
  /* Ensure content inside .bg has good contrast with this gradient */
  color: var(--color-white);
}

/* Boxed elements/cards */
.boxed {
  background-color: var(--component-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); /* More pronounced shadow for depth on dark theme */
  padding: 1.5rem; /* Standard padding for content inside boxes */
}

.boxed.shadow-sm {
  box-shadow: var(--box-shadow-sm);
}

.boxed.shadow-lg {
  box-shadow: var(--box-shadow-lg);
}

/* Standard button styles (can be integrated with Bootstrap's .btn classes) */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: 1px solid var(--btn-primary-border);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  transition: var(--transition-base);
  cursor: pointer;
  display: inline-flex; /* For better icon alignment if used */
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
}

.btn-primary:active {
  background-color: var(--btn-primary-active-bg);
  border-color: var(--btn-primary-active-border);
}

.btn-primary:disabled {
  background-color: var(--btn-primary-disabled-bg);
  color: var(--btn-primary-disabled-color);
  border-color: var(--btn-primary-disabled-border);
  cursor: not-allowed;
  opacity: 0.65; /* Standard disabled opacity */
}

/* Similar patterns for btn-secondary, btn-light etc. */
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border: 1px solid var(--btn-secondary-border);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  transition: var(--transition-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border);
}

/* ... and so on for other button states and types */


/* Form control base styles */
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--form-control-color);
  background-color: var(--form-control-bg);
  background-clip: padding-box;
  border: 1px solid var(--form-control-border-color);
  appearance: none; /* Remove default browser styling */
  border-radius: var(--border-radius);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control::placeholder {
  color: var(--form-control-placeholder-color);
  opacity: 1; /* Firefox fix */
}

.form-control:focus {
  color: var(--form-control-color);
  background-color: var(--form-control-bg);
  border-color: var(--form-control-focus-border-color);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary), 0.25); /* Focus ring */
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--form-control-disabled-bg);
  opacity: 1;
}

/* Input groups (if using Bootstrap's form-group structure) */
.input-group-text {
  color: var(--form-control-color);
  background-color: var(--body-tertiary-bg); /* Match input group background */
  border: 1px solid var(--form-control-border-color);
  border-radius: var(--border-radius);
}


.slider {
  margin-top: 10vh;
  margin-bottom: 10vh;
}

/* Font weights — Kanit family (unchanged) */
.kanit-thin       { font-weight: 100; }
.kanit-extralight { font-weight: 200; }
.kanit-light      { font-weight: 300; }
.kanit-regular    { font-weight: 400; }
.kanit-medium     { font-weight: 500; }
.kanit-semibold   { font-weight: 600; }
.kanit-bold       { font-weight: 700; }
.kanit-extrabold  { font-weight: 800; }
.kanit-black      { font-weight: 900; }

.kanit-thin-italic       { font-weight: 100; font-style: italic; }
.kanit-extralight-italic { font-weight: 200; font-style: italic; }
.kanit-light-italic      { font-weight: 300; font-style: italic; }
.kanit-regular-italic    { font-weight: 400; font-style: italic; }
.kanit-medium-italic     { font-weight: 500; font-style: italic; }
.kanit-semibold-italic   { font-weight: 600; font-style: italic; }
.kanit-bold-italic       { font-weight: 700; font-style: italic; }
.kanit-extrabold-italic  { font-weight: 800; font-style: italic; }
.kanit-black-italic      { font-weight: 900; font-style: italic; }

/* Misc */
.grecaptcha-badge {
  visibility: hidden; /* Keep this if you want to hide the badge */
}

/* Privacy Policy table styling */
.table-custom {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  font-size: 0.95rem;
  color: var(--body-color);
  background-color: var(--component-bg);
  box-shadow: var(--box-shadow-sm);
}

.table-custom thead tr {
  background-color: var(--body-tertiary-bg);
  color: var(--color-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
}

.table-custom th,
.table-custom td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.table-custom tbody tr:hover {
  background-color: var(--component-hover-bg);
  cursor: default;
  transition: background-color 0.3s ease;
}

.table-custom tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive tweak if needed */
@media (max-width: 576px) {
  .table-custom th,
  .table-custom td {
    padding: 0.5rem 0.75rem;
  }
}