/* ==============================
ORDERS PAGE
============================== */
.orders-container {
max-width: 100%-10%;
margin: 30px auto;
padding: 0 20px 50px;
animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ==============================
EMPTY STATE
============================== */
.empty-orders {
background: var(--white);
border-radius: 24px;
padding: 80px 30px;
text-align: center;
box-shadow: 0 15px 40px var(--shadow);
border: 2px dashed var(--border);
max-width: 600px;
margin: 50px auto;
animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.95; }
}

.empty-orders i {
font-size: 80px;
color: var(--accent-brown);
margin-bottom: 25px;
animation: float 3s infinite ease-in-out;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.empty-orders h3 {
font-size: 28px;
margin-bottom: 12px;
color: var(--primary-brown);
font-weight: 800;
background: linear-gradient(135deg, var(--primary-brown), var(--accent-brown));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.empty-orders p {
color: var(--text-dark);
margin-bottom: 30px;
font-size: 18px;
line-height: 1.6;
max-width: 500px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}

.empty-orders .btn {
padding: 16px 36px;
border-radius: 14px;
font-size: 17px;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-brown), var(--dark-brown));
color: var(--white);
border: none;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 20px rgba(111, 78, 55, 0.25);
position: relative;
overflow: hidden;
}

.empty-orders .btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
transform: translateX(-100%);
transition: transform 0.6s ease;
}

.empty-orders .btn:hover::before {
transform: translateX(100%);
}

.empty-orders .btn:hover {
transform: translateY(-4px);
box-shadow: 0 12px 25px rgba(111, 78, 55, 0.35);
}

.empty-orders .btn:active {
transform: translateY(-2px);
}

.empty-orders .btn i {
font-size: 20px;
animation: none;
transition: transform 0.3s ease;
}

.empty-orders .btn:hover i {
transform: translateX(5px);
}

/* ==============================
ORDERS HEADER
============================== */
.orders-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 20px;
background: var(--white);
padding: 25px;
border-radius: 20px;
box-shadow: 0 8px 20px var(--shadow);
}

.orders-header h2 {
font-size: 32px;
color: var(--primary-brown);
font-weight: 800;
position: relative;
display: inline-block;
}

.orders-header h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 70px;
height: 4px;
background: linear-gradient(to right, var(--primary-brown), var(--accent-brown));
border-radius: 2px;
}

.orders-filters {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}

.filter-select {
padding: 12px 40px 12px 16px;
border-radius: 12px;
border: 2px solid var(--border);
background: var(--input-bg);
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
cursor: pointer;
transition: var(--transition);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23967259' viewBox='0 0 20 20'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}

.filter-select:hover {
border-color: var(--accent-brown);
box-shadow: 0 4px 12px rgba(150, 114, 89, 0.1);
}

.filter-select:focus {
outline: none;
border-color: var(--accent-brown);
box-shadow: 0 0 0 4px rgba(150, 114, 89, 0.15);
}

/* ==============================
ORDER CARD
============================== */
.order-card {
background: var(--white);
border-radius: 20px;
margin-bottom: 20px;
box-shadow: 0 10px 30px var(--shadow);
overflow: hidden;
transition: var(--transition);
border: 2px solid transparent;
position: relative;
}

.order-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(111, 78, 55, 0.15);
border-color: var(--border);
}

.order-card.active {
box-shadow: 0 15px 40px rgba(111, 78, 55, 0.2);
border-color: var(--accent-brown);
}

.order-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(to bottom, var(--primary-brown), var(--accent-brown));
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s ease;
}

.order-card:hover::before,
.order-card.active::before {
transform: scaleY(1);
}

/* ==============================
ORDER HEADER
============================== */
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 28px;
cursor: pointer;
background: linear-gradient(135deg, rgba(111, 78, 55, 0.03), rgba(219, 193, 172, 0.03));
position: relative;
overflow: hidden;
}

.order-header::after {
content: '';
position: absolute;
bottom: 0;
left: 28px;
right: 28px;
height: 1px;
background: linear-gradient(to right, transparent, var(--border), transparent);
}

.order-left {
flex: 1;
min-width: 0;
}

.order-id {
font-weight: 800;
font-size: 18px;
color: var(--primary-brown);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}

.order-id i {
color: var(--accent-brown);
font-size: 20px;
}

.order-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}

.order-date, .order-total {
font-size: 14px;
color: var(--text-dark);
opacity: 0.9;
display: flex;
align-items: center;
gap: 6px;
}

.order-total {
font-weight: 700;
color: var(--dark-brown);
font-size: 16px;
}

/* ==============================
HEADER RIGHT
============================== */
.order-right {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.status-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}

.arrow {
margin-left: 10px;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: var(--accent-brown);
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(150, 114, 89, 0.1);
}

