/* Woo Popup Checkout Pro — front-end styles
 * Minimal, modern, Apple-inspired. Uses CSS custom properties so the
 * admin Design tab can override colors/radius/width without editing CSS.
 */

:root{
	--wpcp-width: 480px;
	--wpcp-radius: 18px;
	--wpcp-bg: #ffffff;
	--wpcp-btn: #1d1d1f;
	--wpcp-overlay: rgba(0,0,0,0.55);
	--wpcp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wpcp-text: #1d1d1f;
	--wpcp-muted: #6e6e73;
	--wpcp-border: #e5e5ea;
	--wpcp-danger: #ff3b30;
	--wpcp-success: #34c759;
}

@media (prefers-color-scheme: dark){
	.wpcp-dark-auto{
		--wpcp-bg: #1c1c1e;
		--wpcp-text: #f5f5f7;
		--wpcp-muted: #a1a1a6;
		--wpcp-border: #38383a;
	}
}
.wpcp-dark-on{
	--wpcp-bg: #1c1c1e;
	--wpcp-text: #f5f5f7;
	--wpcp-muted: #a1a1a6;
	--wpcp-border: #38383a;
}

.wpcp-overlay{
	position: fixed; inset: 0;
	background: var(--wpcp-overlay);
	backdrop-filter: blur(4px);
	opacity: 0; visibility: hidden;
	transition: opacity .25s ease;
	z-index: 100000;
}
.wpcp-overlay.wpcp-visible{ opacity: 1; visibility: visible; }

