/* ============================================
   Customer Portal Styles — أنماط بوابة العملاء
   ============================================ */

/* ─── Hero Section ─── */
.hero {
  background: linear-gradient(135deg, #3f1d82 0%, #2d1361 100%);
  padding: var(--space-16) 0 var(--space-20);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semi);
  margin-bottom: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeInDown 0.6s ease forwards;
}

.hero h1 {
  color: white;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extra);
  margin-bottom: var(--space-4);
  animation: fadeInUp 0.6s ease 0.1s forwards;
  opacity: 0;
}

.hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
  line-height: 1.8;
  animation: fadeInUp 0.6s ease 0.2s forwards;
  opacity: 0;
}

/* ─── Page Nav (Tabs) ─── */
.page-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: calc(-1 * var(--space-6));
  position: relative;
  z-index: 2;
  padding: 0 var(--space-4);
}

.page-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: var(--bg-white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  bottom: -2px;
}

.page-nav-btn:hover { color: var(--color-primary); background: var(--color-primary-50); }
.page-nav-btn.active { color: var(--color-primary); border-color: var(--color-primary); border-bottom-color: var(--bg-white); background: var(--bg-white); z-index: 1; }
.page-nav-btn svg { width: 18px; height: 18px; }

/* ─── Main Content Section ─── */
.main-section { padding: var(--space-10) 0 var(--space-16); }

.section-card {
  background: var(--bg-white);
  border: 2px solid var(--border-light);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
  max-width: 750px;
  margin: 0 auto;
  animation: fadeInUp 0.5s ease forwards;
}

.section-title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.section-title-icon { width: 44px; height: 44px; background: var(--color-primary-light); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.section-title-icon svg { width: 22px; height: 22px; color: var(--color-primary); }
.section-desc { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-8); padding-right: calc(44px + var(--space-3)); }

/* ─── Upload Area ─── */
.upload-area {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
  background: var(--bg-light);
}
.upload-area:hover { border-color: var(--color-primary); background: var(--color-primary-50); }
.upload-area.dragover { border-color: var(--color-primary); background: var(--color-primary-50); box-shadow: var(--shadow-glow); }
.upload-area.has-file { border-color: var(--status-resolved); background: var(--status-resolved-bg); border-style: solid; }
.upload-icon { width: 48px; height: 48px; margin: 0 auto var(--space-3); color: var(--text-muted); }
.upload-text { font-size: var(--text-sm); color: var(--text-secondary); }
.upload-text span { color: var(--color-primary); font-weight: var(--font-weight-semi); }
.upload-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.upload-preview { margin-top: var(--space-4); position: relative; display: inline-block; }
.upload-preview img { max-width: 200px; max-height: 150px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.upload-preview-remove { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; background: var(--status-urgent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-sm); }

/* ─── Phone Input Group ─── */
.phone-input-group {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.phone-code-select {
  width: 140px;
  flex-shrink: 0;
  text-align: center;
  font-size: var(--text-sm);
  direction: ltr;
  padding-left: var(--space-6) !important;
}
.phone-number-input {
  flex: 1;
  text-align: left;
  letter-spacing: 1px;
}

/* ─── Submit ─── */
.submit-section { margin-top: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.submit-btn { padding: var(--space-4) var(--space-10); font-size: var(--text-base); font-weight: var(--font-weight-bold); }
.submit-note { font-size: var(--text-xs); color: var(--text-muted); }

/* ─── Success Modal ─── */
.success-content { text-align: center; padding: var(--space-8) var(--space-6); }
.success-icon-wrapper { width: 100px; height: 100px; margin: 0 auto var(--space-6); background: var(--status-resolved-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.success-checkmark { width: 50px; height: 50px; color: var(--status-resolved); }
.success-checkmark path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: checkmark 0.8s ease 0.3s forwards; }
.success-title { font-size: var(--text-2xl); font-weight: var(--font-weight-extra); margin-bottom: var(--space-3); color: var(--status-resolved); }
.success-message { color: var(--text-secondary); margin-bottom: var(--space-6); }
.ticket-number-display { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--bg-light); padding: var(--space-4) var(--space-6); border-radius: var(--radius-xl); border: 2px solid var(--border-light); margin-bottom: var(--space-6); }
.ticket-number-label { font-size: var(--text-sm); color: var(--text-muted); }
.ticket-number-value { font-size: var(--text-2xl); font-weight: var(--font-weight-extra); color: var(--color-primary); letter-spacing: 2px; direction: ltr; }
.copy-btn { padding: var(--space-2) var(--space-3); background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-weight-semi); display: flex; align-items: center; gap: var(--space-1); transition: all var(--transition-fast); }
.copy-btn:hover { background: var(--color-primary); color: white; }

/* ─── Inquiry ─── */
.inquiry-form { display: flex; gap: var(--space-3); align-items: flex-end; }
.inquiry-form .form-group { flex: 1; margin-bottom: 0; }
.inquiry-result { margin-top: var(--space-6); display: none; }
.inquiry-result.active { display: block; animation: fadeInUp 0.4s ease forwards; }
.ticket-detail-card { background: var(--bg-light); border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--border-light); }
.ticket-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-light); flex-wrap: wrap; gap: var(--space-3); }
.ticket-detail-number { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--color-primary); direction: ltr; }
.ticket-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.ticket-info-item { display: flex; flex-direction: column; gap: var(--space-1); }
.ticket-info-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-weight-semi); }
.ticket-info-value { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-weight-semi); }

