/* Loading state for the customer dashboard content column (My bicycles, Edit bicycle, My orders).
   It sits inside .customer-dashboard-content, so the header and sidebar stay visible. */
.cp-loader{--cp-loader-purple:#3d3d98;--cp-loader-teal:#00c4b4;--cp-loader-line:#e4e2f2;display:flex;align-items:center;justify-content:center;width:100%;min-height:clamp(320px,56vh,520px);padding:32px 20px;background:#fff;border:1px solid #e1e3f0;border-radius:18px 0 18px 0;box-shadow:0 14px 34px #272c4a0b;text-align:center}
.cp-loader-body{display:flex;flex-direction:column;align-items:center;max-width:320px}
.cp-loader-emblem{width:96px;height:96px;margin-bottom:14px;overflow:visible}
.cp-loader-ring-track{fill:none;stroke:#e1e3f0;stroke-width:4}
.cp-loader-ring{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:120 345;transform-box:fill-box;transform-origin:center;animation:cp-loader-spin 1.4s cubic-bezier(.55,.15,.45,.85) infinite}
.cp-loader-disc{fill:#fff;filter:drop-shadow(0 10px 18px rgba(61,61,152,.14))}
.cp-loader-tyre{fill:none;stroke:var(--cp-loader-purple);stroke-width:4}
.cp-loader-wheel{fill:none;stroke:var(--cp-loader-teal);stroke-width:1.8;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:cp-loader-spin 1.6s linear infinite}
.cp-loader-frame{fill:none;stroke:var(--cp-loader-purple);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.cp-loader-hub{fill:var(--cp-loader-purple)}
.cp-loader-crank{fill:#fff;stroke:var(--cp-loader-purple);stroke-width:3}
.cp-loader-pedals{fill:none;stroke:var(--cp-loader-teal);stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:cp-loader-spin 3.2s linear infinite}
.cp-loader-shield{stroke:#fff;stroke-width:2.2;stroke-linejoin:round;paint-order:stroke}
.cp-loader-check{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cp-loader .cp-loader-kicker{display:block;margin:0 0 6px;color:#117b77;font:800 12px/1.2 'Instrument Sans',Arial,sans-serif!important;letter-spacing:.18em}
.cp-loader .cp-loader-title{margin:0;color:var(--cp-loader-purple);font:600 18px/1.35 'Instrument Sans',Arial,sans-serif!important}
.cp-loader .cp-loader-hint{margin:6px 0 0;color:#68738a;font:400 14px/1.5 'Instrument Sans',Arial,sans-serif!important}
@keyframes cp-loader-spin{to{transform:rotate(360deg)}}
/* Reduce motion: a loading indicator is essential, so it keeps turning, just slower. */
@media(prefers-reduced-motion:reduce){.cp-loader-ring{animation-duration:2.8s}.cp-loader-wheel{animation-duration:3.2s}.cp-loader-pedals{animation-duration:6.4s}}
@media(max-width:760px){.cp-loader{min-height:280px;padding:28px 16px}.cp-loader-emblem{width:84px;height:84px;margin-bottom:12px}}
/* Overlay mode: the content column stays in place underneath, faded and blurred, like data is loading into it. */
.customer-dashboard-content{position:relative}
.cp-loader.cp-loader--overlay{position:absolute;inset:0;z-index:20;display:block;min-height:0;padding:0 16px;background:rgba(240,240,247,.84);border:0;border-radius:18px 0 18px 0;box-shadow:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:cp-loader-fade .2s ease-out}
/* Slightly above the centre of the first screen of the content column (below the header). Sticky would not work: .app has overflow-x:hidden. */
.cp-loader--overlay .cp-loader-body{width:100%;max-width:none;height:min(100%,calc(100vh - 150px));margin:0;padding-bottom:min(120px,14vh);justify-content:center}
.cp-loader-stage{min-height:clamp(420px,70vh,640px)}
.cp-loader-skeleton{display:grid;gap:18px;align-content:start}
.cp-loader-skeleton span{display:block;height:14px;background:#e4e2f2;border-radius:6px}
.cp-loader-skeleton .cp-sk-crumb{width:180px}
.cp-loader-skeleton .cp-sk-title{width:min(420px,70%);height:36px;margin:6px auto 4px}
.cp-loader-skeleton .cp-sk-card{height:210px;background:#fff;border:1px solid #e1e3f0;border-radius:18px 0 18px 0}
@keyframes cp-loader-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.cp-loader.cp-loader--overlay{animation:none}}
@media(max-width:760px){.cp-loader--overlay .cp-loader-body{height:min(100%,max(300px,calc(100vh - 380px)));padding-bottom:80px}}