body{
    font-family: "Onest", sans-serif;
    line-height: normal;
    font-size: 16px;
    margin: 0;
    background: #EFF2FF;
}

.view_page .sidebar {
    display: none;
}
html {
    font-size: 16px;
}

#epitaph h3{
    font-family: "El Messiri", sans-serif;
}

@media (max-width: 1200px) {
html {
    font-size: 15px;
}
}

@media (max-width: 1024px) {
html {
    font-size: 12px;
}
}

@media (max-width: 768px) {
html {
    font-size: 13px;
}
}

@media (max-width: 480px) {
html {
    font-size: 12px;
}
}


h1, h2, h3, h4, h5, h6, p {margin: 0;}

a{
    text-decoration: none; 
    color: inherit; 
    outline: none;
}

.lh--100{line-height: 100%;}
.lh--120{line-height: 120%;}

input, textarea{
    border: none;
}
button{
    width: 21.875rem;
    cursor: pointer;
}
/* Базові кольори */
.bg--primary { background-color: rgba(94, 125, 255, 1); }
.bg--white { background-color: #ffffff; }
.bg--blue{background-color: #0C0F3F;}
.bg--form-input{background-color: #F8FAFF;}
.bg--black{background: #1D1D1D;}

.text--yelow{color: #FFD900;}
.text--yelow2{color: rgba(255, 166, 0, 1);}

.text_error{color: #FF8138;}
.text_error_black{color: #1D1D1D;}

.text--white { color: #ffffff; }
.text--blue{color: #0C0F3F;}
.text--primary { color: rgba(94, 125, 255, 1); }

.text--center{ text-align: center;}
.text--right{text-align: right;}

/* Шрифти */
.fs--1rem { font-size: 1rem; }
.fs--4rem { font-size: 4rem; }
.fs--2rem{font-size: 2.125rem;}
.fs--1_6rem { font-size: 1.6rem; }
.fs--12{font-size: 0.75rem;}
.fs--14{font-size: 0.875rem;}
.fs--16{ font-size: 1rem;}
.fs--18{font-size: 1.125rem;}
.fs--20{font-size: 1.25rem;}
.fs--24{font-size: 1.5rem;}
.fs--26{font-size: 1.625rem;}
.fs--32{font-size: 2rem;}
.fs--38{font-size: 2.375rem;}
.fs--40{font-size: 2.5rem;}
.fs--48{font-size: 3rem;}
.fs--64{font-size: 4rem;}
.fs--70{font-size: 4.375rem;}
.fs--260{font-size: 16.25rem;}


.fs--1_25rem { font-size: 1.25rem; }
.fw--700 { font-weight: 700; }
.fw--600 { font-weight: 600; }
.fw--500 { font-weight: 500; }
.fw--900 { font-weight: 900; }
.fw--300 { font-weight: 300;}

/* Відступи */
.pb--80{padding-bottom: 80px;}
.pt--80{padding-top: 80px;}
.pb--70{padding-bottom: 70px;}
.pt--70{padding-top: 70px;}
.pr--70{padding-right: 70px;}
.pr--76{padding-right: 76px;}
.pb--80{padding-left: 76px;}


.pt--10 { padding-top: 10px; }
.pb--10 { padding-bottom: 10px; }
.pl--10 { padding-left: 10px; }
.pr--10{padding-right: 10px;}

.pt--15 { padding-top: 15px; }
.pb--15 { padding-bottom: 15px; }
.pl--15 { padding-left: 15px; }
.pr--15{padding-right: 15px;}

.pt--16 { padding-top: 16px; }
.pb--16 { padding-bottom: 16px; }

.pt--19 { padding-top: 19px; }
.pb--19 { padding-bottom: 19px; }
.pl--19 { padding-left: 19px; }
.pr--19 { padding-right: 19px; }

.pt--20 { padding-top: 20px; }
.pb--20 { padding-bottom: 20px; }
.pl--20 { padding-left: 20px; }
.pr--20 {padding-right: 20px;}

.pt--32 { padding-top: 2rem; }
.pb--32 { padding-bottom: 2rem; }
.pl--32 { padding-left: 2rem; }
.pr--32 { padding-right: 2rem; }

.pb--36 { padding-bottom: 36px; }

.pt--25 { padding-top: 25px; }
.pb--25 { padding-bottom: 25px; }
.pl--45 { padding-left: 45px; }
.pr--45 { padding-right: 45px; }

.pt--40{ padding-top: 40px;}
.pb--40{ padding-bottom: 40px;}
.pl--30{ padding-left: 30px;}

.pr--86{padding-right: 86px;}

.pt--130{padding-top: 130px;}
.pt--100{padding-top: 100px;}
.pb--160{padding-bottom: 160px;}


.mt--8{margin-top: 8px;}
.mt--10{margin-top: 10px;}
.mb--10{margin-bottom: 10px;}
.mb--15{margin-bottom: 15px;}
.mt--20{margin-top: 20px;}
.mb--20{margin-bottom: 20px;}
.mr--20{margin-right: 20px;}

.mb--30{margin-bottom: 30px;}

.mt--40{margin-top: 40px;}
.mb--40{margin-bottom: 40px;}

.mt--50{margin-top: 50px;}
.mb--50{margin-bottom: 50px;}

.mt--64{margin-top: 64px;}
.mb--64{margin-bottom: 64px;}
.mt--120{margin-top: 120px;}
.mb--120{margin-bottom: 120px;}
.mb--75{margin-bottom: 75px;}

.mt--38{margin-top: 38px;}
/* Гнучкі блоки */
.flex { display: flex; }
.flex--row { flex-direction: row; }
.flex--column { flex-direction: column; }
.flex--center { align-items: center; }
.align-start{ align-items: flex-start;}
.flex--end {align-items: end;}
.flex--wrap{flex-wrap: wrap;}
.justify--center{justify-content: center;}
.justify--end{justify-content: end;}
.justify--between{justify-content: space-between;}
.align--center{  align-self: center;}

.gap--5{gap: 5px;}
.gap--8 { gap: 8px; }
.gap--12{gap: 12px;}
.gap--58 { gap: 58px; }
.gap--50{gap: 50px;}
.gap--40{gap: 40px;}
.gap--16 { gap: 16px; }
.gap--10{gap: 10px;}
.gap--38{gap: 38px;}
.gap--20{gap: 20px;}
.gap--24{gap: 24px;}

.grid{display: grid;}

.relative{position: relative;}

.memory-block .profile-block__container{
    grid-template-columns: 510px 510px;
    position: relative;
    gap: 118px;
}
    
.opacity--40{opacity: 40%;}
.opacity--50{color: rgba(12, 15, 63, 0.5);}

/* Радіуси, розміри */
.br--16 { border-radius: 1rem; }
.br--8 { border-radius: 0.5rem; }
.br--10{ border-radius: 10px;}
.br--20{ border-radius: 20px;}
.br--30{ border-radius: 30px;}
.br--26{border-radius: 26px;}
.overflow--hidden { overflow: hidden; }

/* Фото */
.profile-block__photo {
  width: 320px;
  height: 320px;
  position: relative;
}
.profile-block__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-block__icon{
    position: absolute;
    bottom: -46px;
    left: 35%;
}

/* Контейнер */
.profile-block__container {
  max-width: 1136px;
  margin: 0 auto;
}
.epitaph-block__container, .social-media__container{
    max-width: 1520px;
    margin: 0 auto;
}

.social-media__container{
    flex-wrap: wrap;
    justify-content: center;

}

.social-media-link{
    flex: 0 0 365px;
    width: 365px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.epitaph-block__container .epitaph-comment-block{
    max-width: 750px;
    width: -webkit-fill-available;
}

.social-media__container .social--img{
    max-width: 325px;
    width: 100%;
}

.social--icon{
    width: 46px;
}

.social--icon-custom{
    width: 30px;
    height: 48px;
}

.epitaph-post .img--gallery{
    max-width: 488px;
    width: 100%;
}
.post--placeholder{
    max-width: 77px;
}

.profile-block__quote{
    max-width: 310px;
}

button{border: none;}

.profile-block{
    padding: 212px 0 137px;
    border-radius: 0 0 60px 60px;
    background-image: url(/wp-content/plugins/memory-platform/assets/img/main-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.profile-block__separator{
    width: 100%;
    height: 2px;
    background: #fff;
    margin: 2px 0 3px;
}

.memory-block{
    border-radius: 60px;
    background-image: url(/wp-content/plugins/memory-platform/assets/img/memoy-bg.svg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}


.memory--img {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.memory--img img{
    border-radius: 15px;
}

.memory--date{
    background: #8EAAFF;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    width: fit-content;
}

.memory-block-info{
    max-width: 510px;
}

.memory-pet-block{
    max-width: 800px;
    width: -webkit-fill-available;
    margin: auto;
    
}

.epitaph-block{
    background-image: url(/wp-content/plugins/memory-platform/assets/img/Epitaph-bg.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
}

.epitaph-list{
    max-height: 1100px;
    overflow-y: auto;

}
/* Кастомний стилізований скрол */
.epitaph-list::-webkit-scrollbar {
width: 6px;
}

.epitaph-list::-webkit-scrollbar-track {
background: #dde2e7;
border-radius: 8px;
}

.epitaph-list::-webkit-scrollbar-thumb {
background: #4c6fff;
border-radius: 8px;
}

.candle-img{
    position: relative;
    max-width: 431px;
    border-radius: 200px;
}
.candle-icon {
    position: absolute;
    left: 42%;
    bottom: 0;
}

.candle-form{
    width: 350px;
}

.candle-form button{
    width: -webkit-fill-available;
}

.btn__upload{
    background-color: #0C0F3F;
    max-width: 258px;
    padding: 16px;
}


/* 1. Глобальні стилі блоку та фону */
.registration__block {
    height: 100vh;
    margin: auto;
    background: url("/wp-content/plugins/memory-platform/assets/img/reg__bg.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover; /* cover краще за 100%, щоб не було дірок на великих екранах */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px
}

.error__block {
    height: 100vh;
    margin: auto;
    background-image: url("/wp-content/plugins/memory-platform/assets/img/error_bg.png");
    background-color: #FFEAEA;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px
}

@media(max-width:1024px){
    .profile-block__container{
        grid-template-columns:auto !important;
    }
    .epitaph-block__container{
        flex-flow: column;
        padding: 0;
    }
     .social-media__container {
        flex-wrap: wrap;
        justify-content: center;
    }
    .sta-text{
        font-size: 34px;
    }
    .fs--2rem {
        font-size: 1.8rem;
    }
    .epitaph-block{
        background-image:none;
    }
    #epitaph button{
        width: -webkit-fill-available;
    }
    .epitaph-block__container .epitaph-comment-block, .epitaph-block__container .epitaph-comment-block{
        max-width: -webkit-fill-available;
        margin: 0 20px;
    }

}

@media(max-width:600px){
    .registration__block{
        background-image: url("/wp-content/plugins/memory-platform/assets/img/reg__bg_mob.png");
    }

    .err-page svg{
        width: 4.651rem;
    }

    .fs--48{font-size: 1.688rem;}
    .fs--260{font-size: 7.875rem;}


    .error__block{
        background-image: url("/wp-content/plugins/memory-platform/assets/img/error_bg_mob.png");
    }
    .error__block p{
        font-size: 1.688rem;
    }
    .epitaph-block__container .epitaph-comment-block, .epitaph-block__container .epitaph-comment-block{
        margin: 0;
    }
}

/*іконка розділювач на лендинг*/
.custom-divider {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Ідеальне центрування */
    top: 0;
    bottom: 0; /* Лінія розтягується від верху до низу контейнера */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 37px;
    z-index: 1; /* Щоб лінія була над фоном, але не перекривала текст */
}

/* Трішки відсунемо контент від лінії, щоб він не налізав на неї */
.memory-block-info {
    z-index: 2;
    position: relative;
    max-width: 450px; /* Або інша ширина, щоб блоки стояли у дві колонки */
}

.divider-top {
    width: 100%;
    height: 196px;
    background: url('http://espogady.nightowl.host/wp-content/plugins/memory-platform//assets/img/template_top_icon.svg') no-repeat center bottom;
    flex-shrink: 0; /* Щоб верх не стискався */
}

.divider-middle {
    width: 100%;
    /* 1. Вимикаємо flex-grow, щоб JS міг сам ставити висоту в px */
    flex: none; 
    
    /* 2. Чистий запис фону (прибираємо повтори з shorthand) */
    background-image: url('http://espogady.nightowl.host/wp-content/plugins/memory-platform//assets/img/template_middle_icon.svg');
    
    /* 3. Використовуємо repeat-y або round */
    background-repeat: repeat-y; 
    background-position: center top;
    
    /* 4. contain допоможе підігнати ширину ромбика під ширину блоку */
    background-size: 100% 140px;
    
    /* 5. Плавність для анімації розширення */
    transition: height 0.3s ease;
    
    /* 6. Додай мінімальну висоту, щоб блок не схлопнувся, поки JS не спрацював */
    min-height: 1px;
}

.divider-bottom {
    width: 100%;
    height: 196px; 
    background: url('http://espogady.nightowl.host/wp-content/plugins/memory-platform//assets/img/template_bottom_icon.svg') no-repeat center top;
    flex-shrink: 0;
}

/*Лендинги*/
.text--primary svg, 
.text--primary svg path {
    stroke: currentColor;
}
button svg, 
button svg path {
    stroke: currentColor;
}

/* Додаємо невеликий відступ, щоб стрілочка не липла до тексту */
button svg {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
/* ==========================================================================
   1. DEFAULT THEMES (Classic)
   ========================================================================== */

/* DarkSlateBlue */
.DarkSlateBlue .bg--primary, .DarkSlateBlue .memory-block, .DarkSlateBlue footer { background-color: #522C7F; }
.DarkSlateBlue .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.DarkSlateBlue .text--primary { color: #522C7F; }
.DarkSlateBlue .footer-social-icon svg rect { fill: rgba(82, 44, 127, 0.3); }
.DarkSlateBlue .footer-line { background: rgb(153 113 199 / 50%) !important; }
.DarkSlateBlue .footer-social-icon:hover svg path { fill: #522C7F; }

/* Navy */
.Navy .bg--primary, .Navy .memory-block, .Navy footer { background-color: #001C83; }
.Navy .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_dark_blue_bg.svg); }
.Navy .text--primary { color: #001C83; }
.Navy .footer-social-icon svg rect { fill: rgba(0, 28, 131, 0.3); }
.Navy .footer-line { background: rgb(115 134 201 / 50%) !important; }
.Navy .footer-social-icon:hover svg path { fill: #001C83; }

/* Black */
.Black .bg--primary, .Black .profile-block, .Black .memory-block, .Black footer { background-color: #200F00; }
.Black .profile-block { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_brown_bg.svg); }
.Black .text--primary { color: #200F00; }
.Black .footer-social-icon svg rect { fill: rgba(32, 15, 0, 0.3); }
.Black .footer-line { background: rgb(179 118 64 / 50%) !important; }
.Black .footer-social-icon:hover svg path { fill: #200F00; }

/* Olive */
.Olive .bg--primary, .Olive .profile-block, .Olive .memory-block, .Olive footer { background-color: #9A7900; }
.Olive .profile-block { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_yellow_bg.svg); }
.Olive .text--primary { color: #9A7900; }
.Olive .footer-social-icon svg rect { fill: rgba(154, 121, 0, 0.3); }
.Olive .footer-line { background: rgb(183 165 100 / 50%) !important; }
.Olive .footer-social-icon:hover svg path { fill: #9A7900; }


/* ==========================================================================
   2. MILITARY THEMES
   ========================================================================== */

/* MidnightBlue */
.MidnightBlue .bg--primary, .MidnightBlue .memory-block, .MidnightBlue footer { background-color: #131D4C; }
.MidnightBlue .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.MidnightBlue .text--primary { color: #131D4C; }
.MidnightBlue .footer-social-icon svg rect { fill: rgba(19, 29, 76, 0.3); }
.MidnightBlue .footer-line { background: rgb(133 142 185 / 50%) !important; }
.MidnightBlue .footer-social-icon:hover svg path { fill: #131D4C; }

/* DarkOliveGreen */
.DarkOliveGreen .bg--primary, .DarkOliveGreen .memory-block, .DarkOliveGreen footer { background-color: #43331B; }
.DarkOliveGreen .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.DarkOliveGreen .text--primary { color: #43331B; }
.DarkOliveGreen .footer-social-icon svg rect { fill: rgba(67, 51, 27, 0.3); }
.DarkOliveGreen .footer-line { background: rgb(213 177 123 / 50%) !important; }
.DarkOliveGreen .footer-social-icon:hover svg path { fill: #43331B; }

/* OliveDrab (Corrected to #525800) */
.OliveDrab .bg--primary, .OliveDrab .memory-block, .OliveDrab footer { background-color: #525800; }
.OliveDrab .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.OliveDrab .text--primary { color: #525800; }
.OliveDrab .footer-social-icon svg rect { fill: rgba(82, 88, 0, 0.3); } /* Відповідає #525800 */
.OliveDrab .footer-line { background: rgb(163 167 102 / 50%) !important; }
.OliveDrab .footer-social-icon:hover svg path { fill: #525800; }

/* DarkGreen */
.DarkGreen .bg--primary, .DarkGreen .memory-block, .DarkGreen footer { background-color: #092B00; }
.DarkGreen .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.DarkGreen .text--primary { color: #092B00; }
.DarkGreen .footer-social-icon svg rect { fill: rgba(9, 43, 0, 0.3); }
.DarkGreen .footer-line { background: rgb(68 117 55 / 50%) !important; }
.DarkGreen .footer-social-icon:hover svg path { fill: #092B00; }


/* ==========================================================================
   3. PET THEMES (White Body + Accents)
   ========================================================================== */

body.MediumOrchid, body.Orange, body.DarkGoldenRod, body.DarkTurquoise { background-color: #f5f5f5; }

/* SeaGreen */
body.SeaGreen { background: linear-gradient(130deg, #86FFD9 0%, #FFD2AF 100%); }
.SeaGreen .bg--primary, .SeaGreen .memory-block, .SeaGreen footer { background-color: #18784F; }
.SeaGreen .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.SeaGreen .text--primary { color: #18784F; }
.SeaGreen .footer-social-icon svg rect { fill: rgba(24, 120, 79, 0.3); }
.SeaGreen .footer-line { background: #1D6647 !important; }
.SeaGreen .footer-social-icon:hover svg path { fill: #18784F; }

/* MediumOrchid */
.MediumOrchid .bg--primary, .MediumOrchid .memory-block, .MediumOrchid footer { background-color: #BA65C0; }
.MediumOrchid .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.MediumOrchid .text--primary { color: #BA65C0; }
.MediumOrchid .footer-social-icon svg rect { fill: rgba(186, 101, 192, 0.3); }
.MediumOrchid .footer-line { background: rgb(244 170 249 / 50%) !important; }
.MediumOrchid .footer-social-icon:hover svg path { fill: #BA65C0; }

/* Orange */
.Orange .bg--primary, .Orange .memory-block, .Orange footer { background-color: #F1B500; }
.Orange .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.Orange .text--primary, .Orange .text--yelow, .Orange .text--white{ color: #462D00; }
.Orange .footer-social-icon svg rect { fill: rgba(241, 181, 0, 0.3); }
.Orange .footer-line { background: #462D00 !important; }
.Orange .footer-social-icon:hover svg path { fill: #F1B500; }

/* DarkGoldenRod */
.DarkGoldenRod .bg--primary, .DarkGoldenRod .memory-block, .DarkGoldenRod footer { background-color: #ADAD00; }
.DarkGoldenRod .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.DarkGoldenRod .text--primary { color: #ADAD00; }
.DarkGoldenRod .footer-social-icon svg rect { fill: rgba(173, 173, 0, 0.3); }
.DarkGoldenRod .footer-line { background: rgb(93 93 44 / 50%) !important; }
.DarkGoldenRod .footer-social-icon:hover svg path { fill: #ADAD00; }

/* DarkTurquoise */
.Peru .bg--primary, .DarkTurquoise .memory-block, .DarkTurquoise footer { background-color: #A38058; }
.Peru .bg--primary { background-image: url(/wp-content/plugins/memory-platform/assets/img/landing_purple_bg.svg); }
.Peru .text--primary { color: #A38058; }
.Peru .footer-social-icon svg rect { fill: #A38058; }
.Peru .footer-line { background: #c19c70 !important; }
.Peru .footer-social-icon:hover svg path{ fill: #c19c70; }
.Peru footer { background-color: #A38058;}





.view_pet .memory-block{
    background-image: 
        url('/wp-content/plugins/memory-platform/assets/img/memory_bg-pet.png'), 
        url('/wp-content/plugins/memory-platform/assets/img/view_pet_bg.png');
    background-repeat: 
        no-repeat,  
        repeat;    
    background-position: 
        bottom, /* верхнє по центру */
        top;      /* патерн з кута */

    /* Налаштовуємо розмір */
    background-size: 
        auto,       /* верхнє вписується в блок */
        auto;
    background-blend-mode: luminosity;
}

.view_pet .epitaph-block{
    background-image:url(/wp-content/plugins/memory-platform/assets/img/epitaph-block-pet.png);
    background-size: auto;
}
.view_pet .profile-block{
        background-image: url(/wp-content/plugins/memory-platform/assets/img/view_pet_bg.png);
        background-repeat: repeat;
}

.view_military .profile-block, .view_military .memory-block {
        background-image: url(/wp-content/plugins/memory-platform/assets/img/military_bg.png);
        background-repeat: repeat;
}

.military-award, .pet-label {
    padding: 7px 10px;
    border-radius: 2px;
}

.military-award, .pet-label{
    background: linear-gradient(45deg, rgba(15, 13, 11, 0.5), transparent);
}

.military-award img, .pet-label img{
    width: 26px;
}






/* Контейнер */
.profile-block__container2 {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Вісь по центру */
.custom-divider2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 37px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}




.map-wrapper {
    height: 560px;
    box-shadow: 0px 20px 40px rgba(12, 15, 63, 0.1);
}

/* Робимо карту темною (Dark Mode Hack) */
.map-iframe {
    filter: grayscale(1) invert(0.9) hue-rotate(180deg) brightness(0.8) contrast(1.2);
    pointer-events: all;
}

.map-card {
    position: absolute;
    bottom: -150px;
    right: 20px;
    transform: translateY(-50%);
    width: 100%;
    max-width: 420px;
    z-index: 10;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
}

.map-btn {
    transition: all 0.3s ease;
    text-decoration: none;
}

.map-btn:hover {
    background-color: #4a66cc;
    transform: translateY(-2px);
}



/* Адаптив для майбутнього (мобілка) */
@media (max-width: 1024px) {
    .map-card {
        position: static;
        transform: none;
        max-width: -webkit-fill-available;
        margin-top: -50px; /* Наплив на карту на мобілці */
    }
    .map-wrapper {
        height: auto;
    }
    
    
}


@media (max-width: 768px) {
    /* 1. ГАРАНТУЄМО СІТКУ 2х2 */
    .memory--img {
        display: flex;
        flex-wrap: wrap;
        gap: 12px !important; /* Відступ між фото */
        justify-content: flex-start !important;
        margin-top: 20px;
    }

    .memory--img img {
        width: calc(45% - 6px) !important; 
        aspect-ratio: 1 / 1; 
        object-fit: cover;
        border-radius: 12px;
    }

    /* 2. СКИДАЄМО ДЕСКТОПНІ "СХОДИНКИ" */
    .memory-block-info2 {
        margin-bottom: 50px !important; /* Замість від'ємного маржину */
        padding-top: 0 !important;      /* Прибираємо зсув непарних блоків */
        width: 100% !important;
    }

    /* 3. ВИРІВНЮЄМО ТЕКСТ */
    .memory-content-box {
        padding-left: 45px !important;  /* Відступ від лінії, що тепер зліва */
        padding-right: 0 !important;
        text-align: left !important;
    }
    .footer-nav .list--none{
        flex-flow: column;
    }
}



.footer {
    /* Якщо смуги на фоні — це окрема картинка, розкоментуй: */
    /* background-image: url('../img/footer-stripes.svg'); */
    /* background-size: cover; */
}

.list--none {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: background 0.3s ease;
}

.footer-social-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.footer-social-icon img {
    width: 20px;
    height: 20px;
}

/* Ефект для посилань */
.hover-link {
    transition: 0.3s ease;
    padding: 8px 16px;
    border-radius: 8px;
}


/* Активне посилання (як "Про нас" на макеті) */
.hover-link:hover {
    position: relative;
    background: rgba(20, 26, 103, 0.6);
    
}

.hover-opacity:hover {
    opacity: 1 !important;
}
.footer-social-icon svg path, .footer-social-icon svg rect{
    transition: 0.3s ease;
}
.footer-social-icon:hover svg path{
    fill: #0F53FF;
}
.footer-social-icon:hover svg rect{
    fill: #fff;
}



@media (max-width: 1200px) {
    /* 1. Контейнер: додаємо відступ зліва для іконки */
    .profile-block__container2 {
        padding-left: 50px; /* Місце для розділювача */
        display: flex;
        flex-direction: column;
        gap: 40px; /* Фіксований відступ між блоками замість сходинок */
    }

    /* 2. Розділювач: переносимо в самий лівий край */
    .custom-divider2 {
        left: 15px;
        transform: none; /* Прибираємо translateX(-50%) */
    }

    /* 3. Картки: скидаємо всі десктопні марджини та падінги */
    .memory-block-info2 {
        width: 100% !important;
        margin-bottom: 0 !important; /* Прибираємо накладання (-150px) */
        margin-top: 0 !important;
        padding-top: 0 !important; /* Прибираємо падінг для сходинки (150px) */
        justify-content: flex-start !important; /* Всі картки притискаємо вліво */
    }

    /* 4. Бокс з контентом: скидаємо ширину та вирівнювання */
    .memory-content-box {
        width: 100% !important;
        max-width: -webkit-fill-available;
        text-align: left !important; /* Весь текст вліво */
        padding-left: 20px; /* Невелика відстань від золотої лінії */
        padding-right: 0 !important;
    }

    /* 5. Картинки: вирівнюємо на старт для всіх блоків */
    .memory--img {
        justify-content: flex-start !important;
        max-width: 510px;
    }

    
}

.profile-block-mob{
    display: none;
}

@media(max-width:820px){
    .profile-block{
        background-image: url(/wp-content/plugins/memory-platform/assets/img/memory_bg_default.svg);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .profile-block__container{
        justify-content: flex-start;
    }
    .profile-block__dates{
        flex-flow: column;
        align-items: flex-start;
        gap: 13px;
    }
    .profile-block-mob{
        display: flex;
        flex-flow: column;
        margin-top: 50px;
    }
    .profile-block-desk{
        display: none;
    }

    .profile-block__photo {
        margin-left: -26px;
        width: 180px;
        height: 180px;
    }

    .profile-block__img{
        border-radius: 0 20px 20px 0;
    }


    .profile-block__icon {
        bottom: -24px;
        right: 0;
        left: inherit;
        width: 46px;
    }
    .profile-block-inner-photo{
        gap: 20px;
    }
    .year{
        font-size: 34px;

    }
}

@media(max-width:600px){
    profile-block__button{
        width: -webkit-fill-available;
    }
}







  .rewards-grid {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  /* Мала іконка */
  .thumb {
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    padding: 4px;
  }
  
  .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  
  /* Активна іконка */
  .thumb.active {
    border-color: #FFCC00;
    background: #ffffff;
  }
  
  /* Картка деталізації */
  .reward-details-card {
    display: flex;
    background: #FFFFFF;
    border-radius: 15px;
    padding: 14px;
    gap: 20px;
    color: #333;
  }
  
  .card-image {
    width: 82px;
    height: 82px;
    flex-shrink: 0;
  }
  
  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  
  .card-content h3 {
    margin: 0;
    font-size: 16px;
    line-height: 120%;
    color: #1D6647;
  }
  
  .card-content p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 100%;
  }