.order-card.active .arrow {
transform: rotate(180deg);
background: rgba(111, 78, 55, 0.15);
}

/* ==============================
STATUS BADGES
============================== */
.status-badge {
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: var(--transition);
position: relative;
overflow: hidden;
}

.status-badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-100%);
transition: transform 0.3s ease;
}

.status-badge:hover::before {
transform: translateX(100%);
}

.status-badge i {
font-size: 12px;
}

/* Order status */
.status-pending {
background: linear-gradient(135deg, #FFF4CC, #FFE699);
color: #9C7C19;
border: 1px solid rgba(156, 124, 25, 0.2);
}

.status-preparing {
background: linear-gradient(135deg, #E6F1FF, #B3D4FF);
color: #2B6CB0;
border: 1px solid rgba(43, 108, 176, 0.2);
}

.status-completed {
background: linear-gradient(135deg, #E8F8F0, #C1E9D4);
color: #1E8E5A;
border: 1px solid rgba(30, 142, 90, 0.2);
}

.status-cancelled {
background: linear-gradient(135deg, #FDEAEA, #F9C6C6);
color: #B42318;
border: 1px solid rgba(180, 35, 24, 0.2);
}

/* Payment status */
.payment-paid {
background: linear-gradient(135deg, #E8F8F0, #C1E9D4);
color: #1E8E5A;
border: 1px solid rgba(30, 142, 90, 0.2);
}

.payment-unpaid {
background: linear-gradient(135deg, #FDEAEA, #F9C6C6);
color: #B42318;
border: 1px solid rgba(180, 35, 24, 0.2);
}

.payment-unpaid small {
font-size: 11px;
display: block;
font-weight: 600;
margin-top: 2px;
opacity: 0.9;
}

/* ==============================
BODY (ACCORDION)
============================== */
.order-body {
padding: 0 28px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.4s ease;
background: var(--off-white);
}

.order-card.active .order-body {
padding: 28px 28px 32px;
max-height: 800px;
}

.order-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}

@media (max-width: 768px) {
.order-details {
grid-template-columns: 1fr;
gap: 20px;
}
}

.order-info-section, .order-items-section {
background: var(--white);
padding: 25px;
border-radius: 16px;
border: 2px solid var(--border);
box-shadow: 0 4px 12px var(--shadow);
}

.order-info-section h4, .order-items-section h4 {
font-size: 18px;
color: var(--primary-brown);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}

.order-info-section h4 i, .order-items-section h4 i {
color: var(--accent-brown);
}

.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}

.info-item {
margin-bottom: 12px;
}

.info-item strong {
color: var(--primary-brown);
font-weight: 700;
display: block;
margin-bottom: 4px;
font-size: 14px;
}

.info-item span {
color: var(--text-dark);
font-size: 15px;
line-height: 1.5;
display: block;
}

/* Order Items List */
.order-items-list {
max-height: 300px;
overflow-y: auto;
padding-right: 10px;
}

.order-items-list::-webkit-scrollbar {
width: 6px;
}

.order-items-list::-webkit-scrollbar-track {
background: var(--beige);
border-radius: 10px;
}

.order-items-list::-webkit-scrollbar-thumb {
background: var(--accent-brown);
border-radius: 10px;
}

.order-item {
display: flex;
gap: 15px;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
align-items: center;
}

.order-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.order-item-img {
width: 70px;
height: 70px;
border-radius: 12px;
object-fit: cover;
border: 2px solid var(--border);
transition: var(--transition);
}

.order-item:hover .order-item-img {
transform: scale(1.05);
border-color: var(--accent-brown);
}

.order-item-info {
flex: 1;
min-width: 0;
}

.order-item-name {
font-weight: 700;
color: var(--primary-brown);
margin-bottom: 6px;
font-size: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}

.order-item-meta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}

.order-item-quantity {
font-size: 14px;
color: var(--text-dark);
background: var(--off-white);
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(--border);
font-weight: 600;
}

.order-item-subtotal {
font-weight: 700;
color: var(--dark-brown);
font-size: 16px;
}

/* Order Actions */
.order-actions {
display: flex;
gap: 15px;
margin-top: 25px;
padding-top: 25px;
border-top: 2px solid var(--border);
flex-wrap: wrap;
}

.order-actions .btn {
padding: 12px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 8px;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}

.order-actions .btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-100%);
transition: transform 0.3s ease;
}

.order-actions .btn:hover::before {
transform: translateX(100%);
}

.order-actions .btn-primary {
background: linear-gradient(135deg, var(--primary-brown), var(--dark-brown));
color: var(--white);
box-shadow: 0 4px 12px rgba(111, 78, 55, 0.2);
}

.order-actions .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(111, 78, 55, 0.3);
}

.order-actions .btn-secondary {
background: var(--white);
color: var(--text-dark);
border-color: var(--border);
box-shadow: 0 4px 12px rgba(111, 78, 55, 0.1);
}

