/* ── 리셋 & 변수 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #F7F8FA;
  --white:     #FFFFFF;
  --text:      #191919;
  --text-sub:  #5B6169;
  --text-muted:#9CA3AC;
  --accent:    #E63946;
  --accent2:   #E63946;
  --gold:      #F59E0B;
  --border:    #E7E9EC;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgba(20,20,20,0.04), 0 1px 8px rgba(20,20,20,0.05);
  --shadow-lg: 0 4px 20px rgba(20,20,20,0.10);
  --klook:     #FF6B00;
  --mrt:       #4f8ef7;
  --agoda:     #FF9500;
}

body {
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── 최상단 검색바 (로고 + 검색창) ── */
.search-top {
  background: var(--text);
  padding: 12px 20px;
}

.search-top-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-top .logo-wrap { flex-shrink: 0; }
.search-top .search-box { flex: 1; margin-bottom: 0; max-width: 560px; }

.search-top #searchInput {
  background: var(--white);
}

.search-top .logo-kr { color: #fff; text-shadow: none; }
.search-top .logo-en { color: #fff; }
.search-top .logo-en .dot { color: var(--accent); }

.search-top .logo-badge {
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}

/* ── 헤더 ── */
.header {
  background: var(--white);
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* 배경 장식 원 제거 (플랫한 톤) */
.header::before,
.header::after { content: none; }

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── 유틸리티 바: 로고 + 태그라인 + 관리자 링크 ── */
.utility-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
}

.header-sub {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-sub);
  margin: 0;
  font-weight: 500;
}

.admin-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.admin-link:hover { color: var(--text-sub); }

/* ── 로고 ── */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-flame {
  font-size: 26px;
  display: inline-block;
  filter: none;
}

.logo-name {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.logo-kr {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.8px;
  line-height: 1.1;
  text-shadow: none;
}

/* 시안 B — amat.club 도메인형 워드마크 + 초소형 슬로건 */
.logo-en {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text);
  line-height: 1.02;
}
.logo-en .dot { color: var(--accent); }
.logo-slogan {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  line-height: 1.1;
  margin-top: 1px;
}

.logo-badge {
  background: rgba(230,57,70,0.08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.2px;
  box-shadow: none;
  white-space: nowrap;
  animation: none;
  border: 1px solid rgba(230,57,70,0.15);
}

/* ── 국가 탭 (카테고리 nav) ── */
.country-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.country-tab-more {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.country-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
}

.country-tab:hover {
  background: transparent;
  color: var(--text-sub);
  border-color: var(--border);
}

.country-tab.active {
  background: transparent;
  color: var(--text);
  border-color: var(--accent);
  box-shadow: none;
}

.soon-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-muted);
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.country-tab.active .soon-badge { display: none; }

/* 준비중 탭 — 흐리게 */
.country-tab.coming {
  opacity: 0.6;
  cursor: default;
}
.country-tab.coming:hover {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}

/* ── 검색 ── */
.search-box { position: relative; display: flex; align-items: center; }

.search-icon {
  position: absolute;
  left: 16px;
  font-size: 15px;
  pointer-events: none;
  opacity: 0.55;
}

#searchInput {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 46px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s;
}

#searchInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
}
#searchInput::placeholder { color: var(--text-muted); }

.search-clear {
  position: absolute; right: 14px;
  background: none; border: none;
  color: var(--text-muted); font-size: 14px;
  cursor: pointer; padding: 4px; display: none;
}
.search-clear.visible { display: block; }

/* ── 필터 바 ── */
.filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: none;
}

.filter-bar-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* 타입 탭 */
.type-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.type-tab {
  padding: 13px 20px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
  white-space: nowrap;
}

.type-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 0;
  transform: scaleX(0);
  transition: transform 0.15s;
}

.type-tab.active { color: var(--text); font-weight: 700; }
.type-tab.active::after { transform: scaleX(1); }

/* 필터 rows */
.filter-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 44px;
  letter-spacing: 0.3px;
}

.pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pills::-webkit-scrollbar { display: none; }

