/* PDMKT Payment Plans — Frontend Styles */

/* ── Product Page: Installment Info Panel ──────────────────────── */
.pdmkt-product-plan-info {
	margin: 16px 0;
	border: 1px solid #d1e3f0;
	border-radius: 8px;
	background: #f0f7ff;
	overflow: hidden;
	font-size: 14px;
}

.pdmkt-product-plan-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
}

.pdmkt-product-plan-headline {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pdmkt-product-plan-headline strong {
	font-size: 15px;
	color: #1a4b7a;
}

.pdmkt-product-plan-total {
	font-size: 12px;
	color: #555;
}

.pdmkt-toggle-schedule {
	background: none;
	border: 1px solid #2271b1;
	color: #2271b1;
	border-radius: 4px;
	padding: 4px 12px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.pdmkt-toggle-schedule:hover {
	background: #2271b1;
	color: #fff;
}

.pdmkt-toggle-icon {
	font-size: 10px;
	margin-left: 4px;
}

.pdmkt-product-schedule {
	border-top: 1px solid #c5d8eb;
	padding: 12px 16px;
	background: #fff;
}

.pdmkt-product-schedule-tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-bottom: 8px;
}

.pdmkt-product-schedule-tbl th {
	background: #eaf2fb;
	padding: 5px 10px;
	text-align: left;
	font-weight: 600;
	color: #1a4b7a;
}

.pdmkt-product-schedule-tbl td {
	padding: 5px 10px;
	border-bottom: 1px solid #eee;
}

.pdmkt-product-schedule-note {
	font-size: 12px;
	color: #666;
	margin: 0;
}

/* ── Cart: Mode Selector ────────────────────────────────────────── */
.pdmkt-mode-selector {
	margin-top: 10px;
	padding: 10px 14px;
	background: #fff8e1;
	border: 1px solid #f0c040;
	border-radius: 6px;
	font-size: 13px;
}

.pdmkt-mode-selector-title {
	margin: 0 0 8px;
	font-size: 13px;
}

.pdmkt-mode-options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pdmkt-mode-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid #e0d0a0;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.pdmkt-mode-label:hover {
	border-color: #f0ad4e;
	background: #fffbf0;
}

.pdmkt-mode-label.pdmkt-mode-selected {
	border-color: #2271b1;
	background: #f0f7ff;
}

.pdmkt-mode-label input[type="radio"] {
	margin-top: 2px;
	flex-shrink: 0;
}

