/* Supermob interactive component styles (drawer, modal, header transitions) */

/* Header transparent over hero */
[data-header][data-transparent="1"] {
	background: transparent;
}
[data-header][data-transparent="1"].is-scrolled {
	background: linear-gradient(45deg, rgba(241, 241, 241, 0.65), rgba(241, 241, 241, 0.45));
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	border-bottom: 1px solid rgba(31, 31, 31, 0.06);
}

[data-header][data-transparent="1"] [data-light-toggle] {
	color: #f1f1f1 !important;
}
[data-header][data-transparent="1"].is-scrolled [data-light-toggle] {
	color: #1f1f1f !important;
}
[data-header][data-transparent="1"] [data-light-invert] {
	filter: brightness(0) invert(1);
}
[data-header][data-transparent="1"].is-scrolled [data-light-invert] {
	filter: brightness(0);
}
[data-header][data-transparent="1"] [data-logo-img] {
	filter: brightness(0) invert(1);
	transition: filter 0.3s;
}
[data-header][data-transparent="1"].is-scrolled [data-logo-img] {
	filter: brightness(0);
}

/* Mobile drawer */
[data-drawer-overlay] {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(31, 31, 31, 0.3);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s, visibility 0.3s;
}
[data-drawer-overlay].is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

[data-drawer] {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 70;
	height: 100%;
	width: 320px;
	max-width: 85vw;
	background: #f1f1f1;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transform: translateX(100%);
	transition: transform 0.3s ease-out;
	overflow-y: auto;
}
[data-drawer].is-open {
	transform: translateX(0);
}

[data-mobile-sub] [data-mobile-sub-list] {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}
[data-mobile-sub].is-open [data-mobile-sub-list] {
	max-height: 500px;
	padding-bottom: 1rem;
}
[data-mobile-sub] [data-mobile-sub-icon] {
	transition: transform 0.2s;
}
[data-mobile-sub].is-open [data-mobile-sub-icon] {
	transform: rotate(180deg);
}

/* Generic dropdowns (header catalog) */
[data-dropdown] [data-dropdown-menu] {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
[data-dropdown].is-open [data-dropdown-menu] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
[data-dropdown] [data-dropdown-icon] {
	transition: transform 0.2s;
}
[data-dropdown].is-open [data-dropdown-icon] {
	transform: rotate(180deg);
}

/* Modal */
[data-lead-modal] {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(17, 17, 17, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity 0.25s;
}
[data-lead-modal].is-open {
	display: flex;
	opacity: 1;
}

/* Estado "redirecting": some o form, mostra a tela de progresso */
[data-lead-modal].is-redirecting [data-lead-form-wrap] {
	display: none;
}
[data-lead-modal].is-redirecting [data-lead-redirecting] {
	display: flex;
}

[data-gallery-modal] {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(17, 17, 17, 0.92);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
[data-gallery-modal].is-open {
	display: flex;
}

/* Carousel */
[data-carousel] [data-slide] {
	transition: opacity 0.7s ease-in-out;
}
[data-carousel-dots] [data-dot] {
	width: 8px;
	height: 6px;
	border-radius: 9999px;
	background: rgba(241, 241, 241, 0.55);
	transition: width 0.3s, background 0.3s;
	display: inline-block;
}
[data-carousel-dots] [data-dot].is-current {
	width: 28px;
	background: #f1f1f1;
}

/* WhatsApp floating action button — sempre visível desde o load. */
[data-whatsapp-fab] {
	opacity: 1;
	pointer-events: auto;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-whatsapp-fab]:hover {
	transform: scale(1.06);
	box-shadow: 0 14px 40px rgba(37, 211, 102, 0.35);
}
[data-whatsapp-fab]:active {
	transform: scale(0.98);
}

/* Reveal animation */
[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Accordion icon rotation default */
[data-accordion-item] [data-accordion-icon] {
	transition: transform 0.2s;
}
[data-accordion-item].is-open [data-accordion-icon] {
	transform: rotate(180deg);
}

/* Dropdown de sugestões de cidades (autocomplete IBGE). */
.supermob-city-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin-top: 6px;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 14px;
	padding: 4px;
	list-style: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.supermob-city-dropdown li {
	padding: 8px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: #1f1f1f;
	line-height: 1.3;
}
.supermob-city-dropdown li:hover,
.supermob-city-dropdown li.is-active {
	background: rgba(61, 38, 69, 0.06);
	color: #3D2645;
}

/* Submit button em estado de loading (após click no Enviar). */
[data-contact-form] button[type="submit"].is-loading,
[data-contact-form] button[type="submit"]:disabled {
	opacity: 0.85;
	cursor: not-allowed;
	pointer-events: none;
}

/* Estados visuais de cada arquivo da lista de upload. */
[data-file-row] .file-row-icon { display: none; }
[data-file-row][data-state="pending"] .file-row-icon-pending { display: inline-block; }
[data-file-row][data-state="loading"] .file-row-icon-loading { display: inline-block; }
[data-file-row][data-state="done"]    .file-row-icon-done    { display: inline-block; }

/* Project modal (cards do portfólio) */
.project-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(31, 31, 31, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.project-modal.is-open { display: flex; }

.project-modal-dot {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: rgba(241, 241, 241, 0.5);
	transition: width 0.25s, background 0.25s;
	cursor: pointer;
}
.project-modal-dot.is-current {
	width: 22px;
	background: #f1f1f1;
}

/* Submit button em estado "Mensagem enviada" (após sucesso, travado até reload). */
[data-contact-form] button[type="submit"].is-sent {
	background-color: #16a34a !important; /* green-600 */
	opacity: 1 !important;
	cursor: default;
}
[data-contact-form] button[type="submit"].is-sent svg {
	color: #fff;
}

/* Visual feedback para radio "Pessoa Física / Pessoa Jurídica" (input.sr-only
   dentro de <label>). Usa :has() em browsers modernos + classe .is-checked
   adicionada pelo JS como fallback). */
[data-contact-form] label:has(input[type="radio"]:checked),
[data-contact-form] label.is-checked,
[data-lead-modal] label:has(input[type="radio"]:checked),
[data-lead-modal] label.is-checked {
	border-color: #3D2645 !important;
	background-color: rgba(61, 38, 69, 0.05) !important;
	color: #1f1f1f !important;
}
[data-lead-modal] label:has(input[type="radio"]:checked) svg,
[data-lead-modal] label.is-checked svg {
	color: #3D2645 !important;
}
[data-lead-modal] label:has(input[type="radio"]:checked) span,
[data-lead-modal] label.is-checked span {
	color: #3D2645 !important;
	font-weight: 500 !important;
}