/* Smart Popup – Public v2 */
.sp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.sp-overlay.sp-visible { display: flex; }

.sp-popup {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.10);
    opacity: 0;
    will-change: transform, opacity;
}
.sp-popup.sp-anim-fadeInUp    { animation: sp-fadeInUp    .45s cubic-bezier(.22,1,.36,1) forwards; }
.sp-popup.sp-anim-fadeIn      { animation: sp-fadeIn      .4s ease forwards; }
.sp-popup.sp-anim-zoomIn      { animation: sp-zoomIn      .4s cubic-bezier(.22,1,.36,1) forwards; }
.sp-popup.sp-anim-slideInDown { animation: sp-slideInDown .45s cubic-bezier(.22,1,.36,1) forwards; }

@keyframes sp-fadeInUp    { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes sp-fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes sp-zoomIn      { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes sp-slideInDown { from{opacity:0;transform:translateY(-40px)} to{opacity:1;transform:translateY(0)} }

.sp-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; cursor: pointer;
    padding: 4px; line-height: 0;
    transition: opacity .2s, transform .2s; z-index: 2;
}
.sp-close:hover { opacity: .7; transform: scale(1.15); }

.sp-img-wrap { width: 100%; margin-bottom: 18px; line-height: 0; }
.sp-img-wrap img { width: 100%; border-radius: 8px; display: block; }

.sp-title { margin: 0 0 12px; font-weight: 700; line-height: 1.25; padding-right: 28px; font-family: inherit; }
.sp-body  { margin: 0 0 22px; line-height: 1.65; font-family: inherit; }
.sp-btn-wrap { text-align: center; }
.sp-btn {
    display: inline-block; padding: 13px 32px;
    font-size: 15px; font-weight: 600; text-decoration: none;
    transition: filter .2s, transform .15s; font-family: inherit;
}
.sp-btn:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.sp-btn:active { transform: translateY(0); }

@media (max-width: 480px) {
    .sp-overlay { padding: 12px; }
    .sp-popup   { padding: 28px 20px !important; }
    .sp-title   { font-size: 20px !important; }
    .sp-body    { font-size: 14px !important; }
}

/* v3.1 Spin Wheel */
.sp-wheel-popup {
    text-align: center;
    overflow: hidden;
}
.sp-wheel-head { margin-bottom: 10px; }
.sp-wheel-title {
    padding-right: 28px;
    margin-bottom: 6px !important;
}
.sp-wheel-subtitle {
    margin: 0 0 16px;
    line-height: 1.45;
}
.sp-wheel-stage {
    position: relative;
    width: min(300px, 82vw);
    height: min(300px, 82vw);
    margin: 6px auto 18px;
}
.sp-wheel-pointer {
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
    z-index: 4;
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 34px solid #f59e0b;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.25));
}
.sp-wheel-disc {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 9px solid rgba(255,255,255,.95);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 18px 45px rgba(87,60,160,.24);
    transition: transform 3.8s cubic-bezier(.12,.78,.18,1);
    transform: rotate(0deg);
    overflow: hidden;
}
.sp-wheel-disc::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
    pointer-events: none;
}
.sp-wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    z-index: 3;
}
.sp-wheel-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    width: 100px;
    margin-top: -7px;
    margin-left: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0,0,0,.35);
    text-align: left;
    z-index: 2;
}
.sp-wheel-spin {
    border: 0;
    cursor: pointer;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 800;
    min-width: 140px;
    transition: filter .2s, transform .15s, opacity .2s;
    font-family: inherit;
}
.sp-wheel-spin:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sp-wheel-spin:disabled { opacity: .6; cursor: wait; transform: none; }
.sp-wheel-result {
    min-height: 26px;
    margin-top: 14px;
    font-size: 14px;
    color: #555;
}
.sp-wheel-result.is-done {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 12px;
    border-radius: 14px;
}
.sp-wheel-result.is-error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
    padding: 12px;
    border-radius: 14px;
}
.sp-wheel-result strong,
.sp-wheel-result small,
.sp-wheel-coupon {
    display: block;
}
.sp-wheel-result strong { font-size: 18px; margin-bottom: 4px; }
.sp-wheel-coupon {
    margin: 8px auto;
    background: #fff;
    color: #111827;
    border: 1px dashed #16a34a;
    border-radius: 10px;
    padding: 8px 10px;
    width: fit-content;
}
@media (max-width: 480px) {
    .sp-wheel-stage { width: min(260px, 80vw); height: min(260px, 80vw); }
    .sp-wheel-label { width: 82px; font-size: 10px; }
    .sp-wheel-center { width: 54px; height: 54px; font-size: 23px; }
}


