/**
 * GPL Competitor Checker frontend styles.
 * Plugin-specific layout; controls use GPL Child, Motta and WCPT components.
 *
 * @see https://motta.uix.store/elements/
 */

.gcc-project-badge {
	display: inline-flex;
	align-items: center;
	max-width: 14rem;
	min-width: 0;
	padding: 0.2em 0.55em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	vertical-align: middle;
}

/*
 * The actual truncating element. text-overflow: ellipsis does not reliably
 * clip text placed directly inside a flex container (the badge itself needs
 * to stay inline-flex for vertical centering) — it needs its own
 * block-level box to truncate correctly.
 */
.gcc-project-badge__text {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gcc-project-badge--deleted {
	opacity: 0.75;
}

/*
 * A small status indicator next to a badge: dot + plain text, no filled
 * pill, just a neutral color. Markup is `gcc-archived-tag gpl-tag` (the
 * theme's own .gpl-tag pill component) — combining both classes in one
 * selector (specificity 0,2,0) reliably beats the theme's bare `.gpl-tag`
 * rule (0,1,0) without needing !important.
 */
.gcc-archived-tag.gpl-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: 0.4rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #667085;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: lowercase;
	vertical-align: middle;
}

.gcc-archived-tag::before {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
}

.gcc-project-row--deleted {
	opacity: 0.85;
}

.gcc-project-badges {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	vertical-align: middle;
	max-width: 100%;
}

.gcc-project-badges__more {
	position: relative;
	display: inline-block;
}


