/* ==========================================================================
   Game Page Specific Styles from Prototype
   ========================================================================== */
.sc-game-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-game-video-wrapper {
    /* Changed from width: 100% to flex: 1 for better responsiveness in the header flex container */
    flex: 1;
    overflow: hidden; /* Important for carousel */
}

/* Media Carousel Styles */
#sc-media-carousel {
    position: relative;
    width: 100%;
    max-height: 368px;
    border-radius: 5px 0 0 0;
    overflow: hidden;
    background-color: black;
}

#sc-media-slides {
    display: flex;
    /* FIX: Force height to match the new max-height/content-driven height */
    height: 100%; 
    align-items: center;
}

.sc-media-slide {
    /* FIX: Ensure slides use flex-shrink for proper carousel sliding function */
    flex: 0 0 100%; 
    height: 100%; 
    /* The gap appears because the inner content (video/image) isn't filling the flex item's calculated height. 
       We address this by ensuring inner content fills 100% of the slide's height. */
    position: relative; /* Needed for child absolute positioning if we use that */
}

.sc-media-slide img {
    /* FIX: Ensure images fill the slide entirely */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure video player elements fill the slide perfectly */
.sc-media-slide iframe,
.sc-media-slide video {
    width: 100%;
    height: 100%;
    display: block;
}

.sc-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(25, 25, 25, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}

#sc-media-carousel:hover .sc-carousel-nav {
    opacity: 1;
}

.sc-carousel-nav:hover {
    background: rgba(25, 25, 25, 0.5);
}

#sc-carousel-prev {
    left: 10px;
}

#sc-carousel-next {
    right: 10px;
}


/* Custom Video Player Styles */
#wvs-player {
    position: relative;
    /* FIX: Explicitly set height/width to 100% to ensure it fills the .sc-media-slide */
    width: 100%;
    height: 100%;
    background-color: #000;
}

#wvs-video-player {
    width: 100%;
    height: 100%;
    display: block;
}

#wvs-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ff38a2;
    border-radius: 50%;
    animation: wvs-spin 1s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes wvs-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.wvs-controls {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    padding: 5px;
    background: rgba(25, 25, 25, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#wvs-player:hover .wvs-controls {
    opacity: 1;
}

.wvs-controls button {
    background: none;
    border: none;
    color: white;
    font-size: 0; /* Hide text nodes */
    line-height: 1;
    cursor: pointer;
    padding: 5px;
}

.wvs-controls .wvs-icon {
    width: 24px;
    height: 24px;
    fill: white;
    vertical-align: middle;
}

.hidden {
    display: none !important;
}

#wvs-progress-bar-container {
    flex-grow: 1;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    margin: 0 10px;
}

#wvs-progress-bar-fill {
    height: 100%;
    width: 0;
    background-color: #ff38a2;
}

#wvs-volume-slider {
    width: 80px;
    cursor: pointer;
    -webkit-appearance: none;
    background: transparent;
}
#wvs-volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}
#wvs-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #ff38a2;
    margin-top: -5px;
}


.ad-video {
    height: 100% !important;
    width: 100% !important;
}

.ad-video video {
    width: 100% !important;
}

.sc-game-details-column {
    width: 550px;
}

