.store-icon { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store-nav-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; }
.customer-store-nav .nav-link.is-current { background: #f2eaf8; color: #603085; }
.store-language { display: inline-flex; gap: .15rem; padding: .22rem; border: 1px solid #e8dfee; border-radius: .7rem; background: #f9f6fb; }
.store-language button { min-height: 32px; padding: .3rem .5rem; border: 0; border-radius: .5rem; background: transparent; color: #786b7e; font-size: .72rem; font-weight: 600; }
.store-language button[aria-pressed="true"] { background: white; color: #603085; box-shadow: 0 2px 7px #40205f16; }
.store-profile-trigger { display: flex; align-items: center; gap: .6rem; max-width: 230px; padding: .3rem .6rem .3rem .3rem; border: 1px solid #e8dfee; border-radius: 3rem; background: #fff; color: #392640; }
.store-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.store-avatar.is-initials { display: grid; place-items: center; background: #ede2f5; color: #603085; font-size: .8rem; font-weight: 600; }
.store-profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.store-profile-trigger > .store-icon { width: .9rem; }
.store-profile-menu { min-width: 220px; padding: .6rem; border: 1px solid #e8dfee; border-radius: 1rem; box-shadow: 0 18px 48px #40205f20; }
.store-profile-caption { padding: .4rem .75rem .65rem; color: #918397; font-size: .7rem; }
.store-profile-menu .dropdown-item { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: .6rem; color: #432c4e; font-size: .8rem; }
.store-profile-menu .dropdown-item:hover, .store-profile-menu .dropdown-item:focus { background: #f2eaf8; }
.orders-workspace { min-height: 65vh; padding: 3rem 0 4rem; background: #faf7fc; }
.orders-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.orders-page-head .orders-eyebrow { margin: 0 0 .55rem; color: #80559d; font-size: .67rem; font-weight: 600; letter-spacing: .16em; }
.orders-page-head h1 { margin: 0 0 .6rem; font-size: clamp(2rem, 4vw, 3rem); }
.orders-page-head p:not(.orders-eyebrow) { margin: 0; color: #89788e; font-size: .85rem; }
.orders-sections { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
.orders-section-card { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.35rem; border: 1px solid #e9e0ee; border-radius: 1.1rem; background: white; color: #38243f; text-decoration: none; box-shadow: 0 4px 18px #47235704; transition: border-color .2s, transform .2s; }
.orders-section-card:hover { transform: translateY(-2px); color: #603085; border-color: #b595cd; }
.orders-section-card.is-selected { border-color: #8251a5; box-shadow: 0 0 0 1px #8251a5, 0 8px 24px #6030850d; }
.orders-section-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: .85rem; background: #eee6f6; color: #79509a; }
.is-received .orders-section-icon { background: #e7f4ec; color: #36815a; }
.is-paid .orders-section-icon { background: #e9effc; color: #567cc2; }
.is-pending .orders-section-icon { background: #fff2dc; color: #b48437; }
.orders-section-card > span:nth-child(2) { display: grid; gap: .15rem; }
.orders-section-card strong { font-size: 1.6rem; line-height: 1.2; }
.orders-section-card > span:nth-child(2) > span { color: #8c7c93; font-size: .78rem; }
.orders-section-arrow { position: absolute; top: .8rem; right: .9rem; color: #baabc2; font-size: .9rem; }
.orders-list-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.1rem; }
.orders-list-heading h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.orders-list-heading p { margin: 0; color: #917e97; font-size: .76rem; }
.orders-list-heading > a { flex-shrink: 0; font-size: .76rem; text-decoration: none; }
.orders-card-list { display: grid; gap: 1.25rem; }
.customer-order-card { overflow: hidden; border: 1px solid #e9e0ee; border-radius: 1.2rem; background: white; box-shadow: 0 6px 24px #40205f04; }
.customer-order-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f2edf5; }
.order-number { font-size: .88rem; font-weight: 600; text-decoration: none; }
.customer-order-head p { margin: .2rem 0 0; font-size: .7rem; color: #9a8ba1; }
.order-status-pill { padding: .35rem .7rem; border-radius: 2rem; color: #8357a1; background: #f3ecf8; font-size: .7rem; white-space: nowrap; }
.order-status-pill.is-complete { color: #347451; background: #eaf6ee; }
.order-status-pill.is-stopped { color: #a35464; background: #faedf0; }
.customer-order-body { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 1.5rem; }
.order-product-list { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.order-product { display: flex; align-items: center; gap: .7rem; }
.order-product > div { display: grid; gap: .15rem; }
.order-product strong { font-size: .78rem; }
.order-product small, .order-product-list > small { color: #97869d; font-size: .7rem; }
.order-total { display: grid; gap: .18rem; text-align: right; white-space: nowrap; }
.order-total span, .order-total small { font-size: .7rem; color: #99889e; }
.order-total strong { font-size: 1.1rem; }
.order-progress { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 1.5rem 1.4rem; padding: 1.1rem; border: 1px solid #f0e9f4; border-radius: .85rem; background: #fcfafd; list-style: none; gap: 1rem; }
.order-progress li { display: flex; align-items: center; gap: .65rem; }
.order-progress li + li { border-left: 1px solid #e8deef; padding-left: 1rem; }
.order-progress-dot { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #e1d5e9; border-radius: 50%; color: #b19ac0; }
.order-progress-dot .store-icon { width: 15px; height: 15px; }
.order-progress .is-done .order-progress-dot { background: #ebe0f4; border-color: #ebe0f4; color: #78429f; }
.order-progress .is-stopped .order-progress-dot { background: #faedf0; color: #a35464; }
.order-progress li > div { display: grid; gap: .2rem; }
.order-progress strong { font-size: .75rem; }
.order-progress small { font-size: .65rem; color: #97849f; }
.order-card-footer { position: relative; padding: 0 1.5rem; border-top: 1px solid #f2edf5; }
.order-activity summary { display: flex; width: fit-content; align-items: center; gap: .45rem; padding: 1rem 0; color: #7a598e; cursor: pointer; font-size: .74rem; list-style: none; }
.order-activity summary::-webkit-details-marker { display: none; }
.order-activity summary .store-icon { width: 15px; height: 15px; }
.order-activity[open] summary > svg:last-child { transform: rotate(180deg); }
.order-detail-link { position: absolute; top: 1rem; right: 1.5rem; font-size: .74rem; font-weight: 500; text-decoration: none; }
.order-event-list { list-style: none; padding: 0 0 .6rem; margin: 0; }
.order-event-list li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: .8rem; padding: .3rem 0 1.15rem; }
.order-event-list li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: -4px; width: 1px; background: #e9deef; }
.order-event-dot { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #f4eef8; color: #926ca9; }
.order-event-dot .store-icon { width: 13px; height: 13px; }
.order-event-list strong { font-size: .72rem; }
.order-event-list p { margin: .15rem 0 0; color: #9a89a0; font-size: .7rem; }
.order-event-list time { color: #a090a7; font-size: .65rem; padding-top: .2rem; }
.orders-empty { padding: 3.5rem 1.5rem; text-align: center; background: white; border: 1px dashed #dacbe5; border-radius: 1.2rem; }
.orders-empty > span { display: grid; width: 64px; height: 64px; place-items: center; margin: 0 auto 1.25rem; border-radius: 1.2rem; background: #f3eaf9; color: #9368ad; }
.orders-empty > span svg { width: 28px; height: 28px; }
.orders-empty h2 { font-size: 1.3rem; }
.orders-empty p { color: #94839c; font-size: .8rem; }
html[lang="mai"] body { line-height: 1.8; }
@media(max-width:1199px) { .customer-store-nav .navbar-nav { gap: .15rem !important; } .store-profile-trigger { max-width: 180px; } .customer-store-nav .nav-link { padding-inline: .5rem !important; font-size: .75rem; } }
@media(max-width:991px) { .customer-store-nav .navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem !important; } .store-profile { margin-left: auto; } .customer-store-nav .nav-action { width: auto; margin: 0; } .customer-store-nav .store-profile-menu { position: absolute; right: 0; left: auto; } .orders-section-card { padding: 1rem; gap: .6rem; } }
@media(max-width:640px) { .orders-workspace { padding: 1.75rem 0 2.5rem; } .orders-page-head { align-items: start; flex-direction: column; gap: 1rem; } .orders-page-head h1 { font-size: 2rem; } .orders-sections { grid-template-columns: repeat(2,1fr); gap: .6rem; margin-bottom: 1.5rem; } .orders-section-card strong { font-size: 1.4rem; } .orders-section-icon { width: 38px; height: 38px; flex-basis: 38px; } .orders-list-heading { flex-direction: column; gap: .5rem; } .customer-order-head, .customer-order-body { padding: 1rem; } .customer-order-body { align-items: start; flex-direction: column; gap: 1rem; } .order-total { text-align: left; } .order-product-list { gap: .8rem; } .order-progress { margin: 0 1rem 1rem; padding: .8rem; grid-template-columns: 1fr; gap: .8rem; } .order-progress li + li { padding-left: 0; border-left: 0; } .order-card-footer { padding: 0 1rem; } .order-detail-link { right: 1rem; } .order-event-list li { grid-template-columns: 28px 1fr; gap: .35rem .65rem; } .order-event-list time { grid-column: 2; padding: 0; } .customer-order-head { align-items: start; } .order-status-pill { font-size: .63rem; } }
@media(prefers-reduced-motion:reduce) { .orders-section-card { transition: none; } }