/* -------------------------------------------------------------------------- */
/* Preloader (Basic Structure)                    */
/* -------------------------------------------------------------------------- */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Will be themed in premium_theme.css */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth fade out */
}

/* ... rest of preloader styles ... *//* -------------------------------------------------------------------------- */
/* Sasa Cooling System                         */
/* Main Stylesheet                             */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Resets & Defaults                         */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    font-size: 16px; /* Base font size, often 62.5% for easy rem units, but 16px is also common */
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
    -moz-osx-font-smoothing: grayscale; /* Better font rendering on Mac */
    -webkit-font-smoothing: antialiased; /* Better font rendering on Mac */
}

body {
    font-family: 'Roboto', sans-serif; /* Default fallback font from Google Fonts */
    line-height: 1.6;
    color: #333; /* Default text color - will be refined in premium_theme.css */
    background-color: #fff; /* Default background - will be refined in premium_theme.css */
    overflow-x: hidden; /* Prevent horizontal scrollbars */
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit; /* Inherit font properties from body */
    border: none; /* Basic reset for borders */
    outline: none; /* Basic reset for outlines */
}

button {
    cursor: pointer;
    background-color: transparent;
}

a {
    text-decoration: none;
    color: inherit; /* Links inherit color from parent, can be overridden */
}

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75em; /* Basic spacing, will be refined */
    font-weight: 700; /* Default bold, can be overridden */
    line-height: 1.2;
}

/* -------------------------------------------------------------------------- */
/* Basic Layout & Structure                        */
/* -------------------------------------------------------------------------- */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Breakpoints for the container - can be adjusted as needed */
@media (min-width: 576px) { /* Small devices (landscape phones, 576px and up) */
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) { /* Medium devices (tablets, 768px and up) */
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) { /* Large devices (desktops, 992px and up) */
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) { /* Extra large devices (large desktops, 1200px and up) */
    .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) { /* Extra extra large devices (larger desktops, 1400px and up) */
    .container {
        max-width: 1320px; /* For a more spacious "premium" feel on very wide screens */
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px; /* Gutter compensation */
    margin-left: -15px;  /* Gutter compensation */
}

/* Basic column setup (can be expanded with more specific col-xx-xx classes if not using a framework) */
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    width: 100%;
    padding-right: 15px; /* Gutter */
    padding-left: 15px;  /* Gutter */
}
/* Add specific width % for each col class if building a custom grid, e.g., .col-6 { flex: 0 0 50%; max-width: 50%; } */
/* This file won't define a full grid system to keep it focused on foundational styles.
   The col-lg-*, col-md-* classes in HTML will need these definitions if not using a framework like Bootstrap.
   For now, they ensure padding. The `premium_theme.css` or a dedicated grid system would define their widths.
*/


/* -------------------------------------------------------------------------- */
/* Accessibility Helpers                          */
/* -------------------------------------------------------------------------- */
.sr-only { /* Screen-reader only class */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Basic Utility Classes                          */
/* -------------------------------------------------------------------------- */
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

.img-fluid {
    max-width: 100%;
    height: auto;
}

.d-block { display: block !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
/* Add more utility classes as needed (e.g., for spacing, visibility) */


/* -------------------------------------------------------------------------- */
/* Preloader (Basic Structure)                    */
/* -------------------------------------------------------------------------- */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Will be themed in premium_theme.css */
    z-index: 99999;
    display: flex; /* Keep flex for when it's shown */
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth fade out */

    /* --- TEMPORARY FIX: Hide preloader until JS is added --- */
    display: none !important; /* Add this line to hide it */
    /* --- END TEMPORARY FIX --- */
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    display: none !important; /* Ensure it stays hidden when JS marks it loaded */
}

.preloader-icon {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue - Example, theme this */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles for when JavaScript is disabled (optional, preloader won't hide) */
/*
<noscript>
    <style>
        .preloader { display: none; }
    </style>
</noscript>
*/

/* -------------------------------------------------------------------------- */
/* Back to Top Button (Basic Structure)                   */
/* -------------------------------------------------------------------------- */
.back-to-top-premium {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px; /* Adjust size in premium_theme.css */
    height: 40px; /* Adjust size in premium_theme.css */
    display: none; /* Hidden by default, shown by JS */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}

.back-to-top-premium.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* Further styling (background, icon color, hover) in premium_theme.css */