/**
 * Discounts Tab Styles
 *
 * Modern design for shop discount listings in the dashboard
 *
 * @package User_Account_Hub
 * @since 4.1.0
 */

/* ============================================
   Discounts List Container
   ============================================ */

.uah-discounts-list {
	display: flex;
	flex-direction: column;
	gap: var(--uah-spacing-l);
	margin-bottom: var(--uah-spacing-xl);
}

/* ============================================
   Discount Row - Main Container
   ============================================ */

.uah-discount-row {
	display: flex;
	align-items: center;
	gap: var(--uah-spacing-xl);
	padding: var(--uah-spacing-xl);
	background: var(--uah-color-white);
	border: 1px solid var(--uah-color-border);
	border-radius: var(--uah-radius-m);
	transition: all var(--uah-transition-normal);
	box-shadow: var(--uah-shadow-sm);
}

.uah-discount-row:hover {
	border-color: var(--uah-color-success);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
	transform: translateY(-2px);
}

/* ============================================
   Shop Info Section
   ============================================ */

.uah-discount-shop {
	display: flex;
	align-items: center;
	gap: var(--uah-spacing-m);
	flex: 0 0 200px;
	min-width: 0;
}

.uah-discount-shop-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: var(--uah-radius-s);
	border: 1px solid var(--uah-color-border);
	padding: var(--uah-spacing-xs);
	background: var(--uah-color-white);
}

.uah-discount-shop-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--uah-color-success) 0%, #059669 100%);
	border-radius: var(--uah-radius-s);
	color: var(--uah-color-white);
	font-size: 20px;
}

.uah-discount-shop-name {
	font-weight: var(--uah-font-weight-semibold);
	font-size: 15px;
	color: var(--uah-color-heading);
	line-height: 1.3;
	word-break: break-word;
}

/* ============================================
   Discount Amount
   ============================================ */

.uah-discount-amount {
	flex: 0 0 120px;
	text-align: center;
}

.uah-discount-value {
	display: inline-block;
	padding: var(--uah-spacing-s) var(--uah-spacing-l);
	background: linear-gradient(135deg, var(--uah-color-success) 0%, #059669 100%);
	color: var(--uah-color-white);
	font-weight: var(--uah-font-weight-bold);
	font-size: var(--uah-font-size-base);
	border-radius: var(--uah-radius-s);
	white-space: nowrap;
}

/* ============================================
   Discount Code Section
   ============================================ */

.uah-discount-code-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

.uah-discount-code {
	display: flex;
	align-items: center;
	gap: var(--uah-spacing-m);
	background: var(--uah-color-bg-alt);
	padding: var(--uah-spacing-m) var(--uah-spacing-m);
	border-radius: var(--uah-radius-s);
	border: 1px dashed var(--uah-color-border);
}

.uah-discount-code code {
	flex: 1;
	font-family: 'Courier New', monospace;
	font-size: var(--uah-font-size-s);
	font-weight: var(--uah-font-weight-semibold);
	color: #059669;
	background: transparent;
	padding: 0;
	letter-spacing: 0.5px;
}

.uah-btn-copy {
	flex-shrink: 0;
	padding: var(--uah-spacing-xs) var(--uah-spacing-m);
	background: var(--uah-color-success);
	color: var(--uah-color-white);
	border: none;
	border-radius: var(--uah-radius-s);
	font-size: var(--uah-font-size-s);
	font-weight: var(--uah-font-weight-medium);
	cursor: pointer;
	transition: all var(--uah-transition-fast);
	display: flex;
	align-items: center;
	gap: var(--uah-spacing-xs);
	white-space: nowrap;
}

.uah-btn-copy:hover {
	background: #059669;
	transform: scale(1.05);
}

.uah-btn-copy:active {
	transform: scale(0.98);
}

.uah-btn-copy.uah-btn-success {
	background: var(--uah-color-success);
}

.uah-btn-copy.uah-btn-error {
	background: var(--uah-color-error);
}

.uah-btn-copy i {
	font-size: 12px;
}

/* Copy Feedback Tooltip */
.uah-copy-feedback-tooltip {
	position: absolute;
	background: var(--uah-color-heading);
	color: var(--uah-color-white);
	padding: var(--uah-spacing-s) var(--uah-spacing-m);
	border-radius: var(--uah-radius-s);
	font-size: var(--uah-font-size-s);
	font-weight: var(--uah-font-weight-medium);
	white-space: nowrap;
	z-index: var(--uah-z-modal);
	opacity: 0;
	transform: translateY(-5px);
	transition: all var(--uah-transition-normal);
	pointer-events: none;
	box-shadow: var(--uah-shadow-m);
}

.uah-copy-feedback-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: var(--uah-spacing-xs) solid transparent;
	border-top-color: var(--uah-color-heading);
}

