/**
 * Premium COD Suite v2.0 — Premium Frontend
 * Mobile-first · Luxury · High Conversion
 */

:root {
	--pcs-primary: #0f7b4f;
	--pcs-primary-dark: #0a5e3c;
	--pcs-primary-light: #e8f5ef;
	--pcs-secondary: #f4a300;
	--pcs-secondary-light: #fff8e6;
	--pcs-on-primary: #fff;
	--pcs-radius: 14px;
	--pcs-radius-sm: 10px;
	--pcs-radius-xs: 6px;
	--pcs-ink: #111827;
	--pcs-muted: #6b7280;
	--pcs-line: #e5e7eb;
	--pcs-surface: #fff;
	--pcs-surface-2: #f9fafb;
	--pcs-danger: #dc2626;
	--pcs-danger-light: #fef2f2;
	--pcs-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
	--pcs-shadow: 0 8px 30px -12px rgba(0,0,0,.12);
	--pcs-shadow-lg: 0 20px 50px -16px rgba(0,0,0,.18);
	--pcs-shadow-glow: 0 0 30px rgba(15,123,79,.2);
	--pcs-transition: .25s cubic-bezier(.4,0,.2,1);
}
.pcs-express *,.pcs-express *::before,.pcs-express *::after{box-sizing:border-box}

/* Container */
.pcs-express{margin:24px 0;padding:0;border:none;border-radius:var(--pcs-radius);background:var(--pcs-surface);box-shadow:var(--pcs-shadow);color:var(--pcs-ink);font-size:15px;line-height:1.6;overflow:hidden}
.pcs-express__header{padding:24px 24px 0;text-align:center}
.pcs-express__eyebrow{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:var(--pcs-primary-light);color:var(--pcs-primary);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pcs-express__title{margin:12px 0 4px;font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.pcs-express__subtitle{margin:0;color:var(--pcs-muted);font-size:14px}

/* Offer Cards */
.pcs-bundles{display:flex;flex-direction:column;gap:10px;padding:20px 24px}
.pcs-bundle{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--pcs-line);border-radius:var(--pcs-radius-sm);background:var(--pcs-surface);cursor:pointer;transition:all var(--pcs-transition);overflow:hidden}
.pcs-bundle::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;background:linear-gradient(135deg,rgba(15,123,79,.04),rgba(15,123,79,.01));transition:opacity var(--pcs-transition)}
.pcs-bundle:hover{border-color:rgba(15,123,79,.3);box-shadow:var(--pcs-shadow-sm)}
.pcs-bundle:hover::before{opacity:1}
.pcs-bundle.is-selected{border-color:var(--pcs-primary);background:var(--pcs-primary-light);box-shadow:0 0 0 1px var(--pcs-primary),var(--pcs-shadow-sm)}
.pcs-bundle.is-selected::before{opacity:1}
.pcs-bundle input[type="radio"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:2px solid var(--pcs-line);border-radius:50%;background:var(--pcs-surface);flex-shrink:0;position:relative;transition:all var(--pcs-transition);cursor:pointer;margin:0}
.pcs-bundle input[type="radio"]::after{content:'';position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:var(--pcs-primary);transform:translate(-50%,-50%) scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.pcs-bundle.is-selected input[type="radio"]{border-color:var(--pcs-primary)}
.pcs-bundle.is-selected input[type="radio"]::after{transform:translate(-50%,-50%) scale(1)}
.pcs-bundle__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;position:relative;z-index:1}
.pcs-bundle__label{font-weight:700;font-size:15px;color:var(--pcs-ink)}
.pcs-bundle__price{font-size:18px;font-weight:800;color:var(--pcs-primary);letter-spacing:-.01em}
.pcs-bundle__saving{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--pcs-primary);background:var(--pcs-primary-light);padding:2px 8px;border-radius:999px;width:fit-content}
.pcs-bundle__tag{position:absolute;top:-1px;right:-1px;padding:4px 12px;border-radius:0 calc(var(--pcs-radius-sm) - 2px) 0 calc(var(--pcs-radius-sm) - 2px);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;z-index:2;background:var(--pcs-secondary);color:#2a1c00}
.pcs-bundle:nth-child(2) .pcs-bundle__tag{background:var(--pcs-primary);color:var(--pcs-on-primary)}
.pcs-bundle:nth-child(3) .pcs-bundle__tag{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}

/* Fields */
.pcs-form{padding:0 24px 24px}
.pcs-field{margin-bottom:14px}
.pcs-field label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--pcs-ink)}
.pcs-req{color:var(--pcs-danger)}
.pcs-express input[type="text"],.pcs-express input[type="tel"],.pcs-express input[type="number"],.pcs-express select,.pcs-express textarea{width:100%;padding:13px 16px;border:1.5px solid var(--pcs-line);border-radius:var(--pcs-radius-sm);background:var(--pcs-surface);color:var(--pcs-ink);font-size:16px;font-family:inherit;transition:border-color var(--pcs-transition),box-shadow var(--pcs-transition)}
.pcs-express input::placeholder,.pcs-express textarea::placeholder{color:var(--pcs-muted);opacity:.6}
.pcs-express input:focus,.pcs-express select:focus,.pcs-express textarea:focus{outline:none;border-color:var(--pcs-primary);box-shadow:0 0 0 3px rgba(15,123,79,.12)}
.pcs-field.has-error input,.pcs-field.has-error select{border-color:var(--pcs-danger);box-shadow:0 0 0 3px rgba(220,38,38,.08);animation:pcs-shake .4s ease}
.pcs-error{display:none;margin-top:6px;color:var(--pcs-danger);font-size:12.5px;font-weight:500}
.pcs-field.has-error .pcs-error{display:block}
@keyframes pcs-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.pcs-note{display:block;margin-top:6px;font-size:12.5px;color:var(--pcs-muted)}
.pcs-note.is-success{color:var(--pcs-primary);font-weight:600}
.pcs-note.is-error{color:var(--pcs-danger)}
.pcs-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Quantity */
.pcs-qty{display:inline-flex;align-items:center;border:1.5px solid var(--pcs-line);border-radius:var(--pcs-radius-sm);overflow:hidden;background:var(--pcs-surface)}
.pcs-qty__btn{width:46px;height:48px;border:0;background:var(--pcs-surface-2);color:var(--pcs-ink);font-size:20px;line-height:1;cursor:pointer;transition:background var(--pcs-transition);display:flex;align-items:center;justify-content:center}
.pcs-qty__btn:hover{background:var(--pcs-primary-light);color:var(--pcs-primary)}
.pcs-express .pcs-qty input{width:64px;border:0;border-radius:0;text-align:center;font-weight:700;font-size:16px;-moz-appearance:textfield}
.pcs-express .pcs-qty input::-webkit-outer-spin-button,.pcs-express .pcs-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pcs-express .pcs-qty input:focus{box-shadow:none}

