/**
 * lolo - PeepSo WooCommerce Order Messages
 * Frontend Styles
 * Now with HivePress Request conversation support!
 *
 * @package LoloPeepSoWooOrderMessages
 * @version 1.1.0
 */

/* ===================================
   Order Message Section
   =================================== */

.lolo-peepso-woo-message-section {
	margin: 30px 0;
	padding: 30px;
	background: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.lolo-peepso-woo-message-section .woocommerce-column__title {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.5em;
	color: #2c3e50;
	border-bottom: 2px solid #F27507;
	padding-bottom: 10px;
}

.lolo-peepso-woo-message-box {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: #fff;
	padding: 25px;
	border-radius: 8px;
	border: 2px solid #F27507;
	transition: all 0.3s ease;
}

.lolo-peepso-woo-message-box:hover {
	box-shadow: 0 6px 12px rgba(242, 117, 7, 0.15);
	transform: translateY(-2px);
}

.lolo-peepso-woo-message-icon {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #F27507 0%, #FFA555 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.lolo-peepso-woo-message-icon .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.lolo-peepso-woo-message-content {
	flex: 1;
}

.lolo-peepso-woo-message-content h3 {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 1.2em;
}

.lolo-peepso-woo-message-content p {
	margin: 0 0 15px 0;
	color: #666;
	line-height: 1.6;
}

.lolo-peepso-woo-message-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px !important;
	background: #F27507 !important;
	cursor: pointer;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(242, 117, 7, 0.3);
}

.lolo-peepso-woo-message-button:hover {
	background: #D96506 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(242, 117, 7, 0.4);
}

.lolo-peepso-woo-message-button .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.lolo-peepso-woo-order-info {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e0e0e0;
}

.lolo-peepso-woo-order-info small {
	color: #888;
	font-size: 0.9em;
}

/* Notice Box */
.lolo-peepso-woo-notice {
	background: #fff3cd;
	border-left: 4px solid #ffb900;
	padding: 15px 20px;
	margin: 20px 0;
	border-radius: 4px;
}

.lolo-peepso-woo-notice p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #856404;
}

.lolo-peepso-woo-notice .dashicons {
	color: #ffb900;
	flex-shrink: 0;
}

/* ===================================
   Conversation Badges
   =================================== */

.lolo-peepso-woo-conversation-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0;
	align-items: center;
}

.lolo-peepso-woo-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: all 0.2s ease;
}

.lolo-peepso-woo-badge .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.lolo-peepso-woo-badge-order {
	background: #F27507;
}

.lolo-peepso-woo-badge-status {
	background: #0073aa;
}

.lolo-peepso-woo-badge-link {
	background: #555;
}

.lolo-peepso-woo-badge-link:hover {
	background: #333;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===================================
   Admin Order List
   =================================== */

.lolo-peepso-woo-admin-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px !important;
	background: #F27507 !important;
	border-color: #F27507 !important;
	color: #fff !important;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.lolo-peepso-woo-admin-button:hover {
	background: #D96506 !important;
	border-color: #D96506 !important;
	transform: scale(1.05);
}

.lolo-peepso-woo-admin-button .dashicons {
	margin: 0;
}

.lolo-peepso-woo-no-conversation {
	display: inline-block;
	opacity: 0.3;
}

/* ===================================
   My Orders List
   =================================== */

.woocommerce-orders-table__cell-order-actions a.peepso_message {
	background: #F27507;
	color: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s ease;
	display: inline-block;
	margin-right: 5px;
}

.woocommerce-orders-table__cell-order-actions a.peepso_message:hover {
	background: #D96506;
	transform: translateY(-1px);
}

/* ===================================
   HivePress Vendor Orders List
   =================================== */

.hp-order__actions .hp-link {
	background: #F27507;
	color: #fff !important;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s ease;
	display: inline-block;
	margin-right: 5px;
}

.hp-order__actions .hp-link:hover {
	background: #D96506;
	transform: translateY(-1px);
	color: #fff !important;
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 768px) {
	.lolo-peepso-woo-message-section {
		padding: 20px;
	}

	.lolo-peepso-woo-message-box {
		flex-direction: column;
		text-align: center;
	}

	.lolo-peepso-woo-message-icon {
		margin: 0 auto;
	}

	.lolo-peepso-woo-message-content h3 {
		font-size: 1.1em;
	}

	.lolo-peepso-woo-message-button {
		width: 100%;
		justify-content: center;
	}

	.lolo-peepso-woo-conversation-badges {
		justify-content: center;
	}
}

