@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{
	padding: 0px ;
	margin: 0px ;
}
body{
	background-color: #F4F5FA ;
	font-family: 'Montserrat', sans-serif ;
	color: #282828 ;
	font-size: 14px ;
	overflow-x: hidden ;
}
header{
	padding: 10px 15px ;
	max-width: 1000px ;
	margin: 0px auto 0px auto ;
	display: grid ;
	grid-template-columns: 150px 1fr 150px ;
	grid-gap: 20px ;
}
header > div{
	display: flex ;
	align-items: center ;
}
header .logo a{
	text-decoration: none ;
	color: #282828 ;
}
header .logo img{
	height: 25px ;
}
header .logo h1{
	font-size: 18px ;
}
header .logo h1 span,
footer .footer-top .logo span{
	color: #8792C7  ;
}
header .search-bar{
	display: grid ;
	grid-template-columns: 1fr minmax(50px,300px) 1fr;
	margin: 0px auto ;
	position: relative ;
}
header .search-bar > a{
	display: flex ;
	align-items: center ;
	justify-content: center ;
	height: 27px ;
	width: 27px ;
	background-color: #E5E7F3 ;
	transition-property: background-color ;
	transition-duration: 0.25s ;
}
header .search-bar > a.btn-search-bar{
	border-radius: 0px 5px 5px 0px ;
}
header .search-bar > a.btn-slt-category{
	border-radius: 5px 0px 0px 5px ;
}
header .search-bar > a svg{
	height: 14px ;
	width: 14px ;
	fill: #8792C7 ;
	transition-property: fill ;
	transition-duration: 0.25s ;
}
header .search-bar > a:hover{
	background-color: #8792C7 ;
	cursor: pointer ;
}
header .search-bar > a:hover svg{
	fill: #E5E7F3 ;
}
header .search-bar input{
	font-size: 14px ;
	font-family: 'Montserrat', sans-serif ;
	color: #282828 ;
	background-color: #FFFFFF ;
	padding: 5px 10px ;
	border: 0px ;
	outline: none ;
	box-sizing: border-box ;
	width: 100%;
}
header .search-bar input::placeholder{
	color: #BFBFBF ;
	transition-property: color ;
	transition-duration: 0.25s ;
}
header .search-bar input:hover::placeholder{
	color: #7F7F7F ;
}
header .search-bar .search-autocomplete-box{
	width: calc( 100% - 55px ) ;
	left: 27.5px ;
}
header .search-bar .search-autocomplete-box,
header .search-bar .list-category-search{
	display: block ;
	position: absolute ;
	z-index: 999 ;
	border-radius: 5px ;
	overflow: hidden ;
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	top: 30px ;
	opacity: 0 ;
	visibility: hidden ;
	transition-property: top , opacity , visibility ;
	transition-duration: 0.25s ;
	max-height: calc(100dvh - 100px) ;
	overflow-y: scroll ;
}
header .search-bar .search-autocomplete-box.active,
header .search-bar .list-category-search.active{
	top: 35px ;
	opacity: 1 ;
	visibility: visible ;
}
header .search-bar .search-autocomplete-box li{
	list-style: none ;
	flex: 1 1 auto ;
	white-space: nowrap ;
	overflow: hidden ;
	text-overflow: ellipsis ;
}
header .search-bar .list-category-search li a{
	text-decoration: none ;
	color: #282828 ;
}
header .search-bar .search-autocomplete-box li,
header .search-bar .list-category-search li a{
	display: block ;
	padding: 5px ;
	box-sizing: border-box ;
	background-color: #FFFFFF ;
	transition-property: background-color ;
	transition-duration: 0.25s ;
	font-size: 12px ;
}
header .search-bar .search-autocomplete-box li:hover,
header .search-bar .list-category-search li a:hover{
	background-color: #F2F2F2 ;
	cursor: pointer ;
}
header .my-user,
header .btn-login{
	display: flex ;
	gap: 10px ;
	justify-content: right ;
	align-items: center ;
	text-decoration: none ;
	color: #282828 ;
}
header .my-user .user-photo{
	width: 27px ;
	min-width: 27px ;
	height: 27px ;
	border-radius: 50% ;
	overflow: hidden ;
}
header .my-user .user-photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
header .btn-login{
	gap: 5px ;
}
main{
	padding: 10px 15px ;
	max-width: 1000px ;
	margin: 0px auto 0px auto ;
	min-height: calc(100vh - 225px) ;
}
footer {
	margin-top: 15px ;
	background-color: #002E48 ;
	color: #FFFFFF ;
	padding: 15px 0px 15px 0px ;
}
footer .footer-top .container{
	margin: 0px auto 0px auto ;
	width: calc(100% - 30px) ;
	max-width: 1000px ;
	display: grid ;
	grid-template-columns: repeat( 4 , 1fr ) ;
	grid-gap: 15px ;
	margin-bottom: 15px ;
}
footer .footer-top .title{
	font-size: 16px ;
	margin: 3px 0px 3px 0px ;
}
footer .footer-top .logo{
	font-weight: 800 ;
	margin-bottom: 5px ;
	text-decoration: none ;
	color: #FFFFFF ;
}
footer .footer-top .logo h1{
	font-size: 18px ;
}
footer .footer-top ul li{
	list-style: none ;
}
footer .footer-top ul li a{
	display: block ;
	padding: 2.5px 0px 2.5px 0px ;
	font-size: 12px ;
	color: #B3B3B3 ;
	text-decoration: none ;
	transition-property: color ;
	transition-duration: 0.25s ;
}
footer .footer-top ul li a:hover{
	color: #FFFFFF ;
}
footer .footer-top .info{
	font-size: 12px ;
	color: #B3B3B3 ;
}
footer .footer-bottom{
	padding: 5px 15px 0px 15px ;
	box-sizing: border-box ;
	width: 100% ;
	text-align: center ;
	color: #8792C7 ;
	font-size: 12px ;
}
.bubble-shopping-cart{
	display: block ;
	width: 40px ;
	height: 40px ;
	background-color: #E5E7F3 ;
	border-radius: 50% ;
	padding: 10.5px ;
	box-sizing: border-box ;
	position: fixed ;
	bottom: 15px ;
	right: 15px ;
	transition-property: background-color ;
	transition-duration: 0.25s ;
	z-index: 999 ;
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
	color: #8792C7 ;
	text-decoration: none ;
}
.bubble-shopping-cart:hover{
	background-color: #8792C7 ;
}
.bubble-shopping-cart svg{
	width: 100% ;
	height: 100% ;
	fill: #8792C7 ;
	transition-property: fill ;
	transition-duration: 0.25s ;
}
.bubble-shopping-cart:hover svg{
	fill: #E5E7F3 ;
}
.bubble-shopping-cart .number{
	position: absolute ;
	top: -10px ;
	right: -10px ;
	background-color: #FFFFFF ;
	padding: 4px ;
	border-radius: 50% ;
	font-size: 12px ;
	border: 2px solid #E5E7F3 ;
	width: 14px ;
	height: 14px ;
	text-align: center ;
	transition-property: border-color ;
	transition-duration: 0.25s ;
}
.bubble-shopping-cart:hover .number{
	border-color: #8792C7 ;
}
.center-title{
	font-size: 18px ;
	margin-bottom: 15px ;
	text-align: center ;
}
.modal{
	position: fixed ;
	top: 0px ;
	left: 0px ;
	width: 100vw ;
	height: 100vh ;
	background-color: rgba( 0 , 0 , 0 , 0.5) ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	visibility: hidden ;
	opacity: 0 ;
	transition-property: visibility , opacity ;
	transition-duration: 0.25s ;
}
.modal.active{
	visibility: visible ;
	opacity: 1 ;
}
.modal .modal-body{
	background-color: #FFFFFF ;
	border-radius: 5px ;
	padding: 10px ;
	min-width: 250px ;
	max-height: calc(100vh - 40px) ;
	overflow-y: scroll ;
}
.modal .modal-title{
	font-size: 18px ;
	text-align: center ;
	margin-bottom: 20px ;
}
.modal .modal-subtitle{
	margin-bottom: 10px ;
}
.modal .modal-subtitle span{
	font-weight: 700 ;
}
.modal .modal-button{
	display: block ;
	border-radius: 2.5px ;
	margin-top: 10px ;
	padding: 5px 10px 5px 10px ;
	background-color: #002E48 ;
	text-decoration: none ;
	color: #B3B3B3 ;
	text-align: center ;
	transition-property: color ;
	transition-duration: 0.25s ;
}
.modal .modal-button:hover{
	color: #FFFFFF ;
}
.modal .modal-button.disabled,
.modal .modal-button.disabled:hover{
	color: #002E48 ;
	background-color: #B3B3B3 ;
}
.modal hr{
	margin-bottom: 10px ;
}
@media(max-width: 700px){
	header .my-user .user-name,
	header .btn-login span{
		display: none ;
	}
	header{
		grid-template-columns: 100px 1fr 27px ;
	}
	header .logo img{
		height: 16px ;
	}
	header .btn-login{
		font-size: 12px ;
	}
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 4px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 250px;
    text-align: center;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-notification.success {
    background-color: #4CAF50;
    border-left: 4px solid #45a049;
}

.toast-notification.warning {
    background-color: #ff9800;
    border-left: 4px solid #f57c00;
    color: white;
}

.toast-notification.error {
    background-color: #f44336;
    border-left: 4px solid #d32f2f;
}
@media(max-width: 660px){
	footer .footer-top .container{
		grid-template-columns: repeat( 2 , 1fr ) ;
	}
}
@media(max-width:350px){
	header{
		grid-template-columns: 1fr 40px ;
		grid-template-areas: "logo logo" "search-bar login" ;
		grid-gap: 5px ;
	}
	header .logo{
		display: block ;
		grid-area: logo ;
		text-align: center ;
	}
	header .my-user{
		grid-area: login ;
	}
	header .search-bar{
		grid-area: search-bar ;
	}
	footer .footer-top .container{
		grid-template-columns: 1fr ;
		text-align: center ;
	}
	header .logo img{
		height: 25px ;
	}
}

/* Logos de pago en footer */
.payment-logos {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	align-items: center;
	justify-content: flex-start;
}

.payment-logos img {
	height: 24px;
	width: auto;
	border-radius: 3px;
	transition: transform 0.25s ease;
	background: white;
	padding: 2px 4px;
	border: 1px solid #e0e0e0;
	max-width: 60px;
}

.payment-logos img:hover {
	transform: scale(1.05);
}

@media(max-width: 480px){
	.payment-logos {
		justify-content: center;
	}
}