.pill {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-sub);
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.pill:hover { border-color: var(--text-muted); color: var(--text); }
.pill.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.klook-pill.active  { background: var(--klook); border-color: var(--klook); box-shadow: none; }
.klook-pill:hover   { border-color: var(--klook); color: var(--klook); }
.mrt-pill.active    { background: var(--mrt);   border-color: var(--mrt); box-shadow: none; }
.mrt-pill:hover     { border-color: var(--mrt); color: var(--mrt); }
.agoda-pill.active  { background: var(--agoda); border-color: var(--agoda); box-shadow: none; }
.agoda-pill:hover   { border-color: var(--agoda); color: var(--agoda); }

/* ── 결과 바 ── */
.result-bar {
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 20px;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
#resultCount { font-weight: 800; color: var(--text); }

.data-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-sub);
  font-weight: 600;
  border: 1px solid var(--border);
}

/* ── 그리드 ── */
.grid {
  max-width: 1100px;
  margin: 16px auto 48px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── 카드 ── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* 카드 이미지 */
.card-img {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #eee;
}

.card-img .real-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.card:hover .real-img { transform: scale(1.03); }

.card-emoji {
  font-size: 56px;
  filter: none;
}

.card-badges {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.badge-city {
  background: rgba(25,25,25,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px;
  border: none;
}

.badge-platform {
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 6px;
  letter-spacing: 0.2px;
}

.badge-platform.klook      { background: var(--klook); }
.badge-platform.myrealtrip { background: var(--mrt); }
.badge-platform.agoda      { background: var(--agoda); }

/* 카드 본문 */
.card-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-type {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--text-sub);
  letter-spacing: 0.2px;
}

.card-type.hotel {
  background: rgba(255,149,0,0.1);
  color: #a65f00;
}

.rating { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.review-count { color: var(--text-muted); font-size: 11px; font-weight: 400; }

.card-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 카드 이미지 배경 (그라디언트 폴백) ── */
.card-gradient-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* 도시 뱃지 (이미지 왼쪽 하단) */
.card-img .badge-city {
  position: absolute;
  bottom: 10px; left: 12px;
  background: rgba(25,25,25,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px;
  border: none;
}

/* ── 가격 비교 섹션 ── */
.price-compare {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  padding: 2px 0;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  padding: 5px 6px;
  margin: 0 -6px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.price-row:last-child { border-bottom: none; }

.price-row.clickable { cursor: pointer; }
.price-row.clickable:hover { background: var(--bg); }

.price-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.price-pname {
  flex: 1;
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 500;
}

.price-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

.price-row.is-lowest .price-pname { font-weight: 600; color: var(--text); }

.fire-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  background: rgba(230,57,70,0.08);
  color: var(--accent);
  border-radius: 5px;
  white-space: nowrap;
  border: none;
}

.price-diff {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.row-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s;
}
.price-row.clickable:hover .row-arrow { opacity: 1; }

/* ── 예약 버튼 ── */
.book-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  transition: filter 0.15s;
  color: #fff;
  box-shadow: none;
  margin-top: auto;
}

.book-btn:hover { filter: brightness(0.93); }
.book-btn.book-klook      { background: var(--klook); }
.book-btn.book-myrealtrip { background: var(--mrt); }
.book-btn.book-agoda      { background: var(--agoda); }

/* ── 준비중 화면 ── */
.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 340px;
}
.coming-soon[hidden] { display: none; }

.cs-inner {
  text-align: center;
  max-width: 360px;
}

.cs-flag {
  font-size: 64px;
  margin-bottom: 18px;
  animation: none;
}

.cs-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.cs-sub {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.7;
  margin-bottom: 22px;
}

.cs-btn {
  display: inline-block;
  padding: 12px 22px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: none;
  transition: filter 0.15s;
}
.cs-btn:hover { filter: brightness(0.94); }

/* ── 로딩 & 빈 상태 ── */
.loading {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 70px 20px;
  color: var(--text-sub); font-size: 14px; font-weight: 600;
}
.loading[hidden] { display: none; }

.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; padding: 80px 20px; }
.empty[hidden] { display: none; }
.empty-emoji { font-size: 52px; margin-bottom: 16px; }
.empty-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.empty-sub   { font-size: 14px; color: var(--text-sub); }

/* ── 반응형 ── */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 580px) {
  .search-top { padding: 10px 16px; }
  .search-top-inner { gap: 10px; }
  .search-top .logo-en { font-size: 19px; }
  .logo-slogan { font-size: 9px; }
  .header { padding: 14px 16px 0; }
  .header-sub { display: none; }
  .logo-kr { font-size: 19px; }
  .logo-flame { font-size: 22px; }
  .logo-badge { display: none; }
  .filter-bar { padding: 0 16px; }
  .type-tab { padding: 12px 14px; font-size: 13px; }
  .grid { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; }
  .result-bar { padding: 0 16px; margin-top: 16px; }
  .card-img { height: 180px; }
  .card-emoji { font-size: 46px; }
  .card-title { font-size: 14px; }
  .book-btn { font-size: 12px; padding: 10px 12px; }
}

