/* ==========================================================================
   PEAGREEN MASTER STYLESHEET
   - License (Standard) = Vibrant Pink
   - Exclusive (Pro)    = Green
   ========================================================================== */

:root {
	/* Core Brand Tokens (HSLA) */
	--peagreen-pink: hsla(336, 77%, 73%, 1);
	--peagreen-pink-dark: hsla(336, 77%, 60%, 1);
	--peagreen-pink-tint: hsla(337, 100%, 96%, 1);

	--peagreen-green: #00C1AA;
	--peagreen-green-dark: #00C1AA;
	--peagreen-green-tint: hsla(160, 38%, 94%, 1);

	--peagreen-on-color: hsla(0, 0%, 100%, 1);
	--peagreen-base-text: hsla(0, 0%, 0%, 1);
}

/* --------------------------------------------------------------------------
   1. ROLE SCOPING (Account Tier Pill in Meta Bar)
   -------------------------------------------------------------------------- */
body.peagreen-role-standard {
	--peagreen-role-color: var(--peagreen-pink);
	--peagreen-role-color-dark: var(--peagreen-pink-dark);
	--peagreen-role-tint: var(--peagreen-pink-tint);
}

body.peagreen-role-pro {
	--peagreen-role-color: var(--peagreen-green);
	--peagreen-role-color-dark: var(--peagreen-green-dark);
	--peagreen-role-tint: var(--peagreen-green-tint);
}

/* --------------------------------------------------------------------------
   2. CONTEXT SCOPING (Page Theme, CTAs, Elementor Globals)
   -------------------------------------------------------------------------- */
/* License Context (Pink) */
:root,
body.peagreen-context-license,
body.tax-license_type.term-license,
body.single-product.term-license {
	--peagreen-context-color: var(--peagreen-pink);
	--peagreen-context-color-dark: var(--peagreen-pink-dark);
	--peagreen-context-tint: var(--peagreen-pink-tint);

	--e-global-color-primary: var(--peagreen-pink);
	--e-global-color-secondary: #54595F;
	--e-global-color-text: #111111;
	--e-global-color-accent: var(--peagreen-pink);
}

.text-license {
	color: var(--peagreen-pink, hsla(336, 77%, 73%, 1) ) !important;
}

