/* invoices.css — JEX Brand Identity — Customer Portal */

@keyframes headerGlow { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes fadeDown   { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }
@keyframes fadeUp     { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:none} }
@keyframes cardIn     { from{opacity:0;transform:translateY(14px)}  to{opacity:1;transform:none} }
@keyframes shimmer    { 0%{transform:translateX(-150%) skewX(-20deg)} 100%{transform:translateX(250%) skewX(-20deg)} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes pulse      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

:root {
  --jex:       #ff6b00;
  --jex-hover: #ff8c38;
  --jex-hdr-h: 60px;
}

body {
  background: #0a0a0a !important;
  font-family: 'Tajawal', system-ui, sans-serif;
  min-width: 0;
  overflow-x: hidden;
}

/* Override ui.css body::before { display:none !important } */
body::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(255,107,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,0,.045) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  background-color: transparent !important;
}

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--jex-hdr-h);
  background: rgba(10,10,10,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,107,0,.22) !important;
  display: flex; align-items: center;
}
.site-header::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jex), transparent);
  animation: headerGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
.header-inner {
  width: 100%; max-width: 700px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 16px; min-width: 0;
}
.logo-wrap { display: flex; align-items: center; flex-shrink: 0; }
.logo-wrap img { max-width: 190px; max-height: 36px; width: auto; height: auto; object-fit: contain; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.brand-name { font-family: 'Bebas Neue', sans-serif !important; font-size: 26px; letter-spacing: 5px; color: var(--jex) !important; line-height: 1; }
.brand-sub  { font-size: 10px; color: rgba(255,255,255,.38); letter-spacing: .5px; }
.header-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 30px;
  background: rgba(255,107,0,.10); border: 1px solid rgba(255,107,0,.24);
  color: #ffedd5; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.header-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jex); box-shadow: 0 0 7px var(--jex); animation: pulse 2s infinite;
}

/* ── Hero ── */
.hero { position: relative; z-index: 5; text-align: center; padding: 44px 20px 32px; animation: fadeDown .55s ease both; max-width: 700px !important; margin-left: auto; margin-right: auto; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 30px;
  background: rgba(255,107,0,.10); border: 1px solid rgba(255,107,0,.22);
  color: rgba(255,237,213,.8); font-size: 12px; font-weight: 600; margin-bottom: 18px;
}
.hero h1 { font-family: 'Tajawal', sans-serif !important; font-size: clamp(26px,5vw,38px); font-weight: 900; color: #fff; line-height: 1.18; margin-bottom: 12px; }
.hero h1 span { color: var(--jex) !important; }
.hero p { color: rgba(255,255,255,.38); font-size: 14px; line-height: 1.8; max-width: 380px; margin: 0 auto; }

/* ── Search Card ── */
.search-wrap { position: relative; z-index: 10; max-width: 700px !important; margin: 0 auto; padding: 0 20px 28px; animation: fadeUp .55s .1s ease both; }
.search-row  { display: flex !important; gap: 10px !important; align-items: stretch !important; flex-wrap: nowrap !important; }
.search-card {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-top: 2px solid rgba(255,107,0,.6) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(255,107,0,.06), 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
  padding: 24px !important;
}
.search-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.38); margin-bottom: 10px; letter-spacing: .08em; }
.search-input {
  flex: 1 1 0% !important; min-width: 0 !important;
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important; color: #fff !important;
  font-family: 'Tajawal', sans-serif; font-size: 16px; height: 48px; padding: 0 16px;
}
.search-input::placeholder { color: rgba(255,255,255,.25) !important; }
.search-input:focus        { border-color: rgba(255,107,0,.55) !important; box-shadow: 0 0 0 4px rgba(255,107,0,.14) !important; }
.search-input.is-valid     { border-color: rgba(34,197,94,.45)  !important; box-shadow: 0 0 0 4px rgba(34,197,94,.10)  !important; }
.search-input.is-invalid   { border-color: rgba(239,68,68,.45)  !important; box-shadow: 0 0 0 4px rgba(239,68,68,.12)  !important; }

