/**
 * Frontend styles for UWC Responsible Play.
 * These styles inherit from the theme and add minimal custom styling.
 */

.uwc-rp-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 0;
}

.uwc-rp-container h2,
.uwc-rp-container h3 {
	margin-top: 30px;
	margin-bottom: 15px;
}

.uwc-rp-exclusion-notice {
	padding: 15px;
	margin-bottom: 30px;
	border-left: 4px solid #d63638;
	background-color: #fff;
}

.uwc-rp-limit-section,
.uwc-rp-exclusion-section {
	margin-bottom: 40px;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.uwc-rp-spending-stats {
	margin-bottom: 20px;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 4px;
}

.uwc-rp-spending-stats p {
	margin: 10px 0;
}

.uwc-rp-limit-summary {
	margin-bottom: 15px;
}

.uwc-rp-limit-used {
	font-size: 1.1em;
	margin-bottom: 15px !important;
}

.uwc-rp-amount-used {
	font-size: 1.2em;
	font-weight: bold;
	color: #2271b1;
}

.uwc-rp-separator {
	margin: 0 8px;
	color: #666;
}

.uwc-rp-amount-limit {
	font-size: 1.1em;
	font-weight: 600;
	color: #50575e;
}

.uwc-rp-percentage {
	font-weight: bold;
	margin-left: 8px;
	color: #50575e;
}

.uwc-rp-limit-remaining {
	font-size: 1em;
	margin-top: 10px !important;
}

.uwc-rp-remaining-amount {
	font-size: 1.1em;
	font-weight: bold;
	color: #00a32a;
}

/* Progress Bar */
.uwc-rp-progress-bar-container {
	width: 100%;
	height: 24px;
	background-color: #e0e0e0;
	border-radius: 12px;
	margin: 15px 0;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.uwc-rp-progress-bar {
	height: 100%;
	border-radius: 12px;
	transition: width 0.3s ease, background-color 0.3s ease;
	min-width: 2%;
}

.uwc-rp-progress-bar.uwc-rp-progress-safe {
	background: linear-gradient(to right, #00a32a, #2271b1);
}

.uwc-rp-progress-bar.uwc-rp-progress-warning {
	background: linear-gradient(to right, #ffc107, #ffb300);
}

.uwc-rp-progress-bar.uwc-rp-progress-danger {
	background: linear-gradient(to right, #d63638, #b32d2e);
}

.uwc-rp-warning {
	padding: 10px;
	margin-top: 10px;
	background-color: #fff3cd;
	border-left: 4px solid #ffc107;
	color: #856404;
}

.uwc-rp-error {
	padding: 10px;
	margin-top: 10px;
	background-color: #f8d7da;
	border-left: 4px solid #d63638;
	color: #721c24;
}

.uwc-rp-limit-form,
.uwc-rp-exclusion-form {
	margin-top: 20px;
}

.uwc-rp-limit-form .form-row,
.uwc-rp-exclusion-form .form-row {
	margin-bottom: 20px;
}

.uwc-rp-limit-form label,
.uwc-rp-exclusion-form label {
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
}

.uwc-rp-slider {
	width: 100%;
	margin: 10px 0;
}

.uwc-rp-amount-display {
	display: inline-block;
	margin-left: 15px;
	font-size: 1.2em;
	font-weight: bold;
}

.uwc-rp-exclusion-form label {
	display: block;
	margin: 10px 0;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.uwc-rp-exclusion-form label:hover {
	background-color: #f9f9f9;
}

.uwc-rp-exclusion-form input[type="radio"] {
	margin-right: 10px;
}

.uwc-rp-period-calculations {
	margin: 20px 0;
	padding: 15px;
	background-color: #f0f6fc;
	border-left: 4px solid #2271b1;
	border-radius: 4px;
}

.uwc-rp-calc-note {
	margin: 0 0 10px 0;
	font-weight: 600;
	color: #2271b1;
}

.uwc-rp-calc-list {
	margin: 10px 0;
	padding-left: 20px;
	list-style: none;
}

.uwc-rp-calc-list li {
	margin: 8px 0;
	padding: 5px 0;
}

.uwc-rp-calc-list li strong {
	color: #2271b1;
	font-size: 1.05em;
}

/* Dashboard Summary Widget */
.uwc-rp-dashboard-summary {
	margin: 20px 0;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.uwc-rp-dashboard-summary h3 {
	margin-top: 0;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #2271b1;
}

.uwc-rp-limit-summary-box {
	padding: 10px 0;
}

.uwc-rp-summary-header {
	margin-bottom: 15px;
}

.uwc-rp-summary-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	font-size: 1.1em;
}

.uwc-rp-period-badge {
	display: inline-block;
	padding: 4px 12px;
	background-color: #2271b1;
	color: #fff;
	border-radius: 12px;
	font-size: 0.85em;
	font-weight: normal;
}

.uwc-rp-summary-amounts {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.uwc-rp-summary-used,
.uwc-rp-summary-limit {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.uwc-rp-summary-used .uwc-rp-label,
.uwc-rp-summary-limit .uwc-rp-label {
	font-size: 0.9em;
	color: #666;
}

.uwc-rp-summary-used .uwc-rp-amount {
	font-size: 1.3em;
	font-weight: bold;
	color: #2271b1;
}

.uwc-rp-summary-limit .uwc-rp-amount {
	font-size: 1.2em;
	font-weight: 600;
	color: #50575e;
}

.uwc-rp-summary-separator {
	font-size: 1.5em;
	color: #999;
	font-weight: 300;
}

.uwc-rp-summary-percentage {
	margin-left: auto;
}

.uwc-rp-summary-percentage .uwc-rp-percentage {
	font-size: 1.4em;
	font-weight: bold;
	color: #50575e;
	padding: 5px 12px;
	background-color: #f0f0f1;
	border-radius: 4px;
}

.uwc-rp-summary-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e0e0e0;
	flex-wrap: wrap;
	gap: 10px;
}

.uwc-rp-summary-footer .uwc-rp-remaining {
	margin: 0;
	font-size: 1em;
}

.uwc-rp-summary-footer .uwc-rp-remaining-amount {
	font-size: 1.1em;
	font-weight: bold;
	color: #00a32a;
	margin-left: 5px;
}

.uwc-rp-manage-link {
	margin: 0;
}

.uwc-rp-warning-small,
.uwc-rp-error-small {
	padding: 8px 12px;
	margin-top: 10px;
	border-radius: 4px;
	font-size: 0.9em;
	font-weight: 600;
}

.uwc-rp-warning-small {
	background-color: #fff3cd;
	border-left: 3px solid #ffc107;
	color: #856404;
}

.uwc-rp-error-small {
	background-color: #f8d7da;
	border-left: 3px solid #d63638;
	color: #721c24;
}

.uwc-rp-no-limit-message {
	padding: 20px;
	text-align: center;
	background-color: #f0f6fc;
	border: 1px dashed #2271b1;
	border-radius: 4px;
}

.uwc-rp-no-limit-message p {
	margin: 10px 0;
}

.uwc-rp-no-limit-message .button {
	margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
	.uwc-rp-container {
		padding: 10px;
	}
	
	.uwc-rp-limit-section,
	.uwc-rp-exclusion-section {
		padding: 15px;
	}
	
	.uwc-rp-summary-amounts {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.uwc-rp-summary-separator {
		display: none;
	}
	
	.uwc-rp-summary-percentage {
		margin-left: 0;
		margin-top: 10px;
	}
	
	.uwc-rp-summary-footer {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.uwc-rp-manage-link {
		width: 100%;
	}
	
	.uwc-rp-manage-link .button {
		width: 100%;
		text-align: center;
	}
}