/* Nahnu Thumb Gen — UI styles */
/* Matches Liaqa design system: navy primary, red accent, clean cards */

.ntg-wrap * { box-sizing: border-box; }

.ntg-wrap {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #1a1a2e;
	max-width: 1100px;
}

.ntg-page-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7280;
	margin: 1.5rem 0 1.25rem;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.ntg-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 1.25rem;
	align-items: start;
}

@media (max-width: 900px) {
	.ntg-layout { grid-template-columns: 1fr; }
}

.ntg-col-side { position: sticky; top: 32px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.ntg-card {
	background: #fff;
	border: 1px solid #e8e8f0;
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1rem;
}

.ntg-card-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #c0392b;
	margin: 0 0 1rem;
}

.ntg-section-label {
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	margin: 0 0 8px;
}

.ntg-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

@media (max-width: 600px) {
	.ntg-two-col { grid-template-columns: 1fr; }
}

/* ── Upload zone ─────────────────────────────────────────────────────────── */

.ntg-upload-zone {
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	background: #f9fafb;
	padding: 2rem 1rem;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.ntg-upload-zone:hover,
.ntg-upload-zone.ntg-drag-over {
	border-color: #1a1f3c;
	background: #f0f1f8;
}

.ntg-upload-zone p { font-size: 14px; color: #374151; margin: 8px 0 4px; }
.ntg-upload-hint   { font-size: 12px; color: #9ca3af; }
.ntg-upload-icon   { font-size: 28px !important; color: #9ca3af; display: block; margin-bottom: 4px; }

.ntg-or-row {
	display: flex; align-items: center; gap: 12px;
	margin: 1rem 0;
}
.ntg-or-row hr   { flex: 1; border: none; border-top: 1px solid #e5e7eb; }
.ntg-or-row span { font-size: 12px; color: #9ca3af; }

.ntg-lib-btn {
	width: 100%;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px;
	background: transparent;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.ntg-lib-btn:hover { background: #f3f4f6; border-color: #9ca3af; }

.ntg-source-info {
	display: none; /* overridden to flex by JS show() — don't rely on [hidden] attribute */
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	border-radius: 8px;
	margin-top: 10px;
	font-size: 13px;
	color: #065f46;
}
.ntg-source-info span:first-child { color: #059669; font-weight: 600; }
#ntgSourceName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ntg-clear-btn {
	background: none; border: none; cursor: pointer;
	color: #6b7280; font-size: 14px; padding: 0 4px;
}
.ntg-clear-btn:hover { color: #ef4444; }

/* ── Ratio buttons ───────────────────────────────────────────────────────── */

.ntg-ratio-row {
	display: flex; gap: 10px;
	margin-bottom: .5rem;
}

.ntg-ratio-btn {
	flex: 1;
	padding: 12px 8px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	text-align: center;
	transition: all .15s;
}
.ntg-ratio-btn:hover { border-color: #1a1f3c; background: #f8f9ff; }
.ntg-ratio-btn.ntg-active {
	background: #1a1f3c;
	border-color: #1a1f3c;
	color: #fff;
}

.ntg-ratio-icon {
	display: block; margin: 0 auto 6px;
	border: 2px solid currentColor;
	opacity: .7;
}
.ntg-ratio-btn.ntg-active .ntg-ratio-icon { opacity: 1; }
.ntg-ratio-free   { width: 26px; height: 22px; border-radius: 3px; }
.ntg-ratio-square { width: 22px; height: 22px; border-radius: 3px; }
.ntg-ratio-wide   { width: 32px; height: 18px; border-radius: 2px; }

.ntg-ratio-name {
	display: block; font-size: 13px; font-weight: 600;
}
.ntg-ratio-sub {
	display: block; font-size: 11px; color: #6b7280; margin-top: 2px;
}
.ntg-ratio-btn.ntg-active .ntg-ratio-sub { color: rgba(255,255,255,.65); }

/* ── Cropper ─────────────────────────────────────────────────────────────── */

.ntg-crop-wrap {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	background: #111;
	min-height: 240px;
	display: flex; align-items: center; justify-content: center;
}

.ntg-crop-placeholder {
	text-align: center; color: #6b7280; padding: 2rem;
}
.ntg-crop-placeholder .dashicons { font-size: 32px; color: #d1d5db; }
.ntg-crop-placeholder p { font-size: 13px; margin-top: 8px; }

#ntgCropImg { display: block; max-width: 100%; }

/* ── Color swatches ──────────────────────────────────────────────────────── */

.ntg-swatches {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: 10px;
}

.ntg-swatch {
	width: 28px; height: 28px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform .15s, border-color .15s;
	padding: 0;
}
.ntg-swatch:hover   { transform: scale(1.15); }
.ntg-swatch.ntg-active { border-color: #1a1f3c; transform: scale(1.15); }

.ntg-color-custom {
	display: flex; align-items: center; gap: 10px;
	margin-top: 10px;
}

/* The label wraps the hidden input — clicking anywhere on it opens the picker */
.ntg-custom-color-btn {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 12px 7px 8px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s, background .15s;
	user-select: none;
	flex-shrink: 0;
}
.ntg-custom-color-btn:hover {
	border-color: #1a1f3c;
	background: #f8f9ff;
}

/* Hide the native input visually but keep it accessible */
.ntg-custom-color-btn input[type="color"] {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0; pointer-events: none;
}

/* Small preview swatch inside the button */
.ntg-custom-swatch {
	width: 22px; height: 22px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.12);
	flex-shrink: 0;
	display: block;
}

.ntg-custom-label {
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	white-space: nowrap;
}

.ntg-hex-display {
	font-size: 13px; color: #374151;
	font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ── Size buttons ────────────────────────────────────────────────────────── */

.ntg-size-row {
	display: flex; gap: 6px;
}
.ntg-size-btn {
	flex: 1; padding: 8px 4px;
	text-align: center;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: transparent; cursor: pointer;
	font-size: 12px; font-weight: 500;
	color: #374151;
	transition: all .15s;
}
.ntg-size-btn:hover      { border-color: #1a1f3c; background: #f8f9ff; }
.ntg-size-btn.ntg-active { background: #1a1f3c; border-color: #1a1f3c; color: #fff; }

/* ── Position grid ───────────────────────────────────────────────────────── */

.ntg-pos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
}
.ntg-pos-btn {
	aspect-ratio: 1;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: all .15s;
	padding: 0;
	color: #9ca3af;
}
.ntg-pos-btn:hover {
	border-color: #1a1f3c;
	background: #f8f9ff;
	color: #1a1f3c;
}
.ntg-pos-btn.ntg-active {
	background: #1a1f3c;
	border-color: #1a1f3c;
	color: #fff;
}
.ntg-pos-btn svg {
	width: 20px;
	height: 20px;
	display: block;
	flex-shrink: 0;
}

/* ── Preview ─────────────────────────────────────────────────────────────── */

.ntg-preview-box {
	background: #111;
	border-radius: 8px;
	overflow: hidden;
	min-height: 200px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1rem;
}
.ntg-preview-empty {
	text-align: center; color: #6b7280; padding: 2rem;
}
.ntg-preview-empty .dashicons { font-size: 32px; color: #374151; display: block; margin-bottom: 8px; }
.ntg-preview-empty p { font-size: 13px; }

.ntg-preview-thumb {
	position: relative; width: 100%;
}
.ntg-preview-thumb img {
	width: 100%; display: block;
	image-rendering: -webkit-optimize-contrast; /* Safari */
	image-rendering: crisp-edges;
}
.ntg-preview-play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 20%;
	pointer-events: none;
	transition: color .2s;
}
.ntg-preview-play svg { width: 100%; height: auto; }

/* ── Generate area ───────────────────────────────────────────────────────── */

.ntg-generate-area { display: flex; flex-direction: column; gap: .75rem; }

.ntg-btn-primary {
	width: 100%;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 16px;
	background: #1a1f3c;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px; font-weight: 600;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.ntg-btn-primary:hover    { background: #252c50; }
.ntg-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.ntg-btn-primary.ntg-loading { opacity: .7; pointer-events: none; }

.ntg-result { display: flex; flex-direction: column; gap: 8px; }

.ntg-download-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 16px;
	background: #c0392b;
	color: #fff;
	border-radius: 8px;
	font-size: 14px; font-weight: 600;
	text-decoration: none;
	transition: background .15s;
}
.ntg-download-btn:hover { background: #a93226; color: #fff; }

.ntg-expire-note {
	font-size: 12px; color: #6b7280;
	text-align: center; margin: 0;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */

.ntg-notice {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 12px; line-height: 1.5;
}
.ntg-notice-info {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}
.ntg-notice .dashicons { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── Settings ────────────────────────────────────────────────────────────── */

.ntg-fields { display: flex; flex-direction: column; gap: 1rem; }

.ntg-field-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: center;
	gap: 12px;
}
.ntg-field-row label {
	font-size: 13px; font-weight: 500; color: #374151;
}
.ntg-field-row input[type="text"],
.ntg-field-row input[type="password"],
.ntg-field-row input[type="number"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 13px;
	transition: border-color .15s;
}
.ntg-field-row input:focus {
	outline: none;
	border-color: #1a1f3c;
	box-shadow: 0 0 0 3px rgba(26,31,60,.1);
}
.ntg-field-hint {
	grid-column: 2;
	font-size: 11px; color: #9ca3af;
	margin-top: -8px;
}

.ntg-check-table { width: 100%; border-collapse: collapse; }
.ntg-check-table td { padding: 8px 0; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
.ntg-check-table td:first-child { color: #374151; }

.ntg-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px; font-weight: 600;
}
.ntg-ok   { background: #d1fae5; color: #065f46; }
.ntg-fail { background: #fee2e2; color: #991b1b; }

.ntg-test-btn {
	padding: 5px 14px;
	background: #1a1f3c;
	color: #fff;
	border: none; border-radius: 6px;
	font-size: 12px; cursor: pointer;
}
.ntg-test-btn:hover { background: #252c50; }

#ntgTestResult {
	margin-left: 10px;
	font-size: 12px;
}

.ntg-shortcode-card .ntg-code {
	display: block;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	font-family: 'SFMono-Regular', Consolas, monospace;
	color: #c0392b;
	margin: 8px 0;
}

.ntg-submit {
	margin-top: 0 !important;
}

/* ── Shortcode context ───────────────────────────────────────────────────── */

/* The shortcode wraps in ntg-shortcode — override WP theme resets that
   strip margins/padding from form elements inside page content */
.ntg-shortcode .ntg-wrap { max-width: 1100px; }
.ntg-shortcode .ntg-col-side { position: sticky; top: 100px; }
.ntg-shortcode button { font-family: inherit; }
.ntg-shortcode input  { font-family: inherit; }
.ntg-guest-msg { font-size: 14px; color: #6b7280; }

/* ── RTL support ─────────────────────────────────────────────────────────────
   Applied when ntg_is_rtl() returns true (Arabic, Hebrew, Farsi, etc.)
   The .ntg-rtl class is set on the wrapper div + dir="rtl" attribute.
   CSS logical properties handle most flipping automatically via direction:rtl
   but flex/grid rows need explicit reversal.
   The position grid is kept LTR — position names are image-relative (not UI)
   so top-left always means the top-left corner of the image.
──────────────────────────────────────────────────────────────────────────── */

.ntg-rtl {
	direction: rtl;
	text-align: right;
}

/* Reverse flex rows so icon → text reads right to left */
.ntg-rtl .ntg-upload-zone,
.ntg-rtl .ntg-source-info,
.ntg-rtl .ntg-lib-btn,
.ntg-rtl .ntg-or-row,
.ntg-rtl .ntg-btn-primary,
.ntg-rtl .ntg-download-btn,
.ntg-rtl .ntg-notice,
.ntg-rtl .ntg-color-custom,
.ntg-rtl .ntg-generate-area {
	direction: rtl;
}

/* Source info: checkmark on right, X on left */
.ntg-rtl .ntg-source-info {
	flex-direction: row-reverse;
}

/* Layout columns: preview first (right), controls second (left) in RTL */
.ntg-rtl .ntg-layout {
	direction: rtl;
}

/* Ratio row: reverse so Free is on the right */
.ntg-rtl .ntg-ratio-row {
	flex-direction: row-reverse;
}

/* Swatch row: RTL natural flow */
.ntg-rtl .ntg-swatches {
	direction: rtl;
}

/* Size buttons */
.ntg-rtl .ntg-size-row {
	flex-direction: row-reverse;
}

/* Two-col: swap sides */
.ntg-rtl .ntg-two-col {
	direction: rtl;
}

/* Card labels: right-aligned */
.ntg-rtl .ntg-card-label,
.ntg-rtl .ntg-section-label {
	text-align: right;
}

/* Upload zone text */
.ntg-rtl .ntg-upload-zone p,
.ntg-rtl .ntg-upload-hint {
	direction: rtl;
}

/* Position grid: keep LTR so button positions match image corners */
.ntg-rtl .ntg-pos-grid {
	direction: ltr;
}

/* OR divider */
.ntg-rtl .ntg-or-row span {
	direction: ltr;
}

/* Expire note: center regardless */
.ntg-rtl .ntg-expire-note {
	text-align: center;
}

/* Color hex display */
.ntg-rtl .ntg-hex-display {
	direction: ltr; /* hex codes are always LTR */
}

/* Field rows in settings */
.ntg-rtl .ntg-field-row {
	direction: rtl;
}
.ntg-rtl .ntg-field-row label {
	text-align: right;
}

/* Shortcode sticky sidebar */
.ntg-rtl .ntg-col-side {
	position: sticky;
	top: 100px;
}