/*
    Main app class
    Max wid is 540px
    Maintains aspect ratio of 4:3
*/ 
.ab-app-canvas{ width:540px; max-width:100%; aspect-ratio: 4 / 3; background-color: rgba(var(--bs-br-main-light-rgb), 0.3); }
.ab-app-badge::after{ content: "Interactive";  }
.ab-cont-card{
    position: relative; /* Required for absolute positioning */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.5rem;
    border: 1px solid #00000011;
}
.ab-cont-badge::after{
    position: absolute;
    top: 0;
    right: 0;
    background: var(--bs-br-accent-dark); /* Bootstrap red */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    
    /* Center the badge over the top-right corner */
    transform: translate(50%, -50%);
}
.ab-cont-badge-spacer{ margin-top: 1.5rem;}

.ab-w-600{ width: 600px; max-width: 100%; }
.ab-w-400{ width: 400px; max-width: 100%; }
.ab-w-300{ width: 300px; max-width: 100%; }
.ab-w-32-h-32{ width:32px; height:32px; }

.ab-fs-5{ font-size: 1.25rem !important;}
.ab-mb-3{ margin-bottom: 1rem !important; }
.ab-me-1{ margin-right: 0.25rem !important; }
.ab-me-3{ margin-right: 1rem !important; }
.ab-p-3{ padding: 1.5rem !important; }

.ab-hero
{
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-br-main) 60%, black), color-mix(in srgb, var(--bs-br-main) 30%, black));
    color: color-mix(in srgb, var(--bs-br-main) 7%, white);
    padding: 4rem 2rem;
    border-radius: 12px;
    text-align: center;
}