﻿/* newly embedded aurora / gradient code */

.gradient-border {
    position: relative;
    border-radius: 20px;
}

.gradient-border-yellow:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    background: linear-gradient( 150deg, rgba(169, 6, 255, 1) 0%, rgba(89, 114, 217, 1) 22%, rgba(89, 114, 217, 1) 63%, rgba(237, 101, 148, 1) 83%, rgba(246, 174, 45, 1) 100% );
    border-radius: 22px;
    z-index: -1;
    animation: animatedgradient 5s ease alternate infinite;
    background-size: 100% 100%;
    box-shadow: -5px 0px 60px 10px rgba(246, 174, 45, 0.1);
}

.gradient-border-pink:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    background: linear-gradient( 270deg, rgba(169, 6, 255, 1) 0%, rgba(89, 114, 217, 1) 22%, rgba(89, 114, 217, 1) 63%, rgba(237, 101, 148, 1) 83%, rgba(246, 174, 45, 1) 100% );
    border-radius: 22px;
    z-index: -1;
    animation: animatedgradient 5s ease alternate infinite;
    background-size: 100% 100%;
    box-shadow: -10px 10px 60px 10px rgba(237, 101, 148, 0.1);
}

.rainbow-border-wrapper:before {
    background: rgb(169, 6, 255);
    background: linear-gradient( 150deg, rgba(169, 6, 255, 1) 0%, rgba(89, 114, 217, 1) 22%, rgba(89, 114, 217, 1) 63%, rgba(237, 101, 148, 1) 83%, rgba(246, 174, 45, 1) 100% );
}
.rainbow-border-wrapper {
    background: transparent;
}

.rainbow-border-wrapper-onboarding {
    background: transparent;
    padding:3px;
}

    .onboarding-option-card,
    .rainbow-border-wrapper > .content {
        border: 1px solid #cbd5e1;
    }

.mud-avatar {
    border: none !important;
}


/* Improved typography */

.mud-typography-h4 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.4rem;
    color: black;
}

.mud-typography-subtitle1 {
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 1.8rem;
    color: #334155;
}

.mud-typography-body1 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1rem;
}

.mud-typography-body2 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: black;
}

.mud-typography-h5 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.8rem;
    color: black;
}

/* day selector */

.configure-habit-day-chip {
    height: 44px !important;
    width: 44px !important;
    border-radius: 50% !important;
    justify-content: center !important;
}

.rainbow-border-day {
    background: linear-gradient( 120deg, rgba(169, 6, 255, 1) 0%, rgba(89, 114, 217, 1) 22%, rgba(89, 114, 217, 1) 63%, rgba(237, 101, 148, 1) 83%, rgba(246, 174, 45, 1) 100% );
}


.habit-detail-chip-text {
    font-size: 1.2rem;
}

/* Monospace font for time displays to ensure proper alignment */
.time-text {
    font-family: var(--font-family-geist-mono);
}

.habit-detail-chip-time,
.habit-detail-chip {
    background-color: #F1F5F9;
}

.shop-header-gradient {
    background: linear-gradient(150deg,
        rgba(169, 6, 255, 0.1) 0%,
        rgba(89, 114, 217, 0.1) 22%,
        rgba(89, 114, 217, 0.1) 63%,
        rgba(237, 101, 148, 0.1) 83%,
        rgba(246, 174, 45, 0.1) 100%
    );
    border-radius: 12px;
}

.shop-item-background {
    background-color: rgba(89, 114, 217, 0.1);
}
