.memory-title{

display:flex;

justify-content:center;

align-items:center;

/* gap:18px; */

font-size:55px;

font-weight:900;
}

.memory-title img {
    width: 14rem;
    height: rem;
    object-fit: contain;
    animation: shine 2s infinite;
}


@keyframes shine{

0%,100%{
filter:brightness(1);
}

50%{
filter:brightness(1.4);
}

}















.memory-login-section{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

background:
linear-gradient(135deg,#fff,#f8e5ec);

direction:rtl;

}



.memory-login-card{

width:100%;

max-width:430px;

background:#fff;

padding:45px 35px;

border-radius:35px;

text-align:center;

box-shadow:
0 25px 60px rgba(0,0,0,.12);

border:1px solid #f2d5df;

}



.memory-login-logo{

width:85px;

height:85px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#d98aa9;

border-radius:50%;

color:#fff;

font-size:38px;

box-shadow:
0 12px 30px rgba(217,138,169,.45);

}



.memory-login-card h1{

margin-top:25px;

color:#111;

font-size:30px;

}



.memory-login-card p{

color:#777;

margin:12px 0 35px;

}



.memory-input-box{

height:58px;

display:flex;

align-items:center;

background:#fafafa;

border:1px solid #e8e8e8;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

transition:.3s;

}



.memory-input-box:focus-within{

border-color:#d98aa9;

box-shadow:
0 0 15px rgba(217,138,169,.25);

}



.memory-input-icon{

width:60px;

height:100%;

display:flex;

align-items:center;

justify-content:center;

background:#d98aa9;

color:white;

font-size:20px;

}



.memory-input-box input{

flex:1;

height:100%;

border:none;

outline:none;

background:transparent;

padding:0 18px;

font-size:16px;

direction:rtl;

text-align:right;

}



.memory-login-btn{

width:100%;

height:58px;

margin-top:10px;

border:none;

border-radius:18px;

background:#111;

color:#fff;

font-size:18px;

cursor:pointer;

font-family:'Cairo',sans-serif;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

transition:.35s;

}



.memory-login-btn:hover{

background:#d98aa9;

transform:translateY(-3px);

box-shadow:
0 10px 25px rgba(217,138,169,.35);

}



.memory-login-links{

display:flex;

justify-content:space-between;

margin-top:25px;

}



.memory-login-links a{

color:#d98aa9;

text-decoration:none;

font-size:14px;

}



.memory-login-links a:hover{

color:#111;

}



@media(max-width:480px){

.memory-login-card{

padding:35px 20px;

}


.memory-login-links{

flex-direction:column;

gap:12px;

}

}

.memory-register-section{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

background:
linear-gradient(
135deg,
#fff,
#f8e5ec
);

direction:rtl;

}



.memory-register-card{

width:100%;

max-width:430px;

background:#fff;

padding:40px 35px;

border-radius:35px;

text-align:center;

box-shadow:
0 25px 60px rgba(0,0,0,.12);

border:1px solid #f2d5df;

}



.memory-register-logo{

width:85px;

height:85px;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

background:#d98aa9;

color:white;

font-size:35px;

border-radius:50%;

box-shadow:
0 12px 30px rgba(217,138,169,.4);

}



.memory-register-card h1{

margin-top:25px;

font-size:29px;

color:#111;

}



.memory-register-card p{

color:#777;

margin:12px 0 30px;

}





/* رفع الصورة */


.memory-profile-upload input{

display:none;

}


.memory-profile-upload label{

width:100px;

height:100px;

margin:0 auto 25px;

border-radius:50%;

background:#fafafa;

border:2px dashed #d98aa9;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

cursor:pointer;

color:#d98aa9;

gap:5px;

transition:.3s;

}



.memory-profile-upload label i{

font-size:25px;

}



.memory-profile-upload label span{

font-size:12px;

}



.memory-profile-upload label:hover{

background:#f8e5ec;

}





/* الحقول */


.memory-register-input{

height:58px;

display:flex;

align-items:center;

background:#fafafa;

border:1px solid #e8e8e8;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

transition:.3s;

}



.memory-register-input:focus-within{

border-color:#d98aa9;

box-shadow:
0 0 15px rgba(217,138,169,.25);

}



.memory-register-input span{

height:100%;

width:60px;

display:flex;

align-items:center;

justify-content:center;

background:#d98aa9;

color:#fff;

font-size:19px;

}



.memory-register-input input{

flex:1;

height:100%;

border:none;

outline:none;

background:transparent;

padding:0 18px;

font-size:16px;

text-align:right;

direction:rtl;

font-family:'Cairo',sans-serif;

}





/* الشروط */


.memory-terms{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

margin:20px 0;

color:#555;

}



.memory-terms input{

accent-color:#d98aa9;

}



.memory-terms a{

color:#d98aa9;

text-decoration:none;

}





/* الزر */


.memory-register-btn{

width:100%;

height:58px;

border:none;

border-radius:18px;

background:#111;

color:#fff;

font-size:18px;

font-family:'Cairo',sans-serif;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

transition:.3s;

}



.memory-register-btn:hover{

background:#d98aa9;

transform:translateY(-3px);

}





.memory-register-login{

margin-top:25px;

font-size:14px;

color:#777;

}



.memory-register-login a{

color:#d98aa9;

text-decoration:none;

}





@media(max-width:480px){

.memory-register-card{

padding:35px 20px;

}


.memory-register-card h1{

font-size:25px;

}

}
.memory-page-header{

position:relative;

/* margin-top:75px; */

height:280px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

background:
    linear-gradient(
    135deg,
    #111 0%,
    #2c2c2c 50%,
    #d98aa9 100%
    );
}



.memory-page-header::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-220px;

    left:-120px;

}