@media (max-width: 360px) {
  .logo-kr { font-size: 17px; }
  .card-img { height: 160px; }
}

/* ── 클릭 유도 + 텍스트 커서(캐럿) 제거 ──
   카드 글자를 클릭했을 때 텍스트 선택 모드로 들어가 깜빡이는 커서가 생기던 문제 해결.
   카드 전체를 '탭하면 이동'하는 앱 느낌으로. (검색창 input 은 영향 없음) */
.card,
.filter-bar,
.country-tabs,
.coupon-bar,
.search-top .logo-wrap {
  -webkit-user-select: none;
  user-select: none;
}
/* 이미지도 클릭되면 예약 링크로 → 클릭 접점 2배 */
a.card-img {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

/* 상품명 뒤 '최저가' — 상품명과 완전히 동일한 글씨(크기·굵기·색) */
.title-lowest {
  font: inherit;
  color: inherit;
  white-space: nowrap;
}

/* ── 플랫폼 할인코드 허브 (마이리얼트립/클룩 할인코드 페이지) ── */
.coupon-intro { font-size: 15px; line-height: 1.7; color: var(--text-sub); margin: 8px 0 4px; }
.coupon-steps-list { margin: 0; padding-left: 20px; line-height: 1.8; color: var(--text-sub); font-size: 14.5px; }
.coupon-steps-list li { margin-bottom: 4px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--white); }
.faq-q { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--text); }
.faq-q::before { content: "Q. "; color: var(--accent); }
.faq-a { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-sub); }

