/* Easy Product Return - Frontend styles.
 * Covers: recesso flow, request list, request detail, timeline, reply form,
 * guest lookup form. Enqueued only on WooCommerce My Account pages.
 */

/* -------------------------------------------------------------------------
 * Shared container
 * ------------------------------------------------------------------------- */
.epr-container,
.epr-return-form-wrap,
.epr-return-confirm-wrap,
.epr-return-success-wrap,
.epr-customer-request-detail,
.epr-guest-lookup-wrap,
.epr-guest-form-wrap,
.epr-guest-confirm-wrap,
.epr-guest-success-wrap {
	margin: 2em 0;
	color: #333;
	font-size: 0.95em;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Form rows and labels
 * ------------------------------------------------------------------------- */
.epr-return-form-wrap .epr-form-row,
.epr-return-confirm-wrap .epr-form-row {
	margin-bottom: 1em;
}

.epr-return-form-wrap .epr-form-row label,
.epr-return-form-wrap .epr-form-row-checkbox label,
.epr-guest-lookup-wrap .epr-form-row label,
.epr-guest-form-wrap .epr-form-row label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 600;
	color: #333;
}

.epr-return-form-wrap .epr-form-row-readonly input,
.epr-return-form-wrap .epr-form-row-readonly textarea {
	background: #f6f7f7;
	color: #555;
}

.epr-return-form-wrap .epr-reason,
.epr-guest-form-wrap .epr-reason {
	width: 100%;
	max-width: 600px;
}

/* -------------------------------------------------------------------------
 * Form actions (buttons row)
 * ------------------------------------------------------------------------- */
.epr-return-form-wrap .epr-form-actions,
.epr-return-confirm-wrap .epr-form-actions,
.epr-guest-form-wrap .epr-form-actions,
.epr-guest-confirm-wrap .epr-form-actions {
	margin-top: 1.5em;
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * Confirmation summary table
 * ------------------------------------------------------------------------- */
.epr-confirm-summary {
	margin: 1.5em 0;
}

.epr-confirm-summary th {
	text-align: left;
	width: 30%;
	vertical-align: top;
	padding: 0.5em;
	background: #fafafa;
	color: #333;
}

.epr-confirm-summary td {
	padding: 0.5em;
	vertical-align: top;
	color: #333;
}

.epr-confirm-question {
	font-weight: 600;
	margin: 1em 0;
	color: #333;
}

/* -------------------------------------------------------------------------
 * Legal text & privacy notice
 * ------------------------------------------------------------------------- */
.epr-legal-text,
.epr-privacy-notice {
	margin: 1em 0;
	padding: 1em;
	background: #f6f7f7;
	border-left: 3px solid #007cba;
	color: #444;
}

/* -------------------------------------------------------------------------
 * Success notice
 * ------------------------------------------------------------------------- */
.epr-success-text {
	margin: 1em 0;
	color: #155724;
	background: #d4edda;
	border: 1px solid #c3e6cb;
	padding: 1em;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Error notices
 * ------------------------------------------------------------------------- */
.epr-error {
	color: #721c24;
	background: #f8d7da;
	border: 1px solid #f5c6cb;
	padding: 0.75em 1em;
	margin-bottom: 1em;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Request list table (my-account endpoint)
 * ------------------------------------------------------------------------- */
.epr-requests-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2em;
}

.epr-requests-table thead th {
	background: #f6f7f7;
	border-bottom: 2px solid #ddd;
	padding: 0.75em;
	text-align: left;
	font-weight: 600;
	color: #333;
}

.epr-requests-table tbody td {
	padding: 0.75em;
	border-bottom: 1px solid #eee;
	color: #333;
	vertical-align: middle;
}

.epr-requests-table tbody tr:hover {
	background: #fafafa;
}

.epr-requests-table .button {
	display: inline-block;
	padding: 0.35em 0.9em;
	font-size: 0.9em;
}

/* -------------------------------------------------------------------------
 * Request detail page
 * ------------------------------------------------------------------------- */
.epr-customer-request-detail h2 {
	margin-top: 1.5em;
	margin-bottom: 0.75em;
	font-size: 1.4em;
	color: #333;
}

.epr-customer-request-detail h3 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	font-size: 1.15em;
	color: #444;
}

.epr-detail-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

.epr-detail-table th {
	text-align: left;
	width: 22%;
	vertical-align: top;
	padding: 0.6em 0.75em;
	background: #fafafa;
	color: #333;
	font-weight: 600;
}

.epr-detail-table td {
	padding: 0.6em 0.75em;
	vertical-align: top;
	color: #333;
	border-bottom: 1px solid #eee;
}

.epr-detail-table tr:last-child td {
	border-bottom: none;
}

/* -------------------------------------------------------------------------
 * Timeline (customer-visible events)
 * ------------------------------------------------------------------------- */
.epr-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 3px solid #007cba;
}

.epr-timeline .epr-timeline-item {
	padding: 0.5em 0 0.75em 1em;
	margin-left: 0.5em;
	position: relative;
	color: #333;
}

