@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap");

:root{
  --bg:#f3f3f3;
  --card:#fff;
  --ink:#101317;
  --muted:#747b85;
  --line:#e0e4e8;
  --brand:#111417;
  --accent:#f46f2a;
  --green:#138348;
  --shadow:0 26px 65px rgba(25,30,35,.13);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.95),rgba(243,243,243,.78) 37%,#efefef 75%);
}
button,input{font:inherit}
a{text-decoration:none;color:inherit}
.entryPage{min-height:100vh}
.entryWrap{min-height:100vh;display:grid;place-items:center;padding:34px 16px}
.entryCard{
  width:min(510px,100%);
  background:rgba(255,255,255,.97);
  border:1px solid rgba(222,226,230,.95);
  border-radius:26px;
  padding:28px;
  box-shadow:var(--shadow);
}
.tukiTopBrand{
  text-align:center;
  font-size:42px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-1.5px;
  color:#111417;
  padding:2px 0 22px;
  border-bottom:1px solid #eef0f2;
}
.entryIntro{padding:23px 0 15px}
.entryEyebrow{
  display:inline-flex;padding:6px 10px;border-radius:999px;
  background:#fff4e7;border:1px solid #f1d2af;color:#9c591d;
  font-size:10px;font-weight:900
}
.entryIntro h1{margin:12px 0 6px;font-size:27px;line-height:1.25}
.entryIntro p{margin:0;color:var(--muted);font-size:11px;line-height:1.8}
.entryForm{display:grid;gap:12px}
.entryForm label>span{display:block;margin:0 2px 6px;font-size:11px;font-weight:900}
.entryForm input{
  width:100%;height:51px;border:1px solid var(--line);border-radius:14px;
  background:#fff;outline:0;padding:0 14px;color:#111;transition:.18s ease
}
.entryForm input:focus{border-color:#b9c0c8;box-shadow:0 0 0 4px rgba(17,20,23,.05)}
.entryPrimary{
  width:100%;height:51px;border:0;border-radius:14px;color:#fff;font-weight:900;
  background:linear-gradient(180deg,#ff762f,#f15f19);
  cursor:pointer;box-shadow:0 10px 19px rgba(240,95,25,.18)
}
.entryPrimary:disabled{opacity:.58;cursor:not-allowed}
.entryNotice{border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:10px;font-weight:800;line-height:1.7}
.entryError{background:#fff0f0;border:1px solid #efcaca;color:#aa3434}
.entryDivider{display:flex;align-items:center;gap:10px;margin:19px 0 13px;color:#a0a5ab;font-size:10px}
.entryDivider:before,.entryDivider:after{content:"";height:1px;background:#e9ebee;flex:1}
.entryOptions{display:grid;gap:9px}
.entryOption{
  min-height:72px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;
  border:1px solid var(--line);border-radius:15px;background:#fff;padding:10px 12px;transition:.16s ease
}
.entryOption:hover{transform:translateY(-1px);border-color:#cfd4da;box-shadow:0 8px 18px rgba(17,20,23,.05)}
.entryOption.demoOption{background:#fbfaf7;border-color:#e9dec8}
.optionIcon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#f5f6f7;font-size:17px}
.demoOption .optionIcon{background:#fff2db}
.entryOption strong{display:block;font-size:12px}
.entryOption span{display:block;color:#7a818b;margin-top:4px;font-size:9px;line-height:1.55}
.entryOption>b{font-size:18px;color:#979da5}
.entryAbout{
  margin:13px auto 0;min-height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;color:#555d66;font-size:10px;font-weight:900
}
.entryAbout:hover{background:#f6f7f8}
.entryFooter{
  margin-top:13px;padding-top:14px;border-top:1px solid #eef0f2;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#a0a5ac;font-size:8px
}
.restaurantChooser{margin-top:14px;border:1px solid var(--line);border-radius:16px;padding:12px;background:#f9fafb}
.chooserHead strong{display:block;font-size:12px}
.chooserHead span{display:block;margin-top:3px;color:#7c838d;font-size:9px}
.restaurantChooserList{display:grid;gap:8px;margin-top:10px}
.restaurantChoice{
  border:1px solid #dfe3e7;border-radius:12px;padding:11px;background:#fff;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;text-align:right
}
.restaurantChoice strong{display:block;font-size:11px}
.restaurantChoice small{display:block;margin-top:3px;color:#7a818a;font-size:9px}
.restaurantChoice span{font-size:17px;color:#939aa2}
@media(max-width:560px){
  .entryCard{padding:20px;border-radius:22px}
  .entryIntro h1{font-size:24px}
  .entryWrap{padding:18px 11px}
  .tukiTopBrand{font-size:38px}
}


/* =========================================================
   V10.4.0 — TuKi service illustrations on main entry
   ========================================================= */

.illustratedEntry{
  width:min(1080px,100%) !important;
  padding:26px !important;
}

.illustratedEntry .tukiTopBrand{
  font-size:48px;
  padding-bottom:20px;
}

.entryMainGrid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:24px;
  align-items:stretch;
  padding-top:22px;
}

.serviceShowcase{
  position:relative;
  overflow:hidden;
  min-height:590px;
  border:1px solid #e3e7ec;
  border-radius:22px;
  padding:16px;
  background:
    radial-gradient(circle at 18% 18%,rgba(47,114,218,.11),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(248,129,42,.12),transparent 26%),
    linear-gradient(180deg,#f9fbfe,#f5f8fb);
}

.serviceHeroFrame{
  border-radius:18px;
  overflow:hidden;
  background:#eef4fa;
  border:1px solid rgba(210,220,231,.88);
  box-shadow:0 14px 34px rgba(38,63,89,.08);
}

.serviceHeroImage{
  width:100%;
  display:block;
  aspect-ratio:1.43/1;
  object-fit:cover;
  object-position:center;
}

.showcaseText{
  padding:18px 5px 9px;
}

.showcaseEyebrow{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#eef5ff;
  border:1px solid #d9e7f8;
  color:#34618f;
  font-size:10px;
  font-weight:900;
}

.showcaseText h2{
  margin:10px 0 7px;
  font-size:24px;
  line-height:1.35;
}

.showcaseText p{
  margin:0;
  color:#6d7681;
  font-size:11px;
  line-height:1.9;
}

.serviceChips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:8px 4px 2px;
}

.serviceChips span{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #e0e5ea;
  background:#fff;
  color:#4f5863;
  font-size:9px;
  font-weight:900;
}

.loginSide{
  min-width:0;
}

.loginSide .entryIntro{
  padding-top:5px;
}

.serviceFlow{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid #eceff2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.serviceFlowCard{
  position:relative;
  overflow:hidden;
  min-height:180px;
  border:1px solid #e2e6eb;
  border-radius:17px;
  background:#fff;
  padding:10px;
  text-align:center;
}

.serviceFlowCard img{
  width:100%;
  height:86px;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  background:#f6f8fa;
  margin-bottom:9px;
}

.serviceFlowCard strong{
  display:block;
  font-size:11px;
}

.serviceFlowCard span{
  display:block;
  margin-top:4px;
  color:#7a828c;
  font-size:8px;
  line-height:1.55;
}

.flowNumber{
  position:absolute;
  top:7px;
  right:7px;
  z-index:2;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111417;
  color:#fff;
  border:2px solid #fff;
  font-size:9px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(17,20,23,.18);
}

@media(max-width:900px){
  .entryMainGrid{
    grid-template-columns:1fr;
  }

  .serviceShowcase{
    min-height:auto;
  }

  .serviceFlow{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:560px){
  .illustratedEntry{
    padding:16px !important;
  }

  .illustratedEntry .tukiTopBrand{
    font-size:40px;
  }

  .serviceShowcase{
    padding:10px;
  }

  .showcaseText h2{
    font-size:20px;
  }

  .serviceFlow{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .serviceFlowCard{
    min-height:165px;
  }
}

html,body,button,input,select,textarea{font-family:"Alexandria","Segoe UI",Tahoma,Arial,sans-serif!important}


/* =========================================================
   V10.8.0 — Unified restaurant entry
   ========================================================= */
.entryChoiceHint{
  margin:2px 2px 9px;
  color:#6f7884;
  font-size:9px;
  font-weight:800;
}
.entryOption.demoOption{
  background:linear-gradient(180deg,#fffaf5,#fff);
  border-color:#f2d6b7;
}
.entryOption.demoOption .optionIcon{
  background:#fff0dc;
}
.entryOption:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(17,24,39,.06);
}
.entryPrimary{
  min-height:50px;
}

/* V10.12.0 — real-account demo credentials */
.demoCredentialsCard{
  display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;
  border:1px solid #f0d2aa;background:linear-gradient(135deg,#fffaf3,#fff);
  border-radius:16px;padding:13px;margin-bottom:10px
}
.demoCredentialsText>strong{display:block;font-size:11px;margin:1px 0 4px}
.demoCredentialsText>span{display:block;font-size:8px;color:#7d8490;line-height:1.7}
.demoCredentialRows{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.demoCredentialRows>div{
  min-width:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;
  border:1px solid #e5e8ec;background:#fff;border-radius:10px;padding:7px
}
.demoCredentialRows small{font-size:7px;color:#8a929c;font-weight:800}
.demoCredentialRows code{direction:ltr;text-align:left;font-family:Consolas,monospace;font-size:9px;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.demoCredentialRows button{border:0;background:#111418;color:#fff;border-radius:7px;padding:6px 8px;font-size:7px;font-weight:900;cursor:pointer}
@media(max-width:620px){.demoCredentialRows{grid-template-columns:1fr}}