* {padding:0;margin:0;}
html{width:100%;height:100%;box-sizing:border-box;padding:0;margin:0;font-size:1em;color:#5D2E1A;background-color:ivory;overflow-y:auto;overflow-x:hidden;}/*с помощью box-sizing:border-box включаем paddingи в размеры блока; задаём размер шрифта корневого элемента для вёрстки с rem на случай отказа медийных запросов ниже*/

/*ЗАДАЁМ РАЗМЕР ШРИФТА КОРНЕВОГО ЭЛЕМЕНТА В ЗАВИСИМОСТИ ОТ ШИРИНЫ ЭКРАНА УСТРОЙСТВА:*/
@media screen and (max-device-width: 800px) {html{font-size:0.70em;}}/*для устройств с шириной экрана менее 800px*/
@media screen and (min-device-width: 800px) {html{font-size:0.75em;}}/*для устройств с шириной экрана более 800px*/
@media screen and (min-device-width: 900px) {html{font-size:0.75em;}}
@media screen and (min-device-width: 1000px) {html{font-size:0.80em;}}
@media screen and (min-device-width: 1100px) {html{font-size:0.80em;}}
@media screen and (min-device-width: 1200px) {html{font-size:0.80em;}}
@media screen and (min-device-width: 1300px) {html{font-size:0.85em;}}
@media screen and (min-device-width: 1400px) {html{font-size:0.85em;}}
@media screen and (min-device-width: 1500px) {html{font-size:0.85em;}}
@media screen and (min-device-width: 1600px) {html{font-size:0.90em;}}
@media screen and (min-device-width: 1700px) {html{font-size:0.90em;}}
@media screen and (min-device-width: 1800px) {html{font-size:0.90em;}}
@media screen and (min-device-width: 1900px) {html{font-size:1.00em;}}
@media screen and (min-device-width: 2000px) {html{font-size:1.00em;}}
@media screen and (min-device-width: 2100px) {html{font-size:1.1em;}}
@media screen and (min-device-width: 2200px) {html{font-size:1.15em;}}
@media screen and (min-device-width: 2300px) {html{font-size:1.20em;}}
@media screen and (min-device-width: 2500px) {html{font-size:1.25em;}}
@media screen and (min-device-width: 2600px) {html{font-size:1.3em;}}
/*разрешение моего ноутбука 1366x768*/
/*разрешение моего большого монитора 1920x1080*/
/*разрешение моего нового смартфона 2280x1080*/
/*разрешение моего старого смартфона 1280×720*/
/*эмпирически значение device-width моего смартфона 350-400 */
/*пример обводки: text-shadow: #ccff00 2px 0 0px, #ccff00 0 2px 0px, #ccff00 -2px 0 0px, #ccff00 0 -2px 0px;*/

/* ЦВЕТОВАЯ СХЕМА САЙТА */
/*
ФОН - Ivory (слоновая кость, #FFFFF0) (альтернатива Floral White (#FFFAF0) — «Теплый песок»)
ЦВЕТ ТЕКСТА - «Глубокий Каштан» #5D2E1A - цвет выглядит «породисто» и завершает выбранную палитру.
НАЗВАНИЕ САЙТА: #A0522D - «Пряная корица» (Sienna)
Он идеально рифмуется с IndianRed, являясь его «старшим братом». 
На фоне Ivory он выглядит как солнечный блик на кирпичной кладке.
ДЛЯ ЗАГОЛОВКОВ (H1): #8B4513 — Saddle Brown (Насыщенный терракот)
Самый темный и серьезный цвет в этой группе. 
Он отлично читается и задает структуру страницы. 
Похож на цвет хорошо обожженной глины.
ДЛЯ НАЗВАНИЙ АНКЕТ И ПОСТОВ: #CD5C5C — Indian Red (Приглушенный рыже-красный)
Этот оттенок чуть светлее и мягче. 
Он выделяет имена питомцев в списке, делая их заметными, но не кричащими. 
Вызывает ассоциации с теплом и дружелюбием.
ДЛЯ РАМОЧЕК ФОРМ И НАЗВАНИЙ АНКЕТ И ПОСТОВ ПРИ НАВЕДЕНИИ КУРСОРА: #E9967A — Dark Salmon (Мягкий лососевый)
Нежный, пастельный терракот. 
Он идеально подходит для тонких линий и границ. 
Рамочки в таком цвете не будут «резать» глаз на фоне Ivory, создавая ощущение легкости.
ДЛЯ МАРКЕРОВ В АНКЕТАХ: #6B8E23 Благородный Оливковый (OliveDrab)
ССЫЛКИ:
Обычное состояние: #A0522D (Sienna / Глиняный). 
Он заметно отличается от основного текста, но выглядит мягко.
При наведении (:hover): #CD5C5C (IndianRed / Теплый коралловый). 
Ссылка становится чуть светлее и «теплее», имитируя отклик.
*/

/* ОБЩИЕ СВОЙСТВА */
@media (orientation: portrait) {.not_display_on_portraits{display:none;}}/*не отображать на устройствах с портретной ориентацией*/
@media (orientation: landscape) {.not_display_on_landscapes{display:none;}}/*не отображать на устройствах с горизонтальной ориентацией*/
.favorite_color{color:steelblue;}
body {width:100%;height:100%;overflow:auto;font-family:'Montserrat',sans-serif;}/*'Nunito', 'Alice', serif, 'Gabriela' */
.no_line_breaks,.nowrap{white-space: nowrap;}
.text_align_center{text-align:center;}
.text_align_justify{text-align:justify;}
.text_align_left{text-align:left;}
.text_align_right{text-align:right;}
.color_red{color:red;}
.color_green{color:green;}
.color_dimgrey{color:Dimgrey;}
.color_grey{color:grey;}
.color_yellow{color:yellow;}
.bold{font-weight:bold;}
.italic{font-style:italic;}
.display_inline{display:inline-block;}

/*чекбоксы и радио в формах*/
input[type="checkbox"],input[type="radio"] {accent-color: #CD5C5C;}

.styled_block{width:100%;box-sizing:border-box;text-align:justify;
font-size:1.5rem;line-height:2.0rem;border-radius:2rem;
border-style:solid;border-color:rgba(233, 150, 122, 0.35);border-width:2px;
padding:2%;margin-bottom:2%;}/*формат анкет и блоков*/

.form,#confirmation_of_sent_message{width:100%;box-sizing:border-box;text-align:left;
font-size:1.5rem;line-height:2.0rem;border-radius:2rem;
border-style:solid;border-color:rgba(233, 150, 122, 0.35);border-width:2px; 
padding:2%;margin:0%;}
legend{color:#8B4513;font-weight:bold;}
input, select{padding:0.1rem;font-family:Arial,Verdana,sans-serif;font-size:1.1rem;}
textarea{padding:0.1rem;width:100%;box-sizing:border-box;font-family:Arial,Verdana,sans-serif;font-size:1.1rem;}
.button{font-family:'Montserrat Alternates',Verdana,sans-serif;font-size:1.2rem;color:#5D2E1A;border-radius: 10rem;
padding:0.5rem 1rem 0.5rem 1rem;margin:0% 1% 1% 0%;border:solid;border-color:rgba(233, 150, 122, 1.0);border-width:2px;background-color: transparent; } /*формат всех кнопок сайта #cae1ff #bcd2ee #cae1ff __#b9d3ee__ #c6e2ff*/
.button:hover{cursor:pointer;background-color: rgba(233, 150, 122, 0.35);} /*background: #d1eeee;  __#cae1ff__*/
.button_registration{margin:0% 1% 0% 0%;}
/*ВСЕ ССЫЛКИ*/
a{color:#A0522D;} 
a:hover {color:#CD5C5C;} 

/* ВЫРАВНИВАНИЕ ПО ЦЕНТРУ НА СТРАНИЦАХ*/
.content_vertically_centered{display:flex;flex-direction:column;justify-content:center;}
#central_block{width:100%;min-height:80%;background-color:transparent;
font-size: 1.5rem;line-height:2.5rem;
text-align:justify;box-sizing:border-box;padding:1% 8% 3% 8%;}/*было padding:2%;*/


/*СТИЛИЗАЦИЯ ТЕКСТА ПОД ССЫЛКУ*/
.link{color:#0078ce;cursor:pointer;text-decoration:underline;} 
.link:hover{color:#0000cd;} 

/*СТИЛИЗАЦИЯ ССЫЛКИ ПОД КНОПКУ*/
.link_as_button {
/* Основные надстройки для ссылок-кнопок */
display: inline-block;        /* Позволяет задавать padding и margin */
text-decoration: none;        /* Убираем подчеркивание ссылки */
text-align: center;
vertical-align: middle;
cursor: pointer;

/* Ваш стиль */
font-family: 'Montserrat Alternates', Verdana, sans-serif;
font-size: 1.2rem;
border-radius: 10rem;
padding: 0.1rem 1.5rem;       /* Немного увеличил боковые отступы для формы "пилюли" */
margin: 10px 5px;             /* Пиксели здесь надежнее процентов */
margin:2% 1% 1% 0%;
border: 2px solid rgba(233, 150, 122, 1.0);
background-color: transparent;/* Прозрачный фон по умолчанию */
color: #5D2E1A;
transition: all 0.3s ease;    /* Плавная анимация при наведении */
}


/* Эффект при наведении */
.link_as_button:hover {
background-color: rgba(233, 150, 122, 0.35);  /* Заливка цветом */
color: #5D2E1A;
}

@media screen and (max-width: 768px) {
.form{text-align:left;}
.form,.styled_block,.blog_post_box{margin-left:-2%;margin-right:-2%;width:104%;}
.single_standing_link{font-size: 1.6rem;}
.button,.link_as_button{font-size:1.5rem;margin-top:6px;} /*формат всех кнопок сайта*/
.dropbtn,a,.button{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;}/*убираем появление синего фона при клике*/
input,textarea,select{font-size:1.7rem;}
input[type="date"],input[type="time"]{margin-top:1%;margin-bottom:1%;}
textarea{padding:0.3rem;}
#central_block{padding:1% 4% 4% 4%;font-size: 1.35rem;line-height:2.2rem;}
}

/*ВИДЕО*/
.post_media_block,.event_media_block{display: flex;flex-direction:column;justify-content:center;align-items:center;}
.video_frame{width:50vw;height:28.125vw;}


/* HEADER */
#header {height:10%;width:100%;/*высота блока БЫЛА адаптивная (min-height) - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся ниже в единицах vh*/
padding-left:1%;padding-right:1%;box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
font-size:1.5rem;line-height:2.0rem;
text-align:center;
position:relative;display: flex;flex-direction:row;justify-content:space-between;align-items:center;
}

/* The sticky class is added to the header with JS when scrolled*/
.sticky_header {
position: sticky !important;
top: 0;
background-color:cornsilk; /*#f1f1f1*/
background-color:rgba(255,248,220,0.90);
z-index:10;
}

#navigation_panel{list-style-type:none;display:inline-block;width:100%;margin-top:0%;
font-family: 'Montserrat Alternates',sans-serif;font-size:1.8rem;}/*был margin-top:1%; */
.navigation_panel_element {display:inline;padding:1%;margin:0%;}
.navigation_panel_link{color:#8B4513;;text-decoration:none;} 
.navigation_panel_link:hover {text-decoration:underline;color:#CD5C5C;} 
/* На компьютерах скрываем ссылки внутри гамбургера, которые дублируют основное горизонтальное меню */
.dropdown-content a.mobile-only-link {display: none !important;}
/* На экранах меньше 768px (на мобильных) скрываем второстепенные ссылки в основном горизонтальном меню и показываем их в гамбургере*/
@media (max-width: 768px) {
#navigation_panel{font-size:1.8rem;}
/* Скрываем ссылки в центральном меню*/
.navigation_panel_element.desktop-only {display: none !important;}
/* Включаем отображение этих ссылок внутри гамбургера */
.dropdown-content a.mobile-only-link {display: block !important; /* или inline-block, в зависимости от ваших стилей dropdown */}
}

#avatar_link{height:8.5vh;display:inline-block;float:right;margin-right:2%;}/*высота блока header адаптивная - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся единицах vh*/
#avatar_image{height:100%;display:inline-block;}
.empty_avatar_image{height:8.5vh !important;display:inline-block;float:right;margin-right:2%;}/*нужно для корректного отображения пустой аватарки, !important переписывает более сильный дескриптор #avatar_image*/
#dropdown_menu_block{height:8.5vh;display:inline-block;float:right;}
#dropdown_navigation_block{height:8.5vh;display:inline-block;float:left;}
 
#header_personal_menu_image{display:inline-block;height:100%;margin:0;}
#header_navigation_menu_image{display:inline-block;height:100%;margin:0;}

#header_login_link{height:8.5vh;display:inline-block;float:right;}
#header_login_image{height:100%;}

#header_menu_controls{display: flex;flex-direction:row;justify-content:space-between;align-items:center;}/*этот блок группирует иконки хедера; padding-right в header + padding-right здесь = 1+3=4%, что соответствует padding в central_block; был установлен */
/*из header_menu_controls исключен padding-right:3%; для выравнивания нав панели по центру на смартфоне*/
@media screen and (min-device-width: 1000px) and (orientation: landscape)
{/*на больших горизонтальных экранах блок с иконками исключается из нормального потока для выравнивания навигационной панели строго по центру*/
#header_menu_controls{position:absolute;right:1%;}/*padding в header_menu_controls + right в position absolute = 3+1=4%, что соответствует padding в central_block*/
}

#header_navigation_controls{display: flex;flex-direction:row;justify-content:space-between;align-items:center;}/*этот блок группирует иконки хедера; padding-right в header + padding-right здесь = 1+3=4%, что соответствует padding в central_block; был установлен */
/*из header_menu_controls исключен padding-right:3%; для выравнивания нав панели по центру на смартфоне*/
@media screen and (min-device-width: 1000px) and (orientation: landscape)
{/*на больших горизонтальных экранах блок с иконками исключается из нормального потока для выравнивания навигационной панели строго по центру*/
#header_navigation_controls{position:absolute;left:1%;}/*padding в header_menu_controls + right в position absolute = 3+1=4%, что соответствует padding в central_block*/
}

@media screen and (max-width: 768px) {
/*иконки в панели навигации*/
#header_menu_controls{margin-top:0%;}/*этот блок группирует иконки хедера*/
#header_navigation_controls{margin-top:0%;}/*этот блок группирует иконки хедера*/
#avatar_link{height:5vh;display:inline-block;margin-right:0.5%;}/*высота блока header адаптивная - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся единицах vh*/
.empty_avatar_image{height:5vh !important;display:inline-block;float:right;margin-right:0.5%;}/*нужно для корректного отображения пустой аватарки, !important переписывает более сильный дескриптор #avatar_image*/
#header_login_link{height:5vh;display:inline-block;}
}
/* ЛЭНДИНГ И ПОСЛЕДУЮЩИЕ БЛОКИ*/
#landing{height:90%;width:100%;position:relative;}
/*
#landing::before {content: "";top: -20%;left: 0;bottom: 0;right: 0; 
position: absolute;z-index:-1;
background:linear-gradient(to bottom right, rgba(204, 0, 204, 0.4) 20%, rgba(255, 51, 0, 0.3) 66%, rgba(242, 113, 33, 0.2) 100%);
}
*/
/*-20% обеспечивает подложку фона под header, который не входит в landing*/

#landing::after {
content: ""; background-image: url("/images/landing_background.jpg"); 
/* 1. Включаем повторение во все стороны */
background-repeat: repeat; 
/* Если картинка крупная, можно задать размер в пикселях (например, 200px), 
чтобы масштаб лапок был одинаковым везде */
background-size: 200px auto; 
background-position: top left;
top: -20%;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: 0.05;
}

/* Для смартфонов (портретная ориентация) */
@media (orientation: portrait) {
#landing::after {
/* Если паттерн один и тот же, вторую картинку можно не подгружать */
/* Но можно уменьшить размер лапок, чтобы они смотрелись аккуратнее */
background-size: 200px auto; 
}
}

#welcome_page {
height: 100%; /* Используйте vh, чтобы блок точно занимал всю высоту экрана */
width: 100%;
position:relative;box-sizing:border-box;background-color:none;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
overflow: hidden; 
/* Задаем отступ сверху здесь */
padding-top: 0; 
/* далее также, как в central_block */
font-size: 1.5rem;line-height:2.5rem;
text-align:justify;box-sizing:border-box;padding:1% 8% 3% 8%;
}
@media screen and (max-width: 768px) {
#welcome_page{padding:1% 4% 4% 4%;font-size: 1.35rem;line-height:2.2rem;}
}

/* КОШКА НЕДЕЛИ */
/* Контейнер, который забирает всё оставшееся место */
.cat-of-the-week-container {
flex: 1; 
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0; /* Разрешает блоку сжиматься, если заголовок слишком большой */
padding: 1rem;
box-sizing: border-box;
}

/* Ссылка-обертка */
.cat-link {
display: flex;           /* Включаем flex вместо block */
justify-content: center; /* Центрируем по горизонтали */
align-items: center;     /* Центрируем по вертикали */
width: 100%;
height: 100%; 
min-height: 0;
}

/* Самое важное для универсальности фото */
.cat-link img {
max-width: 100%;
/* Вместо height: 100% */
max-height: 100%; 
/* Оставляем, это гарантирует отсутствие искажений */
object-fit: contain; 
/* Ширина должна быть автоматической, чтобы не растягивать фото */
width: auto;
height: auto;
border-radius: 15px; /* Красивые скругленные углы */
/* Центрирование внутри выделенной области */
transition: transform 0.3s ease; /* Добавим приятный эффект при наведении */
}

/* Эффект при наведении на котика */
.cat-link:hover img {
transform: scale(1.02); /* Легкое увеличение */
}

/* ФОРМАТЫ ЗАГОЛОВКОВ НА ГЛАВНОЙ И ОСТАЛЬНЫХ СТРАНИЦАХ */
h1#title{font-family: 'Playfair Display', serif;
font-size: 4.0rem;padding:0% 0% 0% 0%;margin: 0;line-height:4rem;color:#A0522D;text-align:center;} /*#B87333*/

#subtitle{font-family: 'Montserrat Alternates', sans-serif;
font-size: 2.0rem;line-height:2rem;padding:0% 0% 0% 0%;margin-bottom:2%;margin-top:1%;color:#CD5C5C;text-align:center;}

/* заголовки на главной странице (кроме названия) и заголовки на остальных страницах */
.cat-of-the-week-container>h2, .content>h2, #how_to_help>h2, .content>h1 {width:100%;box-sizing:border-box;padding:4% 2% 4% 2%;
font-family: 'Montserrat Alternates', sans-serif;font-weight:400;
color:#8B4513;text-align:center;font-size: 2.5rem;line-height:3.0rem;}
.cat-of-the-week-container>h2{padding:1% 2% 1% 2%;}/* переопределяем для заголовка кошка недели, иначе мало остаётся места на фото */
/* заголовки постов на главной странице и на остальных страницах */
.blog_post_box h1, .blog_post_box h2, .blog_post_box h3 {width:100%;box-sizing:border-box;padding:1% 2% 1% 2%;
font-family: 'Montserrat Alternates', sans-serif;font-weight:400;
color:#CD5C5C;text-align:center;font-size: 2.3rem;line-height:2.8rem;}
/*название в анкетах покрупнее */
.pet_name_in_card{font-size: 2.8rem;font-weight:700;}

@media screen and (max-width: 768px) {
h1{font-size:2.0rem;}
h1#title{font-size: 2.5rem;line-height:2rem;}
#subtitle{font-size:1.5rem;line-height:1.5rem;margin-top:2%;}
.tippy-box[data-theme~='tippy_box_style'] {font-size:1.4rem;}
/* заголовки на главной странице (кроме названия) и заголовки на остальных страницах */
.cat-of-the-week-container>h2, .content>h2, #how_to_help>h2, .content>h1 {font-size: 2.0rem;line-height:2.5rem;margin-top:4%;margin-bottom:4%;}
.content>h1 {margin-top:0%;}/*иначе слишком много места между верхней панелью и заголовком на отдельных страницах*/
/* заголовки постов на главной странице и на остальных страницах */
.blog_post_box h1, .blog_post_box h2, .blog_post_box h3 {font-size: 1.7rem;line-height:2.2rem;margin-top:2%;margin-bottom:2%;}
/*название в анкетах покрупнее */
.pet_name_in_card{font-size: 2.0rem;line-height:2.5rem;}
}

/* КРАТКОЕ ОПИСАНИЕ НА ГЛАВНОЙ */
/*#description{width:100%;box-sizing:border-box;
text-align:justify;padding:1% 8% 0% 8%;font-size: 1.5rem;line-height:2.5rem;}*/

/* АНИМИРОВАННЫЙ СТИКЕР */
#note {
/* Используем clamp, чтобы сердечко не было меньше 80px и больше 250px */
width: clamp(80px, 20vw, 250px);
height: clamp(80px, 20vw, 250px);
transform: rotate(-15deg);
position: absolute;
right: 5%;
top: 40%;
z-index: 10; /* Убедитесь, что оно над фоном */
cursor: pointer;
}

#note_text {
text-anchor: middle;
/* На смартфонах 1.5vw превратится в пыль, задаем минимальный порог */
font-size: clamp(12px, 2vw, 24px); 
font-family: 'Caveat', cursive;
fill: #8B4513;
pointer-events: none; /* Чтобы текст не мешал клику по блоку */
}

/* Адаптация для смартфонов (портретный режим) */
@media (max-width: 768px) {
#note {
/* Увеличиваем минимальный размер до 160px и ширину до 40vw */
width: clamp(100px, 30vw, 200px);
height: clamp(100px, 30vw, 200px);
right: 0%; /* Чуть прижимаем к краю, чтобы не мешало контенту */
top: 80%;  /* Можно поднять чуть выше, если мешает клавиатуре или меню */
}
#note_text {
/* Увеличили текст: минимум с 12px до 24px, шаг с 2vw до 4vw */
font-size: clamp(24px, 4vw, 36px);
display: none !important; /* текст не отображается */
}
}