/* ===================================
   PeepSo Integration Enhancements
   =================================== */

.ps-chat__messages .lolo-peepso-woo-conversation-badges {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e0e0e0;
}

/* Loading State */
.lolo-peepso-woo-loading {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #666;
	font-style: italic;
}

.lolo-peepso-woo-loading::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid #F27507;
	border-top-color: transparent;
	border-radius: 50%;
	animation: lolo-peepso-woo-spin 0.6s linear infinite;
}

@keyframes lolo-peepso-woo-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Success State */
.lolo-peepso-woo-success {
	color: #46b450;
	font-weight: 600;
}

.lolo-peepso-woo-success::before {
	content: "✓ ";
}

/* Error State */
.lolo-peepso-woo-error {
	color: #dc3232;
	font-weight: 600;
}

.lolo-peepso-woo-error::before {
	content: "✗ ";
}

/* Hide System User */
body.lolo-hide-system-user .ps-js-conversation .ps-avatar[data-user-id*="order-system"],
body.lolo-hide-system-user .pso-messages-list .ps-avatar[data-user-id*="order-system"],
body.lolo-hide-system-user .ps-chat__message[data-author*="order-system"],
body.lolo-hide-system-user .ps-conversation-participant[data-user-id*="order-system"] {
	display: none !important;
}

/* Hide system user links by href */
body.lolo-hide-system-user a[href*="order-system-"] {
	display: none !important;
}

/* Visibility for hidden elements */
body.lolo-hide-system-user .pso-messages-participant__name a[href*="order-system-"],
body.lolo-hide-system-user .ps-conversation__title a[href*="order-system-"] {
	display: none !important;
}

/* ===================================
   HivePress Request Conversations
   =================================== */

/* Request Message Button */
.lolo-request-message-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: linear-gradient(135deg, #3498db 0%, #5dade2 100%);
	color: #fff !important;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.lolo-request-message-button:hover {
	background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
	color: #fff !important;
}

.lolo-request-message-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.lolo-request-message-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Request Conversation Badges */
.lolo-peepso-hp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.2s ease;
	margin: 5px 0;
}

