/* Singair Mart Lottery — promo popup.
   Styled as a torn ticket stub: notched waist, perforated divider. */

.sml-pop {
	position: fixed;
	inset:    0;
	z-index:  999990;
	display:  grid;
	place-items: center;
	padding:  20px;
}

.sml-pop[hidden] { display: none; }

.sml-pop__backdrop {
	position:        absolute;
	inset:           0;
	background:      rgba(17, 24, 39, .62);
	backdrop-filter: blur(3px);
	opacity:         0;
	transition:      opacity .28s ease;
}

.sml-pop__box {
	position:      relative;
	width:         min(400px, 100%);
	background:    #fff;
	border-radius: 18px;
	overflow:      hidden;
	box-shadow:    0 24px 60px rgba(16, 24, 40, .28);
	transform:     translateY(14px) scale(.96);
	opacity:       0;
	transition:    transform .32s cubic-bezier(.21, 1.02, .73, 1), opacity .28s ease;
}

.sml-pop.is-open .sml-pop__backdrop { opacity: 1; }
.sml-pop.is-open .sml-pop__box      { transform: none; opacity: 1; }

/* ── Head ─────────────────────────────────────────────────────────────── */

.sml-pop__head {
	position:   relative;
	padding:    30px 26px 26px;
	text-align: center;
	color:      #fff;
	background: linear-gradient(135deg,
		var(--sml-primary, #ff6a21),
		color-mix(in srgb, var(--sml-primary, #ff6a21) 62%, #d90429));
}

/* Confetti dots — decorative, low contrast so text stays readable. */
.sml-pop__head::before {
	content:  '';
	position: absolute;
	inset:    0;
	background-image:
		radial-gradient(circle at 12% 22%, rgba(255,255,255,.5) 2px, transparent 2.5px),
		radial-gradient(circle at 82% 16%, rgba(255,255,255,.35) 3px, transparent 3.5px),
		radial-gradient(circle at 68% 76%, rgba(255,255,255,.28) 2px, transparent 2.5px),
		radial-gradient(circle at 26% 82%, rgba(255,255,255,.4) 2px, transparent 2.5px);
	pointer-events: none;
}

.sml-pop__logo   { max-height: 30px; width: auto; margin: 0 auto 10px; display: block; filter: brightness(0) invert(1); opacity: .92; }
.sml-pop__ticket { font-size: 40px; line-height: 1; margin-bottom: 6px; }

.sml-pop__kicker {
	margin:         0 0 2px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity:        .9;
}

.sml-pop__title {
	margin:      0;
	font-size:   23px;
	font-weight: 800;
	line-height: 1.25;
	color:       #fff;
}

/* ── Perforated waist ─────────────────────────────────────────────────── */

.sml-pop__body {
	position: relative;
	padding:  26px 26px 24px;
	text-align: center;
}

.sml-pop__body::before {
	content:    '';
	position:   absolute;
	top:        0;
	left:       14px;
	right:      14px;
	border-top: 2px dashed #e5e7eb;
}

/* Notches punched out of each side of the perforation. */
.sml-pop__body::after {
	content:   '';
	position:  absolute;
	top:       -11px;
	left:      -11px;
	right:     -11px;
	height:    22px;
	background:
		radial-gradient(circle 11px at 0 50%, transparent 11px, #fff 11.5px) left / 50% 100% no-repeat,
		radial-gradient(circle 11px at 100% 50%, transparent 11px, #fff 11.5px) right / 50% 100% no-repeat;
	pointer-events: none;
}

.sml-pop__desc { margin: 0 0 12px; font-size: 14px; color: #6b7280; line-height: 1.55; }

.sml-pop__rule {
	margin:      0 0 12px;
	font-size:   15px;
	line-height: 1.5;
	color:       #111827;
}
.sml-pop__rule strong { color: var(--sml-primary, #ff6a21); font-weight: 800; }

.sml-pop__mine {
	display:       inline-block;
	margin:        0 0 12px;
	padding:       5px 12px;
	font-size:     12.5px;
	font-weight:   700;
	color:         #065f46;
	background:    #ecfdf5;
	border:        1px solid #a7f3d0;
	border-radius: 999px;
}

.sml-pop__draw { margin: 0 0 18px; font-size: 12.5px; color: #6b7280; }
.sml-pop__draw strong { color: #374151; }

/* ── Actions ──────────────────────────────────────────────────────────── */

.sml-pop__actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.sml-pop__cta {
	display:         block;
	width:           100%;
	padding:         13px 20px;
	background:      var(--sml-primary, #ff6a21);
	color:           #fff !important;
	font-size:       15px;
	font-weight:     700;
	text-align:      center;
	text-decoration: none;
	border-radius:   10px;
	transition:      transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.sml-pop__cta:hover {
	transform:  translateY(-1px);
	filter:     brightness(1.05);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--sml-primary, #ff6a21) 38%, transparent);
}

.sml-pop__link {
	background:  none;
	border:      0;
	padding:     2px 4px;
	font-size:   13px;
	color:       #6b7280;
	cursor:      pointer;
	text-decoration: underline;
}
.sml-pop__link:hover { color: #374151; }

.sml-pop__x {
	position:      absolute;
	top:           10px;
	right:         12px;
	z-index:       2;
	width:         32px;
	height:        32px;
	display:       grid;
	place-items:   center;
	font-size:     24px;
	line-height:   1;
	color:         #fff;
	background:    rgba(255, 255, 255, .18);
	border:        0;
	border-radius: 50%;
	cursor:        pointer;
	transition:    background .16s ease;
}
.sml-pop__x:hover { background: rgba(255, 255, 255, .34); }

.sml-pop :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sml-pop__cta:focus-visible,
.sml-pop__link:focus-visible { outline: 2px solid var(--sml-primary, #ff6a21); outline-offset: 2px; }

@media (max-width: 420px) {
	.sml-pop__head  { padding: 26px 20px 22px; }
	.sml-pop__body  { padding: 22px 20px 20px; }
	.sml-pop__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.sml-pop__box, .sml-pop__backdrop, .sml-pop__cta { transition: none; }
	.sml-pop__box { transform: none; }
}

@media (prefers-color-scheme: dark) {
	.sml-pop__box  { background: #1f2937; }
	.sml-pop__body::after {
		background:
			radial-gradient(circle 11px at 0 50%, transparent 11px, #1f2937 11.5px) left / 50% 100% no-repeat,
			radial-gradient(circle 11px at 100% 50%, transparent 11px, #1f2937 11.5px) right / 50% 100% no-repeat;
	}
	.sml-pop__body::before { border-top-color: #374151; }
	.sml-pop__rule { color: #f9fafb; }
	.sml-pop__desc, .sml-pop__draw { color: #9ca3af; }
	.sml-pop__draw strong { color: #d1d5db; }
}