/**
 * Naples home modules — component styles (Phase 3)
 *
 * Scoped to .naples-banner. Used by naples_render_banner() (PHP renderer)
 * which is shared across home + inner pages.
 *
 * Layout (1440 design grid):
 *   - Container: 1440x666 full width, position relative
 *   - Background image: absolute fill, object-cover
 *   - Tint overlay: rgba(37, 89, 111, 0.10) full overlay (Figma)
 *   - Content stack (left-aligned): overlay artwork at x=112 y=336
 *   - CTA button: x=112 y=566, white bg, teal icon box + teal label
 *
 * Sections:
 *   1. Container + bg image
 *   2. Tint overlay
 *   3. Content stack
 *   4. Overlay artwork
 *   5. CTA button
 *   6. Responsive (mobile)
 */

/* ====================================================================
   1. CONTAINER + BACKGROUND IMAGE
   ==================================================================== */
.naples-redesign .naples-banner {
	position: relative;
	width: 100%;
	aspect-ratio: 1440 / 666;
	min-height: 360px;
	max-height: 80vh;
	overflow: hidden;
	background: #d9d9d9;
	font-family: var(--naples-font-body);
}

.naples-redesign .naples-banner-bg {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}

.naples-redesign .naples-banner-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ====================================================================
   2. TINT OVERLAY (Figma: rgba(37, 89, 111, 0.10) full layer)
   ==================================================================== */
.naples-redesign .naples-banner-tint {
	position: absolute;
	inset: 0;
	background: rgba(37, 89, 111, 0.10);
	z-index: 2;
	pointer-events: none;
}

/* ====================================================================
   3. CONTENT STACK (overlay artwork + CTA, left-aligned)
   --------------------------------------------------------------------
   Figma positions: overlay at (112, 336), CTA at (112, 566).
   Banner height is 666. We use percentage offsets so it scales correctly
   on viewports that aren't exactly 1440 wide.
   ==================================================================== */
.naples-redesign .naples-banner-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-left: var(--naples-content-pad);
	padding-right: var(--naples-content-pad);
	gap: 24px;
	box-sizing: border-box;
}

@media (max-width: 1280px) {
	.naples-redesign .naples-banner-content {
		padding-left: var(--naples-space-5);
		padding-right: var(--naples-space-5);
	}
}

@media (max-width: 1023px) {
	.naples-redesign .naples-banner-content {
		padding-left: var(--naples-space-4);
		padding-right: var(--naples-space-4);
	}
}

/* ====================================================================
   4. OVERLAY ARTWORK
   --------------------------------------------------------------------
   Figma: 285x197.67 at 1440px design width.
   Display width scales: ~20% of viewport width, capped at 285px.
   ==================================================================== */
.naples-redesign .naples-banner-overlay {
	width: 320px;
	margin: 0;
}

.naples-redesign .naples-banner-overlay picture,
.naples-redesign .naples-banner-overlay img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-banner-overlay {
		width: 240px;
	}
}

@media (max-width: 600px) {
	.naples-redesign .naples-banner-overlay {
		width: 200px;
	}
}

/* ====================================================================
   5. CTA BUTTON
   --------------------------------------------------------------------
   Inverse of header RAC: white bg, teal accent box + teal label.
   Figma: 285x57, icon box 48.81x48.81 inset.
   ==================================================================== */
.naples-redesign .naples-banner-cta {
	display: inline-flex;
	align-items: stretch;
	height: 57px;
	background: var(--naples-white);
	color: var(--naples-primary);
	text-decoration: none;
	font-family: var(--naples-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	border: 0;
	padding: 4px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	box-sizing: border-box;
}

.naples-redesign .naples-banner-cta:visited {
	color: var(--naples-primary);
}

.naples-redesign .naples-banner-cta:hover,
.naples-redesign .naples-banner-cta:focus {
	background: var(--naples-bg-light);
	color: var(--naples-primary);
	text-decoration: none;
}

.naples-redesign .naples-banner-cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--naples-primary);
	color: var(--naples-white);
	width: 49px;
	flex: 0 0 auto;
}

.naples-redesign .naples-banner-cta-icon svg {
	display: block;
	color: var(--naples-white);
}