.sc-game-details-column.desc {
    background: #223144d9 url(https://shadycorner.com/storage/2023/05/shadylogodesc.png);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: 14vw 3.5vw;
    color: #000;
    padding: 0 40px 0 40px;
    height: 368px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    border-bottom: none;
    border-left: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.sc-game-details-column h3, 
.sc-game-details-column h4, 
.sc-game-details-column h5 {
  color: white;
  text-shadow: 2px 3px 0px #000;
}
.sc-game-details-column h3 { font-size: 1.5em; }
.sc-game-details-column h4, .sc-game-details-column h5 { font-size: 1em; margin: 5px 0; }
.sc-game-details-column a { color: #f0a9ff; }


.sc-game-content-warning {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.sc-warning-image {
    width: 98px;
    height: 139px;
    margin-right: 15px;
}
.sc-warning-label strong{
    font-size: 1.5em;
    color: white;
}
.sc-warning-text p {
    font-size: 1.1em;
    text-align: left;
    margin-bottom: 5px;
}
.desc-list, .desc-list li {
  color: white !important;
  list-style-type: disc;
}
.sc-buy-now {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(to right, rgba(42, 71, 94, 0.8), rgba(27, 40, 56, 0.8)) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border-radius: 5px !important;
    padding: 10px 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    height: auto !important; /* Overriding potential height issues */
}
.sc-buy-now-title {
    font-size: 1.1em !important;
    font-weight: bold !important;
    color: white !important;
}
.sc-buy-now-action {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Force override for the price styling */
.sc-buy-now .price,
.sc-buy-now .price .amount,
.sc-buy-now .price bdi,
.sc-buy-now .price .woocommerce-Price-currencySymbol {
    font-size: 1.1em;
    font-weight: normal;
    color: #c7d5e0;
    margin: 0;
}

/* Style the container for the quantity input */
.sc-buy-now-action .quantity {
    margin-right: 15px; /* Add some space between the input and the button */
}

/* Style the number input field */
.sc-buy-now-action .quantity .qty {
    width: 60px; /* Set a fixed width */
    padding: 8px;
    text-align: center;
    background-color: #231d33; /* Dark background */
    color: white; /* Light text */
    border: 1px solid #70399b; /* Branded border color */
    border-radius: 4px;
    font-size: 1em;
    font-weight: bold;
}

/* Remove the default number input arrows in WebKit browsers (Chrome, Safari) */
.sc-buy-now-action .quantity .qty::-webkit-outer-spin-button,
.sc-buy-now-action .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove the default number input arrows in Firefox */
.sc-buy-now-action .quantity .qty[type=number] {
    -moz-appearance: textfield;
}

.woocommerce a.added_to_cart {
    margin-top: 10px;
    display: inline-block;
    padding: 8px 15px;
    background: #5b2883;
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Style the hover state for the "View cart" link and other alternative buttons */
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.added_to_cart:hover {
    background: #70399b; /* Lighter purple on hover */
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 56, 162, 0.5); /* A pinkish glow */
    color: white !important;
}


.sc-buy-now .cart {
    display: flex !important;
    align-items: center !important;
}

.sc-game-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sc-game-button, .single_add_to_cart_button {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 10px;
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    min-width: 130px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.sc-game-button:hover, .single_add_to_cart_button:hover {
    transform: scale(1.05);
}

.sc-buy-now .single_add_to_cart_button {
    background: linear-gradient( to bottom, #799905 5%, #53690c 95%) !important;
    border-radius: 3px !important;
    padding: 8px 15px !important;
    font-size: 1em !important;
    min-width: auto !important;
}

.sc-buy-now .single_add_to_cart_button:hover {
    background: linear-gradient( to bottom, #88ab06 5%, #637b0e 95%) !important;
}
.sc-spacer {
    height: 20px;
}

.sc-bottom-content-flex-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.game-main-description-area {
    flex: 2;
    width: 50%;
}

.woocommerce div.product form.cart {
    margin-bottom: 0 !important;
}

.woocommerce .woocommerce-breadcrumb {
    display: none;
}

#external-stores-section {
    flex: 1;
    background: rgba(63, 57, 79, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    text-align: center;
}

.steam-widget-container {
    margin-bottom: 20px;
}

.sc-store-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

/* Styles for the new Variations Section */
.sc-variations-section {
    background: rgba(40, 35, 55, 0.5);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.sc-variations-section h3 {
    margin-top: 0;
    text-align: left;
}
.sc-variations-section .variations {
    margin-bottom: 15px;
    text-align: left;
}
.sc-variations-section .variations label {
    font-weight: bold;
    color: #fff;
}
.sc-variations-section .variations select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    background: #231d33;
    color: white;
    border: 1px solid #70399b;
}
.sc-variations-section .single_variation_wrap {
    text-align: left;
}
.sc-variations-section .woocommerce-variation-price .price {
    font-size: 1.5em !important;
    color: #ff38a2 !important;
    font-weight: bold !important;
}
.sc-variations-section .single_add_to_cart_button {
    background: linear-gradient( to bottom, #799905 5%, #53690c 95%) !important;
    width: 100%;
    margin-top: 10px;
}


.wp-block-button__link {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
}

.sc-variations-section .variations select {
    /* Remove default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Custom Styling */
    background-color: #231d33;
    border: 1px solid #70399b;
    color: white;
    padding: 12px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;

    /* Custom Arrow using inline SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1.5em;
    padding-right: 2.5em; /* Make space for the arrow */
}

/* Style for the dropdown options */
.sc-variations-section .variations select option {
    background: #231d33;
    color: white;
}

/* Focus style for accessibility */
.sc-variations-section .variations select:focus {
    outline: none;
    border-color: #ff38a2;
    box-shadow: 0 0 0 2px rgba(255, 56, 162, 0.5);
}



/* ==========================================================================
   AJAX Add to Cart Notification Styles
   ========================================================================== */

#sc-ajax-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(35, 29, 51, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    z-index: 100000;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    max-width: 350px;
}

.sc-notification-hidden {
    opacity: 0;
    transform: translateX(120%);
}

.sc-notification-visible {
    opacity: 1;
    transform: translateX(0);
}

#sc-ajax-notification .sc-notification-content {
    display: flex;
    flex-direction: column;
}

#sc-ajax-notification .sc-notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#sc-ajax-notification h4 {
    margin: 0;
    font-size: 1.1em;
}

#sc-ajax-notification .sc-notification-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
}

#sc-ajax-notification p {
    margin: 0 0 15px 0;
}

#sc-ajax-notification .sc-notification-footer a {
    background-color: #70399b;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}
#sc-ajax-notification.sc-notification-error {
    border-left: 5px solid #cf2e2e;
}

#sc-ajax-notification.sc-notification-success {
    border-left: 5px solid #00d084;
}

/* --- FIX: Styles for WooCommerce notices injected into the AJAX notification --- */
#sc-ajax-notification .woocommerce-notices-wrapper {
    margin: 0;
}

