/*
 * Cart -> Checkout -> Thank You: shared motion and the order-placed modal.
 * cart.php, checkout.php aur customer-order.php teeno isko load karte hain.
 * Har animation prefers-reduced-motion par band ho jati hai.
 */
:root{
    --of-navy:#0b2a6f;
    --of-blue:#1d4ed8;
    --of-orange:#f5620f;
    --of-orange-2:#ff7a1a;
    --of-green:#0f8a43;
    --of-green-soft:#e8f7ee;
    --of-peach:#fff3e6;
    --of-purple:#9b2fc9;
    --of-purple-soft:#f7ecff;
    --of-line:#e5eaf2;
    --of-ink:#1f2937;
    --of-muted:#5b6474;
    --of-ease:cubic-bezier(.22,.8,.26,1);
}

/* ---------- page enter: cards rise in one after another ---------- */
.of-reveal{opacity:0;translate:0 16px;animation:ofRise .55s var(--of-ease) forwards;animation-delay:calc(var(--of-i,0) * 70ms)}
@keyframes ofRise{to{opacity:1;translate:0 0}}

/* leaving the page (cart -> checkout, back to cart) */
.of-page{transition:opacity .28s ease,transform .28s ease}
.of-page.is-leaving{opacity:0;transform:translateY(-8px)}

/* soft lift on cards */
.of-lift{transition:transform .25s var(--of-ease),box-shadow .25s var(--of-ease),border-color .25s}
.of-lift:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,35,90,.09)}

/* number that just changed */
.of-bump{animation:ofBump .45s var(--of-ease)}
@keyframes ofBump{0%{transform:scale(1)}40%{transform:scale(1.08);color:var(--of-green)}100%{transform:scale(1)}}

/* removing a row */
.of-removing{animation:ofOut .35s ease forwards;pointer-events:none}
@keyframes ofOut{to{opacity:0;transform:translateX(30px);max-height:0;margin:0;padding-top:0;padding-bottom:0}}

/* primary button shine */
.of-shine{position:relative;overflow:hidden}
.of-shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:ofShine 3.2s ease-in-out infinite}
@keyframes ofShine{0%,60%{left:-60%}100%{left:130%}}
.of-shine svg{transition:transform .25s var(--of-ease)}
.of-shine:hover svg{transform:translateX(4px)}

/* ---------- trust strip (cart) ---------- */
.of-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:16px 8px;list-style:none;background:#fff;border:1px solid var(--of-line);border-radius:12px}
.of-trust li{display:flex;align-items:center;gap:12px;padding:4px 16px;border-left:1px solid var(--of-line)}
.of-trust li:first-child{border-left:0}
.of-trust__icon{display:flex;flex:0 0 auto}
.of-trust strong{display:block;color:var(--of-navy);font-size:13px;font-weight:700;line-height:1.25}
.of-trust small{display:block;color:var(--of-muted);font-size:12.5px}
.of-trust small a{color:inherit}
@media (max-width:991px){.of-trust{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}.of-trust li:nth-child(3){border-left:0}}
@media (max-width:575px){.of-trust{grid-template-columns:1fr}.of-trust li{border-left:0}}

