/* Nedclan Forms - Frontend Styles
   All colors/sizes/spacing come from CSS custom properties injected inline
   by NF_Assets from the admin settings (see class-nf-assets.php). */

.nf-trigger-wrap { display: block; }

.nf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: .02em;
	transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}
.nf-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Pre-Order button */
.nf-po-btn {
	background: var(--nf-po-btn-bg);
	color: var(--nf-po-btn-color);
	border-radius: var(--nf-po-btn-radius);
	padding: var(--nf-po-btn-padding);
	margin: var(--nf-po-btn-margin);
	font-size: var(--nf-po-btn-font-size);
	font-family: var(--nf-po-btn-font-family);
}
.nf-po-btn:hover { background: var(--nf-po-btn-hover-bg); color: var(--nf-po-btn-hover-color); }

/* Wishlist button */
.nf-wl-btn {
	background: var(--nf-wl-btn-bg);
	color: var(--nf-wl-btn-color);
	border-radius: var(--nf-wl-btn-radius);
	padding: var(--nf-wl-btn-padding);
	margin: var(--nf-wl-btn-margin);
	font-size: var(--nf-wl-btn-font-size);
}
.nf-wl-btn:hover { background: var(--nf-wl-btn-hover-bg); color: var(--nf-wl-btn-hover-color); }

/* Contact submit */
.nf-cf-submit-btn {
	background: var(--nf-cf-submit-bg);
	color: var(--nf-cf-submit-color);
	border-radius: var(--nf-cf-submit-radius);
	padding: var(--nf-cf-submit-padding);
	margin: var(--nf-cf-submit-margin);
	font-size: var(--nf-cf-submit-font-size);
	width: 100%;
}
.nf-cf-submit-btn:hover { background: var(--nf-cf-submit-hover-bg); color: var(--nf-cf-submit-hover-color); }

/* Newsletter subscribe */
.nf-nl-submit-btn {
	background: var(--nf-nl-btn-bg);
	color: var(--nf-nl-btn-color);
	border-radius: var(--nf-nl-btn-radius);
	padding: var(--nf-nl-btn-padding);
}
.nf-nl-submit-btn:hover { background: var(--nf-nl-btn-hover-bg); color: var(--nf-nl-btn-hover-color); }

/* Wishlist join button */
.nf-wl-submit-btn {
	background: var(--nf-wl-btn-bg);
	color: var(--nf-wl-btn-color);
	border-radius: var(--nf-wl-btn-radius);
	padding: 16px 28px;
	width: 100%;
	margin-top: 8px;
}
.nf-wl-submit-btn:hover { background: var(--nf-wl-btn-hover-bg); color: var(--nf-wl-btn-hover-color); }

