/* Apply Cairo font to invoice */
.invoice-container,
.invoice-wrapper,
.invoice-header,
.invoice-title,
.invoice-sub,
.summary-tile,
.invoice-card,
.invoice-items-container {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.invoice-container{width:100%;margin:0 auto;padding:12px}
.invoice-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:8px 0 12px}
.invoice-title{font-size:22px;font-weight:700;letter-spacing:.3px}
.invoice-meta{display:flex;gap:16px;flex-wrap:wrap}
.invoice-meta .meta-label{display:block;font-size:12px;color:#9aa4b2}
.invoice-meta .meta-value{display:block;font-weight:600}
.invoice-meta .status-pending{color:#fbbf24}
.invoice-meta .status-processing{color:#60a5fa}
.invoice-meta .status-delivered{color:#34d399}

.invoice-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px;margin-bottom:10px}
.invoice-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.1)}
.invoice-card-header span{font-weight:600}

/* New Invoice Items Container - Using divs instead of table */
.invoice-items-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invoice-item-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.invoice-item-image {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.invoice-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invoice-item-image .main-items-badge-platform {
  top: 0.15rem;
  right: 0.15rem;
  width: 20px;
  height: 20px;
}

.invoice-item-image--badge-only {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.invoice-item-main {
  flex: 1;
  min-width: 0;
}

.invoice-item-row:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}

.invoice-item-name {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.invoice-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.invoice-item-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.invoice-field-label {
  font-size: 13px;
  color: #60a5fa;
  font-weight: 500;
  min-width: 50px;
}

.invoice-field-value {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

/* Total field value should be green */
.invoice-item-total .invoice-field-value,
.invoice-total-value-item {
  color: #00f5a0 !important;
}

.invoice-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-top: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 12px;
}

.invoice-total-label {
  font-size: 16px;
  font-weight: 700;
  color: #60a5fa;
  white-space: nowrap;
  flex-shrink: 0;
}

.invoice-total-value {
  font-size: 18px;
  font-weight: 700;
  color: #00f5a0;
  white-space: nowrap;
  flex-shrink: 0;
}

.invoice-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9aa4b2;
  font-size: 14px;
}

/* Order page layout: left invoice (col 8) + right support (col 4) */
body[data-page="order"] .checkout-content {
    display: flex;
    gap: 20px;
  }
  
  body[data-page="order"] .checkout-form-section {
    flex: 2;
  }
  
  body[data-page="order"] .order-support-section {
    flex: 1;
  }

/* Modern invoice layout - دورة حياة الطلب */
.invoice-wrapper{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:18px}
/* 1. ملغي (cancelled) → أحمر */
.invoice-wrapper.status-cancelled,.invoice-wrapper.status-canceled{background:rgba(220,53,69,0.12);border-color:rgba(220,53,69,0.5);border-left:4px solid rgba(220,53,69,0.7)}
/* 2. تسليم جزئي (partial) → أزرق */
.invoice-wrapper.status-partial{background:rgba(13,202,240,0.12);border-color:rgba(13,202,240,0.6);border-left:4px solid rgba(13,202,240,0.8)}
/* 3. مسلم (delivered) → أرجواني */
.invoice-wrapper.status-delivered{background:rgba(138,43,226,0.12);border-color:rgba(138,43,226,0.5);border-left:4px solid rgba(138,43,226,0.7)}
/* 4. مدفوع (paid) → أخضر */
.invoice-wrapper.status-paid{background:rgba(25,135,84,0.12);border-color:rgba(25,135,84,0.5);border-left:4px solid rgba(25,135,84,0.7)}
/* 5. معلق (pending) → أصفر */
.invoice-wrapper.status-pending{background:rgba(255,193,7,0.12);border-color:rgba(255,193,7,0.6);border-left:4px solid rgba(255,193,7,0.8)}
.invoice-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:10px}
.invoice-header .title-group{display:flex;flex-direction:column;gap:4px}
.invoice-header .invoice-sub{font-size:14px;color:#9aa4b2;font-weight:500}
.invoice-header .meta-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.invoice-header .invoice-date{font-size:13px;color:#cbd5e1;font-weight:500}
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12)}
.status-badge i{font-size:12px}
/* Match orders page pill colors */
.status-pending{background:rgba(255,193,7,0.15);color:#ffcd39;border-color:rgba(255,193,7,0.4)}
.status-paid{background:rgba(25,135,84,0.15);color:#63e6be;border-color:rgba(25,135,84,0.4)}
.status-cancelled,.status-canceled{background:rgba(220,53,69,0.15);color:#ff8a8a;border-color:rgba(220,53,69,0.4)}
/* Keep legacy classes for backward compatibility */
.status-processing{color:#60a5fa;border-color:rgba(96,165,250,0.35);background:rgba(96,165,250,0.12)}
.status-delivered{color:#34d399;border-color:rgba(52,211,153,0.35);background:rgba(52,211,153,0.12)}
.status-pill.status-delivered{background:rgba(25,135,84,0.15);color:#63e6be;border-color:rgba(25,135,84,0.4)}
.status-pill.status-partial{background:rgba(13,202,240,0.15);color:#67e8f9;border-color:rgba(13,202,240,0.45)}
.status-pill.status-pending-delivery,.status-badge.status-pending-delivery{background:rgba(255,193,7,0.12);color:#ffcd39;border-color:rgba(255,193,7,0.35)}
.status-badge.status-partial{background:rgba(13,202,240,0.12);color:#67e8f9;border-color:rgba(13,202,240,0.4)}
.invoice-date{color:#60a5fa;font-size:12px}

.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0}
.summary-tile{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px;display:flex;justify-content:space-between;align-items:center}
.summary-tile .tile-label{color:#9aa4b2;font-size:13px;font-weight:500}
.summary-tile .tile-value{font-weight:700;font-size:18px;color:#fff}

.info-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px;margin:10px 0}
.info-card .info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-grid .label{color:#9aa4b2;font-size:12px}
.info-grid .value{font-weight:600;word-break:break-word}

.invoice-timeline{margin:10px 0}

.invoice-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.invoice-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.invoice-btn:hover{background:rgba(255,255,255,0.12)}

/* Mobile Responsive - Invoice */
@media (max-width:768px){
    .checkout-content {
      flex-direction: column;
    }
    .checkout-form-section {
      order: 1;
    }
    .order-support-section {
      order: 2;
      position: static;
    }
    
    /* Invoice Header Mobile */
    .invoice-header {
      flex-direction: column;
      align-items: flex-start !important;
      gap: 12px;
    }
    
    .invoice-header .title-group {
      width: 100%;
    }
    
    .invoice-header .meta-group {
      width: 100%;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .invoice-header .meta-group .status-badge {
      font-size: 11px;
      padding: 3px 8px;
      white-space: nowrap;
    }
    
    .invoice-title {
      font-size: 20px;
    }
    
    .invoice-sub {
      font-size: 14px !important;
    }
    
    .invoice-date {
      font-size: 12px !important;
    }
    
    /* Summary Grid Mobile */
    .summary-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    
    .summary-tile {
      padding: 10px;
    }
    
    .summary-tile .tile-label {
      font-size: 12px;
    }
    
    .summary-tile .tile-value {
      font-size: 16px;
    }
    
    /* Invoice Items Mobile */
    .invoice-items-container {
      gap: 10px;
    }
    
    .invoice-item-row {
      padding: 10px;
      gap: 10px;
    }
    
    .invoice-item-name {
      font-size: 14px;
    }
    
    .invoice-item-details {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    
    .invoice-item-field {
      width: 100%;
      justify-content: space-between;
    }
    
    .invoice-field-label {
      min-width: 60px;
    }
    
    .invoice-grand-total {
      padding: 12px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    
    .invoice-total-label {
      font-size: 14px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    
    .invoice-total-value {
      font-size: 16px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    
    .invoice-card {
      margin-bottom: 0;
    }
    
    .invoice-card-header {
      padding-bottom: 8px;
      margin-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Center payment section title on mobile */
    .form-section-title {
      text-align: center !important;
    }
    
    .form-section-title h4 {
      text-align: center !important;
    }
    
    /* Payment Methods Mobile */
    .payment-methods {
      grid-template-columns: 1fr;
    }
    
    .payment-method {
      padding: 12px;
    }
  }
  
  @media (max-width:480px){
    .invoice-container {
      padding: 8px;
    }
    
    .invoice-wrapper {
      padding: 12px;
    }
    
    .invoice-title {
      font-size: 18px;
    }
    
    .invoice-sub {
      font-size: 13px !important;
    }
    
    .summary-tile .tile-value {
      font-size: 15px;
    }
    
    .invoice-item-row {
      padding: 8px;
    }
    
    .invoice-item-name {
      font-size: 13px;
    }
    
    .invoice-field-label {
      font-size: 12px;
    }
    
    .invoice-field-value {
      font-size: 13px;
    }
    
    .invoice-card-header {
      font-size: 13px;
      padding-bottom: 6px;
    }
    
    /* Center payment section title on mobile */
    .form-section-title {
      text-align: center !important;
    }
    
    .form-section-title h4 {
      text-align: center !important;
    }
  }
  
  /* Invoice Modal */
  .invoice-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .invoice-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
  }
  
  .invoice-modal-content {
    position: relative;
    background: rgba(10,15,26,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10001;
  }
  
  .invoice-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .invoice-modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
  }
  
  .invoice-modal-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.3s ease;
  }
  
  .invoice-modal-close:hover {
    background: rgba(255,255,255,0.1);
  }
  
  .invoice-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
  }
  
  @media (max-width: 768px) {
    .invoice-modal-content {
      max-width: 95vw;
      max-height: 95vh;
    }
    
    .invoice-modal-header {
      padding: 16px;
    }
    
    .invoice-modal-body {
      padding: 16px;
    }
  }
  
  /* Payment method display in header */
  .invoice-payment-method {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .invoice-payment-method i {
    font-size: 12px;
  }
  
  /* QR Code Zoom Overlay - Same as checkout page */
  .image-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    cursor: zoom-out;
  }
  
  .image-zoom-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    cursor: zoom-out;
    transition: transform 0.3s ease;
  }
  
  .image-zoom-overlay img:hover {
    transform: scale(1.02);
  }
  
  @media (max-width: 768px) {
    .image-zoom-overlay img {
      max-width: 95%;
      max-height: 95%;
    }
  }

/* Center payment section title on all screen sizes - override checkout-page.css flex display */
/* Use very specific selector to override checkout-page.css */
body[data-page="order"] .form-section-title,
body[data-page="order"] .invoice-container .form-section-title,
body[data-page="order"] .checkout-content .form-section-title {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body[data-page="order"] .form-section-title h4,
body[data-page="order"] .invoice-container .form-section-title h4,
body[data-page="order"] .checkout-content .form-section-title h4 {
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
  width: 100% !important;
}

/* Also apply to general form-section-title when it contains payment section title */
.form-section-title:has(h4[data-i18n="order.payment_section_title"]),
body[data-page="order"] .form-section-title:has(h4[data-i18n="order.payment_section_title"]) {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.form-section-title:has(h4[data-i18n="order.payment_section_title"]) h4,
body[data-page="order"] .form-section-title:has(h4[data-i18n="order.payment_section_title"]) h4 {
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
  width: 100% !important;
}

/* Right support panel */
.order-support-section{position:relative}
.support-card{background:rgba(13,110,253,0.12);border:1px solid rgba(13,110,253,0.35);border-radius:12px;padding:16px;position:sticky;top:20px}
.support-header{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}
.support-header i{color:#7cc0ff}
.support-text{color:#cbd5e1;font-size:13px;line-height:1.5;margin:6px 0}
.support-list{list-style:none;margin:6px 0 12px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.support-list li{display:flex;align-items:center;gap:8px;color:#e2e8f0;font-size:13px}
.support-list li i{color:#60a5fa}
.support-social .social-links{display:flex;gap:10px;flex-wrap:wrap}

/* Order countdown timer */
.order-countdown {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
  }
}

.order-countdown #countdownDisplay {
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}