/*
   Samico Portal - Extra Cute Pop
   Pastel stationery mood with sticker cards and soft candy controls.
*/

:root {
    --brand-purple: #9b7cff;
    --brand-indigo: #6a6ff5;
    --brand-pink: #ff7fbd;
    --brand-coral: #ff9a86;
    --brand-yellow: #ffe08a;
    --brand-mint: #82e6c4;
    --brand-sky: #79d7ff;
    --brand-cream: #fffaf0;
    --ink: #322b4f;
    --muted: #817b99;
    --paper: #ffffff;
    --line: #f5e7ff;
    --soft-shadow: rgba(90, 63, 143, 0.13);
}

* {
    letter-spacing: 0;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', 'M PLUS Rounded 1c', sans-serif;
    background:
        radial-gradient(circle at 14px 16px, rgba(255, 127, 189, 0.18) 0 4px, transparent 5px),
        radial-gradient(circle at 44px 42px, rgba(130, 230, 196, 0.16) 0 4px, transparent 5px),
        linear-gradient(90deg, rgba(255, 224, 138, 0.16) 1px, transparent 1px),
        linear-gradient(0deg, rgba(121, 215, 255, 0.13) 1px, transparent 1px),
        linear-gradient(135deg, #fff6fb 0%, #f5fbff 45%, #fff9e8 100%);
    background-size: 58px 58px, 58px 58px, 34px 34px, 34px 34px, 100% 100%;
}

.page-backdrop {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 224, 138, 0.35), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(255, 127, 189, 0.22), transparent 28%),
        radial-gradient(circle at 50% 92%, rgba(130, 230, 196, 0.20), transparent 32%);
}

.glass-panel,
.glass-card,
.glass-nav {
    background: rgba(255, 255, 255, 0.90);
    border: 2px solid rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px var(--soft-shadow);
    backdrop-filter: blur(16px) saturate(155%);
    -webkit-backdrop-filter: blur(16px) saturate(155%);
}

.glass-panel {
    border-radius: 1.4rem;
}

.glass-nav {
    border-radius: 1.6rem;
    padding: 0.9rem 1.25rem;
    outline: 3px solid rgba(255, 255, 255, 0.45);
}

.glass-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.4rem;
    padding: 2rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 127, 189, 0.13), transparent 34%, rgba(130, 230, 196, 0.11)),
        radial-gradient(circle at 88% 14%, rgba(255, 224, 138, 0.38) 0 18px, transparent 19px);
    opacity: 0.92;
}

.glass-card::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 18px;
    width: 34px;
    height: 34px;
    pointer-events: none;
    background:
        linear-gradient(45deg, transparent 43%, rgba(255, 127, 189, 0.62) 44% 56%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, rgba(121, 215, 255, 0.58) 44% 56%, transparent 57%);
    border-radius: 999px;
    opacity: 0.55;
}

.glass-card > * {
    position: relative;
    z-index: 1;
}

.glass-card:hover {
    transform: translateY(-6px) rotate(-0.25deg);
    border-color: #ffd7ea;
    box-shadow: 0 26px 52px rgba(90, 63, 143, 0.18);
}

.bg-brand-gradient {
    background: linear-gradient(135deg, var(--brand-pink), var(--brand-coral) 48%, var(--brand-yellow)) !important;
}

.bg-pop-pink { background: var(--brand-pink) !important; }
.bg-pop-yellow { background: var(--brand-yellow) !important; }
.bg-pop-blue { background: var(--brand-sky) !important; }
.bg-pop-indigo { background: var(--brand-indigo) !important; }
.bg-pop-mint { background: var(--brand-mint) !important; }

.text-brand-purple { color: var(--brand-purple) !important; }
.text-brand-pink { color: var(--brand-pink) !important; }
.text-pop-pink { color: var(--brand-pink) !important; }
.text-pop-yellow { color: #c98900 !important; }

.text-gradient {
    color: var(--brand-purple);
    background: linear-gradient(135deg, var(--brand-pink), var(--brand-purple), var(--brand-sky));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900 !important;
}

.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: white !important;
    font-weight: 900;
    text-decoration: none;
    padding: 1rem 2rem;
    border: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--brand-pink), var(--brand-coral));
    box-shadow: 0 9px 0 rgba(255, 127, 189, 0.28), 0 18px 32px rgba(255, 127, 189, 0.22);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn-premium:hover,
.btn-premium:focus {
    transform: translateY(-3px) rotate(-0.4deg);
    filter: saturate(1.08);
    box-shadow: 0 12px 0 rgba(255, 127, 189, 0.22), 0 24px 36px rgba(255, 127, 189, 0.26);
}

.btn-premium:active {
    transform: translateY(1px);
    box-shadow: 0 5px 0 rgba(255, 127, 189, 0.22), 0 12px 22px rgba(255, 127, 189, 0.18);
}

.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--brand-purple);
    font-weight: 900;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border: 2px solid #f0e3ff;
    border-radius: 9999px;
    background: linear-gradient(180deg, #fff, #fff7fb);
    box-shadow: 0 8px 18px rgba(90, 63, 143, 0.08);
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.btn-glass:hover,
.btn-glass:focus {
    color: var(--brand-purple);
    background: #fff1f8;
    border-color: #ffc9df;
    transform: translateY(-2px) rotate(0.35deg);
}

.pop-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #7a4d00;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0.58rem 1.05rem;
    border: 2px solid #fff3c7;
    border-radius: 9999px;
    background: linear-gradient(135deg, #fff7bf, var(--brand-yellow));
    box-shadow: 0 8px 16px rgba(255, 224, 138, 0.27);
}

.cute-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--brand-pink);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 0.45rem 0.85rem;
    border: 2px dashed #ffc6df;
    border-radius: 999px;
    background: #fff8fc;
}

.icon-box {
    width: 72px;
    height: 72px;
    border: 5px solid white;
    box-shadow: 0 12px 24px rgba(90, 63, 143, 0.16);
}

.form-glass {
    color: var(--ink);
    background: #fff;
    border: 2px solid #f0e8ff;
    border-radius: 1rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.form-glass:focus {
    background: #fff;
    border-color: var(--brand-pink);
    box-shadow: 0 0 0 0.25rem rgba(255, 127, 189, 0.16);
}

.table {
    --bs-table-hover-bg: #fff7fb;
}

.nav-pills .nav-link {
    color: var(--muted);
}

.nav-pills .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand-purple), var(--brand-pink)) !important;
}

.tracking-widest,
.tracking-wider {
    letter-spacing: 0 !important;
}

.fw-black {
    font-weight: 900 !important;
}

.page-load-in {
    animation: popIn 0.45s ease forwards;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 767.98px) {
    .glass-nav {
        border-radius: 1.25rem;
    }

    .glass-card {
        padding: 1.35rem;
    }

    .btn-premium,
    .btn-glass {
        width: 100%;
    }
}