.text-exclusive {
		color: var(--peagreen-green, #00C1AA ) !important;
}


/* Exclusive Context (Green) */
body.peagreen-context-exclusive,
body.tax-license_type.term-exclusive,
body.single-product.term-exclusive {
	--peagreen-context-color: var(--peagreen-green);
	--peagreen-context-color-dark: var(--peagreen-green-dark);
	--peagreen-context-tint: var(--peagreen-green-tint);

	--e-global-color-primary: var(--peagreen-green);
	--e-global-color-secondary: #54595F;
	--e-global-color-text: #111111;
	--e-global-color-accent: var(--peagreen-green);
}

/* Elementor Specificity Escalation */
html body.peagreen-context-license,
html body.tax-license_type.term-license,
html body.single-product.term-license {
	--e-global-color-primary: var(--peagreen-pink);
	--e-global-color-accent: var(--peagreen-pink);
}

html body.peagreen-context-exclusive,
html body.tax-license_type.term-exclusive,
html body.single-product.term-exclusive {
	--e-global-color-primary: var(--peagreen-green);
	--e-global-color-accent: var(--peagreen-green);
}

/* --------------------------------------------------------------------------
   3. GLOBAL LAYOUT & BACKGROUNDS
   -------------------------------------------------------------------------- */
body {
	color: var(--peagreen-base-text);
}

/* Page Background alignment across context, tax, and single product pages */
body.peagreen-context-license,
body.peagreen-context-exclusive,
body.tax-license_type.term-license,
body.tax-license_type.term-exclusive,
body.single-product.term-license,
body.single-product.term-exclusive {
	background-color: var(--peagreen-context-tint) !important;
}

/* Specific Elementor section overrides */
.elementor-77207 .elementor-element.elementor-element-63f2c7c {
	background-color: var(--peagreen-context-tint) !important;
}

/* --------------------------------------------------------------------------
   4. LOGO FILTERS & HEADER BADGES
   -------------------------------------------------------------------------- */
body:not(.peagreen-header-contextual) .peagreen-logo {
	filter: none !important;
}

body.tax-license_type.term-license:not(.logged-in) .peagreen-logo {
	filter: invert(63%) sepia(34%) saturate(2256%) hue-rotate(301deg) brightness(101%) contrast(92%) !important;
}

body.peagreen-header-contextual.peagreen-context-license .peagreen-logo,
body.peagreen-header-contextual.tax-license_type.term-license .peagreen-logo {
	filter: invert(63%) sepia(34%) saturate(2256%) hue-rotate(301deg) brightness(101%) contrast(92%) !important;
}

body.peagreen-header-contextual.peagreen-context-license.tax-license_type.term-license .peagreen-logo {
	filter: invert(63%) sepia(34%) saturate(2256%) hue-rotate(301deg) brightness(101%) contrast(92%) !important;
}

body.peagreen-header-contextual.peagreen-context-exclusive .peagreen-logo,
body.peagreen-header-contextual.tax-license_type.term-exclusive .peagreen-logo {
	filter: invert(53%) sepia(34%) saturate(2500%) hue-rotate(135deg) brightness(97%) contrast(101%) !important;
}

/* Header Badge — Context Colors
   Uses ~ (general sibling) not + because Exclusive Badge and License Badge
   are non-adjacent sibling widgets under .peagreen-logo in the Elementor structure. */

.peagreen-logo-area .peagreen-logo ~ .peagreen-license-badge {
	display: none !important;
}

body.peagreen-header-contextual.peagreen-context-license .peagreen-logo ~ .peagreen-license-badge--license {
	display: inline-flex !important;
    padding: 10px 15px !important;
	margin-top: -8px !important;
    background-color: var(--peagreen-pink, hsla(336, 77%, 73%, 1)) !important;
}
body.peagreen-header-contextual.peagreen-context-license .peagreen-logo ~ .peagreen-license-badge--license .elementor-heading-title {
    color: white !important;
}

body.peagreen-header-contextual.peagreen-context-license.tax-license_type.term-license .peagreen-logo ~ .peagreen-license-badge--license {
	display: inline-flex !important;
}

body.tax-license_type.term-license:not(.logged-in) .peagreen-logo ~ .peagreen-license-badge--license {
	display: inline-flex !important;
	padding: 10px 15px !important;
	margin-top: -8px !important;
	background-color: var(--peagreen-pink, hsla(336, 77%, 73%, 1)) !important;
}

body.tax-license_type.term-license:not(.logged-in) .peagreen-logo ~ .peagreen-license-badge--license .elementor-heading-title {
	color: white !important;
}

body.peagreen-header-contextual.peagreen-context-exclusive .peagreen-logo ~ .peagreen-license-badge--exclusive {
	display: inline-flex !important;
    padding: 10px 15px !important;
	margin-top: -8px !important;
    background-color: var(--peagreen-green, #00C1AA) !important;
}
body.peagreen-header-contextual.peagreen-context-exclusive .peagreen-logo ~ .peagreen-license-badge--exclusive .elementor-heading-title {
    color: white !important;
}




/* PEAGREEN LICENSE BADGE -- ORDERS */

/* Target the table cells directly instead of the row */
 .woocommerce_order_items_wrapper table.woocommerce_order_items table.display_meta td,
.woocommerce_order_items_wrapper table.woocommerce_order_items table.display_meta th {
    border-bottom: 1px solid #efefefef !important;
	padding-block:10px !important;
}

.woocommerce_order_items_wrapper table.woocommerce_order_items table.display_meta td {
	border-left: 1px solid #efefefef !important;
	padding-inline-start: 10px !Important;
}


.wc-order-item-name {
	font-size: 16px;
	font-weight: semibold;
}

.wc-order-item-name .peagreen-license-badge {
padding: 2px 12px;
margin-inline-start: 1rem;
	font-size: 12px;
}

.wc-order-item-name .peagreen-license-badge--license {
background-color: var(--peagreen-pink, hsla(336, 77%, 73%, 1)) !important;
color: white !important;
}


.wc-order-item-name .peagreen-license-badge--exclusive {
background-color: var(--peagreen-green, #00C1AA) !important;
color: white !important;
}

.woocommerce_page_wc-orders .wp-list-table th.column-peagreen_order_products,
.woocommerce_page_wc-orders .wp-list-table td.column-peagreen_order_products,
.post-type-shop_order .wp-list-table th.column-peagreen_order_products,
.post-type-shop_order .wp-list-table td.column-peagreen_order_products {
	width: 340px !important;
	min-width: 340px !important;
}

.peagreen-order-products {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: flex-start;
}

.peagreen-order-products__item {
	width: 100px;
	text-decoration: none;
	color: inherit;
	text-align: center;
}

.peagreen-order-products__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin: 0 auto 4px;
	overflow: hidden;
	border-radius: 6px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
}

.peagreen-order-products__thumb img {
	display: block;
	max-width: 100%;
	height: auto;
	width: 100px;
}

.peagreen-order-products__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 11px;
	line-height: 1.2;
	word-break: break-word;
}

/* Same compact treatment for the Cart page and Checkout order-review table,
   where the badge is likewise appended inline to the product name inside a
   narrow .product-name cell (woocommerce_cart_item_name). */
.product-name .peagreen-license-badge {
	padding: 2px 12px;
	margin-inline-start: 1rem;
	font-size: 12px;
}



.peagreen-logo {
	max-width:250px !important;
}


/* --------------------------------------------------------------------------
   5. BUTTONS & CTAs
   -------------------------------------------------------------------------- */
body.peagreen-context-license a.button,
body.peagreen-context-license button.button,
body.peagreen-context-license .woocommerce #respond input#submit,
body.peagreen-context-license .woocommerce a.added_to_cart,
body.peagreen-context-exclusive a.button,
body.peagreen-context-exclusive button.button,
body.peagreen-context-exclusive .woocommerce #respond input#submit,
body.peagreen-context-exclusive .woocommerce a.added_to_cart {
	background-color: var(--peagreen-context-color);
	border-color: var(--peagreen-context-color);
	color: var(--peagreen-on-color);
}

/* --------------------------------------------------------------------------
   6. BADGES & PILLS
   -------------------------------------------------------------------------- */
/* Context Badge (Header / Context indicator) */
.peagreen-context-badge {
	display: inline-flex;
	align-items: center;
	background: var(--peagreen-context-color);
	color: var(--peagreen-on-color);
	border-radius: 15px;
	padding: 10px 15px;
	font-weight: 600;
	font-size: 0.8125em;
	white-space: nowrap;
}

/* Item-level Product Badges (product pages, cart/order item names, and the
   [peagreen_license_badge] / [peagreen_context_license_badge] shortcodes).
   Matches the solid-colour, on-color-text pill design used by the Context
   Badge above and the Account badge (.peagreen-meta-bar__badge) — previously
   this relied on a `:not(.peagreen-logo) + …` sibling combinator that only
   matched when the badge had an immediately preceding sibling element, so it
   rendered completely unstyled anywhere that wasn't true (e.g. the shortcode
   dropped directly into a product page). Targeting the modifier classes
   directly here fixes that and brings the colour/weight in line with the
   other badge types. The Header (§4) and Order-item (below) rules are more
   specific and use !important, so their own padding/spacing tweaks still win
   over this default. */
.peagreen-license-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 15px;
	padding: 10px 15px;
	font-weight: 600;
	font-size: 0.8125em;
	white-space: nowrap;
	margin-left: 6px;
}