/* ---------- Thank You modal ---------- */
.of-ty{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:18px;visibility:hidden}
.of-ty.is-open{visibility:visible}
.of-ty__backdrop{position:absolute;inset:0;background:rgba(15,30,60,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease}
.of-ty.is-open .of-ty__backdrop{opacity:1}
.of-ty__dialog{position:relative;width:min(640px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:26px 24px 22px;border-radius:18px;background:#fff;box-shadow:0 30px 80px rgba(10,25,60,.28);text-align:center;opacity:0;transform:translateY(24px) scale(.94);transition:opacity .45s var(--of-ease),transform .5s cubic-bezier(.2,1.1,.3,1.15)}
.of-ty.is-open .of-ty__dialog{opacity:1;transform:none}
.of-ty__brands{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-right:38px;min-height:34px}
.of-ty__brands img{max-height:52px;width:auto}
.of-ty__br{display:inline-flex;align-items:center;gap:8px;color:var(--of-blue);font-weight:800;font-size:20px}
.of-ty__br img{height:40px}
.of-ty__check{position:relative;width:86px;height:86px;margin:-6px auto 8px}
.of-ty__check circle{fill:#1faa55;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.2,1.3,.4,1) .15s}
.of-ty__check path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .4s ease .5s}
.of-ty.is-open .of-ty__check circle{transform:scale(1)}
.of-ty.is-open .of-ty__check path{stroke-dashoffset:0}
.of-ty__confetti{position:absolute;inset:-30px;pointer-events:none}
.of-ty__confetti i{position:absolute;left:50%;top:50%;width:6px;height:14px;border-radius:3px;opacity:0}
.of-ty.is-open .of-ty__confetti i{animation:ofConfetti 1.1s var(--of-ease) .35s forwards}
@keyframes ofConfetti{0%{opacity:0;transform:translate(-50%,-50%) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.of-ty h2{margin:0;color:#1a9a4b;font-size:40px;font-weight:900;letter-spacing:-.5px}
.of-ty__sub{margin:4px 0 2px;color:var(--of-navy);font-size:21px;font-weight:800;line-height:1.3}
.of-ty__lead{margin:4px 0 16px;color:var(--of-muted);font-size:16px}
.of-ty__box{border:1px solid var(--of-line);border-radius:12px;padding:10px;margin-bottom:12px;text-align:left}
.of-ty__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.of-ty__tile{padding:12px;border-radius:10px;opacity:0;translate:0 10px}
.of-ty.is-open .of-ty__tile{animation:ofRise .5s var(--of-ease) forwards;animation-delay:calc(.55s + var(--of-i,0) * 90ms)}
.of-ty__tile span{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--of-ink)}
.of-ty__tile strong{display:block;margin-top:6px;font-size:26px;font-weight:800;text-align:center}
.of-ty__tile.is-green{background:var(--of-green-soft)}.of-ty__tile.is-green strong{color:var(--of-green)}
.of-ty__tile.is-orange{background:var(--of-peach)}.of-ty__tile.is-orange strong{color:#e0341b}
.of-ty__tile.is-purple{background:var(--of-purple-soft)}.of-ty__tile.is-purple strong{color:var(--of-purple)}
.of-ty__total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:12px 16px;border-radius:10px;background:var(--of-green-soft);color:var(--of-navy);font-size:18px;font-weight:700}
.of-ty__total strong{color:var(--of-green);font-size:28px;font-weight:900}
.of-ty__summary{border:1px solid var(--of-line);border-radius:12px;overflow:hidden;margin-bottom:12px;text-align:left}
.of-ty__summary h3{margin:0;padding:10px 16px;background:#f3f6fc;color:var(--of-navy);font-size:16px;font-weight:800}
.of-ty__summary div{display:flex;justify-content:space-between;padding:9px 16px;border-top:1px solid #eef1f6;font-size:15px;color:var(--of-ink)}
.of-ty__summary div strong{font-weight:700}
.of-ty__summary div.is-last strong{color:var(--of-green)}
.of-ty__note{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:#eef4ff;color:#334155;font-size:13.5px;text-align:left}
.of-ty__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.of-ty__btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:8px;font-size:17px;font-weight:700;text-decoration:none!important;transition:transform .2s,box-shadow .2s,background .2s}
.of-ty__btn:hover{transform:translateY(-1px)}
.of-ty__btn.is-primary{background:linear-gradient(180deg,var(--of-orange-2),var(--of-orange));color:#fff!important;box-shadow:0 6px 16px rgba(245,98,15,.28)}
.of-ty__btn.is-ghost{border:1.5px solid var(--of-blue);background:#fff;color:var(--of-blue)!important}
.of-ty__btn.is-ghost:hover{background:#eff4ff}
.of-ty__close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f4f9;color:#475569;font-size:20px;line-height:1;cursor:pointer}
@media (max-width:575px){
    .of-ty h2{font-size:32px}
    .of-ty__sub{font-size:17px}
    .of-ty__tiles{grid-template-columns:1fr}
    .of-ty__tile strong{font-size:22px}
    .of-ty__actions{grid-template-columns:1fr}
    .of-ty__brands img{max-height:40px}
    .of-ty__br{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
    .of-reveal,.of-ty__tile{opacity:1!important;translate:none!important;animation:none!important}
    .of-shine::after,.of-ty__confetti{display:none}
    .of-lift:hover{transform:none}
    .of-page,.of-ty__dialog,.of-ty__backdrop{transition:none}
}