/* Base */
body{font-family:'Segoe UI',Tahoma,sans-serif;margin:0;background:#f9fafb;color:#111827}

/* Header */
header{position:fixed;top:0;left:0;width:98%;background:linear-gradient(90deg,#2563eb,#7c3aed);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:1000}
.logo{height:45px}

/* Live date */
.live-date-box{display:flex;flex-direction:column;align-items:flex-end;background:linear-gradient(135deg,#0ea5e9,#6366f1);padding:8px 12px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.live-day{font-size:13px;opacity:.9}
.live-date{font-size:15px;font-weight:600}
.live-time{font-size:17px;font-weight:700;color:#fcd34d}

/* Card */
.container{max-width:650px;margin:100px auto 40px;background:#fff;padding:25px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.1)}
h1{text-align:center;font-size:26px;color:#1d4ed8;margin-bottom:20px}

/* Logos (ចាស់) */
.token-logos {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.token-logos img {
  height: 50px;
  transition: transform .3s;
}

/* Hover effect (ទុកដដែល) */
.token-logos img:hover {
  transform: scale(1.08);
}

/* ====== PROTECT EXTRA ====== */
.protected {
  -webkit-user-drag: none; 
  user-drag: none;
  -webkit-user-select: none; 
  -moz-user-select: none; 
  user-select: none;
  -webkit-touch-callout: none; /* បិទ iOS long-press */
  pointer-events: auto;
}

.protected-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* Overlay ទប់ការទាញយក */
.protected-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.001); /* ថ្លាច្រើន, មិនប៉ះពាល់ UI */
}
/* Eligibility label */
.deal-eligibility{padding:12px;margin-bottom:15px;border-radius:8px;font-weight:bold;text-align:center;color:#fff}
.deal-eligibility.eligible{background:#10b981}
.deal-eligibility.not-eligible{background:#ef4444}
.deal-eligibility .status-text{font-size:18px}
.deal-eligibility .requirement-text{font-size:14px;font-weight:normal;margin-top:5px}

/* Inputs */
.input-row{display:flex;gap:10px;margin-bottom:16px}
.input-row input[type=number],.input-row select{padding:10px;font-size:16px;border-radius:6px;border:2px solid #60a5fa}
.input-row input[type=number]{flex:2}
.input-row select{flex:1}
.slider-row{display:flex;align-items:center;gap:10px}
input[type=range]{flex:1;appearance:none;height:8px;background:linear-gradient(90deg,#ec4899,#8b5cf6);border-radius:6px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#fcd34d;border:2px solid #1f2937;border-radius:50%;cursor:pointer}
.percent-bubble{margin:8px auto 0;text-align:center;background:#fcd34d;padding:6px 12px;border-radius:8px;font-weight:700;font-size:16px;width:fit-content}

/* Buttons */
.primary-btn{display:block;margin-top:20px;text-align:center;padding:12px;font-size:18px;background:#059669;color:#fff;font-weight:700;border:none;border-radius:6px;cursor:pointer;text-decoration:none}
.primary-btn:hover{background:#047857}
.gas-price-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:15px;padding:12px;font-size:16px;background:#fcd34d;color:#1f2937;font-weight:700;border:none;border-radius:6px;cursor:pointer;text-decoration:none;transition:background-color .3s}
.gas-price-btn:hover{background:#f59e0b}
.gas-price-btn img{height:30px}
.currency-buttons{display:flex;justify-content:space-between;gap:8px;margin:18px 0}
.currency-buttons button{flex:1;padding:10px;background:#7c3aed;color:#fff;border:none;font-weight:700;border-radius:6px;cursor:pointer}
.currency-buttons button.active{background:#f59e0b}
.secondary-btn{width:100%;background:#f59e0b;color:#fff;padding:10px;border:none;border-radius:6px;font-weight:700;margin-top:10px;cursor:pointer}
.secondary-btn:hover{background:#d97706}

/* Result + fees */
.result-highlight{background:#e0f2fe;border-left:4px solid #2563eb;padding:12px;border-radius:8px;font-size:16px;font-weight:600;white-space:pre-line}
.fee-details{background:#fef3c7;padding:15px;margin-top:10px;border-radius:8px}
.fee-details[hidden]{display:none}
.stakeholder{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #fde68a}

/* FAQ */
.faq{margin-top:30px}
.faq h2{font-size:22px;color:#1d4ed8;margin-bottom:10px}
.faq h3{margin-top:15px;color:#374151}
.faq p,.faq li{font-size:15px;line-height:1.6}

/* Footer */
footer{text-align:center;font-size:13px;padding:12px;background:#f3f4f6;margin-top:20px}

/* ==== DSP INFO (Balanced Look) ==== */
.dsp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px auto;
  padding: 10px 18px;
  background: #0F6EDE; /* DealShaker Blue */
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 110, 222, 0.3);
  transition: all 0.25s ease;
}
.dsp-btn:hover {
  background: #0c5ab8;
  box-shadow: 0 6px 16px rgba(15, 110, 222, 0.35);
}

.dsp-info-box {
  background: #f4f9ff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 6px 18px rgba(15, 110, 222, 0.08);
  border: 1px solid rgba(15, 110, 222, 0.15);
  max-width: 720px;
}
.dsp-info-box[hidden] {
  display: none;
}
.dsp-info-box h4 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.4;
  color: #0F6EDE;
  font-weight: 800;
}
.dsp-info-box p {
  font-size: 14px;
  color: #19285D;
  line-height: 1.6;
  margin: 8px 0;
}
.dsp-info-box .dsp-check {
  font-size: 15px;
  color: #00B256; /* DS Green */
  font-weight: 700;
}

@media (max-width: 600px) {
  .dsp-btn {
    font-size: 14px;
    padding: 8px 14px;
  }
  .dsp-info-box {
    padding: 14px;
  }
  .dsp-info-box h4 {
    font-size: 18px;
  }
}