*{box-sizing:border-box}
:root{
  --bg:#fff;
  --text:#0a1020;
  --muted:#6b7280;
  --line:#E8EDF4;
  --blue:#2563eb;
  --blue-600:#1e40af;
  --radius:14px;
  --brand1:#f59e0b; /* amber */
  --brand2:#f97316; /* orange */
  --brand3:#ef4444; /* red */
}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
}
a{color:inherit; text-decoration:none}
a:hover{color:var(--blue)}

/* ===== Top Nav ===== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line)
}
.nav .inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; padding:10px 16px
}
.brand{justify-self:start}
.brand a{display:inline-flex; align-items:center; gap:8px; line-height:1}
.brand img{vertical-align:middle; border-radius:10px}
.menu{justify-self:end}
.menu a{margin-right:36px; font-size:14px; color:#6b7280}
.menu a:last-child{margin-right:0}
.menu a:hover{
  color:transparent;
  background-image:linear-gradient(90deg,var(--brand1),var(--brand3));
  -webkit-background-clip:text; background-clip:text
}

/* ===== Top right icons (Facebook etc.) ===== */
.top-right-icons{
  display:flex;
  align-items:center;
  gap:12px;
  justify-self:end;
}
.fb-icon i{
  font-size:20px;
  color:#1877F2; /* Facebook blue */
  transition:transform .2s ease, filter .2s ease;
}
.fb-icon:hover i{
  transform:scale(1.15);
  filter:brightness(1.3);
}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  padding:40px 20px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(245,158,11,.10), rgba(249,115,22,.10), rgba(239,68,68,.10));
}
.hero::before{
  content:''; position:absolute; inset:-40px;
  background:
    radial-gradient(600px 220px at 20% 70%, rgba(245,158,11,.35), transparent 60%),
    radial-gradient(520px 200px at 85% 35%, rgba(239,68,68,.30), transparent 60%);
  filter:blur(30px); z-index:0
}
.hero .wrap{position:relative; z-index:1; max-width:1100px; margin:0 auto}

/* Гарчиг — бүхэл нь энгийн өнгөтэй, онцолсон үгнүүдийг span-р будах */
.hero-title{
  margin:0 0 10px; font-size:34px; line-height:1.2; font-weight:900;
  color:var(--text); text-shadow:none;
}
/* Зөвхөн Facebook хэсэг линк — дарахад Facebook нээгдэнэ */
.facebook-link{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; vertical-align:baseline;
}
.facebook-link i{
  font-size:1em;
  background:linear-gradient(90deg,#FF0080,#FF0000); /* pink -> red */
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 8px rgba(255,0,0,.45);
  transition:transform .2s ease, filter .2s ease;
}
.facebook-link:hover i{ transform:scale(1.15); filter:brightness(1.15) }

/* Онцолсон үгнүүдийн өнгө */
.hero h1 .facebook-text{
  background:linear-gradient(90deg,#1877F2,#3b5998);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 10px rgba(24,119,242,.35);
}
.hero h1 .instagram-text{
  background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF,#515BD4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .amp-text,
.hero h1 .service-text{
  color:#FF8C00; /* зөөлөн улбар шар */
  font-weight:600;
}

/* Hero subtitle */
.hero p{
  margin:0; font-size:16px; font-weight:500;
  background:linear-gradient(90deg, rgba(255,140,0,.9), rgba(255,69,0,.85), rgba(255,0,0,.85));
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.95;
}

/* ===== Layout / Cards ===== */
.container{max-width:1100px; margin:0 auto; padding:24px 16px}
.grid{display:grid; grid-template-columns:1.2fr 1fr; gap:20px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; transition:box-shadow .2s ease
}
.card:hover{box-shadow:0 6px 30px rgba(2,6,23,.06)}

/* ===== Tiles ===== */
.tile-row{display:flex; gap:10px; flex-wrap:wrap}
.tile{
  flex:0 0 112px; border:1px solid var(--line); border-radius:12px;
  padding:12px; text-align:center; cursor:pointer; transition:all .15s ease
}
.tile .big{font-size:18px; font-weight:800}
.tile.active{
  border-color:transparent;
  background:linear-gradient(180deg,rgba(245,158,11,.15),rgba(239,68,68,.12));
  box-shadow:0 0 0 2px rgba(249,115,22,.25)
}

/* ===== Form ===== */
label{display:block; margin:10px 0 6px; font-weight:700}
.input, select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:#fff; outline:none; transition:border-color .15s ease, box-shadow .15s ease
}
.input:focus, select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12) }
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.note{font-size:12px; color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(90deg,var(--brand1),var(--brand2),var(--brand3));
  color:#fff; padding:12px 18px; border:none; border-radius:12px; font-weight:800;
  cursor:pointer; transition:filter .15s ease, transform .04s ease
}
.btn:hover{filter:brightness(0.95)}
.btn:active{transform:translateY(1px)}

/* ===== Tables (Desktop default) ===== */
.table{width:100%; border-collapse:collapse}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:12px 8px; text-align:left; font-size:14px; vertical-align:middle;
}
.table th{
  font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em
}

