:root {
--saqf-contest-primary: #245ee6;
--saqf-contest-dark: #13235e;
--saqf-contest-ice: #f3f7ff;
--saqf-contest-border: #dce6ff;
--saqf-contest-text: #17224d;
--saqf-contest-muted: #6c7896;
--saqf-contest-green: #20bd7a;
--saqf-contest-green-soft: #dff8ec;
--saqf-contest-shadow: 0 22px 58px rgba(19, 35, 94, .12);
}
.saqf-contest-admin-wrap,
.saqf-contest-public {
box-sizing: border-box;
font-family: "Cairo", Tahoma, Arial, sans-serif;
color: var(--saqf-contest-text);
}
.saqf-contest-admin-wrap *,
.saqf-contest-public * {
box-sizing: border-box;
} .saqf-contest-admin-wrap {
max-width: 1440px;
margin: 22px 20px 48px 0;
}
.saqf-contest-admin-heading,
.saqf-contest-panel-head,
.saqf-contest-preview-heading,
.saqf-contest-heading-actions,
.saqf-contest-export-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.saqf-contest-admin-heading {
margin-bottom: 22px;
}
.saqf-contest-admin-heading h1 {
margin: 0 0 7px;
font-size: 30px;
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-admin-heading p,
.saqf-contest-preview-heading p {
margin: 0;
line-height: 1.8;
color: var(--saqf-contest-muted);
}
.saqf-contest-heading-actions {
justify-content: flex-end;
flex-wrap: wrap;
}
.saqf-contest-admin-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(410px, .86fr);
gap: 22px;
align-items: start;
}
.saqf-contest-panel {
position: relative;
padding: 25px;
border: 1px solid var(--saqf-contest-border);
border-radius: 24px;
background: #fff;
box-shadow: 0 12px 34px rgba(19, 35, 94, .07);
overflow: hidden;
}
.saqf-contest-panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, var(--saqf-contest-primary), #79a3ff, var(--saqf-contest-dark));
}
.saqf-contest-panel-head {
align-items: flex-start;
margin-bottom: 20px;
}
.saqf-contest-panel-head h2,
.saqf-contest-preview h3 {
margin: 4px 0 0;
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-panel-head h2 {
font-size: 22px;
line-height: 1.35;
}
.saqf-contest-eyebrow {
display: block;
font-size: 12px;
font-weight: 900;
color: var(--saqf-contest-primary);
}
.saqf-contest-count {
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 8px 13px;
border: 1px solid var(--saqf-contest-border);
border-radius: 999px;
background: var(--saqf-contest-ice);
font-size: 12px;
font-weight: 800;
color: var(--saqf-contest-muted);
white-space: nowrap;
}
.saqf-contest-count strong {
font-size: 18px;
color: var(--saqf-contest-primary);
}
.saqf-contest-file-drop {
position: relative;
min-height: 178px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
border: 2px dashed #b7caff;
border-radius: 20px;
background: linear-gradient(180deg, #fbfdff 0%, #f1f6ff 100%);
text-align: center;
cursor: pointer;
transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.saqf-contest-file-drop:hover,
.saqf-contest-file-drop:focus-within {
border-color: var(--saqf-contest-primary);
background: #f7faff;
transform: translateY(-2px);
}
.saqf-contest-file-drop input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.saqf-contest-file-drop .dashicons {
width: 50px;
height: 50px;
font-size: 50px;
color: var(--saqf-contest-primary);
}
.saqf-contest-file-drop strong {
font-size: 16px;
color: var(--saqf-contest-dark);
}
.saqf-contest-file-drop small,
.saqf-contest-upload-form .description {
color: var(--saqf-contest-muted);
}
.saqf-contest-upload-form .description {
margin: 13px 0 16px;
line-height: 1.9;
}
.saqf-contest-preview {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #edf1fa;
}
.saqf-contest-preview-heading {
align-items: flex-end;
margin-bottom: 13px;
}
.saqf-contest-preview h3 {
font-size: 15px;
}
.saqf-contest-preview-heading p {
font-size: 12px;
font-weight: 700;
}
.saqf-contest-name-chips {
max-height: 154px;
display: flex;
flex-wrap: wrap;
gap: 8px;
overflow: auto;
padding: 2px 0 4px;
}
.saqf-contest-name-chips span {
padding: 7px 11px;
border: 1px solid var(--saqf-contest-border);
border-radius: 999px;
background: #fbfcff;
font-size: 12px;
font-weight: 800;
color: #435079;
}
.saqf-contest-draw-panel {
text-align: center;
} .saqf-contest-wheel-stage {
position: relative;
width: min(100%, 390px);
aspect-ratio: 1;
margin: 5px auto 18px;
padding: 18px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0 58%, #edf3ff 59% 67%, #fff 68% 100%);
box-shadow: inset 0 0 0 1px #dbe6ff, 0 22px 48px rgba(19, 35, 94, .16);
}
.saqf-contest-wheel-stage::after {
content: "";
position: absolute;
inset: 10%;
border-radius: 50%;
box-shadow: inset 0 0 34px rgba(255, 255, 255, .65);
pointer-events: none;
}
.saqf-contest-pointer {
position: absolute;
z-index: 9;
top: -13px;
left: 50%;
width: 70px;
height: 49px;
transform: translateX(-50%);
filter: drop-shadow(0 7px 6px rgba(19, 35, 94, .24));
}
.saqf-contest-pointer::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 0;
transform: translateX(-50%);
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-top: 30px solid var(--saqf-contest-dark);
}
.saqf-contest-pointer span {
position: absolute;
z-index: 2;
top: 0;
left: 50%;
transform: translateX(-50%);
padding: 4px 10px;
border-radius: 999px;
background: var(--saqf-contest-dark);
color: #fff;
font-size: 9px;
font-weight: 900;
white-space: nowrap;
}
.saqf-contest-wheel {
position: relative;
width: 100%;
height: 100%;
border: 9px solid #fff;
border-radius: 50%;
background: conic-gradient(
from -15deg,
#13235e 0deg 30deg,
#245ee6 30deg 60deg,
#4d7ff0 60deg 90deg,
#3169df 90deg 120deg,
#6d97f2 120deg 150deg,
#245ee6 150deg 180deg,
#4b7be9 180deg 210deg,
#2d66dd 210deg 240deg,
#7199ee 240deg 270deg,
#245ee6 270deg 300deg,
#4f7ce6 300deg 330deg,
#356ddd 330deg 360deg
);
box-shadow: inset 0 0 0 2px rgba(19, 35, 94, .14), inset 0 0 28px rgba(19, 35, 94, .24);
transform: rotate(0deg);
will-change: transform;
}
.saqf-contest-wheel-lines {
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-conic-gradient(from -15deg, transparent 0deg 29deg, rgba(255,255,255,.78) 29deg 30deg);
}
.saqf-contest-wheel-brands {
position: absolute;
inset: 0;
border-radius: 50%;
}
.saqf-contest-segment-brand {
position: absolute;
top: 0;
left: 39%;
width: 22%;
height: 50%;
transform-origin: 50% 100%;
transform: rotate(var(--segment-angle));
}
.saqf-contest-segment-brand-inner {
position: absolute;
top: 8%;
left: 50%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
transform: translateX(-50%) rotate(var(--segment-angle-negative));
}
.saqf-contest-segment-brand img {
display: block;
width: 47px;
max-width: 88%;
height: auto;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
}
.saqf-contest-segment-brand b {
font-size: 9px;
font-weight: 900;
line-height: 1;
color: #fff;
}
.saqf-contest-wheel-center {
position: absolute;
z-index: 7;
inset: 31%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 8px solid rgba(255, 255, 255, .96);
border-radius: 50%;
background: linear-gradient(145deg, #fff, #eff4ff);
box-shadow: 0 9px 27px rgba(19, 35, 94, .26), inset 0 0 0 1px #d8e3ff;
color: var(--saqf-contest-dark);
}
.saqf-contest-wheel-center span {
font-size: 11px;
font-weight: 900;
color: var(--saqf-contest-muted);
}
.saqf-contest-wheel-center strong {
font-size: clamp(31px, 6vw, 48px);
line-height: 1;
font-weight: 900;
color: var(--saqf-contest-primary);
letter-spacing: -1px;
}
.saqf-contest-wheel-center small {
margin-top: 3px;
font-size: 14px;
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-wheel.is-spinning {
filter: saturate(1.08) drop-shadow(0 0 12px rgba(36, 94, 230, .18));
}
.saqf-contest-result {
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
margin: 4px auto 15px;
border: 1px solid var(--saqf-contest-border);
border-radius: 15px;
background: var(--saqf-contest-ice);
font-size: 15px;
font-weight: 900;
line-height: 1.65;
color: var(--saqf-contest-dark);
text-align: center;
}
.saqf-contest-result.is-winner {
border-color: #a9e7cc;
background: #effff8;
color: #0f704a;
}
.saqf-contest-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.saqf-contest-start.button-hero {
min-width: 150px;
border-radius: 12px;
font-family: "Cairo", sans-serif;
font-size: 17px;
font-weight: 900;
}
.saqf-contest-reset {
min-height: 46px;
border-radius: 10px !important;
}
.saqf-contest-winners-panel {
margin-top: 22px;
}
.saqf-contest-export-actions {
justify-content: flex-end;
flex-wrap: wrap;
}
.saqf-contest-export-actions .is-disabled {
pointer-events: none;
opacity: .46;
}
.saqf-contest-winners {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.saqf-contest-winner {
position: relative;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border: 12px solid rgba(32, 189, 122, .18);
border-radius: 21px;
background: linear-gradient(180deg, #fff, #f9fffc);
box-shadow: 0 8px 22px rgba(19, 35, 94, .07);
animation: saqfContestGreenPulse 2.2s ease-in-out infinite;
animation-delay: var(--winner-delay, 0s);
}
.saqf-contest-winner.is-new {
animation-duration: 1.15s;
}
.saqf-contest-winner-number {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(145deg, var(--saqf-contest-primary), #4b7cf1);
color: #fff;
font-size: 14px;
font-weight: 900;
box-shadow: 0 7px 15px rgba(36, 94, 230, .2);
}
.saqf-contest-winner-copy {
min-width: 0;
flex: 1;
}
.saqf-contest-winner-badge {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 2px;
font-size: 10px;
font-weight: 900;
color: #148b5f;
}
.saqf-contest-winner-badge i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--saqf-contest-green);
box-shadow: 0 0 0 4px rgba(32, 189, 122, .14);
}
.saqf-contest-winner strong,
.saqf-contest-winner small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.saqf-contest-winner strong {
font-size: 14px;
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-winner small {
margin-top: 2px;
font-size: 10px;
font-weight: 700;
color: var(--saqf-contest-muted);
}
.saqf-contest-empty {
grid-column: 1 / -1;
margin: 0;
padding: 24px;
border: 1px dashed #cbd8f5;
border-radius: 18px;
background: #f9fbff;
text-align: center;
font-weight: 800;
color: var(--saqf-contest-muted);
}
@keyframes saqfContestGreenPulse {
0%, 100% {
border-color: rgba(32, 189, 122, .18);
box-shadow: 0 8px 22px rgba(19, 35, 94, .07), 0 0 0 0 rgba(32, 189, 122, 0);
}
50% {
border-color: rgba(32, 189, 122, .92);
box-shadow: 0 8px 22px rgba(19, 35, 94, .07), 0 0 0 5px rgba(32, 189, 122, .12);
}
} .saqf-contest-page-body {
margin: 0;
background: #edf4ff;
}
.saqf-contest-public {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: clamp(12px, 2vw, 26px);
background:
radial-gradient(circle at 12% 13%, rgba(112, 157, 255, .34), transparent 27%),
radial-gradient(circle at 88% 84%, rgba(36, 94, 230, .2), transparent 28%),
linear-gradient(145deg, #f8fbff 0%, #edf4ff 48%, #e7efff 100%);
}
.saqf-contest-public-shell {
position: relative;
z-index: 3;
width: min(1480px, 100%);
min-height: min(880px, calc(100svh - 28px));
display: flex;
flex-direction: column;
padding: clamp(18px, 2.4vw, 36px);
border: 1px solid rgba(255, 255, 255, .92);
border-radius: clamp(25px, 3vw, 42px);
background: rgba(255, 255, 255, .86);
box-shadow: 0 35px 90px rgba(19, 35, 94, .17);
backdrop-filter: blur(20px);
}
.saqf-contest-public-header {
max-width: 760px;
margin: 0 auto 14px;
text-align: center;
}
.saqf-contest-public-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 13px;
border: 1px solid #c8d8ff;
border-radius: 999px;
background: #f4f8ff;
font-size: 12px;
font-weight: 900;
color: var(--saqf-contest-primary);
}
.saqf-contest-public-badge i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--saqf-contest-primary);
box-shadow: 0 0 0 5px rgba(36, 94, 230, .11);
animation: saqfContestBadgePulse 1.8s ease-in-out infinite;
}
.saqf-contest-public-header h1 {
margin: 8px 0 4px;
font-size: clamp(27px, 3vw, 48px);
line-height: 1.18;
font-weight: 900;
letter-spacing: -.7px;
color: var(--saqf-contest-dark);
}
.saqf-contest-public-header p {
margin: 0;
font-size: clamp(13px, 1.2vw, 17px);
font-weight: 600;
color: var(--saqf-contest-muted);
}
.saqf-contest-prize-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: min(760px, 100%);
margin: 0 auto 18px;
}
.saqf-contest-prize-stats article {
position: relative;
display: grid;
grid-template-columns: 35px 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
align-items: center;
padding: 10px 13px;
border: 1px solid #dbe5ff;
border-radius: 17px;
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,246,255,.96));
box-shadow: 0 9px 25px rgba(19,35,94,.07);
overflow: hidden;
}
.saqf-contest-prize-stats article::after {
content: "";
position: absolute;
left: -20px;
bottom: -28px;
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(36,94,230,.08);
}
.saqf-contest-stat-icon {
position: relative;
z-index: 1;
grid-row: 1 / 3;
width: 34px;
height: 31px;
border-radius: 9px;
background: linear-gradient(145deg, var(--saqf-contest-primary), #6c95f6);
box-shadow: 0 6px 14px rgba(36,94,230,.22);
}
.saqf-contest-stat-icon::before,
.saqf-contest-stat-icon::after {
content: "";
position: absolute;
background: #fff;
}
.saqf-contest-stat-icon::before {
left: 15px;
top: 0;
width: 4px;
height: 100%;
}
.saqf-contest-stat-icon::after {
left: 0;
top: 8px;
width: 100%;
height: 4px;
}
.saqf-contest-prize-stats strong {
font-size: clamp(15px, 1.5vw, 20px);
line-height: 1.25;
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-prize-stats small {
font-size: 10px;
font-weight: 800;
color: var(--saqf-contest-muted);
}
.saqf-contest-public-grid {
min-height: 0;
flex: 1;
display: grid;
grid-template-columns: minmax(400px, .95fr) minmax(420px, 1.05fr);
gap: clamp(18px, 2.3vw, 34px);
align-items: stretch;
}
.saqf-contest-public-wheel-column,
.saqf-contest-public-winners {
min-width: 0;
border: 1px solid rgba(208, 221, 250, .86);
border-radius: 28px;
background: rgba(255,255,255,.72);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 42px rgba(19,35,94,.08);
}
.saqf-contest-public-wheel-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(14px, 2vw, 24px);
}
.saqf-contest-public-wheel-column .saqf-contest-wheel-stage {
width: min(100%, 475px);
margin: 0 auto 14px;
}
.saqf-contest-public-wheel-column .saqf-contest-result {
width: min(100%, 520px);
margin-bottom: 0;
}
.saqf-contest-public-winners {
display: flex;
flex-direction: column;
padding: clamp(16px, 2vw, 26px);
}
.saqf-contest-public-winners-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2px 12px;
margin-bottom: 13px;
}
.saqf-contest-public-winners-head > span {
grid-column: 1 / 2;
font-size: 11px;
font-weight: 900;
color: var(--saqf-contest-primary);
}
.saqf-contest-public-winners-head h2 {
grid-column: 1 / 2;
margin: 0;
font-size: clamp(22px, 2vw, 31px);
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-public-winners-head p {
grid-column: 2 / 3;
grid-row: 1 / 3;
margin: 0;
padding: 8px 12px;
border-radius: 999px;
background: #eff4ff;
font-size: 11px;
font-weight: 800;
color: var(--saqf-contest-muted);
white-space: nowrap;
}
.saqf-contest-public-winners-head p strong {
font-size: 18px;
color: var(--saqf-contest-primary);
}
.saqf-contest-public-winners .saqf-contest-winners {
min-height: 0;
flex: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(5, minmax(0, 1fr));
gap: 9px;
}
.saqf-contest-public-winners .saqf-contest-winner {
padding: 8px 13px;
border-width: 12px;
border-radius: 24px;
}
.saqf-contest-public-winners .saqf-contest-winner-number {
flex-basis: 48px;
width: 48px;
height: 48px;
font-size: 15px;
}
.saqf-contest-public-winners .saqf-contest-winner strong {
font-size: clamp(14px, 1.35vw, 20px);
}
.saqf-contest-public-winners .saqf-contest-winner small {
font-size: 11px;
}
.saqf-contest-public-winners .saqf-contest-winner-badge {
font-size: 10px;
}
.saqf-contest-public-winners .saqf-contest-empty {
display: grid;
place-items: center;
min-height: 240px;
}
.saqf-contest-orb {
position: absolute;
border-radius: 50%;
filter: blur(1px);
animation: saqfContestFloat 8s ease-in-out infinite;
}
.saqf-contest-orb-one {
top: 8%;
right: 4%;
width: 160px;
height: 160px;
background: linear-gradient(145deg, rgba(36,94,230,.18), rgba(125,168,255,.04));
}
.saqf-contest-orb-two {
left: 3%;
bottom: 5%;
width: 210px;
height: 210px;
background: linear-gradient(145deg, rgba(19,35,94,.14), rgba(36,94,230,.04));
animation-delay: -3s;
}
.saqf-contest-confetti i {
position: absolute;
z-index: 1;
top: var(--confetti-top);
left: var(--confetti-left);
width: 7px;
height: 15px;
border-radius: 3px;
background: var(--saqf-contest-primary);
opacity: .2;
transform: rotate(var(--confetti-angle));
animation: saqfContestConfetti 5s ease-in-out infinite;
animation-delay: var(--confetti-delay);
}
@keyframes saqfContestBadgePulse {
0%,100% { box-shadow: 0 0 0 4px rgba(36,94,230,.1); }
50% { box-shadow: 0 0 0 8px rgba(36,94,230,.03); }
}
@keyframes saqfContestFloat {
0%,100% { transform: translate3d(0,0,0); }
50% { transform: translate3d(0,-16px,0); }
}
@keyframes saqfContestConfetti {
0%,100% { transform: translateY(0) rotate(var(--confetti-angle)); opacity: .12; }
50% { transform: translateY(-14px) rotate(var(--confetti-angle-active)); opacity: .32; }
}
@media (min-width: 981px) and (max-height: 850px) {
.saqf-contest-public-shell {
min-height: calc(100svh - 20px);
padding: 16px 24px;
}
.saqf-contest-public-header {
margin-bottom: 9px;
}
.saqf-contest-public-header h1 {
font-size: 32px;
}
.saqf-contest-prize-stats {
margin-bottom: 12px;
}
.saqf-contest-public-grid {
gap: 18px;
}
.saqf-contest-public-wheel-column .saqf-contest-wheel-stage {
width: min(100%, 390px);
}
.saqf-contest-public-winners {
padding: 16px;
}
.saqf-contest-public-winners .saqf-contest-winner {
border-width: 9px;
padding: 6px 11px;
}
}
@media (max-width: 1180px) {
.saqf-contest-winners {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.saqf-contest-public-grid {
grid-template-columns: minmax(350px, .9fr) minmax(390px, 1.1fr);
}
}
@media (max-width: 980px) {
.saqf-contest-admin-grid {
grid-template-columns: 1fr;
}
.saqf-contest-public {
overflow: visible;
align-items: flex-start;
}
.saqf-contest-public-shell {
min-height: auto;
}
.saqf-contest-public-grid {
grid-template-columns: 1fr;
}
.saqf-contest-public-wheel-column {
order: 1;
}
.saqf-contest-public-winners {
order: 2;
}
.saqf-contest-public-winners .saqf-contest-winners {
grid-template-rows: none;
}
}
@media (max-width: 782px) {
.saqf-contest-admin-wrap {
margin-right: 10px;
}
.saqf-contest-admin-heading,
.saqf-contest-panel-head,
.saqf-contest-preview-heading {
align-items: flex-start;
flex-direction: column;
}
.saqf-contest-winners {
grid-template-columns: 1fr;
}
.saqf-contest-panel {
padding: 19px;
}
}
@media (max-width: 620px) {
.saqf-contest-public {
padding: 8px;
}
.saqf-contest-public-shell {
padding: 15px;
border-radius: 25px;
}
.saqf-contest-prize-stats {
grid-template-columns: 1fr;
gap: 8px;
}
.saqf-contest-prize-stats article {
padding: 8px 12px;
}
.saqf-contest-public-wheel-column,
.saqf-contest-public-winners {
border-radius: 22px;
}
.saqf-contest-public-wheel-column {
padding: 14px 8px;
}
.saqf-contest-wheel-stage {
padding: 14px;
}
.saqf-contest-segment-brand img {
width: 38px;
}
.saqf-contest-segment-brand b {
font-size: 7px;
}
.saqf-contest-wheel-center {
border-width: 6px;
}
.saqf-contest-public-winners {
padding: 14px;
}
.saqf-contest-public-winners-head {
grid-template-columns: 1fr;
}
.saqf-contest-public-winners-head p {
grid-column: 1;
grid-row: auto;
justify-self: start;
margin-top: 6px;
}
.saqf-contest-public-winners .saqf-contest-winner {
border-width: 9px;
padding: 8px 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.saqf-contest-winner,
.saqf-contest-orb,
.saqf-contest-confetti i,
.saqf-contest-public-badge i {
animation: none !important;
}
} .saqf-contest-name-chips {
max-height: 280px;
padding: 8px;
border: 1px solid #edf2ff;
border-radius: 16px;
background: #fbfdff;
}
.saqf-contest-winner {
border-width: 5px;
border-radius: 18px;
animation-duration: 2.6s;
}
.saqf-contest-winner strong {
font-size: 14px;
font-weight: 800;
}
.saqf-contest-public-shell {
height: calc(100svh - 20px);
min-height: 660px;
max-height: 930px;
padding: clamp(14px, 1.8vw, 26px);
overflow: hidden;
}
.saqf-contest-public-header {
margin-bottom: 9px;
}
.saqf-contest-public-header h1 {
margin-top: 5px;
font-size: clamp(25px, 2.6vw, 42px);
}
.saqf-contest-prize-stats {
margin-bottom: 9px;
gap: 9px;
}
.saqf-contest-prize-stats article {
padding: 8px 12px;
border-radius: 15px;
}
.saqf-contest-prize-ticker {
position: relative;
z-index: 4;
width: min(930px, 100%);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin: 0 auto 12px;
}
.saqf-contest-prize-ticker article {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 9px;
border: 1px solid #d8e4ff;
border-radius: 15px;
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,244,255,.96));
box-shadow: 0 8px 20px rgba(19,35,94,.07);
}
.saqf-contest-prize-ticker article:nth-child(2n) {
transform: translateY(2px);
}
.saqf-contest-prize-ticker article > div {
min-width: 0;
}
.saqf-contest-prize-ticker small,
.saqf-contest-prize-ticker strong {
display: block;
white-space: nowrap;
}
.saqf-contest-prize-ticker small {
font-size: 9px;
font-weight: 700;
color: var(--saqf-contest-muted);
}
.saqf-contest-prize-ticker strong {
font-size: 13px;
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-gift-icon {
position: relative;
flex: 0 0 28px;
width: 28px;
height: 24px;
margin-top: 3px;
border-radius: 5px;
background: linear-gradient(145deg, var(--saqf-contest-primary), #6d96f5);
box-shadow: 0 5px 12px rgba(36,94,230,.2);
}
.saqf-contest-gift-icon::before {
content: "";
position: absolute;
inset: -5px -2px auto;
height: 7px;
border-radius: 4px;
background: var(--saqf-contest-dark);
}
.saqf-contest-gift-icon::after {
content: "";
position: absolute;
left: 12px;
top: -5px;
width: 4px;
height: 29px;
border-radius: 3px;
background: #fff;
}
.saqf-contest-public-grid {
gap: clamp(14px, 1.7vw, 24px);
}
.saqf-contest-public-wheel-column,
.saqf-contest-public-winners {
border-radius: 24px;
}
.saqf-contest-public-wheel-column {
padding: 12px 18px;
}
.saqf-contest-public-wheel-column .saqf-contest-wheel-stage {
width: min(100%, 405px);
margin-bottom: 10px;
}
.saqf-contest-public-wheel-column .saqf-contest-result {
min-height: 46px;
font-size: 13px;
font-weight: 800;
}
.saqf-contest-public-winners {
padding: 16px 18px;
}
.saqf-contest-public-winners-head {
margin-bottom: 9px;
}
.saqf-contest-public-winners-head h2 {
font-size: clamp(20px, 1.7vw, 27px);
font-weight: 800;
}
.saqf-contest-public-winners .saqf-contest-winners {
gap: 7px;
}
.saqf-contest-public-winners .saqf-contest-winner {
padding: 7px 11px;
border-width: 4px;
border-radius: 16px;
box-shadow: 0 6px 16px rgba(19,35,94,.06);
}
.saqf-contest-public-winners .saqf-contest-winner-number {
flex-basis: 42px;
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 13px;
}
.saqf-contest-public-winners .saqf-contest-winner strong {
font-size: clamp(13px, 1.1vw, 16px);
font-weight: 700;
letter-spacing: 0;
}
.saqf-contest-public-winners .saqf-contest-winner small {
font-size: 9px;
font-weight: 600;
}
.saqf-contest-public-winners .saqf-contest-winner-badge {
font-size: 9px;
font-weight: 800;
}
.saqf-contest-fireworks {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.saqf-contest-firework {
position: absolute;
width: 8px;
height: 8px;
}
.saqf-contest-firework.firework-1 { top: 13%; left: 8%; }
.saqf-contest-firework.firework-2 { top: 20%; right: 7%; transform: scale(.82); }
.saqf-contest-firework.firework-3 { bottom: 12%; left: 12%; transform: scale(.68); }
.saqf-contest-firework i {
position: absolute;
left: 3px;
top: 3px;
width: 3px;
height: 28px;
border-radius: 999px;
background: linear-gradient(to top, rgba(36,94,230,0), #245ee6 55%, #f7bc3a);
transform-origin: 50% 0;
transform: rotate(var(--ray-angle)) translateY(-4px) scaleY(.1);
opacity: 0;
animation: saqfContestFirework 3.8s ease-out infinite;
animation-delay: var(--ray-delay);
}
.saqf-contest-firework.firework-2 i { background: linear-gradient(to top, rgba(19,35,94,0), #13235e 55%, #7ca2ff); }
.saqf-contest-firework.firework-3 i { background: linear-gradient(to top, rgba(32,189,122,0), #20bd7a 55%, #f7bc3a); }
.saqf-contest-confetti i:nth-child(4n+2) { background: #13235e; }
.saqf-contest-confetti i:nth-child(4n+3) { background: #f4b73b; }
.saqf-contest-confetti i:nth-child(4n+4) { background: #20bd7a; }
@keyframes saqfContestFirework {
0%, 62% { opacity: 0; transform: rotate(var(--ray-angle)) translateY(-4px) scaleY(.08); }
68% { opacity: .85; }
82% { opacity: .5; transform: rotate(var(--ray-angle)) translateY(-40px) scaleY(1); }
100% { opacity: 0; transform: rotate(var(--ray-angle)) translateY(-52px) scaleY(.55); }
}
@media (min-width: 981px) and (max-height: 820px) {
.saqf-contest-public-shell {
min-height: 0;
height: calc(100svh - 14px);
padding: 11px 18px;
}
.saqf-contest-public-header h1 { font-size: 29px; }
.saqf-contest-public-header p { font-size: 12px; }
.saqf-contest-public-badge { padding: 5px 10px; font-size: 10px; }
.saqf-contest-prize-stats { margin-bottom: 6px; }
.saqf-contest-prize-stats article { padding: 6px 10px; }
.saqf-contest-prize-ticker { margin-bottom: 7px; }
.saqf-contest-prize-ticker article { padding: 5px 7px; }
.saqf-contest-public-wheel-column .saqf-contest-wheel-stage { width: min(100%, 350px); }
.saqf-contest-public-winners { padding: 12px 14px; }
.saqf-contest-public-winners .saqf-contest-winner { padding: 5px 9px; }
.saqf-contest-public-winners .saqf-contest-winner-number { width: 36px; height: 36px; flex-basis: 36px; }
}
@media (max-width: 980px) {
.saqf-contest-public-shell {
height: auto;
min-height: auto;
max-height: none;
overflow: visible;
}
.saqf-contest-prize-ticker {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.saqf-contest-prize-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.saqf-contest-prize-stats article {
grid-template-columns: 26px 1fr;
padding: 7px;
}
.saqf-contest-stat-icon {
width: 26px;
height: 24px;
}
.saqf-contest-stat-icon::before { left: 11px; }
.saqf-contest-stat-icon::after { top: 6px; }
.saqf-contest-prize-ticker {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.saqf-contest-prize-ticker article:last-child {
grid-column: 1 / -1;
}
.saqf-contest-public-winners .saqf-contest-winner {
border-width: 3px;
padding: 7px 9px;
}
.saqf-contest-firework.firework-1 { left: 4%; }
.saqf-contest-firework.firework-2 { right: 4%; }
}
@media (prefers-reduced-motion: reduce) {
.saqf-contest-firework i,
.saqf-contest-prize-ticker article {
animation: none !important;
transform: none !important;
}
} .saqf-contest-public-brand {
position: relative;
isolation: isolate;
width: fit-content;
margin: 0 auto 12px;
padding: 10px 14px;
border: 1px solid rgba(201, 216, 255, .95);
border-radius: 22px;
background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(241,246,255,.92));
box-shadow: 0 16px 36px rgba(19,35,94,.10);
overflow: hidden;
}
.saqf-contest-public-brand img {
display: block;
width: clamp(160px, 20vw, 250px);
height: auto;
position: relative;
z-index: 1;
filter: drop-shadow(0 10px 20px rgba(36,94,230,.16));
}
.saqf-contest-public-brand::before {
content: "";
position: absolute;
inset: auto 12% -32px;
height: 32px;
border-radius: 50%;
background: radial-gradient(circle, rgba(36,94,230,.16) 0%, rgba(36,94,230,0) 72%);
filter: blur(10px);
z-index: 0;
}
.saqf-contest-public-brand::after {
content: "";
position: absolute;
top: -18%;
left: -38%;
width: 34%;
height: 150%;
background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 18%, rgba(255,255,255,.92) 50%, rgba(255,255,255,.10) 82%, rgba(255,255,255,0) 100%);
transform: rotate(11deg);
z-index: 2;
pointer-events: none;
animation: saqfContestLogoShine 4.2s ease-in-out infinite;
}
.saqf-contest-public-brand-glow {
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(124,162,255,.28), rgba(255,255,255,.02) 36%, rgba(36,94,230,.06) 72%, rgba(19,35,94,.12));
z-index: 0;
pointer-events: none;
}
@keyframes saqfContestLogoShine {
0% { left: -42%; opacity: 0; }
10% { opacity: .18; }
28% { opacity: .96; }
52% { left: 108%; opacity: 0; }
100% { left: 108%; opacity: 0; }
}
@media (max-width: 620px) {
.saqf-contest-public-brand {
margin-bottom: 10px;
padding: 8px 10px;
border-radius: 18px;
}
.saqf-contest-public-brand img {
width: min(62vw, 205px);
}
}
@media (prefers-reduced-motion: reduce) {
.saqf-contest-public-brand::after {
animation: none !important;
opacity: .22;
left: 34%;
}
} .saqf-contest-page-body {
overflow-y: auto;
}
.saqf-contest-public {
align-items: flex-start;
justify-content: flex-start;
overflow-x: hidden;
overflow-y: auto;
padding: clamp(14px, 1.5vw, 22px);
}
.saqf-contest-public-shell {
height: auto;
min-height: calc(100svh - 28px);
max-height: none;
overflow: visible;
padding: clamp(14px, 1.5vw, 22px);
}
.saqf-contest-public-header {
margin: 0 auto 8px;
}
.saqf-contest-public-brand {
position: relative;
isolation: isolate;
margin: 0 auto 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.saqf-contest-public-brand img {
display: block;
width: clamp(172px, 19vw, 242px);
height: auto;
position: relative;
z-index: 2;
mix-blend-mode: multiply;
filter: drop-shadow(0 12px 22px rgba(19,35,94,.14));
}
.saqf-contest-public-brand::before {
display: none;
}
.saqf-contest-public-brand-glow {
position: absolute;
left: 50%;
top: 50%;
width: clamp(180px, 23vw, 270px);
height: 82px;
transform: translate(-50%, -50%);
border-radius: 999px;
background: radial-gradient(closest-side, rgba(36,94,230,.18), rgba(124,162,255,.08) 58%, rgba(36,94,230,0) 100%);
filter: blur(14px);
opacity: .95;
z-index: 0;
pointer-events: none;
}
.saqf-contest-public-brand::after {
content: "";
position: absolute;
top: -16%;
left: -34%;
width: 26%;
height: 150%;
background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 22%, rgba(255,255,255,.96) 50%, rgba(255,255,255,.14) 78%, rgba(255,255,255,0) 100%);
transform: rotate(12deg);
z-index: 3;
pointer-events: none;
animation: saqfContestLogoShine 4.4s ease-in-out infinite;
}
.saqf-contest-prize-stats {
margin-bottom: 8px;
}
.saqf-contest-prize-ticker {
margin: 0 auto 10px;
}
.saqf-contest-public-grid {
align-items: start;
min-height: 0;
grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
gap: clamp(12px, 1.45vw, 20px);
}
.saqf-contest-public-wheel-column,
.saqf-contest-public-winners {
min-height: 0;
border-color: rgba(198, 214, 248, .92);
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,255,.86));
box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 42px rgba(19,35,94,.08);
}
.saqf-contest-public-wheel-column {
padding: 12px 14px;
}
.saqf-contest-public-wheel-column .saqf-contest-wheel-stage {
width: min(100%, 390px);
margin-bottom: 8px;
}
.saqf-contest-public-wheel-column .saqf-contest-result {
min-height: 40px;
font-size: 12px;
}
.saqf-contest-public-winners {
padding: 14px 16px;
max-height: min(610px, calc(100svh - 292px));
}
.saqf-contest-public-winners-head {
margin-bottom: 8px;
}
.saqf-contest-public-winners-head h2 {
font-size: clamp(18px, 1.45vw, 24px);
line-height: 1.25;
}
.saqf-contest-public-winners .saqf-contest-winners {
flex: 1;
overflow-y: auto;
scrollbar-gutter: stable;
padding-inline-end: 4px;
gap: 8px;
grid-template-rows: none;
align-content: start;
}
.saqf-contest-public-winners .saqf-contest-winners::-webkit-scrollbar {
width: 8px;
}
.saqf-contest-public-winners .saqf-contest-winners::-webkit-scrollbar-thumb {
background: #c9d8ff;
border-radius: 999px;
}
.saqf-contest-public-winners .saqf-contest-winner {
min-height: 74px;
padding: 8px 11px;
border-width: 3px;
border-radius: 15px;
gap: 10px;
}
.saqf-contest-public-winners .saqf-contest-winner-number {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 12px;
border-radius: 11px;
}
.saqf-contest-public-winners .saqf-contest-winner strong {
font-size: clamp(12px, 1vw, 15px);
font-weight: 700;
line-height: 1.45;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.saqf-contest-public-winners .saqf-contest-winner small {
font-size: 9px;
}
.saqf-contest-public-winners .saqf-contest-winner-badge {
font-size: 8px;
margin-bottom: 1px;
}
@media (max-width: 980px) {
.saqf-contest-public {
overflow: visible;
}
.saqf-contest-public-shell {
min-height: auto;
}
.saqf-contest-public-grid {
grid-template-columns: 1fr;
}
.saqf-contest-public-winners {
max-height: none;
}
.saqf-contest-public-winners .saqf-contest-winners {
overflow: visible;
padding-inline-end: 0;
}
}
@media (max-width: 620px) {
.saqf-contest-public-brand {
margin-bottom: 6px;
}
.saqf-contest-public-brand img {
width: min(64vw, 210px);
}
.saqf-contest-public-brand-glow {
width: min(72vw, 245px);
height: 70px;
}
}
@media (prefers-reduced-motion: reduce) {
.saqf-contest-public-brand::after {
animation: none !important;
left: 38%;
opacity: .28;
}
} .saqf-contest-prize-ticker {
display: none !important;
}
.saqf-contest-public-header {
max-width: none;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
grid-template-areas: "copy brand";
align-items: center;
gap: clamp(16px, 2vw, 28px);
margin: 0 0 12px;
text-align: right;
}
.saqf-contest-public-header-copy {
grid-area: copy;
min-width: 0;
}
.saqf-contest-public-header-copy .saqf-contest-public-badge {
margin-bottom: 5px;
}
.saqf-contest-public-header-copy h1 {
margin: 8px 0 6px;
}
.saqf-contest-public-header-copy p {
max-width: 620px;
}
.saqf-contest-public-brand-panel {
grid-area: brand;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 10px;
min-width: 0;
}
.saqf-contest-public-brand {
margin: 0;
}
.saqf-contest-public-brand img {
width: clamp(190px, 20vw, 260px);
background: transparent !important;
mix-blend-mode: normal;
filter: drop-shadow(0 14px 24px rgba(19,35,94,.12));
}
.saqf-contest-public-brand-copy {
max-width: 320px;
padding: 10px 14px;
border: 1px solid rgba(208, 221, 250, .92);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,249,255,.82));
box-shadow: 0 12px 28px rgba(19,35,94,.06);
}
.saqf-contest-public-brand-copy strong,
.saqf-contest-public-brand-copy span {
display: block;
line-height: 1.75;
}
.saqf-contest-public-brand-copy strong {
font-size: 13px;
font-weight: 800;
color: var(--saqf-contest-dark);
}
.saqf-contest-public-brand-copy span {
margin-top: 2px;
font-size: 12px;
font-weight: 600;
color: var(--saqf-contest-muted);
}
@media (max-width: 980px) {
.saqf-contest-public-header {
grid-template-columns: 1fr;
grid-template-areas: "brand" "copy";
justify-items: center;
text-align: center;
gap: 12px;
}
.saqf-contest-public-brand-panel {
align-items: center;
}
.saqf-contest-public-header-copy p,
.saqf-contest-public-brand-copy {
max-width: 100%;
}
}
@media (max-width: 620px) {
.saqf-contest-public-brand img {
width: min(66vw, 220px);
}
.saqf-contest-public-brand-copy {
padding: 9px 12px;
border-radius: 16px;
}
.saqf-contest-public-brand-copy strong {
font-size: 12px;
}
.saqf-contest-public-brand-copy span {
font-size: 11px;
}
} @media (min-width: 981px) {
.saqf-contest-public-header {
direction: ltr;
grid-template-columns: minmax(0, 1fr) minmax(210px, 290px);
grid-template-areas: "copy brand";
align-items: center;
}
.saqf-contest-public-header-copy {
grid-area: copy;
grid-column: 1;
direction: rtl;
text-align: right;
justify-self: stretch;
}
.saqf-contest-public-brand-panel {
grid-area: brand;
grid-column: 2;
direction: rtl;
align-items: flex-end;
justify-self: end;
text-align: right;
}
}
.saqf-contest-public-brand img {
width: clamp(145px, 14vw, 190px);
}
.saqf-contest-public-brand-copy {
max-width: 280px;
text-align: right;
}
@media (max-width: 980px) {
.saqf-contest-public-header {
direction: rtl;
}
.saqf-contest-public-brand img {
width: min(54vw, 180px);
}
.saqf-contest-public-brand-copy {
max-width: 520px;
text-align: center;
}
} @media (min-width: 981px) {
.saqf-contest-public-header {
direction: ltr;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 370px);
grid-template-areas: "stats brand";
align-items: center;
gap: clamp(22px, 3vw, 44px);
padding: 2px clamp(8px, 1vw, 16px) 12px;
margin-bottom: 10px;
}
.saqf-contest-public-header-stats {
grid-area: stats;
grid-column: 1;
direction: rtl;
min-width: 0;
justify-self: stretch;
}
.saqf-contest-public-brand-panel {
grid-area: brand;
grid-column: 2;
direction: rtl;
align-items: flex-end;
justify-self: end;
text-align: right;
}
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats {
width: 100%;
max-width: none;
margin: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats article {
min-height: 86px;
grid-template-columns: 46px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
padding: 14px 16px;
border: 1px solid rgba(199, 215, 249, .98);
border-radius: 20px;
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,245,255,.96));
box-shadow: 0 14px 30px rgba(19,35,94,.08);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats article:hover {
transform: translateY(-3px);
border-color: rgba(36,94,230,.34);
box-shadow: 0 18px 36px rgba(19,35,94,.12);
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon {
grid-row: 1 / 3;
width: 44px;
height: 40px;
border-radius: 12px;
box-shadow: 0 9px 20px rgba(36,94,230,.24);
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::before {
left: 20px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::after {
top: 10px;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats strong {
font-size: clamp(17px, 1.55vw, 23px);
font-weight: 900;
line-height: 1.2;
white-space: nowrap;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats small {
font-size: 11px;
font-weight: 700;
line-height: 1.4;
}
.saqf-contest-public-brand-panel {
gap: 8px;
}
.saqf-contest-public-brand {
margin: 0;
}
.saqf-contest-public-brand img {
width: clamp(138px, 13vw, 178px);
}
.saqf-contest-public-brand-copy {
max-width: 350px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: right;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge {
margin: 0 0 7px;
}
.saqf-contest-public-brand-copy h1 {
margin: 0 0 5px;
font-size: clamp(22px, 2vw, 32px);
line-height: 1.25;
font-weight: 900;
color: var(--saqf-contest-dark);
}
.saqf-contest-public-brand-copy p {
margin: 0;
font-size: clamp(12px, 1vw, 14px);
font-weight: 600;
line-height: 1.8;
color: var(--saqf-contest-muted);
}
@media (max-width: 1180px) and (min-width: 981px) {
.saqf-contest-public-header {
grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
gap: 18px;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats {
gap: 8px;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats article {
grid-template-columns: 38px 1fr;
column-gap: 9px;
padding: 12px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon {
width: 36px;
height: 34px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::before {
left: 16px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::after {
top: 8px;
}
}
@media (max-width: 980px) {
.saqf-contest-public-header {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "brand" "stats";
gap: 16px;
text-align: center;
}
.saqf-contest-public-brand-panel {
grid-area: brand;
align-items: center;
text-align: center;
}
.saqf-contest-public-brand-copy {
max-width: 620px;
text-align: center;
}
.saqf-contest-public-header-stats {
grid-area: stats;
width: 100%;
}
}
@media (max-width: 620px) {
.saqf-contest-public-header-stats .saqf-contest-prize-stats {
grid-template-columns: 1fr;
gap: 8px;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats article {
min-height: 70px;
grid-template-columns: 40px 1fr;
padding: 10px 13px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon {
width: 38px;
height: 34px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::before {
left: 17px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::after {
top: 8px;
}
.saqf-contest-public-brand img {
width: min(47vw, 158px);
}
.saqf-contest-public-brand-copy h1 {
font-size: 24px;
}
} @media (min-width: 981px) {
.saqf-contest-public-brand-panel {
width: 100%;
max-width: 350px;
align-items: stretch;
justify-self: end;
}
.saqf-contest-public-brand {
align-self: flex-end;
}
.saqf-contest-public-brand-copy {
width: 100%;
}
} .saqf-contest-public-brand::after,
.saqf-contest-public-brand-glow {
display: none !important;
animation: none !important;
}
.saqf-contest-public-brand img {
animation: none !important;
} .saqf-contest-public-brand-copy .saqf-contest-public-badge {
display: inline-flex;
width: auto;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 7px 13px;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge i {
flex: 0 0 8px;
width: 8px;
height: 8px;
background: var(--saqf-contest-green);
box-shadow: 0 0 0 5px rgba(32, 189, 122, .13);
animation: none !important;
} .saqf-contest-public-grid {
align-items: stretch;
}
.saqf-contest-public-wheel-column,
.saqf-contest-public-winners {
height: 100%;
max-height: none;
}
.saqf-contest-public-wheel-column {
padding-top: clamp(24px, 2.2vw, 34px);
}
.saqf-contest-public-winners {
align-self: stretch;
overflow: hidden;
}
.saqf-contest-public-winners .saqf-contest-winners {
min-height: 0;
grid-template-rows: repeat(5, minmax(58px, 1fr));
align-content: stretch;
overflow-y: auto;
overflow-x: hidden;
}
.saqf-contest-public-winners .saqf-contest-winner {
min-height: 58px;
padding-block: 6px;
}
.saqf-contest-public-winners .saqf-contest-winner strong {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 980px) {
.saqf-contest-public-brand-panel {
width: 100%;
align-items: center;
}
.saqf-contest-public-brand-copy {
width: 100%;
}
.saqf-contest-public-wheel-column {
padding-top: 24px;
}
.saqf-contest-public-winners {
height: auto;
overflow: visible;
}
.saqf-contest-public-winners .saqf-contest-winners {
grid-template-rows: none;
overflow: visible;
}
} @media (min-width: 981px) {
.saqf-contest-public-brand-panel {
width: fit-content;
max-width: 350px;
margin-inline-start: auto;
align-items: flex-end;
justify-self: end;
text-align: right;
}
.saqf-contest-public-brand {
display: flex;
justify-content: flex-end;
width: 100%;
}
.saqf-contest-public-brand-copy {
width: 100%;
text-align: right;
}
}
.saqf-contest-public-winners-head p {
white-space: nowrap;
} @media (min-width: 981px) {
.saqf-contest-public-brand-panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
width: fit-content;
max-width: 360px;
margin-inline-start: auto;
margin-inline-end: 0;
text-align: right;
}
.saqf-contest-public-brand {
display: block;
width: auto;
align-self: flex-end;
margin: 0 0 8px;
}
.saqf-contest-public-brand-copy {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
width: fit-content;
max-width: 360px;
margin-inline-start: auto;
margin-inline-end: 0;
text-align: right;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge,
.saqf-contest-public-brand-copy h1,
.saqf-contest-public-brand-copy p {
align-self: flex-end;
text-align: right;
}
.saqf-contest-public-brand-copy p {
max-width: 360px;
}
} @media (min-width: 981px) {
.saqf-contest-public-brand-panel {
width: min(100%, 360px);
max-width: 360px;
margin-inline-start: auto;
margin-inline-end: 0;
align-items: stretch;
justify-self: end;
}
.saqf-contest-public-brand,
.saqf-contest-public-brand-copy {
width: 100%;
max-width: 360px;
margin-inline-start: auto;
margin-inline-end: 0;
text-align: right;
}
.saqf-contest-public-brand {
display: block;
margin-bottom: 8px;
}
.saqf-contest-public-brand img {
display: block;
margin-inline-start: auto;
margin-inline-end: 0;
}
.saqf-contest-public-brand-copy {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge,
.saqf-contest-public-brand-copy h1,
.saqf-contest-public-brand-copy p {
display: block;
width: 100%;
margin-inline-start: auto;
margin-inline-end: 0;
text-align: right;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge {
display: inline-flex;
width: fit-content;
max-width: 100%;
align-self: flex-end;
}
}
@media (max-width: 980px) {
.saqf-contest-public-brand-panel,
.saqf-contest-public-brand,
.saqf-contest-public-brand-copy,
.saqf-contest-public-brand-copy .saqf-contest-public-badge,
.saqf-contest-public-brand-copy h1,
.saqf-contest-public-brand-copy p {
text-align: center;
}
.saqf-contest-public-brand img {
margin-inline: auto;
}
} @media (min-width: 981px) {
.saqf-contest-public-brand-panel {
width: 360px;
max-width: 360px;
margin-left: 0;
margin-right: auto;
align-items: stretch;
justify-self: end;
text-align: right;
}
.saqf-contest-public-brand,
.saqf-contest-public-brand-copy {
width: 100%;
max-width: 360px;
margin-left: 0;
margin-right: 0;
text-align: right;
}
.saqf-contest-public-brand {
display: flex;
justify-content: flex-end;
align-items: center;
}
.saqf-contest-public-brand img {
display: block;
margin-left: 0 !important;
margin-right: 0 !important;
}
.saqf-contest-public-brand-copy {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge {
align-self: flex-end;
margin-left: 0 !important;
margin-right: 0 !important;
}
.saqf-contest-public-brand-copy h1,
.saqf-contest-public-brand-copy p {
width: 100%;
text-align: right;
}
}
@media (max-width: 980px) {
.saqf-contest-public-brand-panel,
.saqf-contest-public-brand,
.saqf-contest-public-brand-copy {
width: 100%;
max-width: 100%;
align-items: center;
text-align: center;
}
.saqf-contest-public-brand {
display: flex;
justify-content: center;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge {
align-self: center;
}
.saqf-contest-public-brand-copy h1,
.saqf-contest-public-brand-copy p {
text-align: center;
}
} @media (min-width: 981px) {
.saqf-contest-public-brand-panel {
display: block !important;
width: 360px !important;
max-width: 360px !important;
justify-self: end !important;
margin: 0 !important;
direction: rtl;
text-align: right !important;
}
.saqf-contest-public-brand {
display: block !important;
width: 100% !important;
margin: 0 0 8px !important;
text-align: right !important;
}
.saqf-contest-public-brand img {
display: block !important;
margin-left: auto !important;
margin-right: 0 !important;
}
.saqf-contest-public-brand-copy {
display: block !important;
width: 100% !important;
max-width: 360px !important;
margin: 0 !important;
direction: rtl;
text-align: right !important;
}
.saqf-contest-public-brand-copy .saqf-contest-public-badge {
display: flex !important;
width: max-content !important;
max-width: 100% !important;
margin: 0 0 7px auto !important;
align-self: auto !important;
text-align: right !important;
}
.saqf-contest-public-brand-copy h1,
.saqf-contest-public-brand-copy p {
display: block !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: right !important;
}
}
@media (max-width: 980px) {
.saqf-contest-public-brand-panel,
.saqf-contest-public-brand,
.saqf-contest-public-brand-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
}
.saqf-contest-public-brand img,
.saqf-contest-public-brand-copy .saqf-contest-public-badge {
margin-left: auto !important;
margin-right: auto !important;
}
.saqf-contest-public-brand-copy h1,
.saqf-contest-public-brand-copy p {
text-align: center !important;
}
} @media (max-width: 767px) {
.saqf-contest-public-brand {
margin-bottom: 12px !important;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats {
grid-template-columns: 1fr;
gap: 8px;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats article {
display: flex !important;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 7px;
direction: rtl;
min-height: 58px;
padding: 10px 12px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon {
flex: 0 0 36px;
width: 36px;
height: 34px;
margin: 0;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::before {
left: 16px;
}
.saqf-contest-public-header-stats .saqf-contest-stat-icon::after {
top: 8px;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats strong,
.saqf-contest-public-header-stats .saqf-contest-prize-stats small {
display: inline-block;
white-space: nowrap;
margin: 0;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats strong {
font-size: 18px;
line-height: 1.2;
}
.saqf-contest-public-header-stats .saqf-contest-prize-stats small {
font-size: 11px;
line-height: 1.2;
} .saqf-contest-public,
.saqf-contest-public-shell {
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
.saqf-contest-public-shell {
backdrop-filter: none;
}
.saqf-contest-orb,
.saqf-contest-confetti i,
.saqf-contest-firework i {
animation: none !important;
}
} @media (max-width: 767px) {
.saqf-contest-page-body {
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.saqf-contest-public {
overflow: visible !important;
touch-action: pan-y;
}
.saqf-contest-public-winners,
.saqf-contest-public-winners .saqf-contest-winners,
.saqf-contest-public-winners .saqf-contest-winner {
content-visibility: visible !important;
visibility: visible !important;
opacity: 1 !important;
contain: none !important;
}
.saqf-contest-public-winners,
.saqf-contest-public-winners .saqf-contest-winners {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.saqf-contest-public-winners .saqf-contest-winner,
.saqf-contest-public-winners .saqf-contest-winner.is-new {
animation: none !important;
transform: none !important;
transition: none !important;
box-shadow: 0 5px 14px rgba(19,35,94,.05);
}
} .saqf-contest-public--empty .saqf-contest-public-grid {
align-items: start !important;
}
.saqf-contest-public--empty .saqf-contest-public-wheel-column,
.saqf-contest-public--empty .saqf-contest-public-winners {
height: auto !important;
min-height: 0 !important;
}
.saqf-contest-public--empty .saqf-contest-public-wheel-column {
justify-content: flex-start !important;
padding-top: 18px !important;
}
.saqf-contest-public--empty .saqf-contest-public-wheel-column .saqf-contest-wheel-stage {
margin-top: 0 !important;
margin-bottom: 10px;
} .saqf-contest-public--empty .saqf-contest-public-winners {
align-self: start !important;
height: auto !important;
min-height: 0 !important;
max-height: 420px !important;
}
.saqf-contest-public--empty .saqf-contest-public-winners .saqf-contest-winners {
height: auto !important;
min-height: 0 !important;
grid-template-rows: none !important;
overflow: visible !important;
}
.saqf-contest-public--empty .saqf-contest-public-winners .saqf-contest-empty {
min-height: 118px !important;
padding: 18px !important;
}
@media (max-width: 980px) {
.saqf-contest-public--empty .saqf-contest-public-winners {
max-height: none !important;
}
}