/* ======================================
   TuVi Lucky Wheel v1.1 — 2-column layout
   ====================================== */

.tvlw-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 12px 16px 32px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

/* ===== TOP BADGE ===== */
.tvlw-top-badge {
    background: linear-gradient(135deg, #880e4f, #4a148c);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 20px;
    border-radius: 24px;
    display: block;
    text-align: center;
    max-width: 280px;
    margin: 0 auto 24px;
}

/* ===== 2-COLUMN LAYOUT ===== */
.tvlw-main {
    display: flex;
    gap: 36px;
    align-items: center;
}

/* ===== LEFT: WHEEL ===== */
.tvlw-wheel-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tvlw-pointer-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tvlw-pointer {
    font-size: 30px;
    color: #e91e63;
    filter: drop-shadow(0 2px 6px rgba(233,30,99,0.6));
    margin-bottom: -4px;
    z-index: 10;
    position: relative;
    animation: tvlw-pointer-pulse 1.5s ease-in-out infinite;
}
@keyframes tvlw-pointer-pulse {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
.tvlw-canvas-wrap {
    border-radius: 50%;
    box-shadow: 0 0 0 6px #fff, 0 0 0 10px #e91e63, 0 12px 40px rgba(233,30,99,0.28);
    line-height: 0;
    overflow: hidden;
}
#tvlw-canvas { display: block; }
.tvlw-wheel-caption {
    font-size: 12px;
    color: #aaa;
    margin: 14px 0 0;
    text-align: center;
}

/* ===== RIGHT: FORM COL ===== */
.tvlw-form-col { flex: 1; min-width: 0; }
.tvlw-title {
    font-size: 32px;
    font-weight: 900;
    color: #1a1a2e;
    margin: 0 0 18px;
    line-height: 1.15;
}
.tvlw-title span {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== PRIZE LIST ===== */
.tvlw-prizes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.tvlw-prize-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafafa;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-left-width: 4px;
    border-left-style: solid;
    transition: transform .15s;
}
.tvlw-prize-row:hover { transform: translateX(3px); }
.tvlw-prize-icon { font-size: 18px; }

/* ===== FORM ===== */
#tvlw-form-area { display: flex; flex-direction: column; gap: 10px; }
#tvlw-form-area input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}
#tvlw-form-area input:focus { border-color: #e91e63; }

.tvlw-btn-spin {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(233,30,99,0.38);
    transition: transform .15s, box-shadow .15s;
    letter-spacing: 0.5px;
}
.tvlw-btn-spin:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(233,30,99,0.48); }
.tvlw-btn-spin:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.tvlw-privacy { font-size: 11px; color: #bbb; margin: 2px 0 0; text-align: center; }

/* ===== RESULT ===== */
.tvlw-result-inner { animation: tvlw-fadein .4s ease-out; text-align: center; }
@keyframes tvlw-fadein {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}
.tvlw-result-icon { font-size: 52px; animation: tvlw-bounce .6s ease; margin-bottom: 8px; display: block; }
@keyframes tvlw-bounce {
    0%,100% { transform: scale(1); } 50% { transform: scale(1.25); }
}
#tvlw-result-title { font-size: 20px; font-weight: 800; color: #1a1a2e; margin: 0 0 8px; }
#tvlw-result-desc { font-size: 13px; color: #555; line-height: 1.6; margin: 0 0 14px; }

/* ===== CODE BOX ===== */
.tvlw-code-box {
    background: linear-gradient(135deg, #fff3e0, #fff8e1);
    border: 2px dashed #f57c00;
    border-radius: 12px;
    padding: 14px;
    margin: 0 0 14px;
    text-align: center;
}
.tvlw-code-label { font-size: 11px; color: #e65100; font-weight: 700; letter-spacing: 1px; margin: 0 0 6px; }
.tvlw-code { font-family: 'Courier New', Consolas, monospace; font-size: 26px; font-weight: 900; letter-spacing: 4px; color: #bf360c; margin-bottom: 10px; }
.tvlw-copy-btn { background: #fff; border: 1.5px solid #f57c00; color: #e65100; border-radius: 7px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
.tvlw-btn-cta {
    display: block;
    padding: 13px;
    background: linear-gradient(135deg, #e91e63, #c2185b);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    text-decoration: none !important;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(194,24,91,0.35);
}
.tvlw-email-note { font-size: 12px; color: #9c27b0; font-weight: 600; margin: 0 0 10px; }
.tvlw-btn-again { width: 100%; padding: 10px; background: none; border: 1.5px solid #ddd; border-radius: 8px; font-size: 13px; color: #999; cursor: pointer; margin-top: 6px; }

/* ===== ERROR ===== */
.tvlw-error { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; border-radius: 10px; padding: 10px 14px; font-size: 13px; text-align: center; margin-top: 10px; }

/* ===== CONFETTI ===== */
.tvlw-confetti { position: fixed; top: -10px; pointer-events: none; animation: tvlw-fall linear forwards; z-index: 9999; }
@keyframes tvlw-fall {
    0%   { top:-10px; opacity:1; transform:rotate(0deg); }
    100% { top:105vh; opacity:0; transform:rotate(720deg) translateX(50px); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 620px) {
    .tvlw-main { flex-direction: column; gap: 20px; }
    #tvlw-canvas { width: 280px !important; height: 280px !important; }
    .tvlw-title { font-size: 24px; text-align: center; }
    .tvlw-prizes-list { display: none; }
    .tvlw-form-col { width: 100%; }
}