/*
Description:
    Contains all the styles for the winning wheel page.
    
Verison History:
    2012-01-28, Douglas McKechie
    - Created based off earlier version.
    
    2015-09-26, Douglas McKechie
    - Minor updates for the 2.0 winwheel example.
*/

body
{
    font-family: arial;
}

/* Sets the background image for the wheel */
td.the_wheel
{
    /* background-image: url(./wheel_back.png); */
    background-position: center;
    background-repeat: none;
}

/* Do some css reset on selected elements */
h1, p
{
    margin: 0;
}

div.power_controls
{
    /* margin-right:70px; */
}

div.html5_logo
{
    margin-left:70px;
}

/* Styles for the power selection controls */
table.power
{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}

table.power th
{
    background-color: white;
    cursor: default;
}

td.pw1
{
    background-color: #6fe8f0;
}

td.pw2
{
    background-color: #86ef6f;
}

td.pw3
{
    background-color: #ef6f6f;
}

/* Style applied to the spin button once a power has been selected */
.clickable
{
    cursor: pointer;
}

/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}

.wheel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0px 20px;
}

.the_wheel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 438px;
    aspect-ratio: 438 / 582; /* keeps background proportional */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* Make canvas scale properly */
#canvas {
    width: 100%;
    height: auto;
    max-width: 434px;
    max-height: 434px;
}

.power_controls {
    text-align: center;
    margin-top: 10px;
}

#spin_button {
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

#spin_button:hover {
    transform: scale(1.1);
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .the_wheel {
        max-width: 340px;
    }
    #canvas {
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .the_wheel {
        max-width: 260px;
    }
    #canvas {
        max-width: 260px;
    }
    
}

.bootstrap-tagsinput {
    width: 100%;
    /* min-height: 50px; */
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border-radius: unset !important;
    border: unset !important;
    box-shadow: unset !important;
}

.bootstrap-tagsinput .tag {
    background-color: #0d6efd;
    color: white;
    padding: 0.25rem 0.5rem;
    margin-right: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.bootstrap-tagsinput input {
    width: 100% !important;
    border: 2px solid #0d6efd !important;   /* Bootstrap primary blue border */
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.3)  !important; /* subtle glow */
    background-color: #f8f9fa  !important;    /* light gray background */
    padding: 0.75rem 1rem  !important;       /* larger padding for visibility */
    border-radius: 0.5rem;       /* rounded corners */
    font-size: 1rem;             /* readable font size */
    transition: all 0.3s ease;  /* smooth hover/focus transition */
    margin-top: 5px !important;
}

.bootstrap-tagsinput input:focus {
    border-color: #0a58ca;       /* darker blue on focus */
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.5); /* stronger glow on focus */
    background-color: #ffffff;    /* white background on focus */
}

.winner-box {
    display: inline-block;
    padding: 1rem 2rem;
    margin-top: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(45deg, #f6d365, #fda085, #ff6a88, #845ec2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(253, 160, 133, 0.6);
    transition: all 0.5s ease;
}

/* Zoom in/out animation */
.winner-box.zoom {
    animation: zoomInOut 1s ease-in-out infinite;
}

@keyframes zoomInOut {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}