/* =========================================================
   MODERN BASIS DIALOG
   ========================================================= */

.modern-basis-dialog {
    width: min(760px, 92vw) !important;
    max-width: 92vw !important;

    border: none !important;
    border-radius: 20px !important;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
}


/* Remove unnecessary PrimeFaces title bar */
.modern-basis-dialog .ui-dialog-titlebar {
    border: none !important;
    background: #ffffff !important;
}


/* Dialog content */
.modern-basis-dialog .ui-dialog-content {
    padding: clamp(18px, 4vw, 32px) !important;

    background: #f8fafc !important;

    overflow-x: hidden;
}


/* =========================================================
   CARD CONTAINER
   ========================================================= */

.basis-container {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(15px, 3vw, 25px);

    width: 100%;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.basis-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 300px;

    box-sizing: border-box;

    padding: clamp(20px, 4vw, 30px);

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    text-align: center;

    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.06);

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


/* Hover */
.basis-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);

    border-color: #cbd5e1;
}


/* =========================================================
   ICON
   ========================================================= */

.basis-icon {
    width: clamp(55px, 10vw, 70px);
    height: clamp(55px, 10vw, 70px);

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

    margin-bottom: 18px;

    border-radius: 50%;

    font-size: clamp(22px, 5vw, 30px);
}


.urgent-icon {
    background: #fff1f2;
    color: #dc2626;
}


.normal-icon {
    background: #eff6ff;
    color: #2563eb;
}


/* =========================================================
   TITLE
   ========================================================= */

.basis-title {
    margin: 0;

    font-size: clamp(19px, 3vw, 25px);

    line-height: 1.25;

    font-weight: 700;

    color: #172554;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.basis-description {
    max-width: 310px;

    margin: 14px auto 20px;

    font-size: clamp(13px, 2vw, 15px);

    line-height: 1.6;

    color: #64748b;
}


/* =========================================================
   FOOTER / BUTTON AREA
   ========================================================= */

.basis-footer {
    width: 100%;

    margin-top: auto;

    display: flex;

    justify-content: center;
}


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

.basis-button {
    width: min(150px, 100%) !important;

    height: 42px !important;

    border: none !important;

    border-radius: 9px !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    background-image: none !important;

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


/* Urgent */
.urgent-button {
    background: #dc2626 !important;
    color: #ffffff !important;
}


.urgent-button:hover {
    background: #b91c1c !important;

    box-shadow: 0 6px 15px rgba(220, 38, 38, 0.25);
}


/* Normal */
.normal-button {
    background: #1123fb !important;
    color: #ffffff !important;
}


.normal-button:hover {
    background: #0b1ed6 !important;

    box-shadow: 0 6px 15px rgba(17, 35, 251, 0.25);
}


.basis-button:active {
    transform: scale(0.98);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 650px) {

    .modern-basis-dialog {
        width: 92vw !important;
        max-width: 92vw !important;
    }

    .basis-container {
        gap: 15px;
    }

    .basis-card {
        min-height: 280px;

        padding: 20px 15px;
    }

}


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

@media (max-width: 480px) {

    .modern-basis-dialog {
        width: 94vw !important;
        max-width: 94vw !important;

        border-radius: 15px !important;
    }


    .modern-basis-dialog .ui-dialog-content {
        padding: 15px !important;
    }


    /* One card per row */
    .basis-container {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .basis-card {
        min-height: 250px;

        padding: 22px 18px;
    }


    .basis-icon {
        margin-bottom: 12px;
    }


    .basis-description {
        margin-top: 10px;
        margin-bottom: 18px;
    }


    .basis-button {
        width: 100% !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 350px) {

    .modern-basis-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
    }


    .modern-basis-dialog .ui-dialog-content {
        padding: 10px !important;
    }


    .basis-card {
        padding: 18px 12px;
    }


    .basis-title {
        font-size: 18px;
    }


    .basis-description {
        font-size: 12px;
    }

}