:root {
      --clr-white: #ffffff;
      --clr-text-dark: #111111;
      --clr-text-gray: #555555;
    }

 

    .live-update-page {
      background-image: url('../images/live-update/bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 100%;

      /* min-height: 100vh; */
      display: flex;
      flex-direction: column;
       font-family: 'Montserrat', sans-serif;
       margin-top: 15px;
    }

    /* ══ HEADER ══ */
    .live-update-header {
      padding: 10px 16px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .live-update-header span {
      color: var(--clr-white);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 255, 255, 0.15);
    }

    .live-update-header i {
      color: #fff;
      font-size: 13px;
    }

    /* ══ SECTION ══ */
    .live-update-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* ══ CARD BASE ══ */
    .live-update-card {
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }

    /* BLUE */
    .live-update-card-blue {
      background: #ddeeff79;
      /* border: 1px solid #1565C0; */
          box-shadow: 0 0 0 2px #fff inset, 0 1px 3px rgb(21 101 192 / 86%);
     
    }

    /* SKY BLUE */
    .live-update-card-skyblue {
     background: #d4ebff4a;
background: linear-gradient(180deg,rgba(212, 235, 255, 0.205) 0%, rgba(187, 222, 251, 1) 100%);
     box-shadow: 0 0 0 2px #fff inset, 0 1px 3px rgb(21 101 192 / 86%);
      margin-bottom: 10px;
    }

    /* GREEN */
    .live-update-card-green {
      background: #e8f5e950;
      /* border: 1px solid #2E7D32; */
      /* box-shadow: 0 0 0 2px #fff inset, 0 4px 18px rgba(46, 125, 50, 0.28); */
      box-shadow: 0 0 0 2px #fff inset, 0 1px 3px rgba(21, 192, 41, 0.86);
    }

    /* ORANGE */
    .live-update-card-orange {
      background: #fff8e161;
    
      /* box-shadow: 0 0 0 2px #fff inset, 0 4px 18px rgba(245, 124, 0, 0.28); */
       box-shadow: 0 0 0 2px #fff inset, 0 1px 3px rgba(255, 128, 1, 0.86);
    }

    /* ══ CARD TITLE ══ */
    .live-update-card-title {
      padding: 8px 14px 6px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-shadow:
    0 1px 2px rgba(0,0,0,0.8),
    0 0 8px rgba(255,255,255,0.15);
    }
    .live-update-card-title img{
      width: 40px;
    }
     .live-arrow-right{
      transform: scale(-1);
     }
    /* Divider lines — width kam ki */
  

    .live-update-card-blue .live-update-card-title::before {
      background: linear-gradient(to right, transparent, #1565C0);
    }

    .live-update-card-blue .live-update-card-title::after {
      background: linear-gradient(to left, transparent, #1565C0);
    }

    .live-update-card-blue .live-update-card-title i {
      color: #1565C0;
    }

    .live-update-card-skyblue .live-update-card-title::before {
      background: linear-gradient(to right, transparent, #42A5F5);
    }

    .live-update-card-skyblue .live-update-card-title::after {
      background: linear-gradient(to left, transparent, #42A5F5);
    }

    .live-update-card-skyblue .live-update-card-title i {
      color: #1976D2;
    }

    .live-update-card-green .live-update-card-title::before {
      background: linear-gradient(to right, transparent, #2E7D32);
    }

    .live-update-card-green .live-update-card-title::after {
      background: linear-gradient(to left, transparent, #2E7D32);
    }

    .live-update-card-green .live-update-card-title i {
      color: #2E7D32;
    }

    .live-update-card-orange .live-update-card-title::before {
      background: linear-gradient(to right, transparent, #F57C00);
    }

    .live-update-card-orange .live-update-card-title::after {
      background: linear-gradient(to left, transparent, #F57C00);
    }

    .live-update-card-orange .live-update-card-title i {
      color: #F57C00;
    }

    .live-update-card-title span {
      font-size: 20px;
      font-weight: 700;
      color: var(--clr-text-dark);
      letter-spacing: 1px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .live-update-card-title i {
      font-size: 11px;
      flex-shrink: 0;
    }

    /* ══ RESULT ══ */
    .live-update-card-result {
      padding: 0 14px 8px;
      text-align: center;
      font-size: 26px;
      font-weight: 600;
      color: #ff0e08;
      letter-spacing: 2px;
    }

    /* ══ TIME ══ */
    .live-update-card-time {
      padding: 0 14px 8px;
      text-align: center;
      font-size: 11px;
      color: var(--clr-text-gray);
      font-weight: 600;
    }

    /* ══ LOADING ══ */
    .live-update-loading {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #E53935;
      color: white;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 16px;
      border-radius: 20px;
      margin: 4px 0 10px;
    }

    .live-update-loading i {
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* ══ CHART BUTTONS ══ */
    .live-update-chart-btns {
      display: flex;
      gap: 8px;
      padding: 0 14px 12px;
    }

    .live-update-btn-jodi {
      flex: 1;
      padding: 0px 0;
      /* background: linear-gradient(180deg, #43a047, #2E7D32); */
          background: linear-gradient(180deg, #43a047, #0a630c);
      color: white;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #1b5e20;
      outline: 2px solid #fff;
      outline-offset: -4px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      box-shadow: 0 3px 10px rgba(46, 125, 50, 0.40);
      font-family: 'Montserrat', sans-serif;
      text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 0 8px rgba(255,255,255,0.15);
        transition: transform var(--move-up-duration)
      cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .live-update-btn-jodi:hover { 
         transform: translateY(var(--move-up-distance));
}
     .live-update-btn-jodi img{
      width: 18px;
     }
     .live-update-btn-panel img{
      width: 18px;
     }
    .live-update-btn-panel {
      flex: 1;
      padding: 7px 0;
    background: linear-gradient(180deg, #1976D2, #09377e);
      color: white;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #0a2d6e;
      outline: 2px solid #fff;
      outline-offset: -4px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      box-shadow: 0 3px 10px rgba(13, 71, 161, 0.40);
      font-family: 'Montserrat', sans-serif;
      text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 0 8px rgba(255,255,255,0.15);
      transition: transform var(--move-up-duration)
      cubic-bezier(0.34, 1.56, 0.64, 1);
    }
   .live-update-btn-panel:hover { 
         transform: translateY(var(--move-up-distance));
}
    /* ══ SECTION HEADER ══ */
    .live-update-section-header {
      background-image: url(../images/live-update/headline.png);
      height: 54px;
      width: 100%;
      background-size: 100%;
      background-repeat: no-repeat;
      border-radius: 10px 10px 0 0;
      margin-bottom: 10px;
    }

    /* ══ ACTION BAR ══ */
    .live-update-action-bar {
      background-image: url(../images/live-update/bg.png);
      background-size: cover;
    display: flex;
    padding: 7px 10px;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
    position: fixed;
    bottom: 0;

    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 420px;
    z-index: 999;
}

    .live-update-action-bar a {
      flex: 1;
      padding: 10px 0;
      text-align: center;
      font-size: 13px;
      /* font-weight: 700; */
      color: white;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 7px;
       font-family: 'Rubik', sans-serif;
       letter-spacing: 0.5px;
      text-shadow: 0px 1px 6px #000000;
    }

    .live-update-btn-whatsapp {
      background: linear-gradient(180deg, #1ebe57, #25D366, #0fa84a);
      /* box-shadow: 0 4px 15px rgba(37, 211, 102, 0.45); */
    }

    .live-update-btn-call {
      background: linear-gradient(180deg, #1565C0, #1976D2, #0d47a1);
      /* box-shadow: 0 4px 15px rgba(25, 118, 210, 0.45); */
    }

    .live-update-btn-refresh {
      background: linear-gradient(180deg, #E65100, #F57C00, #bf360c);
      /* box-shadow: 0 4px 15px rgba(245, 124, 0, 0.45); */
    }
.live-update-btn-whatsapp i,
.live-update-btn-call i,
.live-update-btn-refresh i {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.live-update-btn-whatsapp:hover i,
.live-update-btn-call:hover i,
.live-update-btn-refresh:hover i {
  transform: scale(1.35);
}
    /* ══ WHITE BG CONTAINER ══ */
    .bg-container-live {
      background: #ffffff;
      border-radius: 10px 10px 0 0;
      padding: 15px;
    }
    .loading-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:4px 24px;
    background:#f20d0d;
    border-radius:12px;
    color:#fff;
    font-size:27px;
    font-weight:600;
       transition: transform var(--move-up-duration)
      cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
  
}
 .loading-btn:hover { 
         transform: translateY(var(--move-up-distance));
}

.spinner{
    position:relative;
    width:26px;
    height:26px;
    animation:rotate 1s linear infinite;
}

.spinner span{
    position:absolute;
    width:4px;
    height:4px;
    background:#fff;
    border-radius:50%;
    left:50%;
    top:50%;
    margin:-2px;
}

.spinner span:nth-child(1){transform:rotate(0deg) translateY(-11px);}
.spinner span:nth-child(2){transform:rotate(45deg) translateY(-11px);}
.spinner span:nth-child(3){transform:rotate(90deg) translateY(-11px);}
.spinner span:nth-child(4){transform:rotate(135deg) translateY(-11px);}
.spinner span:nth-child(5){transform:rotate(180deg) translateY(-11px);}
.spinner span:nth-child(6){transform:rotate(225deg) translateY(-11px);}
.spinner span:nth-child(7){transform:rotate(270deg) translateY(-11px);}
.spinner span:nth-child(8){transform:rotate(315deg) translateY(-11px);}

@keyframes rotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}