.peagreen-license-badge--license {
	background: var(--peagreen-pink);
	color: var(--peagreen-on-color);
}

.peagreen-license-badge--exclusive {
	background: var(--peagreen-green);
	color: var(--peagreen-on-color);
}

.peagreen-license-type-badge {
	margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------
   7. META BAR
   -------------------------------------------------------------------------- */
.peagreen-meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75em;
	font-size: 0.8125em;
	background: var(--peagreen-context-tint) !important;
	padding-block: 1.6rem !important;
}

.peagreen-meta-bar__left,
.peagreen-meta-bar__right {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.peagreen-meta-bar__badge {
	display: inline-flex;
	align-items: center;
	background: var(--peagreen-role-color);
	color: var(--peagreen-on-color);
	border-radius: 999px;
	padding: 0.45rem 1rem !important;
	font-weight: 600;
	font-size: 0.8125em;
	white-space: nowrap;
}

.peagreen-meta-bar__welcome {
	color: #3a3d3c;
}

.peagreen-meta-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: #3a3d3c;
	text-decoration: none;
	white-space: nowrap;
}

.peagreen-meta-bar__link:hover {
	color: var(--peagreen-role-color-dark);
}

.peagreen-meta-bar__link--upgrade,
.peagreen-meta-bar__link--request-timeslot {
	font-weight: 600;
	color: var(--peagreen-role-color-dark);
}