/* Coupon */
.pcs-coupon{display:flex;gap:8px}
.pcs-coupon__apply{flex-shrink:0;padding:0 18px;border:1.5px solid var(--pcs-primary);border-radius:var(--pcs-radius-sm);background:transparent;color:var(--pcs-primary);font-weight:700;font-size:14px;cursor:pointer;transition:all var(--pcs-transition)}
.pcs-coupon__apply:hover{background:var(--pcs-primary);color:var(--pcs-on-primary)}

/* Summary */
.pcs-summary{margin:18px 0;padding:16px 18px;border-radius:var(--pcs-radius-sm);background:var(--pcs-surface-2);border:1px solid var(--pcs-line)}
.pcs-summary__row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px;color:var(--pcs-muted)}
.pcs-summary__row strong{color:var(--pcs-ink);font-weight:600}
.pcs-summary__row--total{margin-top:8px;padding-top:12px;border-top:1.5px solid var(--pcs-line);font-size:16px}
.pcs-summary__row--total strong{color:var(--pcs-primary);font-size:20px;font-weight:800}

/* Submit */
.pcs-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:18px 24px;border:0;border-radius:var(--pcs-radius-sm);background:linear-gradient(135deg,var(--pcs-primary),var(--pcs-primary-dark));color:var(--pcs-on-primary);font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:var(--pcs-shadow-glow);transition:all var(--pcs-transition);overflow:hidden}
.pcs-submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(15,123,79,.4)}
.pcs-submit:active{transform:translateY(0);box-shadow:var(--pcs-shadow-sm)}
.pcs-submit[disabled]{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.pcs-submit__spinner{display:none;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:pcs-spin .7s linear infinite}
.pcs-submit.is-loading .pcs-submit__label{opacity:.6}
.pcs-submit.is-loading .pcs-submit__spinner{display:inline-block}
@keyframes pcs-spin{to{transform:rotate(360deg)}}
.pcs-reassure{margin:14px 0 0;text-align:center;font-size:13px;color:var(--pcs-muted);line-height:1.5}
.pcs-form__message{margin-top:14px;padding:12px 16px;border-radius:var(--pcs-radius-sm);background:var(--pcs-danger-light);color:var(--pcs-danger);font-size:14px;font-weight:500;animation:pcs-fade-in .3s ease}
.pcs-form__message.is-success{background:var(--pcs-primary-light);color:var(--pcs-primary)}
@keyframes pcs-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Badges */
.pcs-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0;padding:0;list-style:none}
.pcs-badge{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--pcs-line);border-radius:var(--pcs-radius-sm);background:var(--pcs-surface);font-size:13px;font-weight:600;color:var(--pcs-ink);transition:all var(--pcs-transition)}
.pcs-badge:hover{box-shadow:var(--pcs-shadow-sm)}
.pcs-badge__icon{width:24px;height:24px;flex-shrink:0;color:var(--pcs-primary)}