#sc-ajax-notification .woocommerce-message,
#sc-ajax-notification .woocommerce-info,
#sc-ajax-notification .woocommerce-error {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: white;
    display: flex;       /* Use flexbox for alignment */
    align-items: center; /* Vertically center items */
}

/* Remove the default Woo icon */
#sc-ajax-notification .woocommerce-message::before,
#sc-ajax-notification .woocommerce-info::before,
#sc-ajax-notification .woocommerce-error::before {
    display: none;
}

/* Style the "View cart" button inside the notification */
#sc-ajax-notification .woocommerce-message .button.wc-forward {
    background: #70399b !important;
    color: white !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    border: none !important;
    margin-right: 15px; /* Add space between button and text */
    white-space: nowrap; /* Prevent button text from wrapping */
    transition: transform 0.2s ease, background 0.2s ease !important;
}

#sc-ajax-notification .woocommerce-message .button.wc-forward:hover {
    background: #8343b8 !important;
    transform: scale(1.05);
}

a.button.wc-forward {
    background-color: #232323;
}

/* ==========================================================================
   General Notice & Alert Styling on Product Pages
   ========================================================================== */
.single-product .woocommerce-error,
.single-product .woocommerce-info,
.single-product .woocommerce-message {
    background: rgba(35, 29, 51, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    color: white;
    margin-bottom: 2em;
}

.single-product .woocommerce-error a,
.single-product .woocommerce-info a,
.single-product .woocommerce-message a {
    color: #f0a9ff;
    font-weight: bold;
}

/* Hide the default checkmark/info icon */
.single-product .woocommerce-error::before,
.single-product .woocommerce-info::before,
.single-product .woocommerce-message::before {
    display: none;
}


/* ==========================================================================
   Custom Sale Price Styles
   ========================================================================== */
.custom-price-box {
    display: flex;
    align-items: center;
}
.custom-price-box.simple-price .amount {
    color: #c7d5e0 !important;
    font-size: 1.2em !important;
    font-weight: normal !important;
}
.discount-percentage {
    background-color: #327226;
    color: #82ff75;
    padding: 5px 10px;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 3px;
    margin-right: 10px;
    border: 1px solid rgb(255, 255, 255, 0.1);
}
.price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.original-price, .original-price .amount, .original-price .woocommerce-Price-amount bdi, .original-price .woocommerce-Price-currencySymbol {
    font-size: 0.9em !important;
    color: #7d7d7d !important;
    text-decoration: line-through;
    line-height: 1;
}
.sale-price, .sale-price .amount, .sale-price .woocommerce-Price-amount bdi, .sale-price .woocommerce-Price-currencySymbol {
    font-size: 1.2em !important;
    color: #e6ff8e !important;
    font-weight: normal !important;
    line-height: 1;
}

/* ==========================================================================
   Responsive Styles from Prototype
   ========================================================================== */
@media only screen and (max-width: 768px) {
    .sc-game-info-header {
        flex-direction: column;
    }
    .sc-game-video-wrapper,
    .sc-game-details-column {
        flex-basis: 100%;
        width: 100%;
    }
.sc-game-details-column.desc {
    height: auto;
    padding: 20px;
    background-position: center -50px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-top-right-radius: 0;
}
    .sc-buy-now {
        border-top-left-radius: 0;
    }
    .sc-game-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .sc-game-button {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .sc-bottom-content-flex-container {
        flex-direction: column;
    }
    .game-main-description-area {
    width: 100%;
    }
    .ad-video video {
    	height: auto !important;
    }

    #sc-media-carousel {
       border-radius: 5px 5px 0 0;
    }
    #external-stores-section {
      width: 85%;
      margin: auto;
    }
}