.order-actions .btn-secondary:hover {
background: var(--off-white);
border-color: var(--accent-brown);
transform: translateY(-3px);
}

.order-actions .btn i {
font-size: 16px;
transition: transform 0.3s ease;
}

.order-actions .btn:hover i {
transform: translateX(3px);
}

/* ==============================
RESPONSIVE DESIGN
============================== */

/* Desktop & Laptop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
.orders-container {
max-width: 1200px;
}

text
.orders-header {
    padding: 22px;
}

.orders-header h2 {
    font-size: 30px;
}

.order-header {
    padding: 20px 25px;
}

.order-body {
    padding: 0 25px;
}

.order-card.active .order-body {
    padding: 25px 25px 30px;
}

.info-grid {
    grid-template-columns: 1fr;
}
}

/* Tablets Landscape & Small Laptops (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
.orders-container {
max-width: 100%;
padding: 0 20px 40px;
}

text
.orders-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 20px;
}

.orders-header h2 {
    font-size: 28px;
}

.orders-filters {
    width: 100%;
    justify-content: space-between;
}

.filter-select {
    flex: 1;
    min-width: 200px;
}

.order-header {
    padding: 18px 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.order-right {
    width: 100%;
    justify-content: space-between;
}

.status-group {
    order: 1;
}

.arrow {
    order: 2;
}

.order-body {
    padding: 0 22px;
}

.order-card.active .order-body {
    padding: 22px 22px 28px;
}

.order-info-section, .order-items-section {
    padding: 20px;
}

.empty-orders {
    padding: 60px 25px;
    margin: 40px auto;
}

.empty-orders i {
    font-size: 70px;
}

.empty-orders h3 {
    font-size: 26px;
}

.empty-orders p {
    font-size: 17px;
}
}

/* Tablets Portrait & Large Mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
.orders-container {
padding: 0 16px 30px;
}

text
.orders-header {
    padding: 18px;
    margin-bottom: 25px;
    border-radius: 18px;
}

.orders-header h2 {
    font-size: 26px;
}

.orders-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.filter-select {
    width: 100%;
    padding: 14px 40px 14px 16px;
}

.order-header {
    padding: 16px 20px;
    gap: 12px;
}

.order-id {
    font-size: 17px;
    margin-bottom: 6px;
}

.order-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.order-right {
    width: 100%;
    justify-content: space-between;
}

.status-group {
    flex-wrap: wrap;
    gap: 8px;
}

.status-badge {
    padding: 6px 12px;
    font-size: 12px;
}

.arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.order-body {
    padding: 0 20px;
}

.order-card.active .order-body {
    padding: 20px 20px 25px;
}

.order-info-section, .order-items-section {
    padding: 18px;
    border-radius: 14px;
}

.order-items-list {
    max-height: 250px;
}

.order-item {
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.order-item-img {
    width: 60px;
    height: 60px;
}

.order-actions {
    margin-top: 20px;
    padding-top: 20px;
    gap: 12px;
}

.order-actions .btn {
    padding: 10px 18px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
}

.empty-orders {
    padding: 50px 20px;
    margin: 30px auto;
    border-radius: 20px;
}

.empty-orders i {
    font-size: 60px;
    margin-bottom: 20px;
}

.empty-orders h3 {
    font-size: 24px;
}

.empty-orders p {
    font-size: 16px;
    margin-bottom: 25px;
}

.empty-orders .btn {
    padding: 14px 30px;
    font-size: 16px;
}
}

/* Mobile Devices (320px - 575px) */
@media (max-width: 575px) {
.orders-container {
padding: 0 12px 25px;
}

text
.orders-header {
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 16px;
}

.orders-header h2 {
    font-size: 22px;
}

.orders-header h2::after {
    width: 50px;
    height: 3px;
    bottom: -6px;
}

.filter-select {
    padding: 13px 36px 13px 14px;
    font-size: 14px;
    border-radius: 10px;
}

.order-card {
    border-radius: 16px;
    margin-bottom: 15px;
}

.order-header {
    padding: 14px 16px;
}

.order-id {
    font-size: 16px;
}

.order-id i {
    font-size: 18px;
}

.order-date, .order-total {
    font-size: 13px;
}

.status-group {
    gap: 6px;
}

.status-badge {
    padding: 5px 10px;
    font-size: 11px;
}

.arrow {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.order-body {
    padding: 0 16px;
}

.order-card.active .order-body {
    padding: 16px 16px 22px;
}

.order-info-section, .order-items-section {
    padding: 16px;
    border-radius: 12px;
}

.order-info-section h4, .order-items-section h4 {
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.info-item strong {
    font-size: 13px;
}

.info-item span {
    font-size: 14px;
}

.order-items-list {
    max-height: 220px;
}

.order-item {
    padding-bottom: 12px;
    margin-bottom: 12px;
    gap: 12px;
}

.order-item-img {
    width: 55px;
    height: 55px;
}

.order-item-name {
    font-size: 14px;
}

.order-item-quantity {
    font-size: 12px;
    padding: 3px 10px;
}

.order-item-subtotal {
    font-size: 15px;
}

.order-actions {
    margin-top: 18px;
    padding-top: 18px;
    gap: 10px;
}

.order-actions .btn {
    padding: 10px 16px;
    font-size: 12.5px;
    border-radius: 10px;
}

.empty-orders {
    padding: 40px 16px;
    margin: 25px auto;
    border-radius: 18px;
}

.empty-orders i {
    font-size: 50px;
    margin-bottom: 15px;
}

.empty-orders h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.empty-orders p {
    font-size: 15px;
    margin-bottom: 20px;
}

.empty-orders .btn {
    padding: 12px 24px;
    font-size: 15px;
}
}

/* Extra Small Mobile (max-width: 374px) */
@media (max-width: 374px) {
.orders-container {
padding: 0 10px 20px;
}

text
.orders-header h2 {
    font-size: 20px;
}

.order-header {
    padding: 12px 14px;
}

.order-id {
    font-size: 15px;
}

.status-badge {
    padding: 4px 8px;
    font-size: 10px;
}

.order-body {
    padding: 0 14px;
}

.order-card.active .order-body {
    padding: 14px 14px 18px;
}

.order-info-section, .order-items-section {
    padding: 14px;
}

.order-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
}

.order-item-img {
    width: 70px;
    height: 70px;
}

.order-item-meta {
    justify-content: center;
}

.empty-orders {
    padding: 35px 14px;
}

.empty-orders i {
    font-size: 45px;
}

.empty-orders h3 {
    font-size: 20px;
}

.empty-orders p {
    font-size: 14px;
}
}

/* ==============================
ACCESSIBILITY
============================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
.order-card {
border: 2px solid var(--dark-brown);
}

text
.status-badge {
    border: 2px solid currentColor;
}

.order-info-section, .order-items-section {
    border: 2px solid var(--dark-brown);
}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.orders-container,
.order-card,
.empty-orders,
.status-badge,
.order-actions .btn,
.empty-orders .btn {
animation: none !important;
transition: none !important;
}

text
.order-card:hover,
.order-actions .btn:hover,
.empty-orders .btn:hover {
    transform: none !important;
}

.order-body {
    transition: max-height 0.3s ease !important;
}

.empty-orders i {
    animation: none !important;
}
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
.order-actions .btn,
.empty-orders .btn,
.status-badge {
min-height: 48px;
min-width: 48px;
}

text
.order-header {
    padding: 20px;
}

.order-actions .btn:active,
.empty-orders .btn:active {
    transform: scale(0.98) !important;
}

.order-items-list {
    -webkit-overflow-scrolling: touch;
}
}

/* Focus Styles for Accessibility */
.order-header:focus-visible,
.filter-select:focus-visible,
.status-badge:focus-visible,
.order-actions .btn:focus-visible,
.empty-orders .btn:focus-visible {
outline: 3px solid var(--accent-brown);
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(150, 114, 89, 0.2);
}

/* ==============================
ORDER FILTER DROPDOWN
============================== */
.order-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.order-filter-bar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 14px 44px 14px 18px;
    min-width: 180px;

    border-radius: 14px;
    border: 2px solid var(--border);

    background-color: var(--white);
    color: var(--text-dark);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;

    transition: var(--transition);

    /* Custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23967259' viewBox='0 0 20 20'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;

    box-shadow: 0 4px 12px rgba(111, 78, 55, 0.08);
}

/* Hover */
.order-filter-bar select:hover {
    border-color: var(--accent-brown);
    box-shadow: 0 8px 20px rgba(150, 114, 89, 0.18);
    transform: translateY(-2px);
}

/* Focus */
.order-filter-bar select:focus {
    outline: none;
    border-color: var(--accent-brown);
    box-shadow:
        0 0 0 4px rgba(150, 114, 89, 0.18),
        0 8px 20px rgba(150, 114, 89, 0.2);
}

/* Active (click) */
.order-filter-bar select:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(111, 78, 55, 0.15);
}

/* Disabled (future-proof) */
.order-filter-bar select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--beige);
}

/* ==============================
MOBILE OPTIMIZATION
============================== */
@media (max-width: 575px) {
    .order-filter-bar select {
        width: 100%;
        min-width: unset;
        font-size: 14px;
        padding: 14px 42px 14px 16px;
        border-radius: 12px;
    }
}

/* ==============================
ACCESSIBILITY
============================== */
.order-filter-bar select:focus-visible {
    outline: 3px solid var(--accent-brown);
    outline-offset: 3px;
}