/*
 Theme Name:   Trainer Gym
 Description:  Custom theme for Trainer Gym
 Author:       Kristjan Tiido
 Website:      spetsymarketing.com
 Template:     astra
 Version:      1.0.0
*/

/* Normal Weight */
@font-face {
    font-family: 'Trainer';
    src: url('fonts/trainer.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Bold Weight */
@font-face {
    font-family: 'Trainer';
    src: url('fonts/trainer-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* The Global Override */
html, body, p, div, h1, h2, h3, h4, h5, h6, span, a, li, input, button {
    font-family: 'Trainer', sans-serif !important;
}

/* COMMON */

.tg-icon-black svg, .tg-icon-black img {
    fill: #000000 !important;
    filter: brightness(0);
}



/* PRODUCT PAGE STYLES */

/* 1. Reset the Shortcode Widget wrapper */
.elementor-widget-shortcode,
.elementor-widget-shortcode .elementor-widget-container,
.elementor-shortcode {
    height: 100% !important;
    width: 100% !important;
    position: relative; /* Base for absolute child */
}

/* 2. Force Splide to fill the container without defining its height */
.tg-main-slider-wrap {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100% !important;
    width: 100% !important;
}

/* 3. Handle the internal Splide elements */
.tg-main-slider-wrap .splide__track,
.tg-main-slider-wrap .splide__list,
.tg-main-slider-wrap .splide__slide,
.tg-main-slider-wrap .splide__slide a {
    height: 100% !important;
}

/* 4. The Image Cover Logic */
.tg-main-slider-wrap .splide__slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* This is the "magic" for covering */
    object-position: center center;
}
#thumbnail-slider .splide__track--nav>.splide__list>.splide__slide.is-active {
    border: 2px solid #E9C62A;
}
#thumbnail-slider .splide__list {
    justify-content: center;
}
/* 1. Base SVG Fix - Remove the squish */
.tg-main-slider-wrap .splide__arrow svg {
    width: 30px !important; 
    height: 30px !important;
    fill: #E9C62A !important;
    /* Remove scaleX to stop the squishing */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease !important;
}

/* 2. Positioning & Button Cleanup */
.tg-main-slider-wrap .splide__arrow {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 50px !important;
    height: 50px !important;
}

/* 3. Correct Rotation without Distortion */
/* We use rotate only. If they still look "thick", we reduce the size. */
.tg-main-slider-wrap .splide__arrow--prev svg {
    transform: rotate(180deg) !important;
}

.tg-main-slider-wrap .splide__arrow--next svg {
    transform: rotate(0deg) !important;
}

/* 4. Sleek Hover State */
/* Instead of squishing them, we'll nudge them slightly for a "slick" feel */
.tg-main-slider-wrap .splide__arrow--prev:hover svg {
    transform: rotate(180deg) translateX(5px) !important;
}

.tg-main-slider-wrap .splide__arrow--next:hover svg {
    transform: rotate(0deg) translateX(5px) !important;
}

.tg-main-slider-wrap .splide__arrow:hover {
    opacity: 1;
}



/* Container for the table */
.tg-specs-wrapper {
    margin: 20px 0;
    width: 100%;
    overflow-x: auto; /* Ensures it's mobile friendly */
}

/* Base Table Styling */
.tg-specs-table {
    width: 100%;
    border-collapse: collapse;
    border: none; /* Removes outer border */
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}

/* Cell alignment and padding */
.tg-specs-table td, 
.tg-specs-table th {
    text-align: left;
    padding: 12px 20px;
    border: none;
}

/* Left Column (Labels) */
.tg-specs-table tr td:first-child {
    font-weight: 700;
    width: 40%; /* Adjust width to match your image preference */
    color: #333;
}

/* Right Column (Values) */
.tg-specs-table tr td:last-child {
    font-weight: 400;
    color: #555;
}

/* Alternating Row Colors (Zebra Effect) */
/* This creates the grey/white pattern from your image */
.tg-specs-table tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Light Gray */
}

.tg-specs-table tbody tr:nth-child(even) {
    background-color: #ffffff; /* Pure White */
}

/* Optional: Header Styling if you use it */
.tg-specs-table thead th {
    background-color: #e0e0e0;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.tg-breadcrumb a {
    font-weight: 600 !important;
    color: black;
    font-size: 12px !important;
}
.tg-breadcrumb .current {
    font-size: 12px !important;
}

/* Files section */

/* Container for the whole list */
.tg-downloads-container {
    padding: 10px 0;
}