.epr-timeline .epr-timeline-item::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 0.7em;
	width: 12px;
	height: 12px;
	background: #007cba;
	border-radius: 50%;
}

.epr-timeline .epr-timeline-date {
	display: block;
	font-size: 0.82em;
	color: #888;
	margin-bottom: 0.25em;
}

.epr-timeline .epr-timeline-note {
	display: block;
	padding: 0.5em 0.75em;
	background: #f6f7f7;
	border-radius: 3px;
	font-style: italic;
}

.epr-timeline .epr-timeline-message {
	display: block;
	padding: 0.5em 0.75em;
	background: #e8f4fd;
	border-radius: 3px;
}

/* Chat-like scrollable timeline in customer request detail */
#epr-customer-timeline {
	max-height: 350px;
	overflow-y: auto;
	padding-right: 4px;
}

#epr-customer-timeline .epr-timeline-item.epr-msg-admin {
	background: #e8f5e9;
	border-left-color: #2e7d32;
}

#epr-customer-timeline .epr-timeline-item.epr-msg-customer {
	background: #e3f2fd;
	border-left-color: #1565c0;
}

#epr-customer-timeline .epr-timeline-item.epr-msg-status {
	background: #fff8e1;
	border-left-color: #f9a825;
}

/* -------------------------------------------------------------------------
 * Customer reply form
 * ------------------------------------------------------------------------- */
#epr-customer-reply-form {
	margin-top: 16px;
}

#epr-customer-reply-form textarea {
	width: 100%;
	max-width: 600px;
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 2px;
	color: #333;
}

/* -------------------------------------------------------------------------
 * Cancel request form
 * ------------------------------------------------------------------------- */
.epr-cancel-form {
	margin: 16px 0;
	padding: 12px 16px;
	background: #fff8e1;
	border: 1px solid #ffcc80;
	border-radius: 4px;
}

.epr-btn-cancel {
	background: #dc3232 !important;
	border-color: #dc3232 !important;
	color: #fff !important;
}

.epr-btn-cancel:hover {
	background: #a02323 !important;
	border-color: #a02323 !important;
}

/* -------------------------------------------------------------------------
 * Guest lookup form
 * ------------------------------------------------------------------------- */
.epr-guest-lookup-wrap .epr-form-row input {
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 2px;
	color: #333;
	width: 100%;
	max-width: 350px;
}

/* -------------------------------------------------------------------------
 * WooCommerce My Account compatibility fix
 * Ensures readable text in the Hello Elementor + Ally environment.
 * Narrow selectors to avoid affecting other parts of the site.
 * ------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content { color: #333; }
body.woocommerce-account .woocommerce-MyAccount-navigation { color: #333; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: #333; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: #111; font-weight: 600; }
body.woocommerce-account .woocommerce-MyAccount-orders td,
body.woocommerce-account .woocommerce-MyAccount-orders th { color: #333; }
body.woocommerce-account p,
body.woocommerce-account h2,
body.woocommerce-account h3,
body.woocommerce-account li { color: #333; }

/* -------------------------------------------------------------------------
 * Status badges (admin + customer views)
 * ------------------------------------------------------------------------- */
.epr-status-badge {
	display: inline-block;
	padding: 0.35em 0.75em;
	border-radius: 3px;
	font-weight: 600;
	font-size: 0.92em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.epr-status-new {
	background: #e8ecf1;
	color: #4a5568;
	border: 1px solid #cbd5e0;
}

.epr-status-in-review {
	background: #e3f2fd;
	color: #1565c0;
	border: 1px solid #90caf9;
}

.epr-status-awaiting-customer {
	background: #fff8e1;
	color: #b45309;
	border: 1px solid #ffcc80;
}

.epr-status-accepted {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

.epr-status-rejected {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef9a9a;
}

.epr-status-closed {
	background: #f5f5f5;
	color: #616161;
	border: 1px solid #e0e0e0;
}

/* -------------------------------------------------------------------------
 * Admin action buttons
 * ------------------------------------------------------------------------- */
.epr-admin-actions .epr-action-buttons {
	margin: 0.5em 0 1em 0;
}

.epr-admin-actions .epr-action-buttons .button {
	margin-bottom: 0.5em;
	margin-right: 0.5em;
}

.epr-status-explanation {
	margin: 0.25em 0 0.75em 0;
	color: #555;
	font-size: 0.93em;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Admin timeline cards
 * ------------------------------------------------------------------------- */
.epr-timeline-item .epr-internal-note {
	display: block;
	padding: 0.5em 0.75em;
	background: #fff8e1;
	border-left: 3px solid #ffb300;
	border-radius: 2px;
	color: #5d4037;
	font-style: italic;
}

.epr-timeline-item .epr-message {
	display: block;
	padding: 0.5em 0.75em;
	background: #e8f4fd;
	border-left: 3px solid #1565c0;
	border-radius: 2px;
	color: #333;
}

.epr-timeline-item .epr-status-change {
	display: block;
	font-size: 0.88em;
	color: #666;
	margin-top: 0.25em;
}