/*
 * Saikey Custom Account Styles
 * Version: 0.2.5
 *
 * This stylesheet contains all the custom styles for the
 * WooCommerce account page override.
 */

/* ==========================================================================
   1. Global Variables & Resets
   ========================================================================== */

:root {
    /* Main color palette for the page */
    --sca-bg-color: #0c0c1b;
    --sca-text-color: #E0E0E0;
    --sca-primary-accent: #22d3ee;
    --sca-card-bg: #090c12;
    --sca-border-color: #374151;
    --sca-glass-bg: rgba(31, 41, 55, 0.5);
    --sca-glass-border: rgba(255, 255, 255, 0.1);
}

/* Reset default WooCommerce padding on the content area */
.woocommerce .woocommerce-MyAccount-content {
    padding: 0;
}


/* ==========================================================================
   2. Main Layout & Structure
   ========================================================================== */

/* * Sticky Footer Implementation
 * This targets the body tag on our custom pages to create a flex column.
 * It uses the reliable body class for full templates and the modern :has()
 * selector for content-injected pages to cover all cases.
*/
body.sca-template-page,
body:has(.sca-orders-container),
body:has(.sca-edit-account-container),
body:has(.sca-downloads-container),
body:has(.sca-downloads-library-container) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* This makes the main content area grow to fill available space, pushing the footer down */
body.sca-template-page .site-main,
body:has(.sca-orders-container) .site-main,
body:has(.sca-edit-account-container) .site-main,
body:has(.sca-downloads-container) .site-main,
body:has(.sca-downloads-library-container) .site-main {
    flex-grow: 1;
}


/* The primary container for the entire dashboard */
.sca-main-container {
    max-width: 1280px;
    margin: auto;
    margin-bottom: 4rem !important;
    color: var(--sca-text-color);
}

/* The two-column container for the library and user info */
.account-page-container {
    display: flex;
    gap: 1rem;
	margin-bottom: 50px;
    padding: 0.8rem;
    background-color: var(--sca-glass-bg);
    border: 1px solid var(--sca-glass-border);
    border-radius: 0.5rem;
    align-items: flex-start; /* Prevents columns from stretching to equal height */
}

/* Shared styles for the left and right columns */
.acctPage-library,
.acctPage-usrinfo {
    width: 50%;
    min-width: 0; /* Prevents flex items from overflowing their container */
}

/* Make the library a flex column to push the footer links down */
.acctPage-library {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

.sca-dashboard-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #ffffff;
}

/* Page Header for Downloads Page */
.sca-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem; /* Replaces the old title margin */
}

.sca-page-header .sca-dashboard-title {
    margin: 0;
    text-align: left; /* Overrides the center alignment */
}

.sca-page-header .sca-back-to-dashboard {
    margin: 0;
    text-align: right; /* Overrides the center alignment */
}

h1, h2, h3 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sca-primary-accent);
}

.acctPage-usrinfo h1 {
   font-size: 1rem;
   color: #ffffff;
   margin: 0;
   line-height: 0.5;
}

.acctPage-library h2 {
   font-size: 1.5rem;
}

h3 {
   font-size: 1.25rem;
}

