/* =========================================================
   YOGAYATHRA LIQUID GLASS
   Public website + Student + Instructor + Admin
   ========================================================= */

:root{
    --yy-glass-bg:rgba(255,255,255,.58);
    --yy-glass-bg-strong:rgba(255,255,255,.76);
    --yy-glass-dark:rgba(18,45,36,.62);
    --yy-glass-border:rgba(255,255,255,.58);
    --yy-glass-border-dark:rgba(255,255,255,.16);
    --yy-glass-shadow:
        0 20px 60px rgba(27,61,48,.10),
        inset 0 1px 0 rgba(255,255,255,.72);
    --yy-glass-shadow-strong:
        0 26px 80px rgba(22,55,43,.16),
        inset 0 1px 0 rgba(255,255,255,.85);
    --yy-glass-radius:24px;
    --yy-green:#285845;
    --yy-green-dark:#173b2e;
    --yy-gold:#c89d58;
}


/* ---------------------------------------------------------
   PAGE BACKGROUND
   --------------------------------------------------------- */

html{
    background:#eef4ef;
}

body{
    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(198,224,207,.72),
            transparent 32%
        ),
        radial-gradient(
            circle at 95% 10%,
            rgba(238,215,174,.46),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 85%,
            rgba(179,215,204,.44),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f7faf7 0%,
            #edf4ef 50%,
            #f7f2e9 100%
        );
    background-attachment:fixed;
}


/* ---------------------------------------------------------
   PUBLIC NAVIGATION
   --------------------------------------------------------- */

.site-nav{
    background:transparent !important;
    border:0 !important;
}

.site-nav > .container{
    margin-top:14px;
    padding:10px 14px !important;
    border:1px solid rgba(255,255,255,.24);
    border-radius:22px;
    background:rgba(20,48,38,.42);
    -webkit-backdrop-filter:
        blur(22px) saturate(160%);
    backdrop-filter:
        blur(22px) saturate(160%);
    box-shadow:
        0 18px 55px rgba(6,25,18,.16),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.site-nav .brand-logo{
    box-shadow:
        0 8px 22px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.7);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero{
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    top:-180px;
    right:-130px;
    background:
        radial-gradient(
            circle,
            rgba(226,198,139,.32),
            rgba(226,198,139,.04) 58%,
            transparent 70%
        );
    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    left:-180px;
    bottom:-190px;
    background:
        radial-gradient(
            circle,
            rgba(143,195,171,.30),
            transparent 68%
        );
    pointer-events:none;
}

.hero .container{
    position:relative;
    z-index:1;
}


/* Existing right-side ticket/card becomes glass */

.ticket,
.ticket-wrap .ticket{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.80),
            rgba(255,255,255,.44)
        ) !important;
    border:1px solid rgba(255,255,255,.68) !important;
    -webkit-backdrop-filter:
        blur(26px) saturate(165%);
    backdrop-filter:
        blur(26px) saturate(165%);
    box-shadow:
        0 30px 90px rgba(6,26,19,.26),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}


/* ---------------------------------------------------------
   UNIVERSAL GLASS PANELS
   --------------------------------------------------------- */

.panel,
.exam-card,
.q-card,
.result-hero,
.material-card,
.course-card,
.stat-card,
.summary-card,
.profile-card,
.card,
.paper-section,
.cta-banner{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.76),
            rgba(255,255,255,.48)
        ) !important;

    border:
        1px solid rgba(255,255,255,.72) !important;

    -webkit-backdrop-filter:
        blur(24px) saturate(155%);
    backdrop-filter:
        blur(24px) saturate(155%);

    box-shadow:
        var(--yy-glass-shadow) !important;
}

.panel,
.exam-card,
.q-card,
.result-hero,
.material-card,
.course-card,
.stat-card,
.summary-card,
.profile-card,
.card{
    border-radius:
        var(--yy-glass-radius) !important;
}


/* Stronger hover */