/* СПИСОК КАК ПОМОЧЬ */
#ul_how_to_help{list-style-position: inside;margin-left:0%;}
#ul_how_to_help li{margin-top:1.5%;margin-bottom:1.5%;}
#ul_how_to_help{list-style: none;}/* меняем дефолтные маркеры списка */
#ul_how_to_help li::before {content: "\f6be";color:#6B8E23;font-family:'Font Awesome 6 Free';font-weight: 900;padding-right:2%;}
/* СПИСОК КАК ПОДГОТОВИТЬСЯ К КОШКЕ, КАК ЗАБРАТЬ КОШКУ ИЗ ПРИЮТА, КАК ВЗЯТЬ ПОД ОПЕКУ, КАК ЗАКАЗАТ КОРМ */
#ul_prepare_for_cat,#ul_take_cat,#ul_cats_guardianship,#ul_send_parcel,#ul_send_parcel_adresses
{list-style-position: inside;margin-left:0%;}
#ul_prepare_for_cat li,#ul_take_cat li,#ul_cats_guardianship li,#ul_send_parcel li,#ul_send_parcel_adresses li
{margin-top:1.5%;margin-bottom:1.5%;}
#ul_prepare_for_cat,#ul_take_cat,#ul_cats_guardianship,#ul_send_parcel,#ul_send_parcel_adresses{list-style: none;}/* меняем дефолтные маркеры списка */
#ul_prepare_for_cat li::before ,#ul_take_cat li::before,#ul_cats_guardianship li::before,#ul_send_parcel li::before,#ul_send_parcel_adresses li::before
{content: "\f6be";color:#6B8E23;font-family:'Font Awesome 6 Free';font-weight: 900;padding-right:2%;}

/* АНКЕТЫ И ПОСТЫ*/
.slogan{font-family: 'Caveat', cursive; color: #8B4513; font-size:2rem;}/*слоган рядом с аватаркой*/
.blog_post_box{width:100%;box-sizing:border-box;
border-radius:2rem;border-style:solid;border-color:rgba(233, 150, 122, 0.35);border-width:2px; 
padding:2%;margin:0%;}/*border-color:#E9967A (Dark Salmon) */

/*иконки awesome в заголовках постов*/
.fa-calendar-days,.fa-clock {color:steelblue;}/*цвет иконок awesome*/
/*иконки awesome в анкетах*/
.pet_card_marker{color:#6B8E23;}/*цвет иконок awesome*/

.post_images_block{width:100%;text-align:center;}
.post_image{display:inline-block;width:100%;border-radius:1rem;}
.post_title_link{color:#CD5C5C;text-decoration:none;}
.post_title_link:hover{color:#E9967A;text-decoration:underline;}
/*видео*/
.post_media_block{display: flex;flex-direction:column;justify-content:center;align-items:center;}

/*иконки awesome*/
.fa-magnifying-glass-plus{color:#A0522D;}/*иконка перед ссылкой на форму поиска*/
.fa-circle-plus{color:#A0522D;}/*иконка перед ссылкой создать новый пост или анкету*/
/*иконки календаря и часов, закрепа в хедере поста или анкеты*/
.calendar_in_post_header,.clock_in_post_header,.thumbtack_in_post_header{color:#E9967A;}

@media screen and (max-width: 768px) {
.blog_post_box{margin-left:-2%;margin-right:-2%;width:104%;}
}

/* ФУТЕР */
#footer{width:100%;min-height:10%;box-sizing:border-box;
font-family: 'Montserrat',sans-serif;font-size:1.5rem;line-height:2.0rem;color:#8B4513;
text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
border-top:solid;border-color:rgba(233, 150, 122, 0.35);}

.footer_link{color:#8B4513;margin:0.5% 1% 0% 1%;vertical-align:middle;text-underline-offset:0.2rem;}
.footer_link:hover {color:#0000cd;}

/* ФОРМА ЗАГРУЗКИ АВАТАРКИ */
#upload_avatar_button{color:black !important;} /* дополняет стили .button*/

/* СТРАНИЦЫ ЛИЧНОГО КАБИНЕТА (с формами и контентом)*/
/*иконка подсказки*/
.tool_tip{font-weight:bold;color:green;}
/*стилизация блока с подсказкой*/
.tippy-box[data-theme~='tippy_box_style'] {
font-family:'Arial', serif;font-size:1.2rem;
background-color: lavender;color: black;
border:solid;border-color:grey;border-width:1px;border-radius:0.5rem;
}
/*стилизация стрелок*/
.tippy-box[data-theme~='tippy_box_style'][data-placement^='top'] > .tippy-arrow::before {
border-top-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='bottom'] > .tippy-arrow::before {
border-bottom-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='left'] > .tippy-arrow::before {
border-left-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='right'] > .tippy-arrow::before {
border-right-color: grey;
}

/* АВАТАРКИ В ФОРМАХ*/
.person_avatar_link{width:5%;display:inline-block;vertical-align:middle;}
.person_avatar_image{width:100%;display:inline-block;vertical-align:middle;}
.empty_person_avatar_image{width:5%;display:inline-block;vertical-align:middle;}/*нужно для корректного отображения пустой аватарки*/


/* более красивая вёрстка аватарки и текста - аватарка и несколько текстовых строк посередине*/
.person_info_block{width:100%;text-align:left;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;}
.person_avatar_link_flex,.empty_person_avatar_image_flex{width:5%;flex:0 0 5%;margin:0.25% 1% 0.25% 0%;}/* flex:grow shrink basis*/
.empty_person_avatar_image_flex{vertical-align:middle;}/* без этого свойства выравнивание будет по базовой линии*/
.person_avatar_image_flex{width:100%;vertical-align:middle;}
.input_in_interactive_forms{margin-right:0.5%;}/*промежуток после флажка перед аватаркой*/

@media screen and (max-width: 768px) {
/* аватарки в формах*/
.person_avatar_link,.person_avatar_icon{width:15%;}
.empty_person_avatar_image{width:15%;}/*нужно для корректного отображения пустой аватарки*/
/* более красивая вёрстка аватарки и текста - аватарка и несколько текстовых строк посередине*/
.person_avatar_link_flex,.empty_person_avatar_image_flex{width:15%;flex:0 0 15%;margin:0.75% 3% 0.75% 0%;}/* flex:grow shrink basis*/
.empty_person_avatar_image_flex{vertical-align:middle;}/* без этого свойства выравнивание будет по базовой линии*/
.person_avatar_image_flex{width:100%;vertical-align:middle;}
}

/* РАСКРЫВАЮЩЕЕСЯ МЕНЮ */
/* Кнопка выпадающего списка */
.dropbtn {
/*background-color: #3498DB;*/
display:inline-block;height:100%;
cursor: pointer;
}
a.navigation_panel_link.dropbtn{opacity:1.0;}/*это селектро ссылки выпадающего меню*/

/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
position: relative;
display: inline-block;
vertical-align: top;
height:100%; box-sizing:border-box;/* added */
padding-top:2%;padding-bottom:2%; /* added */
}

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content {
font-family: 'Montserrat Alternates',sans-serif;
display: none;
position: absolute;
background-color:cornsilk; /*#f1f1f1*/
background-color:rgba(255,248,220,0.90);
z-index: 1000;
overflow:auto;/* added */
font-size:1.3rem;/* added */
border-radius:1rem; /* added */
}
div.dropdown-content#navigation_menu{width:600%;left: 0%;}/*от размера кнопки с иконкой*/
div.dropdown-content#personal_menu{width:600%;right: 0%;}/*от размера кнопки с иконкой*/


/*если нужно выровнить выпадающее меню по центру ссылки на больших экранах*/
/*@media screen and (min-device-width: 1000px) and (orientation: landscape)
{div.dropdown-content#common_menu{left: -100%;}}*/

/*кнопка выхода в выпадающем меню*/
#logout_btn{font-size:1.3rem;padding: 1% 5% 1% 5%;margin: 1% 5% 4% 5%;}

/* Ссылки внутри выпадающего списка */
.dropdown-content a{
color: #5D2E1A;
padding: 1% 5% 1% 5%;
text-decoration: none;
display: block;
}

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover {background-color: papayawhip;background-color: rgba(255,239,213,1.0);}

/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show {display:block;} 

@media screen and (max-width: 768px) {
#dropdown_menu_block,#dropdown_navigation_block{height:6vh;}
div.dropdown-content#navigation_menu{width:700%;}/*от размера кнопки с иконкой*/
div.dropdown-content#personal_menu{width:700%;}/*от размера кнопки с иконкой*/
.dropdown-content,#logout_btn{font-size:1.7rem;}
/* Ссылки внутри выпадающего списка */
.dropdown-content a {padding: 2% 5% 2% 5%;}

}

/*ФОРМА ПОИСКА*/
.breed-grid,.color-grid,.character-grid,.fur-grid,.age-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 600px;
}
.breed-item,.color-item,.character-item,.fur-item,.age-item {
display: flex;
align-items: center;
background: rgba(233, 150, 122, 0.15);
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.breed-item input, .color-item input, .character-item input,.fur-item input,.age-item input{
margin-right: 8px;
}



/*ФОРМА ЗАГРУЗКИ ФОТО*/
.photo-manager {display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 5px; font-family: sans-serif; }
.photo-card { 
width: 130px; border: 1px solid #ddd; padding: 5px; border-radius: 8px; 
text-align: center; background: #fff; 
}
/* Выделяем обложку */
.photo-card.is-cover { border: 2px solid #E9967A; background: #f9fff9; }
.photo-card img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; }

.cover-badge { 
background: cornsilk; color: #E9967A; font-size: 11px; 
font-weight: bold; padding: 2px 0; margin-bottom: 5px; border-radius: 4px; 
}
.delete-label { color: #d9534f; font-size: 12px; cursor: pointer; display: block; margin-top: 5px; }

.empty-slot { 
height: 100px; display: flex; align-items: center; justify-content: center; 
background: #fdfdfd; border: 1px dashed #ccc; color: #aaa; 
font-size: 12px; border-radius: 4px; margin-bottom: 5px;
}

/* Прячем уродливый стандартный инпут, который всё распирает */
/* ПРАВИЛЬНОЕ СКРЫТИЕ ИНПУТА БЕЗ СДВИГА ФУТЕРА */
/* ПОЛНАЯ ИЗОЛЯЦИЯ ИНПУТА ПОСЛЕ ВЫБОРА ФАЙЛОВ */
.file-upload-btn input[type="file"] {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
cursor: pointer;
display: block !important;

/* Магия против раздувания: */
overflow: hidden !important;
pointer-events: auto !important;
z-index: 1;
}

/* Сделаем родительскую кнопку относительной, чтобы инпут расширялся только ВНУТРИ неё */
.file-upload-btn {
position: relative; /* Критически важно! */
display: inline-block;
padding: 10px 20px;
background-color: #e9967a;
color: white;
border-radius: 5px;
cursor: pointer;
max-width: 100%;
box-sizing: border-box;
}


/* ФОТОАЛЬБОМ fancy box - ФОТО В АКЕТАХ И ПОСТАХ в ленте */
/* стиль инстаграмм - миниатюры строго квадратные, 3 в строоке на смартфонах, 4 в строке на компьютерах, при клике открываются в оригинальной пропорции*/
.photo-gallery-fb {
display: flex;
flex-wrap: wrap;
gap: 10px;
/* Центрируем элементы, если их меньше, чем ширина ряда */
justify-content: center; 
width: 100%;
margin: 0 auto;
}

/* mini фото - 3 в ряд для мобильных - ПОСТЫ и АНКЕТЫ*/
.photo-gallery-fb a.mini {
display: block;
/* 3 фото в ряд для мобильных (отнимаем gap) */
width: 31%; 
padding: 0 1%; 
box-sizing: border-box;
flex-grow: 0;
flex-shrink: 0;
}

/* midi фото в ряд для мобильных - ПОСТЫ */
.photo-gallery-fb a.midi {
display: block;
width: 48%;
padding: 0 1%;
box-sizing: border-box;
flex-grow: 0;
flex-shrink: 0;
}

/* maxi фото в ряд для мобильных - ПОСТЫ */
.photo-gallery-fb a.maxi {
display: block;
width: 100%;
padding: 0 1%;
box-sizing: border-box;
flex-grow: 0;
flex-shrink: 0;
}

/* Этот блок занимает 100% ширины и ПРИНУДИТЕЛЬНО ПЕРЕНОСИТ ВСЁ, ЧТО ПОСЛЕ НЕГО */
.photo-gallery-fb .flex-break {
width: 100%;
flex-basis: 100%;
height: 0; /* Делаем его невидимым */
margin: 0; /* Убираем лишние отступы */
}

.photo-gallery-fb img {
width: 100%;
aspect-ratio: 1 / 1; /* Квадратная сетка */
object-fit: cover;
display: block;
border-radius: 16px; /* Легкое закругление углов */
transition: transform 0.2s ease-in-out;
}

.photo-gallery-fb a:hover img {
filter: brightness(0.8);
}

/* Для компьютеров (4 фото в ряд для мини, 1 - для макси, 2 - для миди) */
@media (min-width: 1024px) {

/* 4 фото в ряд (Базовый стиль для мини или если класс не указан) */
.photo-gallery-fb a.mini {
width: 24%;/* взято 24 вместо 25 для надёжности */
padding: 0 1.5%;
box-sizing: border-box;
}

/* 2 фото в ряд (Midi) */
.photo-gallery-fb a.midi {
width: 40%;
padding: 0 2%;
box-sizing: border-box;
}

/* 1 фото в ряд (Maxi) */
.photo-gallery-fb a.maxi {
width: 100%; /* Это ширина всей конструкции с полями, НЕ УКАЗЫВАТЬ Б 100% */
padding: 0 25%; /* За счет больших полей само фото уменьшается до 50% в центре */
box-sizing: border-box;
}
}

/* Для очень узких экранов (если 3 фото в ряд становится слишком мелко) */
@media (max-width: 400px) {
.photo-gallery-fb a {
width: 50%; /* 2 фото в ряд */
padding: 0 1%; 
}
}


/* ФОТОАЛЬБОМ fancy box - ФОТО на обложке В АНКЕТЕ */
.photo-gallery-fb-cover {
display: flex;
justify-content: center; /* Центрируем по горизонтали */
width: 100%;
margin: 0 auto 25px auto;
}

.photo-gallery-fb-cover a {
display: block;
/* Ширина обложки: на ПК 300px, на смартфонах 90% экрана */
width: 90%; 
max-width: 300px; /* ограничитель */
}

.photo-gallery-fb-cover img {
width: 100%;
aspect-ratio: 1 / 1; /* Строгий квадрат */
object-fit: cover;   /* Умная обрезка краев, центр сохраняется */
display: block;
border-radius: 15px; /* Красивые скругленные углы */
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: opacity 0.3s;
}

.photo-gallery-fb-cover a:hover img {
opacity: 0.9;
}

/* На мобильных устройствах */
@media (max-width: 480px) {
.photo-gallery-fb-cover a {
	max-width: 95%; /* На маленьких телефонах почти во весь экран */
}
}


/* ЗАГРУЗКА АВАТАРКИ */
/* Контейнер, в котором лежит аватарка и кнопка */
.avatar-container {
display: flex;
flex-direction: column; /* Элементы друг под другом */
align-items: center;    /* Центрирование по горизонтальной оси */
justify-content: center;
width: 100%;            /* Занимаем всю ширину родителя */
margin: 0 auto;         /* Центрируем сам контейнер */
}

/* Стили для самой аватарки или области Croppie */
#avatar-current, #avatar-cropper {
margin-bottom: 15px;    /* Отступ до кнопки */
display: flex;
justify-content: center;
}

/* Убеждаемся, что у кнопки нет лишних боковых margin */
.avatar-container .button {
margin-left: 0;
margin-right: 0;
}