/* Styling for links within section headers (e.g., Wishlist, News) */
.account-page-container h3 a,
.account-page-container h3 a:visited {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.account-page-container h3 a:hover {
    color: var(--sca-text-color);
}

/* General link styles */
.account-page-container a,
.sca-edit-account-container a,
.sca-orders-container a,
.sca-view-order-container a {
    color: var(--sca-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.account-page-container a:hover,
.sca-edit-account-container a:hover,
.sca-orders-container a:hover,
.sca-view-order-container a:hover {
    color: var(--sca-primary-accent);
}


/* ==========================================================================
   4. Component Styles
   ========================================================================== */

/* --- Game Library & Search --- */

.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    transition: opacity 0.3s ease-in-out;
}

.library-title-group {
    display: flex;
    flex-direction: column;
}

.library-title-group h2 {
    margin: 0;
}

.view-all-downloads-link {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

#game-search-input,
#downloads-library-search {
    background-color: var(--sca-card-bg);
    border: 1px solid var(--sca-border-color);
    color: var(--sca-text-color);
    border-radius: 1rem;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    width: 250px;
}

.search-icon {
    position: absolute;
    right: 0.75rem;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none; /* Allows clicks to pass through to the input */
}
.search-icon svg {
    color: var(--sca-primary-accent);
}

/* This wrapper will handle the animation and content switching */
.library-view-wrapper {
    display: grid; /* Use grid to stack children on top of each other */
    flex-grow: 1; /* Allows the wrapper to fill vertical space */
    background-color: var(--sca-bg-color);
    padding: 1.1rem;
	padding-bottom: 35px;
    border-radius: 0.5rem;
}

/* The grid and detail view are stacked on top of each other */
#game-detail-view,
.sca-games-grid-container {
    grid-area: 1 / 1;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* This new container uses flexbox to center the grid */
.sca-games-grid-container {
    display: flex;
    justify-content: center;
}

/* This is the grid for the game posters */
.user-owned-games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    align-content: start;
    width: 100%;
    position: relative;
    padding-right: 1.1rem;
}


/* --- Game Detail View --- */

#game-detail-view {
    opacity: 0;
    visibility: hidden; /* Use visibility for better accessibility and transitions */
    position: relative; /* For positioning the back button */
}

/* Group selectors to ensure both dashboard and library details look identical */
#game-detail-view .game-detail-image,
#sca-library-detail-view .game-detail-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1080 / 400;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

#game-detail-view .game-detail-title,
#sca-library-detail-view .game-detail-title {
    font-size: 1.75rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

#game-detail-view .game-detail-description,
#sca-library-detail-view .game-detail-description {
    color: var(--sca-text-color);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
#game-detail-view .game-detail-description p,
#sca-library-detail-view .game-detail-description p {
    margin: 0;
}

#game-detail-view .game-detail-downloads-header,
#sca-library-detail-view .game-detail-downloads-header {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

#game-detail-view .game-detail-downloads,
#sca-library-detail-view .game-detail-downloads {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

#game-detail-view .game-download-link,
#sca-library-detail-view .game-download-link {
    background: var(--sca-glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--sca-glass-border);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

#game-detail-view .game-download-link:hover,
#sca-library-detail-view .game-download-link:hover {
    border-color: var(--sca-primary-accent);
    background-color: rgba(34, 211, 238, 0.15);
    color: var(--sca-primary-accent);
}

/* New styles for the top-left back button */
.sca-detail-back-button {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--sca-glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--sca-glass-border);
    border-radius: 50%;
    color: var(--sca-text-color);
    transition: all 0.3s ease;
    cursor: pointer;
}
.sca-detail-back-button:hover {
    border-color: var(--sca-primary-accent);
    background-color: rgba(34, 211, 238, 0.15);
    color: var(--sca-primary-accent);
}
.sca-detail-back-button svg {
    width: 1.25rem;
    height: 1.25rem;
	color: white;
}


/* --- Library Footer & Action Buttons --- */

.library-footer-links {
    padding-top: 1.5rem;
    text-align: right; /* Aligns buttons to the right */
}

.library-footer-links a {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Animation States for Library --- */

/* When detail view is active, hide the grid and header */
.acctPage-library.detail-view-active .sca-games-grid-container,
.acctPage-library.detail-view-active .library-header {
    opacity: 0;
    visibility: hidden;
}

/* When detail view is active, show the detail content */
.acctPage-library.detail-view-active #game-detail-view {
    opacity: 1;
    visibility: visible;
}


/* --- User Header --- */

.user-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
        
.avatar-placeholder {
    padding: 1px;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--sca-border-color);
    overflow: hidden;
}
.avatar-placeholder img {
    width: 100%;
    height: auto;
}

.user-info-text {
    display: flex;
    flex-direction: column;
}

.user-info-text h2{
    font-size: 1.5rem;
}

.update-account-details-link {
    font-size: 0.6rem;
    text-transform:uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* --- Wishlist Carousel --- */

.wishlist-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
        
.wishlist-scroll {
    display: flex;
    gap: 1rem;
    flex: 1;
    padding: 0.5rem 2rem; /* Add padding to create space for peeking items */
    margin: -0.5rem -2rem; /* Use negative margin to pull the container wider */
    overflow-x: auto; /* Allow scrolling */
    -webkit-mask-image: none;
    mask-image: none;
}

/* Mute overlays during the seamless wrap jump */
.wishlist-scroll.suppress-overlays .wishlist-placeholder::after {
  opacity: 0 !important;
  transition: none !important;
}

.wishlist-container svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    color: var(--sca-text-color);
    cursor: pointer;
    border-radius: 50%;
    background: var(--sca-glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--sca-glass-border);
    user-select: none; 
    -webkit-user-select: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 5; /* Ensure arrows are on top */
}

