/*
 * Every rule below is scoped under #wet-ticket-panel / #wet-pay-billing-fields
 * on purpose: the active theme ships broad selectors like
 * "body:not(.woocommerce-cart) .main-content table/td" (specificity 0,2,2)
 * that otherwise silently win over a plain class selector such as
 * ".wet-ticket-info" (0,1,0). An id+class combination is (1,1,0) at minimum,
 * which always outranks a class-only selector regardless of how many
 * classes/elements it chains or what order the stylesheets load in - no
 * !important needed. Keep new rules scoped the same way rather than adding
 * !important.
 */

#wet-ticket-panel-heading.wet-ticket-panel-heading {
	margin: 1.5em 0 0.5em;
}

#wet-ticket-panel.wet-ticket-panel {
	background-color: #ffffff;
	border-radius: 0.75rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	width: 100%;
	max-width: 600px;
	overflow: hidden;
	border: 1px solid #e0e3e8;
	margin: 0 0 1.5em;
}

#wet-ticket-panel .wet-ticket-panel-message {
	padding: 10px 14px;
	margin: 12px;
	border-radius: 6px;
	background: #eef7ee;
	color: #1e5c2e;
}

#wet-ticket-panel .wet-ticket-panel-message.wet-error {
	background: #fdecea;
	color: #a02622;
}

#wet-ticket-panel .wet-ticket-list {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background-color: transparent;
	border-top: 0;
}

#wet-ticket-panel .wet-ticket-list td,
#wet-ticket-panel .wet-ticket-list th {
	border: 0;
	font-size: inherit;
}

#wet-ticket-panel .wet-ticket-row {
	border-bottom: 1px solid #f1f4f9;
	transition: background-color 0.2s;
}

#wet-ticket-panel .wet-ticket-row:last-child {
	border-bottom: none;
}

#wet-ticket-panel .wet-ticket-info {
	padding: 1.25rem 1.5rem;
	width: 60%;
}

#wet-ticket-panel .wet-ticket-name {
	display: block;
	font-weight: 700;
	font-size: 1.125rem;
	color: #181c20;
	line-height: 1.2;
}

#wet-ticket-panel .wet-ticket-description {
	display: block;
	font-size: 0.8125rem;
	color: #5c5f60;
	margin-top: 4px;
}

#wet-ticket-panel .wet-ticket-meta {
	display: block;
	font-size: 0.8125rem;
	color: #5c5f60;
	margin-top: 4px;
}

#wet-ticket-panel .wet-ticket-price {
	padding: 1.25rem 0.5rem;
	text-align: center;
	vertical-align: middle;
	font-weight: 700;
	font-size: 18px;
	color: #7a0c36;
	white-space: nowrap;
}

#wet-ticket-panel .wet-ticket-qty {
	padding: 1.25rem 1.5rem;
	text-align: right;
	vertical-align: middle;
	width: 1%;
	white-space: nowrap;
}

#wet-ticket-panel .wet-ticket-status-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background-color: #f1f4f9;
	color: #5c5f60;
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	display: inline-block;
	white-space: nowrap;
}

#wet-ticket-panel .wet-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #e0e3e8;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #fff;
}

#wet-ticket-panel .wet-qty-stepper button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #181c20;
	font-size: 1.25rem;
	transition: background-color 0.2s;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

#wet-ticket-panel .wet-qty-stepper button:hover {
	background-color: #f7f9ff;
}

#wet-ticket-panel .wet-qty-input {
	width: 44px;
	height: 36px;
	border: none;
	border-left: 1px solid #e0e3e8;
	border-right: 1px solid #e0e3e8;
	text-align: center;
	font-weight: 600;
	font-size: 1rem;
	color: #181c20;
	background: transparent;
	-moz-appearance: textfield;
	padding: 0;
	margin: 0;
}

#wet-ticket-panel .wet-qty-input::-webkit-outer-spin-button,
#wet-ticket-panel .wet-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#wet-ticket-panel .wet-ticket-panel-footer {
	padding: 1.5rem;
	border-top: 1px solid #e0e3e8;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#wet-ticket-panel .wet-ticket-total {
	font-size: 1.5rem;
	font-weight: 800;
	color: #181c20;
}

#wet-ticket-panel .wet-ticket-total-amount {
	color: #7a0c36;
}

#wet-ticket-panel .wet-ticket-total-amount::after {
	content: " €";
}

/*
 * .wet-order-button also carries the theme's .nectar-button class (added
 * on purpose, for its interaction styling) which sets its own background/
 * padding/border-radius/position - the id scope here is what makes sure
 * ours wins without needing !important, tie or no tie.
 */
#wet-ticket-panel .wet-order-button {
	background-color: #7a0c36;
	color: #ffffff;
	padding: 1rem 2.5rem;
	margin: 0;
	top: 0;
	border-radius: 9999px;
	font-weight: 500;
	font-size: 1.125rem;
	line-height: normal;
	transition: all 0.2s;
	border: none;
	box-shadow: 0 4px 14px rgba(122, 12, 54, 0.25);
}

#wet-ticket-panel .wet-order-button:not(:disabled) {
	cursor: pointer;
}

