/* =========================
   RESET
========================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.d-none       { display: none !important; }
.d-flex       { display: flex !important; align-items: center; }
.d-inline-flex{ display: inline-flex !important; }
.d-grid       { display: grid !important; }
.active       { display: block !important; }

/* =========================
   FLEX DIRECTION
========================= */

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

/* =========================
   FLEX GROW / SHRINK
========================= */

.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }

.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* =========================
   FLEX WRAP
========================= */

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

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

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

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

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

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

.align-content-start    { align-content: flex-start !important; }
.align-content-end      { align-content: flex-end !important; }
.align-content-center   { align-content: center !important; }
.align-content-between  { align-content: space-between !important; }
.align-content-around   { align-content: space-around !important; }
.align-content-stretch  { align-content: stretch !important; }

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

.align-self-auto      { align-self: auto !important; }
.align-self-start     { align-self: flex-start !important; }
.align-self-end       { align-self: flex-end !important; }
.align-self-center    { align-self: center !important; }
.align-self-baseline  { align-self: baseline !important; }
.align-self-stretch   { align-self: stretch !important; }

/* =========================
   TEXT UTILITIES
========================= */

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.text-nowrap,
.white-space-nowrap,
.white-space-nowrap > button > span {
    white-space: nowrap !important;
}

/* =========================
   FLOAT
========================= */

.float-left  { float: left !important; }
.float-right { float: right !important; }
.float-clear { clear: both !important; }

/* =========================
   POSITION
========================= */

.position-static   { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }
.position-unset    { position: unset !important; }

.position-absolute-align-middle {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}


.position-absolute-align-center {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.left-0 {  left: 0 !important; } 
.right-0 {  right: 0 !important; }
.top-0 {  top: 0 !important; }
.bottom-0 {  bottom: 0 !important; }  

/* =========================
   MISC
========================= */

.line-height-0     { line-height: 0; }
.filter-color-white { filter: brightness(0) invert(1); }

/* =========================
   WIDTH / HEIGHT
========================= */

.w-auto { width: auto !important; }
.w-25   { width: 25% !important; }
.w-50   { width: 50% !important; }
.w-70   { width: 70% !important; }
.w-75   { width: 75% !important; }
.w-80   { width: 80% !important; } /* fixed */
.w-100  { width: 100% !important; }

.h-100  { height: 100% !important; }


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

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

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

.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

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

.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }


/* =========================
   FLOAT
========================= */

.float-left { float: left !important; }
.float-right { float: right !important; }
.float-clear { clear: both !important; }

/* =========================
   POSITION
========================= */

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.position-unset { position: unset !important; }

/* =========================
   OVERFLOW + CURSOR
========================= */

.overflow-hidden { overflow: hidden !important; }
.cursor-pointer { cursor: pointer; }

/* =========================
   MISC
========================= */

.line-height-0 { line-height: 0; }
.filter-color-white { filter: brightness(0) invert(1); }

/* =========================
   GRID (DESKTOP)
========================= */

.grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* =========================
   BORDERS
========================= */

.b-0 { border: 0; }

.b-t-0 { border-top: 0; }
.b-r-0 { border-right: 0; }
.b-b-0 { border-bottom: 0; }
.b-l-0 { border-left: 0; }

.b-x-0 {
    border-left: 0;
    border-right: 0;
}

.b-y-0 {
    border-top: 0;
    border-bottom: 0;
}

/* =========================
   MARGINS
========================= */

.m-auto { margin: auto !important; }

.m-0 { margin: 0 !important; }

.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }

/* =========================
   HORIZONTAL GAP SYSTEM (THEME)
========================= */
.gap-x-small     { gap: var(--wp--preset--spacing--x-small) !important; }
.gap-small       { gap: var(--wp--preset--spacing--small) !important; }
.gap-regular     { gap: var(--wp--preset--spacing--regular) !important; }
.gap-medium      { gap: var(--wp--preset--spacing--medium) !important; }
.gap-large       { gap: var(--wp--preset--spacing--large) !important; }
.gap-larger      { gap: var(--wp--preset--spacing--larger) !important; }
.gap-xl          { gap: var(--wp--preset--spacing--xl) !important; }
.gap-2xl         { gap: var(--wp--preset--spacing--xx-large) !important; }
.gap-3xl         { gap: var(--wp--preset--spacing--xxx-large) !important; }
.gap-4xl         { gap: var(--wp--preset--spacing--xxxx-large) !important; }
.gap-5xl         { gap: var(--wp--preset--spacing--xxxxxl-large) !important; }

/* =========================
   ACTIVE STATE
========================= */

.active {
    display: block !important;
}

/* =========================================================
   ORDER UTILITIES
========================================================= */

.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }

/* =========================
   MOBILE (<= 767px)
========================= */

@media (max-width: 767px) {

    .hidden-on-mobile {
        display: none !important;
    }

    /* WIDTH */
    .m-w-45 { min-width: 45% !important; }
    .m-w-50 { min-width: 50% !important; }
    .m-w-90 { min-width: 90% !important; }

    .m-w-100,
    .m-w-100 .wp-block-button {
        min-width: 100% !important;
    }

    .m-w-auto {
        width: auto !important;
        flex-basis: auto !important;
    }

    .m-child-w-100 > * {
        max-width: 100%;
    }

    /* GRID */
    .m-grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important;}
    .m-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
    .m-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .m-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .m-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .m-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .m-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .m-grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }

    /* FLEX */
    .m-flex-wrap { flex-wrap: wrap !important; }
    .m-row-reverse { flex-direction: row-reverse !important; }
    .m-col-reverse { flex-direction: column-reverse !important; }

    /* =========================
    FLEX DIRECTION
    ========================= */

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

    /* =========================
    FLEX GROW / SHRINK
    ========================= */

    .m-flex-grow-0 { flex-grow: 0 !important; }
    .m-flex-grow-1 { flex-grow: 1 !important; }

    .m-flex-shrink-0 { flex-shrink: 0 !important; }
    .m-flex-shrink-1 { flex-shrink: 1 !important; }

    /* =========================
    FLEX WRAP
    ========================= */

    .m-flex-wrap         { flex-wrap: wrap !important; }
    .m-flex-nowrap       { flex-wrap: nowrap !important; }
    .m-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

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

    .m-justify-start   { justify-content: flex-start !important; }
    .m-justify-end     { justify-content: flex-end !important; }
    .m-justify-center  { justify-content: center !important; }
    .m-justify-between { justify-content: space-between !important; }
    .m-justify-around  { justify-content: space-around !important; }
    .m-justify-evenly  { justify-content: space-evenly !important; }

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

    .m-align-start    { align-items: flex-start !important; }
    .m-align-end      { align-items: flex-end !important; }
    .m-align-center   { align-items: center !important; }
    .m-align-baseline { align-items: baseline !important; }
    .m-align-stretch  { align-items: stretch !important; }

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

    .m-align-content-start    { align-content: flex-start !important; }
    .m-align-content-end      { align-content: flex-end !important; }
    .m-align-content-center   { align-content: center !important; }
    .m-align-content-between  { align-content: space-between !important; }
    .m-align-content-around   { align-content: space-around !important; }
    .m-align-content-stretch  { align-content: stretch !important; }

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

    .m-align-self-auto      { align-self: auto !important; }
    .m-align-self-start     { align-self: flex-start !important; }
    .m-align-self-end       { align-self: flex-end !important; }
    .m-align-self-center    { align-self: center !important; }
    .m-align-self-baseline  { align-self: baseline !important; }
    .m-align-self-stretch   { align-self: stretch !important; }

    /* TEXT */
    .m-text-align-left { text-align: left !important; }
    .m-text-align-center { text-align: center !important; }
    .m-text-left { text-align: left !important; }
    .m-text-center { text-align: center !important; }
    .m-text-right { text-align: left !important; }

    /* BORDER */
    .m-b-0 { border: 0 !important; }

    .m-b-t-0 { border-top: 0 !important; }
    .m-b-r-0 { border-right: 0 !important; }
    .m-b-b-0 { border-bottom: 0 !important; }
    .m-b-l-0 { border-left: 0 !important; }

    .m-b-x-0 {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .m-b-y-0 {
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    /* PADDING */
    .m-pl-0 { padding-left: 0 !important; }
    .m-pr-0 { padding-right: 0 !important; }
    .m-pt-0 { padding-top: 0 !important; }
    .m-pb-0 { padding-bottom: 0 !important; }

    /* MARGIN */
    .m-ml-0 { margin-left: 0 !important; }
    .m-mr-0 { margin-right: 0 !important; }
    .m-mt-0 { margin-top: 0 !important; }
    .m-mb-0 { margin-bottom: 0 !important; }
    .m-mb-2xl {margin-bottom: var(--wp--preset--spacing--xx-large) !important;}

    /* BORDER RADIUS */
    .m-br-0 { border-radius: 0 !important; }
    .m-br-4 { border-radius: 4px !important; }
    .m-br-8 { border-radius: 8px !important; }
    .m-br-12 { border-radius: 12px !important; }
    .m-br-16 { border-radius: 16px !important; }
    .m-br-20 { border-radius: 20px !important; }
	
    .m-br-tl-0 { border-top-right-radius: 0 !important; }
    .m-br-tl-4 { border-top-right-radius: 4px !important; }
    .m-br-tl-8 { border-top-right-radius: 8px !important; }
    .m-br-tl-12 { border-top-right-radius: 12px !important; }
    .m-br-tl-16 { border-top-right-radius: 16px !important; }
    .m-br-tl-20 { border-top-right-radius: 20px !important; }
	
    .m-br-tr-0 { border-top-right-radius: 0 !important; }
    .m-br-tr-4 { border-top-right-radius: 4px !important; }
    .m-br-tr-8 { border-top-right-radius: 8px !important; }
    .m-br-tr-12 { border-top-right-radius: 12px !important; }
    .m-br-tr-16 { border-top-right-radius: 16px !important; }
    .m-br-tr-20 { border-top-right-radius: 20px !important; }
	
    .m-br-bl-0 { border-bottom-left-radius: 0 !important; }
    .m-br-bl-4 { border-bottom-left-radius: 4px !important; }
    .m-br-bl-8 { border-bottom-left-radius: 8px !important; }
    .m-br-bl-12 { border-bottom-left-radius: 12px !important; }
    .m-br-bl-16 { border-bottom-left-radius: 16px !important; }
    .m-br-bl-20 { border-bottom-left-radius: 20px !important; }
	
    .m-br-br-0 { border-bottom-right-radius: 0 !important; }
    .m-br-br-4 { border-bottom-right-radius: 4px !important; }
    .m-br-br-8 { border-bottom-right-radius: 8px !important; }
    .m-br-br-12 { border-bottom-right-radius: 12px !important; }
    .m-br-br-16 { border-bottom-right-radius: 16px !important; }
    .m-br-br-20 { border-bottom-right-radius: 20px !important; }

    /* ORDER */
    .m-order-0 { order: 0; }
    .m-order-1 { order: 1; }
    .m-order-2 { order: 2; }
    .m-order-3 { order: 3; }
    .m-order-4 { order: 4; }

    /* OVERFLOW */
    .m-overflow-x-scroll {
        overflow-x: auto !important;
    }

    .m-overflow-scroll-hidden {
        overflow: hidden !important;
    }
}

/* =========================
   TABLET (768px - 1024px)
========================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .hidden-on-tablet {
        display: none !important;
    }
}

/* =========================
   DESKTOP (1025px+)
========================= */

@media (min-width: 1025px) {

    .hidden-on-desktop {
        display: none !important;
    }
}