.pdmkt-mode-desc {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pdmkt-mode-desc strong {
	font-size: 13px;
	color: #333;
}

.pdmkt-mode-desc small {
	font-size: 11px;
	color: #666;
}

/* ── Cart ──────────────────────────────────────────────────────── */
.pdmkt-cart-price { display: inline-block; line-height: 1.4; }

.pdmkt-cart-plan-note {
	display: block;
	font-size: 12px;
	color: #666;
}

.pdmkt-addon-badge {
	display: block;
	font-size: 11px;
	color: #555;
	font-style: italic;
	margin-top: 2px;
}

/* ── Checkout Preview ──────────────────────────────────────────── */
.pdmkt-checkout-plan-row td { padding-top: 16px !important; }
.pdmkt-checkout-plan-wrap  { padding: 0 !important; }

.pdmkt-plan-preview-checkout {
	background: #f9fafb;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 16px;
}

.pdmkt-preview-title {
	margin: 0 0 12px;
	font-size: 15px;
	color: #333;
}

.pdmkt-catchup-notice {
	background: #fff8e1;
	border-left: 4px solid #f0ad4e;
	padding: 8px 12px;
	margin-bottom: 12px;
	font-size: 13px;
	border-radius: 0 4px 4px 0;
}

.pdmkt-checkout-schedule { width: 100%; margin-bottom: 10px; }

.pdmkt-checkout-schedule th,
.pdmkt-checkout-schedule td { padding: 6px 10px; font-size: 13px; }

.pdmkt-first-installment td { font-weight: 600; background: #f0f7ff; }

.pdmkt-badge-today {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	background: #2271b1;
	color: #fff;
	padding: 1px 6px;
	border-radius: 10px;
	margin-left: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pdmkt-total-row th,
.pdmkt-total-row td { font-weight: 700; font-size: 14px; border-top: 2px solid #ddd; }

.pdmkt-checkout-note {
	font-size: 12px;
	color: #666;
	margin: 8px 0 0;
	font-style: italic;
}

.pdmkt-addons-preview {
	background: #fafafa;
	border: 1px dashed #ccc;
	border-radius: 6px;
	padding: 12px 16px;
}

.pdmkt-addon-list {
	list-style: disc;
	margin: 8px 0 8px 20px;
	padding: 0;
	font-size: 13px;
}

.pdmkt-addon-note { font-size: 12px; color: #666; margin: 0; }

/* ── My Account — Payment Plans ────────────────────────────────── */
.pdmkt-my-plans h2 { margin-bottom: 20px; }

.pdmkt-plan-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 28px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.pdmkt-plan-card-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: #f9fafb;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}

.pdmkt-plan-summary-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.pdmkt-chip {
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.pdmkt-chip-paid    { background: #d4edda; color: #155724; }
.pdmkt-chip-pending { background: #fff3cd; color: #856404; }

/* Progress bar */
.pdmkt-progress-bar-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: #fafafa;
	border-bottom: 1px solid #f0f0f0;
}

.pdmkt-progress-bar {
	flex: 1;
	height: 10px;
	background: #e9ecef;
	border-radius: 5px;
	overflow: hidden;
}

.pdmkt-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #2271b1, #00a0d2);
	border-radius: 5px;
	transition: width 0.4s ease;
}

.pdmkt-progress-label { font-size: 12px; font-weight: 700; color: #555; min-width: 32px; }

/* Installments table */
.pdmkt-schedule-table { width: 100%; font-size: 13px; }
.pdmkt-schedule-table th { background: #f1f3f5; font-weight: 600; }

.pdmkt-schedule-table td,
.pdmkt-schedule-table th { padding: 8px 14px; vertical-align: middle; }

.pdmkt-status-paid td    { color: #888; }
.pdmkt-status-overdue td { background: #fff5f5; }
.pdmkt-due-today td      { background: #fffbec; }

/* Status pills */
.pdmkt-status-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

.pdmkt-status-pill.pdmkt-status-pending   { background: #fff3cd; color: #856404; }
.pdmkt-status-pill.pdmkt-status-paid      { background: #d4edda; color: #155724; }
.pdmkt-status-pill.pdmkt-status-overdue   { background: #f8d7da; color: #721c24; }
.pdmkt-status-pill.pdmkt-status-cancelled { background: #e2e3e5; color: #383d41; }
.pdmkt-status-pill.pdmkt-status-waived    { background: #d6d8ff; color: #383d99; }

.pdmkt-overdue-label {
	font-size: 10px;
	font-weight: 700;
	color: #c0392b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pdmkt-tag {
	display: inline-block;
	font-size: 10px;
	background: #e2e3e5;
	color: #555;
	padding: 1px 5px;
	border-radius: 3px;
}

.pdmkt-btn-pay-installment { white-space: nowrap; }
.pdmkt-btn-pay-installment.pdmkt-loading { opacity: 0.6; pointer-events: none; }
.pdmkt-paid-check { color: #27ae60; font-size: 16px; font-weight: 700; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.pdmkt-plan-card-header { flex-direction: column; align-items: flex-start; }

	.pdmkt-schedule-table th:last-child,
	.pdmkt-schedule-table td:last-child { display: none; }

	.pdmkt-checkout-schedule th:nth-child(3),
	.pdmkt-checkout-schedule td:nth-child(3) { display: none; }
}