/* ---------------------------------------------------------------------
   Reset native/theme <button> skin on all custom controls, so a theme's
   or page builder's own default button background/border/shadow can never
   silently bleed through and hide these (the same root cause behind the
   close-icon and accordion-hover issues above, applied preventively to
   every other custom bare-<button> control in the plugin).
--------------------------------------------------------------------- */
.nf-modal-close,
.nf-po-row-toggle,
.nf-po-qty button,
.nf-phone-country-toggle,
.nf-dropdown-toggle,
.nf-datepicker-toggle,
.nf-cal-nav {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   Modal / Popup
--------------------------------------------------------------------- */
.nf-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.nf-modal.is-open { display: block; }
.nf-modal-overlay { position: absolute; inset: 0; background: rgba(17,17,17,.55); }
.nf-modal-panel {
	position: relative;
	max-width: var(--nf-po-popup-max-width, 560px);
	width: calc(100% - 32px);
	margin: 40px auto;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	background: var(--nf-po-popup-bg, #fff);
	border-radius: 8px;
	padding: 40px 32px 32px; /* fallback only - overridden per-module below */
	box-sizing: border-box;
}
.nf-po-panel {
	padding: var(--nf-po-popup-padding-top, 40px) var(--nf-po-popup-padding-right, 32px) var(--nf-po-popup-padding-bottom, 32px) var(--nf-po-popup-padding-left, 32px) !important;
}
.nf-wl-panel {
	background: var(--nf-wl-form-bg, #fff);
	padding: var(--nf-wl-popup-padding-top, 40px) var(--nf-wl-popup-padding-right, 32px) var(--nf-wl-popup-padding-bottom, 32px) var(--nf-wl-popup-padding-left, 32px) !important;
}
.nf-modal-close {
	position: absolute;
	top: var(--nf-po-close-margin, 20px);
	right: var(--nf-po-close-margin, 20px);
	z-index: 5;
	width: var(--nf-po-close-size, 22px);
	height: var(--nf-po-close-size, 22px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	/* Reset the theme's/page-builder's default <button> skin (background
	   color, border, box-shadow, box-sizing quirks) which otherwise commonly
	   wins by cascade order and can make this icon invisible (e.g. a themed
	   background painted the same color as the icon, or covering it
	   entirely). All !important on purpose - this must always be visible. */
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--nf-po-close-color, #111) !important;
	line-height: 0 !important;
}
.nf-modal-close:hover { opacity: .7; }
.nf-modal-close svg { width: 100%; height: 100%; display: block; color: inherit; }

.nf-po-title, .nf-wl-title {
	text-align: var(--nf-po-title-align, center) !important;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--nf-po-title-font-size, 24px);
	color: var(--nf-po-title-color, #111);
	margin: 0 0 24px;
}
.nf-wl-title { text-align: var(--nf-wl-title-align, center) !important; font-size: var(--nf-wl-title-font-size, 24px); color: var(--nf-wl-title-color, #111); }

.nf-po-product, .nf-wl-product { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.nf-po-product-image img, .nf-wl-product-image img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.nf-po-product-name, .nf-wl-product-name { font-size: 17px; font-weight: 600; color: #111; }
.nf-po-product-price, .nf-wl-product-price { color: #444; margin-top: 4px; }

.nf-po-details-heading { font-size: 19px; margin: 0 0 12px; }

.nf-po-row { border-top: 1px solid #ececec; }
.nf-po-row-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: var(--nf-po-details-padding, 12px 0);
	text-align: left;
	/* Same theme/page-builder <button> skin reset as .nf-modal-close above -
	   without this, a theme's default button background/hover can silently
	   paint this row a solid color instead of the transparent + configurable
	   hover we actually want. */
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: inherit;
	border-radius: 4px;
	transition: background-color .15s ease, color .15s ease;
}
.nf-po-row-toggle:hover,
.nf-po-row-toggle:focus-visible {
	background: var(--nf-po-row-hover-bg, #f7f2ea) !important;
	color: var(--nf-po-row-hover-color, inherit) !important;
}
.nf-po-row-toggle:hover .nf-po-row-label,
.nf-po-row-toggle:focus-visible .nf-po-row-label { color: var(--nf-po-row-hover-color, inherit); }
.nf-po-row-icon { color: var(--nf-po-icon-color); width: var(--nf-po-icon-size); height: var(--nf-po-icon-size); padding: var(--nf-po-icon-padding); margin: var(--nf-po-icon-margin); display:flex; }
.nf-po-row-icon .nf-icon { width: 100%; height: 100%; }
.nf-po-row-label { flex: 1; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; color: var(--nf-po-details-color); }
.nf-po-row-caret { font-size: 20px; color: #333; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; }
.nf-po-row.is-open .nf-po-row-caret { background: #22391f; color: #fff; border-color: #22391f; }
.nf-po-row-content { display: none; padding: var(--nf-po-details-margin, 0 0 8px 0); font-size: var(--nf-po-details-font-size); color: var(--nf-po-details-color); line-height: 1.6; }
.nf-po-row.is-open .nf-po-row-content { display: block; }

.nf-po-actions { display: flex; align-items: stretch; gap: 12px; margin-top: 20px; }
.nf-po-qty {
	display: flex; align-items: center; background: var(--nf-po-qty-bg);
	border-radius: var(--nf-po-qty-radius); padding: var(--nf-po-qty-padding); margin: var(--nf-po-qty-margin);
}
.nf-po-qty button { background: none; border: none; font-size: 18px; width: 24px; cursor: pointer; color: var(--nf-po-qty-color); }
.nf-po-qty button:hover { color: var(--nf-po-qty-hover-bg); }
.nf-po-qty-input { width: 32px; border: none; background: none; text-align: center; font-size: var(--nf-po-qty-font-size); color: var(--nf-po-qty-color); -moz-appearance: textfield; }
.nf-po-qty-input::-webkit-outer-spin-button, .nf-po-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.nf-po-checkout-btn {
	flex: 1;
	background: var(--nf-po-checkout-bg);
	color: var(--nf-po-checkout-color);
	border-radius: var(--nf-po-checkout-radius);
	padding: var(--nf-po-checkout-padding);
	font-size: var(--nf-po-checkout-font-size);
}
.nf-po-checkout-btn:hover { background: var(--nf-po-checkout-hover-bg); color: var(--nf-po-checkout-hover-color); }

/* ---------------------------------------------------------------------
   Forms (shared: Wishlist / Contact / Newsletter)
--------------------------------------------------------------------- */
.nf-block { max-width: 720px; margin: 0 auto; }
.nf-cf-title, .nf-nl-title { text-align: var(--nf-cf-title-align, center) !important; text-transform: uppercase; letter-spacing: .04em; font-size: var(--nf-cf-title-font-size); color: var(--nf-cf-title-color); margin: 0 0 28px; }
.nf-nl-title { text-align: var(--nf-nl-title-align, center) !important; font-size: var(--nf-nl-title-font-size); color: var(--nf-nl-title-color); margin-bottom: 4px; }
.nf-nl-subtitle { text-align: var(--nf-nl-title-align, center) !important; font-size: var(--nf-nl-subtitle-font-size); color: var(--nf-nl-subtitle-color); margin: 0 0 24px; }

.nf-form-row { margin-bottom: var(--nf-cf-field-spacing, 16px); }
.nf-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nf-form-row-2 .nf-field { margin-bottom: 0; }

.nf-field input[type="text"],
.nf-field input[type="email"],
.nf-field input[type="tel"],
.nf-field input[type="number"],
.nf-field textarea {
	width: 100%;
	box-sizing: border-box;
	height: var(--nf-cf-field-height, 54px);
	border: var(--nf-cf-field-border-width, 1px) solid var(--nf-cf-field-border-color, #111);
	border-radius: var(--nf-cf-field-border-radius, 30px);
	padding: 0 20px;
	font-size: var(--nf-cf-field-font-size, 15px);
	color: var(--nf-cf-field-color, #111);
	background: var(--nf-cf-field-bg, #fff);
	outline: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.nf-field textarea { height: var(--nf-cf-textarea-height, 160px); border-radius: var(--nf-cf-textarea-radius, 18px); padding: 16px 20px; resize: vertical; }
.nf-field input::placeholder, .nf-field textarea::placeholder,
.nf-field input::-webkit-input-placeholder, .nf-field textarea::-webkit-input-placeholder,
.nf-field input::-moz-placeholder, .nf-field textarea::-moz-placeholder,
.nf-field input:-ms-input-placeholder, .nf-field textarea:-ms-input-placeholder {
	color: var(--nf-cf-placeholder-color, #7d8794) !important;
	opacity: 1 !important;
}
.nf-field input:focus, .nf-field textarea:focus { border-color: var(--nf-cf-field-active-border, #c1622d); }

.nf-wl-form .nf-field input { height: var(--nf-wl-field-height, 54px); border-radius: var(--nf-wl-field-border-radius, 30px); border-color: var(--nf-wl-field-border-color); color: var(--nf-wl-field-color); font-size: var(--nf-wl-field-font-size); background: var(--nf-wl-field-bg, #fff); }
.nf-wl-form .nf-field input::placeholder,
.nf-wl-form .nf-field input::-webkit-input-placeholder,
.nf-wl-form .nf-field input::-moz-placeholder,
.nf-wl-form .nf-field input:-ms-input-placeholder {
	color: var(--nf-wl-placeholder-color) !important;
	opacity: 1 !important;
}
.nf-wl-form .nf-field input:focus { border-color: var(--nf-wl-field-active-border); }
.nf-wl-form .nf-form-row { margin-bottom: var(--nf-wl-field-spacing, 16px); }

.nf-nl-form .nf-field input { height: var(--nf-nl-field-height, 54px); border-radius: var(--nf-nl-field-border-radius, 30px); border-color: var(--nf-nl-field-border-color); color: var(--nf-nl-field-color); font-size: var(--nf-nl-field-font-size); background: var(--nf-nl-field-bg, #fff); }
.nf-nl-form .nf-field input::placeholder,
.nf-nl-form .nf-field input::-webkit-input-placeholder,
.nf-nl-form .nf-field input::-moz-placeholder,
.nf-nl-form .nf-field input:-ms-input-placeholder {
	color: var(--nf-nl-placeholder-color) !important;
	opacity: 1 !important;
}

.nf-field-with-button { position: relative; }
.nf-field-with-button input { padding-right: 150px; }
.nf-field-with-button .nf-btn { position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 24px; height: auto; }

/* File upload field */
.nf-field-file { }
.nf-file-label {
	display: flex; align-items: center; gap: 12px;
	border: var(--nf-cf-field-border-width, 1px) solid var(--nf-cf-field-border-color, #111);
	border-radius: 12px;
	height: var(--nf-cf-field-height, 54px);
	padding: 0 20px;
	cursor: pointer;
	background: var(--nf-cf-file-bg, #fff);
}
.nf-file-btn { background: #eee; border-radius: 4px; padding: 6px 14px; font-size: 14px; color: #333; }
.nf-file-name { color: var(--nf-cf-placeholder-color, #7d8794); font-size: var(--nf-cf-field-font-size, 15px); }
.nf-file-label input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nf-file-hint { font-size: 12px; color: #8a8a8a; margin: 6px 4px 0; }

/* ---------------------------------------------------------------------
   Simple Newsletter (always one line: input + button, no stacking)
--------------------------------------------------------------------- */
.nf-simple-newsletter-block { max-width: var(--nf-sn-form-width, 620px); margin: 0 auto; }
.nf-sn-title { text-align: var(--nf-sn-title-align, center) !important; text-transform: uppercase; letter-spacing: .04em; font-size: var(--nf-sn-title-font-size, 24px); color: var(--nf-sn-title-color, #111); margin: 0 0 4px; }
.nf-sn-subtitle { text-align: var(--nf-sn-title-align, center) !important; font-size: var(--nf-sn-subtitle-font-size, 14px); color: var(--nf-sn-subtitle-color, #5b6470); margin: 0 0 var(--nf-sn-field-title-margin, 10px); }

.nf-sn-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	height: var(--nf-sn-field-height, 60px);
	background: var(--nf-sn-field-bg, #fff);
	border: var(--nf-sn-field-border-width, 1px) solid var(--nf-sn-field-border-color, #111);
	border-radius: var(--nf-sn-field-border-radius, 30px);
	padding: 6px;
	transition: border-color .15s ease;
}
.nf-sn-row:focus-within { border-color: var(--nf-sn-field-active-border, #c1622d); }

.nf-sn-input {
	flex: 1 1 auto;
	min-width: 0; /* critical: lets the input shrink instead of forcing a wrap */
	height: 100%;
	border: none !important;
	outline: none;
	background: transparent !important;
	padding: 0 20px;
	font-size: var(--nf-sn-field-font-size, 15px);
	color: var(--nf-sn-field-color, #111) !important;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
/* !important + every vendor-prefixed placeholder pseudo-element: page-builder
   themes (Astra/Elementor Kit typography, global form-field styles, etc.)
   commonly ship their own higher-specificity placeholder rules that would
   otherwise silently override ours and make the text invisible. */
.nf-sn-input::placeholder,
.nf-sn-input::-webkit-input-placeholder,
.nf-sn-input::-moz-placeholder,
.nf-sn-input:-ms-input-placeholder,
.nf-sn-input:-moz-placeholder {
	color: var(--nf-sn-placeholder-color, #7d8794) !important;
	opacity: 1 !important;
	-webkit-text-fill-color: var(--nf-sn-placeholder-color, #7d8794);
}

.nf-sn-submit-btn {
	flex: 0 0 auto;
	white-space: nowrap;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nf-sn-btn-bg);
	color: var(--nf-sn-btn-color);
	border-radius: var(--nf-sn-btn-radius);
	padding: var(--nf-sn-btn-padding);
	margin: var(--nf-sn-btn-margin);
	font-size: var(--nf-sn-btn-font-size);
	font-family: var(--nf-sn-btn-font-family);
}
.nf-sn-submit-btn:hover { background: var(--nf-sn-btn-hover-bg); color: var(--nf-sn-btn-hover-color); }

.nf-simple-newsletter-block .nf-success-message { background: var(--nf-sn-popup-bg); color: var(--nf-sn-popup-color); font-size: var(--nf-sn-popup-font-size); }
.nf-simple-newsletter-block .nf-success-message.is-error { background: var(--nf-sn-popup-error-bg); }
.nf-simple-newsletter-block .nf-form-error { text-align: center; }

/* Shrink padding/font on narrow screens so the row keeps fitting on one
   line all the way down to small phones - never switch to flex-wrap. */
@media (max-width: 600px) {
	.nf-sn-input { padding: 0 12px; font-size: 14px; }
	.nf-sn-submit-btn { padding: 0 18px; font-size: 13px; }
}
@media (max-width: 380px) {
	.nf-sn-row { padding: 4px; }
	.nf-sn-input { padding: 0 8px; font-size: 13px; }
	.nf-sn-submit-btn { padding: 0 12px; font-size: 12px; }
}

/* ---------------------------------------------------------------------
   Project Form
--------------------------------------------------------------------- */
.nf-project-block { max-width: var(--nf-pf-form-width, 720px); }
.nf-pf-title { text-align: var(--nf-pf-title-align, center) !important; text-transform: uppercase; letter-spacing: .04em; font-size: var(--nf-pf-title-font-size); color: var(--nf-pf-title-color); margin: 0 0 28px; }
.nf-pf-form .nf-form-row { margin-bottom: var(--nf-pf-field-spacing, 16px); }
.nf-pf-form .nf-field input,
.nf-pf-form .nf-field textarea {
	height: var(--nf-pf-field-height, 54px);
	border-width: var(--nf-pf-field-border-width, 1px);
	border-color: var(--nf-pf-field-border-color, #111);
	border-radius: var(--nf-pf-field-border-radius, 10px);
	color: var(--nf-pf-field-color, #111);
	font-size: var(--nf-pf-field-font-size, 15px);
	background: var(--nf-pf-field-bg, #fff);
}
.nf-pf-form .nf-field input::placeholder,
.nf-pf-form .nf-field textarea::placeholder,
.nf-pf-form .nf-field input::-webkit-input-placeholder,
.nf-pf-form .nf-field textarea::-webkit-input-placeholder,
.nf-pf-form .nf-field input::-moz-placeholder,
.nf-pf-form .nf-field textarea::-moz-placeholder,
.nf-pf-form .nf-field input:-ms-input-placeholder,
.nf-pf-form .nf-field textarea:-ms-input-placeholder {
	color: var(--nf-pf-placeholder-color, #7d8794) !important;
	opacity: 1 !important;
}
.nf-pf-form .nf-field input:focus,
.nf-pf-form .nf-field textarea:focus { border-color: var(--nf-pf-field-active-border, #c1622d); }
.nf-pf-form .nf-field textarea { height: var(--nf-pf-textarea-height, 160px); border-radius: var(--nf-pf-textarea-radius, 10px); }
.nf-pf-form .nf-file-label { border-radius: var(--nf-pf-field-border-radius, 10px); border-color: var(--nf-pf-field-border-color, #111); height: var(--nf-pf-field-height, 54px); background: var(--nf-pf-file-bg, #fff); }
.nf-pf-form .nf-phone-field { border-radius: var(--nf-pf-field-border-radius, 10px); border-color: var(--nf-pf-field-border-color, #111); height: var(--nf-pf-field-height, 54px); background: var(--nf-pf-field-bg, #fff); }
.nf-pf-submit-btn {
	background: var(--nf-pf-submit-bg);
	color: var(--nf-pf-submit-color);
	border-radius: var(--nf-pf-submit-radius);
	padding: var(--nf-pf-submit-padding);
	margin: var(--nf-pf-submit-margin);
	font-size: var(--nf-pf-submit-font-size);
	width: 100%;
}
.nf-pf-submit-btn:hover { background: var(--nf-pf-submit-hover-bg); color: var(--nf-pf-submit-hover-color); }
.nf-project-block .nf-success-message { background: var(--nf-pf-popup-bg); color: var(--nf-pf-popup-color); font-size: var(--nf-pf-popup-font-size); }
.nf-project-block .nf-success-message.is-error { background: var(--nf-pf-popup-error-bg); }

/* ---------------------------------------------------------------------
   Custom dropdown (Project category)
--------------------------------------------------------------------- */
.nf-dropdown { position: relative; height: 100%; }
.nf-dropdown-toggle {
	width: 100%;
	height: var(--nf-pf-field-height, 54px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--nf-pf-field-bg, #fff);
	border: var(--nf-pf-field-border-width, 1px) solid var(--nf-pf-field-border-color, #111);
	border-radius: var(--nf-pf-field-border-radius, 10px);
	padding: 0 20px;
	font-size: var(--nf-pf-field-font-size, 15px);
	color: var(--nf-pf-placeholder-color, #7d8794);
	cursor: pointer;
	box-sizing: border-box;
}
.nf-dropdown.has-value .nf-dropdown-toggle { color: var(--nf-pf-field-color, #111); }
.nf-dropdown.is-open .nf-dropdown-toggle { border-color: var(--nf-pf-field-active-border, #c1622d); }
.nf-dropdown-caret { flex-shrink: 0; margin-left: 10px; transition: transform .15s ease; }
.nf-dropdown.is-open .nf-dropdown-caret { transform: rotate(180deg); }

.nf-dropdown-list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--nf-dd-bg, #fff);
	border: 1px solid var(--nf-dd-border-color, #111);
	border-radius: var(--nf-dd-border-radius, 10px);
	overflow-y: auto;
	max-height: var(--nf-dd-max-height, 320px);
	z-index: 20;
	box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.nf-dropdown-item {
	padding: var(--nf-dd-item-padding, 16px 20px);
	font-size: var(--nf-dd-font-size, 15px);
	color: var(--nf-dd-text-color, #111);
	cursor: pointer;
}
.nf-dropdown-item:hover,
.nf-dropdown-item.is-active { background: var(--nf-dd-hover-bg, #c1622d); color: var(--nf-dd-hover-color, #fff); }
.nf-dropdown-item.is-selected { background: var(--nf-dd-selected-bg, #c1622d); color: var(--nf-dd-selected-color, #fff); }
.nf-dropdown-other-field { padding: 12px 20px 16px; }
.nf-dropdown-other-input { width: 100%; border: none; border-bottom: 1px solid #999; padding: 6px 2px; font-size: var(--nf-dd-font-size, 15px); background: transparent; outline: none; box-sizing: border-box; }

/* ---------------------------------------------------------------------
   Custom calendar date picker
--------------------------------------------------------------------- */
.nf-datepicker { position: relative; }
.nf-datepicker-toggle {
	width: 100%;
	height: var(--nf-pf-field-height, 54px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--nf-pf-field-bg, #fff);
	border: var(--nf-pf-field-border-width, 1px) solid var(--nf-pf-field-border-color, #111);
	border-radius: var(--nf-pf-field-border-radius, 10px);
	padding: 0 20px;
	font-size: var(--nf-pf-field-font-size, 15px);
	color: var(--nf-pf-placeholder-color, #7d8794);
	cursor: pointer;
	box-sizing: border-box;
}
.nf-datepicker.has-value .nf-datepicker-toggle { color: var(--nf-pf-field-color, #111); }
.nf-datepicker-toggle svg { color: #999; flex-shrink: 0; }

.nf-calendar {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 340px;
	max-width: 90vw;
	background: var(--nf-cal-bg, #fff);
	border-radius: var(--nf-cal-radius, 24px);
	padding: var(--nf-cal-padding, 30px);
	margin: var(--nf-cal-margin, 0);
	box-shadow: 0 16px 40px rgba(0,0,0,.16);
	z-index: 30;
	font-family: var(--nf-cal-font-family, inherit);
	box-sizing: border-box;
}
.nf-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.nf-cal-month-label { font-size: var(--nf-cal-title-font-size, 22px); color: var(--nf-cal-text-color, #222); }
.nf-cal-nav {
	width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: var(--nf-cal-nav-bg, #f4e4d4); color: var(--nf-cal-nav-color, #c9c9c9);
}
.nf-cal-next { background: var(--nf-cal-nav-next-bg, #e07b28); color: var(--nf-cal-nav-next-color, #fff); }
.nf-cal-prev:disabled { opacity: .5; cursor: not-allowed; }

.nf-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 13px; color: var(--nf-cal-weekday-color, #222); margin-bottom: 10px; }
.nf-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.nf-cal-day-cell { display: flex; align-items: center; justify-content: center; }
.nf-cal-day {
	width: var(--nf-cal-day-size, 48px);
	height: var(--nf-cal-day-size, 48px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--nf-cal-muted-color, #c9c9c9);
	background: none;
	border: none;
	cursor: default;
}
.nf-cal-day.is-empty { visibility: hidden; }
.nf-cal-day.is-available { color: var(--nf-cal-text-color, #222); cursor: pointer; }
.nf-cal-day.is-available:hover { background: var(--nf-cal-available-bg, #fbe4cd); }
.nf-cal-day.has-dot { position: relative; }
.nf-cal-day.has-dot::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.nf-cal-day.is-past { color: var(--nf-cal-muted-color, #c9c9c9); cursor: not-allowed; }
.nf-cal-day.is-selected { background: var(--nf-cal-selected-bg, #e07b28); color: var(--nf-cal-selected-color, #fff); font-weight: 600; }

/* ---------------------------------------------------------------------
   Phone country-code dropdown
--------------------------------------------------------------------- */
.nf-phone-field {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--nf-cf-field-height, 54px);
	border: var(--nf-cf-field-border-width, 1px) solid var(--nf-cf-field-border-color, #111);
	border-radius: var(--nf-cf-field-border-radius, 30px);
	padding: 0 16px;
	box-sizing: border-box;
	background: var(--nf-cf-field-bg, #fff);
	overflow: visible;
}
.nf-wl-form .nf-phone-field { border-color: var(--nf-wl-field-border-color); border-radius: var(--nf-wl-field-border-radius); height: var(--nf-wl-field-height); background: var(--nf-wl-field-bg, #fff); }
.nf-nl-form .nf-phone-field { border-color: var(--nf-nl-field-border-color); border-radius: var(--nf-nl-field-border-radius); height: var(--nf-nl-field-height); background: var(--nf-nl-field-bg, #fff); }

.nf-phone-country-toggle { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: var(--nf-cf-dropdown-color, #111); padding: 0; z-index: 2; }
.nf-phone-country-toggle:hover { color: var(--nf-cf-dropdown-hover-color, #c1622d); }
.nf-phone-flag { font-size: 20px; line-height: 1; }
.nf-phone-caret { margin-left: 2px; }
.nf-phone-divider { width: 1px; height: 24px; background: #ddd; margin: 0 12px; flex-shrink: 0; }
.nf-phone-dial-code { color: #7d8794; margin-right: 8px; white-space: nowrap; flex-shrink: 0; }
/* The actual typing area. A theme's/page-builder's own default <input>
   skin (background color, border-radius, box-shadow, inset border) commonly
   bleeds through here - the same root cause we've hardened against
   elsewhere in this stylesheet - and can visually look like a separate
   floating "pill" and make the field feel unclickable. All !important on
   purpose so typing here always works regardless of theme. */
.nf-phone-number {
	border: none !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 60px;
	width: auto;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	color: inherit;
	font: inherit;
	font-size: inherit;
	line-height: normal;
	position: relative;
	z-index: 2;
	cursor: text;
	pointer-events: auto !important;
}
.nf-phone-number::placeholder { color: var(--nf-cf-placeholder-color, #7d8794) !important; opacity: 1 !important; }

.nf-phone-dropdown-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: 260px;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 10;
	margin: 0;
	padding: 6px 0;
	list-style: none;
}
.nf-phone-dropdown-list li { padding: 8px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.nf-phone-dropdown-list li:hover, .nf-phone-dropdown-list li.is-active { background: #f5f5f5; }
.nf-phone-search { width: calc(100% - 24px); margin: 4px 12px 8px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; }

/* ---------------------------------------------------------------------
   Messages / errors / recaptcha
--------------------------------------------------------------------- */
.nf-form-error { color: #b3261e; font-size: 14px; margin: 4px 2px 10px; }
.nf-field.has-error input, .nf-field.has-error textarea, .nf-field.has-error .nf-phone-field,
.nf-field.has-error .nf-dropdown-toggle, .nf-field.has-error .nf-datepicker-toggle { border-color: #b3261e !important; }

.nf-success-message {
	text-align: center;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--nf-cf-popup-bg, #2f5233);
	color: var(--nf-cf-popup-color, #fff);
	font-size: var(--nf-cf-popup-font-size, 15px);
	margin-top: 16px;
}
.nf-success-message.is-error { background: var(--nf-cf-popup-error-bg, #b3261e); }

.nf-g-recaptcha { margin: 12px 0; }
.nf-recaptcha-note { font-size: 12px; color: #8a8a8a; margin: 4px 0 12px; display: none; }
/* Hidden site-wide per admin preference. Google's terms require this text
   ONLY if the floating reCAPTCHA badge (bottom-right corner) is also hidden
   via custom CSS - since that badge is left untouched/visible, hiding this
   inline duplicate line is fine. If the floating badge is ever hidden too,
   this note (or equivalent wording) must be shown somewhere on the page. */

.nf-ajax-form.is-loading { opacity: .6; pointer-events: none; }
.nf-ajax-form { transition: opacity .15s ease; }

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width: 782px) {
	.nf-form-row-2 { grid-template-columns: 1fr; gap: var(--nf-cf-field-spacing, 16px); }
	.nf-modal-panel { padding: 32px 20px 24px; margin: 20px auto; }
	.nf-po-actions { flex-direction: column; }
	.nf-po-qty { justify-content: center; }
	.nf-field-with-button input { padding-right: 20px; }
	.nf-field-with-button .nf-btn { position: static; width: 100%; margin-top: 10px; height: 50px; }

	/* Tablet title/subtitle font sizes, per module. */
	.nf-po-title { font-size: var(--nf-po-title-font-size-tablet, 22px); }
	.nf-wl-title { font-size: var(--nf-wl-title-font-size-tablet, 22px); }
	.nf-cf-title { font-size: var(--nf-cf-title-font-size-tablet, 24px); }
	.nf-pf-title { font-size: var(--nf-pf-title-font-size-tablet, 24px); }
	.nf-sn-title { font-size: var(--nf-sn-title-font-size-tablet, 22px); }
	.nf-sn-subtitle { font-size: var(--nf-sn-subtitle-font-size-tablet, 13px); }
	.nf-nl-title { font-size: var(--nf-nl-title-font-size-tablet, 22px); }
	.nf-nl-subtitle { font-size: var(--nf-nl-subtitle-font-size-tablet, 13px); }
}

@media (max-width: 480px) {
	.nf-po-product-image img, .nf-wl-product-image img { width: 72px; height: 72px; }
	.nf-modal-panel { width: calc(100% - 16px); margin: 12px auto; }
	.nf-calendar { width: calc(100vw - 40px); left: 50%; transform: translateX(-50%); padding: 20px; }
	.nf-cal-day { width: 38px; height: 38px; font-size: 14px; }
	.nf-dropdown-list { max-height: 260px; }

	/* Mobile title/subtitle font sizes, per module. */
	.nf-po-title { font-size: var(--nf-po-title-font-size-mobile, 20px); }
	.nf-wl-title { font-size: var(--nf-wl-title-font-size-mobile, 20px); }
	.nf-cf-title { font-size: var(--nf-cf-title-font-size-mobile, 20px); }
	.nf-pf-title { font-size: var(--nf-pf-title-font-size-mobile, 20px); }
	.nf-sn-title { font-size: var(--nf-sn-title-font-size-mobile, 20px); }
	.nf-sn-subtitle { font-size: var(--nf-sn-subtitle-font-size-mobile, 12px); }
	.nf-nl-title { font-size: var(--nf-nl-title-font-size-mobile, 20px); }
	.nf-nl-subtitle { font-size: var(--nf-nl-subtitle-font-size-mobile, 12px); }
}