:root{

  --main-color: #00B98F;

}

/* Fonts */

@font-face{

	src: url("../fonts/ProximaNova/regular.otf");
	font-family: 'Proxima Nova';
	font-weight: 400;

}

@font-face{

	src: url("../fonts/ProximaNova/bold.otf");
	font-family: 'Proxima Nova';
	font-weight: 700;

}

@font-face{

	src: url("../fonts/RoadRadio/regular.ttf");
	font-family: 'Road Radio';
	font-weight: 400;

}

@font-face{

	src: url("../fonts/RoadRadio/bold.ttf");
	font-family: 'Road Radio';
	font-weight: 700;

}

/* Default Behavior */

body, html{margin: 0; font-family: 'Proxima Nova';}

h1, h3, h4{font-family: 'Road Radio';}
h1{font-size: 4rem;}
h3{font-size: 3rem;}
h4{font-size: 3rem;}
h5{font-size: 1rem; line-height: 1.25;}

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

input:not([hidden]), select:not([hidden]){padding: 10px 24px; background-color: #F3F3F7; border-radius: 16px; font-size: 0.875rem; color: #ADADAD;}

img,
svg{max-width: 100%; vertical-align: bottom;}

*{box-sizing: border-box; margin: 0; border: 0; background-color: initial;}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto;}

