/* -------------------------------------------------
 * Product page: full / deposit choice
 * ------------------------------------------------- */

/* form.cart is a flex row in this theme, so the choice has to claim a whole
   row of its own instead of sitting beside the quantity stepper. */
.woocommerce div.product form.cart {
	flex-wrap: wrap;
}

.woocommerce div.product form.cart {
	align-items: center;
}

.wcpp-deposit-options {
	flex: 0 0 100%;
	width: 100%;
	order: -1;
	margin: 0 0 18px;
}

/* Simple products: the three are direct children of form.cart, which is a flex
   row, so a full basis on the button drops it to its own line. */
form.cart .wcpp-deposit-options ~ .single_add_to_cart_button {
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 12px !important;
}

form.cart .wcpp-deposit-options ~ .quantity {
	margin-bottom: 0 !important;
}

/* Variable products are a different story. WooCommerce prints the choice inside
   .woocommerce-variation-add-to-cart, and the theme pins that row with
   `display:block!important` (so it is not a flex container at all) and caps the
   button with `max-width:calc(50% - 15px)!important` - both behind an id
   selector, which outranks any class-only rule no matter how many !importants it
   carries. Matching that weight needs an id plus more classes than the theme
   uses, hence the repeated class. Scoped to the deposit choice, so nothing else
   on the site inherits this. */
.chawkbazar-woocommerce #content .product .summary .single_variation_wrap .wcpp-deposit-options ~ .quantity,
.single-product .product .summary .single_variation_wrap .wcpp-deposit-options ~ .quantity {
	float: none !important;
	margin: 0 0 12px !important;
}

.chawkbazar-woocommerce #content .product .summary .single_variation_wrap .wcpp-deposit-options ~ .single_add_to_cart_button.single_add_to_cart_button.button,
.single-product .product .summary .single_variation_wrap .wcpp-deposit-options ~ .single_add_to_cart_button.single_add_to_cart_button.button {
	display: block !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.wcpp-legend {
	display: block;
	margin: 0 0 8px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.wcpp-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wcpp-choice {
	position: relative;
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background: #fff;
	color: inherit;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wcpp-choice:hover {
	border-color: var(--colorPrimary, #212121);
}

/* Keep the radio operable for keyboard and screen readers, just not visible. */
.wcpp-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* The theme sets colours directly on labels and spans in the product summary, and
   an explicit colour on a child always beats an inherited one - so state the
   colour on the title and amount themselves rather than relying on inheritance
   from the selected card. */
.wcpp-deposit-options .wcpp-choice .wcpp-choice-title,
.wcpp-deposit-options .wcpp-choice .wcpp-choice-title * {
	color: var(--colorTextMain, #212121);
	font-weight: 600;
	font-size: 0.95em;
}

.wcpp-deposit-options .wcpp-choice .wcpp-choice-amount,
.wcpp-deposit-options .wcpp-choice .wcpp-choice-amount * {
	color: #6b6b6b;
	font-size: 0.9em;
}

.wcpp-choice.is-selected {
	border-color: var(--colorPrimary, #212121);
	background: var(--colorPrimary, #212121);
}

.wcpp-deposit-options .wcpp-choice.is-selected .wcpp-choice-title,
.wcpp-deposit-options .wcpp-choice.is-selected .wcpp-choice-title * {
	color: #fff;
}

.wcpp-deposit-options .wcpp-choice.is-selected .wcpp-choice-amount,
.wcpp-deposit-options .wcpp-choice.is-selected .wcpp-choice-amount * {
	color: rgba(255, 255, 255, 0.82);
}

.wcpp-choice input:focus-visible ~ .wcpp-choice-title {
	outline: 2px solid var(--colorPrimary, #212121);
	outline-offset: 3px;
}

.wcpp-balance-note {
	margin: 10px 0 0;
	font-size: 0.9em;
	color: #555;
}

@media (max-width: 480px) {
	.wcpp-choice {
		flex: 1 1 100%;
	}
}

/* Stepper spans the full row so it lines up with the Add to cart button beneath
   it. The theme pins this at 186px, and at calc(50% - 15px) below 990px, from
   when the stepper and button sat side by side - both behind an id selector, so
   the override needs an id plus more classes than the theme uses.
   The - and + are absolutely positioned at left:0 / right:0 of .quantity, so a
   wider container simply pushes them to the edges; the input fills between. */
.chawkbazar-woocommerce #content .product .summary form.cart .wcpp-deposit-options ~ .quantity.quantity.quantity,
.single-product .product .summary form.cart .wcpp-deposit-options ~ .quantity.quantity.quantity {
	width: 100% !important;
	max-width: 100% !important;
}

.chawkbazar-woocommerce #content .product .summary form.cart .wcpp-deposit-options ~ .quantity.quantity.quantity input.qty,
.single-product .product .summary form.cart .wcpp-deposit-options ~ .quantity.quantity.quantity input.qty {
	width: 100% !important;
	max-width: 100% !important;
	text-align: center !important;
	padding-left: 52px !important;
	padding-right: 52px !important;
}


/* -------------------------------------------------
 * Checkout: dedicated partial-payment summary panel
 * ------------------------------------------------- */

.woocommerce-checkout-review-order-table tr.wcpp-summary-row > td {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.wcpp-summary {
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background: #fafafa;
	padding: 14px 16px;
	margin: 16px 0 4px;
	font-size: 0.95em;
	line-height: 1.5;
	text-align: left;
}

.wcpp-summary-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.wcpp-summary-title {
	font-weight: 600;
	text-transform: none;
}

.wcpp-summary-badge {
	font-size: 0.78em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	background: #ececec;
	color: #555;
	white-space: nowrap;
}

.wcpp-summary-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcpp-summary-item {
	list-style: none;
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px solid #e8e8e8;
}

.wcpp-summary-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.wcpp-summary .wcpp-item-name {
	margin: 0 0 6px;
	font-weight: 600;
}

.wcpp-summary .wcpp-item-qty {
	font-weight: 400;
	color: #666;
}

.wcpp-summary .wcpp-item-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 3px;
	color: #555;
}

.wcpp-summary .wcpp-item-row > span:last-child {
	white-space: nowrap;
	text-align: right;
}

.wcpp-summary .wcpp-item-balance {
	color: #222;
	font-weight: 500;
}

.wcpp-summary .wcpp-summary-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid #e2e2e2;
	font-weight: 600;
}

.wcpp-summary .wcpp-summary-note {
	margin: 10px 0 0;
	font-size: 0.88em;
	color: #666;
}