@import url('desktop.css');
.desktop-modal {
    z-index: 1000;
    flex: 0 1 100%
}

.desktop-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
    flex: inherit
}


    .desktop-popup-modal div {
        flex: inherit
    }

.desktop-button {
    display: inline-block;
    color: #0099cc; /* blue text color */
    background: #ffffff;
    border-radius: 10px;
    border: none;
    font-weight: 800;
    font-family: inherit;
    font-size: var(--fs-large);
    line-height: 1;
    padding: 8px 30px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    text-align: center;
    user-select: none;

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


    min-height: 48px;
    height: fit-content;
    white-space: nowrap; /* keeps text in one line */
    /* Key settings for fitting parent */
    width: fit-content; /* makes it hug content by default */
    max-width: 100%; /* prevents overflowing the parent */
    min-width: 120px; /* ← THIS allows shrinking below content size */
    flex-shrink: 1; /* allows shrinking (default is 1, but explicit is safer) */
    /* Optional: nice ellipsis when text is too long */
    overflow: hidden;
    text-overflow: ellipsis;

}

    .desktop-button:active {
        transform: translateY(1px) scale(0.995);
    }

    .desktop-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .desktop-button:hover {
        opacity: 0.8;
    }
.desktop-button-dark-blue {
    color: white;
    background-color: darkblue;
}

.desktop-button-light-blue {
    color: white;
    background-color: #0099cc;
}

.desktop-button-yellow {
    color: #0099cc;
    background-color: yellow;
}

.dark-blue{
    color: darkblue;
}

.light-blue {
    color: #0099cc;
}

.desktop-font-xsmall {
    font-size: var(--fs-xsmall);
    font-weight: 500;
}
.desktop-font-small {
    font-size: var(--fs-small);
    font-weight: 500;
}
.desktop-font-base {
    font-size: var(--fs-base);
    font-weight: 500;
}
.desktop-font-medium {
    font-size: var(--fs-medium);
    font-weight: 500;
}
.desktop-font-large {
    font-size: var(--fs-large);
    font-weight: 1000;
}
.desktop-font-xlarge {
    font-size: var(--fs-xlarge);
    font-weight: 1000;
}
.desktop-font-xxlarge {
    font-size: var(--fs-xxlarge);
    font-weight: 1000;
}