/* Coupon store page redesign — theme blue #1677ff, forest OTU band. Scoped under .cs-cpn-page */
.cs-cpn-page {
  --cs-blue: #1677ff;
  --cs-blue-hover: #0d5ad6;
  --cs-navy: #0f1a28;
  --cs-ink: #1a2330;
  --cs-muted: #5a6b75;
  --cs-line: #e4eaf0;
  --cs-card: #fff;
  --cs-soft: #f4f7fb;
  --cs-forest: #16382a;
  --cs-forest-2: #1c4a36;
  --cs-orange: #fb9036;
  --cs-green: #1f9a55;
  background: var(--cs-soft);
  padding-top: 24px;
  padding-bottom: 40px;
}
.cs-cpn-page .container { max-width: 1180px; }
.cs-cpn-card {
  background: var(--cs-card);
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16, 32, 48, .06);
  padding: 18px 16px;
  margin-bottom: 14px;
}
.cs-cpn-page .cs-cpn-sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.cs-cpn-page .cs-cpn-sidebar .cs-cpn-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}
.cs-cpn-merchant { text-align: center; }
.cs-cpn-page .cs-cpn-merchant .cashback_btn { width: 100%; }
.cs-cpn-merchant .p_logo,
.cs-cpn-merchant .cs-cpn-logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-cpn-merchant .p_logo img,
.cs-cpn-merchant .cs-cpn-logo img {
  max-width: 88px;
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cs-cpn-merchant h2,
.cs-cpn-merchant h5 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--cs-ink);
}
.cs-cpn-merchant .cs-cpn-url {
  display: inline-block;
  color: var(--cs-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 10px;
  word-break: break-all;
}
.cs-cpn-merchant .cs-cpn-url:hover { color: var(--cs-blue-hover); text-decoration: none; }
.cs-cpn-cb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e8f8ef;
  color: var(--cs-green);
  font-size: 13px;
  font-weight: 800;
  margin: 6px 0 12px;
}
.cs-cpn-page .cs-cpn-activate,
.cs-cpn-page .cashback_btn .btn.btn-solid-blue,
.cs-cpn-page a.cs-cpn-activate {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: var(--cs-blue) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.cs-cpn-page .cs-cpn-activate:hover,
.cs-cpn-page .cashback_btn .btn.btn-solid-blue:hover {
  background: var(--cs-blue-hover) !important;
  color: #fff !important;
}
.cs-cpn-how {
  display: inline-block;
  margin-top: 10px;
  color: var(--cs-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 119, 255, .35);
}
.cs-cpn-how:hover { color: var(--cs-blue-hover); border-bottom-color: var(--cs-blue-hover); text-decoration: none; }
.cs-cpn-about h3,
.cs-cpn-help h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--cs-ink);
}
.cs-cpn-about p,
.cs-cpn-help p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cs-muted);
}
.cs-cpn-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs-cpn-facts li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cs-ink);
}
.cs-cpn-facts i {
  color: var(--cs-blue);
  width: 16px;
  margin-top: 2px;
  flex: 0 0 16px;
}
.cs-cpn-help a {
  color: var(--cs-blue);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 119, 255, .35);
}
.cs-cpn-help a:hover { color: var(--cs-blue-hover); text-decoration: none; }

.cs-cpn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8b97a3;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}
.cs-cpn-back:hover { color: var(--cs-blue); text-decoration: none; }
.cs-cpn-page h1.section_tile,
.cs-cpn-page h1.cs-cpn-h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--cs-ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.cs-cpn-intro {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cs-muted);
  max-width: 820px;
}
.cs-cpn-utils {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 0 0 18px;
}
.cs-cpn-utils a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cs-blue);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 119, 255, .3);
  padding-bottom: 1px;
}
.cs-cpn-utils a:hover { color: var(--cs-blue-hover); border-bottom-color: var(--cs-blue-hover); text-decoration: none; }

.cs-cpn-cb-promo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid #c9dcff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 32, 48, .06);
  margin-bottom: 16px;
}
.cs-cpn-cb-promo .cs-cpn-rate {
  flex: 0 0 auto;
  text-align: center;
  min-width: 88px;
}
.cs-cpn-cb-promo .cs-cpn-rate strong {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--cs-blue);
  line-height: 1;
}
.cs-cpn-cb-promo .cs-cpn-rate span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cs-muted);
}
.cs-cpn-cb-promo .cs-cpn-cb-copy { flex: 1 1 auto; min-width: 0; }
.cs-cpn-cb-promo .cs-cpn-cb-copy p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cs-ink); font-weight: 600; }
.cs-cpn-cb-promo .cs-cpn-cb-cta { flex: 0 0 auto; text-align: right; }
.cs-cpn-cb-promo .cs-cpn-activate { width: auto; min-width: 180px; }
.cs-cpn-page .cs-cpn-cb-promo .btn-ylw,
.cs-cpn-page .cs-cpn-cb-promo a.btn-ylw {
  background: var(--cs-blue) !important;
  color: #fff !important;
  border-radius: 10px !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  border: 0 !important;
}

