/**
 * Deposet Frontend Styles
 *
 * @package Deposet
 */

/* Product Deposit Options */
.deposet-options {
	margin: 20px 0;
	padding: 15px;
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.deposet-options h4 {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 600;
}

.deposet-option {
	margin-bottom: 12px;
	display: flex;
	align-items: flex-start;
}

.deposet-option input[type="radio"] {
	margin-right: 10px;
	margin-top: 3px;
}

.deposet-option label {
	flex: 1;
	cursor: pointer;
	font-size: 15px;
}

.deposet-option-details {
	display: block;
	color: #666;
	font-size: 13px;
	margin-top: 4px;
}

.deposet-deposit-amount {
	font-weight: 600;
	color: #333;
}

.deposet-remaining-amount {
	color: #999;
	font-size: 12px;
}

/* Cart Item Display */
.deposet-cart-price {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.deposet-deposit-label {
	color: #2c3e50;
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	background: #e8f5e9;
	padding: 2px 6px;
	border-radius: 3px;
	display: inline-block;
	margin-left: 5px;
}

.deposet-remaining {
	color: #666;
	font-size: 13px;
}

/* Cart Item Breakdown */
.deposet-item-breakdown {
	color: #666;
	font-size: 13px;
	margin-top: 5px;
	line-height: 1.4;
}

.deposet-item-breakdown strong {
	color: #2c3e50;
	font-weight: 600;
}

.deposet-subtotal-note {
	color: #666;
	font-size: 12px;
	font-style: italic;
	margin-top: 3px;
	display: block;
}

/* Cart/Checkout Breakdown */
.deposet-breakdown th,
.deposet-breakdown td {
	padding: 12px;
	border-top: 1px solid #e0e0e0;
}

.deposet-breakdown th {
	font-weight: 600;
	color: #2c3e50;
}

.deposet-breakdown td {
	text-align: right;
	color: #333;
}

/* Thank You Message */
.deposet-thankyou-message {
	background: #e8f5e9;
	border-left: 4px solid #4caf50;
	padding: 20px;
	margin: 20px 0;
}

.deposet-thankyou-message h2 {
	margin-top: 0;
	color: #2e7d32;
	font-size: 20px;
}

.deposet-thankyou-message p {
	margin: 10px 0;
	line-height: 1.6;
}

/* Order Details */
.woocommerce-order-deposit-details {
	margin-top: 30px;
	padding: 20px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.woocommerce-order-deposit-details__title {
	margin-top: 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #2c3e50;
	font-size: 18px;
}

.woocommerce-order-deposit-details table {
	width: 100%;
	margin: 15px 0;
}

.woocommerce-order-deposit-details th {
	text-align: left;
	padding: 10px;
	font-weight: 600;
	width: 40%;
}

.woocommerce-order-deposit-details td {
	text-align: right;
	padding: 10px;
}

/* Pay Balance Button */
.woocommerce-button.pay_balance {
	background-color: #4caf50;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 4px;
	display: inline-block;
	transition: background-color 0.3s;
}

.woocommerce-button.pay_balance:hover {
	background-color: #388e3c;
	color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
	.deposet-options {
		padding: 12px;
	}
	
	.deposet-option label {
		font-size: 14px;
	}
	
	.woocommerce-order-deposit-details th,
	.woocommerce-order-deposit-details td {
		display: block;
		width: 100%;
		text-align: left;
	}
	
	.woocommerce-order-deposit-details td {
		padding-top: 5px;
		padding-bottom: 15px;
		font-weight: 600;
	}
}

/* Loading State */
.deposet-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Error Messages */
.deposet-error {
	background: #ffebee;
	border-left: 4px solid #f44336;
	padding: 12px;
	margin: 15px 0;
	color: #c62828;
}

/* Success Messages */
.deposet-success {
	background: #e8f5e9;
	border-left: 4px solid #4caf50;
	padding: 12px;
	margin: 15px 0;
	color: #2e7d32;
}

/* Order Details Deposit Rows */
.deposet-order-detail-row th,
.deposet-order-detail-row td {
	padding: 12px;
	border-top: 1px solid #e0e0e0;
}

.deposet-order-detail-row th {
	font-weight: 600;
	color: #2c3e50;
}

.deposet-order-detail-row td {
	text-align: right;
	color: #333;
	font-weight: 600;
}

.deposet-order-detail-row:first-child th,
.deposet-order-detail-row:first-child td {
	border-top: 2px solid #2c3e50;
}

/* Order Details Deposit Info */
.woocommerce-order-details .order_item small {
	color: #666 !important;
	font-style: italic !important;
	font-size: 12px !important;
	margin-top: 3px !important;
	display: block !important;
}

/* Checkout Deposit Options - Uses same styling as product deposit options (.deposet-options) */

/* Deposit Payment Table */
.deposet-payment-table {
	margin: 30px 0;
	padding: 20px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.deposet-payment-table h3 {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 18px;
	font-weight: 600;
}

.deposet-payment-table p {
	margin: 0 0 20px 0;
	color: #666;
	font-style: italic;
}

.deposet-payment-table .woocommerce-table {
	border-collapse: collapse;
	width: 100%;
	margin: 0;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
}

.deposet-payment-table .woocommerce-table th {
	background: #2271b1;
	color: #fff;
	font-weight: 600;
	padding: 15px 12px;
	text-align: left;
	border-bottom: none;
}

.deposet-payment-table .woocommerce-table td {
	padding: 12px;
	border-bottom: 1px solid #e0e0e0;
	color: #333;
}

.deposet-payment-table .woocommerce-table tbody tr:hover {
	background: #f8f9fa;
}

.deposet-payment-table .woocommerce-table tbody tr:last-child td {
	border-bottom: none;
}

/* My Account Page Payment Details */
.woocommerce-order-deposit-details {
	margin: 30px 0;
	padding: 20px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.woocommerce-order-deposit-details__title {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 18px;
	font-weight: 600;
}

.woocommerce-order-deposit-details p {
	margin: 0 0 20px 0;
	color: #666;
	font-style: italic;
}

.woocommerce-order-deposit-details .woocommerce-table--payment-details {
	border-collapse: collapse;
	width: 100%;
	margin: 0;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
}

.woocommerce-order-deposit-details .woocommerce-table--payment-details th {
	background: #2271b1;
	color: #fff;
	font-weight: 600;
	padding: 15px 12px;
	text-align: left;
	border-bottom: none;
}

.woocommerce-order-deposit-details .woocommerce-table--payment-details td {
	padding: 12px;
	border-bottom: 1px solid #e0e0e0;
	color: #333;
}

.woocommerce-order-deposit-details .woocommerce-table--payment-details tbody tr:hover {
	background: #f8f9fa;
}

.woocommerce-order-deposit-details .woocommerce-table--payment-details tbody tr:last-child td {
	border-bottom: none;
}

/* Status Badges */
.deposet-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.deposet-status.partially-paid {
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffeaa7;
}

.deposet-status.pending {
	background: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
}

/* Pay Button */
.deposet-pay-button,
.deposet-pay-remaining-button {
	background: #2271b1 !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 24px !important;
	border-radius: 5px !important;
	text-decoration: none !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	display: inline-block;
	margin: 15px 0;
}

.deposet-pay-button:hover,
.deposet-pay-remaining-button:hover {
	background: #135e96 !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 768px) {
	.deposet-payment-table {
		padding: 15px;
		margin: 20px 0;
	}
	
	.deposet-payment-table h3 {
		font-size: 16px;
	}
	
	.deposet-payment-table p {
		font-size: 14px;
	}
	
	.deposet-payment-table .woocommerce-table th,
	.deposet-payment-table .woocommerce-table td {
		padding: 8px 6px;
		font-size: 14px;
	}
	
	.woocommerce-order-deposit-details {
		padding: 15px;
		margin: 20px 0;
	}
	
	.woocommerce-order-deposit-details__title {
		font-size: 16px;
	}
	
	.woocommerce-order-deposit-details p {
		font-size: 14px;
	}
	
	.woocommerce-order-deposit-details .woocommerce-table--payment-details th,
	.woocommerce-order-deposit-details .woocommerce-table--payment-details td {
		padding: 8px 6px;
		font-size: 14px;
	}
	
	.deposet-pay-button,
	.deposet-pay-remaining-button {
		padding: 8px 12px !important;
		font-size: 12px !important;
		text-align: center;
	}
}


.deposet-order-detail-row th,
.deposet-order-detail-row td {
	padding: 12px;
	border-top: 1px solid #e0e0e0;
}
.deposet-order-detail-row th {
	font-weight: 600;
	color: #2c3e50;
}
.deposet-order-detail-row td {
	text-align: right;
	color: #333;
}