/* ===== Alerts/Footer ===== */
.alert{ padding:10px 12px; border-radius:10px; background:#f8fafc; border:1px solid var(--line); margin:12px 0; color:var(--muted) }
.success{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46 }
.footer{ padding:32px 16px; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:13px }
.hidden{display:none}

/* ===================================================================
   MOBILE (<=768px)
   - "Миний захиалга" хүснэгтийг КАРТ хэлбэртэй, богино, ойлгомжтой болгов
   =================================================================== */
@media (max-width:768px){
  .nav{background:rgba(255,255,255,.95)}
  .nav .inner{grid-template-columns:1fr; gap:8px; text-align:center}
  .brand{justify-self:center}
  .brand a{gap:10px}
  .menu{justify-self:center}
  .menu a{margin:0 10px; font-size:13px}

  .hero{padding:28px 12px; text-align:center}
  .hero-title{font-size:22px; line-height:1.25}
  .hero p{font-size:14px}

  .container{padding:16px 12px}
  .grid{grid-template-columns:1fr; gap:14px}
  .card{padding:12px}

  .tile-row{gap:8px}
  .tile{flex:0 0 calc(50% - 8px); padding:10px}
  .tile .big{font-size:16px}

  .row{grid-template-columns:1fr; gap:10px}
  label{margin:8px 0 4px}
  .input, select{padding:11px 12px; font-size:15px}
  .note{font-size:12px}

  .btn{width:100%; padding:12px 16px; font-size:15px}

  /* ===== Orders table -> CARD view ===== */
  .table{border:0}
  .table thead{display:none}
  .table tr{
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    margin:10px 0;
    padding:10px 12px;
  }
  .table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
    border:none;               /* мөр хооронд шугамгүй */
    font-size:14px;
    word-break:break-word;     /* урт линк эвдэж мөр хэтрүүлэхгүй */
  }
  .table td a{word-break:break-all}

  /* Гарчигуудыг автоматаар үүсгэнэ (nth-child) */
  .table td:nth-child(1)::before {content:"#"; color:var(--muted); font-weight:700}
  .table td:nth-child(2)::before {content:"Платформ"; color:var(--muted); font-weight:700}
  .table td:nth-child(3)::before {content:"Төрөл"; color:var(--muted); font-weight:700}
  .table td:nth-child(4)::before {content:"Тоо"; color:var(--muted); font-weight:700}
  .table td:nth-child(5)::before {content:"Үнэ"; color:var(--muted); font-weight:700}
  .table td:nth-child(6)::before {content:"Төлөв"; color:var(--muted); font-weight:700}
  .table td:nth-child(7)::before {content:"Төлбөр"; color:var(--muted); font-weight:700}
  .table td:nth-child(8)::before {content:"Линк"; color:var(--muted); font-weight:700}
  .table td:nth-child(9)::before {content:"Үйлдэл"; color:var(--muted); font-weight:700}

  /* “Үйлдэл” талбартын товчлуур карт дотор эвтэй */
  .table td:last-child .btn{
    width:auto; padding:10px 14px; font-size:14px;
  }
}

/* ===== VERY SMALL (<=480px) ===== */
@media (max-width:480px){
  .menu a{margin:0 8px}
  .tile{flex:0 0 100%}
  .hero-title{font-size:20px}
}
/* =========================
   ORDERS TABLE – MOBILE FIX
   ========================= */

/* 1) Desktop хэвээр (ямар өөрчлөлт хийхгүй) */

/* 2) Mobile-д хүснэгтийг хэвээр нь үлдээнэ, зөвхөн хэвтээ гүйлгэлт идэвхжүүлнэ */
@media (max-width: 768px) {
  /* Захиалгын хүснэгт агуулах картанд scroll идэвхжүүлнэ */
  .card {
    overflow-x: auto;        /* хажуу тийш гүйлгэнэ */
    -webkit-overflow-scrolling: touch;
  }

  /* Хүснэгтийг дэлгэцнээс арай өргөн болгож, гүйлгэх талбай үүсгэнэ */
  .table {
    min-width: 900px;        /* 8–9 баганад таарахуйц */
    border-collapse: collapse;
  }

  /* Хүснэгтийн бүтэц заавал хүснэгт хэвээр байг */
  .table thead { display: table-header-group; }
  .table tr    { display: table-row; background: transparent; border: 0; margin: 0; padding: 0; }
  .table th,
  .table td    { display: table-cell; padding: 10px 8px; font-size: 13px; vertical-align: middle; }

  /* Мөрийн доод шугам – эгц таарна */
  .table th,
  .table td { border-bottom: 1px solid var(--line); }

  /* Гарчиг жижигхэн */
  .table th { font-size: 11px; color: var(--muted); letter-spacing: .06em; }

  /* “ТӨЛБӨР БАТАЛГААЖУУЛАХ” товч бага зэрэг жижгэрнэ */
  .table td .btn { padding: 8px 12px; font-size: 13px; }
}

/* 3) Very small дэлгэцэнд бас арай багасгана */
@media (max-width: 480px) {
  .table { min-width: 840px; } /* арай бага */
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px){ .table-scroll .table { min-width: 900px; } }
.fb-icon {
  font-size: 18px;
  color: #1877F2;          /* Facebook-ийн цэнхэр өнгө */
  background: white;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.2s, transform 0.2s;
  margin-left: 16px;       /* ← энэ нь товчлууруудын хооронд зай гаргана */
}

.fb-icon:hover {
  background: #e8f0fe;
  transform: scale(1.1);
}
.status-label {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
  display: inline-block;
}

.status-waiting {
  background-color: #e74c3c; /* Red */
}

.status-paid {
  background-color: #8bc34a; /* Light Green */
}

.status-processing {
  background-color: #f1c40f; /* Yellow */
  color: #000;
}

.status-done {
  background-color: #2ecc71; /* Bright Green */
}

.status-cancelled {
  background-color: #ffffff; /* White */
  color: #000;
  border: 1px solid #ddd;
}
.help-link {
  text-decoration: underline;
  color: #1877f2;           /* blue color */
  font-size: 14px;          /* smaller text */
}
.help-link:hover {
  color: #0e5bb5;           /* darker blue on hover */
}