/* ============================================================
   customer-profile.css — Customer profile dashboard
   Used by: customer/home.blade.php
   RTL-aware via CSS logical properties throughout
   ============================================================ */

:root {
    --profile-border: #e8ecf0;
    --profile-text:   #1a1a2e;
    --profile-muted:  #6c757d;
    --profile-radius: 14px;
    --profile-light:  #f7f8fa;
}

.profile-section {
    background:  var(--profile-light);
    padding:     48px 0;
    min-height:  calc(100vh - 200px);
}

.profile-page-header {
    margin-bottom: 24px;
}
.profile-page-header h1 {
    font-size:   22px;
    font-weight: 800;
    color:       var(--profile-text);
    margin:      0 0 4px;
}
.profile-page-header p {
    font-size: 13.5px;
    color:     var(--profile-muted);
    margin:    0;
}

.profile-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   20px;
    align-items:           start;
}

.profile-card {
    background:    #fff;
    border-radius: var(--profile-radius);
    box-shadow:    0 4px 32px rgba(34,66,41,.08);
    padding:       24px;
}

/* ── Header card ── */
.profile-header-card {
    display:         flex;
    align-items:      center;
    justify-content: space-between;
    gap:             16px;
    flex-wrap:       wrap;
    margin-bottom:   20px;
}
.profile-header-card__identity {
    display:     flex;
    align-items: center;
    gap:         14px;
}
.profile-avatar {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--profile-light);
    border:          1px solid var(--profile-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       26px;
    color:           var(--profile-muted);
    flex-shrink:     0;
}
.profile-header-card__name {
    font-size:   17px;
    font-weight: 800;
    color:       var(--profile-text);
    margin:      0 0 3px;
}
.profile-header-card__meta {
    font-size: 12.5px;
    color:     var(--profile-muted);
    margin:    0;
}
.btn-profile-edit {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      transparent;
    color:           var(--primary-color, #224229);
    border:          1.5px solid var(--primary-color, #224229);
    border-radius:   20px;
    padding:         8px 16px;
    font-size:       13px;
    font-weight:     700;
    cursor:          pointer;
    transition:      all .2s;
    white-space:     nowrap;
}
.btn-profile-edit:hover {
    background: var(--primary-color, #224229);
    color:      #fff;
}

/* ── Stats ── */
.profile-stats {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   14px;
}
.profile-stat {
    border-radius: 10px;
    padding:       16px;
    text-align:    center;
    background:    color-mix(in srgb, var(--stat-color, var(--primary-color, #224229)) 10%, white);
}
.profile-stat i {
    font-size:     18px;
    color:         var(--stat-color, var(--primary-color, #224229));
    margin-bottom: 6px;
    display:       block;
}
.profile-stat__value {
    font-size:   20px;
    font-weight: 800;
    color:       var(--profile-text);
    line-height: 1.2;
}
.profile-stat__label {
    font-size: 11.5px;
    color:     var(--profile-muted);
    margin-top: 2px;
}

/* ── Recent orders card ── */
.profile-orders-card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
}
.profile-orders-card__header h2 {
    font-size:   16px;
    font-weight: 800;
    color:       var(--profile-text);
    margin:      0;
}
.profile-orders-card__header a {
    font-size:       12.5px;
    font-weight:     700;
    color:           var(--primary-color, #224229);
    text-decoration: none;
}
.profile-orders-card__header a:hover { text-decoration: underline; }

.profile-orders-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}
.profile-orders-table thead th {
    text-align:     start;
    padding:        8px 10px;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color:          var(--profile-muted);
    border-bottom:  1px solid var(--profile-border);
    white-space:    nowrap;
}
.profile-orders-table tbody td {
    padding:        10px;
    border-bottom:  1px solid var(--profile-border);
    color:          var(--profile-text);
    vertical-align: middle;
}
.profile-orders-table tbody tr:last-child td { border-bottom: none; }

.profile-empty {
    text-align: center;
    padding:    30px 0;
    color:      var(--profile-muted);
    font-size:  13.5px;
}

/* ── Sidebar cards ── */
.profile-info-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 0;
    border-bottom: 1px solid var(--profile-border);
}
.profile-info-row:last-of-type { border-bottom: none; }
.profile-info-row i {
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--profile-light);
    color:           var(--primary-color, #224229);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    flex-shrink:     0;
}
.profile-info-row__label {
    font-size: 11px;
    color:     var(--profile-muted);
    margin:    0 0 1px;
}
.profile-info-row__value {
    font-size:   13.5px;
    font-weight: 700;
    color:       var(--profile-text);
    word-break:  break-word;
}
.profile-sidebar-edit {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    font-size:       12.5px;
    font-weight:     700;
    color:           var(--primary-color, #224229);
    text-decoration: none;
    margin-top:      12px;
}
.profile-sidebar-edit:hover { text-decoration: underline; }

.profile-sidebar-card h3 {
    font-size:      13px;
    font-weight:    800;
    color:          var(--profile-text);
    margin:         0 0 6px;
    display:        flex;
    align-items:    center;
    gap:            6px;
}

/* ── Edit modal (reuses .auth-* form styles from customer-auth.css) ── */
.pf-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.45);
    z-index:         9999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
}
.pf-overlay.active { display: flex; }

.pf-modal {
    background:    #fff;
    border-radius: var(--profile-radius);
    box-shadow:    0 8px 48px rgba(34,66,41,.18);
    width:         100%;
    max-width:     560px;
    max-height:    90vh;
    overflow-y:    auto;
}

.pf-header {
    background:      var(--primary-color, #224229);
    color:           #fff;
    padding:         18px 24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        sticky;
    top:             0;
}
.pf-header h3 { font-size: 16px; font-weight: 800; margin: 0; }
.pf-close {
    background:  none;
    border:      none;
    color:       #fff;
    font-size:   20px;
    cursor:      pointer;
    line-height: 1;
    opacity:     .8;
}
.pf-close:hover { opacity: 1; }
.pf-body { padding: 24px; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .profile-grid  { grid-template-columns: 1fr; }
    .profile-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .profile-card { padding: 18px; }
}