@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Core Setup */
.asl-lottery-wrap {
    --navy: #092143;
    --navy-light: #163665;
    --red: #ee4040;
    --red-light: #ff6868;
    --bg-white: #ffffff;
    --bg-slate: #f8fafc;
    --border-slate: #f1f5f9;
    --text-navy: #092143;
    --text-slate: #64748b;
    --text-light: #94a3b8;
    
    font-family: "Cairo", system-ui, -apple-system, sans-serif;
    direction: rtl;
    background-color: var(--bg-white);
    border-radius: 1.5rem;
    border: 1px solid var(--border-slate);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Animations */
@keyframes asl-marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}
@keyframes asl-pulse {
    50% { opacity: 0.5; }
}
@keyframes asl-bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
@keyframes asl-ring {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
}

/* Header Section */
.asl-header {
    padding: 2.5rem 1.5rem 1.5rem;
    text-align: center;
    position: relative;
}
@media (min-width: 768px) {
    .asl-header { padding-left: 3rem; padding-right: 3rem; }
}
.asl-header-bg-blob1 {
    position: absolute; top: 0; right: 25%;
    width: 24rem; height: 24rem;
    background: linear-gradient(to bottom right, rgba(238,64,64,0.05), rgba(9,33,67,0.05));
    border-radius: 9999px; filter: blur(64px); z-index: -1; pointer-events: none;
}
.asl-header-bg-blob2 {
    position: absolute; bottom: -2.5rem; left: 2.5rem;
    width: 20rem; height: 20rem;
    background: linear-gradient(to top right, rgba(9,33,67,0.05), transparent);
    border-radius: 9999px; filter: blur(40px); z-index: -1; pointer-events: none;
}
.asl-header-active-tag {
    display: none;
}
@media (min-width: 768px) {
    .asl-header-active-tag {
        position: absolute; top: 1rem; right: 1.5rem;
        display: flex; align-items: center; gap: 0.5rem;
        font-size: 0.75rem; font-weight: 700; color: rgba(9,33,67,0.7);
        border: 1px solid rgba(9,33,67,0.1); background: rgba(9,33,67,0.05);
        padding: 0.375rem 0.75rem; border-radius: 9999px;
    }
}
.asl-header-active-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 9999px;
    background-color: #10b981; animation: asl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.asl-header-supertag {
    display: inline-flex; align-items: center; gap: 0.375rem;
    background: rgba(238,64,64,0.1); border: 1px solid rgba(238,64,64,0.15);
    color: var(--red); font-weight: 700; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 0.375rem 0.875rem; border-radius: 9999px;
    margin-bottom: 1.125rem; animation: asl-bounce 2s infinite; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.asl-header-title {
    font-size: 1.875rem; font-weight: 900; color: var(--navy);
    letter-spacing: -0.025em; line-height: 1.25; margin: 0;
}
@media (min-width: 768px) {
    .asl-header-title { font-size: 2.25rem; }
}
.asl-header-sub {
    color: var(--text-slate); font-weight: 500; font-size: 0.875rem;
    max-width: 32rem; margin: 0.625rem auto 0; line-height: 1.625;
}
@media (min-width: 768px) {
    .asl-header-sub { font-size: 1rem; }
}

