/**
 * Public-facing styles — layout, lightbox, form.
 *
 * ============================================================
 * THIS IS YOUR DESIGN FILE. REDESIGN THIS FREELY.
 * ============================================================
 * Change colours, fonts, spacing, button styles, lightbox
 * look-and-feel — anything visual — without breaking logic.
 * ============================================================
 *
 * @package Nowgem_Google_Image_Search
 */

/* =============================================================
   CUSTOM PROPERTIES
   ============================================================= */

.ngis-wrap {
	--ngis-gold:         #b8982a;
	--ngis-gold-dark:    #8c6f12;
	--ngis-gold-light:   #f0e0a0;
	--ngis-dark:         #1a1a1a;
	--ngis-text:         #2a2a2a;
	--ngis-text-muted:   #666;
	--ngis-border:       rgba(0,0,0,0.10);
	--ngis-surface:      #fff;
	--ngis-surface-2:    #faf9f7;
	--ngis-error:        #c0392b;
	--ngis-success:      #2d7a4f;
	--ngis-radius:       8px;
	--ngis-radius-lg:    14px;
	--ngis-transition:   180ms cubic-bezier(0.16,1,0.3,1);
}

/* =============================================================
   WRAPPER
   ============================================================= */

.ngis-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px;
	box-sizing: border-box;
	font-family: inherit;
}

/* =============================================================
   HEADER
   ============================================================= */

.ngis-header {
	text-align: center;
	margin-bottom: 36px;
}

.ngis-heading {
	margin: 0 0 12px;
	font-size: clamp(24px, 4vw, 38px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--ngis-dark);
	letter-spacing: -0.02em;
}

.ngis-description {
	max-width: 600px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ngis-text-muted);
}

/* =============================================================
   SEARCH BOX — INLINE RENDERING OVERRIDES
   Forces Google CSE to render contained inside the page.
   ============================================================= */

.ngis-search-box {
	position: relative;
	z-index: 1;
	margin-bottom: 8px;
}

/* Remove Google's default outer container styles */
.gsc-control-cse,
.gsc-control-cse-en {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Search input */
.gsc-input-box {
	border-radius: var(--ngis-radius) !important;
	border: 1.5px solid var(--ngis-border) !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
	transition: border-color var(--ngis-transition) !important;
}

.gsc-input-box:focus-within {
	border-color: var(--ngis-gold) !important;
	box-shadow: 0 0 0 3px rgba(184,152,42,0.15) !important;
}

input.gsc-input {
	height: 48px !important;
	padding: 10px 16px !important;
	font-size: 16px !important;
	background: transparent !important;
}

/* Search button */
button.gsc-search-button,
.gsc-search-button-v2 {
	height: 48px !important;
	margin-left: 8px !important;
	padding: 0 24px !important;
	border-radius: var(--ngis-radius) !important;
	background: var(--ngis-dark) !important;
	border: none !important;
	color: #fff !important;
	cursor: pointer !important;
	transition: background var(--ngis-transition) !important;
}

button.gsc-search-button:hover,
.gsc-search-button-v2:hover {
	background: var(--ngis-gold-dark) !important;
}

/* Hide non-image clutter */
.gsc-above-wrapper-area,
.gcsc-find-more-on-google-root,
.gsc-adBlock,
.gsc-result-info,
.gsc-orderby-container,
.gsc-url-top,
.gsc-url-bottom,
.gs-imageResult .gs-title,
.gs-imageResult .gs-visibleUrl,
.gs-imageResult .gs-snippet {
	display: none !important;
}

/* Image grid results */
.gs-image {
	max-width: 100% !important;
	height: auto !important;
	border-radius: var(--ngis-radius) !important;
	display: block !important;
}

/* Wrap each result image with cursor pointer */
.gs-image-box,
.gsc-thumbnail-inside {
	cursor: pointer !important;
}

/* Prevent Google overlay popup — force inline */
.gsc-results-wrapper-overlay {
	position: static !important;
	transform: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	height: auto !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 1 !important;
}

.gsc-results-wrapper-nooverlay,
.gsc-results-wrapper-overlay {
	margin-top: 16px !important;
}

/* Image hover effect */
.gs-image-box img,
.gsc-thumbnail-inside img {
	transition: transform 220ms ease, opacity 220ms ease !important;
}

.gs-image-box:hover img,
.gsc-thumbnail-inside:hover img {
	transform: scale(1.03) !important;
	opacity: 0.9 !important;
}

/* =============================================================
   LIGHTBOX OVERLAY
   ============================================================= */

.ngis-lightbox {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	z-index: 999999;
	padding: 16px;
	box-sizing: border-box;
}

.ngis-lightbox[hidden] {
	display: none;
}

/* Backdrop */
.ngis-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10,8,6,0.82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
}

/* Main panel */
.ngis-lightbox__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 960px;
	max-height: calc(100dvh - 32px);
	background: var(--ngis-surface);
	border-radius: var(--ngis-radius-lg);
	box-shadow: 0 24px 64px rgba(0,0,0,0.4);
	overflow: hidden;
	overflow-y: auto;
	animation: ngis-panel-in 240ms cubic-bezier(0.16,1,0.3,1);
}

@keyframes ngis-panel-in {
	from { opacity: 0; transform: scale(0.96) translateY(12px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Close button */
.ngis-lightbox__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.9);
	border: 1px solid var(--ngis-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--ngis-text);
	transition: background var(--ngis-transition), color var(--ngis-transition);
}

.ngis-lightbox__close:hover {
	background: var(--ngis-dark);
	color: #fff;
}

/* Two-column body */
.ngis-lightbox__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
}

