/* =========================================================
   Free Image Converter — app.css (Unified EN/AR · FINAL A11y 2025-09)
   - Stronger color contrast for buttons & links
   - Links not color-only (underline + offset)
   - Sticky header mobile compaction + stable table headers
   - Extra focus states + mobile polish
   ========================================================= */
:root{
  /* Dark-scheme defaults */
  --bg:#0b0c10; --bg-soft:#111318; --card:#151822; --muted:#8a93a2; --text:#e9edf5;

  /* A11y: darker accents for ≥4.5:1 contrast */
  --accent:#1a56db;       /* was #4f8cff */
  --accent-2:#16c79a;
  --danger:#ff3b66;
  --border:#242836; --shadow:0 10px 30px rgba(0,0,0,.35);

  --radius:12px; --space:12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fb; --bg-soft:#eef1f7; --card:#fff; --muted:#5d6576; --text:#121521; --border:#e6e9f0;
    --shadow:0 10px 24px rgba(14,22,36,.08);
    --accent:#183ea5; --accent-2:#0ea5a8; --danger:#d61f4b;
  }
}
[data-theme="light"]{
  --bg:#f7f8fb; --bg-soft:#eef1f7; --card:#fff; --muted:#5d6576; --text:#121521; --border:#e6e9f0; --shadow:0 10px 24px rgba(14,22,36,.08);
  --accent:#183ea5; --accent-2:#0ea5a8; --danger:#d61f4b;
}
[data-theme="dark"]{
  --bg:#0b0c10; --bg-soft:#111318; --card:#151822; --muted:#8a93a2; --text:#e9edf5; --border:#242836; --shadow:0 10px 30px rgba(0,0,0,.35);
  --accent:#1a56db; --accent-2:#16c79a; --danger:#ff3b66;
}

/* ===== Reset & base ===== */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Tajawal","Cairo","Noto Naskh Arabic","Apple Color Emoji","Segoe UI Emoji"}

/* A11y: links — not color-only */
a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:from-font;
}
a:hover{ filter:brightness(.97); }
a:focus-visible{
  outline:3px solid color-mix(in oklab,var(--accent) 60%, transparent);
  outline-offset:3px; border-radius:6px;
}

/* ===== Header / layout ===== */
header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(1.2) blur(6px);
  background:color-mix(in oklab,var(--bg) 85%,transparent);
  border-bottom:1px solid var(--border);
}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.hero{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:center}
@media (max-width:980px){.hero{grid-template-columns:1fr}}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow)}
.brand h1{margin:0;font-size:1.25rem}
.badge{
  margin-inline-start:8px;font-size:.85rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  padding:4px 8px;border-radius:999px;white-space:nowrap;text-decoration:none;
}

