/******************************************************************************
 * File Path       : /assets/css/cookies-notice.css
 * Project         : Sangyan AI Website
 * Engine          : SAI-X 2.0
 *
 * Delivery No.    : D-005C-008B (Part 1)
 * Component       : Cookies Notice
 * Version         : 1.0.0
 *
 * Generation Date : 02-August-2026
 ******************************************************************************/

/***********************************************************************
OVERLAY
***********************************************************************/

.sai-cn-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:4px;

    background:rgba(0,0,0,.58);

    backdrop-filter:blur(7px);

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

    z-index:999999;

    opacity:0.96;

    visibility:visible;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


/***********************************************************************
MODAL
***********************************************************************/

/***********************************************************************
MODAL
***********************************************************************/
.sai-cn-modal{

    position:relative;

    width:min(550px,60vw);

    max-height:70vh;

    overflow-y:auto;

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

    backdrop-filter:blur(12px);

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

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

    border-radius:26px;

    padding:3px 5px 2px;

    box-shadow:
        0 28px 90px rgba(0,0,0,.24);

    animation:saiCnAppear .35s ease;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

/***********************************************************************
APPEAR ANIMATION
***********************************************************************/

@keyframes saiCnAppear{

    from{

        opacity:0;

        transform:
            translateY(18px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/***********************************************************************
CLOSE BUTTON
***********************************************************************/

.sai-cn-close{

    position:absolute;

    top:20px;

    right:22px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#334155;

    font-size:34px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}

.sai-cn-close:hover{

    background:#EEF2F7;

    color:#111827;

    transform:scale(1.08);

}


/***********************************************************************
ICON
***********************************************************************/

/***********************************************************************
ICON
***********************************************************************/

.sai-cn-icon{

    display:flex;

    justify-content:center;

    margin:0;

    padding-top:1px;

    padding-bottom:4px;

}

/***********************************************************************
SHIELD
***********************************************************************/

.sai-cn-shield{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#F2F4F7;

    color:#475569;

    font-size:28px;

    position:relative;

    overflow:hidden;

    transition:

        background-color .30s ease,

        color .30s ease,

        transform .30s ease;


}

/***********************************************************************
SUCCESS CHECKMARK
***********************************************************************/

.sai-cn-shield::after{

    content:"✓";

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFFFFF;

    font-size:24px;

    font-weight:700;

    opacity:0;
    
    padding-top:1px;
    
    margin-top:0;

    transform:scale(.40);

    transition:

        opacity .18s ease,

        transform .18s ease;

}



/***********************************************************************
TITLE
***********************************************************************/

.sai-cn-title{

    margin:4px 0 2px;

    text-align:center;

    font-family:var(--font-heading);

    font-size:1.4rem;

    font-weight:600;

    color:#20314C;

}

/***********************************************************************
SUBTITLE
***********************************************************************/

.sai-cn-subtitle{

    margin:10px 0 10px;

    text-align:center;

    font-family:var(--font-body);

    font-size:1rem;

    font-weight:500;

    color:#64748B;

    letter-spacing:.3px;

}


/***********************************************************************
NOTICE BODY
***********************************************************************/

.sai-cn-body{

    margin-bottom:10px;

}

.sai-cn-body p{

    margin:0;

    font-family:var(--font-body);

    font-size:16px;

    font-weight:500;

    line-height:1.60;

    text-align:justify;

    color:#24354F;

}


/***********************************************************************
INFORMATION PANEL
***********************************************************************/

.sai-cn-information{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:6px;

    padding:4px 6px;

    border:1px solid #DDE6F2;

    border-radius:14px;

    background:rgba(248,250,252,.78);

}

.sai-cn-information i{

    margin-top:2px;

    font-size:22px;
    
    font-weight:800;

    color:#3B82F6;

    flex-shrink:0;

}

.sai-cn-information p{

    margin:0;

    font-family:var(--font-body);

    font-size:15px;
    
    font-weight: 800;

    line-height:1.55;

    text-align:justify;

    color:#42526A;

}

/***********************************************************************
FOOTER
***********************************************************************/

.sai-cn-footer{

    display:flex;

    justify-content:center;

    margin-top:5px;

}

/***********************************************************************
CONTINUE BUTTON
***********************************************************************/

.sai-cn-button{

    min-width:190px;

    height:30px;

    padding:0 20px;

    border:none;

    border-radius:999px;

    background:#173A63;

    color:#FFFFFF;

    font-family:var(--font-heading);

    font-size:17px;

    font-weight:500;

    cursor:pointer;

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

}

.sai-cn-button:hover{

    background:#214A7A;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(23,58,99,.28);

}


/***********************************************************************
GREEN SHIELD STATE
***********************************************************************/

/***********************************************************************
SUCCESS STATE
***********************************************************************/

.sai-cn-shield.sai-cn-success{

    background:#2E7D32;

    color:transparent;

    transform:scale(1.08);

}

.sai-cn-shield.sai-cn-success::after{

    opacity:1;

    transform:scale(1);

}

/***********************************************************************
MODAL CLOSE ANIMATION
***********************************************************************/

.sai-cn-overlay.sai-cn-hide{

    opacity:0;

    visibility:hidden;

}

.sai-cn-overlay.sai-cn-hide .sai-cn-modal{

    transform:translateY(20px) scale(.96);

    opacity:0;

    transition:
        opacity .30s ease,
        transform .30s ease;

}


/***********************************************************************
RESPONSIVE
***********************************************************************/

@media (max-width:768px){

    .sai-cn-overlay{

        padding:20px;

    }

    .sai-cn-modal{

        padding:42px 28px 34px;

    }

    .sai-cn-title{

        font-size:1.65rem;

    }

    .sai-cn-body p{

        font-size:16px;

        line-height:1.75;

    }

    .sai-cn-information{

        flex-direction:column;

    }

    .sai-cn-button{

        width:100%;

    }

}