.memory-page-header::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    bottom:-180px;

    right:-80px;

}



.memory-page-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.25),
    rgba(0,0,0,.25)
    );

}



.memory-page-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:white;

    padding:20px;

}



.memory-page-content span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:rgba(255,255,255,.12);

    padding:10px 22px;

    border-radius:50px;

    backdrop-filter:blur(10px);

    margin-bottom:20px;

}



.memory-page-content span i{

    color:#ffd6e3;

}



.memory-page-content h1{

    font-size:52px;

    margin-bottom:15px;

    font-family:'Cairo',sans-serif;

    font-weight:700;

}



.memory-page-content p{

    max-width:600px;

    margin:auto;

    color:rgba(255,255,255,.9);

    line-height:2;

    font-size:17px;

}



@media(max-width:768px){

.memory-page-header{

    height:230px;

}

.memory-page-content h1{

    font-size:35px;

}

.memory-page-content p{

    font-size:15px;

}

}
    .lo-love-btn{
        cursor:pointer;
        user-select:none;
        transition:.3s;
    }

    .lo-love-btn:hover{
        color:#ff4f87;
    }


    #lo-love-container{
        position:fixed;
        top:0;
        left:0;
        width:0;
        height:0;
        pointer-events:none;
        z-index:999999;
    }


    .lo-heart-item{
        position:fixed;
        color:#ff3f7a;
        font-weight:bold;
        white-space:nowrap;
        animation:lo-fly 3s ease forwards;
    }


    @keyframes lo-fly{

        from{
            opacity:1;
            transform:translate(0,0) scale(.5);
        }

        to{
            opacity:0;
            transform:translate(var(--x),var(--y)) scale(1.5);
        }

    }

    .memory-story{
        padding: 10px 8% 80px;
        background:#fff;
        direction:rtl;
    }



    .memory-story-header{

        text-align:center;

        margin-bottom:60px;

    }



    .memory-story-header span{

        display:inline-flex;

        align-items:center;

        gap:10px;

        padding:10px 22px;

        background:#f9e8ee;

        color:#d98aa9;

        border-radius:40px;

        margin-bottom:20px;

    }



    .memory-story-header h1{

        font-size:55px;

        color:#111;

        margin-bottom:15px;

    }



    .memory-story-header p{

        max-width:650px;

        margin:auto;

        color:#666;

        line-height:2;

        font-size:18px;

    }



    .memory-story-card{

display:flex;

align-items:center;

gap:50px;

font-size: 0.8rem;

background:#fff;

padding:30px;

border-radius:35px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

border:1px solid #f2dbe4;

}



    .memory-story-image{

        flex:1;

    }



    .memory-story-image img{

        width:100%;

        height:500px;

        object-fit:cover;

        border-radius:30px;

    }



    .memory-story-content{

        flex:1;

    }



    .memory-story-date{
        display:inline-flex;
        align-items:center;
        gap:8px;
        background: #c4e1ef;
        color: #305b87;
        padding:10px 18px;
        border-radius:30px;
        margin-bottom:20px;
    }

    .memory-story-timer{
        display:inline-flex;
        align-items:center;
        gap:8px;
        background:#f8e5ec;
        color:#d98aa9;
        padding:10px 18px;
        border-radius:30px;
        margin-bottom:20px;
    }

    .memory-story-content h2{

font-size: 1.5rem;

margin-bottom:20px;

color:#111;

}



    .memory-story-content p{

font-size: 1rem;

/* line-height:2.2; */

color:#666;

margin-bottom:35px;

text-align: justify;

}



    .memory-story-info{

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:15px;

    }



    .memory-story-info div{

        padding:20px;

        text-align:center;

        background:#fafafa;

        border-radius:20px;

        transition:.3s;

    }



    .memory-story-info div:hover{

        background:#d98aa9;

        color:#fff;

        transform:translateY(-6px);

    }



    .memory-story-info i{

        font-size:22px;

        margin-bottom:12px;

        display:block;

    }



    @media(max-width:900px){

        .memory-story-card{

            flex-direction:column;

        }

        .memory-story-image img{

            height:320px;

        }

        .memory-story-header h1{

            font-size:38px;

        }

        .memory-story-info{

            grid-template-columns:1fr;

        }

    }


.post-tipying{
    color: #777;
    font-size: 14px;
    background: #f5f5f5;
    padding: 0.1rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 1rem;
}

.photo-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.photo-modal-content {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
    animation: photoZoom 0.25s ease;
}

.photo-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

@keyframes photoZoom {
    from {
        transform: scale(0.85);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}