.exam-card,
.material-card,
.course-card,
.card{
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.exam-card:hover,
.material-card:hover,
.course-card:hover,
.card:hover{
    transform:translateY(-4px);
    border-color:
        rgba(255,255,255,.94) !important;
    box-shadow:
        var(--yy-glass-shadow-strong) !important;
}


/* ---------------------------------------------------------
   PANEL HEADERS
   --------------------------------------------------------- */

.panel-head{
    background:
        rgba(255,255,255,.22) !important;

    border-bottom:
        1px solid rgba(69,99,85,.10) !important;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

.table-wrap{
    border-radius:0 0 22px 22px;
    overflow:auto;
}

.data-table{
    background:transparent !important;
}

.data-table th{
    background:
        rgba(255,255,255,.34) !important;
}

.data-table td{
    background:
        rgba(255,255,255,.12) !important;
    border-color:
        rgba(53,79,67,.08) !important;
}

.data-table tbody tr{
    transition:
        background .18s ease;
}

.data-table tbody tr:hover td{
    background:
        rgba(255,255,255,.48) !important;
}


/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

input,
select,
textarea{
    background:
        rgba(255,255,255,.60) !important;

    border:
        1px solid rgba(74,103,90,.18) !important;

    border-radius:
        14px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 4px 18px rgba(29,66,50,.035);

    -webkit-backdrop-filter:
        blur(14px);
    backdrop-filter:
        blur(14px);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

input:focus,
select:focus,
textarea:focus{
    outline:none !important;

    background:
        rgba(255,255,255,.82) !important;

    border-color:
        rgba(48,100,76,.46) !important;

    box-shadow:
        0 0 0 4px rgba(47,103,78,.10),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.btn{
    border-radius:
        999px !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.btn:hover{
    transform:
        translateY(-1px);
}

.btn-gold{
    box-shadow:
        0 9px 24px rgba(181,137,68,.18),
        inset 0 1px 0 rgba(255,255,255,.42);
}

.btn-outline{
    background:
        rgba(255,255,255,.38) !important;

    border:
        1px solid rgba(49,86,68,.18) !important;

    -webkit-backdrop-filter:
        blur(14px);
    backdrop-filter:
        blur(14px);
}

.btn-outline:hover{
    background:
        rgba(255,255,255,.68) !important;
}

.btn-outline-light{
    background:
        rgba(255,255,255,.10) !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    -webkit-backdrop-filter:
        blur(16px);
    backdrop-filter:
        blur(16px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16);
}


/* ---------------------------------------------------------
   BADGES
   --------------------------------------------------------- */

.badge{
    border-radius:
        999px !important;

    -webkit-backdrop-filter:
        blur(12px);
    backdrop-filter:
        blur(12px);
}


/* ---------------------------------------------------------
   LOGIN / REGISTER
   --------------------------------------------------------- */

.auth-shell,
.login-shell,
.auth-card,
.login-card,
.register-card{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(255,255,255,.52)
        ) !important;

    border:
        1px solid rgba(255,255,255,.76) !important;

    -webkit-backdrop-filter:
        blur(28px) saturate(160%);
    backdrop-filter:
        blur(28px) saturate(160%);

    box-shadow:
        0 28px 90px rgba(24,57,43,.15),
        inset 0 1px 0 rgba(255,255,255,.88) !important;

    border-radius:
        28px !important;
}


/* ---------------------------------------------------------
   PORTAL HEADER / SIDEBAR
   Covers authenticated Admin / Instructor / Student UI
   --------------------------------------------------------- */

.portal-header,
.app-header,
.topbar,
.top-bar,
header.portal-nav{
    background:
        rgba(255,255,255,.54) !important;

    border-bottom:
        1px solid rgba(255,255,255,.68) !important;

    -webkit-backdrop-filter:
        blur(24px) saturate(160%);
    backdrop-filter:
        blur(24px) saturate(160%);

    box-shadow:
        0 12px 40px rgba(31,67,51,.06);
}

.sidebar,
.portal-sidebar,
.app-sidebar{
    background:
        linear-gradient(
            165deg,
            rgba(20,54,41,.92),
            rgba(19,46,36,.82)
        ) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    -webkit-backdrop-filter:
        blur(26px) saturate(145%);
    backdrop-filter:
        blur(26px) saturate(145%);

    box-shadow:
        18px 0 60px rgba(18,50,37,.08);
}


/* Sidebar navigation links */

.sidebar a,
.portal-sidebar a,
.app-sidebar a{
    border-radius:
        13px !important;
}

.sidebar a.active,
.portal-sidebar a.active,
.app-sidebar a.active,
.sidebar a:hover,
.portal-sidebar a:hover,
.app-sidebar a:hover{
    background:
        rgba(255,255,255,.11) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* ---------------------------------------------------------
   EXAM / TRAINING
   --------------------------------------------------------- */

.exam-shell .q-card{
    box-shadow:
        0 24px 70px rgba(30,66,50,.12),
        inset 0 1px 0 rgba(255,255,255,.84) !important;
}

.option,
.option-row,
.answer-option{
    background:
        rgba(255,255,255,.45) !important;

    border:
        1px solid rgba(63,94,79,.12) !important;

    border-radius:
        16px !important;

    -webkit-backdrop-filter:
        blur(14px);
    backdrop-filter:
        blur(14px);

    transition:
        background .18s ease,
        transform .18s ease,
        border-color .18s ease;
}

.option:hover,
.option-row:hover,
.answer-option:hover{
    background:
        rgba(255,255,255,.76) !important;

    transform:
        translateY(-1px);
}


/* ---------------------------------------------------------
   FLASH MESSAGES
   --------------------------------------------------------- */

.form-alert,
.flash,
.alert{
    border-radius:
        18px !important;

    -webkit-backdrop-filter:
        blur(18px);
    backdrop-filter:
        blur(18px);

    box-shadow:
        0 14px 40px rgba(32,61,49,.08);
}


/* ---------------------------------------------------------
   DRAG SORT
   --------------------------------------------------------- */

.yy-sort-handle,
.yy-sort-up,
.yy-sort-down{
    background:
        rgba(255,255,255,.32) !important;

    border:
        1px solid rgba(255,255,255,.52) !important;

    -webkit-backdrop-filter:
        blur(12px);
    backdrop-filter:
        blur(12px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:768px){

    body{
        background:
            radial-gradient(
                circle at 10% 5%,
                rgba(187,221,201,.80),
                transparent 31%
            ),
            radial-gradient(
                circle at 92% 23%,
                rgba(238,211,164,.45),
                transparent 29%
            ),
            linear-gradient(
                160deg,
                #f5faf6,
                #edf4ef 55%,
                #faf5ec
            );

        background-attachment:
            fixed;
    }


    .site-nav > .container{
        margin:
            8px 10px 0 !important;

        width:
            auto !important;

        border-radius:
            20px !important;

        padding:
            8px 10px !important;

        background:
            rgba(24,57,44,.64) !important;

        -webkit-backdrop-filter:
            blur(24px) saturate(170%);
        backdrop-filter:
            blur(24px) saturate(170%);
    }


    /*
     * Keep Sign In visible on mobile.
     */
    .site-nav-links{
        display:flex !important;
        align-items:center !important;
        gap:7px !important;
    }


    .site-nav-links .btn{
        display:inline-flex !important;
        white-space:nowrap;
    }


    .site-nav-links .btn-sm{
        padding:
            9px 12px !important;

        font-size:
            .78rem !important;
    }


    .site-nav .brand-tag{
        display:none;
    }


    .site-nav .brand-name{
        font-size:
            1rem !important;
    }


    .site-nav .brand-logo{
        width:
            38px !important;

        height:
            38px !important;
    }


    .panel,
    .exam-card,
    .q-card,
    .result-hero,
    .material-card,
    .course-card{
        border-radius:
            20px !important;
    }


    .panel{
        box-shadow:
            0 14px 44px rgba(28,64,48,.09),
            inset 0 1px 0 rgba(255,255,255,.76) !important;
    }


    input,
    select,
    textarea{
        font-size:
            16px !important;
    }

}


/* ---------------------------------------------------------
   SAFARI / FALLBACK
   --------------------------------------------------------- */

@supports not (
    (backdrop-filter:blur(10px))
    or
    (-webkit-backdrop-filter:blur(10px))
){
    .panel,
    .exam-card,
    .q-card,
    .result-hero,
    .ticket,
    .auth-card,
    .login-card,
    .register-card{
        background:
            rgba(249,252,249,.94) !important;
    }
}