/* The horizontal list */
.tg-downloads-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between different file links */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual item logic */
.tg-download-item a {
    display: flex;
    align-items: center; /* Vertical centering of icon and text */
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Icon styling */
.tg-download-icon {
    width: 20px; /* Size of your SVG icon */
    height: auto;
    margin-right: 12px; /* Space between icon and text */
}

/* Text styling */
.tg-download-text {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hover state */
.tg-download-item a:hover {
    color: #E9C62A; /* Your brand yellow */
    transform: translateY(-1px);
}

/* HOME PAGE STYLES */

/* Force Fullscreen */
.tg-fullscreen-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.tg-slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Pagination Dots at Bottom */
.tg-fullscreen-wrapper .splide__pagination {
    bottom: 30px;
}

.tg-fullscreen-wrapper .splide__pagination__page {
    background: rgba(255, 255, 255, 0.5);
    border: none;
}

.tg-fullscreen-wrapper .splide__pagination__page.is-active {
    background: #E9C62A; /* Your brand yellow */
    transform: scale(1.2);
}

/* Fullscreen Arrows */
.tg-fullscreen-wrapper .splide__arrow {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 60px;
    height: 60px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.tg-fullscreen-wrapper .splide__arrow:hover {
    opacity: 1;
}

.tg-fullscreen-wrapper .splide__arrow svg {
    fill: #E9C62A !important;
    width: 40px;
    height: 40px;
}

/* Position and Fix Flipping */
.tg-fullscreen-wrapper .splide__arrow--prev {
    left: 40px !important;
}
.tg-fullscreen-wrapper .splide__arrow--next svg {
    transform: rotate(180deg);
}
.tg-fullscreen-wrapper .splide__arrow--prev svg {
    transform: rotate(0);
}

.tg-fullscreen-wrapper .splide__arrow--next {
    right: 40px !important;
}


.tg-category-box:hover .tg-category-rectangle {
    width: 45px;
}
.tg-category-rectangle {
    transition: all 0.3s ease;
}
.tg-category-box:hover {
    cursor: pointer;
}
.tg-category-bg-rectangle {
    transition: all 0.3s ease;
}
.tg-category-box:hover .tg-category-bg-rectangle {
    transform: scaleY(1.2);
}
.tg-category-box:nth-child(1):hover .tg-category-bg-rectangle {
    background-color: #FBE456 !important;
}
.tg-category-box:nth-child(2):hover .tg-category-bg-rectangle {
    background-color: #e9c62a !important;
}
.tg-category-box:nth-child(3):hover .tg-category-bg-rectangle {
    background-color: #eeaa21 !important;
}
.tg-category-box:nth-child(4):hover .tg-category-bg-rectangle {
    background-color: #f18815 !important;
}
.tg-category-box:nth-child(5):hover .tg-category-bg-rectangle {
    background-color: #b6453b !important;
}
.tg-category-box:nth-child(6):hover .tg-category-bg-rectangle {
    background-color: #9a4100 !important;
}
.tg-category-img {
    transition: all 0.3s ease;
}
.tg-category-box:hover .tg-category-img {
    transform: translateY(-10px);
}


/* HOME PAGE APPLICATIONS SECTION */

.tg-application-box-title h2 {
    transition: color 0.15s ease;
}
.tg-application-box:hover .tg-application-box-title h2 {
    color: #E9C62A !important;
}

/* Ensure the Elementor container has overflow hidden */
.tg-application-box {
    overflow: hidden !important;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.tg-application-box:hover {
    cursor: pointer;
}

.tg-inner-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tg-icon-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-left: 10px;
}

/* Pop-up Icons - Hidden State */
.tg-popups {
    position: absolute;
    display: flex;
    gap: 15px;
    bottom: 0; /* Icons sit directly on the line */
    align-items: flex-end;
}

.tg-popup-el {
    min-width: 45px;
    min-height: 45px;
    transform: translateY(60px);
    transition: all 0.4s ease;
}

/* Animated Line */
.tg-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #FBE456;
    transition: width 0.4s ease-in-out;
}

/* --- TRIGGERED BY PARENT HOVER --- */

.tg-application-box:hover .tg-bottom-line {
    width: 100%; /* Line grows L to R */
}

.tg-application-box:hover .tg-main-img {
    transform: translateY(-20px); /* Main icon slides up */
}

.tg-application-box:hover .tg-popup-el {
    /* animate slightly upwards from the line */
    transform: translateY(0px);
}

/* Sequence Timing - icons animate up one by one */
.tg-application-box:hover .el-1 { transition-delay: 0.05s; }
.tg-application-box:hover .el-2 { transition-delay: 0.15s; }
.tg-application-box:hover .el-3 { transition-delay: 0.25s; }

/* Per-application color themes */

/* 1st application box – keep existing yellow */
.tg-application-box:nth-child(1) .tg-bottom-line {
    background: #FBE456;
}
.tg-application-box:nth-child(1):hover .tg-application-box-title h2 {
    color: #E9C62A !important;
}
.tg-application-box:nth-child(1) .tg-popup-el * {
    fill: #E9C62A !important;
}

/* 2nd application box – #e9c62a */
.tg-application-box:nth-child(2) .tg-bottom-line {
    background: #e9c62a;
}
.tg-application-box:nth-child(2):hover .tg-application-box-title h2 {
    color: #e9c62a !important;
}
.tg-application-box:nth-child(2) .tg-popup-el * {
    fill: #e9c62a !important;
}

/* 3rd application box – #eeaa21 */
.tg-application-box:nth-child(3) .tg-bottom-line {
    background: #eeaa21;
}
.tg-application-box:nth-child(3):hover .tg-application-box-title h2 {
    color: #eeaa21 !important;
}
.tg-application-box:nth-child(3) .tg-popup-el * {
    fill: #eeaa21 !important;
}

/* 4th application box – #F18815 */
.tg-application-box:nth-child(4) .tg-bottom-line {
    background: #F18815;
}
.tg-application-box:nth-child(4):hover .tg-application-box-title h2 {
    color: #F18815 !important;
}
.tg-application-box:nth-child(4) .tg-popup-el * {
    fill: #F18815 !important;
}

/* 5th application box – #C76D0A */
.tg-application-box:nth-child(5) .tg-bottom-line {
    background: #C76D0A;
}
.tg-application-box:nth-child(5):hover .tg-application-box-title h2 {
    color: #C76D0A !important;
}
.tg-application-box:nth-child(5) .tg-popup-el * {
    fill: #C76D0A !important;
}

/* 6th application box – #9a4100 */
.tg-application-box:nth-child(6) .tg-bottom-line {
    background: #9a4100;
}
.tg-application-box:nth-child(6):hover .tg-application-box-title h2 {
    color: #9a4100 !important;
}
.tg-application-box:nth-child(6) .tg-popup-el * {
    fill: #9a4100 !important;
}

@media (max-width: 767px) {
    .tg-inner-wrapper {
        position: relative;
        height: auto;
    }
    .tg-icon-group {
        margin-left: 50px;
    }
}