/*
Theme Name: Saikey Studios Custom Theme
Description: Custom theme replacing Elementor, built natively.
Author: Applchu
Version: 1.3
*/

:root {
    /* ==========================================
       GLOBAL LAYOUT
       ========================================== */
    --container-width: 1350px;
    --space-between-widgets: 0px;

    /* ==========================================
       GLOBAL COLORS 
       ========================================== */
    
    /* System Colors (Marked 'not in use' in Elementor, defaulting to red) */
    --color-system-primary: #FF0000;
    --color-system-secondary: #FF0000;
    --color-system-text: #FF0000;
    --color-system-accent: #FF0000;

    /* Custom Colors */
    --color-ui-light: #D31767;
    --color-ui-normal: #BA2663;
    --color-color-2-dark: #BA2663;
    --color-color-1-light: #A897DC;
    --color-color-1: #C8C3D7;
    --color-color-1-dark: #5FC4FF;
    --color-headings: #FFFFFF;
    --color-content: #D9DBDB;
    --color-content-sec: #E3E3E3;
    --color-borders: #FFFFFF33;
    --color-theme-hover: #FFFFFF;
    --color-content-box: #171E20;
    
    /* Gradients (Top missing in export, defaulting transparent) */
    --color-image-hover-gradient-top: transparent; 
    --color-image-hover-gradient-bottom: #080E1080;
    --color-cta-gradient-top: #0C0E1E;
    --color-cta-gradient-bottom: #16045E;
    
    /* Utilities & Specifics */
    --color-white: #ffffff;
    --color-footer: #0C0E1D;
    --color-category-title: #5FC4FF;
    --color-ui: #D1417C;
    --color-border-alt: #2C3C72;
    --color-theme-highlight: #5FC4FF;
    --color-sale: #B72696;
    --color-other: #111111;
    --color-white-transp-text: #FFFFFF8C;
    --color-arrows-icons: #00000052;
    --color-banners-dark-overlay: #00000014;
    --color-banners-dark-overlay-hover: #00000008;
    --color-color-2-light: #FFB300;
    --color-color-1-transp: #0056B354;
    --color-title-for-dark-bg: #FFFFFF;
    --color-content-for-dark-bg: #FFFFFF91;
    --color-about-us-text: #BBBBBB;
    --color-card: #2C3C72;
    --color-highlight: #5FC4FF;
    --color-title-color: #CCF1FF;
    --color-links: #ED75A7;
    --color-soft-title: #CBD5E1;

    /* ==========================================
       GLOBAL TYPOGRAPHY FAMILIES
       ========================================== */
    --font-primary: Segoe UI, 'DM Sans', sans-serif;
    --font-heading: Segoe UI, 'Sora', sans-serif;
    --font-display-1: 'Steel Fish Regular', sans-serif;
    --font-display-2: 'Rational-Integer', sans-serif;
    --font-product: 'GILC', sans-serif;
}

/* ==========================================
   RESET & BASE STYLES
   ========================================== */
*, :after, :before {
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden; /* Fixes horizontal overflow push */
    width: 100%;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    color: var(--color-content);
    background-color: #1b1e3f;
    background: linear-gradient(90deg,rgb(12 14 30) 0%,rgb(27 30 63) 50%,rgb(12 14 30) 100%)!important;
    line-height: 1.5;
    overflow-x: hidden; /* Enforces strict viewport boundaries */
    width: 100%;
    max-width: 100vw;
}

#page {
    width: 100%;
    display: block;
}

.site-main {
    width: 100%;
    display: block;
    min-height: 65vh;
}

a {
    color: var(--color-links);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-theme-hover);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%; /* Ensure container fills available area before max-width */
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

[type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

[type=button], [type=submit], button {
    display: inline-block;
    font-weight: 400;
    color: #c36;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #c36;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 3px;
    transition: all .3s;
}

/* ==========================================
   TYPOGRAPHY CLASSES (Mapped from Elementor)
   ========================================== */

/* Title 1 */
.typography-title-1, h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 45px;
    line-height: 1.4em;
    color: var(--color-headings);
}

/* Title 2 */
.typography-title-2, h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 37px;
    line-height: 1.4em;
    letter-spacing: 0px;
    color: var(--color-headings);
}

/* Title 3 */
.typography-title-3, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 30px;
    line-height: 1.4em;
    color: var(--color-headings);
}

/* Title 4 */
.typography-title-4, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 25px;
    line-height: 1.5em;
    color: var(--color-headings);
}

/* Title 5 */
.typography-title-5, h5 {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 21px;
    line-height: 1.5em;
    color: var(--color-headings);
}

/* Title 6 */
.typography-title-6, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    color: var(--color-headings);
}

/* Content larger */
.typography-content-larger {
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 1.8em;
    font-weight: 400;
}

/* Content large */
.typography-content-large {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.8em;
    font-weight: 400;
}

/* Content base */
.typography-content-base, p {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 16px;
    line-height: 1.8em;
}

/* Content medium */
.typography-content-medium {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 14px;
    line-height: 1.7em;
}

/* Content small */
.typography-content-small {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: none;
    font-size: 12px;
    line-height: 1.6em;
}

/* List large */
.typography-list-large {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400; /* Replaced 'normal' with numerical weight */
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    line-height: 1.4em;
}

/* List */
.typography-list {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
}

/* Accent text larger */
.typography-accent-larger {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: 0.2em;
}

/* Accent text large */
.typography-accent-large {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: 0.2em;
}

/* Accent text medium */
.typography-accent-medium {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: 0.2em;
}

/* Accent text small */
.typography-accent-small {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: 0.2em;
}

/* Quote */
.typography-quote {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.8em;
    margin-bottom: 30px;
    word-spacing: 0em;
    text-transform: none;
}

/* Games Title Thumb */
.typography-games-title-thumb {
    font-family: var(--font-display-1);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    margin-bottom: 0px;
}

/* Category Text */
.typography-category-text {
    font-family: var(--font-display-2);
    font-size: 4rem;
    font-weight: 400;
}

/* Product List */
.typography-product-list {
    font-family: var(--font-product);
    font-size: 16px;
}

label {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
    margin-block-start: .5rem;
    margin-block-end: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

.sca-main-container h1, 
.sca-main-container h2, 
.sca-main-container h3 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.menu-item .wishlist_products_counter.top_wishlist-heart::before {
    background-color: var(--color-white) !important;
    color: var(--color-white) !important;
}

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

/* ==========================================
   RESPONSIVE TYPOGRAPHY
   ========================================== */

/* Tablet (Max Width 1024px) */
@media (max-width: 1024px) {
    .typography-title-1, h1 { font-size: 36px; }
    .typography-quote { font-size: 16px; }
}

/* Mobile (Max Width 767px) */
@media (max-width: 767px) {
    .typography-title-1, h1 { font-size: 28px; }
    .typography-title-2, h2 { font-size: 26px; }
    .typography-title-3, h3 { font-size: 24px; }
    .typography-title-4, h4 { font-size: 22px; }
    .typography-title-5, h5 { font-size: 20px; }
    .typography-content-larger { font-size: 18px; }
    .typography-accent-larger { font-size: 18px; }
    .typography-accent-large { font-size: 16px; letter-spacing: 0.1px; }
    .typography-accent-medium { letter-spacing: 0.1px; }
    .typography-accent-small { letter-spacing: 0.1px; }
    .typography-quote { font-size: 16px; }
}