/* WooCommerce Customer Ticketing – Frontend shortcodes & My Account */

/* ----- My Account navigation: Support Tickets tab icon ----- */
.woocommerce-MyAccount-navigation-link--support-tickets a:before,
.woo-account .woocommerce-MyAccount-navigation-link--support-tickets a:before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ----- [wc_ticket_form] shortcode ----- */
.wcticket-form-wrap {
	max-width: 580px;
	margin: 0 auto 2em;
	font-size: 1em;
}

.wcticket-form-title {
	margin: 0 0 0.75em;
	font-size: 1.5em;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.3;
}

.wcticket-form-wrap .wcticket-notice-success {
	padding: 14px 18px;
	margin-bottom: 1.5em;
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-left: 4px solid #28a745;
	border-radius: 4px;
	color: #155724;
	font-size: 0.95em;
}

.wcticket-form {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	padding: 1.75em 1.5em;
}

.wcticket-form .wcticket-field {
	margin-bottom: 1.35em;
}

.wcticket-form .wcticket-field:last-of-type {
	margin-bottom: 0;
}

.wcticket-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.95em;
	color: #333;
}

.wcticket-form .required {
	color: #b32d2e;
}

.wcticket-form input[type="text"],
.wcticket-form input[type="search"],
.wcticket-form textarea,
.wcticket-form select {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
	line-height: 1.4;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.wcticket-form input[type="text"]:focus,
.wcticket-form input[type="search"]:focus,
.wcticket-form textarea:focus,
.wcticket-form select:focus {
	border-color: #0073aa;
	outline: none;
	box-shadow: 0 0 0 1px #0073aa;
}

.wcticket-form textarea {
	min-height: 140px;
	resize: vertical;
}

.wcticket-form select {
	appearance: auto;
	cursor: pointer;
}

/* Order selector: search on top, results list below – no overlay */
.wcticket-form .wcticket-field-order {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wcticket-form .wcticket-field-order .wcticket-order-search {
	margin-bottom: 0;
	order: 1;
}

.wcticket-form .wcticket-order-results-wrap {
	margin-top: 10px;
	order: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wcticket-form .wcticket-order-select {
	display: block;
	width: 100%;
	min-height: 0;
	height: auto;
	padding: 8px 10px;
	margin: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	font-size: 0.95em;
	line-height: 1.5;
}

/* Use size attribute for visible rows; cap height so it doesn't dominate */
.wcticket-form .wcticket-order-select[multiple] {
	min-height: 100px;
	max-height: 180px;
	overflow-y: auto;
}

.wcticket-form .wcticket-order-select option {
	padding: 6px 8px;
	margin: 2px 0;
	border-radius: 2px;
}

.wcticket-form .wcticket-order-select option:hover {
	background: #f0f6fc;
}

/* Keep selected orders visibly highlighted even when clicked outside the box */
.wcticket-form .wcticket-order-select option:checked {
	background: #0073aa linear-gradient(0deg, #0073aa 0%, #0073aa 100%);
	color: #fff;
}

.wcticket-form .wcticket-order-help {
	margin-top: 6px;
	margin-bottom: 0;
}

.wcticket-form input[type="file"] {
	width: 100%;
	max-width: 100%;
	padding: 8px 0;
	font-size: 0.95em;
	cursor: pointer;
}

.wcticket-form input[type="file"]::file-selector-button {
	padding: 8px 14px;
	margin-right: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f7f7f7;
	font-size: 0.9em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wcticket-form input[type="file"]::file-selector-button:hover {
	background: #eee;
	border-color: #ccc;
}

.wcticket-form small {
	display: block;
	margin-top: 6px;
	color: #666;
	font-size: 0.875em;
}

.wcticket-form .wcticket-submit {
	margin-top: 1.5em;
	margin-bottom: 0;
	padding-top: 1.25em;
	border-top: 1px solid #eee;
}

.wcticket-form .wcticket-submit .button,
.wcticket-form .wcticket-submit button[type="submit"] {
	display: inline-block;
	padding: 12px 24px;
	background: #0073aa;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	text-decoration: none;
	line-height: 1.4;
}

.wcticket-form .wcticket-submit .button:hover,
.wcticket-form .wcticket-submit button[type="submit"]:hover {
	background: #005a87;
	color: #fff;
}

/* ----- [wc_my_tickets] & My Account ----- */
.wcticket-my-tickets .wcticket-table { width: 100%; border-collapse: collapse; }
.wcticket-my-tickets .wcticket-table th,
.wcticket-my-tickets .wcticket-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #ddd; }
.wcticket-status { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.wcticket-status-open { background: #e7f5fe; color: #0073aa; }

/* ----- My Account: Single ticket conversation (chat-style) ----- */
.wcticket-single {
	max-width: 720px;
	margin: 0 auto;
}

.wcticket-back-link {
	margin-bottom: 1em;
}

.wcticket-back-link a {
	color: #0073aa;
	text-decoration: none;
	font-size: 0.95em;
}

.wcticket-back-link a:hover {
	text-decoration: underline;
}

.wcticket-single-header {
	margin-bottom: 1.25em;
	padding-bottom: 1em;
	border-bottom: 1px solid #e5e5e5;
}

.wcticket-single-title {
	margin: 0 0 0.35em;
	font-size: 1.35em;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.35;
}

.wcticket-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	font-size: 0.9em;
	color: #50575e;
}

.wcticket-single-meta .wcticket-orders {
	margin-left: 0;
}

/* Conversation thread */
.wcticket-conversation {
	background: #f6f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 1.25em;
	margin-bottom: 1.5em;
}

.wcticket-conversation .wcticket-message,
.wcticket-conversation .wcticket-reply {
	margin: 0 0 1em;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.wcticket-conversation .wcticket-message:last-child,
.wcticket-conversation .wcticket-reply:last-child {
	margin-bottom: 0;
}

/* Message bubble: You (customer) */
.wcticket-message-you .wcticket-message-body,
.wcticket-reply-customer .wcticket-message-body {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px 12px 4px 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	padding: 12px 16px;
	margin-left: 0;
	margin-right: 10%;
}

.wcticket-message-you .wcticket-message-header,
.wcticket-reply-customer .wcticket-message-header {
	margin-bottom: 6px;
	padding-left: 2px;
}

/* Message bubble: Support (staff) */
.wcticket-reply-staff .wcticket-message-body {
	background: #e7f3ff;
	border: 1px solid #b8d4ee;
	border-radius: 12px 12px 12px 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	padding: 12px 16px;
	margin-left: 10%;
	margin-right: 0;
}

.wcticket-reply-staff .wcticket-message-header {
	margin-bottom: 6px;
	text-align: right;
	padding-right: 2px;
}

.wcticket-reply-staff .wcticket-message-date {
	margin-left: 0.5em;
}

/* Message header (author + date) */
.wcticket-message-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.wcticket-message-author {
	font-size: 0.85em;
	font-weight: 600;
	color: #1d2327;
}

.wcticket-reply-staff .wcticket-message-author {
	color: #0073aa;
}

.wcticket-message-date {
	font-size: 0.8em;
	color: #646970;
	text-decoration: none;
}

.wcticket-message-body {
	font-size: 0.95em;
	line-height: 1.55;
	color: #1d2327;
}

.wcticket-message-body p:first-child {
	margin-top: 0;
}

.wcticket-message-body p:last-child {
	margin-bottom: 0;
}

/* Reply form below conversation */
.wcticket-reply-form {
	margin-top: 0;
	padding: 1.25em;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wcticket-reply-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.95em;
	color: #1d2327;
}

.wcticket-reply-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 12px;
	box-sizing: border-box;
}

.wcticket-reply-form textarea:focus {
	border-color: #0073aa;
	outline: none;
	box-shadow: 0 0 0 1px #0073aa;
}

.wcticket-reply-form .button {
	padding: 10px 20px;
	background: #0073aa;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.95em;
}

.wcticket-reply-form .button:hover {
	background: #005a87;
	color: #fff;
}