.uah-copy-feedback-tooltip.uah-tooltip-visible {
	opacity: 1;
	transform: translateY(0);
}

.uah-copy-feedback-tooltip.uah-tooltip-success {
	background: var(--uah-color-success);
}

.uah-copy-feedback-tooltip.uah-tooltip-success::after {
	border-top-color: var(--uah-color-success);
}

.uah-copy-feedback-tooltip.uah-tooltip-error {
	background: var(--uah-color-error);
}

.uah-copy-feedback-tooltip.uah-tooltip-error::after {
	border-top-color: var(--uah-color-error);
}

.uah-discount-code-none {
	display: block;
	color: var(--uah-color-faded);
	font-size: var(--uah-font-size-s);
	font-style: italic;
	padding: var(--uah-spacing-m) var(--uah-spacing-m);
}

/* ============================================
   Discount Info Tooltip
   ============================================ */

.uah-discount-info-wrapper {
	position: relative;
	flex: 0 0 auto;
}

.uah-discount-info-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--uah-color-bg-alt);
	border: 1px solid var(--uah-color-border);
	border-radius: var(--uah-radius-s);
	color: var(--uah-color-faded);
	font-size: var(--uah-font-size-base);
	cursor: help;
	transition: all var(--uah-transition-fast);
}

.uah-discount-info-btn:hover {
	background: var(--uah-color-info);
	border-color: var(--uah-color-info);
	color: var(--uah-color-white);
}

.uah-discount-tooltip {
	position: absolute;
	bottom: calc(100% + var(--uah-spacing-m));
	right: 0;
	min-width: 250px;
	max-width: 350px;
	padding: var(--uah-spacing-m) var(--uah-spacing-l);
	background: var(--uah-color-heading);
	color: var(--uah-color-white);
	font-size: var(--uah-font-size-s);
	line-height: 1.5;
	border-radius: var(--uah-radius-s);
	box-shadow: var(--uah-shadow-xl);
	z-index: var(--uah-z-modal);
}

.uah-discount-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	right: var(--uah-spacing-m);
	border: var(--uah-spacing-xs) solid transparent;
	border-top-color: var(--uah-color-heading);
}

/* ============================================
   Action Buttons
   ============================================ */

.uah-discount-action {
	flex: 0 0 auto;
}

.uah-discount-action .uah-btn {
	padding: var(--uah-spacing-m) var(--uah-spacing-xl);
	font-size: var(--uah-font-size-s);
	font-weight: var(--uah-font-weight-semibold);
	border-radius: var(--uah-radius-s);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--uah-spacing-s);
	transition: all var(--uah-transition-fast);
	white-space: nowrap;
}