.search-btn {
  flex-shrink: 0 !important; min-width: 100px !important;
  height: 48px; padding: 0 24px;
  background: var(--jex) !important; color: #fff !important;
  border: none !important; border-radius: 8px !important;
  font-family: 'Tajawal', sans-serif; font-size: 15px; font-weight: 800;
  cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.search-btn::after {
  content: ''; position: absolute; inset-block: 0; width: 44px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-150%) skewX(-20deg);
}
.search-btn:hover:not(:disabled)         { background: var(--jex-hover) !important; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,107,0,.35); }
.search-btn:hover:not(:disabled)::after  { animation: shimmer .5s ease forwards; }
.search-btn:disabled                     { background: rgba(255,107,0,.28) !important; cursor: not-allowed; transform: none; }

/* ── Phone Hint ── */
.phone-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.32); min-width: 0; overflow-wrap: anywhere; min-height: 22px; }
.phone-hint.is-valid   { color: #4ade80; }
.phone-hint.is-invalid { color: #f87171; }

/* ── Inquiry Indicator ── */
.inquiry-indicator { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; font-size: .8rem; color: rgba(255,255,255,.32); }
.inquiry-meta { display: flex; align-items: center; gap: 8px; }
.inquiry-dots { display: flex; gap: 5px; }
.inq-dot { width: 10px; height: 10px; border-radius: 50%; }
.inq-dot.used  { background: var(--jex); box-shadow: 0 0 5px rgba(255,107,0,.5); }
.inq-dot.avail { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.inquiry-remaining { font-weight: 700; color: rgba(255,255,255,.48); }

/* ── Alert Boxes ── */
.alert-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; margin-top: 14px; font-size: 13.5px; line-height: 1.6; border: 1px solid transparent; min-width: 0; overflow-wrap: anywhere; }
.alert-box .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-title { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.alert-error   { background: rgba(239,68,68,.08);   border-color: rgba(239,68,68,.22);   color: #fecaca; }
.alert-warning { background: rgba(251,191,36,.08);  border-color: rgba(251,191,36,.22);  color: #fde68a; }
.alert-blocked { background: rgba(239,68,68,.10);   border-color: rgba(239,68,68,.28);   color: #fecaca; }
.alert-contact { font-size: .84rem; color: rgba(254,202,202,.65); margin-top: 8px; }
.countdown { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--jex); letter-spacing: 2px; margin-top: 6px; display: block; }
.mt-1 { margin-top: 10px; }

/* ── Results ── */
.results-wrap { max-width: 700px !important; margin: 28px auto 0; padding: 0 20px; position: relative; z-index: 5; }
.results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; animation: fadeDown .35s ease both; }
.results-title { font-size: 15px; font-weight: 800; color: rgba(255,255,255,.5); display: inline-flex; align-items: center; gap: 8px; }
.results-count { background: rgba(255,107,0,.14); color: #ffedd5; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 30px; border: 1px solid rgba(255,107,0,.24); }

/* ── Invoice Cards ── */
.invoice-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-top: 2px solid rgba(255,107,0,.38) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(255,107,0,.04), 0 8px 32px rgba(0,0,0,.45) !important;
  padding: 16px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 10px; position: relative; overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  animation: cardIn .4s ease both;
}
.invoice-card:nth-child(1) { animation-delay: .05s; }
.invoice-card:nth-child(2) { animation-delay: .12s; }
.invoice-card:nth-child(3) { animation-delay: .19s; }
.invoice-card:nth-child(4) { animation-delay: .26s; }
.invoice-card:nth-child(5) { animation-delay: .33s; }
.invoice-card:nth-child(6) { animation-delay: .40s; }
.invoice-card::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--jex), transparent);
}
.invoice-card:hover {
  border-color: rgba(255,107,0,.38) !important;
  border-top-color: rgba(255,107,0,.75) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,107,0,.08), 0 16px 48px rgba(0,0,0,.55) !important;
}
.inv-info { min-width: 0; flex: 1; }
.inv-num  { font-size: 15px; font-weight: 800; color: #ffedd5; letter-spacing: 1px; margin-bottom: 5px; }
.inv-type { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.inv-date { font-size: 11.5px; color: rgba(255,255,255,.32); direction: ltr; text-align: right; }

/* ── View Button ── */
.btn-view {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px;
  background: rgba(255,107,0,.12) !important; border: 1px solid rgba(255,107,0,.24) !important;
  border-radius: 8px !important; color: #ffedd5 !important;
  font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 800;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .18s, transform .18s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.btn-view::after {
  content: ''; position: absolute; inset-block: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-150%) skewX(-20deg);
}
.btn-view:hover          { background: rgba(255,107,0,.22) !important; border-color: rgba(255,107,0,.42) !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,107,0,.18); }
.btn-view:hover::after   { animation: shimmer .5s ease forwards; }

/* ── Empty State ── */
.empty-state { text-align: center; padding: 48px 20px; animation: fadeUp .4s ease both; }
.empty-icon  { font-size: 3rem; margin-bottom: 14px; opacity: .45; }
.empty-state p { color: rgba(255,255,255,.3); font-size: .95rem; }

/* ── Footer ── */
.site-footer {
  position: relative; z-index: 5; text-align: center;
  padding: 24px 20px; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.05);
  background: transparent !important;
  color: rgba(255,255,255,.25) !important;
  font-size: 12px;
}
.site-footer strong { font-family: 'Bebas Neue', sans-serif !important; font-size: 16px; letter-spacing: 3px; color: var(--jex) !important; }