.peagreen-meta-bar__account-icon {
	flex-shrink: 0;
}

.peagreen-meta-bar__link--logout {
	font-size: 0.9em;
	opacity: 0.7;
}

.peagreen-meta-bar__link--logout:hover {
	opacity: 1;
}

.peagreen-meta-bar__status--timeslot {
	font-weight: 600;
	color: var(--peagreen-role-color-dark);
}

.peagreen-meta-bar--pro_no_timeslot .peagreen-meta-bar__status--timeslot {
	color: #d9534f;
}

/* --------------------------------------------------------------------------
   8. FORMS & NOTICES
   -------------------------------------------------------------------------- */
.peagreen-upgrade-form-wrap {
	max-width: 480px;
}

.peagreen-upgrade-form__field,
.peagreen-license-request-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 1em;
}

.peagreen-upgrade-form__field textarea {
	width: 100%;
}

.peagreen-license-request-form__field select,
.peagreen-license-request-form__field input {
	width: 100%;
	max-width: 360px;
}

.peagreen-admin-registration-note {
	background: #f5f8f4;
	border-left: 3px solid #7bab6e;
	padding: 0.75em 1em;
	margin-bottom: 1.5em;
	font-size: 0.9375em;
	line-height: 1.5;
}

.peagreen-notice {
	padding: 0.75em 1em;
	margin-bottom: 1.5em;
	border-left: 3px solid;
	font-size: 0.9375em;
}

.peagreen-notice--success {
	background: #f5f8f4;
	border-left-color: #7bab6e;
}

.peagreen-notice--warning {
	background: #fbf6e8;
	border-left-color: #e0b400;
}

/* Status Badges */
.peagreen-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
}

.peagreen-status--active { background: #d7e8d2; color: #2a5c1f; }
.peagreen-status--warning { background: #fbe8c8; color: #8a5a00; }
.peagreen-status--expired { background: #f5d6d6; color: #8a2020; }
.peagreen-status--none { background: #f0f0f1; color: #50575e; }
.peagreen-status--pending { background: #e0ecfa; color: #1c4c7c; }

/* --------------------------------------------------------------------------
   9. WOOCOMMERCE TABLES & CHECKOUT FLOWS
   -------------------------------------------------------------------------- */
.peagreen-item-detail-row td {
	background: #fafbfa;
	border-top: none;
	padding: 0.75em 1.5em 1.25em;
}

.peagreen-item-detail__heading {
	margin: 0 0 0.5em;
	font-weight: 600;
	font-size: 0.875em;
	color: #3a3d3c;
}

.peagreen-item-detail__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5em 1.5em;
	margin: 0;
}

.peagreen-item-detail__row {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.peagreen-item-detail__row dt {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #767b79;
}

.peagreen-item-detail__row dd {
	margin: 0;
	font-size: 0.9375em;
	color: #1e1f1e;
}

.woocommerce-checkout-review-order-table .product-thumbnail,
.woocommerce-table--order-details .product-thumbnail {
	width: 64px;
}

.woocommerce-checkout-review-order-table .product-thumbnail img,
.woocommerce-table--order-details .product-thumbnail img {
	width: 64px;
	height: auto;
	border-radius: 4px;
}

.woocommerce-checkout-review-order-table .product-quantity,
.woocommerce-table--order-details .product-quantity {
	text-align: center;
	white-space: nowrap;
}

body.woocommerce-order-received .woocommerce-order {
	padding: 0 24px;
}