/* Toggles (theme + language) */
.lang-toggle,.theme-toggle{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.lang-toggle a,
.lang-toggle button,
.theme-toggle button{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  min-height:32px;
  font-size:13px;
  display:inline-flex; align-items:center;
  text-decoration:none; /* buttons look like buttons */
}
.lang-toggle a[aria-current="page"],
.lang-toggle button[aria-pressed="true"],
.theme-toggle button[aria-pressed="true"]{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.lang-toggle a:focus-visible,
.theme-toggle button:focus-visible{
  outline:3px solid color-mix(in oklab,var(--accent) 70%, transparent);
  outline-offset:3px;
}

/* ===== Cards & grid ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.card .pad{padding:18px}
main .grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media (max-width:980px){main .grid{grid-template-columns:1fr}}
.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:980px){.controls{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.controls{grid-template-columns:1fr}}

/* ===== Inputs ===== */
label.small{font-size:12px;color:var(--muted);display:block;margin-block-end:6px}
select,input[type="color"],input[type="range"],input[type="file"],input[type="number"]{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);direction:inherit;text-align:start
}
input[type="range"]{padding:0;height:40px}
.hint{color:var(--muted);font-size:12px}

/* ===== Buttons ===== */
.buttons{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:12px}
.btn{
  border:1px solid color-mix(in oklab,var(--accent) 25%, var(--border));
  background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 92%, #000 8%), var(--accent));
  color:#fff;
  padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:800;
  box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:8px;
  min-height:46px;font-size:1.06rem;text-decoration:none;
}
.buttons .btn{min-width:200px}
.btn.secondary{
  background:color-mix(in oklab,var(--bg-soft) 88%, transparent);
  color:var(--text);opacity:.98
}
.btn.secondary:hover{opacity:1}
.btn.danger,.btn-danger{
  background:linear-gradient(135deg,color-mix(in oklab,var(--danger) 90%, #000 10%), var(--danger));
  color:#fff
}
.btn[disabled], .btn[aria-busy="true"]{opacity:.72;cursor:not-allowed}
.btn.is-busy::after{
  content:"";display:inline-block;width:1em;height:1em;margin-inline-start:.5em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-.2em;animation:spin .9s linear infinite
}
.btn:focus-visible{
  outline:3px solid color-mix(in oklab,var(--accent) 65%, transparent);
  outline-offset:3px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Primary big CTAs ===== */
#pickBtn.btn{min-height:56px;padding:14px 28px;font-size:16px;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
#convertBtn.btn{min-height:56px;padding:14px 26px;font-size:16px;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.16)}
#zipBtn.btn,#clearBtn.btn{min-height:50px;padding:12px 22px;border-radius:14px}

/* ===== Dropzone ===== */
.drop{
  border:2px dashed var(--border);border-radius:18px;padding:28px;text-align:center;
  background:var(--card);
  background:repeating-linear-gradient(45deg,color-mix(in oklab,var(--card) 95%,transparent),color-mix(in oklab,var(--card) 95%,transparent) 8px,transparent 8px,transparent 16px);
  transition:background .15s ease,border-color .15s ease;color:var(--muted);
  box-shadow:0 6px 18px rgba(0,0,0,.06) inset
}
.drop.dragover{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,var(--card) 90%)}

/* ===== Table (files list) ===== */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* optional horizontal scroll on very small screens */
.table-wrap .list{ min-width:680px; } /* prevent over-compression on tiny screens */

.list,#fileTable{width:100%;border-collapse:collapse}
.list th,.list td,#fileTable th,#fileTable td{border-bottom:1px solid var(--border);padding:10px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
.nowrap{white-space:nowrap}
.thumb{width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
/* Sticky table header */
.list thead th,#fileTable thead th{position:sticky;top:0;z-index:2;background:var(--card)}
#fileTable{color:inherit}
#fileTable th{font-weight:700}

/* ===== RTL support ===== */
[dir="rtl"] table th,[dir="rtl"] table td{ text-align:start; }
[dir="rtl"] .btn,[dir="rtl"] .actions .btn{ letter-spacing:0; }

/* Arabic table flow fix (recommended: LTR table with right-aligned cells) */
html[lang="ar"] #fileTable{ direction:ltr; }
html[lang="ar"] #fileTable th,
html[lang="ar"] #fileTable td{ text-align:right; }
html[lang="ar"] #fileTable th:last-child,
html[lang="ar"] #fileTable td:last-child{ text-align:center; }

/* ===== Ad slot ===== */
.ad-slot{
  background:var(--bg-soft);border:1px dashed var(--border);border-radius:16px;
  min-height:120px;display:grid;place-items:center;color:var(--muted)
}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card);color:var(--text);border:1px solid var(--border);
  padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:transform .15s ease,opacity .15s ease;z-index:9999
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ===== Progress bar ===== */
.progress{height:10px;background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ===== Footer & dialogs ===== */
footer{color:var(--muted);font-size:12px;padding:24px 0;text-align:center}
footer a:hover,
#blogLinks a:hover{ text-decoration-thickness:.16em; text-underline-offset:.22em; } /* subtle emphasis */
dialog{border:none;border-radius:16px;background:var(--card);color:var(--text);box-shadow:var(--shadow);max-width:720px}
dialog::backdrop{background:rgba(0,0,0,.35)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-block-start:12px}
#contactDlg input[type="email"],#contactDlg textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text)
}

/* ===== Preview panel ===== */
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:980px){.preview-grid{grid-template-columns:1fr}}
.preview-card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:12px}
.preview-meta{color:var(--muted);font-size:12px;margin-block-start:6px}
.preview-canvas{width:100%;height:auto;display:block;max-height:380px;background:repeating-conic-gradient(from 0deg,#ccc 0% 25%,#eee 0% 50%) 50%/16px 16px}
[data-theme="dark"] .preview-canvas{background:repeating-conic-gradient(from 0deg,#444 0% 25%,#333 0% 50%) 50%/16px 16px}

/* ===== Stronger dark mode contrast ===== */
[data-theme="dark"] .drop{background:color-mix(in oklab,var(--card) 92%,transparent)}
[data-theme="dark"] .btn.secondary{background:color-mix(in oklab,var(--bg-soft) 80%,transparent)}

/* ===== Icons & utilities ===== */
.icon{width:18px;height:18px;display:inline-block;vertical-align:middle}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0
}
:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 60%, transparent);outline-offset:2px;border-radius:calc(var(--radius) - 2px)}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media (pointer: coarse){
  .btn,select,input,textarea{min-height:44px}
}

/* ===== Forced-colors (Windows High Contrast) ===== */
@media (forced-colors: active){
  .btn{border:1px solid CanvasText}
  .drop{border-color: CanvasText}
}

/* ===== Print ===== */
@media print{
  header,.ad-slot,.buttons,.drop{display:none !important}
  body{background:#fff;color:#000}
}

/* ===== Final UI stability additions ===== */
.btn .btn-label{ display:inline; white-space:nowrap; }
html[data-compact="1"] .btn .btn-label{ display:none; }
.btn .btn-icon{ pointer-events:none; line-height:1; }

/* ===== Mobile tweaks ===== */
main.wrap{ margin-top:8px; } /* visual separation so first card isn't tucked under header */
@media (max-width:640px){
  #adTop.ad-slot{ min-height:54px; font-size:12px; border-radius:12px; }
  header .wrap{ padding:8px 12px; }
  .hero{ gap:8px; }
  .logo{ width:30px; height:30px; border-radius:8px; }
  .brand h1{ font-size:1rem; }
  .badge{ font-size:.75rem; padding:2px 6px; }
  .theme-toggle button,
  .lang-toggle a{ padding:4px 8px; min-height:28px; font-size:12px; border-radius:9px; }
  .lang-toggle, .theme-toggle{ gap:6px; }
  main .grid{ grid-template-columns:1fr; }
  .buttons .btn,
  #pickBtn.btn, #convertBtn.btn, #zipBtn.btn, #clearBtn.btn,
  select{ min-width:unset !important; width:100% !important; }
  .ad-slot{ min-height:64px; }
  .list thead th, #fileTable thead th{ top:6px; } /* keep sticky headers visible under sticky header */
}

/* XS phones */
@media (max-width:420px){
  .buttons .btn{ min-width:150px; font-size:.98rem; padding:10px 14px; }
  #pickBtn.btn, #convertBtn.btn{ min-height:52px; padding:12px 18px; font-size:15px; }
}