/**
 * WP Bakery / Visual Composer Custom CSS Classes
 * Add to your theme's style.css or custom CSS file
 */

/* ======================
   DISPLAY UTILITIES
   ====================== */

/* Flex Display */
.vc-d-flex {
    display: flex !important;
}

.vc-d-inline-flex {
    display: inline-flex !important;
}

.vc-d-none {
    display: none !important;
}

.vc-d-block {
    display: block !important;
}

.vc-d-inline-block {
    display: inline-block !important;
}

/* ======================
   FLEXBOX JUSTIFY CONTENT
   ====================== */

/* Horizontal Alignment */
.vc-justify-start {
    justify-content: flex-start !important;
}

.vc-justify-center {
    justify-content: center !important;
}

.vc-justify-end {
    justify-content: flex-end !important;
}

.vc-justify-between {
    justify-content: space-between !important;
}

.vc-justify-around {
    justify-content: space-around !important;
}

.vc-justify-evenly {
    justify-content: space-evenly !important;
}

/* ======================
   FLEXBOX ALIGN ITEMS
   ====================== */

/* Vertical Alignment */
.vc-align-start {
    align-items: flex-start !important;
}

.vc-align-center {
    align-items: center !important;
}

.vc-align-end {
    align-items: flex-end !important;
}

.vc-align-stretch {
    align-items: stretch !important;
}

.vc-align-baseline {
    align-items: baseline !important;
}

/* ======================
   FLEXBOX ALIGN CONTENT
   ====================== */

.vc-align-content-start {
    align-content: flex-start !important;
}

.vc-align-content-center {
    align-content: center !important;
}

.vc-align-content-end {
    align-content: flex-end !important;
}

.vc-align-content-between {
    align-content: space-between !important;
}

.vc-align-content-around {
    align-content: space-around !important;
}

.vc-align-content-stretch {
    align-content: stretch !important;
}

/* ======================
   FLEXBOX ALIGN SELF
   ====================== */

.vc-align-self-auto {
    align-self: auto !important;
}

.vc-align-self-start {
    align-self: flex-start !important;
}

.vc-align-self-center {
    align-self: center !important;
}

.vc-align-self-end {
    align-self: flex-end !important;
}

.vc-align-self-stretch {
    align-self: stretch !important;
}

.vc-align-self-baseline {
    align-self: baseline !important;
}

/* ======================
   FLEXBOX DIRECTION
   ====================== */

.vc-flex-row {
    flex-direction: row !important;
}

.vc-flex-row-reverse {
    flex-direction: row-reverse !important;
}

.vc-flex-column {
    flex-direction: column !important;
}

.vc-flex-column-reverse {
    flex-direction: column-reverse !important;
}

/* ======================
   FLEXBOX WRAP
   ====================== */

.vc-flex-nowrap {
    flex-wrap: nowrap !important;
}

.vc-flex-wrap {
    flex-wrap: wrap !important;
}

.vc-flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* ======================
   TEXT ALIGNMENT
   ====================== */

.vc-text-left {
    text-align: left !important;
}

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

.vc-text-right {
    text-align: right !important;
}

.vc-text-justify {
    text-align: justify !important;
}

/* ======================
   CENTERING UTILITIES
   ====================== */

/* Full Center (Flex) */
.vc-center-flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Horizontal Center (Flex) */
.vc-center-horizontal {
    display: flex !important;
    justify-content: center !important;
}

/* Vertical Center (Flex) */
.vc-center-vertical {
    display: flex !important;
    align-items: center !important;
}

/* Full Center (Grid) */
.vc-center-grid {
    display: grid !important;
    place-items: center !important;
}

/* Margin Auto Center */
.vc-center-block {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Transform Center */
.vc-center-transform {
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* ======================
   MARGIN UTILITIES
   ====================== */

/* Auto Margins for Flexbox */
.vc-ml-auto {
    margin-left: auto !important;
}

.vc-mr-auto {
    margin-right: auto !important;
}

.vc-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ======================
   SPACING UTILITIES
   ====================== */

/* Gap Utilities */
.vc-gap-0 {
    gap: 0 !important;
}

.vc-gap-10 {
    gap: 10px !important;
}

.vc-gap-20 {
    gap: 20px !important;
}

.vc-gap-30 {
    gap: 30px !important;
}

.vc-gap-40 {
    gap: 40px !important;
}

.vc-row-gap-20 {
    row-gap: 20px !important;
}

.vc-column-gap-20 {
    column-gap: 20px !important;
}

/* ======================
   SPECIAL LAYOUTS
   ====================== */

/* Equal Height Columns */
.vc-equal-height {
    display: flex !important;
}

.vc-equal-height > .vc_column_container {
    display: flex !important;
}

.vc-equal-height > .vc_column_container > .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Vertical Center in Column */
.vc-column-vertical-center > .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Content Distribution */
.vc-space-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.vc-space-around {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

/* ======================
   RESPONSIVE UTILITIES
   ====================== */

/* Mobile First - Base styles are for mobile */

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .vc-md-d-flex {
        display: flex !important;
    }
    
    .vc-md-justify-center {
        justify-content: center !important;
    }
    
    .vc-md-align-center {
        align-items: center !important;
    }
    
    .vc-md-text-center {
        text-align: center !important;
    }
}

/* Desktop (992px and up) */
@media (min-width: 992px) {
    .vc-lg-d-flex {
        display: flex !important;
    }
    
    .vc-lg-justify-center {
        justify-content: center !important;
    }
    
    .vc-lg-align-center {
        align-items: center !important;
    }
    
    .vc-lg-text-center {
        text-align: center !important;
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .vc-xl-d-flex {
        display: flex !important;
    }
    
    .vc-xl-justify-center {
        justify-content: center !important;
    }
    
    .vc-xl-align-center {
        align-items: center !important;
    }
}

/* ======================
   SPECIFIC ELEMENT CENTERING
   ====================== */

/* Center Button */
.vc-button-center {
    display: flex !important;
    justify-content: center !important;
}

/* Center Icon */
.vc-icon-center .vc_icon_element {
    display: inline-block !important;
    text-align: center !important;
}

/* Center Single Image */
.vc-single-image-center {
    text-align: center !important;
}

.vc-single-image-center img {
    display: inline-block !important;
}

/* Center Testimonial */
.vc-testimonial-center {
    text-align: center !important;
}

.vc-testimonial-center .testimonial-content,
.vc-testimonial-center .testimonial-author {
    text-align: center !important;
}

/* ======================
   QUICK USE CLASSES
   ====================== */

/* Most commonly needed */
.center-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.center-h {
    display: flex !important;
    justify-content: center !important;
}

.center-v {
    display: flex !important;
    align-items: center !important;
}

.flex-column-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ======================
   COMPATIBILITY FIXES
   ====================== */

/* Fix for WP Bakery specific elements */
.vc_row.vc-center-flex > .vc_column_container {
    display: flex !important;
}

.vc_row.vc-center-flex > .vc_column_container > .vc_column-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Fix for nested elements */
.vc-center-flex .wpb_content_element,
.vc-center-flex .wpb_column {
    width: 100% !important;
}