.uah-discount-action .uah-btn-primary {
	background: linear-gradient(135deg, var(--uah-color-success) 0%, #059669 100%);
	color: var(--uah-color-white);
	border: none;
}

.uah-discount-action .uah-btn-primary:hover {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.uah-discount-action .uah-btn-secondary {
	background: var(--uah-color-bg-alt);
	color: var(--uah-color-text);
	border: 1px solid var(--uah-color-border);
}

.uah-discount-action .uah-btn-secondary:hover {
	background: var(--uah-color-border);
	border-color: var(--uah-color-faded);
}

/* ============================================
   Info Note
   ============================================ */

.uah-discount-note {
	display: flex;
	align-items: flex-start;
	gap: var(--uah-spacing-m);
	padding: var(--uah-spacing-l) var(--uah-spacing-xl);
	background: #eff6ff;
	border: 1px solid #dbeafe;
	border-radius: var(--uah-radius-m);
	margin-top: var(--uah-spacing-s);
}

.uah-discount-note i {
	color: var(--uah-color-info);
	font-size: 18px;
	margin-top: 2px;
	flex-shrink: 0;
}

.uah-discount-note p {
	margin: 0;
	color: #1e40af;
	font-size: var(--uah-font-size-s);
	line-height: 1.6;
}

/* ============================================
   Empty State
   ============================================ */

.uah-discounts-empty {
	text-align: center;
	padding: var(--uah-spacing-huge) var(--uah-spacing-xl);
	background: var(--uah-color-bg-alt);
	border: 2px dashed var(--uah-color-border);
	border-radius: var(--uah-radius-m);
}

.uah-discounts-empty i {
	font-size: 48px;
	color: var(--uah-color-border);
	margin-bottom: var(--uah-spacing-l);
}

.uah-discounts-empty p:first-of-type {
	font-size: var(--uah-font-size-l);
	font-weight: var(--uah-font-weight-semibold);
	color: var(--uah-color-text);
	margin: 0 0 var(--uah-spacing-s) 0;
}

.uah-discounts-empty p:last-of-type {
	font-size: var(--uah-font-size-s);
	color: var(--uah-color-faded);
	margin: 0;
}

/* ============================================
   Responsive Design
   ============================================ */

@media screen and (max-width: 1200px) {
	.uah-discount-row {
		gap: var(--uah-spacing-l);
		padding: var(--uah-spacing-l);
	}

	.uah-discount-shop {
		flex: 0 0 180px;
	}

	.uah-discount-amount {
		flex: 0 0 100px;
	}
}

@media screen and (max-width: 992px) {
	.uah-discount-row {
		flex-wrap: wrap;
		gap: var(--uah-spacing-m);
	}

	.uah-discount-shop {
		flex: 0 0 100%;
		border-bottom: 1px solid var(--uah-color-bg-alt);
		padding-bottom: var(--uah-spacing-m);
	}

	.uah-discount-amount {
		flex: 0 0 auto;
		order: 1;
	}

	.uah-discount-code-wrapper {
		flex: 1 1 100%;
		order: 3;
	}

	.uah-discount-info-wrapper {
		order: 2;
	}

	.uah-discount-action {
		flex: 1 1 100%;
		order: 4;
	}

	.uah-discount-action .uah-btn {
		width: 100%;
		justify-content: center;
	}

	.uah-discount-tooltip {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}

	.uah-discount-tooltip::after {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 576px) {
	.uah-discount-row {
		padding: var(--uah-spacing-l);
	}

	.uah-discount-shop-logo,
	.uah-discount-shop-icon {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.uah-discount-shop-name {
		font-size: var(--uah-font-size-s);
	}

	.uah-discount-value {
		font-size: var(--uah-font-size-s);
		padding: var(--uah-spacing-xs) var(--uah-spacing-m);
	}

	.uah-discount-code {
		flex-direction: column;
		align-items: stretch;
		gap: var(--uah-spacing-s);
	}

	.uah-discount-code code {
		text-align: center;
	}

	.uah-btn-copy {
		width: 100%;
		justify-content: center;
	}

	.uah-discount-note {
		flex-direction: column;
		text-align: center;
	}

	.uah-discount-note i {
		margin-top: 0;
	}
}


/* ============================================
   Print Styles
   ============================================ */

@media print {
	.uah-discount-row {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid var(--uah-color-text);
	}

	.uah-btn-copy,
	.uah-discount-info-btn,
	.uah-discount-action .uah-btn {
		display: none;
	}

	.uah-discount-code {
		border: 1px solid var(--uah-color-text);
	}
}