/*
 * Image Geotagger — layout only. Buttons, cards, fields, badges, toast, and
 * the accordion primitive all come from shared/css/free-tools-shared.css —
 * nothing here redefines them.
 */

.ft-image-geotagger {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-5);
	max-width: 56rem;
}

.ft-image-geotagger__intro {
	margin: 0;
	color: var(--ft-color-text-muted);
	font-size: 0.9375rem;
}

.ft-image-geotagger__dropzone {
	border: 2px dashed var(--ft-color-border-strong);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ft-image-geotagger__dropzone:hover,
.ft-image-geotagger__dropzone:focus-visible {
	border-color: var(--ft-color-primary);
}
.ft-image-geotagger__dropzone[data-dragover="true"] {
	border-color: var(--ft-color-primary);
	background: var(--ft-color-surface);
}
.ft-image-geotagger__dropzone-title {
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 4px;
}

.ft-image-geotagger__list {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-3);
}

.ft-image-geotagger__card {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: var(--ft-space-3);
	align-items: center;
}
.ft-image-geotagger__thumb {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--ft-radius-sm);
	background: var(--ft-color-surface);
	border: 1px solid var(--ft-color-border);
}
.ft-image-geotagger__card-name {
	font-weight: 600;
	font-size: 0.9375rem;
	word-break: break-all;
}
.ft-image-geotagger__card-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-1);
	align-items: flex-end;
}

.ft-image-geotagger__section {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-4);
}

/*
 * Several shared components (.ft-field, .ft-btn, this module's own
 * .ft-image-geotagger__section) set their own `display` value, which wins
 * over the UA stylesheet's `[hidden] { display: none }` on a specificity
 * tie (author styles beat UA styles regardless of matching specificity).
 * One robust override here, scoped to this module, beats chasing every
 * individual shared class that might end up on a `hidden` element.
 */
.ft-image-geotagger [hidden] {
	display: none !important;
}

.ft-image-geotagger__grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ft-space-4);
}

.ft-image-geotagger__location-actions {
	align-items: center;
}

.ft-image-geotagger__advanced {
	border: 1px solid var(--ft-color-border);
	border-radius: var(--ft-radius-md);
	overflow: hidden;
}
.ft-image-geotagger__advanced-summary {
	padding: var(--ft-space-2) var(--ft-space-3);
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--ft-color-text-muted);
}
.ft-image-geotagger__advanced-body {
	padding: var(--ft-space-3);
	border-top: 1px solid var(--ft-color-border);
}

@media (max-width: 640px) {
	.ft-image-geotagger__card {
		grid-template-columns: 56px 1fr;
	}
	.ft-image-geotagger__card-actions {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.ft-image-geotagger__grid-2 {
		grid-template-columns: 1fr;
	}
}