/* ===== Smart Popup Wheel Design Refresh v3.1.1 ===== */
.sp-wheel-overlay {
    backdrop-filter: blur(6px);
}
.sp-wheel-popup {
    position: relative;
    padding: 28px 28px 26px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%) !important;
    border: 1px solid rgba(139, 92, 246, .10);
    box-shadow: 0 24px 70px rgba(20, 20, 43, .16), 0 10px 30px rgba(109, 40, 217, .10);
    overflow: hidden;
}
.sp-wheel-popup::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background: radial-gradient(circle at top left, rgba(96,165,250,.22), transparent 45%),
                radial-gradient(circle at top right, rgba(192,132,252,.22), transparent 40%),
                linear-gradient(180deg, rgba(124,58,237,.10), rgba(255,255,255,0));
    pointer-events: none;
}
.sp-wheel-popup .sp-close {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(17,24,39,.06);
    color: #374151 !important;
    right: 14px;
    top: 14px;
    transition: transform .18s ease, background .18s ease;
}
.sp-wheel-popup .sp-close:hover {
    background: rgba(17,24,39,.10);
    transform: rotate(90deg);
}
.sp-wheel-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 16px;
}
.sp-wheel-head::before {
    content: '🎁 Endirim Kuponu';
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(245,158,11,.14), rgba(249,115,22,.14));
    color: #b45309;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 12px;
}
.sp-wheel-title {
    font-size: clamp(28px, 4.5vw, 38px);
    line-height: 1.08;
    font-weight: 900;
    margin: 0;
    color: #111827 !important;
}
.sp-wheel-subtitle {
    margin: 10px auto 0;
    max-width: 450px;
    font-size: 16px;
    line-height: 1.55;
    color: #6b7280 !important;
}
.sp-wheel-stage {
    width: min(420px, 82vw);
    height: min(420px, 82vw);
    margin: 22px auto 18px;
    filter: drop-shadow(0 16px 30px rgba(91, 33, 182, .14));
}
.sp-wheel-stage::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.65), rgba(255,255,255,0) 45%);
    pointer-events: none;
    z-index: 1;
}
.sp-wheel-pointer {
    top: -4px;
    border-left-width: 19px;
    border-right-width: 19px;
    border-top-width: 38px;
    filter: drop-shadow(0 8px 10px rgba(245, 158, 11, .35));
}
.sp-wheel-disc {
    border: 12px solid rgba(255,255,255,.96);
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.18), 0 22px 46px rgba(109, 40, 217, .22);
}
.sp-wheel-disc::after {
    inset: 26px;
    border: 2px solid rgba(255,255,255,.28);
}
.sp-wheel-center {
    width: 84px;
    height: 84px;
    background: linear-gradient(135deg, #fff7ed, #ffffff 55%, #fdf2f8);
    border: 7px solid #fff;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .18);
    font-size: 34px;
}
.sp-wheel-label {
    width: 120px;
    margin-left: 12px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.16;
    text-align: center;
    letter-spacing: .1px;
    text-shadow: 0 2px 6px rgba(0,0,0,.32);
}
.sp-wheel-spin {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 15px 34px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 26px rgba(109, 40, 217, .25);
    font-size: 16px;
    letter-spacing: .2px;
}
.sp-wheel-spin::before {
    content: '✨';
    margin-right: 8px;
}
.sp-wheel-spin:hover {
    filter: brightness(1.03);
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(109, 40, 217, .30);
}
.sp-wheel-result {
    margin-top: 18px;
    min-height: 32px;
    text-align: center;
}
.sp-wheel-result.is-done,
.sp-wheel-result.is-error {
    padding: 18px 18px 16px;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.sp-wheel-result.is-done {
    background: linear-gradient(180deg, #f0fdf4, #ecfdf5);
    border-color: #86efac;
}
.sp-wheel-result.is-error {
    background: linear-gradient(180deg, #fff1f2, #fff7f8);
}
.sp-wheel-result strong {
    font-size: 31px;
    line-height: 1.1;
    font-weight: 900;
    color: #166534;
    margin-bottom: 10px;
}
.sp-wheel-result small {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #14532d;
}
.sp-wheel-coupon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    background: #fff;
    padding: 11px 16px;
    border: 1px dashed #22c55e;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}
.sp-wheel-coupon::before {
    content: '🏷️';
}
@media (max-width: 640px) {
    .sp-wheel-popup { padding: 22px 16px 20px !important; }
    .sp-wheel-title { font-size: 28px; }
    .sp-wheel-subtitle { font-size: 14px; }
    .sp-wheel-stage { width: min(320px, 84vw); height: min(320px, 84vw); }
    .sp-wheel-label { width: 94px; font-size: 11px; margin-left: 10px; }
    .sp-wheel-center { width: 68px; height: 68px; font-size: 28px; }
    .sp-wheel-result strong { font-size: 26px; }
}


/* ===== Smart Popup Wheel Premium Blue v3.2.0 ===== */
.sp-wheel-overlay {
    backdrop-filter: blur(7px);
}
.sp-wheel-popup {
    position: relative;
    overflow: hidden;
    padding: 32px 24px 24px !important;
    background:
        radial-gradient(circle at top right, rgba(0,103,237,.14), transparent 25%),
        radial-gradient(circle at top left, rgba(0,103,237,.10), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 100%) !important;
    border: 2px solid #ffffff;
    box-shadow: 0 28px 70px rgba(0, 71, 163, .18), 0 10px 24px rgba(15, 23, 42, .08);
}
.sp-wheel-popup::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 0 100%, rgba(0,103,237,.08), transparent 22%),
      radial-gradient(circle at 100% 0, rgba(0,103,237,.10), transparent 18%);
}
.sp-wheel-burst {
    position: absolute;
    left: 20px;
    top: 18px;
    z-index: 3;
    width: 124px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 900;
    color: #0f172a;
    background: #fff;
    border: 3px solid #0f172a;
    clip-path: polygon(50% 0%, 61% 11%, 75% 3%, 80% 18%, 95% 15%, 90% 30%, 100% 40%, 89% 50%, 97% 63%, 82% 66%, 84% 81%, 69% 77%, 64% 94%, 50% 84%, 36% 94%, 31% 77%, 16% 81%, 18% 66%, 3% 63%, 11% 50%, 0% 40%, 10% 30%, 5% 15%, 20% 18%, 25% 3%, 39% 11%);
    box-shadow: 0 8px 22px rgba(15,23,42,.12);
    transform: rotate(-7deg);
}
.sp-wheel-head {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 8px;
    margin-bottom: 18px;
}
.sp-wheel-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.08;
    font-weight: 900;
    color: #0067ed !important;
}
.sp-wheel-subtitle {
    margin: 10px auto 0;
    max-width: 420px;
    font-size: 16px;
    line-height: 1.55;
    color: #64748b !important;
}
.sp-wheel-stage {
    width: min(430px, 82vw);
    height: min(430px, 82vw);
    margin: 20px auto 18px;
    filter: drop-shadow(0 16px 30px rgba(0,103,237,.18));
}
.sp-wheel-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 55%);
    pointer-events: none;
    z-index: 1;
}
.sp-wheel-pointer {
    top: -3px;
    z-index: 5;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 34px solid #ffffff;
    filter: none;
}
.sp-wheel-pointer span {
    position: absolute;
    left: -11px;
    top: -42px;
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 50%;
    background: #ef4444;
    border: 5px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.16);
}
.sp-wheel-disc {
    border: 14px solid #eceff5;
    box-shadow: inset 0 0 0 5px #ffffff, 0 18px 34px rgba(0,103,237,.18);
}
.sp-wheel-disc::before {
    content: '';
    position: absolute;
    inset: -11px;
    border-radius: 50%;
    border: 2px solid rgba(15,23,42,.18);
    z-index: 0;
}
.sp-wheel-disc::after {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.45);
    z-index: 0;
}
.sp-wheel-label {
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    width: 118px;
    margin: 0;
    z-index: 2;
}
.sp-wheel-label-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100px;
    transform: rotate(90deg);
    text-align: center;
}
.sp-wheel-segment-icon {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 12px;
    background: rgba(255,255,255,.95);
    padding: 4px;
    box-shadow: 0 4px 12px rgba(15,23,42,.18);
}
.sp-wheel-label-text {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
    letter-spacing: .1px;
}
.sp-wheel-center {
    width: 86px;
    height: 86px;
    background: linear-gradient(145deg, #ffffff, #eef6ff);
    border: 8px solid #ffffff;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    z-index: 4;
}
.sp-wheel-center span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 34px;
    color: #0067ed;
}
.sp-wheel-spin {
    min-width: 170px;
    padding: 14px 34px;
    background: linear-gradient(180deg, #0b7aff, #0067ed) !important;
    color: #fff !important;
    border: 0;
    border-radius: 14px !important;
    box-shadow: 0 14px 28px rgba(0,103,237,.26);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
}
.sp-wheel-spin:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}
.sp-wheel-result {
    margin-top: 18px;
    min-height: 30px;
    text-align: center;
}
.sp-wheel-result.is-done,
.sp-wheel-result.is-error {
    padding: 18px 18px 16px;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(2, 32, 71, .06);
}
.sp-wheel-result.is-done {
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    border: 1px solid rgba(0,103,237,.18);
    color: #0f172a;
}
.sp-wheel-result strong {
    display: block;
    font-size: 30px;
    line-height: 1.08;
    color: #0067ed;
    margin-bottom: 8px;
    font-weight: 900;
}
.sp-wheel-result small {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}
.sp-wheel-coupon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    background: #fff;
    border: 1px dashed #0067ed;
    color: #0f172a;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 800;
}
.sp-wheel-result-media {
    margin-bottom: 12px;
}
.sp-wheel-result-media img {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 20px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,103,237,.16);
}
@media (max-width: 640px) {
    .sp-wheel-popup { padding: 24px 14px 18px !important; }
    .sp-wheel-burst { left: 12px; top: 12px; width: 94px; height: 72px; font-size: 14px; }
    .sp-wheel-title { font-size: 26px; }
    .sp-wheel-subtitle { font-size: 14px; max-width: 270px; }
    .sp-wheel-stage { width: min(320px, 84vw); height: min(320px, 84vw); }
    .sp-wheel-label { width: 82px; }
    .sp-wheel-label-inner { width: 72px; gap: 5px; }
    .sp-wheel-segment-icon { width: 24px; height: 24px; border-radius: 8px; }
    .sp-wheel-label-text { font-size: 10px; }
    .sp-wheel-center { width: 68px; height: 68px; }
    .sp-wheel-result strong { font-size: 24px; }
}