.naples-redesign .naples-banner-cta-label {
	display: flex;
	align-items: center;
	padding: 0 22px;
	white-space: nowrap;
	color: var(--naples-primary);
}

/* ====================================================================
   6. RESPONSIVE
   ==================================================================== */
@media (max-width: 600px) {
	.naples-redesign .naples-banner {
		aspect-ratio: 4 / 5;
		min-height: 480px;
	}

	.naples-redesign .naples-banner-bg img {
		object-position: 70% center;
	}

	.naples-redesign .naples-banner-content {
		gap: 16px;
	}

	.naples-redesign .naples-banner-cta {
		height: 50px;
		font-size: 15px;
	}

	.naples-redesign .naples-banner-cta-icon {
		width: 42px;
	}

	.naples-redesign .naples-banner-cta-label {
		padding: 0 18px;
	}
}


/* ====================================================================
   ====================================================================
   SIGNATURE PROCEDURES — Grid 2 columns x 3 rows
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-procedures {
	padding: var(--naples-space-7) 0 var(--naples-space-6);
	background: var(--naples-bg-light);
	font-family: var(--naples-font-body);
}

@media (max-width: 1023px) {
	.naples-redesign .naples-procedures {
		padding: var(--naples-space-6) 0 var(--naples-space-5);
	}
}

.naples-redesign .naples-procedures-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h2);
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-5);
	text-align: center;
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-procedures-heading {
		font-size: var(--naples-h3);
		margin-bottom: var(--naples-space-4);
	}
}

.naples-redesign .naples-procedures-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--naples-space-3);
}

@media (max-width: 600px) {
	.naples-redesign .naples-procedures-grid {
		grid-template-columns: 1fr;
		gap: var(--naples-space-2);
	}
}

.naples-redesign .naples-procedure-card {
	display: flex;
	flex-direction: column;
	background: var(--naples-primary);
	color: var(--naples-white);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-radius: var(--naples-radius-card);
}

.naples-redesign .naples-procedure-card:visited {
	color: var(--naples-white);
}

.naples-redesign .naples-procedure-card:hover,
.naples-redesign .naples-procedure-card:focus {
	color: var(--naples-white);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(37, 89, 111, 0.18);
}

.naples-redesign .naples-procedure-image {
	position: relative;
	width: 100%;
	aspect-ratio: 600 / 427;
	overflow: hidden;
	background: #d9d9d9;
}

.naples-redesign .naples-procedure-image picture,
.naples-redesign .naples-procedure-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.naples-redesign .naples-procedure-card:hover .naples-procedure-image img,
.naples-redesign .naples-procedure-card:focus .naples-procedure-image img {
	transform: scale(1.04);
}

.naples-redesign .naples-procedure-label {
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: 20px 24px 22px;
	min-height: 91px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.naples-redesign .naples-procedure-title {
	font-family: var(--naples-font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--naples-white);
	margin: 0 0 4px;
	letter-spacing: 0;
	line-height: 1.2;
}

.naples-redesign .naples-procedure-tagline {
	font-family: var(--naples-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--naples-white);
	margin: 0;
	line-height: 1.4;
	opacity: 0.9;
}


/* ====================================================================
   ====================================================================
   DR. KENT V. HASEN FEATURE
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-doctor {
	position: relative;
	width: 100%;
	min-height: 660px;
	overflow: hidden;
	background: #1a1a1a;
	font-family: var(--naples-font-body);
	display: flex;
	align-items: center;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-doctor {
		min-height: 0;
		padding: var(--naples-space-6) 0;
	}
}

.naples-redesign .naples-doctor-bg {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}

.naples-redesign .naples-doctor-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
}

@media (max-width: 768px) {
	.naples-redesign .naples-doctor-bg img {
		object-position: 70% center;
		opacity: 0.4;
	}
}

.naples-redesign .naples-doctor .naples-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.naples-redesign .naples-doctor-content {
	max-width: 560px;
	color: var(--naples-white);
	padding: var(--naples-space-5) 0;
}

.naples-redesign .naples-doctor-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h1);
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-doctor-heading {
		font-size: var(--naples-h2);
	}
}

.naples-redesign .naples-doctor-bio {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-white);
	margin: 0 0 var(--naples-space-4);
	font-weight: 400;
}

.naples-redesign .naples-doctor-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--naples-space-2);
	margin-bottom: var(--naples-space-5);
}

/* Secondary "Contact Us" CTA: solid white pill with teal label */
.naples-redesign .naples-doctor-secondary-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 57px;
	background: var(--naples-white);
	color: var(--naples-primary);
	text-decoration: none;
	font-family: var(--naples-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	padding: 0 32px;
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease;
	box-sizing: border-box;
	white-space: nowrap;
}

