/* ============================================================
   my_orders.css  — Customer orders list & order-details modal
   Used by: customer/my_orders.blade.php
   RTL-aware via CSS logical properties throughout
   ============================================================ */

/* ── CSS Variables ── */
:root {
    --orders-primary:       #224229;
    --orders-primary-light: #2d5535;
    --orders-primary-faint: #eef4ef;
    --orders-border:        #e8ecf0;
    --orders-text:          #1a1a2e;
    --orders-muted:         #6c757d;
    --orders-radius:        14px;
    --orders-light:         #f7f8fa;
}

/* ── Section ── */
.orders-section {
    background:  var(--orders-light);
    padding:     48px 0;
    min-height:  calc(100vh - 200px);
}

/* ── Card ── */
.orders-card {
    background:    #fff;
    border-radius: var(--orders-radius);
    box-shadow:    0 4px 32px rgba(34,66,41,.10);
    padding:       36px;
    width:         100%;
}

.orders-card__header {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 28px;
}
.orders-card__header i  { font-size: 32px; color: var(--orders-primary); }
.orders-card__header h2 { font-size: 20px; font-weight: 800; color: var(--orders-text); margin: 0; }

/* ── Table ── */
.orders-table {
    width:            100%;
    border-collapse:  separate;
    border-spacing:   0;
    font-size:        13.5px;
}
.orders-table thead tr { background: var(--orders-primary); color: #fff; }
.orders-table thead th {
    padding:         12px 14px;
    font-weight:     700;
    font-size:       12px;
    text-transform:  uppercase;
    letter-spacing:  .4px;
    border:          none;
    white-space:     nowrap;
}
.orders-table thead th:first-child { border-start-start-radius: 10px; }
.orders-table thead th:last-child  { border-start-end-radius: 10px; }

.orders-table tbody tr {
    border-bottom: 1px solid var(--orders-border);
    transition:    background .15s;
}
.orders-table tbody tr:hover { background: var(--orders-primary-faint); }
.orders-table tbody td {
    padding:        12px 14px;
    color:          var(--orders-text);
    border:         none;
    vertical-align: middle;
}

/* ── Status badges ── */
.badge-status {
    display:       inline-block;
    padding:       4px 12px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   700;
}
.badge-status--paid    { background: #e6f4ea; color: #1e7e34; }
.badge-status--unpaid  { background: #fdecea; color: #c0392b; }
.badge-status--pending { background: #fff8e1; color: #b8860b; }

/* ── Action buttons ── */
.btn-print {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    background:      var(--orders-primary);
    color:           #fff;
    border:          none;
    border-radius:   20px;
    padding:         6px 14px;
    font-size:       12px;
    font-weight:     700;
    text-decoration: none;
    transition:      all .2s;
    white-space:     nowrap;
}
.btn-print:hover {
    background: var(--orders-primary-light);
    color:      #fff;
    transform:  translateY(-1px);
}

.btn-details {
    display:              inline-flex;
    align-items:          center;
    gap:                  5px;
    background:           transparent;
    color:                var(--orders-primary);
    border:               1.5px solid var(--orders-primary);
    border-radius:        20px;
    padding:              6px 14px;
    font-size:            12px;
    font-weight:          700;
    cursor:               pointer;
    transition:           all .2s;
    white-space:          nowrap;
    margin-inline-start:  5px; /* logical → RTL safe */
}
.btn-details:hover {
    background: var(--orders-primary);
    color:      #fff;
    transform:  translateY(-1px);
}

/* ── Empty state ── */
.orders-empty {
    text-align: center;
    padding:    48px 0;
    color:      var(--orders-muted);
}
.orders-empty i {
    font-size:     48px;
    color:         #d0ddd2;
    margin-bottom: 14px;
    display:       block;
}

/* ── Order Details Modal ── */
.od-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.45);
    z-index:         9999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
}
.od-overlay.active { display: flex; }

.od-modal {
    background:    #fff;
    border-radius: var(--orders-radius);
    box-shadow:    0 8px 48px rgba(34,66,41,.18);
    width:         100%;
    max-width:     680px;
    max-height:    90vh;
    overflow-y:    auto;
    animation:     odIn .2s ease;
}
@keyframes odIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.od-header {
    background:      var(--orders-primary);
    color:           #fff;
    padding:         18px 24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        sticky;
    top:             0;
    z-index:         1;
}
.od-header h3 { font-size: 16px; font-weight: 800; margin: 0; }

.od-close {
    background:  none;
    border:      none;
    color:       #fff;
    font-size:   20px;
    cursor:      pointer;
    line-height: 1;
    opacity:     .8;
    transition:  opacity .2s;
}
.od-close:hover { opacity: 1; }

.od-body { padding: 24px; }

.od-meta {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px 24px;
    background:            var(--orders-primary-faint);
    border-radius:         10px;
    padding:               16px;
    margin-bottom:         20px;
    font-size:             13px;
}
.od-meta__item strong {
    color:          var(--orders-primary);
    display:        block;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom:  2px;
}

.od-section-title {
    font-size:      12px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--orders-primary);
    margin-bottom:  10px;
}

/* ── Modal products table ── */
.od-items-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
    margin-bottom:   20px;
}
.od-items-table thead tr { background: var(--orders-primary); color: #fff; }
.od-items-table thead th {
    padding:        9px 12px;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    text-align:     start; /* logical → RTL safe */
}
.od-items-table thead th:first-child { border-start-start-radius: 8px; }
.od-items-table thead th:last-child  { border-start-end-radius: 8px; }
.od-items-table tbody tr             { border-bottom: 1px solid var(--orders-border); }
.od-items-table tbody tr:last-child  { border-bottom: none; }
.od-items-table tbody td             { padding: 10px 12px; vertical-align: middle; color: var(--orders-text); }

.od-product-img {
    width:         44px;
    height:        44px;
    object-fit:    cover;
    border-radius: 8px;
    border:        1px solid var(--orders-border);
}

.od-color-dot {
    display:            inline-block;
    width:              10px;
    height:             10px;
    border-radius:      50%;
    margin-inline-end:  4px; /* logical → RTL safe */
    vertical-align:     middle;
    border:             1px solid #ccc;
}

/* ── Totals block ── */
.od-totals             { background: var(--orders-primary-faint); border-radius: 10px; overflow: hidden; }
.od-totals__row {
    display:         flex;
    justify-content: space-between;
    padding:         10px 16px;
    font-size:       13px;
    border-bottom:   1px solid var(--orders-border);
}
.od-totals__row:last-child { border-bottom: none; font-weight: 800; font-size: 14px; color: var(--orders-primary); }

/* ── Modal status badges ── */
.od-badge {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   700;
}
.od-badge--paid    { background: #e6f4ea; color: #1e7e34; }
.od-badge--unpaid  { background: #fdecea; color: #c0392b; }
.od-badge--pending { background: #fff8e1; color: #b8860b; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .orders-card { padding: 20px 14px; }
    .od-meta     { grid-template-columns: 1fr; }
}