/* Import the Disneyland-esque Google Font (e.g., 'Gochi Hand') */
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');

/* Container for the countdown form */
.tpv-countdown-form-container {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white; /* White background for a sticker look */
    border-radius: 25px;
}

/* Style for all buttons (Change, Save, Clear) */
.tpv-button {
    background-color: #1a1c1b !important; /* Black for Save and Change buttons */
    text-shadow: 0 0 5px black;
    color: white;
    border: none;
    padding: 20px;
    border-radius: 20px !important;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 20px;
}

.tpv-button:hover {
    background-color: #1495cf !important; /* Change color on hover */
}

/* Styling for the countdown container */
.tpv-countdown {
    position: relative;
    background-size: cover;
    padding-top: 150px;
    padding-bottom: 150px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    text-align: center;
    color: white;
}

/* Styling for the countdown clock text with a sticker effect */
#tpv-countdown-clock {
    font-size: 40px;
    margin-top: 20px;
    color: white !important; /* White text color */
    text-shadow: 0 0 5px black; /* Black shadow for readability */
    font-family: 'Gochi Hand', cursive; /* Disneyland-esque font */
    padding: 10px;
    background-color: #1196d2; /* Blue background for sticker look */
    border-radius: 10px; /* Rounded corners for the sticker */
    display: inline-block;
    margin-top: 20px; /* Ensures space between header and countdown */

    /* Ensure proper text wrapping and spacing */
    white-space: normal; /* Allows text to wrap to the next line */
    line-height: 1.5; /* Add spacing between lines to prevent overlap */
    word-break: break-word; /* Break long words or numbers if necessary */
}

/* Styling for the countdown header with a sticker effect */
.tpv-countdown h2 {
    color: white !important; /* White text color */
    text-shadow: 0 0 5px black; /* Black shadow for readability */
    font-size: 50px;
    font-family: 'Gochi Hand', cursive; /* Disneyland-esque font */
    padding: 10px;
    font-weight: bold; /* Makes the text stand out */
    border-radius: 10px; /* Rounded corners for the sticker */
    display: inline-block; /* Keeps the background tightly around text */
    margin-top: 0;
    /* Uncomment this line if you want a background for the header:
    background-color: white; /* White background for sticker look */
}

/* Center the form container itself */
#tpv-countdown-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the form fields horizontally */
}

/* Ensure each form field appears on its own line and is centered */
#tpv-countdown-form label,
#tpv-countdown-form input,
#tpv-countdown-form select {
    display: block;
    width: 80% !important;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto; /* Center the form elements */
    font-size: 16px !important;
}