/*
  ==============================================================
        TAILWIND SHADOWS
  ==============================================================
*/


.tw-shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.08);
}

.tw-shadow {
    box-shadow: 0 2px 4px rgba(var(--tw-shadow-color), 0.08), 0 1px 2px rgba(var(--tw-shadow-color), 0.06);
}

.tw-shadow-md {
    box-shadow: 0 4px 8px rgba(var(--tw-shadow-color), 0.10), 0 2px 4px rgba(var(--tw-shadow-color), 0.06), 0 0 0 1px rgba(0,0,0,0.02);
    ;
}

.tw-shadow-lg {
    box-shadow: 0 10px 20px rgba(var(--tw-shadow-color), 0.12), 0 3px 6px rgba(var(--tw-shadow-color), 0.08);
}

.tw-shadow-xl {
    box-shadow: 0 20px 40px rgba(var(--tw-shadow-color), 0.15), 0 5px 10px rgba(var(--tw-shadow-color), 0.08);
}

.tw-shadow-2xl {
    box-shadow: 0 30px 60px rgba(var(--tw-shadow-color), 0.18);
}




/* -------------------------------------------------------------------
   RESPONSIVE SHADOW (TAILWIND-STYLE)
--------------------------------------------------------------------- */

/* sm (≥576px) */
@media (min-width: 576px) {

    .sm\:tw-shadow-sm {
        box-shadow: 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.08);
    }

    .sm\:tw-shadow {
        box-shadow: 0 2px 4px rgba(var(--tw-shadow-color), 0.08), 0 1px 2px rgba(var(--tw-shadow-color), 0.06);
    }

    .sm\:tw-shadow-md {
        box-shadow: 0 4px 8px rgba(var(--tw-shadow-color), 0.10), 0 2px 4px rgba(var(--tw-shadow-color), 0.06), 0 0 0 1px rgba(0,0,0,0.02);
        ;
    }

    .sm\:tw-shadow-lg {
        box-shadow: 0 10px 20px rgba(var(--tw-shadow-color), 0.12), 0 3px 6px rgba(var(--tw-shadow-color), 0.08);
    }

    .sm\:tw-shadow-xl {
        box-shadow: 0 20px 40px rgba(var(--tw-shadow-color), 0.15), 0 5px 10px rgba(var(--tw-shadow-color), 0.08);
    }

    .sm\:tw-shadow-2xl {
        box-shadow: 0 30px 60px rgba(var(--tw-shadow-color), 0.18);
    }
}

/* md (≥768px) */
@media (min-width: 768px) {
    .md\:tw-shadow-sm {
        box-shadow: 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.08);
    }

    .md\:tw-shadow {
        box-shadow: 0 2px 4px rgba(var(--tw-shadow-color), 0.08), 0 1px 2px rgba(var(--tw-shadow-color), 0.06);
    }

    .md\:tw-shadow-md {
        box-shadow: 0 4px 8px rgba(var(--tw-shadow-color), 0.10), 0 2px 4px rgba(var(--tw-shadow-color), 0.06), 0 0 0 1px rgba(0,0,0,0.02);
        ;
    }

    .md\:tw-shadow-lg {
        box-shadow: 0 10px 20px rgba(var(--tw-shadow-color), 0.12), 0 3px 6px rgba(var(--tw-shadow-color), 0.08);
    }

    .md\:tw-shadow-xl {
        box-shadow: 0 20px 40px rgba(var(--tw-shadow-color), 0.15), 0 5px 10px rgba(var(--tw-shadow-color), 0.08);
    }

    .md\:tw-shadow-2xl {
        box-shadow: 0 30px 60px rgba(var(--tw-shadow-color), 0.18);
    }
}


/*
    ------------------------------------------------------
    SHADOW HOVER
    ------------------------------------------------------
*/

.hover\:tw-shadow-sm:hover {
    box-shadow: 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.08);
}

.hover\:tw-shadow:hover {
    box-shadow: 0 2px 4px rgba(var(--tw-shadow-color), 0.08), 0 1px 2px rgba(var(--tw-shadow-color), 0.06);
}

.hover\:tw-shadow-md:hover {
    box-shadow: 0 4px 8px rgba(var(--tw-shadow-color), 0.10), 0 2px 4px rgba(var(--tw-shadow-color), 0.06), 0 0 0 1px rgba(0,0,0,0.02);
    ;
}

.hover\:tw-shadow-lg:hover {
    box-shadow: 0 10px 20px rgba(var(--tw-shadow-color), 0.12), 0 3px 6px rgba(var(--tw-shadow-color), 0.08);
}

.hover\:tw-shadow-xl:hover {
    box-shadow: 0 20px 40px rgba(var(--tw-shadow-color), 0.15), 0 5px 10px rgba(var(--tw-shadow-color), 0.08);
}

.hover\:tw-shadow-2xl:hover {
    box-shadow: 0 30px 60px rgba(var(--tw-shadow-color), 0.18);
}

.hover\:shadow-inner:hover {
    box-shadow: inset 0 2px 4px 0 rgba(var(--tw-shadow-color), 0.05);
}

.hover\:shadow-none:hover {
    box-shadow: 0 0 #0000;
}


/*
    ------------------------------------------------------
    SHADOW FOCUS
    ------------------------------------------------------
*/

.focus\:tw-shadow-sm:focus {
    box-shadow: 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.08);
}

.focus\:tw-shadow:focus {
    box-shadow: 0 2px 4px rgba(var(--tw-shadow-color), 0.08), 0 1px 2px rgba(var(--tw-shadow-color), 0.06);
}

.focus\:tw-shadow-md:focus {
    box-shadow: 0 4px 8px rgba(var(--tw-shadow-color), 0.10), 0 2px 4px rgba(var(--tw-shadow-color), 0.06), 0 0 0 1px rgba(0,0,0,0.02);
    ;
}

.focus\:tw-shadow-lg:focus {
    box-shadow: 0 10px 20px rgba(var(--tw-shadow-color), 0.12), 0 3px 6px rgba(var(--tw-shadow-color), 0.08);
}

.focus\:tw-shadow-xl:focus {
    box-shadow: 0 20px 40px rgba(var(--tw-shadow-color), 0.15), 0 5px 10px rgba(var(--tw-shadow-color), 0.08);
}

.focus\:tw-shadow-2xl:focus {
    box-shadow: 0 30px 60px rgba(var(--tw-shadow-color), 0.18);
}

.focus\:shadow-inner:focus {
    box-shadow: inset 0 2px 4px 0 rgba(var(--tw-shadow-color), 0.05);
}

.focus\:shadow-none:focus {
    box-shadow: 0 0 #0000;
}


/* ------------------------------------------------------------------- 
 TRANSITION SHADOWS 
--------------------------------------------------------------------- */
.transition-shadow {
    transition: box-shadow 0.15s ease-in-out;
}