.wishlist-container svg:hover {
    background-color: rgba(34, 211, 238, 0.15);
    color: var(--sca-primary-accent);
}

.wishlist-placeholder {
    position: relative;
    overflow: hidden;
    width: 10rem;
    aspect-ratio: 600 / 800;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: .5rem;
    transition: transform 0.3s ease !important;
}

/* Darkening overlay for partially visible items */
.wishlist-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: .5rem;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

/* Hide the overlay when the item is fully visible */
.wishlist-placeholder.is-visible::after {
    opacity: 0;
}

.wishlist-discount-tag {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 3;
    background-color: #ef4444;
    color: #ffffff;
    padding: 0.4rem 0.45rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
    transition: opacity 0.3s ease !important;
}

.wishlist-placeholder:hover {
    transform: scale(1.05);
    z-index: 10;
}

.wishlist-placeholder:hover .wishlist-discount-tag {
	opacity: 0;
}

.wishlist-info-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 12, 27, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--sca-text-color);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: .5rem;
    z-index: 2;
}

.wishlist-placeholder:hover .wishlist-info-overlay {
    opacity: 1;
    visibility: visible;
}

.wishlist-info-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem 0;
    text-transform: none;
    letter-spacing: normal;
}

.wishlist-info-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sca-primary-accent);
    margin-bottom: 0.75rem;
}

.wishlist-info-price .price, .wishlist-info-price ins {
    color: var(--sca-primary-accent);
}

.wishlist-info-price del {
    opacity: 0.7;
    margin-right: 0.5rem;
}

#wishlist-scroll .wishlist-placeholder { pointer-events: none; }
#wishlist-scroll .wishlist-placeholder.is-visible { pointer-events: auto; }
#wishlist-prev, #wishlist-next { position: relative; z-index: 3; pointer-events: auto; }

.wishlist-info-desc {
    font-size: 0.7rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- Latest News Section --- */

.latest-news-grid,
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.news-card {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--sca-card-bg);
    transition: transform 0.3s ease !important;
}
.news-card:hover {
    transform: scale(1.03);
}

.news-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.4rem;
    height: 50px;
    line-height: 15px;
    background: rgba(16, 24, 39, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--sca-glass-border);
    color: #fff;
    font-weight: 600;
}
.news-card-title span { text-transform: none; letter-spacing: normal; font-size: 12px;}
.news-card-title small { display: block; font-size: 0.75rem; opacity: 0.8; font-weight: 400; margin-top: 0.25rem; }

/* --- Orders List --- */
.orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
	margin-top: 0.45rem;
}
.orders-header h3 {
    margin: 0;
}
.orders-header a {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.orders-list {
    display: grid;
    gap: 1rem;
}
.order-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
	justify-items: end;
}

.order-button {
    background: var(--sca-glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--sca-glass-border);
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
}
.order-button:hover {
    border-color: var(--sca-primary-accent);
    background-color: rgba(34, 211, 238, 0.15);
    color: var(--sca-primary-accent);
}

.order-item-images {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow: hidden;
	justify-content: space-around;
	width: 90%;
    align-items: center;
}
.order-product-thumbnail {
    height: 24px;
    width: 75px;
    aspect-ratio: 600 / 800;
    object-fit: cover;
    border-radius: 0.25rem;
}

.order-items-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 35px;
    background-color: var(--sca-card-bg);
    border-radius: 0.25rem;
    color: var(--sca-text-color);
    font-weight: 600;
    letter-spacing: 0.1em;
    padding-bottom: 4px;
}


/* --- Loading Spinner --- */
.sca-spinner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1;
}
.sca-spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-left-color: var(--sca-primary-accent);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: sca-spin 1s linear infinite;
}
@keyframes sca-spin {
    to { transform: rotate(360deg); }
}


/* ==========================================================================
   5. Downloads Page
   ========================================================================== */

.sca-downloads-layout {
    display: grid;
    grid-template-columns: 320px minmax(500px, 1fr);
    gap: 2rem;
    min-height: 70vh;
}

.sca-downloads-sidebar {
    background-color: var(--sca-glass-bg);
    border: 1px solid var(--sca-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

#downloads-library-search {
    width: 100%;
}

.sca-downloads-game-list {
    overflow-y: auto;
    flex-grow: 1;
}
.sca-downloads-game-list::-webkit-scrollbar { width: 8px; }
.sca-downloads-game-list::-webkit-scrollbar-track { background: transparent; }
.sca-downloads-game-list::-webkit-scrollbar-thumb { background: var(--sca-glass-border); border-radius: 4px; }
.sca-downloads-game-list::-webkit-scrollbar-thumb:hover { background: var(--sca-primary-accent); }

.sca-game-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--sca-glass-border);
}
.sca-game-list-item:last-child { border-bottom: none; }

