/**
 * teaym Custom Container System
 *
 * Responsive container system with 1200px max-width
 * Fully adaptive and mobile-friendly
 *
 * @version 1.0.0
 */

/* ==============================================================
   # CUSTOM CONTAINER SYSTEM
================================================================ */

/* Base Container - 1200px max-width */
.teaym-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Enhanced Custom Container (backward compatible) */
.custom-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Full Width Container (no max-width) */
.teaym-container-fluid {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Container Variations */

/* Small Container - 960px */
.teaym-container-sm {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Medium Container - 1080px */
.teaym-container-md {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Large Container - 1400px */
.teaym-container-lg {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Extra Large Container - 1600px */
.teaym-container-xl {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ==============================================================
   # CONTAINER MODIFIERS
================================================================ */

/* No Padding Container */
.teaym-container-no-padding,
.custom-container-no-padding {
    padding-left: 0;
    padding-right: 0;
}

/* Extra Padding Container */
.teaym-container-extra-padding {
    padding-left: 40px;
    padding-right: 40px;
}

/* ==============================================================
   # RESPONSIVE GRID SYSTEM
================================================================ */

.teaym-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.teaym-row > * {
    padding-left: 10px;
    padding-right: 10px;
}

/* Column System */
.teaym-col {
    flex: 1;
    min-width: 0;
}

.teaym-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.teaym-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.teaym-col-3 { flex: 0 0 25%; max-width: 25%; }
.teaym-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.teaym-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.teaym-col-6 { flex: 0 0 50%; max-width: 50%; }
.teaym-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.teaym-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.teaym-col-9 { flex: 0 0 75%; max-width: 75%; }
.teaym-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.teaym-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.teaym-col-12 { flex: 0 0 100%; max-width: 100%; }

/* ==============================================================
   # RESPONSIVE BREAKPOINTS
================================================================ */

/* Tablet Landscape: 1024px and below */
@media (max-width: 1024px) {
    .teaym-container,
    .custom-container {
        max-width: 960px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .teaym-container-lg {
        max-width: 100%;
    }

    .teaym-container-xl {
        max-width: 100%;
    }

    .teaym-container-extra-padding {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Tablet columns */
    .teaym-col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .teaym-col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .teaym-col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .teaym-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .teaym-col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .teaym-col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .teaym-col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .teaym-col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .teaym-col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .teaym-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .teaym-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .teaym-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Tablet Portrait: 768px and below */
@media (max-width: 768px) {
    .teaym-container,
    .custom-container,
    .teaym-container-sm,
    .teaym-container-md,
    .teaym-container-lg,
    .teaym-container-xl {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .teaym-container-extra-padding {
        padding-left: 20px;
        padding-right: 20px;
    }

    .teaym-row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .teaym-row > * {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Tablet portrait columns */
    .teaym-col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .teaym-col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .teaym-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .teaym-col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .teaym-col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .teaym-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .teaym-col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .teaym-col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .teaym-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .teaym-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .teaym-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .teaym-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Mobile: 480px and below */
@media (max-width: 480px) {
    .teaym-container,
    .custom-container,
    .teaym-container-sm,
    .teaym-container-md,
    .teaym-container-lg,
    .teaym-container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }

    .teaym-container-extra-padding {
        padding-left: 15px;
        padding-right: 15px;
    }

    .teaym-row {
        margin-left: -6px;
        margin-right: -6px;
    }

    .teaym-row > * {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Mobile columns - usually full width */
    .teaym-col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .teaym-col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .teaym-col-xs-3 { flex: 0 0 25%; max-width: 25%; }
    .teaym-col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .teaym-col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .teaym-col-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .teaym-col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .teaym-col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .teaym-col-xs-9 { flex: 0 0 75%; max-width: 75%; }
    .teaym-col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .teaym-col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .teaym-col-xs-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ==============================================================
   # UTILITY CLASSES
================================================================ */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }

/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }

.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }

/* Gap utilities */
.gap-0 { gap: 0; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }

/* Spacing utilities */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

/* Width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Height utilities */
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Responsive display utilities */
@media (max-width: 1024px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (max-width: 768px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }

    .text-sm-center { text-align: center !important; }
}

@media (max-width: 480px) {
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }

    .text-xs-center { text-align: center !important; }
}

/* ==============================================================
   # SECTION CONTAINERS
================================================================ */

/* Section with vertical padding */
.teaym-section {
    padding-bottom: 80px;
}

.teaym-section-sm {
    padding-top: 40px;
    padding-bottom: 40px;
}

.teaym-section-lg {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* Responsive section spacing */
@media (max-width: 768px) {
    .teaym-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .teaym-section-sm {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .teaym-section-lg {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (max-width: 480px) {
    .teaym-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .teaym-section-sm {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .teaym-section-lg {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* ==============================================================
   # ELEMENTOR COMPATIBILITY
================================================================ */

/* Ensure Elementor sections work well with containers */
.elementor-section .teaym-container,
.elementor-section .custom-container {
    padding-left: 0;
    padding-right: 0;
}

.elementor-container .teaym-container,
.elementor-container .custom-container {
    max-width: 1200px;
}

/* Override Elementor .e-con container styles */
.e-con.teaym-container,
.e-con .teaym-container {
    max-width: 1200px !important;
    --width: 1200px;
}

.e-con.custom-container,
.e-con .custom-container {
    max-width: 1200px !important;
    --width: 1200px;
}

/* Variations */
.e-con.teaym-container-sm,
.e-con .teaym-container-sm {
    max-width: 960px !important;
    --width: 960px;
}

.e-con.teaym-container-md,
.e-con .teaym-container-md {
    max-width: 1080px !important;
    --width: 1080px;
}

.e-con.teaym-container-lg,
.e-con .teaym-container-lg {
    max-width: 1400px !important;
    --width: 1400px;
}

.e-con.teaym-container-xl,
.e-con .teaym-container-xl {
    max-width: 1600px !important;
    --width: 1600px;
}

.e-con.teaym-container-fluid,
.e-con .teaym-container-fluid {
    max-width: none !important;
    --width: 100%;
}

/* ==============================================================
   # PRINT STYLES
================================================================ */

@media print {
    .teaym-container,
    .custom-container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}