.btn{display: block; width: fit-content; background-color: var(--main-color); color: #fff; padding: 18px 24px; border-radius: 100px; font-family: 'Road Radio'; text-transform: uppercase; font-size: 1.125rem; font-weight: 700; cursor: pointer;}
.btn:not(.hollow){box-shadow: 0px 10px 50px 0px #00FF884D;}
.btn.hollow{border: 2px solid var(--main-color); background-color: transparent; color: var(--main-color);}

:is(.btn, .hoverable){outline: 2px solid transparent; outline-offset: -2px; transition: all .1s ease;}
:is(.btn, .hoverable):hover, .selected{outline: 2px solid var(--main-color); outline-offset: 2px;}

label.select{grid-template-areas: "title arrow" "option arrow"; grid-template-columns: 1fr max-content !important; grid-template-rows: repeat(2, min-content); align-items: center; padding: 12px; background-color: #F3F3F7; gap: 0 8px; border-radius: 16px; position: relative; user-select: none;width: 100%;}
label.select:not(:has(input.trigger[disabled])){cursor: pointer;}
label.select .datalist{display: grid; gap: 0px; position: absolute; top: calc(100% + 8px); min-width: 100%; max-height: 150px; overflow: auto; padding: 0; z-index: 5;}
label.select:not(:has(input.trigger:checked)) .datalist{display: none;}
label.select .datalist .option{padding: 6px; background-color: #F3F3F7; border-radius: 8px;height: 45px;border: 2px solid white;}
label.select h5{grid-area: title;}
label.select p{grid-area: option;}
label.select i{grid-area: arrow;}

label:is(.checkbox, .radio){gap: 6px; cursor: pointer;}
label:is(.checkbox, .radio) i{width: 20px; height: 20px; outline: 2px solid #D9D9D9; outline-offset: -2px; border-radius: 4px; transition: all .3s ease;}
label:is(.checkbox, .radio):hover i,
label:is(.checkbox, .radio):has(input:checked) i{outline: 2px solid var(--main-color);}
label:is(.checkbox, .radio) span{color: #212121; transition: all .3s ease;}
label:is(.checkbox, .radio):not(:has(input:checked)) span{opacity: .5;}

label.radio i{border-radius: 50%;}
label.radio:has(input:checked) i{background-image: radial-gradient(circle, var(--main-color) 0%, var(--main-color) 42%, rgba(0,0,0,0) 42%);}

label.checkbox:has(input:checked) i{display: flex; align-items: center; justify-content: center;}
label.checkbox:has(input:checked) i:before{content: '\2714'; color: var(--main-color); width: 16px;}

.row, .grid, .column{display: flex; gap: inherit;}
.column{flex-direction: column;}
.grid{display: grid;}
.grid.layered > *{grid-row: 1; grid-column: 1;}

/* Header */

header#mainHeader{padding: 48px 0 12px;}
header#mainHeader .content{justify-content: space-between; align-items: center; gap: 48px; font-weight: 700; font-size: 1.25rem;}
header#mainHeader img.logo{filter: brightness(0);}
header#mainHeader a.login{gap: 12px; font-size: 1rem;}

/* Footer */

footer#mainFooter{background-color: var(--main-color); padding: 60px 0 0; gap: 70px; color: #fff;}
footer#mainFooter img.logo{filter: brightness(0) invert(1);}
footer#mainFooter .content{grid-template-columns: max-content repeat(2, 1fr); gap: 0 150px;}
footer#mainFooter .content .column.socials{gap: 24px 50px;}
footer#mainFooter .content .column{gap: 30px;}
footer#mainFooter .content .column .column{gap: 15px;}
footer#mainFooter .content .column h5{font-family: 'Road Radio'; font-size: 1.5rem;}
footer#mainFooter .content .column :is(a,  address){gap: 20px; font-size: 1.125rem; font-style: initial;}
footer#mainFooter footer{background-color: #3D6C67;}
footer#mainFooter footer .content{justify-content: space-around; padding: 11px 0; align-items: center;}
footer#mainFooter footer .content .column{gap: 6px; align-items: flex-end;}

/* Banner */

section#banner{gap: 114px; padding-bottom: 204px; background: url("../../images/eventos/banner.jpg") no-repeat center / cover; color: #fff;}
section#banner img{filter: brightness(0) invert(1) !important;}
section#banner svg path{stroke: #fff;}
section#banner .content#bannerContent{gap: 24px 64px; align-items: start; justify-content: center;}
section#banner .content#bannerContent .column{width: 550px; max-width: 100%;}
section#banner .content#bannerContent .column a.btn{margin-top: 24px;}

/* Featured */

section#featuredEvents{padding: 48px 0;}
section#featuredEvents .content{gap: 24px;}
section#featuredEvents .featuredGrid{grid-template-columns: repeat(3, 1fr);}
section#featuredEvents article{grid-template-rows: 200px 1fr; overflow: hidden; border-radius: 18px; box-shadow: 4px 7px 30px 0px #3B85621A;}
section#featuredEvents article img{width: 100%; height: 100%; object-fit: cover;}
section#featuredEvents article header{padding: 24px; gap: 0 13px; align-items: center;}
section#featuredEvents article header time{align-items: center;}
section#featuredEvents article header time .month{font-size: 0.75rem; font-family: 'Road Radio'; font-weight: 700; color: var(--main-color);}
section#featuredEvents article header time .day{font-size: 1.75rem; font-weight: 700;}

/* AD */

section#ad .content{gap: 24px; align-items: center;}
section#ad #adBanner{padding: 156px 140px 48px; text-align: right; background: url("../../images/eventos/adBanner.jpg") no-repeat center / cover; color: #fff; border-radius: 18px;}
section#ad #adBanner h3{font-size: 4.875rem;}
section#ad h4{text-align: center; color: var(--main-color);}
section#ad p{line-height: 1.25rem; color: #808080; padding: 0 50px;}

/* Info */

section#info{padding: 48px 0;}
section#info .content{grid-template-columns: repeat(3, minmax(0, 300px)); gap: 20px 50px; justify-content: center;}
section#info .column .column{gap: 10px; align-items: start;}
section#info h5{font-size: 1.5rem; text-transform: uppercase; color: var(--main-color); font-weight: 700; font-family: 'Road Radio';}
section#info p{font-size: 0.875rem;}

/* Evento Slider */

section#slider{padding: 48px 0;}
section#slider wm-slider#eventoSlider{--active-element-align: center; grid-auto-columns: 1264px; user-select: none;}
section#slider wm-slider#eventoSlider div{display: flex; justify-content: center; padding: 0 32px; border-radius: 16px; overflow: hidden;}
section#slider wm-slider#eventoSlider div img{width: 100%;}
section#slider .content{grid-template-columns: repeat(2, max-content); justify-content: space-between; padding: 0 24px; z-index: 1;}
section#slider .content wm-slider-trigger[slide-to="left"] svg{rotate: 180deg;}
section#slider wm-slider#eventoSlider:has(div[active]:first-child) + .content wm-slider-trigger[slide-to="left"],
section#slider wm-slider#eventoSlider:has(div[active]:last-child) + .content wm-slider-trigger[slide-to="right"]{opacity: .5; pointer-events: none;}

/* Description */

section#description{padding: 48px 0;}
section#description .content{gap: 5px 0;}
section#description .content header{align-items: center; grid-template-columns: 1fr max-content;}
section#description .content iframe{aspect-ratio: 560/315; width: 100%; margin: 30px 0;}
section#description .content p{color: #808080; line-height: 2;}

/* Choose Accommodation */

section#chooseAccommodation{padding: 48px 0;}
section#chooseAccommodation .content{gap: 48px;}

section#chooseAccommodation .content .row.filters{justify-content: space-between; gap: 0 40px;}
section#chooseAccommodation .content .row.filters header h2{font-size: 1rem; font-weight: 400; color: #808080;}
section#chooseAccommodation .content .row.filters form{gap: 0 12px; align-items: center;width: 80%;}

section#chooseAccommodation .content .results{gap: 24px; grid-template-columns: repeat(3, 1fr);}
section#chooseAccommodation .content .results article{grid-template-columns: 1fr max-content; padding: 24px; gap: 24px; border-radius: 18px; box-shadow: 4px 7px 30px 0 rgb(59 133 98 / 10%); align-items: center; cursor: pointer; user-select: none;}
section#chooseAccommodation .content .results article h5{font-size: 1rem; font-weight: 700; line-height: 1.2;}
section#chooseAccommodation .content .results article h6{font-size: 0.75rem; font-weight: 700; color: var(--main-color);}
section#chooseAccommodation .content .results:not(:has(*:first-child)):before{content: 'Nenhuma acomodação encontrada'; font-size: 2rem; font-weight: 700; text-transform: uppercase; font-family: 'Road Radio';}
section#chooseAccommodation .content .results:not(:has(*:first-child)):after{content: 'Busque por acomodações através do filtro acima'; font-size: 1.125rem;}
section#chooseAccommodation .content .results:not(:has(*:first-child)){grid-template-columns: 1fr; gap: 2px; text-align: center; padding: 50px 0;}

section#chooseAccommodation .grid.additionalInfo{grid-template-columns: repeat(3, 1fr); gap: 26px;}
section#chooseAccommodation .grid.additionalInfo .column{gap: 12px 24px;}
section#chooseAccommodation .grid.additionalInfo .column .grid{grid-template-columns: repeat(2, 1fr);}

section#chooseAccommodation .disclaimer{gap: 12px;}
section#chooseAccommodation .disclaimer p{font-size: 0.875rem;}
section#chooseAccommodation .disclaimer p.conditions{color: #D47878; padding: 12px 24px; background-color: #F3F3F7; border-radius: 16px; line-height: 1.5rem;}

section#chooseAccommodation button[type="submit"]{align-self: end;}
section#chooseAccommodation button[type="submit"][disabled]{display: none;}

/* FAQ */

section#faq{padding: 40px 0;}
section#faq .content{gap: 60px 0;}
section#faq .content .column{gap: 24px;}

details summary.grid{padding: 12px 24px; grid-template-columns: 1fr max-content; background-color: #F3F3F7; border-radius: 16px; cursor: pointer;}
details summary.grid p{font-size: 1.5rem;}
details > p{padding: 16px 32px; line-height: 1.5;}

/* LOGIN */

main#login{grid-template-columns: max-content 1fr; width: 100vw; height: 100vh;}
main#login:after{content: ''; background: url("../../images/login_bg.jpg") no-repeat center / cover;}

main#login form{padding: 130px 95px; justify-content: center; gap: 15px; background: url(../../images/logo.png) no-repeat top 48px left 95px; min-width: 100%}
main#login form .inputArea{gap: 12px; align-items: stretch;}
main#login form .inputArea input, main#login form .inputArea select{width: 100%;}
main#login form button.btn{width: 100%; max-width: 100%;}
main#login form a{font-size: 0.875rem; color: var(--main-color); text-decoration: underline;}
main#login form a:not(:hover){opacity: .5; color: #212121;}
main#login form a:last-child{align-self: center;}

/* Know More Dialog */

dialog#knowMoreDialog:not([open]){opacity: 0; pointer-events: none;}
dialog#knowMoreDialog{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; padding: 15px; border: 0; background-color: #18181a; color: #fff; gap: 20px; min-width: 300px; max-width: 90vw; animation: backdropFadeIn .3s ease;}
dialog#knowMoreDialog::backdrop{background: rgba(0 0 0 / 40%); backdrop-filter: blur(10px); animation: backdropFadeIn .3s ease forwards;}
dialog#knowMoreDialog.closing,
dialog#knowMoreDialog.closing::backdrop{animation: backdropFadeOut .3s ease;}
dialog#knowMoreDialog a{color: #fff; font-size: 1rem;text-align: center;padding: 5px;margin: 10px;}
dialog#knowMoreDialog header{display: grid; grid-template-areas: "title close"; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px;}
dialog#knowMoreDialog header h5{font-size: 32px; font-weight: 700;}
dialog#knowMoreDialog header button{color: #fff;}
dialog#knowMoreDialog .column{display: flex; flex-direction: column; gap: 5px;}

@keyframes backdropFadeIn{

  0%{opacity: 0;}
  100%{opacity: 1;}

}
@keyframes backdropFadeOut{

  0%{opacity: 1;}
  100%{opacity: 0;}

}

/* Under Construction */

main#underConstruction{display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #570b15;}
main#underConstruction section#initial{width: 100%; height: 100%; background: url(../../images/inicial-desktop.jpg) no-repeat center / 100%;}
main#underConstruction section#initial .buttons{position: absolute; right: 10%; bottom: 10%; width: 40%; display: flex; justify-content: space-around;}
main#underConstruction section#initial .buttons button{cursor: pointer;}

/* Evento */

body:has(main#evento){--main-color: #4F1317;}
body:has(main#evento) footer#mainFooter footer{background-color: #3F0C0F;}
body:has(main#evento) .btn:not(.hollow){box-shadow: 0px 10px 50px 0px #3F0C0F4D;}

/* Responsive */

@media(min-width: 900px){

	.mobile{display: none;}

}

@media(max-width: 899px){

	body{overflow-x: hidden;}
	details summary.grid p{font-size: 1rem;}

	.desktop{display: none;}

	h1{font-size: 2.5rem;}
	h3{font-size: 2rem;}
	h4{font-size: 1.5rem;}

	header#mainHeader{position: relative; z-index: 1;}
	header#mainHeader a:has(img.logo){transition: all .3s ease;}
	header#mainHeader label[for="menuTrigger"]{border: 1px solid #000; width: 40px; height: 30px; border-width: 3px 0; transition: all .3s ease; display: flex; align-items: center;}
	header#mainHeader label[for="menuTrigger"]:before{content: ''; height: 3px; width: 100%; background-color: #000; transition: all .3s ease;}
	header#mainHeader nav{position: absolute; top: 0; left: 0; right: 0; flex-direction: column; padding: 144px 5vw 50px; height: 100vh; align-items: flex-end; background-color: #fff; color: #000; transition: all .3s ease; z-index: -1;}
	header#mainHeader nav:not(:has(input#menuTrigger:checked)){transform: translateX(100%);}
	header#mainHeader nav svg path{stroke: #000;}

	header#mainHeader:has(input#menuTrigger:checked) label[for="menuTrigger"]{border-color: #000;}
	header#mainHeader:has(input#menuTrigger:checked) label[for="menuTrigger"]:before{background-color: #000;}

	section#banner header#mainHeader label[for="menuTrigger"]{border-color: #fff;}
	section#banner header#mainHeader label[for="menuTrigger"]:before{background-color: #fff;}
	section#banner header#mainHeader:has(input#menuTrigger:checked) a:has(img.logo){filter: invert(1) !important;}

	footer#mainFooter .content{grid-template-columns: 1fr; justify-items: center; gap: 50px; text-align: center;}
	footer#mainFooter footer .content{flex-direction: column; gap: 20px;}

	section#banner{gap: 20px; padding-bottom: 50px;}
	section#banner .content#bannerContent{flex-direction: column; align-items: center;}
	section#banner img:not(.logo){display: none;}

	section#featuredEvents .featuredGrid{grid-template-columns: 1fr;}

	section#ad #adBanner{padding: 30px 50px;}
	section#ad #adBanner h3{font-size: 2.5rem;}
	section#ad p{padding: 0;}

	section#info .content{grid-template-columns: 1fr;}

	section#slider wm-slider#eventoSlider{grid-auto-columns: 100%;}
	section#slider wm-slider#eventoSlider div{padding: 0 5vw;}

	section#description .content{gap: 35px 0;}
	section#description .content header{flex-direction: column; gap: 10px;}

	section#chooseAccommodation .content .row.filters{flex-direction: column; gap: 20px;}
	section#chooseAccommodation .content .row.filters header{gap: 0;}
	section#chooseAccommodation .content .row.filters form{flex-wrap: wrap; gap: 10px;}
	section#chooseAccommodation .content .results{grid-template-columns: 1fr;}
	section#chooseAccommodation .grid.additionalInfo{grid-template-columns: 1fr;}

	main#login{grid-template-columns: 1fr;}
	main#login:after{display: none;}
	main#login h3{text-align: center;}
	main#login form{background: url(../../images/logo.png) no-repeat top 48px center; padding: 124px 40px;}

}

@media(max-width: 430px){

  main#underConstruction section#initial{background: url(../../images/inicial-mobile.jpg) no-repeat center 34% / 90%;}
  main#underConstruction section#initial .buttons{width: auto; left: 10%; right: 10%; bottom: 3%; gap: 20px; flex-direction: initial; align-items: center;}

  .about{height: 200px;}
  .parallax-window{min-height: 200px;}
  .about_content{top: 150px;}

}

/* Event Products */

#productsList {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    padding: 20px 10px;
}

.product-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.product-item.selected {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

.product-item .product-image {
    width: 100%;
    padding-top: 100%;
    position: relative;
    background: #f8f9fa;
    overflow: hidden;
}

.product-item .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item .product-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-item .product-header {
    margin-bottom: 12px;
}

.product-item .product-title {
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.product-item .product-subtitle {
    font-size: 11px;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.3;
}

.product-item .product-price {
    margin-top: auto;
    margin-bottom: 12px;
}

.product-item .price-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-item .price,
.product-item .offer-price {
    font-size: 18px;
    font-weight: 700;
    color: #27ae60;
}

.product-item .original-price {
    font-size: 13px;
    color: #95a5a6;
    text-decoration: line-through;
}

.product-item .offer-badge {
    display: inline-block;
    background: #e74c3c;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
}

.product-item .product-footer {
    border-top: 1px solid #ecf0f1;
    padding-top: 12px;
}

.product-item .quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.product-item .qty-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: #3498db;
    color: white;
    font-size: 26px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(52, 152, 219, 0.4);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    flex-shrink: 0;
}

.product-item .qty-btn:hover {
    background: #2980b9;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.5);
}

.product-item .qty-btn:active {
    transform: scale(0.95);
}

.product-item .product-qty {
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    border: 2px solid #ecf0f1;
    border-radius: 8px;
    background: white;
    padding: 0;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    #productsList {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-item .product-title {
        font-size: 12px;
    }

    .product-item .product-content {
        padding: 12px;
    }

    .product-item .qty-btn {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .product-item .product-qty {
        width: 40px;
        height: 36px;
        font-size: 15px;
    }

    .product-item .quantity-control {
        gap: 8px;
    }
}