/* =============================================================================
 *  TSFI DUBAI — customer claim app  ·  route /dubai
 *  EVERY rule is scoped under .tsfi-ae so nothing leaks into the console UI.
 *  Load AFTER the platform stylesheets.
 * ============================================================================= */
/* =============================================================================
   TSFI DUBAI — customer app
   Separate from the India TSFI platform. AED currency, +971 mobile.
   Palette: jewellery-box midnight, gold leaf, pearl, facet blue.
   ============================================================================= */
.tsfi-ae{
  --ink:#0E1A2B;          /* velvet midnight — the jewellery box */
  --ink-2:#16263D;        /* raised panel */
  --ink-3:#1F3352;        /* hairline / border */
  --gold:#C9A227;         /* gold leaf */
  --gold-soft:#E8D9A0;    /* polished gold highlight */
  --pearl:#F6F3EC;        /* pearl */
  --facet:#7FA8C9;        /* diamond blue-white */
  --ok:#3FB984;
  --warn:#E0A94A;
  --bad:#E2685F;
  --shadow:0 18px 48px rgba(0,0,0,.42);
  --display:"Bodoni Moda","Didot","Playfair Display",Georgia,"Times New Roman",serif;
  --ui:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
.tsfi-ae, .tsfi-ae *{box-sizing:border-box}
.tsfi-ae, .tsfi-ae{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 50% -12%, #1B2E4B 0%, transparent 62%),
    linear-gradient(180deg,#0B1524 0%, var(--ink) 46%, #0A1320 100%);
  
  color:var(--pearl); font-family:var(--ui); font-size:16px; line-height:1.55;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
/* faint facet lattice — the only ambient texture */
.tsfi-ae::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:
    linear-gradient(60deg,transparent 49.6%,var(--facet) 49.8%,transparent 50%),
    linear-gradient(-60deg,transparent 49.6%,var(--facet) 49.8%,transparent 50%);
  background-size:78px 135px;
}
.tsfi-ae .wrap{position:relative; max-width:480px; margin:0 auto; padding:22px 18px 56px; min-height:100vh}
/* ---------- masthead ---------- */
.tsfi-ae .mast{display:flex; align-items:center; gap:12px; padding:6px 2px 20px}
.tsfi-ae .mast .mark{flex:none}
.tsfi-ae .mast .tt{line-height:1.15}
.tsfi-ae .mast .tt b{display:block; font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:.02em}
.tsfi-ae .mast .tt span{display:block; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:600}
.tsfi-ae .mast .out{margin-left:auto}
/* ---------- shared surfaces ---------- */
.tsfi-ae .card{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--ink-3); border-radius:18px; padding:22px 20px;
  box-shadow:var(--shadow); backdrop-filter:blur(2px);
}
.tsfi-ae .card + .card{margin-top:16px}
.tsfi-ae h1{font-family:var(--display); font-size:30px; line-height:1.16; font-weight:600; margin:0 0 8px; letter-spacing:.01em}
.tsfi-ae h2{font-family:var(--display); font-size:22px; font-weight:600; margin:0 0 6px}
.tsfi-ae .eyebrow{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:0 0 10px}
.tsfi-ae .lede{color:#B9C6D8; font-size:14.5px; margin:0 0 18px}
.tsfi-ae .muted{color:#8FA0B7; font-size:13px}
/* gold hairline with a facet notch — structural, marks a step boundary */
.tsfi-ae .rule{display:flex; align-items:center; gap:10px; margin:22px 0}
.tsfi-ae .rule i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--ink-3),transparent)}
.tsfi-ae .rule svg{flex:none; opacity:.85}
/* ---------- form controls ---------- */
.tsfi-ae label{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#93A4BC; font-weight:700; margin:0 0 7px}
.tsfi-ae .field{margin-bottom:16px}
.tsfi-ae input[type=text], .tsfi-ae input[type=tel]{
  width:100%; height:52px; border-radius:12px; border:1px solid var(--ink-3);
  background:rgba(0,0,0,.28); color:var(--pearl); font-family:var(--ui);
  font-size:17px; padding:0 15px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.tsfi-ae input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.16)}
