.kwp-modal {
    isolation: isolate;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
}

.kwp-modal-wrapper {
    position: relative;
    border: 8px solid white;
    padding: 0;
    width: 95%;
    max-width: 960px;
    height: 95%;
    max-height: 640px;
    margin: auto;
    background-size: cover;
}

.kwp-modal-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.kwp-modal-mid {
    position: relative;
}

.kwp-modal-content {
    display: block;
    width: 100%;
    color: white;
    line-height: 1.25;
    padding-left: 1.5rem;
    padding-right: 0;
}

.kwp-modal-content.kwp-modal-text-light {
    color: #fff;
}

.kwp-modal-content.kwp-modal-text-dark {
    color: #000;
}

.kwp-modal-content.kwp-modal-text-light.kwp-modal-text-shadow > div {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.kwp-modal-content.kwp-modal-text-dark.kwp-modal-text-shadow > div {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
}

.kwp-modal-content .kwp-button-group a {
    text-shadow: none !important;
}

.kwp-modal-inner {
    position: relative;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    padding-right: 1.5rem;
}

@media (min-width: 640px) {
    .kwp-modal-content {
        width: 80%;
    }
}

@media (min-width: 780px) {
    .kwp-modal-content {
        width: 70%;
    }
}

@media (min-width: 990px) {
    .kwp-modal-content {
        width: 62.5%;
    }
}

.kwp-modal header {
    padding: 1.25rem 0 0.75rem;
}

.kwp-modal header h4 {
    line-height: 1.1;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 1em 0 0.3em 0;
}

@media (min-width: 768px) {
    .kwp-modal header h4 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .kwp-modal header h4 {
        font-size: 2.25rem;
    }
}

.kwp-modal main {
    padding: 1rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.5);
    max-height: 100%;
}

.kwp-modal main p.kwp-modal-lead {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 1rem 0;
}

.kwp-modal main p.kwp-modal-supporting {
    font-size: 1em;
    line-height: 1.5;
    padding: 1rem 0;
}

.kwp-modal main p.kwp-modal-extra {
    font-size: 1rem;
    padding: 1rem 0;
}

.kwp-modal main .kwp-button-group {
    line-height: 1.5;
    padding: 1.25rem 0;
}

.kwp-modal-text-preview .kwp-button,
.kwp-modal .kwp-suppress.kwp-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.kwp-modal footer {
    padding-bottom: 1.25rem;
}

.kwp-suppress.kwp-close-x {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    transition: color 0.2s ease, transform 0.2s ease;
}

.kwp-suppress.kwp-close-x:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

/* Base button styles */
button[class^="kwp-button-"] {
    padding: 0.5rem 1rem;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.kwp-button {
    color: #fff;
    text-shadow: none !important;
}

/* Hover: slightly darker; Active/Focus: darker still */
.kwp-button-red {
    background-color: #f87171;
}

.kwp-button-red:hover,
.kwp-button-red:focus,
.kwp-button-red:active {
    background-color: #ef4444;
}

.kwp-button-orange {
    background-color: #fb923c;
}

.kwp-button-orange:hover,
.kwp-button-orange:focus,
.kwp-button-orange:active {
    background-color: #f97316;
}

.kwp-button-amber {
    background-color: #fbbf24;
}

.kwp-button-amber:hover,
.kwp-button-amber:focus,
.kwp-button-amber:active {
    background-color: #f59e0b;
}

.kwp-button-yellow {
    background-color: #facc15;
}

.kwp-button-yellow:hover,
.kwp-button-yellow:focus,
.kwp-button-yellow:active {
    background-color: #eab308;
}

.kwp-button-lime {
    background-color: #a3e635;
}

.kwp-button-lime:hover,
.kwp-button-lime:focus,
.kwp-button-lime:active {
    background-color: #84cc16;
}

.kwp-button-green {
    background-color: #4ade80;
}

.kwp-button-green:hover,
.kwp-button-green:focus,
.kwp-button-green:active {
    background-color: #22c55e;
}

.kwp-button-emerald {
    background-color: #34d399;
}

.kwp-button-emerald:hover,
.kwp-button-emerald:focus,
.kwp-button-emerald:active {
    background-color: #10b981;
}

.kwp-button-teal {
    background-color: #2dd4bf;
}

.kwp-button-teal:hover,
.kwp-button-teal:focus,
.kwp-button-teal:active {
    background-color: #14b8a6;
}

.kwp-button-cyan {
    background-color: #22d3ee;
}

.kwp-button-cyan:hover,
.kwp-button-cyan:focus,
.kwp-button-cyan:active {
    background-color: #06b6d4;
}

.kwp-button-sky {
    background-color: #38bdf8;
}

.kwp-button-sky:hover,
.kwp-button-sky:focus,
.kwp-button-sky:active {
    background-color: #0ea5e9;
}

.kwp-button-blue {
    background-color: #60a5fa;
}

.kwp-button-blue:hover,
.kwp-button-blue:focus,
.kwp-button-blue:active {
    background-color: #3b82f6;
}

.kwp-button-indigo {
    background-color: #818cf8;
}

.kwp-button-indigo:hover,
.kwp-button-indigo:focus,
.kwp-button-indigo:active {
    background-color: #6366f1;
}

.kwp-button-violet {
    background-color: #a78bfa;
}

.kwp-button-violet:hover,
.kwp-button-violet:focus,
.kwp-button-violet:active {
    background-color: #8b5cf6;
}

.kwp-button-purple {
    background-color: #c084fc;
}

.kwp-button-purple:hover,
.kwp-button-purple:focus,
.kwp-button-purple:active {
    background-color: #a855f7;
}

.kwp-button-fuchsia {
    background-color: #e879f9;
}

.kwp-button-fuchsia:hover,
.kwp-button-fuchsia:focus,
.kwp-button-fuchsia:active {
    background-color: #d946ef;
}

.kwp-button-pink {
    background-color: #f472b6;
}

.kwp-button-pink:hover,
.kwp-button-pink:focus,
.kwp-button-pink:active {
    background-color: #ec4899;
}

.kwp-button-rose {
    background-color: #fb7185;
}

.kwp-button-rose:hover,
.kwp-button-rose:focus,
.kwp-button-rose:active {
    background-color: #f43f5e;
}

.kwp-button-slate {
    background-color: #94a3b8;
}

.kwp-button-slate:hover,
.kwp-button-slate:focus,
.kwp-button-slate:active {
    background-color: #64748b;
}

.kwp-button-gray {
    background-color: #9ca3af;
}

.kwp-button-gray:hover,
.kwp-button-gray:focus,
.kwp-button-gray:active {
    background-color: #6b7280;
}

.kwp-button-zinc {
    background-color: #a1a1aa;
}

.kwp-button-zinc:hover,
.kwp-button-zinc:focus,
.kwp-button-zinc:active {
    background-color: #71717a;
}

.kwp-button-neutral {
    background-color: #a3a3a3;
}

.kwp-button-neutral:hover,
.kwp-button-neutral:focus,
.kwp-button-neutral:active {
    background-color: #737373;
}

.kwp-button-stone {
    background-color: #a8a29e;
}

.kwp-button-stone:hover,
.kwp-button-stone:focus,
.kwp-button-stone:active {
    background-color: #78716c;
}