/* AI Productivity Hub interactive button system (aph-*). Loaded on every page. */

/* Sheen on hover for every button */
.btn, .woocommerce a.button, .woocommerce button.button, .aph-tech-hover { position: relative; overflow: hidden; }
.btn::before, .woocommerce a.button::before, .woocommerce button.button::before, .aph-tech-hover::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::before, .woocommerce a.button:hover::before, .woocommerce button.button:hover::before, .aph-tech-hover:hover::before { left: 130%; }

/* Select options and other secondary buttons: small lift and focus glow */
.woocommerce a.button.product_type_variable, .woocommerce a.button.product_type_grouped { transition: transform .2s, box-shadow .2s, background-color .2s; }
.woocommerce a.button.product_type_variable:hover, .woocommerce a.button.product_type_grouped:hover,
.woocommerce a.button.product_type_variable:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(14, 65, 71, .7), 0 0 0 3px rgba(110, 243, 197, .45); }

/* ---------- Animated button: shopping cart for Add to cart, truck for Place order ---------- */
.aph-track-button { --aph-bg: var(--teal); }
.aph-track-button.single_add_to_cart_button, .aph-track-button.alt, .aph-track-button.btn-primary { --aph-bg: var(--signal); }
.aph-track-label { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .3s ease; }
.aph-track-lane { position: absolute; left: 14px; right: 14px; top: 0; bottom: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.aph-track-road { position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; border-radius: 99px; background: currentColor; opacity: .3; }
.aph-track-progress { position: absolute; left: 0; bottom: 8px; height: 4px; width: 0; border-radius: 99px; background: currentColor; }
.aph-track-vehicle { position: absolute; left: 0; bottom: 9px; transform: translateX(0); }
.aph-track-vehicle svg { display: none; }
.aph-track-button:not([data-aph-vehicle="truck"]) .aph-van-cart { display: block; }
.aph-track-button[data-aph-vehicle="truck"] .aph-van-truck { display: block; }
.aph-van { display: block; overflow: visible; color: inherit; }
.aph-van .body { fill: currentColor; }
.aph-van .cut { fill: var(--aph-bg); }
.aph-van .wheel { fill: currentColor; stroke: var(--aph-bg); stroke-width: 1.5; }
.aph-van-cart .line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aph-van-cart .item { fill: currentColor; opacity: .85; }

.aph-track-button.is-running { pointer-events: none; }
.aph-track-button.is-running .aph-track-label { opacity: 0; transform: translateY(6px); }
.aph-track-button.is-running .aph-track-lane { opacity: 1; }
.aph-track-button.is-running .aph-track-progress { width: 100%; transition: width var(--aph-dur, 1.2s) cubic-bezier(.22, .61, .36, 1); }
.aph-track-button.is-running .aph-track-vehicle { transform: translateX(var(--aph-travel, 120px)); transition: transform var(--aph-dur, 1.2s) cubic-bezier(.22, .61, .36, 1); }
.aph-track-button.is-running .aph-van { animation: aph-bump .28s ease-in-out infinite; }
/* Loop mode: the truck keeps driving until the page moves on */
.aph-track-button.is-loop.is-running .aph-track-vehicle { transition: none; animation: aph-drive 1.7s linear infinite; }
.aph-track-button.is-loop.is-running .aph-track-progress { transition: none; animation: aph-pulse 1.2s ease-in-out infinite; }

.aph-track-button.is-success { background: #0B7A55 !important; border-color: #0B7A55 !important; color: #fff !important; }
.aph-track-button.is-success .aph-track-label::before { content: "\2713"; margin-right: .45rem; font-weight: 900; }

/* Hide WooCommerce's own spinner and tick on animated buttons */
.aph-track-button.loading::after, .aph-track-button.added::after { content: none !important; display: none !important; }
.woocommerce .aph-track-button.loading { opacity: 1 !important; padding-right: 1.3rem !important; }

@keyframes aph-bump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes aph-drive { from { transform: translateX(-56px); } to { transform: translateX(var(--aph-travel, 120px)); } }
@keyframes aph-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Hero and call to action: activation line ---------- */
.aph-activate.is-activating::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; z-index: 2;
	background: currentColor; transform-origin: 0 50%; animation: aph-sweep 1s ease-in-out infinite;
}
@keyframes aph-sweep { 0% { transform: scaleX(0); opacity: 1; } 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- Send message ---------- */
.aph-send-button { padding-right: 3.2rem; }
.aph-plane { position: absolute; right: 1.1rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -.625rem; transition: transform .75s cubic-bezier(.5, 0, .2, 1), opacity .75s ease; }
.aph-send-button.is-sending .aph-plane { transform: translate(3.4rem, -1.8rem) scale(.6) rotate(-12deg); opacity: 0; }
.aph-send-button.is-sending { pointer-events: none; }

/* ---------- Header account link and cart pulse ---------- */
.account-link { display: inline-flex; align-items: center; padding: .55rem .9rem; border-radius: 8px; border: 2px solid var(--teal); color: var(--teal); font-weight: 700; text-decoration: none; background: #fff; }
.account-link:hover { background: var(--mint); color: var(--teal); }
.aph-cart-pulse { animation: aph-cart-pulse .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes aph-cart-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.13); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }

/* ---------- Order received: truck goes past, receipt prints, button pops in ---------- */
.aph-receipt { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 1.5rem auto 2rem; max-width: 380px; width: 100%; }
.aph-dispatch { position: relative; width: 100%; height: 58px; overflow: hidden; color: var(--teal); --aph-bg: var(--paper); }
.aph-dispatch-road { position: absolute; left: 0; right: 0; bottom: 10px; height: 3px; opacity: .35; background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 24px); transition: opacity .4s; }
.aph-dispatch-truck { position: absolute; left: -80px; bottom: 11px; width: 64px; }
.aph-dispatch-truck .aph-van { width: 64px; height: auto; }
.aph-dispatch-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 800; color: #0B7A55; opacity: 0; transition: opacity .4s ease; }
.aph-dispatch-label .aph-check { margin: 0; }
.aph-receipt.is-dispatching .aph-dispatch-truck { animation: aph-dispatch 2s cubic-bezier(.45, 0, .55, 1) forwards; }
.aph-receipt.is-dispatched .aph-dispatch-label { opacity: 1; }
.aph-receipt.is-dispatched .aph-dispatch-road { opacity: .1; }
html:not(.js) .aph-dispatch-label { opacity: 1; }
html:not(.js) .aph-dispatch-truck { display: none; }
@keyframes aph-dispatch { from { left: -80px; } to { left: calc(100% + 20px); } }

.aph-receipt-machine { position: relative; z-index: 2; width: min(100%, 340px); height: 64px; border-radius: 16px; background: linear-gradient(180deg, #0E4147, #08292D); box-shadow: 0 16px 30px -14px rgba(8, 41, 45, .7), inset 0 1px 0 rgba(255, 255, 255, .14); }
.aph-receipt-slot { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 8px; border-radius: 99px; background: #041518; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55); }
.aph-receipt-light { position: absolute; top: 14px; right: 18px; width: 10px; height: 10px; border-radius: 50%; background: #6EF3C5; box-shadow: 0 0 10px #6EF3C5; }
.aph-receipt-paper { position: relative; z-index: 1; width: 236px; margin-top: -22px; padding-top: 10px; background: #fff; color: #18262B; border-radius: 2px 2px 0 0; border-bottom: 3px dashed #B9C8C5; box-shadow: 0 16px 34px -16px rgba(8, 41, 45, .5); font: 500 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.aph-receipt-inner { padding: 14px 16px 18px; }
.aph-receipt-title { font-weight: 900; letter-spacing: .05em; font-size: 12px; margin-bottom: 4px; }
.aph-receipt-meta { color: #4b5d62; margin-bottom: 10px; }
.aph-receipt-items { list-style: none; margin: 0; padding: 10px 0; border-top: 1px dashed #B9C8C5; border-bottom: 1px dashed #B9C8C5; display: grid; gap: 6px; }
.aph-receipt-items li, .aph-receipt-total { display: flex; justify-content: space-between; gap: 10px; }
.aph-receipt-items li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.aph-receipt-items li span:last-child, .aph-receipt-total span:last-child { white-space: nowrap; }
.aph-receipt-total { margin-top: 10px; font-weight: 900; font-size: 13.5px; }
.aph-receipt-pay { margin-top: 6px; color: #4b5d62; }
.aph-barcode { margin-top: 14px; height: 28px; background: repeating-linear-gradient(90deg, #18262B 0 2px, transparent 2px 4px, #18262B 4px 5px, transparent 5px 8px); }
.aph-receipt-status { margin: 0; font-weight: 800; color: #0B7A55; text-align: center; transition: opacity .4s ease, transform .4s ease; }
.aph-receipt-status.is-pending { color: var(--teal); }
.aph-check { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: .35rem; border-radius: 50%; background: currentColor; }
.aph-check b { color: #fff; font-size: .75rem; line-height: 1; }
.aph-account-note { max-width: 46ch; margin: 0; text-align: center; font-size: .95rem; color: #3f5359; }
.js .aph-receipt-machine { opacity: 0; transition: opacity .4s ease; }
.js .aph-receipt.is-printing .aph-receipt-machine { opacity: 1; }
.js .aph-receipt-paper { clip-path: inset(0 0 100% 0); transform: translateY(-18px); }
.js .aph-receipt.is-printing .aph-receipt-paper { clip-path: inset(0 0 -20px 0); transform: translateY(0); transition: clip-path 1.5s cubic-bezier(.3, .6, .3, 1), transform 1.5s cubic-bezier(.3, .6, .3, 1); }
.js .aph-receipt:not(.is-complete) .aph-receipt-status { opacity: 0; transform: translateY(-6px); }
.js .aph-receipt.is-printing:not(.is-complete) .aph-receipt-light { animation: aph-blink .35s steps(1) infinite; }
.js .aph-receipt .aph-receipt-button { opacity: 0; transform: scale(.7); pointer-events: none; }
.js .aph-receipt.is-complete .aph-receipt-button { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.5, .4, 1); }
html:not(.js) .aph-receipt-button { display: none; }
@keyframes aph-blink { 50% { opacity: .2; } }

/* Dashboard receipt: nothing shows until View receipt is pressed */
.aph-receipt[data-aph-receipt="auto"] .aph-receipt-open { display: none; }
.js .aph-receipt[data-aph-receipt="manual"]:not(.is-open) .aph-receipt-machine,
.js .aph-receipt[data-aph-receipt="manual"]:not(.is-open) .aph-receipt-paper,
.js .aph-receipt[data-aph-receipt="manual"]:not(.is-open) .aph-receipt-status,
.js .aph-receipt[data-aph-receipt="manual"]:not(.is-open) .aph-receipt-button { display: none; }
.aph-receipt[data-aph-receipt="manual"].is-open .aph-receipt-open { display: none; }
html:not(.js) .aph-receipt-open { display: none; }

@media print {
	body.aph-printing * { visibility: hidden !important; }
	body.aph-printing .aph-receipt-paper, body.aph-printing .aph-receipt-paper * { visibility: visible !important; }
	body.aph-printing .aph-receipt-paper { position: absolute; left: 0; top: 0; width: 100%; max-width: 360px; clip-path: none !important; transform: none !important; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.aph-track-button.is-running .aph-van, .aph-cart-pulse, .aph-activate.is-activating::after, .aph-receipt-light { animation: none !important; }
	.aph-track-button.is-loop.is-running .aph-track-vehicle, .aph-track-button.is-loop.is-running .aph-track-progress { animation: none !important; }
	.aph-track-lane { display: none; }
	.aph-plane, .btn::before, .aph-tech-hover::before { transition: none; }
	.js .aph-receipt-paper { clip-path: none; transform: none; }
	.aph-receipt.is-dispatching .aph-dispatch-truck { animation: none; display: none; }
}

/* Long emails and names must wrap on narrow phones */
.aph-account-note, .aph-receipt-status, .aph-receipt-pay, .aph-receipt-items li span:first-child { overflow-wrap: anywhere; }
.aph-account-note { max-width: 100%; padding-inline: .25rem; }
.aph-receipt { max-width: min(380px, 100%); }