/* Marquee Section */
.asl-marquee-section {
    position: relative; background-color: var(--bg-slate);
    padding: 0.75rem 0; border-top: 1px solid var(--border-slate); border-bottom: 1px solid var(--border-slate);
    overflow: hidden;
}
.asl-marquee-fade-r {
    position: absolute; top: 0; bottom: 0; right: 0; width: 4rem;
    background: linear-gradient(to left, var(--bg-slate), transparent); z-index: 10; pointer-events: none;
}
.asl-marquee-fade-l {
    position: absolute; top: 0; bottom: 0; left: 0; width: 4rem;
    background: linear-gradient(to right, var(--bg-slate), transparent); z-index: 10; pointer-events: none;
}
.asl-marquee-track {
    display: flex; gap: 2.5rem; min-width: 100%; align-items: center;
    animation: asl-marquee 30s linear infinite; white-space: nowrap; direction: ltr; width: max-content;
}
.asl-marquee-item {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; color: rgba(9,33,67,0.9); font-weight: 700;
}
.asl-marquee-icon {
    padding: 0.25rem; border-radius: 9999px; background: rgba(238,64,64,0.1); color: var(--red); display: flex; align-items: center; justify-content: center;
}
.asl-marquee-sep { margin: 0 0.25rem; color: #cbd5e1; }
.asl-marquee-prize {
    color: var(--red); font-weight: 700; font-size: 0.75rem;
    background: rgba(238,64,64,0.05); padding: 0.125rem 0.5rem;
    border-radius: 0.5rem; border: 1px solid rgba(238,64,64,0.1);
}

/* Spotlight Section */
.asl-spotlight { padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .asl-spotlight { padding: 2.5rem 3rem; } }
.asl-spotlight-inner { max-width: 36rem; margin: 0 auto; }
.asl-spotlight-label {
    display: flex; align-items: center; gap: 0.375rem;
    color: var(--navy); font-size: 0.75rem; font-weight: 900;
    text-transform: uppercase; margin-bottom: 0.75rem; margin-right: 0.25rem;
}
.asl-spotlight-label svg { color: var(--red); }
.asl-card {
    background-color: var(--bg-white); border-radius: 1rem;
    border: 1px solid rgba(226,232,240,0.8); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transition: all 0.5s; overflow: hidden; position: relative;
}
.asl-card:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.asl-card-bg {
    position: absolute; top: 0; left: 0; width: 6rem; height: 6rem;
    background: linear-gradient(to bottom right, rgba(238,64,64,0.1), transparent);
    border-bottom-right-radius: 9999px; z-index: 0;
}

.asl-card-top {
    padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 5;
}
@media (min-width: 768px) {
    .asl-card-top { padding: 2rem; flex-direction: row; align-items: center; }
}
.asl-avatar-wrap {
    display: flex; justify-content: center; position: relative;
}
@media (min-width: 768px) { .asl-avatar-wrap { justify-content: flex-start; } }
.asl-avatar-glow {
    position: absolute; top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem;
    background: linear-gradient(to top right, var(--red), var(--navy));
    border-radius: 9999px; filter: blur(4px); opacity: 0.2; transition: opacity 0.5s;
}
.asl-card:hover .asl-avatar-glow { opacity: 0.4; }
.asl-avatar-outer {
    width: 5rem; height: 5rem; background: var(--bg-white);
    border: 2px solid var(--border-slate); border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    position: relative; padding: 0.25rem; z-index: 10; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.asl-avatar-inner {
    width: 100%; height: 100%;
    background: linear-gradient(to top right, var(--navy), var(--navy-light));
    color: white; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.25rem; letter-spacing: -0.025em; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
}
.asl-crown-badge {
    position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
    z-index: 20; background-color: #facc15; color: #0f172a;
    font-size: 0.625rem; font-weight: 900; letter-spacing: 0.025em;
    padding: 0.125rem 0.5rem; border-radius: 9999px; border: 2px solid white;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 0.125rem; white-space: nowrap;
}
.asl-crown-badge svg { color: #92400e; }

.asl-card-info {
    flex: 1; text-align: center; min-width: 0;
}
@media (min-width: 768px) { .asl-card-info { text-align: right; } }
.asl-card-name-row {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
@media (min-width: 640px) { .asl-card-name-row { flex-direction: row; } }
@media (min-width: 768px) { .asl-card-name-row { justify-content: flex-start; } }
.asl-card-name {
    font-weight: 900; font-size: 1.5rem; color: var(--navy);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; margin: 0;
}
.asl-card:hover .asl-card-name { color: var(--red); }
.asl-card-week {
    display: inline-flex; align-items: center; background: rgba(9,33,67,0.05); color: var(--navy);
    font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.625rem; border-radius: 9999px; border: 1px solid rgba(9,33,67,0.1);
}
.asl-card-meta {
    display: flex; align-items: center; justify-content: center; gap: 1.125rem;
    color: var(--text-slate); font-size: 0.875rem; margin-top: 0.25rem;
}
@media (min-width: 768px) { .asl-card-meta { justify-content: flex-start; } }
.asl-phone-wrap { display: flex; align-items: center; gap: 0.375rem; font-family: monospace; font-weight: 600; direction: ltr; }
.asl-phone-wrap svg { color: #94a3b8; }
.asl-meta-sep { color: #cbd5e1; }
.asl-status-badge {
    font-size: 0.75rem; font-weight: 600; background: #ecfdf5; color: #047857;
    padding: 0.125rem 0.625rem; border-radius: 0.25rem; border: 1px solid rgba(16,185,129,0.2);
}

/* Ticket Cutout */
.asl-cutout { position: relative; display: flex; align-items: center; padding: 0 1rem; }
.asl-cutout-l {
    position: absolute; left: 0; width: 1rem; height: 1.5rem; background: var(--bg-white);
    border-right: 1px solid rgba(226,232,240,0.5); border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
    transform: translateX(-50%); z-index: 20;
}
.asl-cutout-r {
    position: absolute; right: 0; width: 1rem; height: 1.5rem; background: var(--bg-white);
    border-left: 1px solid rgba(226,232,240,0.5); border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
    transform: translateX(50%); z-index: 20;
}
.asl-cutout-line { width: 100%; border-top: 1px dashed rgba(226,232,240,0.8); height: 0; margin: 0; }

/* Voucher Details */
.asl-voucher {
    padding: 1.5rem; background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
    border-top: 1px solid var(--border-slate); display: flex; flex-direction: column; align-items: center;
    justify-content: space-between; gap: 1.25rem; position: relative; overflow: hidden;
}
@media (min-width: 640px) { .asl-voucher { flex-direction: row; } }
.asl-voucher-bg {
    position: absolute; top: 0; right: 0; width: 8rem; height: 8rem;
    background: rgba(9,33,67,0.02); border-radius: 9999px; filter: blur(16px); pointer-events: none;
}
.asl-v-main { display: flex; align-items: center; gap: 0.875rem; position: relative; z-index: 5;}
.asl-v-icon-wrap {
    padding: 0.75rem; background: rgba(238,64,64,0.1); color: var(--red);
    border-radius: 0.75rem; border: 1px solid rgba(238,64,64,0.1); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    position: relative; flex-shrink: 0;
}
.asl-v-icon { transform: rotate(12deg); }
.asl-v-dot {
    position: absolute; top: -0.25rem; right: -0.25rem; width: 0.625rem; height: 0.625rem;
    background: #22c55e; border-radius: 9999px; border: 1px solid white;
}
.asl-v-text { text-align: right; }
.asl-v-label { font-size: 0.75rem; color: var(--text-light); font-weight: 700; letter-spacing: 0.025em; }
.asl-v-val { font-size: 1.125rem; font-weight: 900; color: var(--navy); }
.asl-v-cert {
    display: flex; align-items: center; gap: 0.375rem; background: white; border: 1px solid #e2e8f0;
    padding: 0.375rem 0.75rem; border-radius: 0.75rem; font-size: 0.75rem; color: var(--text-slate);
    font-weight: 600; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); position: relative; z-index: 5;
}
.asl-v-cert svg { color: #10b981; flex-shrink: 0; }

/* CTA Bar */
.asl-cta {
    padding: 1.5rem; background-color: var(--navy); display: flex; flex-direction: column;
    justify-content: space-between; gap: 1.25rem; border-top: 1px solid var(--navy-light);
    position: relative; overflow: hidden; align-items: stretch; text-align: center;
}
@media (min-width: 768px) {
    .asl-cta { padding: 1.5rem 2rem; flex-direction: row; align-items: center; text-align: right; }
}
.asl-cta-bg {
    position: absolute; right: 0; top: 0; width: 11rem; height: 11rem;
    background: rgba(238,64,64,0.15); border-radius: 9999px; filter: blur(24px); pointer-events: none;
}
.asl-cta-content { position: relative; z-index: 10; max-width: 28rem; margin: 0 auto; }
@media (min-width: 768px) { .asl-cta-content { margin: 0; } }
.asl-cta-title {
    color: white; font-size: 1.125rem; font-weight: 900; display: flex; align-items: center; justify-content: center;
    gap: 0.375rem; line-height: 1.375; margin: 0 0 0.25rem 0;
}
@media (min-width: 768px) { .asl-cta-title { justify-content: flex-start; } }
.asl-cta-title svg { color: var(--red-light); animation: asl-ring 2s infinite; }
.asl-cta-sub { color: #cbd5e1; font-size: 0.75rem; font-weight: 500; line-height: 1.625; margin: 0; }
@media (min-width: 768px) { .asl-cta-sub { font-size: 0.875rem; } }
.asl-cta-action {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.875rem;
    position: relative; z-index: 10; width: 100%;
}
@media (min-width: 768px) { .asl-cta-action { width: auto; flex-shrink: 0; justify-content: flex-start; } }
.asl-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 1;
    background: var(--red); color: white !important; font-weight: 900; padding: 0.875rem 1.625rem;
    border-radius: 0.75rem; transition: all 0.3s; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,104,104,0.35); cursor: pointer; text-decoration: none !important;
    font-size: 0.875rem; border-bottom: none; border-left: none; border-right: none;
}
@media (min-width: 768px) { .asl-btn { flex: initial; } }
.asl-btn:hover { background: var(--red-light); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transform: translateY(-2px); }
.asl-btn:active { transform: scale(0.95); }