/* Base Reset & Box Sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

/* Prevent Horizontal Scroll */
body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Flexible Videos */
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent Text Overflow */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Container Max Width */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Responsive Font Sizes */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 18px;
    }
}
/* Minimum Touch Target Size */
.btn,
button,
a.clickable {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
}

/* Prevent Text Selection on Buttons */
button,
.btn {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove Default Mobile Styling */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* ✅ Restore normal appearance for checkboxes and range inputs */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
}

/* Prevent Zoom on Input Focus (iOS) */
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
    font-size: 16px; /* Minimum 16px prevents zoom */
}
/* Skeleton Loading for Images */
.skeleton-img {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Lazy Loading Support */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}
/* Mobile Phones */
@media (max-width: 640px) {
    /* sm */
}

/* Tablets Portrait */
@media (min-width: 641px) and (max-width: 768px) {
    /* md */
}

/* Tablets Landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    /* lg */
}

/* Laptops */
@media (min-width: 1025px) and (max-width: 1280px) {
    /* xl */
}

/* Desktops */
@media (min-width: 1281px) and (max-width: 1536px) {
    /* 2xl */
}

/* Large Screens */
@media (min-width: 1537px) {
    /* 3xl+ */
}
/* Reserve Space for Images */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Fixed Height for Carousels */
.carousel-container {
    min-height: 300px;
}

/* Prevent Flash of Unstyled Content */
[x-cloak],
[v-cloak] {
    display: none !important;
}
/* For Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-res-bg {
        background-image: url("image@2x.jpg");
    }
}

/* Add this to your main app.css or layout */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ===== RESPONSIVE MEDIA ===== */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* ===== FORMS ===== */
input,
button,
textarea,
select {
    font: inherit;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ===== TABLES ===== */
table {
    width: 100%;
    border-collapse: collapse;
}

/* ===== UTILITIES ===== */
.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ===== ANIMATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}