/* ==========================================================================
   Elata site chrome — header + footer

   Ported from ShopifyTheme/sections/elata-header.liquid and
   ShopifyTheme/sections/elata-footer.liquid. Every value below comes from the
   REAL saved Customizer settings in ShopifyTheme/config/settings_data.json
   (current.sections["elata-header"] / ["elata-footer"]), not from the Liquid
   schema defaults — the schema defaults describe a dark header/footer that
   the live Elata site does not use.

   HEADER settings applied:
     header_height 70            header_bg_color #ffffff
     header_text_color #333333   nav_hover_color #ff4e00
     transparent_header FALSE    (transparent_bg/text_color not ported)
     logo_height 25              logo_width 105
     nav_font_size 13            nav_font_weight 500     nav_uppercase TRUE
     nav_item_spacing 30         nav_padding_vertical 10 nav_padding_horizontal 15
     contact_btn_bg #2b2b2b      contact_btn_color #ffffff
     dropdown_bg_color #ffffff   dropdown_text_color #333333
     dropdown_hover_bg #f8f9fa   dropdown_min_width 200
     dropdown_border_radius 8    dropdown_padding 15
     dropdown_item_padding 12    dropdown_font_size 14
     megamenu_bg_color #ffffff   megamenu_text_color #666666
     megamenu_heading_color #333333
     megamenu_width 800          megamenu_columns 4
     megamenu_border_radius 12   megamenu_padding 30     megamenu_gap 30
     megamenu_heading_size 16    megamenu_heading_weight 600
     megamenu_heading_margin 15  megamenu_font_size 14   megamenu_item_padding 8
     mobile_menu_width 300       mobile_menu_bg #ffffff
     mobile_text_color #333333   mobile_hover_bg #f8f9fa
     mobile_border_color #eeeeee mobile_submenu_bg #f8f9fa
     mobile_submenu_color #666666
     mobile_font_size 16         mobile_font_weight 500
     mobile_item_padding 15      mobile_menu_padding 20
     mobile_submenu_padding 12   mobile_submenu_font_size 14
     hamburger_width 25          hamburger_thickness 3   hamburger_spacing 3

   FOOTER settings applied:
     background_color #f5f5f5 (= --elata-bg-offwhite)
     max_width 1600 (= --elata-max-width)     padding_top 80
     logo_width 250            logo_width_mobile 260
     menu_title_color #888888 (= --elata-text-muted)
     link_hover_color #c76328  subscribe_title_size 28

   Three places where the Liquid HARDCODED a value and ignored its own
   setting; the setting value is used here (noted so a developer can see why
   this differs 1:1 from the Liquid source):
     CORRECTION: the three substitutions below were wrong and have been
     reverted to the hardcoded Liquid values. nav_font_size,
     dropdown_border_radius and megamenu_border_radius are all declared in
     elata-header.liquid's {% schema %} but NEVER referenced by its CSS
     (verified: `grep -c "settings.nav_font_size"` returns 0). They are dead
     settings, so the hardcoded declarations are what the live site renders —
     confirmed by measuring it: nav links are 16px #2B2B2B, and both panels
     have border-radius 0.
     - .nav-link font-size: 16px hardcoded  (was ported as 13px)
     - .nav-link color: var(--ELATA-GREY, #2B2B2B)  (was ported as #333333)
     - .dropdown-menu / .megamenu border-radius: 0  (were ported as 8px / 12px)

   Two places where the Liquid's colours only made sense on the dark schema
   defaults and would be invisible on the real white background — swapped for
   dark-on-light equivalents rather than ported literally:
     - dropdown/megamenu hover background was rgba(255,255,255,.1) -> #f8f9fa
       (the real dropdown_hover_bg).
     - megamenu column heading underline was rgba(255,255,255,.2) and
       megamenu link hover colour was #ffffff -> rgba(0,0,0,.1) / #c76328.

   NOTE on links: base.css resets anchors with `:where(.elata-page) a`, which
   is zero-specificity by design, so every component rule in this file wins
   without needing !important. Do not add any zero-specificity-violating
   global element reset here (see DEV-NOTES.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.elata-site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background-color: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
	height: 70px;
}

.elata-site-header.is-scrolled {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.elata-site-header__inner {
	max-width: var(--elata-max-width);
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 40px;
	height: 100%;
}

/* Buttons sit hard right, with the leftover space falling between the nav and
   them rather than being taken out of the nav. */
.elata-site-header__actions {
	margin-left: auto;
}