#wet-ticket-panel .wet-order-button:hover:not(:disabled) {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(122, 12, 54, 0.3);
}

#wet-ticket-panel .wet-order-button:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
}

#wet-ticket-panel .wet-order-button.wet-loading {
	opacity: 0.7;
	pointer-events: none;
}

#wet-ticket-panel .wet-status-ended {
	opacity: 0.5;
}

#wet-ticket-panel .wet-no-tickets-available {
	color: #5c5f60;
	font-style: italic;
	padding: 1.25rem 1.5rem;
}

#wet-ticket-panel .wet-price-sold-out {
	color: #999;
	font-style: italic;
}

#wet-pay-billing-fields {
	margin-bottom: 24px;
}

#wet-pay-billing-fields h3 {
	margin-bottom: 12px;
}

#wet-pay-billing-fields .form-row {
	margin-bottom: 10px;
}

#wet-pay-billing-fields .wet-field-error {
	clear: both;
	margin: 0 0 10px;
	color: #a32424;
	font-size: 0.85rem;
}

#wet-pay-billing-fields .clear {
	clear: both;
}

#wet-pay-coupon {
	margin-bottom: 24px;
}

#wet-pay-coupon .wet-pay-coupon-form {
	padding: 0;
}

/*
 * The applied-coupon list (with remove buttons) renders separately from
 * #wet-pay-coupon now, right after the order table - see
 * WET_Checkout_Fields::render_coupon_list().
 */
#wet-pay-coupon-applied {
	margin: 10px 0 24px;
}

#wet-pay-coupon-applied .wet-pay-coupon-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#wet-pay-coupon-applied .wet-pay-coupon-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	margin-bottom: 6px;
	background: #f6f3ee;
	border-radius: 4px;
	max-width: 320px;
}

#wet-pay-coupon-applied .wet-pay-coupon-code {
	font-weight: 600;
	text-transform: uppercase;
}

#wet-pay-coupon-applied .wet-pay-coupon-amount {
	color: #7a0c36;
	margin-left: auto;
}

#wet-pay-coupon-applied .wet-pay-coupon-remove {
	background: none;
	border: none;
	color: #888;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

#wet-pay-coupon-applied .wet-pay-coupon-remove:hover {
	color: #a32424;
}

/*
 * The input itself is styled by WooCommerce's own .input-text rules (it
 * carries that class) - this only adds the one thing WC doesn't already do:
 * floating the "Použiť" button inside the input's right edge.
 */
#wet-pay-coupon .wet-pay-coupon-input-wrap {
	position: relative;
}

#wet-pay-coupon .wet-pay-coupon-input-wrap .input-text {
	padding-right: 6rem;
}

#wet-pay-coupon .wet-pay-coupon-input-wrap button {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	margin: 0;
	padding: 0.55rem 1.1rem;
	background-color: #7a0c36;
	color: #ffffff;
	border: none;
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: normal;
	cursor: pointer;
}

#wet-pay-coupon .wet-pay-coupon-input-wrap button:hover {
	filter: brightness(1.1);
}

#wet-pay-coupon .wet-pay-coupon-message {
	margin-top: 8px;
	font-size: 0.9rem;
	color: #555;
}

#wet-pay-coupon .wet-pay-coupon-message.wet-error {
	color: #a32424;
}

#wet-email-mismatch {
	margin-top: 8px;
	font-size: 0.9rem;
	color: #a32424;
	padding-bottom: 0px;
}

/*
 * No #wet-thankyou-tickets rules here on purpose - that section
 * (templates/frontend/thank-you-tickets.php) has its classes defined in a
 * <style> block embedded in the template's own HTML output, not via this
 * stylesheet. See that template's own header comment for why.
 */

/*
 * Below 600px (the panel's own max-width): wet-ticket-row's 3 columns
 * (info / price / qty) don't comfortably fit side by side, so the row
 * becomes a flex container - wet-ticket-info takes its own full-width row,
 * wet-ticket-price/wet-ticket-qty share a second row underneath. The footer
 * (total + order button) and the pay-page contact fields are stacked the
 * same way, for the same reason - same markup, no JS, just display
 * overrides.
 */
@media (max-width: 600px) {
	#wet-ticket-panel .wet-ticket-row {
		display: flex;
		flex-wrap: wrap;
	}

	#wet-ticket-panel .wet-ticket-info {
		width: 100%;
		flex: 0 0 100%;
	}

	#wet-ticket-panel .wet-ticket-price {
		flex: 1 1 50%;
		width: auto;
		padding: 1.25rem 1.5rem;
		text-align: left;
	}

	#wet-ticket-panel .wet-ticket-price > span {
		display: flex;
		align-items: center;
		height: 100%;
	}

	#wet-ticket-panel .wet-ticket-qty {
		flex: 1 1 50%;
		width: auto;
	}

	#wet-ticket-panel .wet-ticket-panel-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	#wet-ticket-panel .wet-ticket-total {
		text-align: center;
	}

	#wet-ticket-panel .wet-order-button {
		width: 100%;
	}

	#wet-pay-billing-fields .form-row-first,
	#wet-pay-billing-fields .form-row-last {
		width: 100%;
		float: none;
	}
}