/* ===== Smart Popup Wheel Layout Refresh v3.2.1 ===== */
.sp-wheel-popup {
    width: min(96vw, 940px) !important;
    max-width: 940px !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 430px) minmax(280px, 1fr);
    grid-template-areas:
        "burst head"
        "stage head"
        "stage action"
        "stage result";
    align-items: center;
    column-gap: 34px;
    row-gap: 14px;
    padding: 26px 24px 24px !important;
}
.sp-wheel-burst {
    grid-area: burst;
    position: static;
    margin: 6px 0 0 6px;
    width: 108px;
    height: 80px;
    font-size: 17px;
}
.sp-wheel-head {
    grid-area: head;
    text-align: left;
    margin: 0;
    padding-top: 14px;
    padding-right: 34px;
}
.sp-wheel-head::before {
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 14px;
}
.sp-wheel-title {
    font-size: clamp(36px, 4vw, 54px);
    margin: 0;
}
.sp-wheel-subtitle {
    max-width: 420px;
    margin: 10px 0 0;
    font-size: 20px;
    line-height: 1.45;
}
.sp-wheel-stage {
    grid-area: stage;
    width: min(420px, 42vw);
    height: min(420px, 42vw);
    margin: 0 auto;
}
.sp-wheel-disc {
    transition: transform 4.7s cubic-bezier(.08,.92,.16,1) !important;
    will-change: transform;
}
.sp-wheel-stage.is-spinning .sp-wheel-disc {
    filter: saturate(1.08) brightness(1.02);
}
.sp-wheel-stage.is-spinning .sp-wheel-pointer span {
    animation: spWheelPointerTick .16s linear infinite;
}
@keyframes spWheelPointerTick {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(2px) scale(.96); }
}
.sp-wheel-label-text {
    display: none !important;
}
.sp-wheel-label {
    width: 84px;
}
.sp-wheel-label-inner {
    width: 58px;
    gap: 0;
}
.sp-wheel-segment-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    padding: 3px;
}
.sp-wheel-center {
    width: 92px;
    height: 92px;
}
.sp-wheel-spin {
    grid-area: action;
    justify-self: start;
    min-width: 200px;
    padding: 16px 32px;
    font-size: 18px;
}
.sp-wheel-spin.is-spinning {
    filter: brightness(1.03);
    box-shadow: 0 18px 36px rgba(0,103,237,.3);
}
.sp-wheel-result {
    grid-area: result;
    width: 100%;
    margin-top: 0;
    text-align: left;
    min-height: 96px;
}
.sp-wheel-result.is-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7fbff, #ffffff);
    border: 1px solid rgba(0,103,237,.14);
}
.sp-wheel-result.is-loading small {
    margin: 0;
    font-size: 15px;
    color: #4b5563;
}
.sp-wheel-loading-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0067ed;
    box-shadow: 24px 0 0 rgba(0,103,237,.45), 48px 0 0 rgba(0,103,237,.18);
    animation: spWheelLoading 1.1s infinite ease-in-out;
    margin-right: 52px;
}
@keyframes spWheelLoading {
    0%,100% { transform: translateX(0); opacity: .85; }
    50% { transform: translateX(8px); opacity: 1; }
}
.sp-wheel-result.is-done,
.sp-wheel-result.is-error {
    padding: 22px 22px 18px;
}
.sp-wheel-result strong {
    font-size: 38px;
    margin-bottom: 10px;
}
.sp-wheel-result small {
    font-size: 15px;
}
.sp-wheel-result-media img {
    width: 88px;
    height: 88px;
}
.sp-wheel-coupon {
    margin-top: 6px;
}
@media (max-width: 880px) {
    .sp-wheel-popup {
        width: min(96vw, 680px) !important;
        max-width: 680px !important;
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "stage"
            "action"
            "result";
        row-gap: 16px;
        padding: 20px 16px 18px !important;
    }
    .sp-wheel-burst {
        display: none;
    }
    .sp-wheel-head {
        text-align: center;
        padding-top: 6px;
        padding-right: 0;
    }
    .sp-wheel-head::before {
        margin-left: auto;
        margin-right: auto;
    }
    .sp-wheel-title {
        font-size: clamp(30px, 7vw, 42px);
    }
    .sp-wheel-subtitle {
        margin: 10px auto 0;
        max-width: 320px;
        font-size: 16px;
    }
    .sp-wheel-stage {
        width: min(340px, 82vw);
        height: min(340px, 82vw);
    }
    .sp-wheel-spin {
        justify-self: center;
        min-width: 190px;
        font-size: 16px;
        padding: 14px 28px;
    }
    .sp-wheel-result {
        text-align: center;
        min-height: 0;
    }
    .sp-wheel-result.is-loading {
        justify-content: center;
    }
    .sp-wheel-result strong {
        font-size: 30px;
    }
}
@media (max-width: 520px) {
    .sp-wheel-popup {
        width: min(95vw, 95vw) !important;
        padding: 18px 12px 14px !important;
        border-radius: 20px !important;
    }
    .sp-wheel-popup .sp-close {
        width: 36px;
        height: 36px;
        right: 10px;
        top: 10px;
    }
    .sp-wheel-head::before {
        font-size: 11px;
        padding: 7px 12px;
        margin-bottom: 10px;
    }
    .sp-wheel-title {
        font-size: 28px;
        line-height: 1.1;
        padding: 0 22px;
    }
    .sp-wheel-subtitle {
        font-size: 14px;
        line-height: 1.45;
        max-width: 270px;
    }
    .sp-wheel-stage {
        width: min(292px, 83vw);
        height: min(292px, 83vw);
    }
    .sp-wheel-label {
        width: 58px;
    }
    .sp-wheel-label-inner {
        width: 42px;
    }
    .sp-wheel-segment-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        padding: 2px;
    }
    .sp-wheel-center {
        width: 74px;
        height: 74px;
    }
    .sp-wheel-center span {
        font-size: 28px;
    }
    .sp-wheel-spin {
        min-width: 168px;
        font-size: 15px;
        padding: 13px 24px;
        border-radius: 12px !important;
    }
    .sp-wheel-result.is-done,
    .sp-wheel-result.is-error,
    .sp-wheel-result.is-loading {
        padding: 16px 14px 14px;
        border-radius: 16px;
    }
    .sp-wheel-result strong {
        font-size: 25px;
    }
    .sp-wheel-coupon {
        font-size: 14px;
        padding: 10px 12px;
        border-radius: 12px;
    }
    .sp-wheel-result small {
        font-size: 13px;
        line-height: 1.45;
    }
    .sp-wheel-result-media img {
        width: 70px;
        height: 70px;
        border-radius: 16px;
    }
}