.naples-redesign .naples-doctor-secondary-cta:visited {
	color: var(--naples-primary);
}

.naples-redesign .naples-doctor-secondary-cta:hover,
.naples-redesign .naples-doctor-secondary-cta:focus {
	background: var(--naples-bg-light);
	color: var(--naples-primary);
	text-decoration: none;
}

.naples-redesign .naples-doctor-credentials {
	display: block;
	max-width: 480px;
}

.naples-redesign .naples-doctor-credentials picture,
.naples-redesign .naples-doctor-credentials img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	opacity: 0.9;
}

@media (max-width: 600px) {
	.naples-redesign .naples-doctor-credentials {
		max-width: 100%;
	}
}


/* ====================================================================
   ====================================================================
   BANNER — TEXT MODE (used by Gallery banner + future inner banners)
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-banner.is-mode-text .naples-banner-content {
	max-width: 720px;
}

.naples-redesign .naples-banner-headline {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h1);
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-2);
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-banner-headline {
		font-size: var(--naples-h2);
	}
}

@media (max-width: 600px) {
	.naples-redesign .naples-banner-headline {
		font-size: var(--naples-h3);
	}
}

.naples-redesign .naples-banner-subtitle {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-body);
	color: var(--naples-white);
	margin: 0 0 var(--naples-space-3);
	font-weight: 400;
	max-width: 600px;
}


/* ====================================================================
   ====================================================================
   SPLIT 50/50 — used by CoolSculpting Elite + Treatment finder
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 600px;
	font-family: var(--naples-font-body);
	overflow: hidden;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}
}

.naples-redesign .naples-split.is-image-right {
	direction: rtl;
}

.naples-redesign .naples-split.is-image-right > * {
	direction: ltr;
}

.naples-redesign .naples-split.is-bg-warm-white .naples-split-content {
	background: var(--naples-bg-light);
}

.naples-redesign .naples-split.is-bg-white .naples-split-content {
	background: var(--naples-white);
}

.naples-redesign .naples-split-image {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	background: #d9d9d9;
}

.naples-redesign .naples-split-image picture,
.naples-redesign .naples-split-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-split-image {
		min-height: 360px;
		aspect-ratio: 4 / 5;
	}
}

.naples-redesign .naples-split-content {
	display: flex;
	align-items: center;
	padding: var(--naples-space-6) var(--naples-space-7);
	color: var(--naples-primary);
}

@media (max-width: 1280px) {
	.naples-redesign .naples-split-content {
		padding: var(--naples-space-6) var(--naples-space-5);
	}
}

@media (max-width: 1023px) {
	.naples-redesign .naples-split-content {
		padding: var(--naples-space-5) var(--naples-space-3);
	}
}

.naples-redesign .naples-split-content-inner {
	max-width: 540px;
}

.naples-redesign .naples-split-eyebrow {
	margin-bottom: var(--naples-space-2);
}

.naples-redesign .naples-split-eyebrow img {
	display: block;
	height: 30px;
	width: auto;
	max-width: 100%;
}

.naples-redesign .naples-split-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h2);
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-split-heading {
		font-size: var(--naples-h3);
	}
}

.naples-redesign .naples-split-body {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-dark-slate);
	margin-bottom: var(--naples-space-4);
}

.naples-redesign .naples-split-body p {
	margin: 0 0 1em;
}

.naples-redesign .naples-split-body p:last-child {
	margin-bottom: 0;
}

.naples-redesign .naples-split-cta {
	display: inline-flex;
	margin-top: 0;
}


/* ====================================================================
   ====================================================================
   NEWSLETTER SIGNUP — wraps the [etna-contact-form] shortcode
   --------------------------------------------------------------------
   The form's HTML/inputs/buttons come from the Etna parent plugin
   shortcode (cert_id 5405). We only style the section chrome here:
   background image, heading, container. The form internals inherit
   their styles from the legacy form-newsletter.css that the theme
   already loads.
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-newsletter {
	position: relative;
	width: 100%;
	min-height: 460px;
	overflow: hidden;
	background: #1a3845;
	font-family: var(--naples-font-body);
	display: flex;
	align-items: center;
	padding: var(--naples-space-6) 0;
}

.naples-redesign .naples-newsletter-bg {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}

.naples-redesign .naples-newsletter-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.naples-redesign .naples-newsletter .naples-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.naples-redesign .naples-newsletter-content {
	max-width: 760px;
	margin: 0 auto;
	color: var(--naples-white);
}

.naples-redesign .naples-newsletter-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h2);
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	text-align: center;
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-newsletter-heading {
		font-size: var(--naples-h3);
	}
}

.naples-redesign .naples-newsletter-form-wrap {
	color: var(--naples-white);
}


/* ====================================================================
   ====================================================================
   CONTACT FORM — wraps the [etna-contact-form] shortcode
   --------------------------------------------------------------------
   Same pattern as Newsletter: only style the chrome. The form internals
   come from the Etna shortcode (cert_id 347) and inherit legacy CSS.
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 600px;
	font-family: var(--naples-font-body);
	overflow: hidden;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-contact {
		grid-template-columns: 1fr;
		min-height: 0;
	}
}

.naples-redesign .naples-contact-image {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	background: #2a2a2a;
}

.naples-redesign .naples-contact-image picture,
.naples-redesign .naples-contact-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-contact-image {
		display: none;
	}
}

.naples-redesign .naples-contact-form-wrap {
	display: flex;
	align-items: center;
	background: var(--naples-primary);
	padding: var(--naples-space-6) var(--naples-space-7);
	color: var(--naples-white);
}

@media (max-width: 1280px) {
	.naples-redesign .naples-contact-form-wrap {
		padding: var(--naples-space-6) var(--naples-space-5);
	}
}

@media (max-width: 1023px) {
	.naples-redesign .naples-contact-form-wrap {
		padding: var(--naples-space-5) var(--naples-space-3);
	}
}

.naples-redesign .naples-contact-form-inner {
	width: 100%;
	max-width: 560px;
}

.naples-redesign .naples-contact-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h2);
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-contact-heading {
		font-size: var(--naples-h3);
	}
}
/**
 * Naples form internals (Phase 3.1)
 *
 * Append this to the end of dist/css/includes/naples-modules.css.
 * Styles the Etna form HTML rendered by naples-contact.template.php and
 * naples-newsletter.template.php — covers inputs, dropdowns, textarea,
 * submit buttons, checkboxes, terms tooltip, validation states.
 *
 * Section structure mirrors the form templates:
 *   - Shared form internals (.naples-form-grid, rows, fields, etc.)
 *   - Newsletter-specific overrides (light inputs on dark background)
 *   - Contact-specific overrides (white inputs on teal background)
 */

