/* ======================================================
   Wheel Picker
   style.css
====================================================== */

:root{

    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-2:#eef2f8;

    --text:#1f2937;
    --text-light:#6b7280;

    --primary:#4f46e5;
    --primary-hover:#4338ca;

    --border:#dbe3ef;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

    --radius:18px;

}

body.dark{

    --bg:#0f172a;
    --surface:#1e293b;
    --surface-2:#273449;

    --text:#f8fafc;
    --text-light:#cbd5e1;

    --border:#334155;

    --shadow:
        0 15px 35px rgba(0,0,0,.35);

}


*{
	/*
    margin:0;
    padding:0;
	*/
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;

    background:var(--bg);

    color:var(--text);

    transition:.3s;

    min-height:100vh;

}

body a{
   color:var(--text-light);	
}

/* ==========================
   HEADER
========================== */

header{

    height:72px;

/*    display:flex; */

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    background:var(--surface);

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow);

    position:sticky;

    top:0;

    z-index:100;

}

.logo h1{

    font-size:28px;

    font-weight:700;

}

.header-right{

    display:flex;

    gap:12px;

}

.icon-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    background:var(--surface-2);

    transition:.25s;

    font-size:20px;

}

.icon-btn:hover{

    transform:translateY(-2px);

}

/* ==========================
   MAIN
========================== */

.main{

    display:grid;

    grid-template-columns:

        1fr 380px;

    gap:30px;

    padding:30px;
	align-items:start;

}

/* ==========================
   WHEEL SECTION
========================== */

.wheel-section{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

/* ==========================
   SIDEBAR
========================== */

.sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* ==========================
   CARD
========================== */

.card{

    background:var(--surface);

    border-radius:var(--radius);

    padding:22px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.card h2{

    font-size:20px;

    margin-bottom:18px;

}

/* ==========================
   TEXTAREA
========================== */

textarea{

    width:100%;

    min-height:220px;

    resize:vertical;

    padding:15px;

    border-radius:14px;

    border:1px solid var(--border);

    outline:none;

    font-size:15px;

    background:var(--surface-2);

    color:var(--text);

    font-family:inherit;

}

textarea:focus{

    border-color:var(--primary);

}

/* ==========================
   BUTTON GROUP
========================== */

.btn-group{

    display:flex;

    gap:10px;

    margin-top:15px;

}

.btn-group button{

    flex:1;

}

/* ==========================
   BUTTON
========================== */

button{

    border:none;

    cursor:pointer;

    border-radius:14px;

    transition:.25s;

    font-family:inherit;

}

button:hover{

    transform:translateY(-2px);

}

button:active{

    transform:scale(.98);

}

#sendMsg,
#updateBtn,
#shuffleBtn,
#generateNumbersBtn,
#clearHistory{

    background:var(--primary);

    color:white;

    padding:12px;

    font-size:15px;

}

#sendMsg:hover,
#updateBtn:hover,
#shuffleBtn:hover,
#clearHistory:hover{

    background:var(--primary-hover);

}

#resetBtn{

    background:#ef4444;

    color:#fff;

    padding:12px;

    font-size:15px;

}

#resetBtn:hover{

    background:#dc2626;

}

#clearBtn{

    background:#ef4444;

    color:#fff;

    padding:12px;

    font-size:15px;

}

#clearBtn:hover{

    background:#dc2626;

}

/* ==========================
   OPTIONS
========================== */

label{

    display:block;

    margin-top:18px;

    font-size:14px;

}

input[type=range]{

    width:100%;

    margin-top:10px;

}

.switch{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

}

.switch input{

    width:20px;

    height:20px;

}

.duration-value{

    margin-top:10px;

    color:var(--text-light);

    font-size:14px;

}

/* ==========================
   WINNER
========================== */

#winner{

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:var(--primary);

    min-height:45px;

}

/* ==========================
   HISTORY
========================== */

.history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

#historyList{

    list-style:none;

    max-height:260px;

    overflow-y:auto;

}

#historyList li{

    padding:10px 14px;

    margin-bottom:8px;

    border-radius:10px;

    background:var(--surface-2);

}

/* ==========================
   FOOTER
========================== */

footer{

    padding:35px;

    text-align:center;

    color:var(--text-light);

}

/* ======================================================
   Wheel Picker
   style.css
   Part 2
====================================================== */


/* ==========================
   WHEEL
========================== */

.wheel-container{

    position:relative;

    /*
	width:700px;
    height:700px;
	*/
    display:flex;
    align-items:center;
    justify-content:center;
	
	 width:min(90vw,700px);

    aspect-ratio:1;

}

.wheel-container::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translate(-50%,-55%);

    width:0;
    height:0;

    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:40px solid #ef4444;

    /* z-index:1000; */

    filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));

}

#wheel{

    width:100%;
    height:100%;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);

}

/* ==========================
   POINTER
========================== */
/*
.pointer{

    width:0;
    height:0;

    border-left:24px solid transparent;
    border-right:24px solid transparent;
    border-top:50px solid #ef4444;

    position:absolute;

    top:88px;

    z-index:10;

    filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));

}
*/
.pointer{

    position:absolute;

    left:50%;

    top:0;

    transform:translate(-50%, -55%);

    width:0;
    height:0;

    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:40px solid #ef4444;

    z-index:1000;

    filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));

}

/* ==========================
   SPIN BUTTON
========================== */