.tsfi-ae input::placeholder{color:#5D6E86}
.tsfi-ae .phone{display:flex; align-items:stretch; gap:0}
.tsfi-ae .phone .cc{
  display:flex; align-items:center; gap:7px; padding:0 13px; height:52px;
  border:1px solid var(--ink-3); border-right:none; border-radius:12px 0 0 12px;
  background:rgba(0,0,0,.38); font-weight:700; font-size:16px; color:var(--gold-soft); white-space:nowrap;
}
.tsfi-ae .phone input{border-radius:0 12px 12px 0; letter-spacing:.06em}
.tsfi-ae .otp{letter-spacing:.5em !important; font-size:22px !important; text-align:center; font-weight:700}
/* ---------- buttons ---------- */
.tsfi-ae .btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  height:52px; border-radius:12px; border:none; cursor:pointer;
  font-family:var(--ui); font-size:15px; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#2A1F04;
  transition:transform .12s ease, filter .15s ease;
}
.tsfi-ae .btn:hover:not(:disabled){filter:brightness(1.07)}
.tsfi-ae .btn:active:not(:disabled){transform:translateY(1px)}
.tsfi-ae .btn:disabled{opacity:.42; cursor:not-allowed}
.tsfi-ae .btn.ghost{background:transparent; border:1px solid var(--ink-3); color:var(--pearl)}
.tsfi-ae .btn.ghost:hover:not(:disabled){border-color:var(--gold); color:var(--gold-soft)}
.tsfi-ae .btn.sm{height:42px; font-size:13.5px; width:auto; padding:0 16px}
.tsfi-ae .btn-row{display:flex; gap:10px; margin-top:6px}
.tsfi-ae .btn-row .btn{flex:1}
.tsfi-ae .linkish{background:none;border:none;color:var(--gold-soft);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
/* ---------- messages ---------- */
.tsfi-ae .msg{border-radius:11px; padding:11px 14px; font-size:13.5px; margin-bottom:14px; border:1px solid; display:none}
.tsfi-ae .msg.on{display:block}
.tsfi-ae .msg.err{background:rgba(226,104,95,.10); border-color:rgba(226,104,95,.4); color:#F3B3AE}
.tsfi-ae .msg.ok{background:rgba(63,185,132,.10); border-color:rgba(63,185,132,.4); color:#A8E6C9}
.tsfi-ae .msg.info{background:rgba(127,168,201,.10); border-color:rgba(127,168,201,.36); color:#C2D9EC}
/* ---------- identity strip (step 3) ---------- */
.tsfi-ae .ident{display:grid; grid-template-columns:1fr; gap:0}
.tsfi-ae .ident .row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 0; border-bottom:1px solid var(--ink-3)}
.tsfi-ae .ident .row:last-child{border-bottom:none}
.tsfi-ae .ident .k{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#8FA0B7; font-weight:700}
.tsfi-ae .ident .v{font-size:16px; font-weight:600; text-align:right}
.tsfi-ae .ident .v.big{font-family:var(--display); font-size:20px}
.tsfi-ae .pill{display:inline-block; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.tsfi-ae .pill.ok{background:rgba(63,185,132,.16); color:#7BE0B2; border:1px solid rgba(63,185,132,.34)}
.tsfi-ae .pill.warn{background:rgba(224,169,74,.16); color:#F0CE92; border:1px solid rgba(224,169,74,.34)}
.tsfi-ae .pill.bad{background:rgba(226,104,95,.16); color:#F3B3AE; border:1px solid rgba(226,104,95,.34)}
/* ---------- game choice ---------- */
.tsfi-ae .games{display:grid; gap:14px}
.tsfi-ae .game{
  position:relative; text-align:left; cursor:pointer; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--ink-3); border-radius:18px; padding:20px; color:inherit;
  font:inherit; transition:border-color .18s, transform .18s;
}
.tsfi-ae .game:hover{border-color:var(--gold); transform:translateY(-2px)}
.tsfi-ae .game h3{font-family:var(--display); font-size:21px; margin:12px 0 5px; font-weight:600}
.tsfi-ae .game p{margin:0; font-size:13.5px; color:#A9B8CC}
.tsfi-ae .game .art{opacity:.95}
/* ---------- the diamond wheel (signature) ---------- */
.tsfi-ae .wheelwrap{position:relative; width:100%; max-width:340px; margin:6px auto 0; aspect-ratio:1}
.tsfi-ae #wheel{width:100%; height:100%; display:block; transform:rotate(0deg)}
.tsfi-ae .spinning #wheel{transition:transform 5.4s cubic-bezier(.13,.72,.16,1)}
.tsfi-ae .pointer{position:absolute; top:-4px; left:50%; transform:translateX(-50%); z-index:3}
.tsfi-ae .wheel-hub{
  position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 38% 32%, #24395B, #0D1929 72%);
  border:1px solid var(--gold); box-shadow:0 0 26px rgba(201,162,39,.28), inset 0 0 18px rgba(0,0,0,.6);
  font-family:var(--display); font-size:13px; color:var(--gold-soft); letter-spacing:.06em; pointer-events:none;
}
/* ---------- gift grid ---------- */
.tsfi-ae .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px}
.tsfi-ae .gift{
  text-align:left; cursor:pointer; padding:0; overflow:hidden; color:inherit; font:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--ink-3); border-radius:15px; transition:border-color .18s, transform .18s;
}
.tsfi-ae .gift:hover{border-color:var(--gold); transform:translateY(-2px)}
.tsfi-ae .gift.pick{border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,162,39,.28)}
.tsfi-ae .gift .ph{aspect-ratio:1; background:#0B1524; display:block; width:100%; object-fit:cover}
.tsfi-ae .gift .bd{padding:11px 12px 13px}
.tsfi-ae .gift .nm{font-size:13.5px; font-weight:700; line-height:1.3; margin-bottom:5px}
.tsfi-ae .gift .ct{font-size:11px; color:#8FA0B7; letter-spacing:.08em; text-transform:uppercase}
.tsfi-ae .gift .pr{font-family:var(--display); font-size:16px; color:var(--gold-soft); margin-top:6px}
/* ---------- won gift ---------- */
.tsfi-ae .prize{text-align:center; padding:8px 0 4px}
.tsfi-ae .prize img{width:170px; height:170px; object-fit:cover; border-radius:16px; border:1px solid var(--gold); box-shadow:0 0 34px rgba(201,162,39,.22)}
.tsfi-ae .prize .nm{font-family:var(--display); font-size:25px; margin:16px 0 4px; line-height:1.2}
.tsfi-ae .prize .mt{color:#A9B8CC; font-size:13.5px}
/* ---------- explore (login page) ---------- */
.tsfi-ae .exp-head{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; user-select:none}
.tsfi-ae .exp-head h2{margin:0; font-size:19px}
.tsfi-ae .chev{transition:transform .2s ease; color:var(--gold); font-size:13px}
.tsfi-ae .chev.open{transform:rotate(90deg)}
.tsfi-ae .slabsel{width:100%; height:46px; border-radius:11px; border:1px solid var(--ink-3); background:rgba(0,0,0,.3);
  color:var(--pearl); font-family:var(--ui); font-size:14px; padding:0 12px; margin:14px 0 4px}
.tsfi-ae .strip{display:flex; gap:11px; overflow-x:auto; padding:12px 2px 6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.tsfi-ae .strip::-webkit-scrollbar{height:5px}
.tsfi-ae .strip::-webkit-scrollbar-thumb{background:var(--ink-3); border-radius:9px}
.tsfi-ae .strip .g{flex:0 0 132px; scroll-snap-align:start; border:1px solid var(--ink-3); border-radius:13px; overflow:hidden; background:rgba(255,255,255,.03)}
.tsfi-ae .strip .g img{width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#0B1524}
.tsfi-ae .strip .g .b{padding:9px 10px 11px}
.tsfi-ae .strip .g .n{font-size:12px; font-weight:700; line-height:1.3}
.tsfi-ae .strip .g .p{font-family:var(--display); font-size:14px; color:var(--gold-soft); margin-top:4px}
/* ---------- modal ---------- */
.tsfi-ae .scrim{position:fixed; inset:0; background:rgba(4,9,17,.78); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; z-index:60}
.tsfi-ae .scrim.on{display:flex}
.tsfi-ae .modal{width:100%; max-width:380px; background:linear-gradient(180deg,#16263D,#101E32); border:1px solid var(--gold); border-radius:19px; padding:24px; box-shadow:var(--shadow);position:unset;display:block;}
.tsfi-ae .modal h3{font-family:var(--display); font-size:22px; margin:0 0 9px}
.tsfi-ae .modal p{font-size:14px; color:#BCCADC; margin:0 0 18px}
/* ---------- misc ---------- */
.tsfi-ae .screen{display:none; animation:rise .42s cubic-bezier(.2,.7,.25,1) both}
.tsfi-ae .screen.on{display:block}

@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.tsfi-ae .center{text-align:center}
.tsfi-ae .spinner{width:19px;height:19px;border:2px solid rgba(42,31,4,.3);border-top-color:#2A1F04;border-radius:50%;animation:sp .7s linear infinite}

@keyframes sp{to{transform:rotate(360deg)}}
.tsfi-ae .empty{text-align:center; padding:26px 10px; color:#8FA0B7; font-size:14px}
.tsfi-ae :focus-visible{outline:2px solid var(--gold); outline-offset:2px}

@media (prefers-reduced-motion:reduce){
.tsfi-ae, .tsfi-ae *{animation-duration:.01ms !important; transition-duration:.01ms !important}
.tsfi-ae .spinning #wheel{transition:transform .01ms !important}


}

@media (max-width:380px){
.tsfi-ae .grid{grid-template-columns:1fr}
.tsfi-ae h1{font-size:26px}
 
}
/* Angular: hide the template until the app has bootstrapped */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{display:none !important}