/* Customer order detail and account cards; shared by native and reference shells. */
.order-page.customer-order-page { padding-top:44px; padding-bottom:72px; color:#18121f; }
.customer-order-page a { text-decoration:none; }
.order-page-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:40px; }
.order-back,.order-refresh { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#73657e; }
.order-back .ui-icon { width:17px; transform:rotate(180deg); }
.order-refresh { border:1px solid #e7dfef; border-radius:30px; background:white; padding:11px 16px; cursor:pointer; }
.order-refresh svg { width:17px; height:17px; }
.customer-order-heading { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:32px; }
.order-eyebrow { font-size:11px; font-weight:750; letter-spacing:1.7px; color:#80639c; margin:0 0 12px; }
.order-page.customer-order-page h1 { font-size:clamp(36px,4.4vw,64px); line-height:1.06; letter-spacing:-2.7px; margin:0 0 18px; max-width:780px; }
.customer-order-heading>div>p:last-child { margin:0; color:#756a80; font-size:16px; line-height:1.6; max-width:660px; }
.order-mascot { object-fit:contain; flex-shrink:0; transform:rotate(8deg); }
.order-mode-note { display:flex; align-items:center; gap:12px; padding:16px 20px; border:1px solid #e4d8f1; border-radius:16px; background:#faf7fd; margin-bottom:26px; color:#756186; font-size:13px; line-height:1.6; }
.order-mode-note svg { width:24px; height:24px; flex-shrink:0; }
.order-mode-note p { margin:0; }.order-mode-note strong { color:#392647; }
.customer-order-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:30px; align-items:start; }
.customer-order-main { min-width:0; }
.order-tracker { padding:30px; border-radius:26px; background:#27183b; color:white; box-shadow:0 12px 28px #27183b12; }
.tracker-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.order-tracker .order-eyebrow { color:#c9b5e1; }.order-tracker h2 { margin:0; font-size:28px; line-height:1.25; letter-spacing:-.8px; }
.tracker-icon { display:grid; place-items:center; border:1px solid #69537f; border-radius:50%; width:48px; height:48px; color:#d5f892; flex-shrink:0; }
.tracker-icon svg { width:24px; height:24px; }
.order-steps { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; margin:34px 0 28px; }
.order-steps li { position:relative; font-size:12px; color:#a793bf; }
.order-steps li:after { content:""; position:absolute; top:17px; left:38px; right:7px; height:1px; background:#665079; }
.order-steps li:last-child:after { display:none; }.order-steps li.reached:after { background:#a8bf75; }
.order-steps li>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid #69537f; border-radius:50%; background:#352146; position:relative; z-index:1; font-size:12px; }
.order-steps li.reached { color:white; }.order-steps li.reached>span { background:#d6fa95; color:#273d14; border-color:#d6fa95; }
.order-steps svg { width:17px; height:17px; }.order-steps p { margin:10px 0 0; font-size:12px; }
.delivery-count { display:flex; justify-content:space-between; gap:16px; color:#ccbdda; font-size:11px; margin-bottom:12px; }
.order-tracker progress { display:block; width:100%; height:6px; border:0; border-radius:8px; overflow:hidden; background:#5b456f; color:#d6fa95; }
.order-tracker progress::-webkit-progress-bar { background:#5b456f; }.order-tracker progress::-webkit-progress-value { background:#d6fa95; border-radius:8px; }.order-tracker progress::-moz-progress-bar { background:#d6fa95; }
.order-section-title { display:flex; align-items:center; justify-content:space-between; margin:32px 0 18px; gap:16px; }
.order-section-title h2 { font-size:24px; letter-spacing:-.8px; margin:0; }.order-section-title>span { font-size:12px; color:#81738d; }
.customer-package { padding:26px; border:1px solid #e8dfef; border-radius:23px; background:white; margin-bottom:16px; }
.customer-package-top { display:flex; align-items:center; gap:14px; }.customer-package-top>div { flex:1; min-width:0; }
.order-platform-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:#f0e9fa; color:#8d56c4; flex-shrink:0; }.order-platform-icon.youtube { background:#fff0f0; }.order-platform-icon.tiktok { background:#f2f2f7; }
.order-platform-icon .ui-icon { width:25px; height:25px; }
.customer-package .order-eyebrow { font-size:10px; letter-spacing:.8px; margin-bottom:5px; }
.customer-package h3 { font-size:19px; letter-spacing:-.5px; line-height:1.3; margin:0; }.package-price { font-size:17px; white-space:nowrap; }
.package-specs { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 18px; }.package-specs span { font-size:11px; font-weight:600; background:#f7f4fb; color:#795f91; padding:7px 11px; border-radius:8px; }
.package-target { display:grid; gap:6px; padding-bottom:20px; border-bottom:1px solid #eee7f3; font-size:13px; overflow-wrap:anywhere; }.package-target small { color:#93829f; font-size:11px; }.package-target a { display:inline-flex; align-items:center; gap:8px; color:#6e4891; }.package-target .ui-icon { width:13px; height:13px; flex-shrink:0; }
.package-delivery { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:18px; }.package-delivery>small { font-size:11px; line-height:1.6; color:#867491; }
.delivery-badge { display:inline-flex; align-items:center; gap:6px; border-radius:30px; background:#fff3da; color:#967020; padding:7px 11px; font-size:11px; font-weight:650; white-space:nowrap; }.delivery-badge svg { width:14px; height:14px; }.delivery-badge.completed { background:#e7f7ed; color:#247253; }.delivery-badge.processing { background:#f0e8fc; color:#7950a5; }.delivery-badge.needs_attention { background:#fff0e7; color:#995833; }.delivery-badge.demo { background:#f0edf6; color:#81728b; }
.order-email-note { display:flex; align-items:flex-start; gap:14px; padding:20px 8px 4px; color:#887695; font-size:12px; line-height:1.7; }.order-email-note>svg { width:24px; height:24px; flex-shrink:0; color:#a380c5; }.order-email-note p { margin:0; overflow-wrap:anywhere; }.order-email-note strong { display:block; color:#533e67; margin-bottom:3px; font-size:13px; }
.customer-order-summary { padding:30px; border:1px solid #e7dcf0; border-radius:26px; background:#faf7fd; position:sticky; top:120px; }.customer-order-summary h2 { font-size:40px; letter-spacing:-1.7px; margin:0 0 12px; }.payment-badge { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:#65785d; }.payment-badge svg { width:15px; height:15px; }
.order-costs { border-top:1px solid #e7dfed; margin:24px 0 22px; padding-top:20px; font-size:13px; }.order-costs>div { display:flex; justify-content:space-between; gap:18px; padding:6px 0; }.order-costs dt { color:#86728f; }.order-costs dd { margin:0; font-weight:600; }.order-costs .summary-total { margin-top:12px; padding-top:18px; border-top:1px solid #e7dfed; font-size:15px; }.summary-total dt { color:#2c1b39; font-weight:650; }
.order-contact { display:grid; gap:15px; font-size:12px; border-top:1px solid #e7dfed; margin:0; padding-top:22px; }.order-contact dt { color:#907b9c; font-size:10px; margin-bottom:4px; }.order-contact dd { margin:0; line-height:1.6; overflow-wrap:anywhere; }
.order-support { display:block; border-top:1px solid #e7dfed; margin-top:24px; padding-top:20px; font-size:11px; color:#917d9b; line-height:1.8; }.order-support strong { display:flex; gap:7px; align-items:center; color:#755094; font-size:13px; margin-top:4px; }.order-support .ui-icon { width:14px; height:14px; }
.customer-order-summary>.button { width:100%; margin-top:24px; min-height:50px; font-size:13px; }
.order-next { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:46px; padding-top:30px; border-top:1px solid #eae1f1; }.order-next p { font-size:17px; letter-spacing:-.4px; color:#80698f; margin:0; }.order-next .button { min-height:50px; font-size:13px; }.order-next .ui-icon { width:19px; height:19px; }
.customer-order-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto auto 20px; gap:20px; align-items:center; padding:24px; border:1px solid #e7ddf0; background:white; border-radius:20px; color:#35213f; margin-bottom:15px; transition:border-color .15s,box-shadow .15s; }
.customer-order-card:hover { border-color:#bd9ed8; box-shadow:0 8px 20px #59367c09; }.account-order-symbol { display:grid; place-items:center; width:46px; height:46px; background:#f4edf9; color:#9570b5; border-radius:14px; }.account-order-symbol svg { width:23px; height:23px; }
.customer-order-card-info b { font-size:13px; }.customer-order-card-info small { display:block; color:#a08cac; font-size:10px; margin-top:4px; }.customer-order-card-info p { font-size:13px; margin:8px 0 0; color:#756184; }.customer-order-card-status small { display:block; font-size:10px; color:#a08cac; margin-top:6px; }.customer-order-card>strong { font-size:16px; }.customer-order-card>.ui-icon { width:17px; height:17px; color:#a387b9; }
.order-refresh:focus-visible,.order-back:focus-visible,.customer-order-card:focus-visible,.order-support:focus-visible { outline:3px solid #b890e2; outline-offset:4px; }
@media(max-width:900px) { .customer-order-layout { grid-template-columns:1fr; }.customer-order-summary { position:static; }.order-mascot { width:85px; height:85px; }.order-page.customer-order-page h1 { letter-spacing:-1.8px; } }
@media(max-width:600px) { .order-page.customer-order-page { padding-top:26px; padding-bottom:50px; }.order-page-top { margin-bottom:28px; }.order-back,.order-refresh { font-size:11px; }.order-refresh { padding:9px 12px; }.customer-order-heading { gap:12px; align-items:flex-start; }.order-mascot { width:54px; height:54px; }.customer-order-heading>div>p:last-child { font-size:13px; }.order-page.customer-order-page h1 { font-size:36px; letter-spacing:-1.8px; }.order-mode-note { padding:14px; font-size:11px; }.order-tracker { padding:23px 20px; border-radius:22px; }.order-tracker h2 { font-size:24px; }.order-steps p { font-size:10px; }.delivery-count { font-size:10px; gap:8px; }.customer-package { padding:20px; }.customer-package h3 { font-size:16px; }.order-platform-icon { width:39px; height:39px; }.package-price { font-size:14px; }.customer-order-summary { padding:24px; }.order-next { align-items:flex-start; flex-direction:column; }.order-next p { font-size:15px; }.customer-order-card { grid-template-columns:40px minmax(0,1fr) auto; gap:13px; padding:20px 16px; }.customer-order-card .customer-order-card-info { grid-column:2; grid-row:1; }.customer-order-card>strong { grid-column:3; grid-row:1; font-size:14px; }.customer-order-card .customer-order-card-status { grid-column:2 / 4; grid-row:2; }.customer-order-card>.ui-icon { display:none; }.account-order-symbol { width:38px; height:38px; }.customer-order-card-info p { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .customer-order-card { transition:none; } }