/**
 * ===============================================
 * DistriHub Website
 * Main Stylesheet
 * Version : 1.0.0
 * ===============================================
 */

/* ==========================================
   SETTINGS
========================================== */

@import url("./00-settings/variables.css");

/* ==========================================
   BASE
========================================== */

@import url("./01-base/reset.css");
@import url("./01-base/typography.css");

/* ==========================================
   LAYOUT
========================================== */

@import url("./02-layout/container.css");

/* ==========================================
   COMPONENTS
========================================== */

@import url("./03-components/button.css");
@import url("./03-components/card.css");
@import url("./03-components/badge.css");

/* ==========================================
   SECTIONS
========================================== */

@import url("./04-sections/navbar.css");
@import url("./04-sections/hero.css");
@import url("./04-sections/quotes.css");
@import url("./04-sections/why-distrihub.css");
@import url("./04-sections/modules.css");
@import url("./04-sections/action.css");
@import url("./04-sections/pricing.css");
@import url("./04-sections/faq.css");
@import url("./04-sections/cta.css");
@import url("./04-sections/footer.css");

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

/* @import url("./05-utilities/helpers.css"); */

/* ==========================================
   DISTRIHUB COMING SOON OVERLAY
========================================== */

.coming-soon-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* ==========================================
   BACKGROUND BLUR + DIM
========================================== */

.coming-soon-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(10, 25, 55, 0.68);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ==========================================
   MODAL
========================================== */

.coming-soon-modal {
    position: relative;
    z-index: 2;

    width: min(1100px, 94vw);
    max-height: 90vh;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 24px;

    overflow: visible;

    box-shadow:
        0 30px 80px rgba(0, 20, 60, 0.30),
        0 10px 30px rgba(0, 20, 60, 0.18);

    animation: comingSoonModalIn 0.45s ease-out;
}


/* ==========================================
   COMING SOON IMAGE
========================================== */

.coming-soon-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 90vh;

    object-fit: contain;

    border-radius: 24px;
}


/* ==========================================
   CLOSE BUTTON
========================================== */

.coming-soon-close {
    position: absolute;

    top: -16px;
    right: -16px;

    z-index: 5;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: #ffffff;

    color: #132a55;

    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 20, 60, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.coming-soon-close:hover {
    transform: scale(1.08);

    box-shadow:
        0 10px 30px rgba(0, 20, 60, 0.28);
}


/* ==========================================
   MODAL ANIMATION
========================================== */

@keyframes comingSoonModalIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .coming-soon-overlay {
        padding: 18px;
    }

    .coming-soon-modal {
        width: 96vw;
        max-height: 88vh;
    }

    .coming-soon-image {
        max-height: 88vh;
        border-radius: 18px;
    }

    .coming-soon-close {
        top: -12px;
        right: -8px;

        width: 40px;
        height: 40px;

        font-size: 26px;
    }

}