/* ====================================================================
   SHARED FORM INTERNALS
   ==================================================================== */

.naples-redesign .naples-form-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.naples-redesign .naples-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 600px) {
	.naples-redesign .naples-form-row {
		grid-template-columns: 1fr;
	}
}

.naples-redesign .naples-form-field {
	display: block;
	width: 100%;
}

.naples-redesign .naples-form-field-full {
	grid-column: 1 / -1;
}

.naples-redesign .naples-form-field input,
.naples-redesign .naples-form-field select,
.naples-redesign .naples-form-field textarea {
	display: block;
	width: 100%;
	padding: 14px 18px;
	font-family: var(--naples-font-body);
	font-size: 15px;
	line-height: 1.4;
	border-radius: 0;
	box-sizing: border-box;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.naples-redesign .naples-form-field textarea {
	resize: vertical;
	min-height: 120px;
}

/* Honeypots — keep them in DOM but invisible */
.naples-redesign .naples-form-honeypot,
.naples-redesign .mobilePhone {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Disclaimer line above the form */
.naples-redesign .naples-form-disclaimer {
	font-family: var(--naples-font-body);
	font-size: 13px;
	margin: 0 0 var(--naples-space-2);
	opacity: 0.8;
}

/* Submit buttons (both forms): white background, teal label */
.naples-redesign .naples-form-submit {
	display: block;
	width: 100%;
	padding: 16px 24px;
	background: var(--naples-white);
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.3px;
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
	margin-top: 4px;
}

.naples-redesign .naples-form-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.naples-redesign .naples-form-submit:hover:not(:disabled),
.naples-redesign .naples-form-submit:focus:not(:disabled) {
	background: var(--naples-bg-light);
}

/* Consent checkboxes */
.naples-redesign .naples-form-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	cursor: pointer;
	font-family: var(--naples-font-body);
	font-size: 13px;
	line-height: 1.5;
	margin-top: 4px;
}

.naples-redesign .naples-form-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	cursor: pointer;
	accent-color: var(--naples-white);
}

