/**
 * GPNF Add Entry Modal – Lady Smith Arts styling
 * Matches site brand colors, fonts, and form styling.
 */

/* ==========================================================================
   Modal header – brand color (override inline #3498db)
   ========================================================================== */
.gpnf-modal .gpnf-modal-header {
	background-color: #872573 !important; /* site brand purple */
	color: #fff !important;
	font-family: var(--global-heading-font-family, 'League Spartan', sans-serif) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
}

/* ==========================================================================
   Modal box – match site card/panel style
   ========================================================================== */
.gpnf-modal .tingle-modal-box {
	background: #fff;
	border: 1px solid #dddddd;
	border-radius: 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.gpnf-modal .tingle-modal-box__content {
	background-color: #f0f0f0;
	padding: 24px 30px 20px;
}

/* ==========================================================================
   Form wrapper – consistent with site forms
   ========================================================================== */
.gpnf-modal .gform_wrapper.gform-theme--no-framework,
.gpnf-modal .gform_wrapper[data-form-theme="gravity-theme"] {
	font-family: var(--global-body-font-family, inherit);
}

.gpnf-modal .gform_heading .gform_description {
	display: none;
}

/* ==========================================================================
   Labels – site typography
   ========================================================================== */
.gpnf-modal .gfield_label,
.gpnf-modal .gform-field-label,
.gpnf-modal legend.gfield_label {
	font-family: var(--global-heading-font-family, 'League Spartan', sans-serif) !important;
	font-weight: 600 !important;
	color: var(--global-palette3, #1a202c) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
}

.gpnf-modal .gfield_required.gfield_required_text {
	text-transform: none;
	font-weight: 500;
}

/* ==========================================================================
   Inputs – match site borders and radius
   ========================================================================== */
.gpnf-modal .gform_wrapper input[type="text"],
.gpnf-modal .gform_wrapper input[type="number"],
.gpnf-modal .gform_wrapper textarea,
.gpnf-modal .gform_wrapper .wp-editor-wrap {
	border: 1px solid #ffffff !important;
	border-radius: 0 !important;
}

.gpnf-modal .gform_wrapper input[type="file"] {
	border: 1px solid #ffffff !important;
}

.gpnf-modal input#input_5_18 {
	background: #ffffff;
}

.gpnf-modal .gform_wrapper input[type="text"]:focus,
.gpnf-modal .gform_wrapper input[type="number"]:focus,
.gpnf-modal .gform_wrapper textarea:focus {
	border-color: #872573 !important;
	outline: none;
	box-shadow: 0 0 0 1px rgba(135, 39, 115, 0.2);
}

/* TinyMCE / rich text editor container */
.gpnf-modal .mce-tinymce,
.gpnf-modal .wp-editor-container {
	border: 1px solid #dddddd !important;
	border-radius: 0 !important;
}

/* Artist Statement – shorter text area (form 5, field 7) */
.gpnf-modal #field_5_7 .mce-edit-area iframe,
.gpnf-modal #field_5_7 #input_5_7_ifr {
	height: 80px !important;
	min-height: 80px !important;
}
.gpnf-modal #field_5_7 .wp-editor-area {
	height: 80px !important;
	min-height: 80px !important;
}

/* ==========================================================================
   Checkboxes – inline choices styling
   ========================================================================== */
.gpnf-modal .gfield_checkbox .gchoice label,
.gpnf-modal .gform-field-label--type-inline {
	font-family: var(--global-body-font-family, inherit);
	font-weight: 500;
	text-transform: none;
}

.gpnf-modal .gfield-choice-input:focus {
	outline: 2px solid #872573;
	outline-offset: 2px;
}

/* ==========================================================================
   Footer buttons – primary = brand, secondary = outline
   ========================================================================== */
.gpnf-modal .tingle-modal-box__footer {
	padding: 16px 30px 24px;
	border-top: 1px solid #dddddd;
	background: #fafafa;
	border-radius: 0 0 0 0;
}

/* Primary: Add Entry */
.gpnf-modal .tingle-btn--primary,
.gpnf-modal .gpnf-btn-submit {
	background-color: #872573 !important;
	border-color: #872573 !important;
	color: #fff !important;
	font-family: var(--global-heading-font-family, 'League Spartan', sans-serif) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	border-radius: 0 !important;
	padding: 10px 24px 8px !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.gpnf-modal .tingle-btn--primary:hover,
.gpnf-modal .gpnf-btn-submit:hover {
	background-color: #962a80 !important;
	border-color: #962a80 !important;
	box-shadow: 0 4px 12px rgba(135, 39, 115, 0.25) !important;
}

/* Secondary: Cancel */
.gpnf-modal .tingle-btn--default,
.gpnf-modal .gpnf-btn-cancel {
	background-color: #fff !important;
	border: 1px solid #dddddd !important;
	color: var(--global-palette3, #1a202c) !important;
	font-family: var(--global-heading-font-family, 'League Spartan', sans-serif) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	padding: 10px 24px 8px !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gpnf-modal .tingle-btn--default:hover,
.gpnf-modal .gpnf-btn-cancel:hover {
	background-color: #f7f7f7 !important;
	border-color: #872573 !important;
	color: #872573 !important;
}

/* ==========================================================================
   File upload hint text
   ========================================================================== */
.gpnf-modal .gform_fileupload_rules,
.gpnf-modal .gfield_description {
	color: var(--global-palette6, #718096);
	font-size: 0.875rem;
}

.gpnf-modal .gform_wrapper.gravity-theme .gfield_description {
	padding-top: 0px;
}

/* Dimension validation error (height/width/depth max exceeded) */
.gpnf-modal .ms-dimension-error.validation_message,
#gform_wrapper_4 .ms-dimension-error.validation_message {
	color: #c62828;
	font-size: 0.875rem;
	margin-top: 4px;
	display: block;
}
.gpnf-modal input.gform-invalid,
#gform_wrapper_4 input.gform-invalid {
	border-color: #c62828 !important;
}

/* ==========================================================================
   Character counter
   ========================================================================== */
.gpnf-modal .ginput_counter {
	color: var(--global-palette6, #718096);
	font-size: 0.8rem;
}

/* ==========================================================================
   Responsive – mobile footer
   ========================================================================== */
@media (max-width: 712px) {
	.gpnf-modal .tingle-modal-box__footer .gpnf-btn-cancel-mobile {
		display: inline-block !important;
	}
	.gpnf-modal .tingle-modal-box__footer .gpnf-btn-cancel:not(.gpnf-btn-cancel-mobile) {
		display: none !important;
	}
}

/* ==========================================================================
   Mobile scroll: nested “Add entry” modal (Tingle)
   Default overlay is overflow:hidden; content gets overflow-y:scroll without
   max-height, so tall forms are clipped while touch scroll reaches the page
   behind (body.tingle-enabled). Scroll the overlay instead.
   ========================================================================== */
@media (max-width: 1024px) {
	.gpnf-modal.tingle-modal {
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
	}

	.gpnf-modal.tingle-modal .tingle-modal-box__content {
		overflow-y: visible;
		max-height: none;
	}
}

body.tingle-enabled {
	overscroll-behavior: none;
}