/* Define constans/variables */
:root {
    --box-spacing: 0.25rem;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

html {
    font-size: 16px;
}

body {
    background-color: #000;
    color: #FFF;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px) saturate(140%);
    /* From https://css.glass */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.logo {
    height: 100px;
    max-width: 100%;
}

.main-content {
    padding: 0;
    overflow-x: hidden;
}

.product-section {
    position: relative;
    align-items: center;
    /* background: var(--gradient, linear-gradient(110deg, #00ff00, #ff00ff)); */
    padding: 0rem;
    margin: 0;
    width: 100%;
    overflow-y: visible;
    padding-bottom: 5%;
    padding-top: 5%;
    /* overflow-x: hidden; */
}

.product-section-content {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0rem;
    margin: 0;
    position: relative;
    overflow-y: visible;
}

/* .product-section:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0%;
    width: 100%;
    height: 30px;
    background: transparent;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
} */

/* Alternativly add blur from the bottom product-secion to the product-section above*/
/* .product-section:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -5%;
    width: 110%;
    height: 20px;
    background: transparent;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: none;
    z-index: 1; */
/* } */

.product-image-container {
    flex: 2;
    flex-direction: row;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 1rem; */
    padding-left: 12%;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-right: 3%;
    /* max-height: 1px; */
}

.product-image {
    width: auto;
    height: auto;
    max-height: 80%;
    max-width: 100%;
    /* box-shadow: 0 0 40px 40px rgba(255, 255, 255, 0.15); */
    filter:drop-shadow(0 0 30px rgba(255,255,255,.55));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.product-image:hover {
    filter:drop-shadow(0 0 40px rgba(255,255,255,.55));
    transform: scale(1.05);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .product-image{
        filter:none !important;
        -webkit-filter:none !important;
        box-shadow:0 0 30px rgba(255,255,255,.35);
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    .product-image:hover{
        box-shadow:0 0 40px rgba(255,255,255,.55);
    }
}

.product-text-padding-container-1 {
    flex: 1;
    padding-right: 8%;
    padding-left: 1%;
}
.product-text-padding-container-2 {
    padding: 1rem
}


.text-container {
    max-width: 50ch; /* Set the width to limit the number of characters per line */
    width: 100%; /* Allow it to adapt within its parent */
    margin: auto 0; /* Vertically center if needed */
}

.text-container h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.text-container p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.download-button {
    padding: 0.625rem 1.25rem;
    margin-bottom: 0.625rem;
    margin-right: 0.625rem;
    margin-left: 0.625rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.checkbox_text_container {
    display: inline-table;
    padding-top: 0.5rem;
    padding-bottom: 1.0rem;
}

/* .subscribe-form form {
    padding: 1rem;
} */

.subscribe-form input {
    padding: 0.625rem;
    margin-bottom: var(--box-spacing);
    border-radius: 5px;
    border: 1px solid #ccc;
}
/* Stretch the “normal” fields */
.subscribe-form input[type="email"],
.subscribe-form input[type="text"],
.subscribe-form input[type="password"],
.subscribe-form input[type="search"],
.subscribe-form input[type="url"]      {
    width: 100%;
    max-width: 1000px;  /* keep your earlier cap if you like */
}

/* Leave tick-boxes and radios alone */
.subscribe-form input[type="checkbox"],
.subscribe-form input[type="radio"]    {
    width: auto;        /* usually 16 px; omit if you haven’t overridden width elsewhere */
}

.default-btn {
    padding: 0.625rem 1.25rem;
    width: 100%;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s ease, color 2s ease;
}

/* Success State */
.default-btn.success {
    background-color: green;
    color: white;
    pointer-events: none;
    transition: background-color 0.1s ease;
    /* transition: background-color 0.1s ease-out, color 0.1s ease; */
}

/* Failure State */
.default-btn.fail {
    background-color: red;
    color: white;
    pointer-events: none;
    transition: background-color 0.1s ease;
    /* transition: background-color 0.1s ease-out, color 0.1s ease; */
}
/* Media Queries */

/* Tablets and larger screens */
@media (min-width: 768px) {
    .product-section-content {
        flex-direction: row;
        /* height: 500px; */
    }

    .product-image {
        /* max-width: 1100px; /* Adjust this value as needed */
        /* margin-left: auto; */
        /* margin-right: auto; */
        /* width: 80%; */
    }
}


@media (min-width: 1200px) {
    /* html {
        font-size: 20px;
    } */
    .product-section-content {
        padding-left: 10%;
        padding-right: 10%;
    }
}
@media (min-width: 1600px) {
    .product-section-content {
        padding-left: 12%;
        padding-right: 12%;
    }
}
@media (min-width: 2000px) {
    .product-section-content {
        padding-left: 14%;
        padding-right: 14%;
    }
}


/* Mobile phones */
@media (max-width: 767px) {
    .header {
        height: 60px;
    }

    .logo {
        height: 80px;
    }

    .product-section-content {
        flex-direction: column;
        height: auto;
        padding: 1rem;
    }

    .product-text-padding-container-1 {
        flex: 1;
        padding-left: 8%;
        padding-right: 8%;
    }

    .more-info {
        flex-direction: column;
    }

    .button-group {
        justify-content: center;
    }

    .product-image-container {
        justify-content: center;
        margin-bottom: 1rem;
        padding-left: 6%;
        padding-top: 3%;
        padding-bottom: 3%;
        padding-right: 6%;
    }

    .product-image {
        width: 100%;
        max-width: none;
        margin-right: 0;
    }

    .product-description-homepage {
        text-align: center;
    }

    .text-container h1 {
        font-size: 1.8rem;
    }

    .text-container p {
        font-size: 1rem;
    }

    .download-button {
        width: 100%;
        /* max-width: 200px; */
    }

    .subscribe-form {
        text-align: center;
    }

    .subscribe-form form {
        align-items: center;
    }

    .subscribe-form input {
        width: 100%;
    }

    .subscribe-form button {
        width: 100%;
    }

    .default-btn {
        /* max-width: 200px; */
    }
}

/* Footer Styling */
.footer {
    background-color: #000; /* Dark background */
    color: #fff;            /* White text */
    padding: 20px 40px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Top-align content so text lines up nicely */
    max-width: 1200px;
    margin: 0 auto;         /* Center the footer content */
    flex-wrap: wrap;        /* Handle smaller screen sizes */
    gap: 20px;              /* Add some spacing between sections */
}

.footer-about {
    flex: 1 1 100%;
    margin-bottom: 20px;
}

.footer-about h3 {
    margin-top: 0;
    font-size: 1.2em;
    margin-bottom: 10px;
}

.footer-about p {
    font-size: 0.9em;
    line-height: 1.6;
}

.footer-left,
.footer-right {
    margin: 10px 0;
    font-size: 0.9em;
    color: #777;  /* Slightly darker hover color */
}

/* Link Styling */
a {
    color: #999;  /* Pubbas brand color */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #ddd;  /* Slightly darker hover color */
}



/* Responsive Footer */
@media (max-width: 600px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-about,
    .footer-left,
    .footer-right {
        flex: 1 1 auto;
        margin: 5px 0;
    }
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.8rem;
    border-top: 1px solid #333;
    padding-top: 1rem;
}

.social-media-links {
    display: flex;
    gap: 0.5rem; /* Space between social media icons */
    margin-top: 1rem;
}

.social-icon {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.subscribe-form button {
    transition: background-color 0.3s ease;
}
.subscribe-form button:hover {
    background-color: #555;
}

.button {
    padding: 0.625rem 1.25rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    overflow: hidden; /* prevents the scaled text from overflowing */
}

.button:hover {
    background-color: #555;
}
.youtube-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-content {
    background: #fff;
    color: #000;
    border-radius: 16px;
    padding: 1rem;
    width: 80%;
    max-width: 400px;
    position: relative;
}
.modal-content h2 {
    margin-bottom: 0.2rem;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    position: absolute;
    top: 0.6rem;
    right: 0.65rem;
    cursor: pointer;
}

.modal-close:hover svg {
    transform: rotate(90deg);
}

.platform-choice {
    display: flex;
    gap: 16px;
    margin-bottom: 1rem;
}

.license-text {
    max-height: 150px;
    overflow-y: auto;
    border-radius: 2px;
    border: 2px solid #ccc;
    padding: 0.5rem;
    margin-bottom: 6px;
}

.accept-checkbox {
    margin-bottom: 1rem;
}
.accept-checkbox label {
    display: flex;
    gap: 8px
}

/* Ensure the loaded content appears as a separate block */
/* .more-info-wrapper {
    display: block;
    margin-top: 2rem;
    border-top: 1px solid #ccc;
    padding-top: 2rem;
} */

.more-info {
    display: flex;
    gap: 2rem;
    padding-left: 10%;
    padding-right: 10%;
}

.more-info-column {
    flex: 1;
}

.more-info-column h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #FFF;
}

.more-info-column p, .more-info-column li {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #FFF;
}

.more-info-column ul {
    list-style: disc inside;
    padding: 0;
    margin: 0;
}

/* Flex container for buttons */
.button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--box-spacing); /* Adds consistent space between all child elements */
    /* margin-top: 1rem; Optional: Adds space above the button group */
}

/* Ensure buttons take appropriate width in flex container */
/* .button-group .button {
    flex: 0 1 auto;
} */



/* Existing Styles ... */

/* Key Controls List Styles */
.key-controls-list {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0rem 0; /* Add vertical spacing around the list */
}

.key-controls-list li {
    display: flex;
    align-items: flex-start; /* Align items at the top for multi-line text */
    gap: 0.75rem; /* Space between SVG and text */
    margin-bottom: 1rem; /* Space between list items */
}

.key-controls-list li svg {
    min-width: 40px;
    min-height: 40px;
    width: 6%; /* Adjust as needed */
    height: 6%; /* Adjust as needed */
    margin-top: 4px; /* Vertically center the SVG with the text */
}

/* Optional: Style the strong tags for consistency */
.key-controls-list li strong {

}

/* Responsive Adjustments (Optional) */
@media (max-width: 600px) {
    .key-controls-list li {
        gap: 0.5rem; /* Adjust gap for smaller screens */
    }

    .key-controls-list li svg {
        width: 20px; /* Smaller SVGs on small screens */
        height: 20px;
    }
}


/* match footer link look inside the info panel */
.more-info-column a       { color:#999; text-decoration:none; transition:color .3s ease; }
.more-info-column a:hover { color:#ddd; }

/* keeps the pulse from crowding neighbouring words */
.phaser-space {
    display:inline-block;      /* already needed for the scale transform */
    padding: 0 0.25em;         /* 0.25 em space on both sides */
}

/* unchanged pulse */
@keyframes shimmerPulse {
    0%,100% { transform: scale(1);   }
    50%     { transform: scale(1.15); }
}

.phaser-glow {
    display:inline-block;
    text-shadow: 0 0 2px #ff00ff, 0 0 8px #00ffff; /* static glow */
    animation: shimmerPulse 2.5s infinite ease-in-out;
}

.form-note {
    font-size: 0.85rem;          /* a touch smaller than body text        */
    line-height: 1.4;            /* comfortable read on two lines         */
    color: #555;                 /* soft grey against white modal bg      */
    margin: -0.1rem 0 var(--box-spacing);
                                 /* pulls it closer to the field, but
                                    keeps a gap below for the checkbox    */
}

.form-note a {
    color: #0066cc;              /* clear link colour                     */
    text-decoration: underline;
    transition: opacity .2s ease;
}
.form-note a:hover {
    opacity: .8;                 /* subtle feedback                       */
}

.communication-preferences {
    /* same values as .license-text */
    border: 2px solid #ccc;   /* overrides browser’s “groove” border   */
    border-radius: 2px;
    padding: 0.5rem;
    /* margin-bottom: 6px; */
    margin-bottom: 1rem;

    /* keep natural height – no scrollbox */
    max-height: none;
    overflow: visible;
}

/* keep legend for a11y but hide visually (optional) */
.communication-preferences legend {
    position: absolute;
    left: -9999px;
}

/* make the checkbox line up nicely */
.communication-preferences label {
    display: flex;
    gap: 8px;
    align-items: center;
}

.communication-preferences .form-note {
    margin-top: 0.5rem;   /* pulls helper text closer to checkbox */
}