/* ===================================================
   EventBuddy - Custom Figma-style Aesthetic Overrides
   =================================================== */

/* Gradient overlapping hero/card sections */
.figma-gradient-hero {
    background: linear-gradient(135deg, #9C27B0 0%, #6B21A8 100%);
    position: relative;
}

.figma-overlap-card {
    border-radius: 28px 28px 0 0;
    margin-top: -40px;
    position: relative;
    z-index: 10;
    background-color: #ffffff;
}

/* Sleek overlapping stacked cards used on the Dashboard */
.figma-stack-card {
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(107, 33, 168, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: -18px;
    position: relative;
}

.figma-stack-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(107, 33, 168, 0.2);
    z-index: 2;
}

.figma-stack-card:last-child {
    margin-bottom: 0;
}

.figma-gradient-card {
    border-radius: 20px;
    background: linear-gradient(135deg, #9C27B0, #6B21A8);
    color: #fff;
    box-shadow: 0 10px 28px rgba(107, 33, 168, 0.35);
}

/* Bottom navigation elevation */
.figma-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-radius: 28px 28px 0 0;
    background-color: #ffffff;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
}

.figma-nav-fab-wrapper {
    position: relative;
    top: -28px;
    margin: 0 12px;
    filter: drop-shadow(0 8px 16px rgba(107, 33, 168, 0.45));
}

/* Pill-style buttons/chips */
.figma-pill-btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.figma-pill-outline {
    border-radius: 999px !important;
    border-width: 2px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.figma-pill-chip {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

/* Section headers */
.figma-section-title {
    font-weight: 800 !important;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}