/* Bootstrap 5 rounded corners */
.rounded-4 {
    border-radius: 1rem !important;
}

.rounded-5 {
    border-radius: 2rem !important;
}

/* Custom shadow-hover-popout effect */
/* Initial state: subtle or no shadow, smooth transition */
.shadow-hover-popout {
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover state: larger shadow and slight lift (popout effect) */
.shadow-hover-popout:hover {
    box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.25);
    /* Increased shadow for "pop" */
    transform: translateY(-5px);
    /* Lifts the element slightly up */
}
/* Rounded Bottom utility classes */
.rounded-bottom-1 {
    border-bottom-right-radius: 0.125rem !important;
    border-bottom-left-radius: 0.125rem !important;
}

.rounded-bottom-2 {
    border-bottom-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.rounded-bottom-3 {
    border-bottom-right-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

.rounded-bottom-4 {
    border-bottom-right-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.rounded-bottom-5 {
    border-bottom-right-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}

/* Rounded Top utility classes */
.rounded-top-1 {
    border-top-right-radius: 0.125rem !important;
    border-top-left-radius: 0.125rem !important;
}

.rounded-top-2 {
    border-top-right-radius: 0.25rem !important;
    border-top-left-radius: 0.25rem !important;
}

.rounded-top-3 {
    border-top-right-radius: 0.5rem !important;
    border-top-left-radius: 0.5rem !important;
}

.rounded-top-4 {
    border-top-right-radius: 1rem !important;
    border-top-left-radius: 1rem !important;
}

.rounded-top-5 {
    border-top-right-radius: 2rem !important;
    border-top-left-radius: 2rem !important;
}

/* ── HOVER EFFECTS ──────────────────────────────────────────── */
.hover-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15) !important;
}
.hover-scale {
    transition: transform .25s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}
.hover-opacity {
    transition: opacity .25s ease;
}
.hover-opacity:hover {
    opacity: 0.75;
}

/* ── TRANSITIONS ────────────────────────────────────────────── */
.transition-none { transition: none !important; }
.transition-fast { transition: all .15s ease !important; }
.transition-base { transition: all .3s ease !important; }
.transition-slow { transition: all .6s ease !important; }

/* ── IMAGE UTILITIES ────────────────────────────────────────── */
.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}
.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.img-circle {
    border-radius: 50%;
    object-fit: cover;
}

/* ── CARD HELPER ────────────────────────────────────────────── */
/* Quick card layout without writing custom CSS each time */
.card-clean {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    transition: box-shadow .3s ease, transform .3s ease;
}
.card-clean:hover {
    box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
    transform: translateY(-3px);
}
.card-clean .card-body {
    padding: 1.5rem;
}
.card-clean .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* ── RESPONSIVE UTILITIES ───────────────────────────────────── */
@media (max-width: 767px) {
    .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; }
    .mx-sm-auto  { margin-left: auto !important; margin-right: auto !important; }
    .w-sm-100    { width: 100% !important; }
    .flex-sm-column {
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
    .section-lg  { padding-top: 3rem; padding-bottom: 3rem; }
    .section-xl  { padding-top: 4rem; padding-bottom: 4rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .d-md-none  { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex  { display: flex !important; }
    .w-md-50    { width: 50% !important; }
    .w-md-100   { width: 100% !important; }
}

@media (min-width: 992px) {
    .d-lg-none  { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex  { display: flex !important; }
    .w-lg-50    { width: 50% !important; }
    .w-lg-75    { width: 75% !important; }
}