.naples-redesign .naples-form-consent-text strong {
	font-weight: 700;
}

/* Validation error state from validation_class() */
.naples-redesign .naples-form-field.required input,
.naples-redesign .naples-form-field.required select,
.naples-redesign .naples-form-field.required textarea {
	border-color: var(--naples-warm-red) !important;
	background: rgba(233, 92, 67, 0.1) !important;
}

/* Warning box */
.naples-redesign .naples-form-warning {
	background: rgba(233, 92, 67, 0.15);
	border-left: 3px solid var(--naples-warm-red);
	padding: 16px 20px;
	margin-bottom: 16px;
	font-family: var(--naples-font-body);
	font-size: 14px;
}

.naples-redesign .naples-form-warning h3 {
	font-family: var(--naples-font-body);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 4px;
}

.naples-redesign .naples-form-warning p {
	margin: 0;
}

/* Terms of Use button (text trigger inline with consent) */
.naples-redesign .naples-form-terms-trigger {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-family: var(--naples-font-body);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	display: inline;
}

.naples-redesign .naples-form-terms-trigger:hover,
.naples-redesign .naples-form-terms-trigger:focus {
	opacity: 0.8;
}

.naples-redesign .naples-form-terms-tooltip {
	margin-top: 8px;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.12);
	border-left: 3px solid var(--naples-white);
	font-family: var(--naples-font-body);
	font-size: 13px;
	line-height: 1.6;
}

/* Hide the standalone <label> elements that the Etna template emits as
   screen-reader-only labels (they were already covered by placeholder
   attributes in our visual design). The .screen-reader-text class is
   from WP core but in some places gets rendered standalone. */
.naples-redesign .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ====================================================================
   NEWSLETTER FORM — translucent inputs over photo background
   ==================================================================== */

.naples-redesign .naples-newsletter-form-element .naples-form-field input,
.naples-redesign .naples-newsletter-form-element .naples-form-field select {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--naples-white);
}

.naples-redesign .naples-newsletter-form-element .naples-form-field input::placeholder {
	color: rgba(255, 255, 255, 0.85);
}

.naples-redesign .naples-newsletter-form-element .naples-form-field input:focus {
	outline: 0;
	background: rgba(255, 255, 255, 0.28);
	border-color: var(--naples-white);
}

.naples-redesign .naples-newsletter-form-element .naples-form-consent {
	color: var(--naples-white);
}


/* ====================================================================
   CONTACT FORM — solid white inputs over teal background
   ==================================================================== */

.naples-redesign .naples-contact-form .naples-form-field input,
.naples-redesign .naples-contact-form .naples-form-field select,
.naples-redesign .naples-contact-form .naples-form-field textarea {
	background: var(--naples-white);
	border: 0;
	color: var(--naples-primary);
}

.naples-redesign .naples-contact-form .naples-form-field input::placeholder,
.naples-redesign .naples-contact-form .naples-form-field textarea::placeholder {
	color: var(--naples-primary);
	opacity: 0.6;
}

.naples-redesign .naples-contact-form .naples-form-field select {
	color: var(--naples-primary);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2325596f' stroke-width='2'%3E%3Cpolyline points='1,1 6,7 11,1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 42px;
}

.naples-redesign .naples-contact-form .naples-form-field select.placeholder {
	color: rgba(37, 89, 111, 0.6);
}

.naples-redesign .naples-contact-form .naples-form-consent,
.naples-redesign .naples-contact-form .naples-form-disclaimer {
	color: var(--naples-white);
}