.wpcp-popup{
	position: fixed;
	top: 50%; left: 50%;
	width: min(var(--wpcp-width, 480px), 92vw);
	max-height: 88vh;
	overflow-y: auto;
	background: var(--wpcp-bg);
	color: var(--wpcp-text);
	font-family: var(--wpcp-font);
	border-radius: var(--wpcp-radius, 18px);
	box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.08);
	z-index: 100001;
	visibility: hidden;
	pointer-events: none;
}
.wpcp-popup.wpcp-glass{
	background: color-mix(in srgb, var(--wpcp-bg) 82%, transparent);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Animations */
.wpcp-anim-zoom{ transform: translate(-50%,-50%) scale(.92); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .22s ease; }
.wpcp-anim-zoom.wpcp-visible{ transform: translate(-50%,-50%) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }

.wpcp-anim-fade{ transform: translate(-50%,-50%); opacity: 0; transition: opacity .25s ease; }
.wpcp-anim-fade.wpcp-visible{ opacity: 1; visibility: visible; pointer-events: auto; }

.wpcp-anim-slide{ top: auto; bottom: -100%; left: 50%; transform: translateX(-50%); transition: bottom .3s cubic-bezier(.2,.9,.3,1); }
.wpcp-anim-slide.wpcp-visible{ bottom: 6vh; visibility: visible; pointer-events: auto; }

@media (max-width: 600px){
	.wpcp-anim-slide{ bottom: -100%; top: auto; border-radius: var(--wpcp-radius,18px) var(--wpcp-radius,18px) 0 0; width: 100vw; max-height: 92vh; }
	.wpcp-anim-slide.wpcp-visible{ bottom: 0; }
	.wpcp-popup{ width: 100vw; max-width: 100vw; }
}

.wpcp-close{
	position: sticky; float: right; top: 12px; right: 12px; margin: 12px 12px -32px auto;
	width: 32px; height: 32px; border-radius: 50%; border: none;
	background: rgba(120,120,128,.16); color: var(--wpcp-text);
	font-size: 20px; line-height: 1; cursor: pointer; z-index: 5;
}
.wpcp-close:hover{ background: rgba(120,120,128,.28); }

.wpcp-progress{ height: 4px; background: var(--wpcp-border); }
.wpcp-progress-bar{ height: 100%; width: 33%; background: var(--wpcp-success); transition: width .3s ease; }

.wpcp-popup-inner{ padding: 28px 24px 24px; }

.wpcp-product-summary{ display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.wpcp-product-image{ width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--wpcp-border); }
.wpcp-product-name{ font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.wpcp-product-price{ font-size: 16px; font-weight: 600; color: var(--wpcp-success); }

.wpcp-order-timer{ background: #fff3cd; color: #8a6d1f; padding: 8px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; text-align: center; font-weight: 600; }

.wpcp-variations{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.wpcp-variation-group{ flex: 1 1 auto; min-width: 120px; }
.wpcp-variation-group label{ display:block; font-size: 12px; color: var(--wpcp-muted); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.wpcp-variation-options{ display: flex; flex-wrap: wrap; gap: 8px; }
.wpcp-variation-chip{
	padding: 7px 14px; border-radius: 999px; border: 1px solid var(--wpcp-border);
	background: transparent; color: var(--wpcp-text); font-size: 13px; cursor: pointer;
	transition: all .15s ease;
}
.wpcp-variation-chip.wpcp-selected{ background: var(--wpcp-btn); color: #fff; border-color: var(--wpcp-btn); }

.wpcp-qty-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.wpcp-qty-row label{ font-weight: 600; font-size: 14px; }
.wpcp-qty-selector{ display: flex; align-items: center; border: 1px solid var(--wpcp-border); border-radius: 10px; overflow: hidden; }
.wpcp-qty-selector button{ width: 34px; height: 34px; border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--wpcp-text); }
.wpcp-qty-selector button:hover{ background: rgba(120,120,128,.12); }
.wpcp-qty-selector input{ width: 42px; text-align: center; border: none; background: transparent; color: var(--wpcp-text); font-size: 15px; -moz-appearance: textfield; }
.wpcp-qty-selector input::-webkit-outer-spin-button, .wpcp-qty-selector input::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }

.wpcp-free-shipping-bar{ margin-bottom: 18px; }
.wpcp-fsb-track{ height: 6px; background: var(--wpcp-border); border-radius: 999px; overflow: hidden; }
.wpcp-fsb-fill{ height: 100%; width: 0%; background: var(--wpcp-success); transition: width .3s ease; }
.wpcp-fsb-text{ font-size: 12px; color: var(--wpcp-muted); margin: 6px 0 0; }

.wpcp-field{ margin-bottom: 14px; }
.wpcp-field label{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.wpcp-field input[type=text], .wpcp-field input[type=tel], .wpcp-field input[type=email],
.wpcp-field textarea, .wpcp-field select{
	width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--wpcp-border);
	background: transparent; color: var(--wpcp-text); font-size: 15px; font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcp-field input:focus, .wpcp-field textarea:focus, .wpcp-field select:focus{
	outline: none; border-color: var(--wpcp-btn); box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.wpcp-field.wpcp-has-error input, .wpcp-field.wpcp-has-error textarea, .wpcp-field.wpcp-has-error select{
	border-color: var(--wpcp-danger);
}
.wpcp-error{ display: block; color: var(--wpcp-danger); font-size: 12px; margin-top: 4px; min-height: 14px; }

.wpcp-coupon-row{ display: flex; gap: 8px; }
.wpcp-coupon-row input{ flex: 1; }
.wpcp-coupon-message{ display: block; font-size: 12px; margin-top: 4px; }
.wpcp-coupon-message.wpcp-success{ color: var(--wpcp-success); }
.wpcp-coupon-message.wpcp-error{ color: var(--wpcp-danger); }

.wpcp-payment-methods{ display: flex; flex-wrap: wrap; gap: 10px; }
.wpcp-payment-chip{
	display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px;
	border: 1px solid var(--wpcp-border); cursor: pointer; font-size: 13px; font-weight: 600;
}
.wpcp-payment-chip.wpcp-selected{ border-color: var(--wpcp-btn); background: rgba(0,0,0,.04); }

.wpcp-order-summary{ background: rgba(120,120,128,.08); border-radius: 12px; padding: 14px; margin: 18px 0; }
.wpcp-summary-row{ display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: var(--wpcp-muted); }
.wpcp-summary-total{ font-weight: 700; font-size: 16px; color: var(--wpcp-text); border-top: 1px solid var(--wpcp-border); margin-top: 6px; padding-top: 10px; }

.wpcp-trust-badges{ display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--wpcp-muted); margin-bottom: 16px; }

.wpcp-form-error{ color: var(--wpcp-danger); font-size: 13px; margin-bottom: 10px; min-height: 0; }
.wpcp-form-error:empty{ display: none; }

.wpcp-btn-primary{
	width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--wpcp-btn); color: #fff;
	font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
	transition: transform .1s ease, opacity .15s ease;
}
.wpcp-btn-primary:hover{ opacity: .92; }
.wpcp-btn-primary:active{ transform: scale(.98); }
.wpcp-btn-primary:disabled{ opacity: .6; cursor: not-allowed; }

.wpcp-btn-secondary{
	padding: 10px 16px; border-radius: 10px; border: 1px solid var(--wpcp-border); background: transparent;
	color: var(--wpcp-text); font-size: 14px; font-weight: 600; cursor: pointer;
}

.wpcp-btn-spinner{
	width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
	border-radius: 50%; animation: wpcp-spin .7s linear infinite;
}
@keyframes wpcp-spin{ to{ transform: rotate(360deg); } }

/* Success screen */
#wpcp-step-success{ text-align: center; padding: 20px 8px; }
.wpcp-success-animation{ margin: 0 auto 16px; width: 84px; }
.wpcp-success-checkmark{ width: 84px; height: 84px; }
.wpcp-success-circle{ stroke: var(--wpcp-success); stroke-width: 3; stroke-dasharray: 166; stroke-dashoffset: 166; animation: wpcp-circle .5s ease forwards; }
.wpcp-success-check{ stroke: var(--wpcp-success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: wpcp-check .3s .4s ease forwards; }
@keyframes wpcp-circle{ to{ stroke-dashoffset: 0; } }
@keyframes wpcp-check{ to{ stroke-dashoffset: 0; } }

.wpcp-success-title{ font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.wpcp-success-order-id{ color: var(--wpcp-muted); margin: 0 0 4px; font-size: 14px; }
.wpcp-success-total{ font-weight: 600; margin: 0 0 20px; }
.wpcp-success-actions{ display: flex; flex-direction: column; gap: 10px; }
.wpcp-btn-whatsapp{
	display: block; padding: 12px; border-radius: 10px; background: #25D366; color: #fff;
	font-weight: 600; text-decoration: none; font-size: 14px;
}

/* Buy Now button (inline with WooCommerce Add to Cart) */
.wpcp-buy-now-btn{
	display: inline-block; margin-left: 10px; padding: 12px 22px; border-radius: 12px;
	background: var(--wpcp-btn); color: #fff; border: none; font-weight: 600; font-size: 14px; cursor: pointer;
}

/* Floating order button */
.wpcp-floating-btn{
	position: fixed; right: 20px; bottom: 20px; z-index: 9999;
	background: var(--wpcp-btn); color: #fff; border: none; border-radius: 999px;
	padding: 14px 20px; font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2);
	cursor: pointer;
}

/* Mobile bottom checkout bar */
.wpcp-mobile-bar{
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
	background: var(--wpcp-bg); border-top: 1px solid var(--wpcp-border);
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.wpcp-mobile-bar-price{ font-weight: 700; font-size: 16px; }
.wpcp-mobile-bar .wpcp-btn-primary{ width: auto; padding: 10px 20px; }
@media (min-width: 783px){ .wpcp-mobile-bar{ display: none !important; } }

/* -------------------------------------------------------------------- */
/* CartFlows Checkout-step auto-open integration                        */
/* -------------------------------------------------------------------- */
/* When "Auto-open popup on CartFlows Checkout step" is enabled, this class
 * is added to <body> on that step so CartFlows' own embedded checkout form
 * is hidden while our popup takes over. NOTE: CartFlows' wrapper markup can
 * vary by theme/version — verify these selectors on your live site and add
 * more if your CartFlows checkout form still shows through. The safest way
 * to find the right selector: inspect the page, find the outermost wrapper
 * around the checkout fields, and add its class/ID below. */
body.wpcp-hide-native-checkout .woocommerce-checkout,
body.wpcp-hide-native-checkout form.checkout,
body.wpcp-hide-native-checkout .cartflows-checkout-form,
body.wpcp-hide-native-checkout .wcf-checkout-form-inner,
body.wpcp-hide-native-checkout .wcf-embed-checkout-form {
	display: none !important;
}