/*
Theme Name: Surf Itacaré Luxury Boutique
Theme URI: https://surfitacare.com
Description: Tema child exclusivo y minimalista para Surf Itacaré. Concepto Barefoot Luxury & High Society, full buyout boutique villa y surf trips privados.
Author: Surf Itacaré Team
Author URI: https://surfitacare.com
Template: hello-elementor
Version: 1.0.3
Text Domain: surf-itacare
*/

:root {
	--surf-accent: #848867;
	--surf-accent-hover: #6e7253;
	--surf-accent-light: rgba(132, 136, 103, 0.12);
	--surf-dark: #121212;
	--surf-dark-surface: #1a1a1a;
	--surf-light: #fbf9f5;
	--surf-sand: #f3efe8;
	--surf-sand-border: #e6dfd5;
	--surf-jungle: #28362d;
	--surf-jungle-light: #3f5145;
	--surf-text: #2e3620;
	--surf-text-muted: #5e6649;
	--surf-white: #ffffff;
	/* v1.0.2 palette: warm cream replaces pure-white surfaces; dark olive replaces dark browns */
	--surf-cream: #f7f2e8;
	--surf-olive-dark: #3a4428;
	--surf-olive-deep: #2e3620;
	--surf-font-serif: 'Cormorant Garamond', Georgia, serif;
	--surf-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--surf-radius: 4px;
	--surf-transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base resets & typography */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--surf-font-sans);
	color: var(--surf-text);
	background-color: var(--surf-light);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Ensure primary main container spans 100% full width */
body .site-main,
body:not([class*="elementor-page-"]) .site-main,
main#primary,
#primary,
.site-main {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
}

h1, h2, h3, h4, h5, h6, .surf-serif {
	font-family: var(--surf-font-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--surf-dark);
	line-height: 1.15;
}

/* Luxury accent details */
.text-accent {
	color: var(--surf-accent) !important;
}

.bg-accent {
	background-color: var(--surf-accent) !important;
	color: #fff !important;
}

/* Button High Society */
.surf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 34px;
	background-color: var(--surf-accent, #848867) !important;
	color: #ffffff !important;
	font-family: var(--surf-font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: var(--surf-radius);
	border: 1px solid var(--surf-accent, #848867) !important;
	transition: var(--surf-transition);
	cursor: pointer;
}

.surf-btn:hover,
button.surf-btn:hover,
a.surf-btn:hover {
	background-color: #848867 !important;
	border-color: #848867 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(132, 136, 103, 0.35) !important;
}

.surf-btn-outline {
	background-color: transparent !important;
	color: var(--surf-dark, #2e3620) !important;
	border: 1.5px solid #848867 !important;
}

.surf-btn-outline:hover {
	background-color: #848867 !important;
	color: #ffffff !important;
	border-color: #848867 !important;
	box-shadow: 0 8px 20px rgba(132, 136, 103, 0.3) !important;
}

.surf-btn-outline-white {
	background-color: transparent !important;
	color: #ffffff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
}

.surf-btn-outline-white:hover {
	background-color: #848867 !important;
	color: #ffffff !important;
	border-color: #848867 !important;
	box-shadow: 0 8px 20px rgba(132, 136, 103, 0.35) !important;
}

/* ==========================================================================
   NEUTRALIZE HELLO ELEMENTOR RESET.CSS LEAKS
   Overrides Hello Elementor #c36 pink on generic buttons & links
   ========================================================================== */
[type="button"],
[type="submit"],
[type="reset"],
button {
	border: 1px solid transparent;
	color: inherit;
	background-color: transparent;
}

[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
button:hover,
button:focus {
	background-color: transparent;
	color: inherit;
}

a {
	color: inherit;
}




/* ==========================================================================
   CONTACT PAGE & FORM — BAREFOOT LUXURY
   ========================================================================== */
.surf-contact-grid {
	display: grid !important;
	grid-template-columns: 1.35fr 1fr !important;
	gap: 48px !important;
	align-items: start !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.surf-contact-card {
	background: #ffffff !important;
	border: 1px solid var(--surf-sand-border, #e6dfd5) !important;
	border-radius: 12px !important;
	padding: 48px 42px !important;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04) !important;
	box-sizing: border-box !important;
}

.surf-contact-header {
	margin-bottom: 32px !important;
	padding-bottom: 24px !important;
	border-bottom: 1px solid var(--surf-sand-border, #e6dfd5) !important;
}

.surf-contact-header .surf-eyebrow {
	display: inline-block !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--surf-accent, #848867) !important;
	margin-bottom: 10px !important;
}

.surf-contact-title {
	font-size: clamp(1.8rem, 3vw, 2.3rem) !important;
	font-family: var(--surf-font-serif, 'Cormorant Garamond', Georgia, serif) !important;
	color: var(--surf-dark, #121212) !important;
	margin: 0 0 10px !important;
	line-height: 1.2 !important;
}

.surf-contact-subtitle {
	font-size: 0.95rem !important;
	color: var(--surf-text-muted, #5e6649) !important;
	margin: 0 !important;
	line-height: 1.6 !important;
}

.surf-contact-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 22px !important;
}

.surf-form-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
}

.surf-form-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	width: 100% !important;
}

.surf-form-group label {
	font-size: 0.86rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	color: var(--surf-dark, #121212) !important;
}

.surf-form-group label .req {
	color: #d9534f !important;
	margin-left: 2px !important;
}

.surf-input {
	width: 100% !important;
	height: 48px !important;
	padding: 12px 18px !important;
	background: var(--surf-cream, #f7f2e8) !important;
	border: 1px solid var(--surf-sand-border, #e6dfd5) !important;
	border-radius: 6px !important;
	font-family: var(--surf-font-sans, inherit) !important;
	font-size: 0.92rem !important;
	color: var(--surf-dark, #121212) !important;
	transition: all 0.25s ease !important;
	outline: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.surf-input:focus {
	background: #ffffff !important;
	border-color: var(--surf-accent, #848867) !important;
	box-shadow: 0 0 0 3px rgba(132, 136, 103, 0.15) !important;
}

.surf-select {
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23848867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	padding-right: 42px !important;
	cursor: pointer !important;
}

.surf-textarea {
	height: auto !important;
	min-height: 120px !important;
	resize: vertical !important;
}

.surf-btn-submit {
	background-color: var(--surf-accent, #848867) !important;
	border-color: var(--surf-accent, #848867) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border-radius: 6px !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 6px 18px rgba(132, 136, 103, 0.25) !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.surf-btn-submit:hover {
	background-color: var(--surf-accent-hover, #6e7253) !important;
	border-color: var(--surf-accent-hover, #6e7253) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 24px rgba(132, 136, 103, 0.35) !important;
}

.surf-contact-feedback {
	padding: 16px 20px !important;
	border-radius: 6px !important;
	font-size: 0.92rem !important;
	margin-top: 10px !important;
}

.surf-feedback-success {
	background: #e8f5e9 !important;
	border: 1px solid #c8e6c9 !important;
	color: #2e7d32 !important;
}

.surf-feedback-error {
	background: #ffebee !important;
	border: 1px solid #ffcdd2 !important;
	color: #c62828 !important;
}

.surf-spin {
	animation: surfSpin 1s linear infinite !important;
}

@keyframes surfSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
	.surf-contact-grid {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
	}
	.surf-contact-card {
		padding: 36px 24px !important;
	}
}

@media (max-width: 640px) {
	.surf-form-row {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}