/* ---------- Shared ---------- */
.of-layer {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 100; font-family: var(--sans);
}

/* ---------- COD confirm sheet ---------- */
.of-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0); transition: background .3s; z-index: 99; }
.of-backdrop.show { background: rgba(0,0,0,.55); }
.cod-sheet {
  position: fixed; bottom: 0; left: 50%; width: 100%; max-width: 480px; z-index: 100;
  background: #fff; border-radius: 18px 18px 0 0; padding: 22px 14px 16px;
  transform: translate(-50%, 100%); transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.cod-sheet.show { transform: translate(-50%, 0); }
.cod-sheet h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; padding-left: 2px; }
.cs-illus {
  display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px 0 30px;
  border-bottom: 1px solid #ececec; margin-bottom: 14px; height: 108px;
}
.cs-illus p { color: #5b3fd0; font-size: 13px; line-height: 20px; align-self: center; font-weight: 500; }
.cs-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-btns button { height: 46px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.cs-cancel { border: 1px solid #d0d3d6 !important; background: #fff; }
.cs-confirm { background: linear-gradient(90deg, #ffe11b, #ffc700); font-weight: 600 !important; }

/* ---------- Page loader (over payments) ---------- */
.of-pageload {
  position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,0);
  display: flex; align-items: center; justify-content: center; transition: background .25s;
}
.of-pageload.show { background: rgba(255,255,255,.6); }
.spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--blue); border-right-color: var(--blue);
  animation: spin .8s linear infinite;
}
.spin.sm { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Redirecting / grey loader ---------- */
.of-redirect { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.of-redirect h4 { font-size: 15px; font-weight: 600; margin-top: 6px; }
.of-redirect p { font-size: 12.5px; color: #717478; }
.dots-spin { width: 22px; height: 22px; position: relative; animation: spin 1s steps(8) infinite; }
.dots-spin i { position: absolute; left: 10px; top: 0; width: 3px; height: 6px; border-radius: 2px; background: var(--blue); transform-origin: 1.5px 11px; }
.of-grey { background: #eceef1; display: flex; align-items: center; justify-content: center; }
.of-fadein { animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Demo processing (card) ---------- */
.of-proc { background: #fff; display: flex; flex-direction: column; align-items: center; padding: 14px; }
.proc-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 70px; gap: 12px; text-align: center; }
.proc-logo { font-size: 30px; font-weight: 800; color: #2a2f36; letter-spacing: -.5px; margin-bottom: 18px; }
.proc-body h4 { font-size: 16.5px; font-weight: 500; color: #212121; margin-top: 8px; }
.proc-body p { font-size: 11.5px; color: #212121; }
.proc-foot { font-size: 10.5px; color: #8a8d91; letter-spacing: .3px; padding-bottom: 46%; }

/* ---------- Demo bank authentication (card) ---------- */
.of-auth { background: #f1f3f6; display: flex; flex-direction: column; align-items: center; padding: 14px; overflow-y: auto; }
.of-auth.of-leave { animation: fadeIn .22s ease reverse both; }
.auth-demo {
  width: 100%; background: #fff4d6; color: #8a6400; border: 1px solid #f3dd94;
  border-radius: 8px; padding: 8px 12px; font-size: 11px; font-weight: 600; text-align: center; margin-bottom: 14px;
}
.auth-card { width: 100%; background: #fff; border-radius: 14px; padding: 20px 18px 18px; box-shadow: 0 2px 14px rgba(0,0,0,.07); }
.auth-top { margin-bottom: 18px; }
.auth-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #212121; }
.auth-card h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 6px; }
.auth-sub { font-size: 12.5px; color: #717478; line-height: 19px; margin-bottom: 16px; }
.auth-rows { border-top: 1px solid #eef0f2; }
.auth-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef0f2; font-size: 12.5px; }
.auth-rows span { color: #717478; }
.auth-rows b { color: #212121; font-weight: 600; text-align: right; }
.auth-timer { text-align: center; font-size: 12.5px; color: #717478; margin: 18px 0 14px; }
.auth-timer b { font-size: 23px; font-weight: 700; color: #212121; display: block; margin-top: 4px; letter-spacing: 1px; }
.auth-pay {
  width: 100%; height: 48px; border-radius: 10px; background: linear-gradient(90deg, #ffe11b, #ffc700);
  font-size: 14px; font-weight: 600; color: #212121; margin-bottom: 10px;
}
.auth-cancel { width: 100%; height: 44px; border-radius: 10px; background: #fff; border: 1px solid #d0d3d6 !important; font-size: 13px; font-weight: 600; color: var(--blue); }

/* ---------- Success animation ---------- */
.of-success { background: #fff; overflow: hidden; }
.of-flood {
  position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: #74ec74; transform: scale(0);
  transition: transform .7s cubic-bezier(.4,.1,.3,1), background 1s ease;
}
.of-success.p2 .of-flood { transform: scale(70); }
.of-success.p3 .of-flood { background: #fff; }

.of-badge {
  position: absolute; left: 50%; top: 42%; width: 250px; height: 250px; margin: -125px 0 0 -125px;
  transition: top .7s cubic-bezier(.3,.8,.3,1), transform .7s cubic-bezier(.3,.8,.3,1);
}
.of-success.p4 .of-badge { top: 25%; transform: scale(.84); }
.ring { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); }
.ring.r1 {
  width: 250px; height: 250px; background: #fff; box-shadow: inset 0 0 0 22px #74ec74;
  transition: transform .45s cubic-bezier(.3,1.4,.5,1), background .6s, box-shadow .5s;
}
.ring.r2 { width: 168px; height: 168px; background: rgba(255,255,255,.45); transition: transform .5s cubic-bezier(.3,1.3,.5,1) .1s, background .8s; }
.ring.r3 {
  width: 104px; height: 104px; background: #5fd068; display: flex; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.3,1.5,.5,1) .25s;
}
.of-success.p1 .r1 { transform: translate(-50%, -50%) scale(.7); }
.of-success.p2 .r1 { transform: translate(-50%, -50%) scale(1); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 0 #74ec74; }
.of-success.p2 .r2, .of-success.p2 .r3 { transform: translate(-50%, -50%) scale(1); }
.of-success.p3 .r1 { background: #e3f6e3; }
.of-success.p3 .r2 { background: #cdeecf; }
.ring.r3 svg path { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .45s ease .6s; }
.of-success.p2 .r3 svg path { stroke-dashoffset: 0; }

.spark { position: absolute; opacity: 0; transform: scale(0); }
.of-success.p2 .spark { animation: twinkle 1.6s ease-in-out infinite; }
.spark:nth-child(5) { animation-delay: .3s !important; }
.spark:nth-child(6) { animation-delay: .7s !important; }
.spark:nth-child(7) { animation-delay: .1s !important; }
.spark:nth-child(8) { animation-delay: .9s !important; }
@keyframes twinkle {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  30% { opacity: 1; transform: scale(1) rotate(20deg); }
  70% { opacity: 1; transform: scale(.85) rotate(-10deg); }
  100% { opacity: 0; transform: scale(0) rotate(0); }
}

.fly-coin {
  position: absolute; left: 50%; top: 42%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; opacity: 0; transform: translate(0, 0) scale(.2);
  background: #ffcc00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2L4 9h3.5L6.5 14 12 6.5H8.5z' fill='%23fff'/%3E%3C/svg%3E") center/62% no-repeat;
  box-shadow: inset 0 0 0 2px #f2b600, 0 1px 3px rgba(0,0,0,.15);
}
.of-success.p2 .fly-coin { animation: coinOut 1s cubic-bezier(.2,.8,.3,1) var(--d) forwards, coinFloat 2.4s ease-in-out calc(var(--d) + 1s) infinite; }
.of-success.p4 .fly-coin { transition: opacity .6s; opacity: 0 !important; animation-play-state: paused; }
@keyframes coinOut {
  0% { opacity: 0; transform: translate(0, 0) scale(.2) rotateY(0); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotateY(360deg); }
}
@keyframes coinFloat {
  0%, 100% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotateY(0); }
  50% { opacity: 1; transform: translate(var(--x), calc(var(--y) - 10px)) scale(1) rotateY(180deg); }
}

.of-text { position: absolute; left: 0; right: 0; top: 47%; text-align: center; padding: 0 30px; }
.of-text > * { opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; }
.of-success.p4 .of-text > * { opacity: 1; transform: none; }
.of-success.p4 .of-text > :nth-child(2) { transition-delay: .2s; }
.of-success.p4 .of-text > :nth-child(3) { transition-delay: .35s; }
.of-text h2 { font-size: 19.5px; font-weight: 600; margin-bottom: 14px; }
.of-text .ot-coins { font-size: 13px; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 6px; }
.of-text .ot-saved { color: var(--green); font-weight: 600; font-size: 13px; margin-top: 4px; }
.of-scratch {
  margin: 30px auto 0; max-width: 330px; background: #e3f6e3; border-radius: 8px; padding: 16px 20px;
  display: flex; align-items: center; gap: 18px; text-align: center;
}
.of-success.p5 .of-text > .of-scratch { opacity: 1; transform: none; transition-delay: 0s; }
.of-success.p4:not(.p5) .of-text > .of-scratch { opacity: 0; transform: translateY(14px); }
.of-scratch b { flex: 1; font-size: 14px; font-weight: 600; line-height: 21px; }
.of-success.p6 { animation: fadeOut .35s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }

/* ---------- Order confirmation page ---------- */
.oc-page {
  background: #f1f2f4; overflow-y: auto; padding-bottom: 24px;
  animation: slideUp .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.oc-topbar { position: sticky; top: 0; z-index: 2; background: #fff; height: 56px; display: flex; align-items: center; padding: 0 12px; }
.oc-x { display: flex; padding: 6px; }
.oc-sec { background: #fff; margin-bottom: 8px; padding: 16px 17px; }

/* Hero */
.oc-head { position: relative; padding-top: 4px; overflow: hidden; min-height: 150px; }
.oc-head h2 { font-size: 17.5px; font-weight: 400; line-height: 28px; margin-bottom: 4px; }
.oc-head .d { font-size: 13px; margin-bottom: 10px; }
.oc-coins { font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.oc-track { color: var(--blue); font-weight: 600; font-size: 12.5px; text-decoration: none; }
.oc-mini { position: absolute; right: -14px; top: 40px; width: 120px; height: 120px; }
.oc-mini .ring { transform: translate(-50%, -50%) scale(1); }
.oc-mini .m1 { width: 120px; height: 120px; background: #e3f6e3; }
.oc-mini .m2 { width: 80px; height: 80px; background: #cdeecf; }
.oc-mini .m3 { width: 50px; height: 50px; background: #5fd068; display: flex; align-items: center; justify-content: center; }
.oc-mini .spark { opacity: 1; transform: none; animation: twinkle 2s ease-in-out infinite; }

/* Rewards card */
.oc-reward { padding: 18px 17px 16px; }
.oc-reward h3 { font-size: 14px; font-weight: 600; line-height: 22px; margin-bottom: 12px; }
.rw-card {
  border-radius: 12px; color: #fff; padding: 14px 14px 12px;
  background: linear-gradient(180deg, #050505 0%, #1c0303 35%, #5a0606 80%, #6e0808 100%);
}
.rw-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding-left: 2px; }
.rw-logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.rw-logo b {
  color: #e50914; font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif; font-weight: 900;
  font-size: 18.5px; letter-spacing: 1px; transform: scaleY(1.15); transform-origin: bottom;
}
.rw-logo small { font-size: 9.5px; margin-top: 4px; font-style: italic; font-weight: 600; }
.rw-top p { flex: 1; font-size: 12.5px; font-weight: 600; line-height: 20px; }
.rw-arrow {
  background: #fff; border-radius: 14px; width: 42px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rw-steps { background: #fff; border-radius: 10px; padding: 9px 4px 8px; display: flex; color: #8a8a8a; }
.rw-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 11.5px; line-height: 18px; }
.rw-step::before { content: ""; position: absolute; top: 10px; left: calc(-50% + 11px); right: calc(50% + 11px); height: 1.5px; background: #757575; }
.rw-step:first-child::before { display: none; }
.rw-dot { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid #616161; background: #fff; position: relative; z-index: 1; }
.rw-step.done .rw-dot {
  border-color: #1b8a3c; animation: pop .4s ease .6s both;
  background: #1b8a3c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/13px no-repeat;
}
.rw-step.done { color: #212121; }
.rw-foot { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; margin-top: 10px; }

/* Rows */
.oc-row { display: flex; align-items: center; gap: 18px; cursor: pointer; }
.oc-row > div { flex: 1; min-width: 0; }
.oc-row b { display: block; font-size: 16px; font-weight: 400; line-height: 24px; }
.oc-row small { color: #717478; font-size: 11.5px; }
.chev-r { flex-shrink: 0; transition: transform .2s; }
.oc-row.open .chev-r { transform: rotate(90deg); }
.oc-scr { padding: 18px 17px; }
.sc-ic {
  width: 32px; height: 38px; flex-shrink: 0; border-radius: 4px; position: relative; display: inline-block;
  background: linear-gradient(160deg, #ffd27a, #ffb22e 60%, #f59e0b); transform: rotate(-8deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.sc-ic i {
  position: absolute; left: 9px; top: 12px; width: 14px; height: 13px; border-radius: 2px;
  background: #ffe7b3; box-shadow: inset 0 0 0 1.5px #f2a20c;
}
.sc-ic i::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1.5px; background: #f2a20c; }

.oc-del { font-size: 16px; line-height: 24px; padding: 18px 17px; }

/* Address */
.oc-addr { display: flex; justify-content: space-between; gap: 10px; }
.oc-addr .nm { font-size: 16px; line-height: 24px; margin-bottom: 8px; }
.oc-addr p { font-size: 13px; line-height: 21px; color: #212121; }
.oc-addr .change {
  border: 1px solid #c2c8d0; border-radius: 4px; padding: 0 14px; height: 32px; color: var(--blue);
  font-size: 12.5px; flex-shrink: 0;
}
.oc-addr a { color: var(--blue); font-size: 13px; display: inline-block; margin-top: 4px; text-decoration: none; }

.oc-cont { background: #fff; padding: 10px 10px 12px; margin: -8px 0 8px; }
.oc-cont button { width: 100%; height: 40px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 500; }
.oc-sms { font-size: 13px; line-height: 23px; padding: 16px 17px 18px; margin-bottom: 1px; }
.oc-manage b { font-size: 14px; font-weight: 500; }
.oc-details { margin-top: 12px; border-top: 1px solid #eee; padding-top: 8px; }
.oc-details div { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; }
.oc-details div span:first-child { color: #717478; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: scale(1); } }