/* Social Proof */
.pcs-proof{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.pcs-proof__item{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--pcs-surface-2);border:1px solid var(--pcs-line);font-size:13px;color:var(--pcs-muted);font-weight:500}
.pcs-proof__item.is-urgent{background:var(--pcs-secondary-light);border-color:rgba(244,163,0,.3);color:#92400e;font-weight:600}
.pcs-proof__dot{width:8px;height:8px;border-radius:50%;background:var(--pcs-primary);animation:pcs-pulse 2s ease-in-out infinite}
.pcs-proof__item.is-urgent .pcs-proof__dot{background:#f59e0b}
@keyframes pcs-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

/* Sticky */
.pcs-sticky{position:fixed;inset:auto 0 0 0;z-index:9998;display:none;align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);border-top:1px solid var(--pcs-line);box-shadow:0 -8px 30px -12px rgba(0,0,0,.15);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}
.pcs-sticky__info{display:flex;flex-direction:column;min-width:0;flex:1}
.pcs-sticky__name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcs-sticky__price{font-size:15px;font-weight:800;color:var(--pcs-primary)}
.pcs-sticky__price del{opacity:.5;font-weight:400;font-size:12px}
.pcs-sticky__btn{flex-shrink:0;padding:14px 20px;border:0;border-radius:var(--pcs-radius-sm);background:linear-gradient(135deg,var(--pcs-primary),var(--pcs-primary-dark));color:var(--pcs-on-primary);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:all var(--pcs-transition);box-shadow:var(--pcs-shadow-glow)}
.pcs-sticky__btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -6px rgba(15,123,79,.4)}

/* FBT */
.pcs-fbt{margin:36px 0}
.pcs-fbt__title,.pcs-thanks__reco-title{margin:0 0 16px;font-size:20px;font-weight:800}
.pcs-fbt__grid,.pcs-thanks__reco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.pcs-fbt__card,.pcs-reco-card{border:1px solid var(--pcs-line);border-radius:var(--pcs-radius-sm);padding:14px;background:var(--pcs-surface);text-align:center;transition:all var(--pcs-transition)}
.pcs-fbt__card:hover,.pcs-reco-card:hover{box-shadow:var(--pcs-shadow);transform:translateY(-2px)}
.pcs-fbt__card img,.pcs-reco-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--pcs-radius-xs);margin-bottom:10px}
.pcs-fbt__name,.pcs-reco-card h3{margin:0 0 6px;font-size:14px;font-weight:600;line-height:1.35}
.pcs-fbt__price,.pcs-reco-card__price{display:block;font-weight:700;color:var(--pcs-primary);font-size:15px}
.pcs-fbt__cta{display:block;margin-top:10px;padding:10px;border-radius:var(--pcs-radius-xs);background:var(--pcs-primary);color:var(--pcs-on-primary);font-size:13px;font-weight:700;text-decoration:none;transition:all var(--pcs-transition)}
.pcs-fbt__cta:hover{filter:brightness(1.1)}

