/*
==========================================
HAILINK GUESTBOOK
Glassmorphism Edition
Pastel Blue + Purple
==========================================
*/

:root{

    --primary:#7A6CF6;
    --primary2:#9FC5FF;
    --accent:#D8CCFF;

    --text:#5D4FB5;
    --text2:#7C75A8;

    --border:rgba(255,255,255,.35);

    --glass:rgba(255,255,255,.15);

    --glass2:rgba(255,255,255,.25);

    --shadow:0 10px 35px rgba(123,110,255,.15);

}

/*=============================
WRAPPER
=============================*/

.hlg-wrapper{

    max-width:850px;

    margin:40px auto;

    padding:40px;

    background:transparent;

}

/*=============================
HEADER
=============================*/

.hlg-header{

    text-align:center;

    margin-bottom:35px;

}

.hlg-header h2{

    margin:0;

    color:var(--text);

    font-size:38px;

    font-weight:700;

}

.hlg-header p{

    margin-top:12px;

    color:var(--text2);

    line-height:1.8;

}

/*=============================
FORM
=============================*/

.hlg-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.hlg-field{

    display:flex;

    flex-direction:column;

}

.hlg-field label{

    margin-bottom:8px;

    color:var(--text);

    font-weight:600;

}

.hlg-field input,
.hlg-field textarea{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:1px solid rgba(135,120,255,.25);

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(12px);

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

    color:var(--text);

    outline:none;

    transition:.35s;

    box-sizing:border-box;

    font-size:15px;

}

.hlg-field input::placeholder,
.hlg-field textarea::placeholder{

    color:#A89EDB;

}

.hlg-field textarea{

    resize:vertical;

    min-height:150px;

}

.hlg-field input:focus,
.hlg-field textarea:focus{

    border-color:#8A7BFF;

    box-shadow:0 0 20px rgba(138,123,255,.18);

    background:rgba(255,255,255,.6);

}

/*=============================
BUTTON
=============================*/

#hlg-submit{

    width:100%;

    height:58px;

    border:none;

    cursor:pointer;

    border-radius:18px;

    color:#fff;

    font-size:16px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #7D72F6,
        #8FBFFF
    );

    transition:.35s;

}

#hlg-submit:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(122,108,246,.35);

    background:linear-gradient(
        135deg,
        #6E61F2,
        #7AB6FF
    );

}

/*=============================
SUCCESS
=============================*/

.hlg-success{

    margin-top:20px;

    background:rgba(220,252,231,.6);

    border:1px solid #A7F3D0;

    color:#166534;

    border-radius:15px;

    padding:15px;

}

/*=============================
ERROR
=============================*/

.hlg-error{

    margin-top:20px;

    background:rgba(254,226,226,.7);

    border:1px solid #FCA5A5;

    color:#991B1B;

    border-radius:15px;

    padding:15px;

}

/*=============================
TOTAL
=============================*/

.hlg-total{

    margin:35px 0;

    font-size:22px;

    color:var(--text);

    font-weight:700;

}

/*=============================
CARD
=============================*/

.hlg-card{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:22px;

    margin-bottom:18px;

    border-radius:24px;

    background:rgba(255,255,255,.30);

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(255,255,255,.35);

    box-shadow:var(--shadow);

    transition:.35s;

}

.hlg-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 45px rgba(120,110,255,.20);

}

/*=============================
AVATAR
=============================*/

.hlg-avatar{

    width:58px;

    height:58px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #7B6CF7,
        #99C8FF
    );

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    font-weight:bold;

    flex-shrink:0;

}

/*=============================
CONTENT
=============================*/

.hlg-content{

    flex:1;

}

.hlg-name{

    color:var(--text);

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}

.hlg-message{

    color:var(--text2);

    line-height:1.8;

    margin-bottom:15px;

}

.hlg-time{

    color:#AAA1DA;

    font-size:13px;

}

/*=============================
SCROLL
=============================*/

#hlg-list{

    max-height:650px;

    overflow-y:auto;

    padding-right:8px;

}

#hlg-list::-webkit-scrollbar{

    width:7px;

}

#hlg-list::-webkit-scrollbar-thumb{

    background:#C7BFFF;

    border-radius:20px;

}

/*=============================
HR
=============================*/

.hlg-wrapper hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.35);

    margin:35px 0;

}

/*=============================
ANIMATION
=============================*/

.hlg-card{

    animation:hlgFade .4s ease;

}

@keyframes hlgFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=============================
RESPONSIVE
=============================*/

@media(max-width:768px){

.hlg-wrapper{

    padding:20px;

}

.hlg-header h2{

    font-size:30px;

}

.hlg-card{

    padding:18px;

}

.hlg-avatar{

    width:48px;

    height:48px;

    font-size:20px;

}

.hlg-name{

    font-size:16px;

}

.hlg-message{

    font-size:14px;

}

#hlg-submit{

    height:54px;

}

}