/* ==================================================
   Main form layout
   ================================================== */
.cod-form{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.cod-form input{
	padding:10px;
	border:1px solid #bdbdbd !important;
	border-radius:6px !important;
}

.cod-form input[type="text"],
.cod-form input[type="tel"],
.cod-form input[type="number"]{
	padding:10px;
	border:1px solid #bdbdbd;
	border-radius:6px !important;
}

/* ==================================================
   Buy now / quantity row
   ================================================== */
.cod-actions{
	display:flex;
	gap:10px;
	flex-direction:row-reverse;
}

.cod-btn{
	width:65%;
	padding:14px;
	border-radius:6px;
	cursor:pointer;
	transition:0.3s;
}

.cod-qty{
	display:flex;
	align-items:center;
	gap:6px;
	width:35%;
}

.cod-qty input{
	text-align:center;
	width:60px;
	height:30px;
	font-size:18px;
}

.cod-qty button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid black;
    background: white;
    color: black;
    border-radius: 6px;
    cursor: pointer;
}

/* ==================================================
   Add to cart button
   ================================================== */
.cod-cart{
	margin-top:10px;
	width:100%;
	background:#000;
	color:#fff;
	padding:14px;
	border:none;
	border-radius:6px;
	cursor:pointer;
	transition:0.3s;
}

/* ==================================================
   Price calculator
   ================================================== */
.cod-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:10px;
}

.cod-divider{
	border:none;
	border-top:1px solid #1e293b !important;
	margin:10px 0;
}

.cod-total{
	font-weight:bold;
	font-size:18px;
}

.cod-btn:hover,
.cod-cart:hover{
	transform:translateY(-2px);
}

/* ==================================================
   Bundles list
   ================================================== */
.cod-bundles-wrapper{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin:15px 0;
}

.cod-bundle-card{
	position:relative;
	border:1px solid #000;
	border-radius:6px;
	padding:14px;
	cursor:pointer;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	font-weight:bold;
	transition:0.2s ease;
	background:#fff;
	overflow:visible;
	direction:rtl;
	text-align:right;
}

.cod-bundle-card:hover{
	transform:translateY(-2px);
}

.cod-bundle-card.active{
	background:#D0D0D0;
	border-color:#000;
}

.cod-bundle-title{
	font-weight:500;
}

.cod-bundle-prices{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	text-align:left;
	min-width:120px;
}

.cod-bundle-old-price{
	text-decoration:line-through;
	color:#777;
	font-size:13px;
	line-height:1.2;
}

.cod-bundle-sale-price{
	font-weight:800;
	font-size:18px;
	line-height:1.2;
}

.cod-bundle-discount{
	position:absolute;
	top:-12px;
	left:14px;
	background:linear-gradient(45deg, #d90429, #ff5c5c);
	color:#fff;
	padding:4px 10px;
	border-radius:999px;
	font-weight:800;
	font-size:12px;
	box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

/* ==================================================
   Variations editor in wp-admin
   ================================================== */
.cod-variations-editor{
	margin-top:20px;
}

.cod-variation-group-row{
	display:flex;
	gap:10px;
	align-items:center;
	margin:10px 0;
	flex-wrap:wrap;
}

.cod-variation-group-row input,
.cod-variation-group-row select{
	min-height:40px;
}

.cod-variation-matrix-wrap{
	margin-top:20px;
	overflow:auto;
}

.cod-variation-matrix td,
.cod-variation-matrix th{
	vertical-align:middle;
}

/* ==================================================
   Frontend variation selector
   ================================================== */
.cod-variations-app{
	margin:12px 0 16px 0;
	direction:rtl;
	text-align:right;
}

.cod-variation-units{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.cod-unit-card{
	border:1px solid #bdbdbd;
	border-radius:6px;
	background:#fff;
	padding:12px;
	transition:0.2s ease;
	display:flex;
	flex-direction:column;
	gap:12px;
	direction:rtl;
	text-align:right;
}

.cod-unit-card:hover{
	box-shadow:0 4px 14px rgba(0,0,0,0.05);
}

.cod-unit-header{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	direction:rtl;
	text-align:right;
}

.cod-unit-title{
	font-weight:700;
	font-size:16px;
	text-align:right;
}

.cod-unit-groups{
	display:flex;
	flex-direction:column;
	gap:12px;
	align-items:flex-end;
	direction:rtl;
	text-align:right;
}

.cod-variation-group-box{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:8px;
	align-items:flex-end;
	direction:rtl;
	text-align:right;
}

.cod-variation-group-name{
	font-weight:500;
	color:#666;
	width:100%;
	text-align:right;
}

.cod-variation-values{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-end;
	direction:rtl;
	width:100%;
}

.cod-variation-value{
	min-width: 40px;
   min-height: 32px;
   border:1px solid black;
	background:#fff;
	border-radius:6px;
	padding:8px 12px;
	cursor:pointer;
	transition:0.2s ease;
	color:#222;
	text-align:center;
}

.cod-variation-value.active{
	border-color:black;
	color:#222;
	background:#ededed;
	border:2px solid black;
}

.cod-variation-swatch{
	width:60px;
	min-width:44px;
	height:20px;
	border-radius:6px;
	border:1px solid black;
}

.cod-unit-summary{
	display:none !important;
}

.cod-variation-swatch.active{
	box-shadow:0 0 0 2px #111 inset;
	border:1px solid black;
	background-color: white;
	padding: 2px;
	cursor: pointer;
}

/* ── Discount badge on WooCommerce sale prices ───────────────────────────── */
.libre-discount-badge {
	display: inline-block;
	background: linear-gradient(45deg, #d90429, #ff5c5c);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 8px;
	vertical-align: middle;
	white-space: nowrap;
}