.sca-game-list-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.sca-game-list-item.active {
    background-color: var(--sca-primary-accent);
    color: var(--sca-bg-color);
    font-weight: 600;
}

.sca-game-list-thumbnail {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.sca-game-list-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sca-detail-view-wrapper {
    background-color: var(--sca-glass-bg);
    border: 1px solid var(--sca-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    padding: 2rem;
    display: flex; /* Ensures the inner div can grow */
    flex-direction: column;
	width: 45vw;
}

#sca-library-detail-view {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


/* Placeholder for lazy-load effect */
.game-image-placeholder {
    width: 100%;
    aspect-ratio: 1080 / 400;
    border: 2px dashed var(--sca-glass-border);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Placeholder text styling */
.sca-downloads-content-placeholder {
    text-align: center;
    color: #9ca3af;
    margin: auto; /* Center the placeholder vertically and horizontally */
}
.sca-downloads-content-placeholder svg {
    margin-bottom: 1rem;
    color: var(--sca-border-color);
}

.sca-no-games-container {
    padding: 1rem;
    text-align: center;
    margin: auto;
}

.sca-no-games-container .button {
    margin-top: 1rem;
    color: #c36;
    font-weight: bold;
}


/* ==========================================================================
   6. Edit Account & Orders Page Styles
   ========================================================================== */
.sca-edit-account-container,
.sca-orders-container,
.sca-view-order-container {
    background-color: var(--sca-glass-bg);
    border: 1px solid var(--sca-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 0.5rem;
}

/* Hide the default WooCommerce navigation menu on our custom pages */
.sca-edit-account-container .woocommerce-MyAccount-navigation,
.sca-orders-container .woocommerce-MyAccount-navigation,
.sca-view-order-container .woocommerce-MyAccount-navigation,
.sca-downloads-container .woocommerce-MyAccount-navigation {
    display: none;
}

/* Ensure the main content area takes up the full width */
.sca-edit-account-container .woocommerce-MyAccount-content,
.sca-orders-container .woocommerce-MyAccount-content,
.sca-view-order-container .woocommerce-MyAccount-content,
.sca-downloads-container .woocommerce-MyAccount-content {
    width: 100%;
}


.woocommerce-edit-account fieldset {
    border: 1px solid var(--sca-glass-border);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}
.woocommerce-edit-account legend {
    padding: 0 0.5em;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sca-primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.woocommerce-edit-account .form-row label {
    color: var(--sca-text-color);
    font-weight: 600;
}

.woocommerce-edit-account .form-row input.input-text {
    background-color: rgba(16, 24, 39, 0.5);
    border: 1px solid var(--sca-glass-border);
    color: var(--sca-text-color);
    padding: 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
}
.woocommerce-edit-account .form-row input.input-text:focus {
    border-color: var(--sca-primary-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}
.woocommerce-edit-account .form-row span em {
    color: #9ca3af;
    font-size: 0.875rem;
}

.woocommerce-edit-account button.button {
    background-color: var(--sca-primary-accent);
    color: var(--sca-bg-color);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.woocommerce-edit-account button.button:hover {
    background-color: #67e8f9;
}

/* Payment Methods Section */
.sca-payment-methods {
    margin-top: 3rem;
    border-top: 1px solid var(--sca-glass-border);
    padding-top: 2rem;
}
.sca-payment-methods h2 {
    font-size: 1.5rem;
}

th.woocommerce-orders-table__header.woocommerce-orders-table__header-order-vendor, td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-vendor {
    display: none;
}

.woocommerce-MyAccount-paymentMethods {
    color: var(--sca-text-color);
}
.woocommerce-MyAccount-paymentMethods .button {
    background-color: transparent;
    border: 1px solid var(--sca-primary-accent);
    color: var(--sca-primary-accent);
    padding: 0.5rem 1rem;
}
.woocommerce-MyAccount-paymentMethods .button:hover {
    background-color: rgba(34, 211, 238, 0.15);
}

.woocommerce-order-downloads .woocommerce-table--order-downloads thead {
    display: table-header-group !important;
}

.sca-back-to-dashboard {
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
.sca-back-to-dashboard a {
    font-size: 0.875rem;
    text-transform:uppercase; 
    letter-spacing: 0.05em;
}

/* Orders Table */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-orders-table thead th {
    color: var(--sca-primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--sca-glass-border);
}

.woocommerce-orders-table tbody tr {
    border-bottom: 1px solid var(--sca-glass-border);
    transition: background-color 0.3s ease;
}
.woocommerce-orders-table tbody tr:last-child {
    border-bottom: none;
}
.woocommerce-orders-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.woocommerce-orders-table tbody td {
    padding: 1rem;
    vertical-align: middle;
}

.woocommerce-orders-table__cell-order-actions .button {
    background: var(--sca-glass-bg);
    border: 1px solid var(--sca-glass-border);
    color: var(--sca-text-color);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.125rem;
    white-space: nowrap;
}
.woocommerce-orders-table__cell-order-actions .button:hover {
    border-color: var(--sca-primary-accent);
    background-color: rgba(34, 211, 238, 0.15);
    color: var(--sca-primary-accent);
}

/* View Order Page Specific Styles */
.sca-view-order-container .woocommerce-order-details {
    margin-bottom: 2rem;
}
.sca-view-order-container .woocommerce-customer-details {
    border-top: 1px solid var(--sca-glass-border);
    padding-top: 2rem;
}
.sca-view-order-container h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.sca-view-order-container .woocommerce-table--order-details th,
.sca-view-order-container .woocommerce-table--order-details td {
    border-top: 1px solid var(--sca-glass-border);
    padding: 1rem;
}
.sca-view-order-container .woocommerce-table--order-details tfoot th,
.sca-view-order-container .woocommerce-table--order-details tfoot td {
    border-top-width: 2px;
    font-weight: 700;
}
.sca-view-order-container .order_again {
    display: none; /* Hides the default 'Order again' button as we have our own nav */
}

/* ==========================================================================
   7. Generic & Placeholder Styles
   ========================================================================== */

.placeholder { background-color: var(--sca-card-bg); border-radius: 0.7rem; border: 1px solid var(--sca-border-color); }

.user-owned-game { aspect-ratio: 600 / 800; transition: transform 0.3s ease, box-shadow 0.3s ease !important; display: block; cursor: pointer; }
.user-owned-game img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; }
.user-owned-game:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); }

.recent-usr-game { aspect-ratio: 1080 / 400; grid-column: 1 / -1; }

.wishlist-scroll { scroll-behavior: auto; }
.wishlist-scroll::-webkit-scrollbar { display: none; }
.wishlist-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   8. Blur Fixes
   ========================================================================== */
:root{
  --bar-h: 30px;     /* height of .news-card-title */
  --blur: 16px;      /* visual blur strength */
  --bleed: 40px;     /* > blur to avoid any edge halo */
  --tint: rgba(10,12,18,.58); /* overlay darkness */
}

.news-card,
.wishlist-placeholder{
  position: relative;
  overflow: hidden;              /* clip to rounded corners */
  background-size: cover;
  background-position: center;
}

.news-card .news-blur{
  position: absolute;
  left: calc(-1 * var(--bleed));
  bottom: calc(-1 * var(--bleed));
  width:  calc(100% + (2 * var(--bleed)));
  height: calc(var(--bar-h) + (2 * var(--bleed)));
  z-index: 0;                    /* under the title/tint */
  background: inherit;           /* clone same bg image/pos/size */
  filter: blur(var(--blur));     /* not backdrop-filter */
  transform: scale(1.04);
  pointer-events: none;
}

.news-card .news-card-title{
  position: absolute; left:0; right:0; bottom:0;
  z-index: 1;
  background: var(--tint);
}

.wishlist-placeholder .wishlist-blur{
  position: absolute;
  top:  calc(-1 * var(--bleed));
  left: calc(-1 * var(--bleed));
  width:  calc(100% + (2 * var(--bleed)));
  height: calc(100% + (2 * var(--bleed)));
  z-index: 0;                    /* under overlay */
  background: inherit;           /* clone same bg */
  filter: blur(var(--blur));
  transform: scale(1.04);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.wishlist-placeholder:hover .wishlist-blur{ opacity: 1; }

.wishlist-placeholder .wishlist-info-overlay{
  position: absolute; left:0; right:0; bottom:0;
  z-index: 1;
  background: var(--tint);
}

.news-card .news-card-title,
.wishlist-placeholder .wishlist-info-overlay{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}



/* ==========================================================================
   9. Dropdown Controls
   ========================================================================== */

.sca-sidebar-controls {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--sca-glass-border);
}

.sca-dropdown {
    position: relative;
    width: 100%;
}

.sca-dropdown-summary {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
    background-color: rgba(16, 24, 39, 0.5);
    border: 1px solid var(--sca-glass-border);
    border-radius: 0.5rem;
    cursor: pointer;
    list-style: none; /* Hides the default disclosure triangle */
    transition: border-color 0.3s ease;
    user-select: none;
}

.wishlist-placeholder:hover .wishlist-discount-tag {
	opacity: 0;
}
.sca-dropdown-summary::-webkit-details-marker {
    display: none; /* Hides triangle in Chrome/Safari */
}

.sca-dropdown-summary:hover {
    border-color: var(--sca-primary-accent);
}

/* Custom dropdown arrow */
.sca-dropdown-summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--sca-text-color);
    border-bottom: 2px solid var(--sca-text-color);
    transition: transform 0.2s ease-in-out;
}

.sca-dropdown[open] > .sca-dropdown-summary::after {
    transform: translateY(-25%) rotate(225deg);
}

.sca-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 0.25rem;
    pointer-events: none;
}

.sca-summary-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sca-text-color);
    pointer-events: none;
}

