/**
 * Fallbacks for older browsers (Win XP / Win7 / IE11 / Chrome < 60)
 * Loaded after app.css — does not change modern Win10/11 look when CSS vars/grid work.
 * When html has class "is-legacy", stronger layout fallbacks apply.
 */

/* —— Login tip —— */
.login-browser-tip {
  background: #fff8e1;
  border-bottom: 2px solid #f0c36d;
  color: #5c4500;
  padding: 10px 14px;
  font: 14px/1.45 Tahoma, "Segoe UI", Arial, sans-serif;
  text-align: center;
}
.login-browser-tip a {
  color: #0d7a4f;
  font-weight: 700;
}

/* —— CSS variable color/value fallbacks (browsers without var()) —— */
body {
  font-family: "Sarabun", "Segoe UI", Tahoma, Arial, sans-serif;
  background-color: #f4f6f9;
  color: #1a2332;
}
a { color: #0f4c81; }

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  /* border-radius / box-shadow already have literals in many rules; reinforce */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 30, 60, 0.08);
}

.footer { color: #6b7280; }
.muted { color: #6b7280; }

.btn {
  background: #0f4c81;
  color: #fff;
}
.btn-success { background: #0d7a4f; }
.btn-danger { background: #b42318; }
.btn-accent { background: #c9a227; color: #1a1500; }
.btn-logout {
  display: inline-block;
  background: #fde8e8;
  border: 1px solid #f0c2c0;
  border-radius: 20px;
  color: #111;
  padding: 6px 12px;
  font-weight: 700;
  text-decoration: none;
}
.btn-logout .btn-logout-ico {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  background: #f8d4d2;
  border-radius: 50%;
}
.btn-logout .btn-logout-text {
  color: #111;
  vertical-align: middle;
}
.btn-logout:hover {
  background: #f9d4d2;
  color: #000;
}
.btn-logout-block {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  box-sizing: border-box;
}
/* Hide desktop logout on mobile layout when old CSS only — app.css media handles it */
.userbox-desktop .btn-logout {
  color: #111;
}
.btn-outline,
.btn-outline-dark {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #1a2332;
}

.stat.buy .value { color: #0d7a4f; }
.stat.sale .value { color: #0f4c81; }

.login-wrap {
  background-color: #f4f6f9;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 30, 60, 0.08);
}

/* sticky not supported → fixed top bar still works as static flow */
.topbar {
  position: relative;
  background: #0b3a63;
  color: #fff;
}

/* —— Grid → block/float fallbacks when grid unsupported —— */
/* Modern browsers keep display:grid from app.css; IE/old Chrome ignore unknown
   and may fall through if we only set when .is-legacy */

html.is-legacy .grid,
html.is-legacy .grid-2,
html.is-legacy .grid-3,
html.is-legacy .grid-4,
html.is-legacy .form-row,
html.is-legacy .login-wrap {
  display: block;
  width: 100%;
}

html.is-legacy .grid-2 > *,
html.is-legacy .grid-3 > *,
html.is-legacy .grid-4 > * {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  float: none;
}

html.is-legacy .form-row > * {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem;
}

/* place-items:center fallback for login */
html.is-legacy .login-wrap {
  min-height: 100vh;
  padding: 1rem;
  text-align: center;
}
html.is-legacy .login-card {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  margin: 2rem auto;
}

/* flex gap not supported → child margins */
html.is-legacy .topbar-inner > * ,
html.is-legacy .toolbar > * ,
html.is-legacy .tabs > * ,
html.is-legacy .nav-list > * ,
html.is-legacy .userbox > * ,
html.is-legacy .brand-link > * ,
html.is-legacy .help-hero-actions > * {
  margin-right: 0.5rem;
  margin-bottom: 0.35rem;
}

html.is-legacy .toolbar {
  display: block;
}
html.is-legacy .toolbar .form-group {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 0.6rem;
  margin-bottom: 0.5rem;
}

html.is-legacy .tabs {
  display: block;
}
html.is-legacy .tabs .tab,
html.is-legacy .tabs a,
html.is-legacy .tabs button {
  display: inline-block;
  margin: 0 0.35rem 0.35rem 0;
}

/* Multi-line sell/buy rows */
html.is-legacy .multi-line,
html.is-legacy .currency-card,
html.is-legacy .cur-card {
  display: block;
  width: 100%;
  overflow: hidden;
}
html.is-legacy .currency-card .meta,
html.is-legacy .multi-line .meta {
  display: block;
}

/* object-fit fallback */
html.is-legacy img {
  max-width: 100%;
  height: auto;
}

/* min() / clamp() unsupported — brand name width */
html.is-legacy .brand-name {
  max-width: 280px;
}

/* Table overflow */
html.is-legacy .rates-board-table-wrap,
html.is-legacy .table-wrap,
html.is-legacy table.data {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* Help browser section */
.help-browser-box {
  background: #f0faf5;
  border: 1px solid #b7e4c7;
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 0.75rem 0 1rem;
}
.help-browser-box h3 {
  margin-top: 0;
  color: #0d5c3a;
}
.help-browser-box ol {
  margin: 0.4rem 0 0.6rem 1.2rem;
  padding: 0;
}
.help-browser-warn {
  background: #fff8e1;
  border: 1px solid #f0c36d;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  color: #5c4500;
}

/* IE/old: hide features that rely on modern APIs gracefully */
html.is-legacy .nav-toggle {
  /* keep visible on small screens via app.css media queries */
}

/* Clear floats */
html.is-legacy .clearfix:after,
html.is-legacy .grid:after {
  content: "";
  display: table;
  clear: both;
}

/* Print: keep simple */
@media print {
  .login-browser-tip,
  #loyalty-browser-banner {
    display: none !important;
  }
}