/* ── Modal ── */
.modal-overlay { background: rgba(0,0,0,.82) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.modal-wrap { padding: 16px !important; }
.modal-box {
  background: #111111 !important;
  border: 1px solid rgba(255,107,0,.22) !important;
  border-top: 2px solid rgba(255,107,0,.7) !important;
  border-radius: 20px !important;
  max-width: 680px !important;
  max-height: calc(100vh - 32px) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.7), 0 0 60px rgba(255,107,0,.06) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.modal-header {
  position: relative !important;
  flex-shrink: 0 !important;
  z-index: 20 !important;
  background: rgba(10,10,10,.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,107,0,.18) !important;
  padding: 14px 18px !important;
}
.modal-title   { font-size: 15px !important; font-weight: 800; letter-spacing: 0; color: rgba(255,255,255,.7) !important; }
.modal-title span { color: #ffedd5 !important; }
.modal-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #111111 !important;
}
.modal-loading {
  position: absolute !important; inset: 0 !important; z-index: 10 !important;
  background: #111111 !important; color: rgba(255,255,255,.32);
}
.iframe-wrap { width: 100%; height: 100%; overflow: hidden; }
.invoice-iframe { width: 100% !important; height: 100% !important; min-height: 500px !important; border: 0 !important; display: block !important; }

.btn-print { padding: 6px 14px !important; font-size: 12px !important; border-radius: 8px !important; background: rgba(255,107,0,.10) !important; border-color: rgba(255,107,0,.22) !important; color: #ffedd5 !important; }
.btn-print:hover { background: rgba(255,107,0,.18) !important; border-color: rgba(255,107,0,.38) !important; }
.btn-dl {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 6px 14px !important; border-radius: 8px !important;
  background: rgba(34,197,94,.10) !important; border: 1px solid rgba(34,197,94,.26) !important;
  color: #bbf7d0 !important; font-size: 12px !important; font-weight: 700 !important;
  text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important;
  transition: background .18s, border-color .18s !important;
}
.btn-dl:hover { background: rgba(34,197,94,.18) !important; border-color: rgba(34,197,94,.42) !important; }
.btn-close { width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.09) !important; }
.btn-close:hover { background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.28) !important; color: #fecaca !important; }

.spinner { width: 32px; height: 32px; border: 3px solid rgba(255,107,0,.15); border-top-color: #ff6b00 !important; border-radius: 50%; animation: spin .8s linear infinite; }

/* ── Bottom Sheet (mobile modal) ── */
@media (max-width: 480px) {
  .modal-overlay.active { align-items: flex-end !important; }
  .modal-wrap { align-items: flex-end !important; padding: 0 !important; }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    animation: sheetUp .28s ease both !important;
  }
}
@keyframes sheetUp { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Mobile ── */
@media (max-width: 480px) {
  :root { --jex-hdr-h: 54px; }
  .brand-name    { font-size: 22px; }
  .hero          { padding: 28px 16px 20px; }
  .search-wrap   { padding: 0 16px 20px; }
  .results-wrap  { padding: 0 16px; }
  .search-card   { padding: 18px 16px !important; }
  .search-btn    { padding: 0 18px !important; font-size: 14px !important; }
  .invoice-card  { padding: 14px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-view      { width: 100%; justify-content: center; }
  .modal-wrap    { padding: 10px !important; }
  .modal-header  { padding: 12px 14px !important; }
  .search-input  { height: 72px !important; }
}