/* styles.css (vendored) sets html,body { height: 100% }, which — since html has
   no parent — resolves to exactly one viewport height. Being a definite height
   (not min-height), it clips html/body to that regardless of content, which
   breaks position:sticky and the fixed background once a page scrolls past one
   screen height. Restore natural growth; body keeps min-vh-100 for short pages. */
html,
body {
    height: auto;
}

.text-shadow{
    text-shadow: 1px 1px 8px rgba(0,0,0,.8);
}
.shadow-xlg{
    box-shadow: 0 0 2rem rgba(0,0,0,0.8) !important;
}
.shadow-xlg-white{
    box-shadow: 0 0 2rem rgba(255,255,255,0.8) !important;
}
.horizontal-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00000080, transparent);
    margin: 0;
    position: relative;
}

/* Buttons */
.btn {
    border-radius: 2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:active {
    transform: translateY(1px) !important;
}

.btn-primary {
    background: linear-gradient(to bottom, #0d6efd, #2f87ff 45%, #0846cc);
    border: none;
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.45);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(to bottom, #0d6efd, #5a9ffe 45%, #0846cc);
    border: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.6);
    filter: brightness(1.12);
}

.btn-secondary {
    background: linear-gradient(to bottom, #6c757d, #939da5 45%, #494f54);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: linear-gradient(to bottom, #6c757d, #939da5 45%, #494f54);
    border: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    filter: brightness(1.15);
}

.btn-outline-light {
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 10px 15px;
}
.btn-outline-light:hover, .btn-outline-light:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
}

.btn-outline-primary {
    border: 1.5px solid #0d6efd;
    background: rgba(13, 110, 253, 0.08);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: rgba(13, 110, 253, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
}

.btn-outline-secondary {
    border: 1.5px solid rgba(108, 117, 125, 0.7);
    background: rgba(108, 117, 125, 0.08);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: rgba(108, 117, 125, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(108, 117, 125, 0.25);
}

.btn-warning {
    background: linear-gradient(to bottom, #ffc107, #ffe066 45%, #cc7a00);
    border: none;
    color: #1a1a1a;
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.45);
}
.btn-warning:hover, .btn-warning:focus {
    background: linear-gradient(to bottom, #ffc107, #ffe066 45%, #cc7a00);
    border: none;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.6);
    filter: brightness(1.08);
}

/* Toast bubbles */
.toast-bubble {
    --bs-toast-bg: rgba(30, 30, 40, 0.55);
    --bs-toast-border-color: rgba(255,255,255,0.2);
    --bs-toast-color: #fff;
    border-radius: 50rem !important;
    min-width: 260px;
    max-width: 360px;
    background-color: var(--bs-toast-bg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--bs-toast-color) !important;
    border: 1px solid var(--bs-toast-border-color) !important;
    box-shadow: 0 0 32px rgba(0,0,0,0.45);
}
.toast-bubble .toast-body { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
.toast-bubble .btn-close { margin-right: 1.25rem !important; filter: invert(1) opacity(0.8); }

.toast-bubble--success  {
    --bs-toast-bg: rgba(13,  202, 240, 0.55);
    --bs-toast-border-color: rgba(13,  202, 240, 0.8);
    box-shadow: 0 0 32px rgba(13,  202, 240, 0.8);
}
.toast-bubble--danger   {
    --bs-toast-bg: rgba(220, 53,  69,  0.65);
    --bs-toast-border-color: rgba(220, 53,  69,  0.8);
    box-shadow: 0 0 32px rgba(220, 53,  69,  0.8);
}
.toast-bubble--warning  {
    --bs-toast-bg: rgba(255, 193,  7,  0.7);
    --bs-toast-border-color: rgba(255, 193,  7,  0.9);
    box-shadow: 0 0 32px rgba(255, 193,  7,  0.9);
}
.toast-bubble--info     {
    --bs-toast-bg: rgba(13,  202, 240, 0.55);
    --bs-toast-border-color: rgba(13,  202, 240, 0.8);
    box-shadow: 0 0 32px rgba(13,  202, 240, 0.8);
}
.toast-bubble--secondary{
    --bs-toast-bg: rgba(108, 117, 125, 0.6);
    --bs-toast-border-color: rgba(108, 117, 125, 0.8);
    box-shadow: 0 0 32px rgba(108, 117, 125, 0.8);
}

@keyframes bubble-pop {
    0%   { transform: translate(0,     0)     scale(1);   opacity: 1; }
    99%  { transform: translate(-50px, -80px) scale(1.4); opacity: 1; }
    100% { transform: translate(-50px, -80px) scale(1.4); opacity: 0; }
}
.toast-bubble.popping {
    animation: bubble-pop 0.7s ease-in forwards;
    pointer-events: none;
}