/* ─── Progress Timeline ─── */
.progress-timeline { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-light); }
.progress-timeline h4 { font-size: var(--text-base); margin-bottom: var(--space-4); }
.timeline-steps { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 var(--space-4); }
.timeline-steps::before { content: ''; position: absolute; top: 16px; right: 40px; left: 40px; height: 3px; background: var(--border-light); }
.timeline-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; z-index: 1; }
.timeline-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-white); border: 3px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); transition: all var(--transition-base); }
.timeline-step.completed .timeline-dot { background: var(--status-resolved); border-color: var(--status-resolved); color: white; }
.timeline-step.current .timeline-dot { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.timeline-step-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-weight-semi); }
.timeline-step.completed .timeline-step-label, .timeline-step.current .timeline-step-label { color: var(--text-primary); }

/* ─── Customer Note (from admin) ─── */
.customer-note-box {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-primary-light);
  border-right: 4px solid var(--color-primary);
}
.customer-note-box h4 {
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.customer-note-box p {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.8;
}

/* ─── Footer ─── */
.customer-footer { text-align: center; padding: var(--space-8) 0; color: var(--text-muted); font-size: var(--text-sm); border-top: 1px solid var(--border-light); background: var(--bg-white); }
.customer-footer a { color: var(--color-primary); font-weight: var(--font-weight-semi); }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .hero { padding: var(--space-10) 0 var(--space-12); }
  .hero h1 { font-size: var(--text-2xl); }
  .hero p { font-size: var(--text-base); }
  .page-nav-btn { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
  .section-card { padding: var(--space-6); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .section-desc { padding-right: 0; }
  .submit-section { flex-direction: column; }
  .submit-btn { width: 100%; }
  .inquiry-form { flex-direction: column; }
  .phone-input-group { flex-direction: row; }
  .phone-code-select { width: 120px; }
  .ticket-info-grid { grid-template-columns: 1fr; }
  .timeline-steps { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: 0; }
  .timeline-steps::before { top: 0; bottom: 0; right: 16px; left: auto; width: 3px; height: auto; }
  .timeline-step { flex-direction: row; }
  .ticket-number-display { flex-direction: column; gap: var(--space-2); }
}

@media (max-width: 480px) {
  .hero h1 { font-size: var(--text-xl); }
  .section-card { padding: var(--space-4); }
  .section-title { font-size: var(--text-xl); }
}