/* --- Fin2Pay Final Adaptive Portal --- */
/* Brand: #002855, #00ADEF, #00C48C */

:root{
  --brand-dark:#002855;
  --brand-aqua:#00ADEF;
  --brand-green:#00C48C;
  --card-grad:linear-gradient(145deg,rgba(0,173,239,.25),rgba(0,196,140,.30));
  --hover-grad:linear-gradient(145deg,#00ADEF,#00C48C);
}

*{box-sizing:border-box}

body{
  font-family:'Segoe UI', Tahoma, sans-serif;
  margin:0; padding:0;
  color:#1a1a1a;
  background:#fff;
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ---------- Header ---------- */
header, .sub-header{
  background:linear-gradient(90deg,var(--brand-aqua),var(--brand-green));
  color:#fff; text-align:center;
  padding:35px 15px 22px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
header h1{margin:0;font-size:2.2em}
header p{margin-top:8px;font-size:1em;opacity:.95}

/* ---------- Single-row Card Rail (horizontal scroll) ---------- */
.grid{
  display:flex; flex-wrap:nowrap;
  gap:22px;
  padding:36px 24px 8px;
  margin:0 auto; max-width:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.grid::-webkit-scrollbar{height:10px}
.grid::-webkit-scrollbar-track{background:transparent}
.grid::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--brand-aqua),var(--brand-green));
  border-radius:6px;
}

/* ---------- Cards (کم‌ارتفاع و باریک‌تر) ---------- */
.card{
  flex:0 0 clamp(110px, 13vw, 160px);   /* ~40% باریک‌تر نسبت به قبل */
  aspect-ratio:25 / 8;                  /* ~60% کوتاه‌تر */
  scroll-snap-align:start;

  background:var(--card-grad);
  border:1px solid rgba(0,173,239,.30);
  border-radius:14px;
  text-decoration:none; color:#003a55;
  font-weight:600; display:flex; align-items:center; justify-content:center;
  text-align:center;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:all .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  background:var(--hover-grad);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.20);
}

/* ---------- Watermarks ---------- */
/* واترمارک پیش‌فرض برای صفحه‌ی اصلی (بدون کلاس with-watermark) */
body:not(.with-watermark)::before{
  content:"";
  position:fixed; inset:0;
  background:url('LOGO.jpg') no-repeat center 60% / 820px;
  opacity:.10; pointer-events:none;
}

/* واترمارک در صفحات پوشه‌ها */
body.with-watermark::before{
  content:"";
  position:fixed; inset:0;
  background:url('../LOGO.jpg') no-repeat center 60% / 820px;
  opacity:.10; pointer-events:none;
}

/* ---------- Folder Tables ---------- */
.table-area{margin:46px auto 0; width:88%; max-width:900px}
table{
  width:100%; border-collapse:collapse;
  background:rgba(0,173,239,.05);
  border-radius:12px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
th,td{padding:14px 18px; border-bottom:1px solid rgba(0,0,0,.05)}
th{
  background:linear-gradient(90deg,var(--brand-aqua),var(--brand-green));
  color:#fff; text-align:left; font-weight:600;
}
td{color:#003a55}
tr:hover td{background:rgba(0,173,239,.10)}

/* ---------- Links ---------- */
a{color:var(--brand-aqua); text-decoration:none}
a:hover{color:var(--brand-green); text-decoration:underline}

/* ---------- Footer ---------- */
footer{
  background:transparent; color:#004a66;
  font-size:.9em; padding:14px 0 18px;
  text-align:center; margin-top:auto;
}