.sca-dropdown-content {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--sca-card-bg);
    border: 1px solid var(--sca-glass-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    max-height: 250px;
    overflow-y: auto;
}

.sca-dropdown-content::-webkit-scrollbar { width: 8px; }
.sca-dropdown-content::-webkit-scrollbar-track { background: transparent; }
.sca-dropdown-content::-webkit-scrollbar-thumb { background: var(--sca-glass-border); border-radius: 4px; }
.sca-dropdown-content::-webkit-scrollbar-thumb:hover { background: var(--sca-primary-accent); }

.sca-dropdown-content .sca-filter-item,
.sca-dropdown-content .sca-sort-item {
    padding: 0.75rem 1rem;
    border-radius: 0.3rem;
    transition: background 0.3s ease-in-out;
    cursor: pointer;
}

.sca-dropdown-content .sca-filter-item:hover,
.sca-dropdown-content .sca-sort-item:hover {
    background: #273353;
}

.sca-dropdown-content .sca-filter-item.active,
.sca-dropdown-content .sca-sort-item.active {
    background: #181f31;
}

/* Clean up old styles that are no longer needed */
.sca-downloads-filters, .sca-downloads-sort {
    border: none;
    padding: 0;
    margin: 0;
}
.sca-filters-title, .sca-sort-title {
    display: none;
}

