/* My Orders Tab Styles */

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Orders Header Row - Desktop Only */
.orders-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 20px;
}

.orders-header span {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: #000;
    text-align: right;
}

.orders-header .header-product {
    width: 280px;
    text-align: right;
}

.orders-header .header-price {
    flex-shrink: 0;
}

.orders-header .header-details {
    flex-shrink: 0;
}

.orders-header .header-order-number {
    flex-shrink: 0;
}

.orders-header .header-date {
    flex-shrink: 0;
}

.orders-header .header-actions {
    min-width: 60px;
}

.order-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
    gap: 20px;
}

/* Product Section - Right side */
.order-row .product-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 280px;
    justify-content: flex-start;
}

.order-row .product-image {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background-color: #f8f8f8;
}

.order-row .product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
}

.order-row .product-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    color: #000;
    margin: 0;
}

.order-row .product-supplier {
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: #000;
    margin: 0;
}

/* Divider */
.order-row .divider {
    width: 1px;
    height: 66px;
    background-color: #E8E8E8;
    flex-shrink: 0;
}

/* Price Badge */
.order-row .price-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 16px;
    background-color: #f8f8f8;
    border-radius: 38px;
    flex-shrink: 0;
}

.order-row .price-badge .currency {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: #000;
}

.order-row .price-badge .amount {
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: #000;
}

/* Recipient Section */
.order-row .recipient-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex-shrink: 0;
}

.order-row .recipient-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: #2020B3;
    margin: 0;
}

.order-row .recipient-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.order-row .recipient-details span {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #000;
}

/* Voucher Section (alternative to recipient) */
.order-row .voucher-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex-shrink: 0;
}

.order-row .voucher-row {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
}

.order-row .voucher-row .label {
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: #000;
}

.order-row .voucher-row .value {
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    color: #000;
    text-transform: uppercase;
}

/* Row Wrappers - Desktop: contents, Mobile: flex row */
.order-row .price-row,
.order-row .voucher-wrapper,
.order-row .recipient-wrapper,
.order-row .order-number-row,
.order-row .datetime-row {
    display: contents;
}

/* Order Number */
.order-row .order-number {
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    color: #000;
    text-align: right;
    flex-shrink: 0;
}

/* Date/Time Section */
.order-row .datetime-section {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.order-row .datetime-section span {
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    color: #000;
}

/* Actions Section */
.order-row .actions-section {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    flex-shrink: 0;
    min-width: 60px;
}

.order-row .action-button {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #46494F;
    transition: color 0.2s ease;
}

.order-row .action-button:hover {
    color: #2020B3;
}

.order-row .action-button svg {
    width: 20px;
    height: 20px;
}

/* Mobile Labels - Hidden on Desktop */
.order-row .mobile-label {
    display: none;
}

/* Hide header on tablet */
@media (max-width: 1200px) {
    .orders-header {
        display: none;
    }
}

/* Mobile Responsive */
@media (max-width: 1200px) {
    .order-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .order-row .divider {
        display: none;
    }

    .order-row .product-section {
        width: auto;
    }
}

@media (max-width: 768px) {
    .order-row {
        flex-direction: column;
        align-items: center;
        gap: 13px;
        padding: 20px;
    }

    .recipient-title {
        display: none;
    }

    /* Show mobile labels */
    .order-row .mobile-label {
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #000;
        max-width: 50%;
        text-align: right;
    }

    /* Vertical Dividers become horizontal */
    .order-row .divider {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #E8E8E8;
    }

    /* Product Section - First row */
    .order-row .product-section {
        width: 100%;
        justify-content: space-between;
        flex-direction: row;
    }

    .order-row .product-info {
        align-items: flex-start;
        text-align: right;
        width: 126px;
    }

    .order-row .product-name {
        font-size: 14px;
        line-height: 20px;
    }

    .order-row .product-supplier {
        font-size: 16px;
        line-height: 15px;
    }

    /* Row Wrappers - Mobile: flex row */
    .order-row .price-row,
    .order-row .voucher-wrapper,
    .order-row .recipient-wrapper,
    .order-row .order-number-row,
    .order-row .datetime-row {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Price Row */
    .order-row .price-row {
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .order-row .price-badge {
        font-size: 16px;
    }

    .order-row .price-badge .currency,
    .order-row .price-badge .amount {
        font-size: 16px;
    }

    /* Voucher Section Row */
    .order-row .voucher-wrapper {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
    }

    .order-row .voucher-section {
        width: 126px;
        align-items: flex-start;
    }

    .order-row .voucher-row {
        justify-content: flex-start;
    }

    .order-row .voucher-row .label {
        font-size: 16px;
        line-height: 15px;
    }

    .order-row .voucher-row .value {
        font-size: 14px;
        line-height: 20px;
    }

    /* Recipient Section Row */
    .order-row .recipient-wrapper {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
    }

    .order-row .recipient-section {
        width: 126px;
        align-items: flex-start;
    }

    .order-row .recipient-title {
        font-size: 16px;
        line-height: 15px;
    }

    .order-row .recipient-details {
        align-items: flex-start;
    }

    .order-row .recipient-details span {
        font-size: 14px;
        line-height: 20px;
    }

    /* Order Number Row */
    .order-row .order-number-row {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
    }

    .order-row .order-number {
        font-size: 16px;
        font-weight: 500;
        line-height: 15px;
        width: 126px;
    }

    /* DateTime Row */
    .order-row .datetime-row {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
    }

    .order-row .datetime-section {
        width: 126px;
        justify-content: flex-start;
    }

    .order-row .datetime-section span {
        font-size: 16px;
        font-weight: 500;
        line-height: 15px;
    }

    /* Actions Row */
    .order-row .actions-section {
        width: 100%;
        justify-content: center;
        min-width: auto;
    }
}