/* 
 * Premium Order History Styles
 * Brand: ZEST Eyewear
 */

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

 /* We inherit the base dashboard layout from account.css */
 /* This file only contains styles specific to the Order History content */
 
 /* --- Order Toolbar --- */
 .order-toolbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: var(--white);
     border-radius: 16px;
     box-shadow: var(--shadow-soft);
     padding: 1.5rem;
     margin-bottom: 2rem;
     flex-wrap: wrap;
     gap: 15px;
     animation: fadeIn 0.5s ease-out;
 }
 
 .order-search {
     flex: 1;
     min-width: 250px;
     position: relative;
 }
 
 .order-search i {
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-muted);
 }
 
 .order-search input {
     width: 100%;
     height: 45px;
     padding: 10px 15px 10px 45px;
     border: 1px solid var(--border-color);
     border-radius: 10px;
     font-size: 0.95rem;
     outline: none;
     transition: var(--transition);
 }
 
 .order-search input:focus {
     border-color: var(--zest-accent);
     box-shadow: 0 0 0 4px var(--input-focus-glow);
 }
 
 .order-filters {
     display: flex;
     gap: 15px;
 }
 
 .order-filters select {
     height: 45px;
     padding: 0 40px 0 15px;
     border: 1px solid var(--border-color);
     border-radius: 10px;
     font-size: 0.95rem;
     outline: none;
     cursor: pointer;
     background-color: var(--white);
     appearance: none;
     background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232d2d2d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 10px;
     transition: var(--transition);
 }
 
 .order-filters select:focus {
     border-color: var(--zest-accent);
 }
 
 /* --- Order Cards --- */
 .order-card {
     background: var(--white);
     border-radius: 16px;
     box-shadow: var(--shadow-soft);
     padding: 2rem;
     margin-bottom: 1.5rem;
     animation: fadeIn 0.5s ease-out;
     border: 1px solid transparent;
     transition: var(--transition);
 }
 
 .order-card:hover {
     box-shadow: var(--shadow-medium);
     border-color: rgba(0,0,0,0.05);
 }
 
 .order-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 1.5rem;
     padding-bottom: 1.5rem;
     border-bottom: 1px solid var(--border-color);
     flex-wrap: wrap;
     gap: 15px;
 }
 
 .order-info h3 {
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 5px;
 }
 
 .order-info p {
     font-size: 0.9rem;
     color: var(--text-muted);
     margin: 0;
 }
 
 /* Badges */
 .status-badge {
     padding: 6px 15px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     display: inline-block;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .status-processing {
     background-color: rgba(240, 90, 39, 0.1);
     color: var(--zest-accent);
 }
 
 .status-shipped {
     background-color: rgba(59, 130, 246, 0.1);
     color: #3b82f6;
 }
 
 .status-delivered {
     background-color: rgba(40, 167, 69, 0.1);
     color: #28a745;
 }
 
 .status-cancelled {
     background-color: rgba(220, 53, 69, 0.1);
     color: #dc3545;
 }
 
 /* --- Order Items Layout --- */
 .order-items-wrap {
     display: flex;
     gap: 20px;
     margin-bottom: 1.5rem;
 }
 
 .order-item-img {
     width: 100px;
     height: 100px;
     background: var(--bg-light);
     border-radius: 12px;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }
 
 .order-item-img img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
 }
 
 .order-item-img .qty-badge {
     position: absolute;
     top: -8px;
     right: -8px;
     background: var(--text-dark);
     color: var(--white);
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.75rem;
     font-weight: 600;
 }
 
 .order-item-details {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .order-item-title {
     font-size: 1.05rem;
     font-weight: 600;
     color: var(--text-dark);
     margin-bottom: 5px;
 }
 
 .order-item-meta {
     font-size: 0.9rem;
     color: var(--text-muted);
     margin-bottom: 5px;
 }
 
 .order-item-price {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--zest-accent);
 }
 
 /* --- Order Timeline --- */
 .order-timeline {
     display: flex;
     justify-content: space-between;
     position: relative;
     margin: 2rem 0;
     padding: 0 10px;
 }
 
 .order-timeline::before {
     content: '';
     position: absolute;
     top: 15px;
     left: 20px;
     right: 20px;
     height: 2px;
     background: var(--border-color);
     z-index: 1;
 }
 
 .timeline-progress {
     position: absolute;
     top: 15px;
     left: 20px;
     height: 2px;
     background: var(--zest-accent);
     z-index: 2;
     transition: width 1s ease-in-out;
 }
 
 .timeline-step {
     position: relative;
     z-index: 3;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     text-align: center;
 }
 
 .timeline-icon {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--white);
     border: 2px solid var(--border-color);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.85rem;
     color: var(--text-muted);
     transition: var(--transition);
 }
 
 .timeline-step.completed .timeline-icon,
 .timeline-step.active .timeline-icon {
     background: var(--zest-accent);
     border-color: var(--zest-accent);
     color: var(--white);
 }
 
 .timeline-text {
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--text-muted);
 }
 
 .timeline-step.completed .timeline-text,
 .timeline-step.active .timeline-text {
     color: var(--text-dark);
     font-weight: 600;
 }
 
 /* --- Actions --- */
 .order-actions {
     display: flex;
     justify-content: flex-end;
     gap: 15px;
     border-top: 1px solid var(--border-color);
     padding-top: 1.5rem;
     flex-wrap: wrap;
 }
 
 .btn-track {
     background-color: var(--zest-accent);
     color: var(--white);
     border: none;
     border-radius: 10px;
     padding: 10px 20px;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }
 
 .btn-track:hover {
     background-color: var(--zest-accent-hover);
     color: var(--white);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(240, 90, 39, 0.3);
 }
 
 .btn-details {
     background-color: transparent;
     color: var(--text-dark);
     border: 1px solid var(--border-color);
     border-radius: 10px;
     padding: 10px 20px;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }
 
 .btn-details:hover {
     background-color: var(--bg-light);
     border-color: var(--text-dark);
     color: var(--text-dark);
 }
 
 /* --- Empty State --- */
 .empty-orders {
     background: var(--white);
     border-radius: 16px;
     box-shadow: var(--shadow-soft);
     padding: 4rem 2rem;
     text-align: center;
     animation: fadeIn 0.5s ease-out;
 }
 
 .empty-orders i {
     font-size: 4rem;
     color: var(--border-color);
     margin-bottom: 1.5rem;
 }
 
 .empty-orders h3 {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 10px;
 }
 
 .empty-orders p {
     color: var(--text-muted);
     margin-bottom: 2rem;
 }
 
 /* --- Responsive --- */
 @media (max-width: 768px) {
     .order-toolbar {
         flex-direction: column;
         align-items: stretch;
     }
     
     .order-filters {
         flex-direction: column;
     }
     
     .order-header {
         flex-direction: column;
     }
     
     .order-timeline {
         display: none; /* Hide complex timeline on small screens */
     }
     
     .order-actions {
         flex-direction: column;
     }
     
     .btn-track, .btn-details {
         width: 100%;
         justify-content: center;
     }
 }