/* ================================================================
   PIXEL-PERFECT port of the example page's layout.css
   (+ its inline styles converted to classes at the bottom).
   Colors, fonts, sizes, spacing — sab example jaisa hi.
   ================================================================ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1.4;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
table{border-collapse:collapse;border-spacing:0;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
html,body{background-color:#F1F1F1;font-family:Geneva,Tahoma,Verdana,Helvetica,arial,sans-serif;}
div#header{width:100%;text-align:center;padding:12px 0 28px 0;}
div#logo{padding:2px 0 8px 0;}
h1#brand{margin:0;padding:2px 0 10px 0;}
/* logo + site name ek hi unit (ek logo jaisa) — logo + naam paas-paas */
h1#brand a,div#logo a{display:inline-flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap;}
/* newspaper masthead jaisa — bold serif heading */
.brand-name{font-family:Georgia,"Playfair Display","Times New Roman",serif;font-size:3.3em;font-weight:900;letter-spacing:-0.5px;color:#1a1a1a;line-height:1;}
/* logo: bada — naam ke saath balance ho */
img#logo-img{width:auto;height:auto;max-width:min(58%,300px);max-height:132px;margin:0;object-fit:contain;}
/* chhoti screen pe proportionally chhota */
@media (max-width:520px){
  h1#brand a,div#logo a{gap:10px;}
  .brand-name{font-size:2.2em;}
  img#logo-img{max-height:84px;max-width:190px;}
}
div#navbar{width:100%;text-align:center;margin:4px 0px;font-size:1em;}
div.nav-link{width:99.8%;max-width:960px;margin:8px auto;border:1px solid #003399;background-color:rgb(23, 108, 238);}
.nav-text{padding:10px 4px;line-height:20px;color:white;}
div#section{width:100%;text-align:center;margin:4px 0px 12px 0px;}
div#container{width:98%;max-width:960px;margin:auto;display:inline-block;}
tr.game-result{width:100%;height:60px;background-color:white;border:1px solid #CCCCCC;}
tr.space{width:100%;height:12px;}
.game-result:hover{background-color:#F1F1F1; border: #CCCCCC 1px solid;}
td.e-link:hover,div.nav-link:hover,input#direct-chart:hover{background-color:#003399;}
div#footer{width:100%;text-align:center;margin:4px auto 8px auto;display:inline-block;}
div#chart-form{width:96%;max-width:960px;margin:auto;color:white;border:1px solid rgb(231, 170, 38);background-color:#FBC503;display:inline-block;padding:8px 4px;}
h2#chart-text{padding:2px;color:black;line-height:20px;}
select#month,select#year,input#direct-chart{width:30%;min-width:180px;max-width:320px;margin:8px 1%;height:40px;font-size:1em;font-weight:bold;padding:8px;}
input#direct-chart{border:1px solid #003399;background-color:rgb(23, 108, 238);color:white;cursor:pointer;}
a:link,a:hover,a:active,a:visited{color:#2962FF;text-decoration:none;}
table tr.day-number:nth-child(even){background-color:#F9F9F9;}
table tr.day-number:nth-child(odd){background-color:#fff;}
table.chart-table{width:100%;}
tr.chart-head{width:100%;height:40px;border:1px solid #339966;background-color:#33CC99;}
td.month{vertical-align:middle;font-size:1em;color:white;}
tr.date-name{width:100%;height:36px;background-color:#FBC503;border:1px solid rgb(231, 170, 38);}
tr.date-name td.date,tr.date-name th.name{border-right:1px solid rgb(231, 170, 38);vertical-align:middle;}
tr.day-number{width:100%;height:32px;border:1px solid #CCCCCC;}
tr.day-number td.day,tr.day-number td.number{border-right:1px solid #CCCCCC;vertical-align:middle;}
tr.date-name td.date,tr.day-number td.day{color:red;}
td.day div{min-width:60px;max-width:180px;}
td.e-link{vertical-align:middle;color:white;background-color:rgb(23, 108, 238);border:1px solid #003399;}
.aero{color:white;}
tr.option{font-size:1em;color:white;border:2px solid #F1F1F1;height:40px;}
table tr.day-number:hover{background-color:#F0F0F0;color:red;}
div.main-content {width: 98%;margin: 8px 1%;display: inline-block;}
table.quick-result-board{width: 100%; margin-bottom: 36px;}
tr.board-title{width: 100%;height: 60px;border: 1px solid #396;background-color: #3c9; line-height: 1.4;}
tr.board-title > th {vertical-align: middle;font-size: 1.2em;color: #fff;margin: 0 8px;}
tr.board-head{width: 100%;height: 40px;border: 1px solid  #212121;background-color: #424242}
tr.board-head > th {vertical-align: middle;font-size: 1.1em;color: #fff; line-height: 24px; margin: 4px 2px;}
tr.board-head a {color: #fff;}
.games-name{width: 64%;text-align: left;padding: 4px 8px 4px 8px;}
.today-date, .yesterday-date{width: 18%;text-align: center;text-align: right;padding: 4px 12px;}
.game-details{vertical-align: middle;text-align: left;}
.game-details > .game-name{font-size: 1.1em;font-weight: 500;margin: 4px 8px}
.game-details > .game-time{font-size: 0.8em;padding: 2px 8px;float: left;}
.game-details > .game-link{font-size: 0.8em;padding: 2px 8px;}
.today-number, .yesterday-number{vertical-align: middle;text-align: right;padding-right: 8px;}
.today-number > h3, .yesterday-number > h3{font-size: 1.6em;font-weight: 500;margin: 4px 8px;}
tr.highlight{background-color:#fbc503; border: #bf8302 1px solid}

/* ---- example ke INLINE styles, classes me (same values) ---- */

/* SEO line (h1.ads inline: padding:2px 0; margin:0; font-size: small) */
h2.ads{padding:2px 0;margin:0;font-size:small;}

/* red disclaimer (inline: padding:8px 0; margin:8px 0; background:#FF5252; color:white; text-align:center) */
div.disclaimer{padding:8px 0;margin:8px 0;background:#FF5252;color:white;text-align:center;}

/* updated line (inline: margin:8px 1% 2px 1%; color:#339966) */
div.updated{margin:8px 1% 2px 1%;color:#339966;}

/* section label rows — LIVE/NEXT/REST (inline: border-left:8px solid #FF5252; bg #F1F1F1; color #FF5252) */
tr.board-section{border-left:8px solid #FF5252;}
tr.board-section td{vertical-align:middle;font:normal 600 1em Arial, sans-serif;height:40px;padding-left:16px;background-color:#F1F1F1;color:#FF5252;text-align:left;}

/* "New" blinker (example plugin.js styles) */
.new-blinker{color:red;font-weight:bold;margin-right:8px;animation:blink-animation 1.5s infinite;}
@keyframes blink-animation{0%,100%{opacity:1;}50%{opacity:0;}}

/* Refresh button (inline: fixed bottom right, yellow, red text) */
.refresh-wrap{position:fixed;bottom:20px;right:8px;}
input#refresh-btn{border:#e7aa26 1px solid;background:#FBC503;color:Red;height:auto;padding:8px;font-weight:bold;cursor:pointer;}

/* chhota sa practical add: chhoti screen pe chart side-scroll ho jaye (look same rehta hai) */
div.chart{overflow-x:auto;}

/* ---- Custom sections (admin ke banaye, website ke neeche) ---- */
div.custom-section{width:96%;max-width:960px;margin:8px auto;display:inline-block;background:white;border:1px solid #CCCCCC;}
h2.custom-section-title{background-color:#33CC99;border-bottom:1px solid #339966;color:white;padding:8px;font-weight:bold;font-size:1em;}
div.custom-section-body{padding:8px 4px;}
div.custom-section-body img{max-width:100%;height:auto;}

/* ---- Blog (homepage section + /blog list + single post) ---- */
.blog-section{width:100%;display:inline-block;}
.blog-card{padding:14px 16px;text-align:left;}
.blog-card-title{font-size:1.15em;font-weight:700;line-height:1.3;margin-bottom:4px;}
.blog-card-title a{color:#176cee;}
.blog-card-title a:hover{text-decoration:underline;}
.blog-date{color:#339966;font-size:0.8em;font-weight:600;margin-bottom:6px;}
.blog-excerpt{color:#333;font-size:0.95em;line-height:1.5;margin-bottom:10px;}
.blog-readmore{display:inline-block;color:#fff !important;background:rgb(23,108,238);border:1px solid #003399;padding:6px 14px;font-weight:bold;font-size:0.9em;}
.blog-readmore:hover{background:#003399;}
/* post page content — H2/H3 headings theme me */
.blog-body{padding:8px 12px;line-height:1.7;text-align:left;}
.blog-body h2{font-size:1.3em;font-weight:700;color:#222;margin:18px 0 8px;}
.blog-body h3{font-size:1.1em;font-weight:700;color:#333;margin:14px 0 6px;}
.blog-body p{margin:10px 0;}
.blog-body a{color:#176cee;}
.blog-body a:hover{text-decoration:underline;}
.blog-body ul,.blog-body ol{margin:10px 0 10px 24px;}
.blog-body ul{list-style:disc;}
.blog-body ol{list-style:decimal;}
.blog-body img{max-width:100%;height:auto;}
.blog-body blockquote{border-left:4px solid #33CC99;margin:12px 0;padding:4px 14px;color:#555;background:#f7f7f7;}

/* ---- Floating WhatsApp / Telegram buttons (left-bottom) ---- */
.float-contact{position:fixed;bottom:20px;left:8px;z-index:60;display:flex;flex-direction:column;gap:8px;}
a.float-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.35);}
a.float-btn.wa{background:#25D366;}
a.float-btn.tg{background:#229ED9;}
a.float-btn svg{width:27px;height:27px;fill:white;}
a.float-btn:hover{filter:brightness(0.92);}

/* ---- SHOW YOUR GAME row (example inline style) ---- */
td.show-your-game{text-align:center;font:bold 16px Arial, sans-serif;color:#b80000;}
td.show-your-game .game-name{font-size:1em;margin:4px 8px;}
td.show-your-game .game-link{float:none;font-size:0.9em;}

/* ---- chart toggle animation (example plugin.js jaisa) ---- */
.dswr-highlight{background-color:#fff2cc !important;transition:background-color 0.5s ease-in-out;}

/* ---- terms page ---- */
.terms-body{text-align:left;padding:12px 16px;line-height:1.7;}
.terms-body p{margin:8px 0;}

/* ---- Lead / Contact form ---- */
.lead-form{max-width:480px;margin:8px auto;text-align:left;padding:8px 12px;}
.lead-form label{display:block;font-weight:bold;margin:12px 0 4px;font-size:0.95em;}
.lead-form .req{color:#DA040C;}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:10px 8px;font-size:1em;font-family:inherit;border:1px solid #CCCCCC;background:white;margin-top:4px;}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid rgb(23,108,238);border-color:rgb(23,108,238);}
.lead-form textarea{resize:vertical;}
.lead-submit{display:block;width:100%;margin:16px 0 8px;padding:12px;border:1px solid #003399;background-color:rgb(23,108,238);color:white;font-size:1em;font-weight:bold;cursor:pointer;}
.lead-submit:hover{background-color:#003399;}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;opacity:0;}
.lead-success{width:96%;max-width:960px;margin:8px auto;padding:12px;border:1px solid rgb(2,199,124);background-color:rgb(189,239,193);text-align:center;}
.lead-error{width:96%;max-width:960px;margin:8px auto;padding:12px;border:1px solid rgb(239,105,131);background-color:rgb(253,221,226);text-align:center;}

/* ---- Chat bubble (Refresh ke upar, example jaisa) ---- */
.chat-bubble-link{display:block;padding-bottom:12px;}
.chat-bubble-link svg{width:48px;height:48px;fill:#33CC99;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
.chat-bubble-link:hover svg{fill:#339966;}

/* ---- Contact wizard — PREMIUM card UI (screenshot-match) ---- */
.lf-wrap{max-width:560px;margin:24px auto 48px;padding:0 14px;}
.lf-card{background:#fff;border-radius:18px;box-shadow:0 6px 24px rgba(0,0,0,0.08);padding:26px 22px;text-align:center;}
.lf-title{font-size:1.7em;font-weight:800;color:#1c1c1e;margin:0 0 20px;letter-spacing:-0.4px;line-height:1.25;}
.lf-sub{color:#555;line-height:1.7;margin:8px 0 24px;font-size:1.05em;}

.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.lf-list{display:flex;flex-direction:column;gap:12px;}
.lf-opt{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;padding:18px 16px;background:#fff;border:1.5px solid #2b6ef2;border-radius:10px;color:#2b6ef2;font-size:1.15em;font-weight:700;font-family:inherit;cursor:pointer;transition:background 0.18s,box-shadow 0.18s,transform 0.18s;}
.lf-opt:hover{background:#f0f5ff;box-shadow:0 6px 18px rgba(43,110,242,0.18);transform:translateY(-1px);}
.lf-opt:active{transform:translateY(0);}
.lf-oic{width:24px;height:24px;fill:#2b6ef2;flex-shrink:0;}
.lf-otext{flex:0 1 auto;}

.lf-back{margin-top:24px;background:none;border:none;color:#8a8a8e;font-size:1em;font-weight:700;cursor:pointer;font-family:inherit;padding:8px 16px;border-radius:8px;transition:color 0.15s,background 0.15s;}
.lf-back:hover{color:#2b6ef2;background:#f0f5ff;}

#lfForm{text-align:left;}
.lf-label{display:flex;align-items:center;gap:10px;font-weight:800;color:#1c1c1e;margin:22px 0 10px;font-size:1.1em;}
.lf-ic{width:22px;height:22px;fill:#2b6ef2;flex-shrink:0;}
.lf-req{color:#e53935;font-weight:800;}
.lf-input{width:100%;padding:15px 16px;font-size:1.05em;font-family:inherit;border:1.5px solid #d9d9d9;border-radius:12px;background:#fff;color:#1c1c1e;transition:border-color 0.15s,box-shadow 0.15s;}
.lf-input::placeholder{color:#9e9e9e;}
.lf-input:focus{outline:none;border-color:#2b6ef2;box-shadow:0 0 0 4px rgba(43,110,242,0.13);}
.lf-textarea{resize:vertical;min-height:170px;line-height:1.6;}
.lf-count{text-align:right;color:#8a8a8e;font-size:0.95em;margin-top:8px;font-weight:600;}

.lf-send{display:block;width:100%;margin-top:26px;padding:17px;background:#2b6ef2;border:none;border-radius:10px;color:#fff;font-size:1.15em;font-weight:800;font-family:inherit;cursor:pointer;transition:background 0.18s,box-shadow 0.18s,transform 0.18s;}
.lf-send:hover{background:#1d5ae0;box-shadow:0 6px 18px rgba(43,110,242,0.35);transform:translateY(-1px);}
.lf-send:active{transform:translateY(0);}

.lf-center{text-align:center;}
.lf-success-icon{font-size:3.4em;margin-bottom:12px;}
.lf-homelink{text-decoration:none !important;color:white !important;max-width:300px;margin:16px auto 0;}

#lfForm[dir="rtl"]{text-align:right;}
#lfForm[dir="rtl"] .lf-label{flex-direction:row-reverse;justify-content:flex-end;}
#lfForm[dir="rtl"] .lf-count{text-align:left;}

/* ===== Tablet / small ===== */
@media (max-width:640px){
  .lf-wrap{margin:16px auto 36px;padding:0 12px;}
  .lf-grid{grid-template-columns:1fr;}
  .lf-card{padding:24px 18px;border-radius:16px;}
  .lf-title{font-size:1.5em;margin-bottom:18px;}
  .lf-rtitle{font-size:0.98em;}
  .lf-rdesc{font-size:0.84em;}
  .lf-opt{min-height:54px;font-size:1.02em;}
  /* form fields */
  .lf-label{font-size:1.02em;margin:18px 0 8px;gap:8px;}
  .lf-ic{width:20px;height:20px;}
  .lf-input{padding:13px 14px;font-size:1em;border-radius:11px;}
  .lf-textarea{min-height:140px;}
  .lf-send{padding:15px;font-size:1.08em;margin-top:22px;}
}

/* ===== Phone ===== */
@media (max-width:430px){
  .lf-wrap{margin:12px auto 28px;padding:0 10px;}
  .lf-card{padding:20px 14px;border-radius:14px;}
  .lf-title{font-size:1.35em;margin-bottom:14px;}
  .lf-label{font-size:0.98em;margin:15px 0 7px;}
  .lf-ic{width:18px;height:18px;}
  .lf-input{padding:12px 12px;font-size:0.98em;border-radius:10px;}
  .lf-textarea{min-height:120px;line-height:1.5;}
  .lf-count{font-size:0.84em;margin-top:6px;}
  .lf-send{padding:14px;font-size:1.02em;margin-top:18px;border-radius:9px;}
  .lf-back{font-size:0.9em;margin-top:16px;}
  .lf-rcard{padding:12px 13px;}
  .lf-ricon{width:24px;height:24px;}
}

/* ---- Reason CARDS (icon + title + detail + check, unke jaisa) ---- */
.lf-rcard{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid #e3e3e6;border-radius:12px;padding:13px 15px;cursor:pointer;font-family:inherit;transition:border-color 0.18s,box-shadow 0.18s,transform 0.18s;}
.lf-rcard:hover{border-color:#2b6ef2;box-shadow:0 8px 22px rgba(43,110,242,0.15);transform:translateY(-2px);}
.lf-rcard:active{transform:translateY(0);}
.lf-rhead{display:flex;align-items:center;gap:11px;padding-bottom:9px;border-bottom:1px solid #ececef;margin-bottom:8px;}
.lf-ricon{width:26px;height:26px;flex-shrink:0;}
.lf-rtitle{flex:1;font-size:1em;font-weight:800;color:#1c1c1e;line-height:1.3;}
.lf-check{width:22px;height:22px;flex-shrink:0;}
.lf-rcard:hover .lf-check circle{stroke:#2b6ef2;}
.lf-rcard:hover .lf-check path{stroke:#2b6ef2;}
.lf-rdesc{display:block;color:#6b6b70;font-size:0.86em;line-height:1.55;}
#reasonList[dir="rtl"] .lf-rcard{text-align:right;}

/* language buttons — compact (chhote) */
.lf-opt.lf-lang{min-height:52px;padding:13px 12px;font-size:1em;border-radius:9px;}