.naples-redesign .naples-contact-form .naples-form-terms-trigger {
	color: var(--naples-white);
}


/* ====================================================================
   PHASE 12.7 — naples-newsletter full-bleed (grid-item escape)
   --------------------------------------------------------------------
   The home page renders the newsletter directly inside front-page-naples.php
   so it's already full-width. On inner pages the [feature-newsletter]
   shortcode runs inside the_content(), which lives inside
   .eii-col.eii-col-large-7.content (a CSS grid item ~58% wide). The
   calc(50% - 50vw) margin trick doesn't escape grid items reliably, so
   we use the more aggressive position+50vw pattern that escapes ANY
   parent and centers against the viewport.

   Body needs overflow-x: hidden to prevent horizontal scroll from the
   100vw width when scrollbars are present.
   ==================================================================== */

body.naples-redesign {
	overflow-x: hidden;
}

.naples-redesign .naples-newsletter {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
}


/* ====================================================================
   PHASE 12.8 — naples-doctor full-bleed (grid-item escape)
   --------------------------------------------------------------------
   Same pattern as Phase 12.7 newsletter: when the [feature-doctor]
   shortcode renders inside the_content() on inner pages, the section
   gets confined to .eii-col-large-7 (~58% width). The position+50vw
   trick escapes any parent and centers against the viewport.

   No need to re-declare overflow-x:hidden on body — already set in
   Phase 12.7 for the newsletter and it covers this case too.
   ==================================================================== */

.naples-redesign .naples-doctor {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
}


/* ====================================================================
   PHASE 12.11 — naples-pricing-guide module + full-bleed
   --------------------------------------------------------------------
   Sibling of naples-newsletter. Same structural pattern: full-width
   image background, centered content overlay, white form fields.
   Reuses naples-newsletter form input styling via shared cert template.
   ==================================================================== */

.naples-redesign .naples-pricing-guide {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	padding: var(--naples-space-7) 0;
	color: var(--naples-white);
}

.naples-redesign .naples-pricing-guide-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.naples-redesign .naples-pricing-guide-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.naples-redesign .naples-pricing-guide .naples-container {
	position: relative;
	z-index: 1;
}

.naples-redesign .naples-pricing-guide-content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.naples-redesign .naples-pricing-guide-heading {
	color: var(--naples-white);
	font-family: var(--naples-font-heading);
	font-size: 36px;
	line-height: 1.18;
	font-weight: 400;
	letter-spacing: -0.5px;
	margin: 0 0 var(--naples-space-5);
}

@media (max-width: 767px) {
	.naples-redesign .naples-pricing-guide-heading {
		font-size: 26px;
		line-height: 1.22;
	}
}

.naples-redesign .naples-pricing-guide-form-wrap {
	margin: 0 auto;
}


/* ====================================================================
   PHASE 12.11.1 — naples-pricing-guide refined per Figma
   --------------------------------------------------------------------
   - Content max-width raised to 960px (form takes more horizontal space)
   - Dropdown (Procedure Interest) styling matches inputs
   - Subscribe button: white solid bg, teal text, NOT uppercase, full width
   - 2 checkboxes stacked, with required Terms + marketing consent
   ==================================================================== */

.naples-redesign .naples-pricing-guide-content {
	max-width: 960px;
}

/* Dropdown row (3rd) takes full width */
.naples-redesign .naples-pricing-guide .naples-form-row-single {
	display: block;
}

.naples-redesign .naples-pricing-guide .naples-form-field-select {
	display: block;
	width: 100%;
}

.naples-redesign .naples-pricing-guide select.input {
	width: 100%;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--naples-white);
	font-family: var(--naples-font-body);
	font-size: 15px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.naples-redesign .naples-pricing-guide select.input option {
	color: #222;
	background: var(--naples-white);
}