/* Thank You */
.pcs-thanks{max-width:720px;margin:0 auto;padding:16px;color:var(--pcs-ink)}
.pcs-thanks__card{padding:36px 28px;border:1px solid var(--pcs-line);border-radius:calc(var(--pcs-radius) + 4px);background:var(--pcs-surface);box-shadow:var(--pcs-shadow);text-align:center}
.pcs-thanks__logo img{max-width:140px;height:auto;margin:0 auto 16px}
.pcs-thanks__check{width:80px;height:80px;margin:0 auto 16px;color:var(--pcs-primary);animation:pcs-check-in .6s cubic-bezier(.4,0,.2,1)}
.pcs-thanks__check svg{width:100%;height:100%}
@keyframes pcs-check-in{from{transform:scale(0) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.pcs-thanks__title{margin:0 0 8px;font-size:28px;font-weight:800;line-height:1.2}
.pcs-thanks__lead{margin:0 auto 24px;max-width:460px;color:var(--pcs-muted);font-size:15px}
.pcs-thanks__recap{margin:0 0 24px;padding:18px 20px;border-radius:var(--pcs-radius-sm);background:var(--pcs-surface-2);text-align:left}
.pcs-thanks__row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--pcs-line);font-size:14.5px}
.pcs-thanks__row:last-child{border-bottom:0}
.pcs-thanks__row dt{margin:0;color:var(--pcs-muted)}
.pcs-thanks__row dd{margin:0;font-weight:600;text-align:right}
.pcs-thanks__row--total{font-size:16px}
.pcs-thanks__row--total dd{color:var(--pcs-primary);font-size:20px;font-weight:800}
.pcs-thanks__actions{display:grid;gap:10px}
.pcs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 22px;border-radius:var(--pcs-radius-sm);font-size:15px;font-weight:700;text-decoration:none;transition:all var(--pcs-transition);border:0;cursor:pointer}
.pcs-btn:hover{transform:translateY(-1px)}
.pcs-btn svg{width:20px;height:20px}
.pcs-btn--whatsapp{background:#25d366;color:#fff}
.pcs-btn--call{background:var(--pcs-primary);color:var(--pcs-on-primary)}
.pcs-btn--ghost{background:transparent;border:1.5px solid var(--pcs-line);color:var(--pcs-ink)}
.pcs-btn--ghost:hover{background:var(--pcs-surface-2)}
.pcs-thanks__reco{margin-top:36px}

/* Responsive */
@media(min-width:600px){
	.pcs-bundles{flex-direction:row}
	.pcs-bundle{flex:1;flex-direction:column;align-items:stretch;text-align:center;padding:20px 16px}
	.pcs-bundle input[type="radio"]{align-self:center}
	.pcs-bundle__body{align-items:center}
	.pcs-bundle__saving{align-self:center}
	.pcs-badges{grid-template-columns:repeat(4,1fr)}
	.pcs-thanks__actions{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:782px){body.pcs-express-active .pcs-sticky{display:flex}}

/* Accessibility */
.pcs-express :focus-visible{outline:2px solid var(--pcs-primary);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.pcs-proof__dot,.pcs-submit,.pcs-btn,.pcs-submit__spinner,.pcs-thanks__check,.pcs-bundle,.pcs-field.has-error input{animation:none!important;transition-duration:0ms!important}}

/* Dark Mode */
@media(prefers-color-scheme:dark){
	.pcs-express,.pcs-thanks__card{--pcs-surface:#111827;--pcs-surface-2:#1f2937;--pcs-line:#374151;--pcs-ink:#f3f4f6;--pcs-muted:#9ca3af;--pcs-primary-light:rgba(15,123,79,.15);--pcs-danger-light:rgba(220,38,38,.12);--pcs-secondary-light:rgba(244,163,0,.12);background:var(--pcs-surface);color:var(--pcs-ink)}
	.pcs-express input,.pcs-express select,.pcs-express textarea{background:var(--pcs-surface-2);color:var(--pcs-ink);border-color:var(--pcs-line)}
	.pcs-sticky{background:rgba(17,24,39,.95);border-color:#374151}
	.pcs-bundle input[type="radio"]{background:var(--pcs-surface-2);border-color:var(--pcs-line)}
}