/* Logo — logo_image (Elata_Logo_dark.png) at logo_width x logo_height */
.elata-site-header__logo {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 10001;
}

.elata-site-header__logo a {
	display: inline-flex;
	align-items: center;
}

.elata-site-header__logo img {
	height: 25px;
	width: 105px;
	object-fit: contain;
	display: block;
}

.elata-site-header__wordmark {
	font-family: var(--elata-font);
	font-size: 18px;
	font-weight: 600;
	color: #333333;
	line-height: 25px;
	white-space: nowrap;
}

/* Desktop nav */
.elata-site-header__nav {
	/* The nav is allowed to shrink, exactly as on the live header: its links
	   then collapse to min-content and long labels wrap to two lines, which is
	   how "CPD TRAINING" and "APCS26 EVENT" measure 104px and 92px there rather
	   than 142px and 145px on one line.

	   This only works with `white-space: normal` on the links below. The port
	   had `nowrap`, so the nav could not give any width back — it was squeezed
	   to 680px against ~760px of un-wrappable text and the last item overflowed
	   underneath the "Mattress Selector" button. */
	flex: 1 1 auto;
	min-width: 0;
}

.elata-nav-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Do not let the header's flex layout squeeze the nav below its content
	   width — it was being shrunk to 680px against ~760px of links, so the last
	   item overflowed underneath the "Mattress Selector" button. */
	flex: 0 0 auto;
}

.elata-nav-menu .menu-item {
	position: relative;
}

.elata-nav-menu > .menu-item > a {
	color: #2b2b2b;
	text-decoration: none;
	font-family: var(--elata-font);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;
	padding: 10px 15px;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	gap: 5px;
	/* No nowrap: the live header lets long labels wrap to two lines, which is
	   how "CPD TRAINING" and "APCS26 EVENT" fit (104px and 92px wide there vs
	   142px and 145px when forced onto one line). Keeping them on one line
	   pushed the last nav item underneath the "Mattress Selector" button. */
	text-align: center;
}

.elata-nav-menu > .menu-item > a:hover,
.elata-nav-menu > .menu-item.current-menu-item > a,
.elata-nav-menu > .menu-item.current-menu-ancestor > a {
	color: #ff4e00;
}

.elata-nav-arrow {
	display: inline-flex;
	align-items: center;
}

.elata-nav-arrow svg {
	width: 12px;
	height: 7px;
}

.elata-nav-arrow svg path {
	stroke: currentColor;
}

/* Dropdown (children of a nav item become a WP sub-menu) */
.elata-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	list-style: none;
	margin: 0;
	background: #ffffff;
	min-width: 200px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0;
	padding: 15px 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 10000;
}

/* Bridges the gap between the nav link and the panel so hover isn't lost
   crossing the header's vertical padding (ported from .dropdown-menu::before). */
.elata-nav-menu .menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	height: 20px;
}

/* Keep dropdowns on the last two items from running off the right edge. */
.elata-nav-menu > .menu-item:nth-last-child(-n + 2) > .sub-menu {
	left: auto;
	right: 0;
}

