﻿/* Основные стили Ciudad Corazón */
body { padding-top: 0 !important; margin: 0; }
html { margin: 0; }

.bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
@media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } }

.bg-section-main {
    background: url('/img/top.png') center top no-repeat;
    background-size: cover;
    min-height: 200px;
}

@media (min-width: 992px) { .bg-section-main { min-height: 450px; } }

.bg-section {
    background: url('/img/top.png') center center no-repeat;
    background-size: cover;
    height: 80px;
}

@media (min-width: 992px) { .bg-section { height: 100px; } }

.bg-section-module {
  background-size: cover;
  min-height: 200px;
}



.navbar { background: transparent !important; }

.text-shadow-logo {
    text-shadow: 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff;
}


main {}
.main-top { margin-top: -50px; }



.img1 {
	width: 64px;
	height: 64px;
	object-fit: contain;
	transition: transform 0.2s ease;
}

/* hover именно на карточке, а не на img */
.cat-btn:hover .img1 {
	transform: scale(1.12);
}

.cat-btn {
	/*transition: transform 0.2s ease, box-shadow 0.2s ease;*/
	transition: transform 0.12s cubic-bezier(.34,1.56,.64,1);
}

.cat-btn.tap {
	transform: scale(0.94);
}

.cat-btn:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}


/* Кастомные классы для Bootstrap */
.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
}

.form-control.is-valid {
    box-shadow: 0 0 0 0.1rem rgba(25,135,84,.25);
}

.form-control.is-invalid {
    box-shadow: 0 0 0 0.1rem rgba(220,53,69,.25);
}


/* 🌸 Цвет проекта */
:root {
    --pink-main: #ff4da6;
    --pink-light: #ffe6f2;
}

/* пункты меню */
.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* hover эффект */
.menu-link:hover {
    background: var(--pink-light);
    color: var(--pink-main);
    transform: translateX(5px);
}

/* иконки */
.menu-link i {
    font-size: 18px;
    color: var(--pink-main);
    transition: 0.2s;
}

/* активное состояние (на будущее) */
.menu-link.active {
    background: var(--pink-main);
    color: #fff;
}

.menu-link:active {transform:scale(0.97);}

.menu-link.active i {
    color: #fff;
}

/* разделитель */
.menu-divider {
    margin: 15px 0;
    border-top: 1px solid #eee;
}

/* заголовок */
.menu-title {
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 8px;
}




/* нижнее меню */
.mobile-nav{
	position:fixed;bottom:0;left:0;width:100%;
	background:#fff;border-top:1px solid #eee;
	display:none;z-index:999;
}

/* показываем только на мобиле */
@media (max-width:768px){
	.mobile-nav{display:block;}
	body{padding-bottom:70px;} /* чтобы контент не перекрывался */
}

/* кнопки */
.mobile-link{
	flex:1;text-align:center;
	padding:8px 0;
	font-size:12px;
	color:#777;text-decoration:none;
	display:flex;flex-direction:column;
	align-items:center;justify-content:center;
	transition:0.2s;
}

/* иконка */
.mobile-link i{font-size:20px;margin-bottom:2px;}

/* hover */
.mobile-link:hover{color:#ff4da6;}

/* active */
.mobile-link.active{
	color:#ff4da6;
	background:#fff0f6;
	border-radius:12px;
	margin:4px;
}



.header-main{}
.header-page{}
.header-module{}

.header-bar{
	background:transparent!important;
}

.header-bar-module{
	background:linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,0))!important;
}

.header-logo-icon{
	width:32px;
	height:32px;
	object-fit:contain;
}

.header-avatar-btn{
	line-height:1;
}

.header-avatar{
	width:60px;
	height:60px;
	border-radius:50%;
	object-fit:cover;
}

.header-back{
	width:40px;
	height:40px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	color:#ff4da6;
	background:rgba(255,255,255,.75);
	backdrop-filter:blur(4px);
	transition:.2s;
}

.header-back i{
	font-size:22px;
	line-height:1;
}

.header-back:hover{
	color:#fff;
	background:#ff4da6;
	transform:translateY(-1px);
}


.btn-heart{
	display:block; /* важно для центрирования */
	width:60%; /* можно 50–75% — регулируй */
	margin:20px auto; /* центр по горизонтали */

	padding:14px 20px; /* крупнее */
	border-radius:16px;
	border:none;
	text-decoration:none;
	font-weight:600;
	font-size:18px;
	text-align:center;
	color:#fff;

	background:linear-gradient(135deg,#ff4da6,#ff7a18,#ffd93d);
	background-size:200% 200%;

	box-shadow:0 6px 16px rgba(255,100,150,0.4);
	transition:all .25s cubic-bezier(.34,1.56,.64,1);
	position:relative;
	overflow:hidden;
}

/* адаптив (чтобы на мобиле не была узкой) */
@media (max-width:768px){
	.btn-heart{
		width:90%;
		font-size:16px;
		padding:12px 16px;
	}
}

/* мягкое свечение */
.btn-heart:before{
	content:'';
	position:absolute;
	top:0;left:-100%;
	width:100%;height:100%;
	background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
	transition:.5s;
}

/* hover */
.btn-heart:hover{
	transform:translateY(-2px) scale(1.03);
	box-shadow:0 10px 25px rgba(255,120,0,0.5);
	background-position:100% 0;
	color:#fff;
}

/* пробегающий блик */
.btn-heart:hover:before{
	left:100%;
}

/* актив (тап как у тебя в карточках) */
.btn-heart:active{
	transform:scale(.95);
	box-shadow:0 4px 10px rgba(0,0,0,0.2);
}







