/**
 * Vavoom Coupon v2.6.0 — 쿠폰 카드 공용 스타일 (상품 상세 모달 · 결제 쿠폰 선택 · 마이페이지 쿠폰목록).
 *
 * 카드 마크업의 단일 출처는 Vavoom_Coupon::render_card_html() 이고, 이 파일이 그 카드의 유일한 스타일이다.
 * 값은 vavoom-coupon.css 에 있던 모달 카드 규칙(v1.4.2 사용자 지정: 배지 10.5px/800, 금액 17px/600 center,
 * 칩 14px, 쿠폰명 14px/400/#000)을 그대로 옮겼다 — 상품 상세 모달 외형 무변경.
 *
 * 스코프 :is(.vpc-modal, .vpc-cards)
 * - .vpc-modal 을 남기는 이유: W3TC 에 캐시된 게스트 상품 페이지의 구 모달 HTML(.vpc-list 만 있고
 *   .vpc-cards 가 없는 마크업)도 purge 전까지 계속 스타일돼야 한다.
 * - 모달 밖(결제 팝업·마이페이지)은 목록 래퍼에 .vpc-cards 를 붙인다.
 * - 단일 클래스(0,1,0)는 테마의 '.클래스 span'(0,1,1)에 밀리므로 컨테이너 스코프(0,2,0)를 유지한다.
 *
 * 로드 경로
 * ① 상품 상세: vavoom-coupon.css 의 의존성(handle 'vavoom-coupon-card')으로 자동 로드
 * ② 결제(VCB): Vavoom_Coupon::enqueue_card_style() — 팝업 HTML 은 AJAX 로 나중에 들어오므로 페이지에 미리 싣는다
 * ③ 마이페이지(vavoom-mypage 탭): 탭 자체가 AJAX 조각이라 Vavoom_Coupon::print_card_css() 가 응답에 <style> 로 인라인
 *
 * 폰트 패밀리는 지정하지 않는다 — 사이트 테마 폰트를 상속한다.
 */