/* ===== Smart Popup v3.4 Wheel polish ===== */
.sp-wheel-label-text{display:block!important}.sp-wheel-layout-compact .sp-wheel-popup{display:block!important;width:min(96vw,640px)!important;max-width:640px!important;text-align:center}.sp-wheel-layout-compact .sp-wheel-burst{position:relative;display:inline-flex;left:auto;top:auto;margin:0 auto 12px;width:auto;height:auto;clip-path:none;border:0;border-radius:999px;padding:8px 14px;background:#eaf4ff;color:#0067ed;font-size:12px;line-height:1.2;transform:none}.sp-wheel-layout-compact .sp-wheel-head{text-align:center;padding-right:0}.sp-wheel-layout-compact .sp-wheel-subtitle{margin-left:auto;margin-right:auto}.sp-wheel-layout-compact .sp-wheel-stage{width:min(390px,82vw);height:min(390px,82vw);margin:18px auto}.sp-wheel-layout-compact .sp-wheel-spin{justify-self:center}.sp-wheel-layout-compact .sp-wheel-result{text-align:center;min-height:0}.sp-wheel-burst{white-space:normal}.sp-wheel-stage:hover .sp-wheel-disc{filter:saturate(1.08)}.sp-wheel-center{transition:transform .2s ease}.sp-wheel-stage:hover .sp-wheel-center{transform:translate(-50%,-50%) scale(1.03)}@media(max-width:520px){.sp-wheel-label-text{display:none!important}.sp-wheel-layout-compact .sp-wheel-stage{width:min(300px,83vw);height:min(300px,83vw)}}

/* ===== Smart Popup v3.4.1 Real Prize Wheel redesign ===== */
.sp-wheel-popup{
    background:
        radial-gradient(circle at 0 100%, rgba(59,130,246,.10), transparent 24%),
        radial-gradient(circle at 100% 0, rgba(239,68,68,.10), transparent 22%),
        linear-gradient(135deg,#ffffff 0%,#f8fbff 100%) !important;
    border:1px solid rgba(255,255,255,.86)!important;
    box-shadow:0 34px 90px rgba(15,23,42,.30),0 0 0 1px rgba(148,163,184,.18)!important;
}
.sp-wheel-stage{
    position:relative!important;
    filter:drop-shadow(0 22px 30px rgba(15,23,42,.22))!important;
}
.sp-wheel-stage:after{
    content:""!important;
    position:absolute!important;
    inset:5.6%!important;
    border-radius:50%!important;
    pointer-events:none!important;
    z-index:4!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 15px rgba(255,255,255,.10)!important;
}
.sp-wheel-disc{
    overflow:hidden!important;
    border:18px solid #ef1b2d!important;
    box-shadow:
        0 0 0 7px #ff4d2e,
        0 0 0 12px #b91c1c,
        inset 0 0 0 3px rgba(255,255,255,.78),
        inset 0 0 34px rgba(0,0,0,.18),
        0 24px 42px rgba(15,23,42,.22)!important;
}
.sp-wheel-disc:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:50%!important;
    z-index:1!important;
    pointer-events:none!important;
    background:
        repeating-conic-gradient(from 0deg, rgba(255,255,255,.70) 0deg 1.3deg, transparent 1.3deg 45deg),
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 27%),
        radial-gradient(circle at center, transparent 0 33%, rgba(255,255,255,.42) 33.4% 34.2%, transparent 35% 100%)!important;
}
.sp-wheel-disc:after{
    content:""!important;
    position:absolute!important;
    inset:-13px!important;
    border-radius:50%!important;
    z-index:5!important;
    pointer-events:none!important;
    background:
        radial-gradient(circle at 50% 2%, #ffd54a 0 5px, transparent 6px),
        radial-gradient(circle at 85% 15%, #ffd54a 0 5px, transparent 6px),
        radial-gradient(circle at 98% 50%, #ffd54a 0 5px, transparent 6px),
        radial-gradient(circle at 85% 85%, #ffd54a 0 5px, transparent 6px),
        radial-gradient(circle at 50% 98%, #ffd54a 0 5px, transparent 6px),
        radial-gradient(circle at 15% 85%, #ffd54a 0 5px, transparent 6px),
        radial-gradient(circle at 2% 50%, #ffd54a 0 5px, transparent 6px),
        radial-gradient(circle at 15% 15%, #ffd54a 0 5px, transparent 6px)!important;
}
.sp-wheel-pointer{
    top:-22px!important;
    z-index:20!important;
    width:0!important;
    height:0!important;
    border-left:22px solid transparent!important;
    border-right:22px solid transparent!important;
    border-top:0!important;
    border-bottom:42px solid #ffffff!important;
    filter:drop-shadow(0 5px 8px rgba(15,23,42,.25))!important;
}
.sp-wheel-pointer span{
    left:-13px!important;
    top:-18px!important;
    width:26px!important;
    height:26px!important;
    background:linear-gradient(180deg,#ff4b4b,#dc2626)!important;
    border:5px solid #fff!important;
}
.sp-wheel-label{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:50%!important;
    height:0!important;
    z-index:3!important;
    transform:rotate(var(--sp-angle))!important;
    transform-origin:0 0!important;
    pointer-events:none!important;
    margin:0!important;
}
.sp-wheel-label-inner{
    position:absolute!important;
    left:62%!important;
    top:0!important;
    width:92px!important;
    min-height:44px!important;
    transform:translate(-50%,-50%) rotate(90deg)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    text-align:center!important;
}
.sp-wheel-label-text{
    display:block!important;
    max-width:92px!important;
    color:#fff!important;
    font-size:13px!important;
    line-height:1.06!important;
    font-weight:900!important;
    text-shadow:0 2px 8px rgba(0,0,0,.38)!important;
    letter-spacing:.2px!important;
}
.sp-wheel-label:nth-child(odd) .sp-wheel-label-text,
.sp-wheel-label-text:only-child{color:#ffffff!important;}
.sp-wheel-segment-icon{
    width:30px!important;
    height:30px!important;
    padding:3px!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 4px 10px rgba(15,23,42,.20)!important;
}
.sp-wheel-center{
    z-index:30!important;
    width:92px!important;
    height:92px!important;
    border:8px solid #f8c34a!important;
    background:radial-gradient(circle at 32% 28%,#fff3b0 0,#f59e0b 34%,#b45309 68%,#78350f 100%)!important;
    box-shadow:inset 0 3px 8px rgba(255,255,255,.42),inset 0 -7px 12px rgba(120,53,15,.28),0 12px 24px rgba(15,23,42,.26)!important;
}
.sp-wheel-center span{font-size:36px!important;color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.25)!important;}
.sp-wheel-title{font-weight:900!important;letter-spacing:-1.1px!important;}
.sp-wheel-spin{font-weight:900!important;text-transform:uppercase!important;box-shadow:0 15px 28px rgba(0,103,237,.25)!important;}
@media(max-width:880px){
    .sp-wheel-disc{border-width:15px!important;box-shadow:0 0 0 5px #ff4d2e,0 0 0 9px #b91c1c,inset 0 0 0 3px rgba(255,255,255,.78),inset 0 0 26px rgba(0,0,0,.16),0 18px 34px rgba(15,23,42,.20)!important;}
    .sp-wheel-label-inner{left:60%!important;width:78px!important;}
    .sp-wheel-label-text{font-size:11px!important;max-width:78px!important;}
    .sp-wheel-center{width:78px!important;height:78px!important;}
    .sp-wheel-center span{font-size:30px!important;}
}
@media(max-width:520px){
    .sp-wheel-label-text{display:none!important;}
    .sp-wheel-segment-icon{width:25px!important;height:25px!important;}
    .sp-wheel-pointer{top:-18px!important;border-left-width:18px!important;border-right-width:18px!important;border-bottom-width:35px!important;}
    .sp-wheel-pointer span{width:22px!important;height:22px!important;left:-11px!important;top:-15px!important;}
}