/* ── 할인코드 자동복사 바 (필터 아래) ── */
.coupon-bar{
  max-width:1200px;margin:18px auto 0;padding:0 20px;
}
.coupon-slider-wrap{position:relative;z-index:1;padding:0 0 8px;}
.coupon-slider-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;
}
.coupon-slider-title{
  font-size:12.5px;font-weight:800;color:#334155;letter-spacing:-.2px;
  display:flex;align-items:center;gap:6px;
}
.coupon-slider-title::before{content:"🎟️";font-size:14px;}
.coupon-slider-hint{font-size:11.5px;color:#94a3b8;margin-top:4px;letter-spacing:-.2px;}
.coupon-slider-hint b{color:#475569;font-weight:700;}
.coupon-slider-arrows{display:flex;align-items:center;gap:6px;align-self:flex-start;}
.coupon-arrow{
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid #e5e8ee;
  color:#334155;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;user-select:none;flex-shrink:0;
  box-shadow:0 1px 2px rgba(17,24,39,.05);
}
.coupon-arrow:hover{background:#0f172a;border-color:#0f172a;color:#fff;}
.coupon-track-outer{overflow:hidden;padding:10px 3px;margin:-10px -3px;}
.coupon-track{display:flex;gap:12px;transition:transform .4s cubic-bezier(.4,0,.2,1);cursor:grab;}
.coupon-track:active{cursor:grabbing;}
.coupon-card{
  flex-shrink:0;width:212px;background:#fff;border:1px solid #edeff3;
  border-radius:16px;padding:16px 15px 15px;position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(17,24,39,.04),0 6px 16px rgba(17,24,39,.05);
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s,border-color .22s;
}
.coupon-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#1B6DF2;}
.coupon-card[data-plat="klook"]::before{background:#FF6B00;}
.coupon-card[data-plat="agoda"]::before{background:#FF9500;}
.coupon-card[data-plat="myrealtrip"]::before{background:#4f8ef7;}
.coupon-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(17,24,39,.13);border-color:#dfe3ea;}
.coupon-card-label{
  font-size:10px;font-weight:800;letter-spacing:.2px;
  background:#eef2ff;color:#1B6DF2;padding:3px 9px;border-radius:20px;
  display:inline-block;margin-bottom:11px;
}
.coupon-card[data-plat="klook"] .coupon-card-label{background:#fff2e8;color:#e05a00;}
.coupon-card[data-plat="agoda"] .coupon-card-label{background:#fff4e0;color:#c67600;}
.coupon-card[data-plat="myrealtrip"] .coupon-card-label{background:#eef3fe;color:#2d6be4;}
.coupon-card-amount{font-size:21px;font-weight:800;color:#0f172a;margin-bottom:5px;line-height:1.05;letter-spacing:-.4px;}
.coupon-card-desc{
  font-size:11px;color:#94a3b8;line-height:1.45;margin-bottom:13px;min-height:32px;
  padding-bottom:13px;border-bottom:1px dashed #e5e8ee;
}
.coupon-card-copy-btn{
  width:100%;padding:10px 0;background:#0f172a;color:#fff;border-radius:10px;border:none;
  font-size:12px;font-weight:700;letter-spacing:-.2px;cursor:pointer;
  transition:background .15s,transform .1s;
}
.coupon-card-copy-btn:hover{background:#1e293b;}
.coupon-card-copy-btn:active{transform:scale(.98);}
.coupon-card-copy-btn.copied{background:#16a34a;}
@media(max-width:600px){
  .coupon-bar{padding:0 14px;margin-top:14px;}
  .coupon-card{width:176px;}
  .coupon-card-amount{font-size:18px;}
}
/* 할인코드 상세/목록 페이지 */
.coupon-page{max-width:760px;margin:20px auto 60px;padding:0 20px;}
.coupon-hero{background:#fff;border:1px solid #edeff3;border-radius:22px;padding:34px 24px 30px;text-align:center;box-shadow:0 2px 6px rgba(17,24,39,.04),0 12px 30px rgba(17,24,39,.06);}
.coupon-hero .amount{font-size:36px;font-weight:800;color:#0f172a;margin:10px 0 4px;letter-spacing:-.8px;}
.coupon-hero .label{display:inline-block;font-size:12px;font-weight:800;background:#eef2ff;color:#1B6DF2;padding:5px 14px;border-radius:20px;letter-spacing:.2px;}
.coupon-code-box{display:flex;gap:10px;justify-content:center;align-items:center;margin:22px 0 8px;flex-wrap:wrap;}
.coupon-code-val{font-size:22px;font-weight:800;letter-spacing:2px;background:#f8fafc;border:2px dashed #cbd5e1;border-radius:12px;padding:11px 22px;color:#0f172a;}
.coupon-big-copy{background:#0f172a;color:#fff;border:none;border-radius:12px;padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;}
.coupon-big-copy:hover{background:#1e293b;}
.coupon-big-copy:active{transform:scale(.98);}
.coupon-steps{margin-top:22px;background:#f8fafc;border:1px solid #edeff3;border-radius:16px;padding:20px 22px;}
.coupon-steps-title{font-size:15px;font-weight:800;color:#0f172a;margin-bottom:12px;letter-spacing:-.3px;}
.coupon-steps ol{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:11px;}
.coupon-steps li{position:relative;padding-left:34px;font-size:13.5px;line-height:1.55;color:#475569;counter-increment:step;}
.coupon-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#0f172a;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.coupon-steps li b{color:#0f172a;font-weight:700;}
.coupon-big-copy.copied{background:#16a34a;}
.coupon-terms{color:#6b7280;font-size:13px;margin-top:14px;line-height:1.6;}
.coupon-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px;}
.coupon-list a{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:14px;text-decoration:none;color:#1e3a8a;font-weight:700;}
.coupon-list a:hover{background:#dbeafe;}