/* Image column */
.ngis-lightbox__image-col {
	background: var(--ngis-surface-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 24px 20px;
	gap: 16px;
	border-right: 1px solid var(--ngis-border);
}

.ngis-lightbox__image-wrap {
	width: 100%;
	max-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--ngis-radius);
}

.ngis-lightbox__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: var(--ngis-radius);
}

.ngis-lightbox__attribution {
	font-size: 11px;
	color: var(--ngis-text-muted);
	text-align: center;
	margin: 0;
	line-height: 1.5;
}

/* Form column */
.ngis-lightbox__form-col {
	padding: 36px 32px 32px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* =============================================================
   INQUIRY FORM
   ============================================================= */

.ngis-form__heading {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: var(--ngis-dark);
	line-height: 1.2;
}

.ngis-form__subheading {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ngis-text-muted);
}

.ngis-form__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 14px;
}

.ngis-form__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ngis-text);
	letter-spacing: 0.01em;
}

.ngis-form__required {
	color: var(--ngis-gold);
	margin-left: 2px;
}

.ngis-form__input,
.ngis-form__textarea {
	width: 100%;
	padding: 10px 13px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ngis-text);
	background: var(--ngis-surface-2);
	border: 1.5px solid rgba(0,0,0,0.12);
	border-radius: var(--ngis-radius);
	outline: none;
	transition: border-color var(--ngis-transition), box-shadow var(--ngis-transition);
	box-sizing: border-box;
}

.ngis-form__input:focus,
.ngis-form__textarea:focus {
	border-color: var(--ngis-gold);
	box-shadow: 0 0 0 3px rgba(184,152,42,0.15);
	background: #fff;
}

.ngis-form__textarea {
	resize: vertical;
	min-height: 80px;
}

.ngis-form__error {
	font-size: 12px;
	color: var(--ngis-error);
	min-height: 16px;
}

.ngis-form__error-global {
	padding: 10px 14px;
	background: #fdecea;
	border: 1px solid #f5c6cb;
	border-radius: var(--ngis-radius);
	color: var(--ngis-error);
	font-size: 13px;
	margin-bottom: 12px;
	display: none;
}

.ngis-form__error-global.is-visible {
	display: block;
}

/* Image thumbnail preview in form */
.ngis-form__image-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--ngis-surface-2);
	border: 1px solid var(--ngis-border);
	border-radius: var(--ngis-radius);
	margin-bottom: 16px;
}

.ngis-form__image-label {
	font-size: 12px;
	color: var(--ngis-text-muted);
	margin: 0;
	white-space: nowrap;
}

.ngis-form__image-preview img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--ngis-border);
	flex-shrink: 0;
}

/* Submit button */
.ngis-form__submit {
	width: 100%;
	padding: 13px 24px;
	background: var(--ngis-dark);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	border: none;
	border-radius: var(--ngis-radius);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background var(--ngis-transition), transform var(--ngis-transition);
	letter-spacing: 0.01em;
}

.ngis-form__submit:hover {
	background: var(--ngis-gold-dark);
}

.ngis-form__submit:active {
	transform: translateY(1px);
}

.ngis-form__submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

/* Loading spinner inside button */
.ngis-submit__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ngis-spin 0.6s linear infinite;
}

.ngis-form__submit.is-loading .ngis-submit__label {
	display: none;
}

.ngis-form__submit.is-loading .ngis-submit__spinner {
	display: block;
}

@keyframes ngis-spin {
	to { transform: rotate(360deg); }
}

/* =============================================================
   SUCCESS STATE
   ============================================================= */

.ngis-success-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	min-height: 300px;
	padding: 32px;
	gap: 16px;
}

.ngis-success-state[hidden] {
	display: none;
}

.ngis-success__icon {
	color: var(--ngis-success);
	animation: ngis-pop-in 400ms cubic-bezier(0.16,1,0.3,1);
}

@keyframes ngis-pop-in {
	from { transform: scale(0.5); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

.ngis-success__heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--ngis-dark);
}

.ngis-success__message {
	margin: 0;
	font-size: 15px;
	color: var(--ngis-text-muted);
	line-height: 1.65;
	max-width: 280px;
}

.ngis-success__close {
	margin-top: 8px;
	padding: 11px 28px;
	background: var(--ngis-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: var(--ngis-radius);
	cursor: pointer;
	transition: background var(--ngis-transition);
}

.ngis-success__close:hover {
	background: var(--ngis-gold-dark);
}

/* =============================================================
   RESPONSIVE — TABLET
   ============================================================= */

@media ( max-width: 767px ) {

	.ngis-lightbox__body {
		grid-template-columns: 1fr;
	}

	.ngis-lightbox__image-col {
		border-right: 0;
		border-bottom: 1px solid var(--ngis-border);
		padding: 24px 20px 16px;
	}

	.ngis-lightbox__image-wrap {
		max-height: 240px;
	}

	.ngis-lightbox__form-col {
		padding: 24px 20px;
	}

	.ngis-lightbox__panel {
		max-height: calc(100dvh - 16px);
	}

	.ngis-wrap {
		padding: 32px 16px;
	}

	.ngis-heading {
		font-size: 24px;
	}
}

/* =============================================================
   RESPONSIVE — MOBILE
   ============================================================= */

@media ( max-width: 479px ) {

	.ngis-lightbox {
		padding: 8px;
	}

	.ngis-lightbox__panel {
		border-radius: 10px;
	}

	.ngis-form__submit {
		padding: 15px 20px;
	}
}

/* =============================================================
   ACCESSIBILITY — Focus ring for lightbox close
   ============================================================= */

.ngis-lightbox__close:focus-visible,
.ngis-form__submit:focus-visible,
.ngis-success__close:focus-visible {
	outline: 2px solid var(--ngis-gold);
	outline-offset: 3px;
}