/* 모달 밖 목록 래퍼 — 모달 안에서는 .vpc-modal .vpc-list 가 같은 값을 준다. */
.vpc-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── 카드 ─────────────────────────────────────────────── */
:is(.vpc-modal, .vpc-cards) .vpc-c {
	position: relative;
	padding: 12px 13px;
	border: 1px solid #ebebeb;
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
	/* 모달 밖에서도 모달과 같은 기준 서체 크기·색 — 모달 안에서는 .vpc-modal 값과 동일해 무영향. */
	font-size: 14px;
	line-height: 1.5;
	color: #1a1a1a;
	text-align: left;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-no {
	border-color: #f0f0f0;
	background: #fafafa;
}

/* v2.6.0: 본문/액션 2단 — 결제 팝업은 오른쪽에 '적용하기' 버튼이 붙는다(has-action). */
:is(.vpc-modal, .vpc-cards) .vpc-c.has-action {
	display: flex;
	align-items: center;
	gap: 10px;
}
:is(.vpc-modal, .vpc-cards) .vpc-c-body {
	flex: 1 1 auto;
	min-width: 0;
}
:is(.vpc-modal, .vpc-cards) .vpc-c-act {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

:is(.vpc-modal, .vpc-cards) .vpc-badge {
	display: inline-block;
	margin-bottom: 7px;
	padding: 2px 6px;
	border-radius: 4px;
	background: #ffecea;
	color: #d8402f;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.01em;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-no .vpc-badge {
	background: #eee;
	color: #999;
}
/* v1.4.2: baseline → center, weight 800 → 600 (사용자 지정) */
:is(.vpc-modal, .vpc-cards) .vpc-amt {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #111;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-no .vpc-amt {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	color: #8d8d8d;
}
/* v1.4.2: 11px → 14px (사용자 지정) */
:is(.vpc-modal, .vpc-cards) .vpc-chip {
	padding: 2px 5px;
	border-radius: 4px;
	background: #fff2f0;
	color: #ed2e1b;
	font-size: 14px;
	font-weight: 700;
}
:is(.vpc-modal, .vpc-cards) .vpc-cap {
	color: #999;
	font-size: 11px;
	font-weight: 500;
}
/* v2.6.0: 할인 + 배송비 무료 쿠폰의 부가 표기 */
:is(.vpc-modal, .vpc-cards) .vpc-ship {
	color: #ed2e1b;
	font-size: 11.5px;
	font-weight: 600;
}
/* 쿠폰명 — v1.4.2: 15px/700/#222 → 14px/400/#000000 (사용자 지정, v1.2.0 확대분 되돌림) */
:is(.vpc-modal, .vpc-cards) .vpc-name {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	color: #000000;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-no .vpc-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #9a9a9a;
}
/* 조건부 카드 (v1.3.0) — 금액 조건만 미달: 장바구니를 더 담으면 쓸 수 있다.
   할인액은 사용가능 카드처럼 크게, 배지는 앰버 톤으로 구분한다. */
:is(.vpc-modal, .vpc-cards) .vpc-c.is-cond {
	border-color: #f3e3c8;
	background: #fffdf7;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-cond .vpc-badge {
	background: #fdf3e0;
	color: #b26a00;
}
:is(.vpc-modal, .vpc-cards) .vpc-cond {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: #b26a00;
}

/* ── v2.2.0 한도 표기 (1인 잔여 / 선착순 남은 장수) ── */
:is(.vpc-modal, .vpc-cards) .vpc-limits {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 0;
}
:is(.vpc-modal, .vpc-cards) .vpc-lim-user {
	font-size: 11.5px;
	color: #777;
	border: 1px solid #e2e2e2;
	border-radius: 999px;
	padding: 1px 8px;
	line-height: 1.6;
}
:is(.vpc-modal, .vpc-cards) .vpc-lim-fcfs {
	font-size: 11.5px;
	color: #fff;
	background: #e35b4f;
	border-radius: 999px;
	padding: 1px 9px;
	font-weight: 700;
	line-height: 1.6;
}

:is(.vpc-modal, .vpc-cards) .vpc-exp {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
	font-size: 11.5px;
	color: #999;
}
:is(.vpc-modal, .vpc-cards) .vpc-dday {
	font-weight: 700;
	color: #ed2e1b;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-no .vpc-dday {
	color: #bbb;
}
/* v2.6.0: 광고 세션 쿠폰의 남은 시간 카운트다운 (vavoom-coupon-session.js 가 초당 갱신, 만료 시 .vpc-ad-expire-hide 카드 숨김) */
:is(.vpc-modal, .vpc-cards) .vpc-exp .vpc-my-ad-exp {
	color: #b32d2e;
	font-weight: 700;
}
:is(.vpc-modal, .vpc-cards) .vpc-exp [data-vpc-ad-remain] {
	font-variant-numeric: tabular-nums;
}

/* ── v2.6.0 결제 팝업: 적용 버튼 · 적용중 상태 ── */
:is(.vpc-modal, .vpc-cards) .vpc-c-act .apply-coupon {
	display: inline-block;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: #ed2e1b;
	color: #fff;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
}
:is(.vpc-modal, .vpc-cards) .vpc-c-act .apply-coupon:hover,
:is(.vpc-modal, .vpc-cards) .vpc-c-act .apply-coupon:focus {
	background: #d8402f;
	color: #fff;
}
:is(.vpc-modal, .vpc-cards) .vpc-c-act .apply-coupon[disabled] {
	opacity: 0.55;
	cursor: default;
}
:is(.vpc-modal, .vpc-cards) .vpc-c-applied {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: #f2f2f2;
	color: #999;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-selected {
	border-color: #ed2e1b;
	background: #fff8f7;
}
:is(.vpc-modal, .vpc-cards) .vpc-c.is-selected .vpc-badge {
	background: #ed2e1b;
	color: #fff;
}

/* ── v2.6.0 마이페이지: 쿠폰 코드 · 코드복사 (카드 하단) ── */
:is(.vpc-modal, .vpc-cards) .vpc-c-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 9px;
	padding-top: 8px;
	border-top: 1px dashed #ececec;
}
:is(.vpc-modal, .vpc-cards) .vpc-code {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11.5px;
	color: #888;
	letter-spacing: 0.02em;
}
:is(.vpc-modal, .vpc-cards) .vpc-copy {
	flex: 0 0 auto;
	margin: 0;
	padding: 3px 9px;
	border: 1px solid #e2e2e2;
	border-radius: 999px;
	background: #fff;
	color: #666;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}
:is(.vpc-modal, .vpc-cards) .vpc-copy:hover,
:is(.vpc-modal, .vpc-cards) .vpc-copy:focus {
	border-color: #ed2e1b;
	color: #ed2e1b;
	background: #fff;
}