/*
Theme Name: Flatter - New Hostingreview.vn (Modern Redesign Styles)
Description: Holds all redesigned styles for cleaner modern cards, layouts, and responsive elements.
*/

/* --- THE REDESIGNED COUPON CARD FOR TAXONOMY PAGES (TAG, CATEGORY) WITH LOGO INTEGRATION --- */

/* Parent item container modern reset */
.hr-global-typography .box-holder .item {
	background: #ffffff !important;
	border: 1px solid var(--hr-line, #f1f5f9) !important;
	border-radius: 16px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	overflow: hidden !important;
}

.hr-global-typography .box-holder .item:hover {
	border-color: rgba(var(--hr-blue-rgb), 0.2) !important;
	box-shadow: 0 10px 25px rgba(var(--hr-blue-rgb), 0.08) !important;
	transform: translateY(-2px) !important;
}

/* Base structural flexbox for item holder */
.hr-global-typography .box-holder .item-holder {
	display: flex !important;
	align-items: stretch !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* LEFT SIDE: Brand Logo Block (Designed exactly like the offer/value block in store pages) */
.hr-global-typography .box-holder .store-holder {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 160px !important;
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px 16px !important;
	border-right: 2px dashed var(--hr-line, #f1f5f9) !important;
	background: linear-gradient(180deg, var(--hr-offer-grad-from) 0%, var(--hr-offer-grad-to) 100%) !important; /* token-hoá: offer gradient (palette-overridable) */
	text-align: center !important;
	margin: 0 !important;
	float: none !important;
}

/* Store logo style */
.hr-global-typography .box-holder .store-image {
	width: 92px !important;
	height: auto !important;
	margin-bottom: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.hr-global-typography .box-holder .store-image img {
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	background: #ffffff !important;
	padding: 4px !important;
}

/* Brand/Store label style underneath the logo */
.hr-global-typography .box-holder .store-name {
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hr-global-typography .box-holder .store-name a {
	color: var(--hr-offer-value, #ff4500) !important; /* token-hoá: đồng bộ tông live coupon (palette-overridable) */
	text-decoration: none !important;
}

.hr-global-typography .box-holder .store-name a:hover {
	text-decoration: underline !important;
}

/* RIGHT SIDE: Content Area */
.hr-global-typography .box-holder .item-frame {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 24px !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
}

.hr-global-typography .box-holder .item-panel {
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
}

/* Top inline space inside item-panel for metadata & votes */
.hr-global-typography .box-holder .item-panel-meta-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 16px !important;
}

/* Coupon Title on Taxonomy pages */
.hr-global-typography .box-holder .entry-title {
	margin: 0 0 8px 0 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--hr-ink, #1e293b) !important;
	line-height: 1.3 !important;
}

/* Coupon Description */
.hr-global-typography .box-holder .content-holder {
	margin: 0 0 12px 0 !important;
	font-size: 15px !important; /* Cỡ chữ 15px chuẩn tỷ lệ vàng */
	color: var(--hr-muted, #64748b) !important;
	line-height: 1.5 !important;
	padding: 0 !important;
}

/* Taxonomy Footer (📂 Danh mục & Điều kiện nút bấm) */
.hr-global-typography .box-holder .coupon-card-taxonomy {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;
	font-size: 13px !important;
	color: var(--hr-muted, #64748b) !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--hr-soft, #f1f5f9) !important;
	margin-top: auto !important;
	width: 100% !important;
	float: none !important;
}

.hr-global-typography .box-holder .coupon-card-taxonomy-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 !important;
}

/* ACTIONS SIDE (VOTE & BUTTON) */
.hr-global-typography .box-holder .item-actions {
	width: 150px !important; /* Khớp hoàn hảo 150px với vote box và nút Xem mã của store */
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important; /* Phân bố đều vote ở trên và nút ở dưới */
	align-items: center !important;
	padding: 24px 16px !important;
	align-self: stretch !important;
	border-left: none !important;
	margin: 0 !important;
	float: none !important;
}

/* Khối coupon code link mặc định */
.hr-global-typography .box-holder .item-actions .couponAndTip {
	width: 100% !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Reset vote inline in actions block */
.hr-global-typography .box-holder .item-actions .hr-cc-vote-inline {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 0 16px 0 !important; /* Khoảng cách dưới vote box */
}

/* Expired coupon wrapper style for taxonomy pages */
.hr-global-typography .box-holder .item.expired,
.hr-global-typography .box-holder .item.unreliable {
	opacity: 0.85 !important;
}

.hr-global-typography .box-holder .item.expired .store-holder,
.hr-global-typography .box-holder .item.unreliable .store-holder {
	background: #f1f5f9 !important; /* Xám hết hạn */
	border-right-color: #cbd5e1 !important;
}

.hr-global-typography .box-holder .item.expired .store-name a,
.hr-global-typography .box-holder .item.unreliable .store-name a {
	color: #64748b !important;
}

.hr-global-typography .box-holder .item.expired .entry-title,
.hr-global-typography .box-holder .item.unreliable .entry-title {
	color: #64748b !important;
}

/* Pagination modern standard redesign matching design tokens */
.paging {
	margin: 32px 0 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: center !important;
}
.paging .pages {
	display: inline-flex !important;
	gap: 6px !important;
	align-items: center !important;
	background: transparent !important;
	padding: 0 !important;
}
.paging .pages span.total {
	display: none !important;
}
.paging .pages span.prevPage a,
.paging .pages span.nextPage a,
.paging .pages a.page-numbers {
	padding: 0 !important;
	margin: 0 !important;
	background-color: #ffffff !important;
	border: 1px solid var(--hr-border, #e2e8f0) !important;
	border-radius: var(--hr-radius, 8px) !important;
	color: var(--hr-text, #334155) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: var(--hr-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)) !important;
	transition: var(--hr-transition, all 0.25s ease) !important;
	text-decoration: none !important;
}
.paging .pages span.prevPage a:hover,
.paging .pages span.nextPage a:hover,
.paging .pages a.page-numbers:hover {
	background-color: var(--hr-brand-light, var(--hr-blue-light)) !important; /* token-hoá: pagination hover (palette-overridable) */
	border-color: var(--hr-brand, var(--hr-blue)) !important;
	color: var(--hr-brand, var(--hr-blue)) !important;
	transform: translateY(-1px) !important;
}
.paging .pages span.current {
	padding: 0 !important;
	margin: 0 !important;
	background: var(--hr-brand, var(--hr-blue)) !important; /* token-hoá: trang hiện tại (palette-overridable) */
	border: 1px solid var(--hr-brand, var(--hr-blue)) !important;
	border-radius: var(--hr-radius, 8px) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 6px -1px rgba(var(--hr-blue-rgb), 0.2), 0 2px 4px -1px rgba(var(--hr-blue-rgb), 0.1) !important;
}
/* Let's clean the border and default shadow overrides */
.content-box .paging .pages span.prevPage a,
.content-box .paging .pages span.nextPage a,
.content-box .paging .pages a.page-numbers,
.content-box .paging .pages span.current {
	box-shadow: var(--hr-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)) !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
}

/* Responsive styles for tag/category pages */
@media (max-width: 768px) {
	.hr-global-typography .box-holder .item-holder {
		flex-direction: column !important;
	}
	.hr-global-typography .box-holder .store-holder {
		width: 100% !important;
		border-right: none !important;
		border-bottom: 2px dashed var(--hr-line, #f1f5f9) !important;
		padding: 20px !important;
	}
	.hr-global-typography .box-holder .item-actions {
		width: 100% !important;
		border-top: 1px solid var(--hr-soft, #f1f5f9) !important;
		padding: 20px !important;
		align-items: center !important;
	}
	.hr-global-typography .box-holder .coupon-card-taxonomy {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}
}