.spin-btn{

    margin-top:35px;

    width:220px;

    height:62px;

    font-size:22px;

    font-weight:700;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #6366f1,
        #4f46e5
    );

    border-radius:999px;

    box-shadow:
        0 15px 35px rgba(79,70,229,.35);

}

.spin-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 22px 45px rgba(79,70,229,.45);

}

.spin-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/* ==========================
   CONFETTI
========================== */

#confetti{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:9999;

}

.confetti{

    position:absolute;

    width:12px;
    height:12px;

    animation:fall 3s linear forwards;

}

@keyframes fall{

    from{

        transform:
            translateY(-40px)
            rotate(0deg);

        opacity:1;

    }

    to{

        transform:
            translateY(120vh)
            rotate(720deg);

        opacity:0;

    }

}

/*
.confetti{

    position:absolute;

    width:10px;
    height:14px;

    opacity:1;

    animation:confettiFall linear forwards;

    will-change:transform;

}

@keyframes confettiFall{

    0%{

        transform:
            translateY(-80px)
            rotate(0deg);

        opacity:1;

    }

    100%{

        transform:
            translateY(120vh)
            translateX(calc((var(--drift,0) * 1px)))
            rotate(1080deg);

        opacity:0;

    }

}
*/
/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

body.dark ::-webkit-scrollbar-thumb{

    background:#475569;

}

/* ==========================
   INPUTS
========================== */

input[type="text"],
input[type="number"]{

    width:100%;

    padding:12px 15px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--surface-2);

    color:var(--text);

    outline:none;

    font-family:inherit;

}

input[type="text"]:focus,
input[type="number"]:focus{

    border-color:var(--primary);

}

/* ==========================
   CARD ANIMATION
========================== */

.card{

    transition:
        transform .25s,
        box-shadow .25s;

}

.card:hover{

    transform:translateY(-3px);

}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:1200px){

.main{

    grid-template-columns:1fr;

}

.sidebar{

    max-width:700px;

    width:100%;

    margin:auto;

}

.pointer{

    top:58px;

}

}

/* Tablet */

@media (max-width:900px){

.pointer{

    top:52px;

}

.spin-btn{

    width:200px;

}

}

/* Mobile */

@media (max-width:700px){

header{

    padding:16px;

    height:auto;

}

.logo h1{

    font-size:22px;

}

.main{

    padding:18px;

    gap:20px;

}

/*
.pointer{

    top:38px;

    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:38px solid #ef4444;

}
*/
.pointer{

        transform:translate(-50%, -60%);

        border-left:16px solid transparent;
        border-right:16px solid transparent;
        border-top:32px solid #ef4444;

    }
	
.spin-btn{

    width:180px;
    height:56px;

    font-size:18px;

}

.card{

    padding:18px;

}

#winner{

    font-size:24px;

}

}

/* Small Mobile */

@media (max-width:400px){

.pointer{

    top:34px;

}

textarea{

    min-height:180px;

}

}

/* ==========================
   FADE
========================== */

.fade-in{

    animation:fade .4s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================
   WINNER MODAL
========================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99999;

}

.modal.show{

    opacity:1;

    visibility:visible;

}

.modal-box{

    width:420px;

    max-width:90%;

    background:var(--surface);

    color:var(--text);

    border-radius:24px;

    padding:40px;

    text-align:center;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

    animation:popup .35s ease;

}

@keyframes popup{

    from{

        transform:scale(.75);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.winner-icon{

    font-size:64px;

    margin-bottom:15px;

}

#modalWinner{

    font-size:42px;

    font-weight:700;

    color:var(--primary);

    margin:25px 0;

    word-break:break-word;

}

#closeWinner{

    background:var(--primary);

    color:#fff;

    padding:14px 40px;

    font-size:18px;

}

#closeWinner:hover{

    background:var(--primary-hover);

}

/* ==========================
   MODAL CONFETTI
========================== */

.modal-box{

    position:relative;

    overflow:visible;

}

#modalConfetti{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:visible;

}

.modal-confetti{

    position:absolute;

    left:50%;

    top:50%;

    width:10px;

    height:16px;

    border-radius:3px;

    transform-origin:center;

}

ul#historyList{
	margin:0;
    padding:0;
}

#modalChallenge {
    margin-bottom: 25px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
}

#wheel {
    cursor: pointer;
}

/* ==========================
   WORDPRESS NAVIGATION SUBMENU
   Follow Spinly light/dark theme variables

.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    background: transparent !important;
    color: var(--text) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
    color: var(--text) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
    stroke: currentColor;
}
========================== */

.number-generator {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
	margin-bottom:20px;
}

#numberCount {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    box-sizing: border-box;

    /* Firefox */
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Chrome, Edge, Safari */
#numberCount::-webkit-outer-spin-button,
#numberCount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#generateNumbersBtn {
    flex: 0 0 auto;
    /* padding: 10px 16px; */
    white-space: nowrap;
}

.yes-no-counter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.counter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
}

.yes-counter {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.no-counter {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.counter-label {
    font-size: 14px;
    font-weight: 700;
}

.counter-value {
    font-size: 22px;
    font-weight: 700;
}

.spinly-global-counter {
    margin-top: 15px;
	text-align: center;
    font-size: 16px;
}

#spinlySpinCounter {
    font-variant-numeric: tabular-nums;
}

.spinly-spin-time {
    margin-top: 5px;
    font-size: 16px;
}