/**
 * Luxury Jewelry Metal Selector Widget Styles
 */

.luxury-metal-selector-widget {
	width: 100%;
	direction: rtl;
	text-align: right;
	box-sizing: border-box;
	margin-bottom: 20px;
}

/* Hide native WooCommerce material row when widget drives variations */
table.variations tr.luxury-wc-material-row-hidden {
	display: none !important;
}

/* Buttons + selected label on one row (RTL: buttons right, label left of them) */
.luxury-metal-selector-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
}

.luxury-metal-selected-label {
	font-size: 16px;
	font-weight: 600;
	color: #111111;
	line-height: 1.3;
	flex: 0 1 auto;
	min-width: 0;
}

.luxury-metal-selector-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
	justify-content: flex-start;
	flex: 0 1 auto;
}

.luxury-metal-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background-color: #f5f5f5;
	color: #333333;
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	outline: none;
	box-sizing: border-box;
	min-width: 120px;
	text-align: center;
}

/* זהב אדום - Red Gold / Rose Gold */
.luxury-metal-button[data-metal-type="red_gold"] {
	background: linear-gradient(135deg, #E8B4B8 0%, #D4A5A9 100%);
	color: #8B4A4F;
	border-color: #C8969A;
}

.luxury-metal-button[data-metal-type="red_gold"]:hover {
	background: linear-gradient(135deg, #D4A5A9 0%, #C8969A 100%);
	border-color: #B8868A;
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(232, 180, 184, 0.4);
}

.luxury-metal-button[data-metal-type="red_gold"].active {
	background: linear-gradient(135deg, #C8969A 0%, #B8868A 100%);
	color: #ffffff;
	border-color: #A8767A;
	box-shadow: 0 2px 12px rgba(200, 150, 154, 0.5);
}

.luxury-metal-button[data-metal-type="red_gold"].active:hover {
	background: linear-gradient(135deg, #B8868A 0%, #A8767A 100%);
	border-color: #98666A;
}

/* זהב לבן - White Gold */
.luxury-metal-button[data-metal-type="white_gold"] {
	background: linear-gradient(135deg, #F5F5F5 0%, #E8E8E8 100%);
	color: #666666;
	border-color: #D0D0D0;
}

.luxury-metal-button[data-metal-type="white_gold"]:hover {
	background: linear-gradient(135deg, #E8E8E8 0%, #DBDBDB 100%);
	border-color: #C0C0C0;
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(245, 245, 245, 0.4);
}

.luxury-metal-button[data-metal-type="white_gold"].active {
	background: linear-gradient(135deg, #E8E8E8 0%, #DBDBDB 100%);
	color: #333333;
	border-color: #B0B0B0;
	box-shadow: 0 2px 12px rgba(232, 232, 232, 0.5);
}

.luxury-metal-button[data-metal-type="white_gold"].active:hover {
	background: linear-gradient(135deg, #DBDBDB 0%, #CECECE 100%);
	border-color: #A0A0A0;
}

/* זהב לבן טבעי — כמו זהב לבן */
.luxury-metal-button[data-metal-type="natural_white_gold"] {
	background: linear-gradient(135deg, #F8F6F2 0%, #E8E4DC 100%);
	color: #5c5a56;
	border-color: #D4CFC4;
}

.luxury-metal-button[data-metal-type="natural_white_gold"]:hover {
	background: linear-gradient(135deg, #E8E4DC 0%, #D8D4CC 100%);
	border-color: #C4BFB4;
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(232, 228, 220, 0.45);
}

.luxury-metal-button[data-metal-type="natural_white_gold"].active {
	background: linear-gradient(135deg, #D8D4CC 0%, #C8C4BC 100%);
	color: #2a2927;
	border-color: #B8B3A8;
	box-shadow: 0 2px 12px rgba(200, 196, 188, 0.5);
}

.luxury-metal-button[data-metal-type="natural_white_gold"].active:hover {
	background: linear-gradient(135deg, #C8C4BC 0%, #B8B4AC 100%);
	border-color: #A8A39A;
}

/* זהב צהוב - Yellow Gold */
.luxury-metal-button[data-metal-type="yellow_gold"] {
	background: linear-gradient(135deg, rgb(180, 153, 108) 0%, rgb(160, 133, 88) 100%);
	color: #ffffff;
	border-color: rgb(150, 123, 78);
}

.luxury-metal-button[data-metal-type="yellow_gold"]:hover {
	background: linear-gradient(135deg, rgb(160, 133, 88) 0%, rgb(140, 113, 68) 100%);
	border-color: rgb(130, 103, 58);
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(180, 153, 108, 0.4);
}

.luxury-metal-button[data-metal-type="yellow_gold"].active {
	background: linear-gradient(135deg, rgb(160, 133, 88) 0%, rgb(140, 113, 68) 100%);
	color: #ffffff;
	border-color: rgb(130, 103, 58);
	box-shadow: 0 2px 12px rgba(180, 153, 108, 0.5);
}

.luxury-metal-button[data-metal-type="yellow_gold"].active:hover {
	background: linear-gradient(135deg, rgb(140, 113, 68) 0%, rgb(120, 93, 48) 100%);
	border-color: rgb(110, 83, 38);
}

/* כסף - Silver */
.luxury-metal-button[data-metal-type="silver"] {
	background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
	color: #4A4A4A;
	border-color: #909090;
}

.luxury-metal-button[data-metal-type="silver"]:hover {
	background: linear-gradient(135deg, #A8A8A8 0%, #909090 100%);
	border-color: #787878;
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
}

.luxury-metal-button[data-metal-type="silver"].active {
	background: linear-gradient(135deg, #A8A8A8 0%, #909090 100%);
	color: #2A2A2A;
	border-color: #707070;
	box-shadow: 0 2px 12px rgba(168, 168, 168, 0.5);
}

.luxury-metal-button[data-metal-type="silver"].active:hover {
	background: linear-gradient(135deg, #909090 0%, #787878 100%);
	border-color: #606060;
}

/* Default hover for buttons without specific metal type */
.luxury-metal-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ─── Image-style swatch buttons ─── */
.luxury-metal-button.has-image {
	padding: 0 !important;
	background: transparent !important;
	border: 3px solid #e0e0e0 !important;
	border-radius: 8px !important;
	min-width: unset !important;
	width: 58px !important;
	height: 58px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

/* Override per-metal gradient backgrounds for image buttons */
.luxury-metal-button.has-image[data-metal-type="white_gold"],
.luxury-metal-button.has-image[data-metal-type="red_gold"],
.luxury-metal-button.has-image[data-metal-type="yellow_gold"],
.luxury-metal-button.has-image[data-metal-type="silver"],
.luxury-metal-button.has-image[data-metal-type="gold_silver"],
.luxury-metal-button.has-image[data-metal-type="natural_white_gold"] {
	background: transparent !important;
	color: transparent !important;
}

.luxury-metal-button.has-image:hover {
	transform: scale(1.08) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
	border-color: #B4996C !important;
}

.luxury-metal-button.has-image.active {
	border-color: #B4996C !important;
	box-shadow: 0 0 0 3px #B4996C !important;
	transform: scale(1.05) !important;
}

.luxury-metal-button-img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	pointer-events: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
	.luxury-metal-selector-row {
		flex-wrap: wrap;
		align-items: center;
	}

	.luxury-metal-selector-buttons {
		flex-direction: column;
		width: 100%;
	}
	
	.luxury-metal-button {
		width: 100%;
		min-width: auto;
	}

	.luxury-metal-selected-label {
		width: 100%;
		text-align: center;
		margin-top: 4px;
	}
}

@media (max-width: 480px) {
	.luxury-metal-button {
		padding: 10px 20px;
		font-size: 14px;
	}
}