.cs-cpn-otu {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cs-forest) 0%, var(--cs-forest-2) 100%);
  color: #fff;
  margin-bottom: 16px;
}
.cs-cpn-otu-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}
.cs-cpn-otu-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}
.cs-cpn-otu-copy { flex: 1 1 220px; min-width: 0; }
.cs-cpn-otu-copy h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: #fff; }
.cs-cpn-otu-copy p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.82); }
.cs-cpn-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #d8f3e3;
  color: #146b3a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}
.cs-cpn-otu-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cs-cpn-otu-browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--cs-orange);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
}
.cs-cpn-otu-browse:hover { background: #e07e28; color: #fff !important; text-decoration: none !important; }
.cs-cpn-otu-sell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  background: transparent;
  color: #fff !important;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.45);
  text-decoration: none !important;
}
.cs-cpn-otu-sell:hover { background: rgba(255,255,255,.1); color: #fff !important; text-decoration: none !important; }

.cs-cpn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  align-items: center;
  padding: 12px 8px;
  margin: 0 0 16px;
  background: #eef2f6;
  border-radius: 10px;
  list-style: none;
}
.cs-cpn-stats li {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cs-ink);
  text-align: center;
  border-right: 1px solid #d5dde6;
}
.cs-cpn-stats li:last-child { border-right: 0; }
.cs-cpn-stats i { color: var(--cs-blue); }

.cs-cpn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--cs-line);
}
.cs-cpn-tabs button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cs-muted);
  cursor: pointer;
}
.cs-cpn-tabs button.is-active {
  color: var(--cs-blue);
  border-bottom-color: var(--cs-blue);
}

/* Coupon cards inside redesign */
.cs-cpn-page .coupon_code_box {
  align-items: stretch;
  border-radius: 14px;
  border: 1px solid var(--cs-line);
  box-shadow: 0 8px 22px rgba(16, 32, 48, .05);
  overflow: hidden;
  margin-bottom: 14px;
  background: #fff;
}
.cs-cpn-page .per_off {
  color: var(--cs-green);
  font-size: 28px;
  line-height: 1.15;
  min-width: 120px;
  background: #f3faf6;
}
.cs-cpn-page .cs-cpn-offer .btn.btn-solid-blue {
  background: #fff !important;
  color: var(--cs-blue) !important;
  border: 2px dashed var(--cs-blue) !important;
  border-radius: 10px !important;
  min-height: 44px;
  min-width: 140px;
  box-shadow: none !important;
  font-weight: 800;
  position: relative;
}
.cs-cpn-page .cs-cpn-offer .btn.btn-solid-blue:hover {
  background: #eef4ff !important;
  color: var(--cs-blue-hover) !important;
}
.cs-cpn-page .cs-cpn-offer .btn.btn-solid-blue img { display: none; }
.cs-cpn-page .cs-store-share-links { display: none; }

@media (max-width: 991px) {
  .cs-cpn-cb-promo { flex-wrap: wrap; }
  .cs-cpn-cb-promo .cs-cpn-cb-cta { width: 100%; text-align: left; }
  .cs-cpn-cb-promo .cs-cpn-activate { width: 100%; }
  .cs-cpn-page h1.section_tile,
  .cs-cpn-page h1.cs-cpn-h1 { font-size: 24px; }
  .cs-cpn-stats li { border-right: 0; flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 767px) {
  .cs-cpn-page .coupon_code_box { flex-direction: column; }
  .cs-cpn-page .per_off { width: 100%; min-width: 0; font-size: 22px; }
  .cs-cpn-page .cs-cpn-offer .btn.btn-solid-blue { width: 100%; }
  .cs-cpn-otu-actions { width: 100%; }
  .cs-cpn-otu-browse,
  .cs-cpn-otu-sell { width: 100%; }
}

.cs-cpn-page .cs-cpn-cb-promo.coupon_code_box { background:#fff; border:1px solid #c9dcff; }
.cs-cpn-page .cs-cpn-cb-promo .per_off { color: var(--cs-blue); background:#f3f7ff; }
.cs-cpn-page .cs-otu-store-row .btn.btn-solid-blue { background: var(--cs-blue) !important; color:#fff !important; border:0 !important; }
.cs-cpn-page { overflow-x: hidden; }
@media (max-width: 767px) {
  .cs-cpn-page .cs-cpn-cb-cta, .cs-cpn-page .btn_right { position:static !important; transform:none !important; width:100%; }
  .cs-cpn-page .cs-cpn-cb-cta a, .cs-cpn-page .btn_right a.btn { width:100%; }
  .cs-cpn-tabs { width:100%; }
  .cs-cpn-tabs button { flex:1 1 auto; }
}