/* Chez Molo Lotto — ticket final
   Design only: all ticket data remains dynamic in seller.html.
*/
.official-ticket{
  width:100%;
  max-width:700px;
  margin:20px auto;
  position:relative;
  background:#fff;
  border:2px solid #08295d;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(8,41,93,.16);
  color:#08295d;
  font-family:Arial,Helvetica,sans-serif;
}
.official-ticket .ticket-head{
  padding:22px 24px 16px;
  background:#fff;
  border-top:8px solid #08295d;
  border-bottom:2px solid #08295d;
}
.official-ticket .ticket-brand-row{
  display:grid;
  grid-template-columns:155px 1fr 125px;
  gap:14px;
  align-items:center;
}
.official-ticket .ticket-logo{
  width:145px;
  height:145px;
  object-fit:contain;
  display:block;
}
.official-ticket .ticket-brand-center{text-align:center}
.official-ticket .ticket-brand-name{
  font-size:32px;
  font-weight:900;
  line-height:1;
  color:#0750a4;
  white-space:nowrap;
}
.official-ticket .ticket-brand-name b{color:#ef351d}
.official-ticket .ticket-brand-tag{
  margin-top:8px;
  font-size:14px;
  letter-spacing:2px;
  font-weight:700;
  color:#40536d;
  white-space:nowrap;
}
.official-ticket .ticket-brand-site{
  display:inline-block;
  margin-top:9px;
  padding:7px 18px;
  border-radius:18px;
  background:#08295d;
  color:#ffd21a;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.official-ticket .ticket-slogan{
  text-align:left;
  font-size:13px;
  line-height:1.4;
  letter-spacing:1px;
  font-weight:900;
  color:#08295d;
}
.official-ticket .ticket-slogan:after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin-top:7px;
  background:#f4c400;
  transform:skewX(-25deg);
}
.official-ticket .ticket-title-row{
  margin-top:16px;
  padding-top:14px;
  border-top:2px solid #08295d;
}
.official-ticket .ticket-title{
  text-align:center;
  font-size:31px;
  font-weight:900;
  letter-spacing:1px;
}
.official-ticket .ticket-title small{
  display:block;
  margin-top:5px;
  font-size:11px;
  letter-spacing:4px;
  font-weight:800;
}
.official-ticket .ticket-ref{
  text-align:right;
  font-size:11px;
  font-weight:800;
}
.official-ticket .ticket-barcode{
  width:235px;
  height:38px;
  margin:7px 0 0 auto;
}
.official-ticket .ticket-info{
  padding:16px 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 30px;
  background:#fff;
  border-bottom:2px dashed #718096;
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}
.official-ticket .ticket-info div{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.official-ticket .ticket-watermark{
  top:410px;
  font-size:150px;
  color:rgba(8,41,93,.045);
  pointer-events:none;
}
.official-ticket .ticket-table{
  position:relative;
  z-index:1;
  margin:15px 24px 0;
  background:rgba(255,255,255,.95);
  font-size:12px;
  font-weight:700;
}
.official-ticket .ticket-table-head,
.official-ticket .ticket-table-row{
  display:grid;
  grid-template-columns:32% 43% 25%;
  align-items:center;
}
.official-ticket .ticket-table-head{
  min-height:42px;
  background:#08295d;
  color:#fff;
  border-radius:7px;
  font-size:13px;
  font-weight:900;
}
.official-ticket .ticket-table-row{
  min-height:44px;
  border-bottom:1px dashed #9aa8ba;
}
.official-ticket .ticket-table-head span,
.official-ticket .ticket-table-row span{
  padding:7px 8px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.official-ticket .ticket-table-head span:first-child,
.official-ticket .ticket-table-row span:first-child{text-align:left}
.official-ticket .ticket-total{
  margin:15px 24px 0;
  padding:13px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  border-top:2px dashed #08295d;
  border-bottom:2px dashed #08295d;
  font-size:24px;
  font-weight:900;
}
.official-ticket .ticket-total strong{font-size:25px}
.official-ticket .ticket-bottom{
  display:grid;
  grid-template-columns:135px 1fr 120px;
  gap:18px;
  align-items:center;
  padding:20px 24px 22px;
}
.official-ticket .ticket-qr{
  width:125px;
  height:125px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.official-ticket .ticket-qr canvas{
  max-width:120px;
  max-height:120px;
}
.official-ticket .ticket-qr img:not(.ticket-qr-logo){
  max-width:120px;
  max-height:120px;
}
.official-ticket .ticket-qr-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:31px;
  height:31px;
  object-fit:contain;
  background:#fff;
  border-radius:6px;
  padding:2px;
  z-index:20;
}
.official-ticket .ticket-scan{
  text-align:center;
  font-size:12px;
  font-weight:800;
}
.official-ticket .ticket-scan:after{
  content:"";
  display:block;
  width:150px;
  height:5px;
  margin:11px auto 0;
  background:#f4c400;
  transform:skewX(-25deg);
}
.official-ticket .ticket-scan .good{
  margin-top:9px;
  color:#08295d;
  font-size:34px;
  font-family:cursive;
  font-weight:900;
}
.official-ticket .ticket-stamp{
  width:108px;
  height:108px;
  border:3px solid #08295d;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#08295d;
  font-size:10px;
  font-weight:900;
  line-height:1.15;
  transform:rotate(-8deg);
}
.official-ticket .ticket-footer{
  background:#08295d;
  color:#fff;
  text-align:center;
  padding:15px 8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  border-top:5px solid #f4c400;
}
@media(max-width:520px){
  .official-ticket{
    max-width:100%;
    margin:16px auto;
  }
  .official-ticket .ticket-head{
    padding:17px 10px 13px;
    border-top-width:7px;
  }
  .official-ticket .ticket-brand-row{
    grid-template-columns:108px 1fr 70px;
    gap:6px;
  }
  .official-ticket .ticket-logo{
    width:104px;
    height:104px;
  }
  .official-ticket .ticket-brand-name{
    font-size:23px;
    letter-spacing:-.4px;
  }
  .official-ticket .ticket-brand-tag{
    font-size:8px;
    letter-spacing:1px;
  }
  .official-ticket .ticket-brand-site{
    font-size:8px;
    padding:5px 9px;
  }
  .official-ticket .ticket-slogan{
    font-size:8px;
    line-height:1.3;
    letter-spacing:.5px;
  }
  .official-ticket .ticket-title{
    font-size:25px;
  }
  .official-ticket .ticket-title small{
    font-size:8px;
    letter-spacing:2.5px;
  }
  .official-ticket .ticket-ref{
    font-size:8px;
  }
  .official-ticket .ticket-barcode{
    width:185px;
    height:32px;
  }
  .official-ticket .ticket-info{
    padding:13px 10px;
    gap:7px 10px;
    font-size:8.5px;
  }
  .official-ticket .ticket-watermark{
    top:350px;
    font-size:115px;
  }
  .official-ticket .ticket-table{
    margin:12px 10px 0;
    font-size:9px;
  }
  .official-ticket .ticket-table-head{
    min-height:35px;
    font-size:10px;
  }
  .official-ticket .ticket-table-row{
    min-height:39px;
  }
  .official-ticket .ticket-table-head span,
  .official-ticket .ticket-table-row span{
    padding:6px 4px;
  }
  .official-ticket .ticket-total{
    margin:12px 10px 0;
    padding:11px 7px;
    font-size:19px;
  }
  .official-ticket .ticket-total strong{font-size:20px}
  .official-ticket .ticket-bottom{
    grid-template-columns:88px 1fr 78px;
    gap:6px;
    padding:15px 10px 17px;
  }
  .official-ticket .ticket-qr{
    width:84px;
    height:84px;
  }
  .official-ticket .ticket-qr canvas,
  .official-ticket .ticket-qr img:not(.ticket-qr-logo){
    max-width:82px;
    max-height:82px;
  }
  .official-ticket .ticket-qr-logo{
    width:24px;
    height:24px;
  }
  .official-ticket .ticket-scan{
    font-size:8px;
  }
  .official-ticket .ticket-scan:after{
    width:105px;
    height:4px;
    margin-top:8px;
  }
  .official-ticket .ticket-scan .good{
    font-size:24px;
    margin-top:7px;
  }
  .official-ticket .ticket-stamp{
    width:72px;
    height:72px;
    font-size:7px;
  }
  .official-ticket .ticket-footer{
    padding:11px 4px;
    font-size:8px;
    letter-spacing:1.8px;
  }
}

/* ===== CML REFERENCE GRAPHICS ===== */
.official-ticket .ticket-logo{content:url("/cml-ticket-header-logo.png");width:145px;height:145px;object-fit:contain}
.official-ticket .ticket-qr-logo{content:url("/cml-ticket-qr-logo.png");width:31px;height:31px;object-fit:contain;background:#fff;padding:0;border-radius:0}
.official-ticket .ticket-scan .good{font-size:0!important;width:100%;height:125px;background:url("/cml-ticket-goodluck.png") center center/contain no-repeat;margin:0!important}
.official-ticket .ticket-stamp{font-size:0!important;width:108px;height:108px;border:0!important;transform:none!important;background:url("/cml-ticket-seal.png") center/contain no-repeat}
@media(max-width:520px){.official-ticket .ticket-logo{width:104px;height:104px}.official-ticket .ticket-scan .good{height:82px}.official-ticket .ticket-stamp{width:72px;height:72px}}