/**
 * Probo Connect Styles
 *
 * @package Probo_Connect
 * @version 0.4.0
 */

/* ========================================================================
   CSS VARIABLES — WordPress theme integration
   ======================================================================== */

:root {
	--connect-color-primary: var(--wp--preset--color--contrast, #000000);
	--connect-color-primary-hover: var(--wp--preset--color--contrast-2, #000000);
	--connect-color-primary-active: var(--connect-color-primary);

	--connect-color-bg-primary: var(--wp--preset--color--base-2, var(--wp--preset--color--base, #ffffff));
	--connect-color-bg-secondary: var(--wp--preset--color--base, #fafafa);
	--connect-box-shadow: var(--wp--preset--shadow--natural);

	--connect-color-text-primary: var(--wp--preset--color--contrast, #000000);
	--connect-color-text-secondary: var(--wp--preset--color--contrast-2, #666666);
	--connect-color-text-accent-1: var(--wp--preset--color--base, #fafafa);

	--connect-border: 1px solid color-mix(in srgb, var(--connect-color-text-primary) 10%, transparent);
	--connect-radius: 8px;

	--connect-button-bg : var(--connect-color-primary);
	--connect-button-color : var(--connect-color-text-accent-1);

	--connect-color-link: var(--wp--preset--color--primary, var(--connect-color-primary));
	--connect-color-link-hover: var(--connect-color-primary-hover);
	--connect-color-success: var(--wp--preset--color--vivid-green-cyan, #00d084);
	--connect-color-pending: var(--wp--preset--color--vivid-cyan-blue, #0693e3);
	--connect-color-warning: var(--wp--preset--color--luminous-vivid-amber, #fcb900);
	--connect-color-error: var(--wp--preset--color--vivid-red, #cf2e2e);

	--connect-font-small:var(--wp--preset--font-size--small, 0.9rem);
	--connect-font-medium: var(--wp--preset--font-size--medium, 1.05rem);
	--connect-font-large: var(--wp--preset--font-size--large ,1,15rem);

	--connect-font-family-primary: var(--wp--preset--font-family--system-sans-serif);
	--connect-font-family-secondary: var(--wp--preset--font-family--system-sans-serif);

}

/* ========================================================================
   WEB COMPONENT — connect-product-configurator
   ======================================================================== */

connect-product-configurator::part(configurator) {
	/* General */
	--color-primary: var(--connect-color-primary);
	--color-primary-hover: var(--connect-color-primary-hover);
	--color-primary-pressed: var(--connect-color-primary-active);
	--color-blue-500: var(--connect-color-success);
	--font-color: var(--connect-color-text-primary);
	--font-family: var(--connect-font-family-primary);
	color: var(--font-color);
	font-family: var(--font-family);

	/* Step */
	--step-background-color: var(--connect-color-bg-primary);
	--step-shadow: none;
	--step-border-radius: var(--connect-radius);
	--step-title-color: var(--connect-color-text-primary);
	--step-subtitle-color: var(--connect-color-text-secondary);

	/* Option */
	--option-background-color: var(--connect-color-bg-primary);
	--option-border-radius: var(--connect-radius);
	--option-title-color: var(--connect-color-text-primary);
	--option-description-color: var(--connect-color-text-secondary);
	--option-outline-color: var(--connect-color-primary);
	--option-outline: var(--connect-border);

	/* Delivery */
	--delivery-option-day: var(--connect-color-text-primary);
	--delivery-option-date: var(--connect-color-primary);
	--delivery-option-cost: var(--connect-color-success);
	--delivery-option-no-cost: var(--connect-color-text-secondary);
}

connect-product-configurator::part(step) {
	background-color: var(--step-background-color) !important;
	box-shadow: var(--step-shadow) !important;
	border-radius: var(--step-border-radius) !important;
	border: var(--connect-border);
}

connect-product-configurator:hover::part(option) {
	border-color: var(--color-blue-500);
}

connect-product-configurator:hover::part(option).selected {
	outline-color: var(--color-blue-500);
}

connect-product-configurator::part(step-title) {
	color: var(--step-title-color);
}

connect-product-configurator::part(step-subtitle) {
	color: var(--step-subtitle-color) !important;
}

connect-product-configurator::part(state-indicator-icon) {
	color: var(--step-toggle-color) !important;
}

connect-product-configurator::part(option) {
	background-color: var(--option-background-color) !important;
	border-radius: var(--option-border-radius) !important;
	outline: var(--option-outline);
}

connect-product-configurator::part(option-selected) {
	outline-color: var(--option-outline-color) !important;
}

connect-product-configurator::part(option-title) {
	color: var(--option-title-color);
}

connect-product-configurator::part(option-description) {
	color: var(--option-description-color) !important;
}

/* ========================================================================
   WEB COMPONENT — connect-uploader
   Defaults for advanced mode. Basic mode overrides via inline CSS.
   ======================================================================== */

connect-uploader::part(container) {
	--font-family: var(--connect-font-family-primary);
	--font-color: var(--connect-color-text-primary);
	--font-size: var(--connect-font-medium);
	--primary-color: var(--connect-color-primary);
	--bg-color: var(--connect-color-bg-primary);
	--border-radius: var(--connect-radius);
	--box-shadow: none;
	--button-border-radius: var(--connect-radius);
	--button-pending-color: var(--connect-color-primary);
	--button-uploading-color: var(--connect-color-warning);
	--button-completed-color: var(--connect-color-success);
	--button-error-color: var(--connect-color-error);
	--status-color: var(--connect-color-text-secondary);
	font-family: var(--font-family);
}

/* ========================================================================
   WEB COMPONENT — connect-uploader
   Modern button enhancements
   ======================================================================== */

connect-uploader::part(button) {
	all: unset;
	box-sizing: border-box;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;

	background-color: var(--button-pending-color);
	color: var(--font-color);
	border-radius:  var(--button-border-radius);

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.1s ease,
		box-shadow 0.2s ease;
}

connect-uploader::part(button):hover {
	filter: brightness(0.96);
}

connect-uploader::part(button):active {
	transform: scale(0.97);
}

connect-uploader[state="created"]::part(button),
connect-uploader[state="pending"]::part(button) {
	background: var(--button-pending-color);
	color: var(--connect-color-text-accent-1);
}

connect-uploader[state="in_progress"]::part(button),
connect-uploader[state="processing"]::part(button),
connect-uploader[state="uploading"]::part(button) {
	background:var(--button-uploading-color);

}

connect-uploader[state="confirmed"]::part(button),
connect-uploader[state="processed"]::part(button),
connect-uploader[state="completed"]::part(button) {
	background: var(--button-completed-color);
}

connect-uploader[state="processed_with_errors"]::part(button),
connect-uploader[state="error"]::part(button) {
	background:  var(--button-error-color);
	color: var(--connect-color-text-accent-1);
}


/* ========================================================================
   CONFIGURATOR SUMMARY
   ======================================================================== */

.connect-configurator-summary {
	background: var(--connect-color-bg-secondary);
	border-radius: var(--connect-radius);
	margin-top: 24px;
}

.connect-configurator-summary.notready {
	display: none;
}

/* Columns layout */
.connect-configurator-columns {
	display: flex;
	gap: 40px;
}

.connect-configurator-column {
	flex: 1;
}

.connect-configurator-column > h2 {
	font-size: var(--connect-font-large);
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--connect-color-text-primary);
}

/* Product card */
.connect-configurator-card {
	border: var(--connect-border);
	border-radius: var(--connect-radius);
	background: var(--connect-color-bg-primary);
	padding: 24px;
}

.connect-configurator-card > h3 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--connect-color-text-primary);
}

/* Options list */
.connect-options-list {
	margin: 0;
	padding: 0;
}

.connect-options-list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
}

.connect-options-list dt {
	color: var(--connect-color-text-secondary);
	font-weight: 400;
	margin: 0;
}

.connect-options-list dd {
	color: var(--connect-color-text-primary);
	font-weight: 400;
	text-align: right;
	margin: 0;
}

/* File specs link */
#section-connect-configurator-filespecs {
	margin-top: 16px;
}

.connect-filespecs-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: var(--connect-border);
	border-radius: var(--connect-radius);
	padding: 8px 16px;
	font-size: var(--connect-font-medium);
	color: var(--connect-color-text-primary);
	cursor: pointer;
}

.connect-filespecs-link::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat center;
}

.connect-filespecs-link:hover {
	background: var(--connect-color-bg-primary);
}

/* File specs popover */
.connect-filespecs-popover {
	border: var(--connect-border);
	border-radius: var(--connect-radius);
	padding: 24px;
	max-width: 480px;
}

.connect-filespecs-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.connect-filespecs-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

.connect-filespecs-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--connect-color-text-secondary);
}

.connect-filespecs-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}

.connect-filespecs-label {
	color: var(--connect-color-text-secondary);
}

.connect-filespecs-value {
	color: var(--connect-color-text-primary);
	text-align: right;
}

/* Delivery moments */
.connect-delivery-moments {
	border: var(--connect-border);
	border-radius: var(--connect-radius);
	overflow: hidden;
}

.connect-delivery-moment {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--connect-color-bg-primary);
	font-size: var(--connect-font-medium);
	color: var(--connect-color-text-primary);
}

.connect-delivery-moment + .connect-delivery-moment {
	border-top: var(--connect-border);
}

.connect-delivery-moment.is-rush {
	background: var(--connect-color-bg-secondary);
}

.connect-delivery-price {
	color: var(--connect-color-text-secondary);
}

/* Footer — price + button */
.connect-configurator-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32px;
	padding-top: 24px;
	border-top: var(--connect-border);
}