/* Request Badge (Blue) */
.lolo-peepso-hp-badge--request {
	background: linear-gradient(135deg, #3498db 0%, #5dade2 100%);
	color: #fff;
	border: 2px solid #3498db;
}

/* Request→Order Badge (Purple) */
.lolo-peepso-hp-badge--migrated {
	background: linear-gradient(135deg, #9b59b6 0%, #bb8fce 100%);
	color: #fff;
	border: 2px solid #9b59b6;
}

/* Order Badge (Orange - existing) */
.lolo-peepso-woo-badge--order {
	background: linear-gradient(135deg, #F27507 0%, #FFA555 100%);
	color: #fff;
	border: 2px solid #F27507;
}

/* Badge Hover Effects */
.lolo-peepso-hp-badge:hover,
.lolo-peepso-woo-badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Request Meta Box */
.lolo-peepso-hp-meta-box {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
}

.lolo-peepso-hp-meta-box p {
	margin: 10px 0;
}

.lolo-peepso-hp-meta-box strong {
	color: #2c3e50;
	font-weight: 600;
}

/* Hide Request System Users */
body.lolo-hide-system-user .ps-js-conversation .ps-avatar[data-user-id*="request-system-"],
body.lolo-hide-system-user .pso-messages-list .ps-avatar[data-user-id*="request-system-"],
body.lolo-hide-system-user .ps-chat__message[data-author*="request-system-"],
body.lolo-hide-system-user .ps-conversation-participant[data-user-id*="request-system-"] {
	display: none !important;
}

body.lolo-hide-system-user a[href*="request-system-"] {
	display: none !important;
}

body.lolo-hide-system-user .pso-messages-participant__name a[href*="request-system-"],
body.lolo-hide-system-user .ps-conversation__title a[href*="request-system-"] {
	display: none !important;
}

/* Request Conversation Styling in PeepSo */
.ps-js-conversation[data-context="hivepress_request"] {
	border-left: 4px solid #3498db !important;
	background: linear-gradient(to right, rgba(52, 152, 219, 0.05) 0%, transparent 100%);
}

.ps-js-conversation[data-context="hivepress_request_to_order"] {
	border-left: 4px solid #9b59b6 !important;
	background: linear-gradient(to right, rgba(155, 89, 182, 0.05) 0%, transparent 100%);
}

/* Request Conversation Title Icons */
.ps-conversation__title:has(a[title*="Request #"]) {
	position: relative;
}

.ps-conversation__title:has(a[title*="Request #"])::before {
	content: "📋";
	margin-right: 6px;
	font-size: 1.1em;
}

.ps-conversation__title:has(a[title*="Request #"][title*="→"])::before {
	content: "📋➡️🛒";
	margin-right: 6px;
	font-size: 1.1em;
}

/* Mobile Responsiveness for Request Buttons */
@media (max-width: 768px) {
	.lolo-request-message-button {
		width: 100%;
		justify-content: center;
		padding: 14px 20px;
		font-size: 14px;
	}

	.lolo-peepso-hp-badge,
	.lolo-peepso-woo-badge {
		font-size: 11px;
		padding: 5px 10px;
	}
}

/* ===================================
   Offer Block Message Buttons
   =================================== */

/* Message button in offer blocks and request pages */
.lolo-offer-message-button,
.hp-peepso-message-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px !important;
	background-color: #f27507 !important;
	background: #f27507 !important;
	border-color: #f27507 !important;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	transition: all 0.3s ease !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: rgba(242, 117, 7, 0.35) 0px 5px 21px !important;
	margin-top: 8px !important;
}

/* Specific line-height for offer message button */
.lolo-offer-message-button {
	line-height: 1.67 !important;
}

/* Additional styles specifically for hp-peepso-message-button */
.hp-peepso-message-button {
	margin-bottom: 20px !important;
	font-size: 1.125rem !important;
	font-weight: 500 !important;
}

.lolo-offer-message-button:hover,
.hp-peepso-message-button:hover {
	background-color: #d86506 !important;
	background: #d86506 !important;
	border-color: #d86506 !important;
	transform: translateY(-2px) !important;
	box-shadow: rgba(242, 117, 7, 0.5) 0px 8px 24px !important;
	color: #fff !important;
}

.lolo-offer-message-button:active,
.hp-peepso-message-button:active {
	transform: translateY(0) !important;
	box-shadow: rgba(242, 117, 7, 0.35) 0px 3px 12px !important;
}

.lolo-offer-message-button:disabled,
.hp-peepso-message-button:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* Remove margin from Accept offer form */
.hp-form--offer-accept {
	margin-bottom: 0 !important;
}

/* Ensure Accept button has consistent styling */
.hp-form--offer-accept .hp-form__button {
	background-color: #f27507 !important;
	border-color: #f27507 !important;
	color: #fff !important;
	box-shadow: rgba(242, 117, 7, 0.35) 0px 5px 21px !important;
	border-radius: 4px !important;
	padding: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	margin-top: 8px !important;
	transition: all 0.3s ease !important;
}

.hp-form--offer-accept .hp-form__button:hover {
	background-color: #d86506 !important;
	border-color: #d86506 !important;
	transform: translateY(-2px) !important;
	box-shadow: rgba(242, 117, 7, 0.5) 0px 8px 24px !important;
}

/* Ensure buttons stack nicely in offer actions */
.hp-offer__actions--primary {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Dashicons styling in buttons */
.lolo-offer-message-button .dashicons,
.hp-peepso-message-button .dashicons,
.lolo-request-message-button .dashicons,
.hp-form--offer-accept .dashicons,
.lolo-refuse-offer-btn .dashicons {
	color: #fff !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle !important;
	margin-right: 4px !important;
}

/* Make Accept and Refuse icons 20% bigger */
.hp-form--offer-accept .dashicons-yes,
.lolo-refuse-offer-btn .dashicons-no-alt {
	font-size: 19px !important;
	width: 19px !important;
	height: 19px !important;
}

/* Mobile responsiveness for offer buttons */
@media (max-width: 768px) {
	.lolo-offer-message-button,
	.hp-peepso-message-button {
		padding: 10px !important;
		font-size: 14px !important;
	}
}