/* Submit button — white solid, teal text, NOT uppercase */
.naples-redesign .naples-pricing-guide-submit {
	display: block;
	width: 100%;
	padding: 18px 24px;
	margin-top: var(--naples-space-3);
	background: var(--naples-white);
	color: var(--naples-primary);
	border: 0;
	font-family: var(--naples-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.naples-redesign .naples-pricing-guide-submit:hover,
.naples-redesign .naples-pricing-guide-submit:focus {
	background: rgba(255, 255, 255, 0.92);
}

.naples-redesign .naples-pricing-guide-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* 2 consent checkboxes block */
.naples-redesign .naples-pricing-guide-consents {
	margin-top: var(--naples-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--naples-space-2);
}

.naples-redesign .naples-pricing-guide-consents .naples-form-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--naples-white);
	font-family: var(--naples-font-body);
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
	text-align: left;
}

.naples-redesign .naples-pricing-guide-consents .naples-form-consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--naples-white);
}

.naples-redesign .naples-pricing-guide-consents .naples-form-consent-text a {
	color: var(--naples-white);
	text-decoration: underline;
}


/* ====================================================================
   PHASE 12.11.2 — naples-pricing-guide inputs match dropdown style
   --------------------------------------------------------------------
   The newsletter inputs (white solid) inherit by default because both
   forms share .naples-form-field input.input. Pricing guide needs the
   translucent treatment to match the Figma. Scoped to .naples-pricing-guide.
   ==================================================================== */

.naples-redesign .naples-pricing-guide .naples-form-field input.input {
	width: 100%;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--naples-white);
	font-family: var(--naples-font-body);
	font-size: 15px;
}

.naples-redesign .naples-pricing-guide .naples-form-field input.input::placeholder {
	color: rgba(255, 255, 255, 0.85);
	opacity: 1;
}

.naples-redesign .naples-pricing-guide .naples-form-field input.input:focus {
	outline: none;
	border-color: var(--naples-white);
	background: rgba(255, 255, 255, 0.28);
}

/* Webkit autofill override — avoid the yellow autofill on translucent bg */
.naples-redesign .naples-pricing-guide .naples-form-field input.input:-webkit-autofill,
.naples-redesign .naples-pricing-guide .naples-form-field input.input:-webkit-autofill:hover,
.naples-redesign .naples-pricing-guide .naples-form-field input.input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--naples-white);
	-webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.18) inset;
	transition: background-color 5000s ease-in-out 0s;
}


/* ====================================================================
   PHASE 12.11.3 — force white placeholders inside pricing-guide inputs
   --------------------------------------------------------------------
   Legacy CSS has darker placeholder colors with high specificity. Need
   to scope under .naples-redesign + use all vendor prefixes + !important
   to override.
   ==================================================================== */

.naples-redesign .naples-pricing-guide .naples-form-field input.input::placeholder,
.naples-redesign .naples-pricing-guide .naples-form-field input.input::-webkit-input-placeholder,
.naples-redesign .naples-pricing-guide .naples-form-field input.input::-moz-placeholder,
.naples-redesign .naples-pricing-guide .naples-form-field input.input:-ms-input-placeholder,
.naples-redesign .naples-pricing-guide .naples-form-field input.input::-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.85) !important;
	opacity: 1 !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.85);
}

/* Also force the typed-text color (not just placeholder) */
.naples-redesign .naples-pricing-guide .naples-form-field input.input {
	color: var(--naples-white) !important;
	-webkit-text-fill-color: var(--naples-white);
}


/* ====================================================================
   PHASE 12.12 — hm-naples-instagram block
   --------------------------------------------------------------------
   4-up grid of curated Instagram post tiles + Follow CTA.
   Each tile is a square <a> with the post image, IG glyph badge top-right,
   and links out to the post permalink in a new tab.
   ==================================================================== */

.naples-redesign .naples-instagram {
	padding: var(--naples-space-7) 0;
	background: var(--naples-warm-white);
}

.naples-redesign .naples-instagram-heading {
	text-align: center;
	color: var(--naples-primary);
	font-family: var(--naples-font-heading);
	font-size: 36px;
	line-height: 1.18;
	font-weight: 400;
	letter-spacing: -0.3px;
	margin: 0 0 var(--naples-space-5);
}

@media (max-width: 767px) {
	.naples-redesign .naples-instagram-heading {
		font-size: 28px;
	}
}

.naples-redesign .naples-instagram-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--naples-space-3);
	margin: 0 0 var(--naples-space-5);
}

@media (max-width: 1023px) {
	.naples-redesign .naples-instagram-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.naples-redesign .naples-instagram-grid {
		grid-template-columns: 1fr;
	}
}