.connect-price-total {
	font-size: var(--connect-font-medium);
	font-weight: 700;
	color: var(--connect-color-text-primary);
}

#connect-addtocart {
	display: inline-block;
	background: var(--connect-color-primary);
	color: var(--connect-color-bg-primary);
	border: none;
	border-radius: var(--connect-radius);
	padding: 14px 32px;
	font-size: var(--connect-font-medium);
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

#connect-addtocart:hover {
	background: var(--connect-color-primary-hover);
}

#connect-addtocart:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ========================================================================
   SHIPPING SELECTOR (checkout)
   ======================================================================== */

.connect-shipping-wrapper {
	background: var(--connect-color-bg-secondary);
	border-radius: var(--connect-radius);
	padding: 24px;
	margin-bottom: 20px;
}

.connect-shipping-wrapper h3 {
	font-size: var(--connect-font-large);
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--connect-color-text-primary);
}

/* Loading */
.connect-shipping-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	color: var(--connect-color-text-secondary);
}

.connect-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--connect-border);
	border-top-color: var(--connect-color-primary);
	border-radius: 50%;
	animation: connect-spin 0.6s linear infinite;
}

@keyframes connect-spin {
	to { transform: rotate(360deg); }
}

/* Error */
.connect-shipping-error {
	padding: 12px 16px;
	background: color-mix(in srgb, var(--connect-color-warning) 10%, transparent);
	border: 1px solid var(--connect-color-warning);
	border-radius: var(--connect-radius);
	color: var(--connect-color-text-primary);
	font-size: 14px;
}