/* ==========================================================================
   10. Login Required Message
   ========================================================================== */

.sca-login-required-container {
    background-color: var(--sca-glass-bg);
    border: 1px solid var(--sca-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 600px;
    margin: 4rem auto;
}

.sca-login-required-container h2 {
    font-size: 1.75rem;
    color: #fff;
    margin-bottom: 1rem;
}

.sca-login-required-container p {
    color: var(--sca-text-color);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.sca-login-required-container .button {
    background-color: var(--sca-primary-accent);
    color: var(--sca-bg-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.sca-login-required-container .button:hover {
    background-color: #67e8f9;
    color: var(--sca-bg-color);
}


/* ==========================================================================
   11. Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
    .sca-main-container { padding: 1rem; }
    .account-page-container { flex-direction: column; }
    .acctPage-library, .acctPage-usrinfo { width: 100%; }
    .user-owned-games-grid { grid-template-columns: repeat(3, 1fr); }
    .sca-downloads-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .sca-downloads-layout { grid-template-columns: 240px 1fr; }
}
        
@media (max-width: 768px) {
     .user-owned-games-grid { grid-template-columns: repeat(2, 1fr); }
    .latest-news-grid, .news-grid, .orders-list { grid-template-columns: 1fr; }
    .game-detail-downloads { grid-template-columns: 1fr; }
    .woocommerce-edit-account .form-row-first, .woocommerce-edit-account .form-row-last { width: 100%; float: none; }
    .sca-downloads-grid { grid-template-columns: 1fr; }
    .sca-downloads-layout { grid-template-columns: 1fr; }
    .sca-downloads-sidebar { min-height: 250px; /* Ensure it has height on mobile */ }
    .order-item { grid-template-columns: 1fr; }
    .order-item-images { justify-content: center; }
}