/* components.css */

.card {
    border-radius: var(--radius-soft);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-soft);
    padding: 22px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-pop);
    background: rgba(255, 255, 255, 0.90);
}

.card.cute {
    position: relative;
    overflow: hidden;
}

.card.cute::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: var(--cute-grad);
    opacity: 0.22;
    filter: blur(22px);
    pointer-events: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(189, 224, 254, 0.20);
    border: 1px solid rgba(17, 24, 39, 0.06);
    color: rgba(31, 41, 55, 0.78);
    font-size: 12px;
    width: fit-content;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.75);
    color: rgba(31, 41, 55, 0.85);
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(17, 24, 39, 0.10);
    background: rgba(255, 255, 255, 0.92);
}

.button.primary {
    border: 1px solid rgba(17, 24, 39, 0.06);
    background: linear-gradient(135deg, rgba(255, 200, 221, 0.95), rgba(189, 224, 254, 0.95));
    color: rgba(31, 41, 55, 0.92);
}

.button.primary:hover {
    background: linear-gradient(135deg, rgba(255, 175, 204, 0.95), rgba(162, 210, 255, 0.95));
}

.button.ghost {
    background: transparent;
    border-color: rgba(17, 24, 39, 0.10);
    box-shadow: none;
}

.button.small {
    padding: 9px 12px;
    font-size: 14px;
}

/* tiny label above headings (optional) */
.kicker {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(31, 41, 55, 0.55);
}

/* Scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* WebKit browsers */
*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 999px;
    border: 2px solid var(--scroll-track);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-hover);
}