.elata-nav-menu .menu-item-has-children:hover > .sub-menu,
.elata-nav-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.elata-nav-menu .sub-menu a {
	display: block;
	padding: 12px 25px;
	color: #333333;
	text-decoration: none;
	font-family: var(--elata-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	transition: all 0.3s ease;
}

.elata-nav-menu .sub-menu a:hover {
	color: #c76328;
	background: #f8f9fa;
	padding-left: 30px;
}

/* NOTE: the .elata-megamenu rules that used to live here have been removed.
   Nothing renders that class any more — the live header shows MATTRESSES as a
   plain single-column dropdown and every megamenu block in settings_data.json
   is disabled, so header.php emits an ordinary ul.sub-menu (see the comment in
   elata_primary_menu_fallback). The .sub-menu rules above already match the
   live dropdown exactly. */

/* Header CTA buttons (desktop) */
.elata-site-header__actions {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-left: auto;
}

.elata-btn-secondary,
.elata-btn-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	font-family: var(--elata-font);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	padding: 0 25px;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.elata-btn-secondary {
	background: #ffffff;
	color: var(--elata-bg-dark);
	border: 1px solid var(--elata-bg-dark);
}

.elata-btn-secondary:hover {
	background: #f5f5f5;
	color: var(--elata-bg-dark);
}

.elata-btn-contact {
	background: #2b2b2b;
	color: #ffffff;
	border: 1px solid #2b2b2b;
}

.elata-btn-contact:hover {
	opacity: 0.9;
	color: #ffffff;
}

/* Right-hand "enable lifecare" logo (right_logo_image) */
.elata-site-header__right-logo {
	display: inline-flex;
	align-items: center;
	height: 34px;
}

.elata-site-header__right-logo img {
	height: 100%;
	width: auto;
	display: block;
	object-fit: contain;
}

.elata-site-header__right-logo-text {
	font-family: var(--elata-font);
	font-size: 14px;
	font-weight: 500;
	color: #333333;
	white-space: nowrap;
}

/* Mobile toggle (hamburger_width / _thickness / _spacing) */
.elata-mobile-toggle {
	display: none;
	flex-direction: column;
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	z-index: 10001;
	margin-left: auto;
}

.elata-hamburger-line {
	width: 25px;
	height: 3px;
	background-color: #333333;
	margin: 3px 0;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.elata-mobile-toggle.is-active .elata-hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.elata-mobile-toggle.is-active .elata-hamburger-line:nth-child(2) {
	opacity: 0;
}

.elata-mobile-toggle.is-active .elata-hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile drawer — white panel with dark text (mobile_menu_bg #ffffff /
   mobile_text_color #333333). The previous version of this file had a dark
   drawer, which did not match the live site. */
.elata-mobile-menu {
	position: fixed;
	top: 0;
	left: -100%;
	width: 300px;
	max-width: 85vw;
	height: 100vh;
	background: #ffffff;
	box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
	transition: left 0.3s ease;
	z-index: 10000;
	overflow-y: auto;
	padding-top: 70px;
}

.elata-mobile-menu.is-active {
	left: 0;
}

.elata-mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 9999;
}

.elata-mobile-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.elata-mobile-menu::-webkit-scrollbar {
	width: 4px;
}

.elata-mobile-menu::-webkit-scrollbar-thumb {
	background: #ff4e00;
	border-radius: 2px;
}

.elata-nav-menu--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.elata-nav-menu--mobile .menu-item {
	border-bottom: 1px solid #eeeeee;
}

/* Parent items lay the link and its submenu toggle out on ONE row, with the
   submenu dropping below at full width. site-chrome.js inserts the toggle as a
   sibling of the link; without this it is a block-level flex element and stacks
   underneath, which rendered an extra empty chevron row under "Mattresses".
   The live drawer puts the link (248px) and toggle side by side in a single
   57px row. */
.elata-nav-menu--mobile > .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.elata-nav-menu--mobile > .menu-item-has-children > a {
	flex: 1 1 auto;
	min-width: 0;
}

.elata-nav-menu--mobile > .menu-item-has-children > .elata-mobile-dropdown-toggle {
	flex: 0 0 auto;
}

.elata-nav-menu--mobile > .menu-item-has-children > .sub-menu {
	flex: 1 0 100%;
}

/* The link already carries its own chevron for the desktop nav. In the drawer
   the injected toggle provides one, so the link's would be a second arrow on
   the same row. */
.elata-nav-menu--mobile > .menu-item-has-children > a > .elata-nav-arrow {
	display: none;
}

.elata-nav-menu--mobile > .menu-item > a {
	color: #333333;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	padding: 15px 20px;
	justify-content: space-between;
}

.elata-nav-menu--mobile > .menu-item > a:hover {
	background: #f8f9fa;
	color: #333333;
}

/* JS-injected toggle button for mobile parent items (see site-chrome.js) */
.elata-mobile-dropdown-toggle {
	background: none;
	border: none;
	color: #333333;
	cursor: pointer;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.elata-mobile-dropdown-toggle svg {
	width: 12px;
	height: 7px;
	transition: transform 0.3s ease;
}

.elata-mobile-dropdown-toggle svg path {
	stroke: currentColor;
}

.elata-nav-menu--mobile .menu-item-has-children.is-open > .elata-mobile-dropdown-toggle svg {
	transform: rotate(180deg);
}

.elata-nav-menu--mobile .sub-menu {
	position: static;
	display: block;
	width: auto;
	max-width: none;
	opacity: 1;
	visibility: visible;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: #f8f9fa;
	box-shadow: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

.elata-nav-menu--mobile .menu-item-has-children > .sub-menu::before {
	content: none;
}

.elata-nav-menu--mobile .menu-item-has-children.is-open > .sub-menu {
	max-height: 500px;
}

.elata-nav-menu--mobile .sub-menu a {
	padding: 12px 20px 12px 40px;
	color: #666666;
	font-size: 14px;
}

.elata-nav-menu--mobile .sub-menu a:hover {
	background: #ffffff;
	color: #c76328;
	padding-left: 40px;
}

.elata-mobile-menu__actions {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}

.elata-btn-secondary--block,
.elata-btn-contact--block {
	display: block;
	text-align: center;
	height: auto;
	padding: 12px 25px;
}

.elata-site-header__right-logo--mobile {
	justify-content: center;
	margin-top: 8px;
}

/* Responsive breakpoints (matches original 1400/1200 stepdowns) */
@media (max-width: 1400px) {
	.elata-site-header__inner {
		padding: 0 20px;
		gap: 20px;
	}

	/* Header nav only. Unscoped, this also applied to the mobile drawer's menu
	   (same .elata-nav-menu class) and beat `.elata-nav-menu--mobile { gap: 0 }`
	   on source order — putting a 15px gap between every drawer row, so rows sat
	   at a 73px pitch against the live drawer's 58px. */
	.elata-site-header__nav .elata-nav-menu {
		gap: 15px;
	}

	/* Header buttons only. These were unscoped, so they also shrank the mobile
	   drawer's full-width buttons (which carry the same base classes) to 23px
	   tall with 14px text — the live drawer renders them at 47-49px / 16px. */
	.elata-site-header__actions .elata-btn-secondary,
	.elata-site-header__actions .elata-btn-contact {
		padding: 0 15px;
		font-size: 14px;
	}

	.elata-site-header__actions {
		gap: 10px;
	}
}

@media (max-width: 1200px) {
	.elata-site-header__nav,
	.elata-site-header__actions {
		display: none;
	}

	.elata-mobile-toggle {
		display: flex;
	}
}

@media (min-width: 1201px) {
	.elata-mobile-toggle,
	.elata-mobile-menu,
	.elata-mobile-overlay {
		display: none !important;
	}
}

/* Fixed header needs page content pushed down (header_height 70) */
body.elata-page {
	padding-top: 70px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.elata-site-footer {
	background-color: var(--elata-bg-offwhite); /* #f5f5f5 */
	font-family: var(--elata-font);
	padding: 80px 0 0 0;
}

.elata-footer-container {
	max-width: var(--elata-max-width); /* 1600px */
	margin: 0 auto;
	padding: 0 40px;
}

.elata-footer-main {
	display: grid;
	grid-template-columns: auto 1fr 3fr;
	gap: 60px;
	padding-bottom: 60px;
	align-items: start;
}

/* logo_width 250 */
.footer-logo {
	max-width: 250px;
}

.footer-logo a {
	display: block;
}

.footer-logo img {
	width: 100%;
	height: auto;
}

.footer-logo__wordmark {
	font-family: var(--elata-font);
	font-size: 24px;
	font-weight: 600;
	color: var(--elata-bg-dark);
}

/* Middle grid track. Empty on the real site (subscribe_title and
   subscribe_button_text are blank) — kept so the menus stay in the 3fr
   track. The .footer-subscribe-* rules below are retained for the day the
   subscribe CTA is switched back on. */
.footer-subscribe {
	max-width: 350px;
}

.footer-subscribe-title {
	font-family: var(--elata-font);
	font-size: 28px; /* subscribe_title_size */
	font-weight: 500;
	line-height: 1.3;
	color: var(--elata-bg-dark);
	margin: 0 0 30px 0;
}

.footer-subscribe-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid var(--elata-bg-dark);
	color: var(--elata-bg-dark);
	font-family: var(--elata-font);
	font-size: 16px;
	font-weight: 500;
	padding: 12px 25px;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.footer-subscribe-btn:hover {
	background: var(--elata-bg-dark);
	color: #ffffff;
}

.footer-subscribe-btn svg path {
	stroke: currentColor;
}

/* Grid stays repeat(4, 1fr) exactly as in the Liquid; only menu_1 and menu_2
   are configured, so two of the four tracks are filled — same as the live
   site. */
.footer-menus {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.footer-menu-column {
	display: flex;
	flex-direction: column;
}

/* menu_1_title / menu_2_title are blank so no headings currently render;
   kept for when a column title is added. menu_title_color #888888. */
.footer-menu-title {
	font-family: var(--elata-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--elata-text-muted);
	margin: 0 0 15px 0;
}

.footer-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu-item {
	margin: 0;
	padding: 0;
}

.footer-menu-link {
	display: block;
	font-family: var(--elata-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--elata-bg-dark); /* #2b2b2b — dark on #f5f5f5 */
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.3s ease;
}

.footer-menu-link:hover {
	color: #c76328; /* link_hover_color */
}

.footer-bottom {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding: 25px 0;
}

.footer-bottom-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-bottom-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.footer-copyright {
	font-family: var(--elata-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--elata-bg-dark);
	margin: 0;
}

/* legal_menu is blank in settings_data.json so neither of these currently
   renders; retained so adding a bottom-bar legal menu needs no CSS work. */
.footer-legal-separator {
	color: rgba(0, 0, 0, 0.3);
	margin: 0 5px;
}

.footer-legal-links {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.footer-legal-link {
	font-family: var(--elata-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--elata-bg-dark);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-legal-link:hover {
	color: #c76328;
}

.footer-bottom-right {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--elata-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--elata-bg-dark);
}

.footer-region-icon {
	width: 20px;
	height: 20px;
}

@media (max-width: 1200px) {
	.elata-footer-main {
		grid-template-columns: auto 1fr;
		gap: 40px;
	}

	.footer-menus {
		grid-column: 1 / -1;
	}
}

@media (max-width: 1024px) {
	.elata-footer-main {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	/* logo_width_mobile 260 */
	.footer-logo {
		max-width: 260px;
		margin: 0 auto 20px auto;
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.footer-subscribe {
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.footer-subscribe-btn {
		margin: 0 auto;
	}

	.footer-menus {
		grid-template-columns: repeat(2, 1fr);
		grid-column: auto;
		text-align: left;
	}
}

@media (max-width: 768px) {
	.elata-footer-container {
		padding: 0 20px;
	}

	.footer-logo {
		max-width: 260px;
	}

	.footer-subscribe-title {
		font-size: 22px;
	}

	.footer-menus {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.footer-bottom-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-bottom-left {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	.footer-legal-separator {
		display: none;
	}

	.footer-bottom-right {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.footer-menus {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-menu-column {
		align-items: center;
	}
}

/* Subscribe modal.
   Not currently rendered — subscribe_title / subscribe_button_text are blank
   in settings_data.json, so footer.php outputs no subscribe CTA and no
   modal. These rules (and initSubscribeModal() in site-chrome.js, which
   no-ops when the elements are absent) are kept so re-enabling the
   newsletter modal is a markup-only change in footer.php. */
.elata-subscribe-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.elata-subscribe-modal.is-active {
	opacity: 1;
	visibility: visible;
}

.elata-subscribe-modal__dialog {
	background: #fff;
	max-width: 500px;
	width: 100%;
	padding: 50px 40px;
	position: relative;
	transform: translateY(20px);
	transition: transform 0.3s ease;
}

.elata-subscribe-modal.is-active .elata-subscribe-modal__dialog {
	transform: translateY(0);
}

.elata-subscribe-modal__close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.elata-subscribe-modal__close svg {
	width: 24px;
	height: 24px;
	stroke: var(--elata-bg-dark);
	transition: stroke 0.3s ease;
}

.elata-subscribe-modal__close:hover svg {
	stroke: #c76328;
}

.elata-subscribe-modal__title {
	font-family: var(--elata-font);
	font-size: 28px;
	font-weight: 500;
	color: var(--elata-bg-dark);
	margin: 0 0 10px 0;
	line-height: 1.3;
}

.elata-subscribe-modal__text {
	font-family: var(--elata-font);
	font-size: 16px;
	font-weight: 400;
	color: #666666;
	margin: 0 0 30px 0;
	line-height: 1.5;
}

.elata-subscribe-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.elata-subscribe-input {
	font-family: var(--elata-font);
	font-size: 16px;
	padding: 15px 20px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	color: var(--elata-bg-dark);
	transition: border-color 0.3s ease;
	width: 100%;
}

.elata-subscribe-input:focus {
	outline: none;
	border-color: var(--elata-bg-dark);
}

.elata-subscribe-submit {
	font-family: var(--elata-font);
	font-size: 16px;
	font-weight: 500;
	padding: 15px 30px;
	background: var(--elata-bg-dark);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 10px;
}

.elata-subscribe-submit:hover {
	background: #c76328;
}

.elata-subscribe-success {
	display: none;
	text-align: center;
	padding: 20px 0;
}

.elata-subscribe-success.is-visible {
	display: block;
}

#elata-subscribe-form-container.is-hidden {
	display: none;
}