/**
 * Down Payments Frontend Styling.
 *
 * @package TCG_WooCommerce_Down_Payments
 */

.tcg-dp-checkout-container {
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.tcg-dp-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #0f172a;
	margin-top: 0;
	margin-bottom: 12px;
	text-transform: none;
}

.tcg-dp-choices {
	display: grid;
	gap: 10px;
	margin-bottom: 16px;
}

.tcg-dp-choice-fieldset {
	border: 0;
	margin: 0 0 16px;
	padding: 0;
}

.tcg-dp-choice-fieldset legend {
	color: #0f172a;
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 10px;
	padding: 0;
}

.tcg-dp-choice-card {
	align-items: flex-start;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	cursor: pointer;
	display: grid;
	gap: 3px 10px;
	grid-template-columns: auto 1fr;
	font-size: 0.95rem;
	color: #334155;
	padding: 12px;
	font-weight: normal;
}

.tcg-dp-choice-card.is-selected {
	border-color: #0f172a;
	box-shadow: 0 0 0 1px #0f172a;
}

.tcg-dp-choice-card input[type="radio"] {
	grid-row: 1 / span 2;
	margin: 3px 0 0;
}

.tcg-dp-choice-title {
	color: #0f172a;
	font-weight: 700;
	line-height: 1.3;
}

.tcg-dp-choice-description {
	color: #64748b;
	font-size: 0.88rem;
	line-height: 1.4;
}

.tcg-dp-pay-now-summary {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	color: #0f172a;
	font-weight: 700;
	margin: 0 0 14px;
	padding: 10px 12px;
}

.tcg-dp-notice {
	background-color: #f1f5f9;
	border-left: 4px solid #0f172a;
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 0 6px 6px 0;
}

.tcg-dp-notice p {
	margin: 0;
	font-size: 0.9rem;
	color: #475569;
	line-height: 1.5;
}

.tcg-dp-breakdown {
	background-color: #ffffff;
	border: 1px solid #f1f5f9;
	border-radius: 6px;
	padding: 16px;
	margin-top: 12px;
}

.tcg-dp-breakdown-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 12px;
}

.tcg-dp-breakdown-table th {
	text-align: left;
	font-weight: 500;
	color: #64748b;
	font-size: 0.9rem;
	padding: 6px 0;
	border: none;
}

.tcg-dp-breakdown-table td {
	text-align: right;
	font-size: 0.95rem;
	color: #0f172a;
	padding: 6px 0;
	border: none;
}

.tcg-dp-highlight {
	color: #0f172a;
	font-size: 1.05rem;
	font-weight: 700;
}

.tcg-dp-wording {
	font-size: 0.85rem;
	color: #64748b;
	line-height: 1.4;
	margin: 0;
}

/* My Account Styles */
.tcg-dp-my-account-summary {
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	margin: 30px 0;
}

.tcg-dp-summary-table {
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
}

.tcg-dp-summary-table th {
	text-align: left;
	padding: 10px 0;
	border-bottom: 1px solid #e2e8f0;
	color: #475569;
	font-weight: 600;
}

.tcg-dp-summary-table td {
	text-align: right;
	padding: 10px 0;
	border-bottom: 1px solid #e2e8f0;
	font-weight: 600;
	color: #0f172a;
}

.tcg-badge {
	display: inline-block;
	padding: 3px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 4px;
	margin-left: 6px;
	text-transform: uppercase;
	line-height: 1;
}

.tcg-badge-paid {
	background-color: #dcfce7;
	color: #15803d;
}

.tcg-badge-unpaid {
	background-color: #fee2e2;
	color: #b91c1c;
}

.tcg-dp-order-badge {
	border-radius: 4px;
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding: 4px 7px;
	text-transform: uppercase;
	white-space: nowrap;
}

.tcg-dp-order-badge-paid {
	background-color: #dcfce7;
	color: #15803d;
}

.tcg-dp-order-badge-payable {
	background-color: #dbeafe;
	color: #1d4ed8;
}

.tcg-dp-order-badge-pending {
	background-color: #fef3c7;
	color: #92400e;
}

.tcg-dp-order-badge-muted {
	background-color: #f1f5f9;
	color: #475569;
}

.tcg-dp-order-balance-amount {
	color: #64748b;
	display: block;
	font-size: 0.78rem;
	margin-top: 4px;
}

.tcg-dp-no-balance-payment {
	background: #fff8e5;
	border-left: 4px solid #dba617;
	color: #5c3d00;
	line-height: 1.45;
	margin: 0 0 16px;
	padding: 10px 12px;
}

.tcg-pay-btn {
	display: inline-block;
	background-color: #0f172a !important;
	color: #ffffff !important;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.2s ease;
	margin-bottom: 16px;
	line-height: 1;
}

.tcg-pay-btn:hover {
	background-color: #1e293b !important;
	color: #ffffff !important;
	text-decoration: none;
}

.tcg-dp-offline-list {
	margin: 0;
	padding-left: 0;
	list-style: none;
	color: #64748b;
	font-size: 0.85rem;
}

.tcg-dp-offline-list li {
	margin-bottom: 6px;
}