/* ════════════════════════════════
   COUPON CARD — UNIVERSAL FIX
   Works on all screen sizes
════════════════════════════════ */

/* Prevent ANY horizontal overflow */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }

/* ── Deal list container ── */
.deals-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ── Deal card ── */
.deal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  position: relative;
  width: 100%;
  min-height: 70px;          /* taller card */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: visible;         /* don't clip children */
}
.deal-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 12px 0 0 12px;
  opacity: 0;
  transition: opacity .2s;
}
.deal-card:hover::before,
.deal-card:active::before { opacity: 1; }
.deal-card:hover { border-color: #2a3d2a; transform: translateX(2px); }
.deal-card:active { transform: scale(.99); }
.deal-card.orange::before { background: var(--accent2); }
.deal-card.orange:hover   { border-color: #3d2a14; }

/* ── Icon ── */
.deal-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--subtle);
  flex-shrink: 0;
}

/* ── Info ── */
.deal-info {
  flex: 1;
  min-width: 0;      /* critical: allows text-overflow to work */
  overflow: hidden;
}
.deal-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.deal-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Badge ── */
.deal-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: .3px;
}
.deal-badge.code { background:#0D2A10; color:var(--accent); border:1px solid #1a4d1a; }
.deal-badge.deal { background:#1a1a0a; color:#FFD700;       border:1px solid #3a3000; }

/* ── Button ── */
.btn-get {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  touch-action: manipulation;
  min-width: 82px;       /* ensure button never disappears */
  text-align: center;
  transition: background .2s, transform .15s;
}
.btn-get.green  { background: var(--accent); color: #000; }
.btn-get.orange { background: var(--accent2); color: #fff; }
.btn-get.green:hover  { background: #50ff30; }
.btn-get.orange:hover { background: #ff8428; }
.btn-get.green:active  { transform: scale(.97); }
.btn-get.orange:active { transform: scale(.97); }

/* Pulse animation */
@keyframes pulse-green  { 0%,100%{box-shadow:0 0 0 0 rgba(57,255,20,.4)} 70%{box-shadow:0 0 0 8px rgba(57,255,20,0)} }
@keyframes pulse-orange { 0%,100%{box-shadow:0 0 0 0 rgba(255,107,0,.4)} 70%{box-shadow:0 0 0 8px rgba(255,107,0,0)} }
.btn-get.green  { animation: pulse-green  2.5s ease-in-out infinite; }
.btn-get.orange { animation: pulse-orange 2.5s ease-in-out infinite; }

/* ════ TABLET 768px ════ */
@media(max-width: 768px) {
  .deal-card  { padding: 13px 13px; gap: 10px; min-height: 66px; }
  .deal-icon  { width: 40px; min-width: 40px; height: 40px; font-size: 18px; }
  .deal-title { font-size: 13px; }
  .btn-get    { font-size: 11px; padding: 9px 13px; min-width: 76px; }
}

/* ════ MOBILE 480px ════ */
@media(max-width: 480px) {
  .deal-card  { padding: 12px 12px; gap: 9px; min-height: 64px; border-radius: 11px; }
  .deal-icon  { width: 38px; min-width: 38px; height: 38px; font-size: 17px; border-radius: 9px; }
  .deal-title { font-size: 12px; }
  .deal-meta  { font-size: 10px; }
  .deal-badge { font-size: 9px; padding: 2px 6px; }
  .btn-get    { font-size: 10px; padding: 8px 11px; min-width: 70px; border-radius: 8px; }
}

/* ════ SMALL 360px ════ */
@media(max-width: 360px) {
  .deal-card  { padding: 11px 10px; gap: 8px; }
  .deal-icon  { width: 34px; min-width: 34px; height: 34px; font-size: 15px; }
  .deal-title { font-size: 11px; }
  .deal-badge { display: none; }
  .btn-get    { font-size: 10px; padding: 8px 10px; min-width: 64px; }
}

/* ── Newsletter form fix ── */
.nl-wrap {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.nl-form-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.nl-form-row input[type=email] {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
}
.nl-form-row button {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-appearance: none;
  min-width: 90px;
}
@media(max-width:400px) {
  .nl-form-row { flex-direction: column; }
  .nl-form-row button { width: 100%; padding: 12px; }
}

/* ══ GLOBAL OVERFLOW GUARD ══
   Prevents horizontal scroll on ALL pages
*/
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: hidden; max-width: 100%; }

/* Sections with inline padding */
section { max-width: 100%; overflow-x: hidden; }

/* Any container that might overflow */
.sec { padding-left: 14px !important; padding-right: 14px !important; }
@media(min-width:600px){
  .sec { padding-left: 20px !important; padding-right: 20px !important; }
}
@media(min-width:900px){
  .sec { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Fix "How to Use" steps on any page */
.howto .steps, .sp-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}
@media(min-width:640px){
  .howto .steps, .sp-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Fix tables always scroll */
table { max-width: 100%; }
.tbl-overflow, .sp-table-scroll, .coupon-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

/* Fix filter-bar dropdowns */
.filter-bar select, .sp-sort-wrap select {
  max-width: 100%;
  width: auto;
}