.naples-redesign .naples-instagram-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--naples-bg-light, #efefef);
	text-decoration: none;
}

.naples-redesign .naples-instagram-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.naples-redesign .naples-instagram-tile:hover img,
.naples-redesign .naples-instagram-tile:focus img {
	transform: scale(1.04);
}

.naples-redesign .naples-instagram-tile-icon {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 28px;
	background: var(--naples-white);
	color: var(--naples-primary);
	pointer-events: none;
}

.naples-redesign .naples-instagram-cta-wrap {
	display: flex;
	justify-content: center;
}

.naples-redesign .naples-instagram-cta {
	/* Inherits .naples-banner-cta look; nothing extra needed. */
}


/* ====================================================================
   PHASE 12.12.1 — Instagram CTA: solid teal (override .naples-banner-cta)
   --------------------------------------------------------------------
   .naples-banner-cta in other contexts is white-bg + teal text (inverted
   over dark hero bg). For the Instagram block (light bg), match the
   "Request a Consultation" standard look: teal bg, white text/icon.
   ==================================================================== */

.naples-redesign .naples-instagram-cta {
	background: var(--naples-primary) !important;
	color: var(--naples-white) !important;
}

.naples-redesign .naples-instagram-cta .naples-banner-cta-label,
.naples-redesign .naples-instagram-cta .naples-banner-cta-icon {
	color: var(--naples-white) !important;
}

.naples-redesign .naples-instagram-cta .naples-banner-cta-icon {
	background: var(--naples-white) !important;
	color: var(--naples-primary) !important;
}

.naples-redesign .naples-instagram-cta:hover,
.naples-redesign .naples-instagram-cta:focus {
	background: var(--naples-primary-dark, #1f4a5d) !important;
}


/* ====================================================================
   PHASE 12.12.2 — Instagram CTA arrow visible (SVG stroke override)
   The previous override changed icon-box bg/color but the inline SVG
   uses stroke="currentColor" which was set on the wrong element.
   Force the SVG stroke directly to teal so it renders on the white box.
   ==================================================================== */

.naples-redesign .naples-instagram-cta .naples-banner-cta-icon svg {
	stroke: var(--naples-primary) !important;
	color: var(--naples-primary) !important;
}

/* ====================================================================
   PHASE 12.48 — Banner stack wrapper
   Wraps the overlay logo + CTA inside .naples-banner-content so they
   render as a vertically stacked, horizontally centered group.
   Applies to all banners (homepage, contact, gallery, doctor,
   instagram, dr-hasen, our-team) via the shared naples_render_banner().
   ==================================================================== */
.naples-redesign .naples-banner-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
}
.naples-redesign .naples-banner-overlay.has-brand-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-banner-overlay.has-brand-icon {
		gap: 2px;
	}
}

@media (max-width: 480px) {
	.naples-redesign .naples-banner-overlay.has-brand-icon {
		gap: 1px;
	}
}

@media (max-width: 768px) {
	
}

@media (max-width: 480px) {
	
}

.naples-redesign .naples-banner-overlay.has-brand-icon picture,
.naples-redesign .naples-banner-overlay.has-brand-icon picture img {
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 768px) {
	
}

@media (max-width: 480px) {
	
}

@media (max-width: 768px) {
	
}

@media (max-width: 480px) {
	
}


/* ====================================================================
   HOME HERO — Brand icon sizing (final)
   --------------------------------------------------------------------
   Single source of truth for brand icon dimensions. Specificity uses
   3 classes + tag (.naples-redesign .naples-banner-overlay img.X)
   to beat the legacy 'img inside overlay' rules (transform scale,
   width 100%) without resorting to !important.
   ==================================================================== */
.naples-redesign .naples-banner-overlay img.naples-banner-brand-icon {
	display: block;
	width: auto;
	max-width: none;
	height: 164px;
	transform: none;
	flex: 0 0 auto;
	margin-right: -30px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-banner-overlay img.naples-banner-brand-icon {
		height: 118px;
		margin-right: -22px;
	}
}

@media (max-width: 480px) {
	.naples-redesign .naples-banner-overlay img.naples-banner-brand-icon {
		height: 92px;
		margin-right: -17px;
	}
}