/* Section label (legacy mode) */
.connect-section-label {
	display: block;
	margin-bottom: 12px;
	font-weight: 700;
	color: var(--connect-color-text-primary);
}

/* Date options */
.connect-shipping-dates {
	margin-bottom: 20px;
}


.connect-date-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	background: var(--connect-color-bg-primary);
	cursor: pointer;
	transition: background 0.15s ease;
}

.connect-date-option + .connect-date-option {
	border-top: var(--connect-border);
}

.connect-date-option:hover {
	background: var(--connect-color-bg-secondary);
}

.connect-date-option.selected {
	background: color-mix(in srgb, var(--connect-color-primary) 5%, var(--connect-color-bg-primary));
}

.connect-date-option.is-rush {
	background: var(--connect-color-bg-secondary);
}

.connect-date-option input[type="radio"] {
	margin: 0;
	accent-color: var(--connect-color-primary);
	flex-shrink: 0;
}

.connect-date-content {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.connect-date-text {
	font-weight: 500;
	color: var(--connect-color-text-primary);
}

.connect-date-rush-badge {
	display: inline-block;
	padding: 2px 8px;
	background: color-mix(in srgb, var(--connect-color-warning) 15%, transparent);
	color: var(--connect-color-text-primary);
	font-size: var(--connect-font-small);
	font-weight: 700;
	border-radius: var(--border-radius);
}

/* Shipping methods */
.connect-shipping-methods {
	margin-bottom: 16px;
}

.connect-shipping-methods > label {
	display: block;
	margin-bottom: 12px;
	font-weight: 700;
	color: var(--connect-color-text-primary);
}

.connect-shipping-methods-group {
	margin-bottom: 16px;
}

.connect-shipping-methods-group:last-child {
	margin-bottom: 0;
}

.connect-shipping-methods-group-title {
	font-size: var(--connect-font-medium);
	font-weight: 600;
	color: var(--connect-color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 8px;
}

.connect-shipping-dates-list,
.connect-shipping-methods-list {
	border: var(--connect-border);
	background-color: var(--connect-color-bg-primary);
	overflow: hidden;
}

.connect-method-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 20px;
	background: var(--connect-color-bg-primary);
	cursor: pointer;
	transition: background 0.15s ease;
}

.connect-method-option + .connect-method-option {
	border-top: var(--connect-border);
}

.connect-method-option:hover {
	background: var(--connect-color-bg-secondary);
}

.connect-method-option.selected {
	background: color-mix(in srgb, var(--connect-color-primary) 5%, var(--connect-color-bg-primary));
}

.connect-method-option input[type="radio"] {
	margin: 2px 0 0;
	accent-color: var(--connect-color-primary);
	flex-shrink: 0;
}

.connect-method-content {
	flex: 1;
	min-width: 0;
}

.connect-method-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.connect-method-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.connect-method-name {
	flex: 1;
	font-weight: 500;
	color: var(--connect-color-text-primary);
}

.connect-method-price {
	font-weight: 600;
	color: var(--connect-color-primary);
	white-space: nowrap;
}

.connect-method-description {
	margin-top: 4px;
	font-size: var(--connect-font-small);
	color: var(--connect-color-text-secondary);
	line-height: 1.4;
}

/* Block loading state */
.connect-shipping-block.connect-block_is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 768px) {
	.connect-configurator-summary {
		padding: 24px;
	}

	.connect-configurator-columns {
		flex-direction: column;
		gap: 24px;
	}

	.connect-configurator-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		text-align: center;
	}

	#connect-addtocart {
		width: 100%;
	}

	.connect-shipping-wrapper {
		padding: 16px;
	}

	.connect-method-header {
		flex-wrap: wrap;
	}

	.connect-method-price {
		width: 100%;
		margin-top: 4px;
	}
}