/* =========================
   Light Minimalist Redesign for homepage (CSS-only) - Fixed
   ========================= */

/* CSS Vars (palette) */
:root {
  --bg: #f8f9fa;
  --bg-accent: radial-gradient(1200px 600px at 10% -10%, #eff6ff 0%, transparent 50%),
               radial-gradient(900px 500px at 100% 0%, #f3e8ff 0%, transparent 60%),
               radial-gradient(700px 400px at 40% 100%, #e6fffa 0%, transparent 55%);
  --card: #ffffff;
  --card-2: #f9fafb;
  --muted: #6b7280;
  --text: #1f2937;
  --border: #d1d5db;
  --input: #f9fafb;
  --input-border: #d1d5db;
  --accent: #3b82f6;
  --accent-2: #8b5cf6;
  --accent-3: #10b981;
  --danger: #ef4444;
  --shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --ring: 0 0 0 2px rgba(59,130,246,.2);
  --glow: 0 0 0 1px rgba(59,130,246,.1);
  --speed: .15s;
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: auto; min-height: 100%; overflow-y: auto; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 42px 16px;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--bg-accent);
  opacity: .5;
}

/* Container */
.mix-container {
  width: 100%;
  max-width: 1100px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

/* Header */
.mix-header { text-align: center; margin-bottom: 26px; }
.mix-logo {
  width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}
.mix-title {
  font-weight: 600;
  letter-spacing: .2px;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  color: var(--text);
}

/* Panels wrapper */
.exchange-panel {
  display: flex;
  align-items: stretch;
  gap: 22px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

/* Panel */
.panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--speed), border-color var(--speed);
}
.panel:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  border-color: #9ca3af;
}

/* Panel Label */
.panel-label {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* Panel Header */
.panel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Amount input */
.from-panel .panel-header input {
  width: 100%;
  max-width: 240px;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: box-shadow var(--speed), border-color var(--speed);
}
.from-panel .panel-header input::placeholder { color: #9ca3af; }
.from-panel .panel-header input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Receive readonly-looking */
.to-panel .panel-header .receive-big {
  width: 100%;
  max-width: 240px;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}

/* Select */
.panel-select { flex: 1 1 auto; padding: 14px 16px; display: flex; align-items: center; }
.custom-select { position: relative; width: 100%; }
.select-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input);
  cursor: pointer;
  transition: box-shadow var(--speed), border-color var(--speed);
  color: var(--text);
}
.select-trigger:hover { border-color: #9ca3af; }
.select-trigger:focus-within { box-shadow: var(--ring); }
.select-logo { width: 24px; height: 24px; }
.arrow { margin-left: auto; opacity: .8; }

/* Dropdown */
.options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 280px;
  overflow-y: auto;
  display: none;
  z-index: 50;
  box-shadow: var(--shadow);
}
.search-input {
  width: 100%;
  padding: 10px 12px;
  background: #f9fafb;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
}
.opt-group {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  background: #f9fafb;
  position: sticky;
  top: 0;
  z-index: 1;
}
.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--speed);
}
.option img { width: 20px; height: 20px; }
.option span { white-space: nowrap; flex: 1; }
.option:hover { background: #f3f4f6; }

/* Swap button */
.mix-swap {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  border: none;
  padding: 0 20px;
  font-size: 18px;
  line-height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-self: center;
  margin-top: 6px;
  transition: background var(--speed);
}
.mix-swap:hover { background: #2563eb; }
.mix-swap:active { background: #1d4ed8; }

/* Form */
.mix-form label {
  display: block;
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: .02em;
}
.mix-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input);
  color: var(--text);
  outline: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.mix-form input[type="text"]::placeholder { color: #9ca3af; }
.mix-form input[type="text"]:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* Submit */
.mix-submit {
  display: block;
  width: 100%;
  background: var(--accent-3);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  margin-top: 24px;
  transition: background var(--speed);
}
.mix-submit:hover { background: #059669; }

/* SEO & Info blocks (light) */
.seo-section,
.info-block {
  max-width: 1000px;
  margin: 28px auto 0;
  padding: 20px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
}
.seo-section h2, .seo-section h3 { color: var(--text); }
.seo-section p { line-height: 1.7; }
.seo-section ul { margin: 1em 0; padding-left: 20px; }
.seo-section li { margin-bottom: 0.5em; }
.info-block .label { font-weight: 600; color: var(--text); margin-bottom: 8px; }
.info-block .value a { color: var(--accent); }
.info-block .value a:hover { text-decoration: underline; }

/* Loader */
.loader {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  visibility: hidden;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 720px) {
  .exchange-panel { flex-direction: column; gap: 16px; }
  .mix-container { padding: 18px; }
  .mix-logo { width: 190px; }
  .mix-title { font-size: clamp(20px, 7vw, 26px); }
}