:root {
    --overlay-width: 50%;
}

/* Background Images */
.bg-img-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Overlays */
.overlay-wrapper {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
}

.overlay-cover::before {
    background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity));
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
}

.overlay {
    background-color: rgba(0, 0, 0, var(--overlay-opacity));
    max-width: var(--overlay-width);
    padding: 3rem 1.5rem;
    position: absolute;
    z-index: 20;
}

@media (max-width: 768px) {
    .overlay { max-width: 100%; }
}
  
/* Overlay Opacity */
.overlay-0 { --overlay-opacity: 0; }
.overlay-10 { --overlay-opacity: 0.1; }
.overlay-20 { --overlay-opacity: 0.2; }
.overlay-30 { --overlay-opacity: 0.3; }
.overlay-40 { --overlay-opacity: 0.4; }
.overlay-50 { --overlay-opacity: 0.5; }
.overlay-60 { --overlay-opacity: 0.6; }
.overlay-70 { --overlay-opacity: 0.7; }
.overlay-80 { --overlay-opacity: 0.8; }
.overlay-90 { --overlay-opacity: 0.9; }
.overlay-100 { --overlay-opacity: 1.0; }

/* Overlay Colors */
.overlay-black { --overlay-background-color: #000; --overlay-background-color-rgb: 0 0 0; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-blue { --overlay-background-color: #0061F2; --overlay-background-color-rgb: 0 97 242; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-cyan { --overlay-background-color: #00CFD5; --overlay-background-color-rgb: 0 207 213; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-green { --overlay-background-color: #00AC69; --overlay-background-color-rgb: 0 67 41; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-indigo { --overlay-background-color: #5800E8; --overlay-background-color-rgb: 88 0 232; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-none { --overlay-background-color: transparent; --overlay-background-color-rgb: 0 0 0; background-color: rgba(var(--overlay-background-color-rgb) / 0); }
.overlay-orange { --overlay-background-color: #F76400; --overlay-background-color-rgb: 247 100 0; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-pink { --overlay-background-color: #E30059; --overlay-background-color-rgb: 227 0 89; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-purple { --overlay-background-color: #6900C7; --overlay-background-color-rgb: 105 0 199; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-red { --overlay-background-color: #E81500; --overlay-background-color-rgb: 232 21 0; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-teal { --overlay-background-color: #00BA94; --overlay-background-color-rgb: 0 186 148; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-white { --overlay-background-color: #FFF; --overlay-background-color-rgb: 255 255 255; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }
.overlay-yellow { --overlay-background-color: #F4A100; --overlay-background-color-rgb: 244 161 0; background-color: rgba(var(--overlay-background-color-rgb) / var(--overlay-opacity)); }

.overlay-wrapper .overlay.overlay-top-left { top: 0; left: 0; }
.overlay-wrapper .overlay.overlay-top-center { top: 0; left: 50%; transform: translateX(-50%); }
.overlay-wrapper .overlay.overlay-top-right { top: 0; right: 0; }
.overlay-wrapper .overlay.overlay-middle-left { top: 50%; left: 0; transform: translateY(-50%); }
.overlay-wrapper .overlay.overlay-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.overlay-wrapper .overlay.overlay-middle-right { top: 50%; right: 0; transform: translateY(-50%); }
.overlay-wrapper .overlay.overlay-bottom-left { bottom: 0; left: 0; }
.overlay-wrapper .overlay.overlay-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.overlay-wrapper .overlay.overlay-bottom-right { bottom: 0; right: 0; }

/* Borders */
.border-rounded-0 { border-radius: 0 !important; }
.border-rounded-1 { border-radius: 0.25rem !important; }
.border-rounded-2 { border-radius: 0.375rem !important; }
.border-rounded-3 { border-radius: 0.5rem !important; }
.border-rounded-4 { border-radius: 1rem !important; }
.border-rounded-5 { border-radius: 2rem !important; }

output {
    position: absolute;
    background-image: linear-gradient(#444444, #999999);
    width: 40px;
    height: 30px;
    text-align: center;
    color: white;
    border-radius: 10px;
    display: inline-block;
    font: bold 15px/30px Georgia;
    bottom: 175%;
    left: 0;
}

    output:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 10px solid #999999;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        margin-top: -1px;
    }

/* Widget Editor */
.widget-delete-button { cursor: pointer; }

/* Placehodlers */
/* ---- Variables ---- */
:root {
    --placeholder-bg: #e9ecef;
    --placeholder-bg-dark: #d6d8db;
    --placeholder-foreground: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    --placeholder-radius: 6px;
    --placeholder-animation-duration: 1.6s;
    --placeholder-wave-accent: rgba(255,255,255,0.35);
    --placeholder-glow-accent: rgba(255,255,255,0.18);
}

/* ---- Base placeholder ---- */
.placeholder {
    display: inline-block; /* inline for text use; can be block */
    background: var(--placeholder-bg);
    border-radius: var(--placeholder-radius);
    color: transparent; /* hide text if any */
    pointer-events: none;
    user-select: none;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

/* sizing helpers (similar to .w-25 etc) */
.placeholder.w-100 {
    width: 100%;
}

.placeholder.w-75 {
    width: 75%;
}

.placeholder.w-50 {
    width: 50%;
}

.placeholder.w-25 {
    width: 25%;
}

.placeholder.h-1 {
    height: 0.75rem;
}
/* small text line */
.placeholder.h-2 {
    height: 1rem;
}

.placeholder.h-3 {
    height: 1.25rem;
}
/* default paragraph line */
.placeholder.h-4 {
    height: 1.5rem;
}
/* larger block */
.placeholder.h-8 {
    height: 3rem;
}
/* image-ish */

/* shape helpers */
.placeholder.rounded {
    border-radius: 12px;
}

.placeholder.pill {
    border-radius: 9999px;
    height: 1.5rem;
    display: inline-block;
    padding: 0 0.75rem;
}

.placeholder-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
}

/* text-line block helper: display several lines stacked */
.placeholder-lines {
    display: block;
    width: 100%;
}

.placeholder-lines > .placeholder {
    display: block;
    margin-bottom: 0.5rem;
}

.placeholder-lines > .placeholder:last-child {
    margin-bottom: 0;
}

/* ---- Animations ---- */
@keyframes placeholder-wave {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes placeholder-glow {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* wave: moving light stripe */
.placeholder-wave::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, var(--placeholder-wave-accent) 40%, var(--placeholder-wave-accent) 60%, rgba(255,255,255,0) 100% );
    transform: translateX(-100%);
    will-change: transform;
    animation: placeholder-wave var(--placeholder-animation-duration) linear infinite;
}

/* glow: subtle pulsing */
.placeholder-glow {
    animation: placeholder-glow var(--placeholder-animation-duration) ease-in-out infinite;
}

.placeholder-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--placeholder-glow-accent) 50%, transparent 100%);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* dark variation */
.placeholder-dark {
    background: var(--placeholder-bg-dark);
}

/* small responsive tweak */
@media (max-width: 640px) {
    .card {
        flex-direction: column;
    }

    .card .left {
        width: 100%;
        min-width: 0;
    }
}

/* accessible hide for content that is only placeholder */
.sr-only {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Additional Embed Options */
.widget-videoplayer {
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

.widget-videoplayer::before {
    display: block;
    padding-top: var(--widget-aspect-ratio);
    content: "";
}

.widget-videoplayer-1x1 { --widget-aspect-ratio: 100%; }
.widget-videoplayer-4x3 { --widget-aspect-ratio: 75%; }
.widget-videoplayer-16x9 { --widget-aspect-ratio: 56.25%; }
.widget-videoplayer-21x9 { --widget-aspect-ratio: 42.85%; }
.widget-videoplayer-9x16 { --widget-aspect-ratio: calc(16 / 9 * 100%); }

.widget-videoplayer > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}