.gcc-project-badges__tooltip {
	display: none;
	position: absolute;
	z-index: 99999;
	top: calc(100% + 6px);
	left: 0;
	min-width: 200px;
	max-width: min(320px, 80vw);
	max-height: 220px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.65rem 0.75rem;
	background: var(--wss-content-bg-color, #fff);
	border: 1px solid var(--wss-border-color, #dadfe3);
	border-radius: var(--mt-border__radius, 2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
	text-align: left;
	-webkit-overflow-scrolling: touch;
}

.gcc-project-badges__more:hover .gcc-project-badges__tooltip,
.gcc-project-badges__more:focus-within .gcc-project-badges__tooltip,
.gcc-project-badges__more.is-open .gcc-project-badges__tooltip {
	display: block;
}

.gcc-project-badges__tooltip-list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.gcc-project-badges__tooltip-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}

.gcc-project-badges__tooltip-domain {
	font-size: 0.75rem;
	color: #98a2b3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 12rem;
}

/*
 * Gap above the Projects heading. .m-btm-20 in the child theme is
 * margin-bottom: 20px at specificity 0,1,0 and does not use !important.
 */
.gcc-projects-notices:not(:empty) {
	margin-bottom: 1.25rem;
}

.gcc-projects-notices .motta-alert {
	margin: 0;
}

/* Use the same Font Awesome Free Solid icon library as the child theme. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--projects a::before {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
	font-weight: 900;
	content: "\f07b";
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	background: none;
}

.gcc-projects-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.gcc-projects-header h2 {
	margin: 0;
}

.gcc-projects-toolbar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.gcc-projects-search-box {
	flex: 1 1 auto;
	min-width: 180px;
	margin-bottom: 0;
}

.gcc-projects-search-box .wss-search-input-wrap {
	flex: 1;
	width: 100%;
}

.gcc-projects-search-box form {
	width: 100%;
}

.gcc-projects-page .status-filter {
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.gcc-projects-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.gcc-projects-page .status-filter {
		order: -1;
	}
}

/*
 * Motta's button reset is min-width: 160px. The child theme positions this
 * control but does not set min-width, so the label overflows the input.
 * Loaded only with this plugin's stylesheet.
 */
.woo-service-search-box .wss-search-clear-btn {
	min-width: 0;
	width: auto;
}

.gcc-projects-search-box .wss-search-clear-btn {
	inset-inline-end: 16px;
}

/*
 * "Project / domain" column: plain bold name + muted domain underneath —
 * no colored badge here (see gcc_render_project_list_cell()'s docblock).
 * #98a2b3 matches the muted domain color already used elsewhere in this
 * file (e.g. .gcc-order-project-cell__option-domain), kept consistent
 * rather than picking a new gray.
 */
.gcc-project-list-name-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 16px;
}

/*
 * Sized/rounded like the theme's own checkbox (gpl/style.css:1148,
 * `input[type="checkbox"]::before { width: 20px; height: 20px;
 * border-radius: 2px; }`), reused here instead of an arbitrary size.
 */
.gcc-project-list-swatch {
	display: inline-block;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border: 1px solid var(--wss-border-color, #d0d5dd);
	border-radius: 50%;
}

/*
 * Explicit color needed here: inside a bare <button> (the dropdown option in
 * .gcc-order-project-cell__option-badge below), the theme's generic
 * `button,...,.button { color: var(--mt-color__primary--light) }` reset
 * (gpl/style.css:794) is the only rule that sets `color` at all — our own
 * button reset only touches background — so the name rendered white and was
 * invisible against the popover's white background. #1d2128 is the theme's
 * own heading/dark-text color (gpl/style.css:549 etc.), reused here rather
 * than a new one, and it's harmless everywhere else this class is used
 * (Projects list, /service-orders, cart, /sites) since those contexts
 * already inherit a dark color anyway.
 */
.gcc-project-list-name {
	display: block;
	color: var(--mt-color__heading, #1d2128);
	font-weight: 600;
}

.gcc-project-list-name--deleted {
	opacity: 0.55;
}

.gcc-project-list-domain {
	display: block;
	font-size: 0.85em;
	color: #98a2b3;
}

.gcc-project-orders-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	text-decoration: underline;
}

.gcc-project-orders-link__icon {
	flex: 0 0 auto;
}

.gcc-project-orders-empty {
	color: #98a2b3;
}

/* Hidden by the Archive/Restore AJAX handlers when a row's new status no
 * longer matches the currently-viewed tab (Active vs. Archived) — kept in
 * the DOM rather than removed, so the archive toast's "Undo" action can
 * still restore it in place without a re-fetch. */
.gcc-project-row--hidden {
	display: none;
}

/*
 * Actions column: same flex + gap convention as .gcc-modal-actions, so
 * spacing between Edit/Archive (or Restore) is consistent with the rest
 * of the plugin instead of relying on inline-element whitespace.
 */
.gcc-project-actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

@media screen and (min-width: 48em) {
	.gcc-projects-table {
		width: 100%;
		table-layout: fixed;
	}

	.gcc-projects-table .gcc-projects-col-project {
		width: 38%;
	}

	.gcc-projects-table .gcc-projects-col-orders {
		width: 13%;
		text-align: center;
	}

	.gcc-projects-table .gcc-projects-col-created {
		width: 22%;
		white-space: nowrap;
	}

	.gcc-projects-table .gcc-projects-col-manage {
		width: 27%;
	}
}

.gcc-projects-table .gcc-project-list-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gcc-projects-table .gcc-project-list-domain {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gcc-projects-table .gcc-project-actions-row {
	flex-wrap: nowrap;
}

.gcc-projects-table .gcc-project-actions-row .motta-button {
	min-width: 0;
	white-space: nowrap;
}

@media screen and (max-width: 47.999em) {
	.gcc-projects-table .gcc-projects-col-orders {
		text-align: right;
	}

	.gcc-projects-table .gcc-project-list-name-row,
	.gcc-projects-table .gcc-project-list-domain {
		width: calc(100% - 9rem);
		margin-left: auto;
	}

	.gcc-projects-table .gcc-project-list-name-row,
	.gcc-projects-table .gcc-project-actions-row {
		justify-content: flex-end;
	}

	.gcc-projects-table .gcc-project-actions-row {
		flex-wrap: wrap;
	}
}

/*
 * "Undo" action inside the archive success toast. A plain underlined text
 * button, not a full .motta-button, since it's a secondary action inline
 * within an alert rather than a standalone control.
 */
.gcc-alert-action {
	all: unset;
	margin-left: 0.5rem;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.gcc-alert-action:hover,
.gcc-alert-action:focus-visible {
	opacity: 0.8;
}

.gcc-project-form {
	display: grid;
	gap: 1.5rem;
}

#gcc-project-form .form-row {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	justify-self: stretch;
}

.gcc-project-form label {
	display: block;
	margin-bottom: 0.5rem;
}

.gcc-project-form .input-text {
	width: 100%;
	max-width: 100%;
}

.gcc-project-form textarea.input-text {
	min-height: 8.5rem;
	padding-bottom: 2rem;
	resize: vertical;
}

.gcc-project-form .input-text:user-invalid {
	box-shadow: inset 2px 0 0 var(--notification-error, #f21951);
}

.gcc-field-wrap {
	position: relative;
	display: block;
}

.gcc-project-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.gcc-field-wrap--name .input-text {
	padding-right: 4.5rem;
	padding-left: 4rem;
}

.gcc-field-wrap--domain .input-text {
	padding-right: 3.5rem;
}

.gcc-project-color-picker,
.gcc-domain-icon {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}

.gcc-project-color-picker {
	display: inline-flex;
	align-items: center;
	right: auto;
	left: 1rem;
}

.gcc-project-color-picker input[type="color"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 2rem;
	height: 2rem;
	min-width: 0;
	max-width: 2rem;
	padding: 0.15rem;
	border: 1px solid var(--mt-color__primary--grayer, #ced3f2);
	border-radius: 50%;
	background: var(--mt-input__background-color, #fff);
	box-shadow: none;
	cursor: pointer;
	overflow: hidden;
}

.gcc-project-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.gcc-project-color-picker input[type="color"]::-webkit-color-swatch {
	border: 0;
	border-radius: 50%;
}

.gcc-project-color-picker input[type="color"]::-moz-color-swatch {
	border: 0;
	border-radius: 50%;
}

.gcc-domain-icon {
	display: inline-flex;
	font-size: 1.25rem;
	opacity: 0.2;
	pointer-events: none;
}

.gcc-char-count {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	font-size: 0.875rem;
	opacity: 0.4;
	pointer-events: none;
	white-space: nowrap;
}

.gcc-char-count--textarea {
	top: auto;
	bottom: 0.50rem;
	right: 1rem;
	transform: none;
}

.gcc-char-count--warn {
	opacity: 1;
	color: var(--notification-error, #f21951);
	font-weight: 600;
}

.gcc-order-project-box {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wss-border-color, #eaecf0);
	border-radius: var(--mt-border__radius, 2px);
	background: var(--wss-content-bg-color, #fff);
}

.gcc-order-project-box h2 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
}

.gcc-order-project-current {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
}

.gcc-order-project-box__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.gcc-order-project-box__row select {
	flex: 1 1 auto;
	max-width: 16rem;
	min-width: 0;
}

/*
 * Service Orders table: inline "Edit project" cell. The panel is a small
 * floating popover, positioned via JS (position: fixed, anchored to the
 * pencil icon's on-screen position) so it tracks correctly through table
 * scroll/overflow containers instead of being clipped or left behind.
 */
.gcc-order-project-cell {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.gcc-order-project-cell__badge-row {
	display: flex;
	align-items: flex-start;
	gap: 0.3rem;
	max-width: 100%;
}

.gcc-order-project-cell__badge-row > .gcc-order-project-cell__badge {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.account-orders-table .gcc-order-project-cell .gcc-project-list-name-row {
	font-size: inherit;
}

.account-orders-table .gcc-order-project-cell .gcc-project-list-name {
	color: inherit;
	font-weight: inherit;
}

.gcc-order-project-cell__panel {
	position: fixed;
	z-index: 100000;
	width: 220px;
	max-width: calc(100vw - 24px);
	background: var(--wss-content-bg-color, #fff);
	border: 1px solid var(--wss-border-color, #eaecf0);
	border-radius: var(--mt-border__radius, 2px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
	padding: 0.35rem;
}

.gcc-order-project-cell__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 14rem;
	overflow-y: auto;
}

.gcc-order-project-cell__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem;
	border: 0;
	border-radius: var(--mt-border__radius, 2px);
	background: transparent;
	box-shadow: none;
	color: var(--mt-color__heading, #1d2128);
	font-size: 0.8125rem;
	text-align: left;
	line-height: 1.35;
	cursor: pointer;
}

.gcc-order-project-cell__option:hover,
.gcc-order-project-cell__option:focus-visible,
.gcc-order-project-cell__option.is-selected {
	background-color: var(--blue-bg);
}

.gcc-order-project-cell__option-badge {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.gcc-order-project-cell__option-badge .gcc-project-list-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gcc-order-project-cell__option-domain {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75rem;
	color: #98a2b3;
	text-align: right;
}

.gcc-order-project-cell__check {
	flex: 0 0 auto;
}

.gcc-order-project-cell__status {
	display: block;
	width: 100%;
	padding: 0 0.5rem;
	font-size: 0.8em;
}

.gcc-order-project-cell__status--error {
	color: var(--notification-error, #f21951);
}

.gcc-modal-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.gcc-modal-actions .motta-button {
	width: 100%;
	max-width: none;
}

.gcc-modal-actions .motta-button--medium {
	height: var(--mt-size__medium, 44px);
}

.gcc-project-modal .motta-modal-popup__wrapper {
	width: calc(100% - 2rem);
	max-width: 600px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	border-radius: var(--mt-border__radius, 2px);
	box-shadow: 0 20px 60px rgba(16, 24, 40, 0.24);
}

.gcc-project-modal .motta-modal-popup__header {
	position: relative;
	justify-content: flex-start;
	gap: 1.25rem;
	padding: 1.25rem 4.5rem 1.25rem 1.75rem;
	border-bottom: 1px solid var(--mt-color__primary--gray, #e6e9f9);
}

.gcc-project-modal__header-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: calc(var(--mt-border__radius, 2px) * 2);
	background-color: color-mix(in srgb, var(--gpl-orange, #ea580c) 10%, transparent);
	color: var(--gpl-orange, #ea580c);
	font-size: 1.5rem;
}

.gcc-project-modal__heading {
	min-width: 0;
}

.gcc-project-modal .motta-modal-popup__header .motta-modal-popup__title {
	margin: 0;
	color: var(--mt-color__heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
}

.gcc-project-modal__subtitle {
	margin: 0.35rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.gcc-project-modal .motta-modal-popup__inner {
	padding: 1.5rem 1.75rem;
}

.gcc-project-modal button.modal__button-close,
.gcc-project-modal button.modal__button-close:hover,
.gcc-project-modal button.modal__button-close:focus,
.gcc-project-modal button.modal__button-close:active {
	width: auto;
	height: auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	line-height: 1;
}

.gcc-project-modal button.modal__button-close {
	top: 50%;
	right: 1.75rem;
	transform: translateY(-50%);
}

.gcc-project-modal button.modal__button-close:hover,
.gcc-project-modal button.modal__button-close:focus-visible {
	color: var(--mt-color__heading);
}

.gcc-modal-status {
	min-height: 0;
}

.gcc-modal-status:not(:empty) {
	margin-bottom: 1rem;
}

@media (max-width: 767px) {
	.gcc-project-modal .motta-modal-popup__header {
		gap: 1rem;
		padding: 1rem 3.75rem 1rem 1rem;
	}

	.gcc-project-modal__header-icon {
		width: 3rem;
		height: 3rem;
	}

	.gcc-project-modal .motta-modal-popup__header .motta-modal-popup__title {
		font-size: 1.25rem;
	}

	.gcc-project-modal__subtitle {
		font-size: 0.8125rem;
	}

	.gcc-project-modal .motta-modal-popup__inner {
		padding: 1.25rem 1rem;
	}

	.gcc-project-modal button.modal__button-close {
		right: 1rem;
	}

	.gcc-project-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 540px) {
	.gcc-modal-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Cart page: project sits in `.product-details` as a variation row above
 * Website / Order Type / Article Niche. "Name (domain)" plus the pencil
 * share that row. Motta styles `table.shop_table dl.variation`.
 *
 * Called from includes/class-gcc-assets.php wp_enqueue_style( 'gcc-frontend' )
 * when is_cart() is true. This is the existing stylesheet, not a new file.
 */
.woocommerce-cart .product-details > .gcc-cart-project {
	display: contents;
}

.woocommerce-cart .product-details > .gcc-cart-project + dl.variation {
	margin-top: 0;
}

.woocommerce-cart .gcc-cart-project .gcc-project-list-name-row {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	max-width: 100%;
	min-width: 0;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
}

.woocommerce-cart .gcc-cart-project .gcc-project-list-name,
.woocommerce-cart .gcc-cart-project .gcc-cart-project__domain {
	min-width: 0;
	overflow: hidden;
	color: inherit;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.woocommerce-cart .gcc-cart-project dd p {
	display: flex;
	align-items: center;
	margin: 0;
}

.gcc-cart-project .gcc-order-project-cell__toggle.motta-button {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	min-width: 24px;
	padding: 0;
	line-height: 24px;
}

/*
 * Previous cart "Choose project" box. Replaced by the Service Orders cell
 * above. Kept commented so the old layout can be restored without git history.
 *
.gcc-cart-project-choose {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	flex: 0 1 245px;
	min-width: 220px;
	max-width: 100%;
	gap: 0.45rem;
	padding: 0.75rem;
	border: 1px solid var(--wss-border-color, #dadfe3);
	border-radius: var(--mt-border__radius, 2px);
	background: var(--wss-content-bg-color, #fff);
}

.gcc-cart-project-choose__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.gcc-cart-project-choose__label {
	color: var(--mt-color__heading, #1d2128);
	font-size: 0.875rem;
	font-weight: 600;
}

Keep only compact sizing; Motta owns button colors and interaction states.
.gcc-cart-project-choose__add.motta-button {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	min-width: 24px;
	padding: 0;
	line-height: 24px;
}

.gcc-cart-project-choose__row {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
}

.gcc-cart-project-choose__dropdown {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.gcc-cart-project-choose__trigger {
	display: flex;
	align-items: center;
	width: 100%;
	height: 36px;
	gap: 0.4rem;
	padding: 0 0.75rem;
	border: 1px solid var(--wss-border-color, #dadfe3);
	border-radius: var(--mt-border__radius, 2px);
	background: var(--mt-input__background-color, #fff);
	box-shadow: none;
	color: var(--mt-color__heading, #1d2128);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 34px;
	cursor: pointer;
}
.gcc-cart-project-choose__trigger:hover,
.gcc-cart-project-choose__trigger:focus-visible,
.gcc-cart-project-choose__trigger[aria-expanded="true"] {
	border-color: var(--mt-color__heading, #1d2128);
	background: var(--mt-input__background-color, #fff);
	box-shadow: none;
	outline: none;
}
.gcc-cart-project-choose__trigger-swatch,
.gcc-cart-project-choose__option-swatch {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid var(--wss-border-color, #d0d5dd);
}

.gcc-cart-project-choose__trigger-text,
.gcc-cart-project-choose__option-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.gcc-cart-project-choose__trigger-arrow {
	flex: 0 0 auto;
	color: #7c818b;
	font-size: 0.7rem;
	transition: transform 0.2s ease;
}

.gcc-cart-project-choose__trigger[aria-expanded="true"] .gcc-cart-project-choose__trigger-arrow {
	transform: rotate(180deg);
}

.gcc-cart-project-choose__list {
	position: absolute;
	z-index: 100;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	max-height: 14rem;
	overflow-y: auto;
	background: var(--wss-content-bg-color, #fff);
	border: 1px solid var(--wss-border-color, #eaecf0);
	border-radius: var(--mt-border__radius, 2px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}

.gcc-cart-project-choose__option {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem;
	border-radius: var(--mt-border__radius, 2px);
	font-size: 0.8125rem;
	line-height: 1.35;
	cursor: pointer;
}

.gcc-cart-project-choose__option:hover,
.gcc-cart-project-choose__option:focus-visible {
	background: var(--blue-bg, #f7f8fd);
}

.gcc-cart-project-choose__option.is-selected {
	font-weight: 600;
}
*/

/* Keep only compact sizing; Motta owns button colors and interaction states. */
.gcc-project-badges__more-btn.motta-button {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	min-width: 24px;
	padding: 0;
	line-height: 24px;
}

.gcc-order-project-cell__option:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}


/*
.gcc-cart-project-choose__trigger:disabled,
.gcc-cart-project-choose__option[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 782px) {
	.gcc-cart-project-choose {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
	}
}
*/

.gcc-order-project-cell__option--add-new {
	font-weight: 600;
}

/* Separates "Add New Project" from the project list below it. */
.gcc-order-project-cell__menu li:first-child {
	border-bottom: 1px solid var(--wss-border-color, #eaecf0);
	margin-bottom: 0.25rem;
	padding-bottom: 0.25rem;
}
@media (max-width: 640px) {
	.gcc-projects-header {
		flex-direction: column;
		align-items: stretch;
	}

}

/* ==========================================================================
   WCPT compact project panel
   ========================================================================== */

/*
 * Layout only. Typography, fields, buttons, hover/focus states and icon
 * treatment continue to come from the active Motta/WCPT styles.
 */
.gcc-wcpt-empty-state {
	margin-bottom: 12px;
	padding: 14px 16px;
	border: 1px solid var(--wss-border-color, #eaecf0);
	border-radius: var(--wss-border-radius, var(--mt-border__radius, 2px));
	background-color: var(--blue-bg, rgba(55, 91, 215, 0.04));
}

.gcc-wcpt-empty-state__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.gcc-wcpt-empty-state__content {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.gcc-wcpt-empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--gpl-orange, #ea580c) 10%, transparent);
	color: var(--gpl-orange, #ea580c);
	flex: 0 0 40px;
}

.gcc-wcpt-empty-state__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gcc-wcpt-empty-state__copy span {
	opacity: 0.72;
}

.gcc-wcpt-panel {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin-bottom: 12px;
	padding: 10px 12px;
	border: 1px solid var(--wss-border-color, #eaecf0);
	border-radius: var(--wss-border-radius, var(--mt-border__radius, 2px));
	background-color: var(--blue-bg, rgba(55, 91, 215, 0.04));
}

/* ── Two-section body: Project Management (left) | Project Orders (right) ── */
.gcc-wcpt-panel__body {
	display: flex;
	align-items: stretch;
	gap: 0;
}

/* LEFT: project dropdown stacked above Created At + actions */
.gcc-wcpt-panel__mgmt {
	flex: 0 1 34%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	max-width: 360px;
	padding-right: 16px;
}

/* Dropdown + action buttons on one inline row */
.gcc-wcpt-panel__select-row {
	min-width: 0;
}

.gcc-wcpt-panel__select-row-inner {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.gcc-wcpt-panel__created .gcc-wcpt-panel__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	height: auto;
	margin-bottom: 0;
	font-size: 0.8125rem;
	font-weight: 600;
}

.gcc-wcpt-panel__created-value {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #7c818b;
	white-space: nowrap;
}

.gcc-wcpt-panel__created-value i {
	flex: 0 0 auto;
	opacity: 0.65;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	line-height: 1;
}

/* RIGHT: order cards align with the project column. */
.gcc-wcpt-panel__orders-section {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding-left: 16px;
	border-left: 1px solid var(--wss-border-color, #eaecf0);
}

.gcc-wcpt-panel__label {
	display: block;
	height: 16px;
	margin-bottom: 4px;
	font-size: 0.75em;
	line-height: 16px;
	font-weight: 700;
}


.gcc-wcpt-panel__empty {
	opacity: 0.65;
}

.gcc-wcpt-panel__form {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.gcc-wcpt-panel__select-field {
	width: 100%;
	min-width: 0;
	margin: 0;
}

.gcc-wcpt-panel .gcc-wcpt-panel__select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 36px;
	min-height: 36px;
	min-width: 0;
	margin: 0;
	padding: 0 32px 0 12px;
	overflow: hidden;
	font-size: 14px;
	line-height: 36px;
	text-overflow: ellipsis;
	background-color: var(--mt-input__background-color, #fff);
	background-position: right 12px center;
}

.gcc-wcpt-panel .gcc-wcpt-panel__select:focus,
.gcc-wcpt-panel .gcc-wcpt-panel__select:focus-visible {
	outline: none;
}

.gcc-wcpt-panel__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	white-space: nowrap;
}

.gcc-wcpt-panel__add-button.motta-button,
.gcc-wcpt-panel__edit-button.motta-button {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	min-width: 36px;
	padding: 0;
	line-height: 36px;
}

.gcc-wcpt-panel__status-cells {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	flex: 1 1 auto;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 0;
}

a.gcc-wcpt-panel__status-link.card-style-2 .value,
a.gcc-wcpt-panel__status-link.card-style-2 .label {
	display: block;
	margin: 0;
}

a.gcc-wcpt-panel__status-link.card-style-2 .value {
	width: 100%;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

a.gcc-wcpt-panel__status-link.card-style-2 .label {
	width: 100%;
	text-align: center;
}

a.gcc-wcpt-panel__status-link.card-style-2 {
	gap: 4px;
	justify-content: center;
	height: auto;
	min-width: 0;
	min-height: 64px;
	margin: 0;
	padding: 8px;
	color: var(--mt-color__heading, #1d2128);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

a.gcc-wcpt-panel__status-link.card-style-2:hover,
a.gcc-wcpt-panel__status-link.card-style-2:focus {
	border-color: var(--mt-color__primary--grayer, #ced3f2);
	background: var(--mt-color__primary--gray, #e6e9f9);
	color: var(--mt-color__heading, #1d2128);
	text-decoration: none;
}

a.gcc-wcpt-panel__status-link.card-style-2:active {
	background: var(--mt-color__primary--grayer, #ced3f2);
	transform: translateY(1px);
}

/* Project-scoped active WCPT filters. WCPT still owns each chip's behavior. */
.gcc-wcpt-active-filters {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 42px;
	margin-bottom: 8px;
	padding: 5px 10px;
	border: 1px solid var(--wss-border-color, #e5e7eb);
	background: #fff;
}

.gcc-wcpt-panel > .gcc-wcpt-active-filters,
.gcc-wcpt-empty-state > .gcc-wcpt-active-filters {
	margin: 10px 0 0;
	padding: 10px 0 0;
	border: 0;
	border-top: 1px solid var(--wss-border-color, #eaecf0);
	background: transparent;
}

.gcc-wcpt-active-filters[hidden] {
	display: none;
}

.gcc-wcpt-active-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 0;
	min-height: 32px;
	font-weight: 600;
	white-space: nowrap;
}

.gcc-wcpt-active-filters__toggle .fa-filter {
	color: var(--orange, #f97248);
}

.gcc-wcpt-active-filters__chevron {
	font-size: 10px;
	transition: transform 0.2s ease;
}

.gcc-wcpt-active-filters__toggle[aria-expanded="false"] .gcc-wcpt-active-filters__chevron {
	transform: rotate(180deg);
}

.gcc-wcpt-active-filters__chips.wcpt-clear-filters-wrapper {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	flex-wrap: nowrap;
	gap: 6px;
	width: auto;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-color: #1d2128 rgba(124, 129, 139, 0.3);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	white-space: nowrap;
}

.gcc-wcpt-active-filters__chips.wcpt-clear-filters-wrapper[hidden] {
	display: none;
}

.gcc-wcpt-active-filters__chip.wcpt-clear-filter,
.gcc-wcpt-active-filters__chip.wcpt-clear-filter.card-style-2 {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 5px 9px;
	border: 1px solid var(--notification-info-bg);
	border-radius: 0.3em;
	background: var(--notification-info-bg);
	box-shadow: none;
	color: #1d2128;
	text-align: left;
	white-space: nowrap;
}

.gcc-wcpt-active-filters__chip.wcpt-clear-filter:hover,
.gcc-wcpt-active-filters__chip.wcpt-clear-filter:active,
.gcc-wcpt-active-filters__chip.wcpt-clear-filter.card-style-2:hover,
.gcc-wcpt-active-filters__chip.wcpt-clear-filter.card-style-2:active {
	background: var(--notification-info-bg);
	border-color: var(--notification-info-bg);
	color: #1d2128;
}

.gcc-wcpt-active-filters__chip.wcpt-clear-filter svg {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin: 0 3px 0 0;
}

.gcc-wcpt-active-filters__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
	min-height: 32px;
	margin-left: auto;
	white-space: nowrap;
}

.gcc-wcpt-active-filters__status:empty {
	display: none;
}

.gcc-wcpt-active-filters__status {
	flex: 1 0 100%;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: right;
	white-space: normal;
}

.gcc-wcpt-active-filters__status.is-success {
	color: #13bc96;
}

.gcc-wcpt-active-filters__status.is-error {
	color: #f21951;
}

.gcc-wcpt-active-filters__actions > .wcpt-clear-all-filters {
	font-size: 0;
	text-decoration: none;
}

.gcc-wcpt-active-filters__actions > .wcpt-clear-all-filters .wcpt-icon {
	font-size: 16px;
}

.gcc-wcpt-active-filters__actions > .wcpt-clear-all-filters .wcpt-icon > svg {
	width: 16px;
	height: 16px;
}

/* One keyboard focus treatment for every plugin-owned interactive surface. */
.gcc-projects-page .motta-button:focus-visible,
.gcc-project-modal button:focus-visible,
.gcc-project-color-picker input[type="color"]:focus-visible,
.gcc-alert-action:focus-visible,
.gcc-order-project-box .motta-button:focus-visible,
.gcc-order-project-cell__toggle:focus-visible,
.gcc-order-project-cell__option:focus-visible,
.gcc-project-badges__more-btn:focus-visible,
.gcc-wcpt-active-filters__toggle:focus-visible,
.gcc-wcpt-active-filters__chip:focus-visible,
.gcc-wcpt-active-filters__actions > :focus-visible,
.gcc-wcpt-panel__status-link:focus-visible,
.gcc-wcpt-panel__actions > :focus-visible,
.gcc-wcpt-empty-state .gcc-open-modal:focus-visible {
	outline: 2px solid var(--mt-color__primary, #3449ca);
	outline-offset: 2px;
}

.wcpt .wcpt-clear-filters-wrapper.gcc-wcpt-native-clear-wrapper--relocated {
	display: none;
}

@media (max-width: 1100px) {
	.gcc-wcpt-active-filters {
		flex-wrap: wrap;
	}

	.gcc-wcpt-active-filters__chips.wcpt-clear-filters-wrapper {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
	}
}

@media (max-width: 900px) {
	/* Stack: mgmt full-width on top, orders below */
	.gcc-wcpt-panel__body {
		flex-direction: column;
		gap: 10px;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.gcc-wcpt-panel__mgmt {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
		padding-right: 0;
	}

	.gcc-wcpt-panel__orders-section {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding-left: 0;
		border-left: 0;
		padding-top: 10px;
		border-top: 1px solid var(--wss-border-color, #eaecf0);
	}
}

@media (max-width: 767px) {
	.gcc-wcpt-empty-state__row {
		align-items: stretch;
		flex-direction: column;
	}

	.gcc-wcpt-empty-state .motta-button {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.gcc-wcpt-panel,
	.gcc-wcpt-empty-state {
		width: 100%;
		max-width: calc(100vw - 40px);
	}

	.gcc-wcpt-panel__status-cells {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.gcc-wcpt-panel {
		padding: 10px;
	}

	.gcc-wcpt-panel .gcc-wcpt-panel__select,
	.gcc-wcpt-panel__add-button.motta-button,
	.gcc-wcpt-panel__edit-button.motta-button {
		height: 44px;
		min-height: 44px;
		line-height: 44px;
	}

	.gcc-wcpt-panel__add-button.motta-button,
	.gcc-wcpt-panel__edit-button.motta-button {
		flex-basis: 44px;
		width: 44px;
		min-width: 44px;
	}

	.gcc-wcpt-active-filters__toggle {
		flex: 0 1 auto;
		white-space: normal;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.gcc-wcpt-panel__status-link.card-style-2 {
		transition: none;
	}
}