/* =============================================================================
   GallerImage Studio — Design System
   A refined, editorial design language for a premium photography marketplace.
   Replaces the dated purple-gradient look with confident neutrals, generous
   whitespace, and a single decisive accent.
   ============================================================================= */

/* Tokens are scoped to .gis-scope (not :root) so they never leak into the theme
   and can be overridden per-instance by the plugin's inline customization CSS. */
.gis-scope {
	/* Palette — ink neutrals + one decisive accent + semantic colors */
	--gis-ink:        #14181f;   /* primary text / primary actions */
	--gis-ink-soft:   #2a2f3a;
	--gis-muted:      #6b7280;   /* secondary text */
	--gis-faint:      #9aa1ad;   /* tertiary / placeholders */
	--gis-line:       #e7e9ee;   /* borders */
	--gis-line-soft:  #f0f2f5;
	--gis-bg:         #f6f7f9;   /* app background */
	--gis-surface:    #ffffff;   /* cards / panels */
	--gis-surface-2:  #fbfcfd;

	--gis-accent:     #2f6df6;   /* links, focus, active */
	--gis-accent-ink: #1f54d6;
	--gis-accent-bg:  #eaf1ff;

	--gis-success:    #0f9d6b;
	--gis-success-bg: #e6f7f0;
	--gis-warn:       #c07a12;
	--gis-warn-bg:    #fdf3e2;
	--gis-danger:     #d6443c;
	--gis-danger-bg:  #fdeceb;
	--gis-fav:        #e11d48;   /* favorites / hearts */
	--gis-fav-bg:     #fdeaef;

	/* Radii */
	--gis-r-sm: 8px;
	--gis-r:    12px;
	--gis-r-lg: 18px;
	--gis-r-pill: 999px;

	/* Shadows — soft, layered, never heavy */
	--gis-shadow-xs: 0 1px 2px rgba(20, 24, 31, .05);
	--gis-shadow-sm: 0 2px 8px rgba(20, 24, 31, .06);
	--gis-shadow:    0 8px 24px rgba(20, 24, 31, .08);
	--gis-shadow-lg: 0 20px 48px rgba(20, 24, 31, .16);

	/* Motion */
	--gis-ease: cubic-bezier(.4, 0, .2, 1);
	--gis-fast: 140ms;
	--gis-base: 220ms;

	/* Typography */
	--gis-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Scope everything to .gis-scope to avoid clobbering theme styles */
.gis-scope,
.gis-scope * {
	box-sizing: border-box;
}

.gis-scope {
	font-family: var(--gis-font);
	color: var(--gis-ink);
	-webkit-font-smoothing: antialiased;
}

/* ----- Layout primitives ----- */
.gis-page {
	background: var(--gis-bg);
	margin: -20px;
	padding: 0 0 3rem;
	min-height: 70vh;
}

.gis-container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ----- Page header (replaces the purple gradient banner) ----- */
.gis-header {
	background: var(--gis-surface);
	border-bottom: 1px solid var(--gis-line);
	padding: 2rem 0 1.75rem;
	margin-bottom: 2rem;
}

.gis-header__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.gis-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gis-accent);
	margin: 0 0 .5rem;
}

.gis-title {
	font-size: 1.9rem;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--gis-ink);
	margin: 0;
}

.gis-subtitle {
	color: var(--gis-muted);
	font-size: .975rem;
	margin: .5rem 0 0;
	max-width: 56ch;
}

/* ----- Cards / panels ----- */
.gis-card {
	background: var(--gis-surface);
	border: 1px solid var(--gis-line);
	border-radius: var(--gis-r-lg);
	box-shadow: var(--gis-shadow-xs);
}

.gis-card__body { padding: 1.5rem; }
.gis-card__head {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--gis-line-soft);
	display: flex;
	align-items: center;
	gap: .65rem;
}
.gis-card__head h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -.01em;
}

/* ----- Buttons ----- */
.gis-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: inherit;
	font-size: .925rem;
	font-weight: 600;
	line-height: 1;
	padding: .72rem 1.15rem;
	border-radius: var(--gis-r);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--gis-fast) var(--gis-ease),
		background var(--gis-fast) var(--gis-ease),
		box-shadow var(--gis-fast) var(--gis-ease),
		border-color var(--gis-fast) var(--gis-ease);
	white-space: nowrap;
	user-select: none;
}
.gis-btn:active { transform: translateY(1px); }
.gis-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--gis-accent-bg);
}
.gis-btn--primary { background: var(--gis-ink); color: #fff; }
.gis-btn--primary:hover { background: #000; color: #fff; box-shadow: var(--gis-shadow-sm); }
.gis-btn--accent { background: var(--gis-accent); color: #fff; }
.gis-btn--accent:hover { background: var(--gis-accent-ink); color: #fff; box-shadow: var(--gis-shadow-sm); }
.gis-btn--ghost { background: var(--gis-surface); color: var(--gis-ink); border-color: var(--gis-line); }
.gis-btn--ghost:hover { background: var(--gis-surface-2); border-color: var(--gis-faint); }
.gis-btn--danger { background: var(--gis-danger-bg); color: var(--gis-danger); }
.gis-btn--danger:hover { background: var(--gis-danger); color: #fff; }
.gis-btn--lg { padding: .95rem 1.6rem; font-size: 1rem; }
.gis-btn--sm { padding: .5rem .85rem; font-size: .825rem; }
.gis-btn--block { width: 100%; }
.gis-btn[disabled], .gis-btn.is-disabled {
	opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* ----- Form controls ----- */
.gis-field { margin-bottom: 1.25rem; }
.gis-label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--gis-ink-soft);
	margin-bottom: .45rem;
}
.gis-hint { font-size: .8rem; color: var(--gis-muted); margin: .4rem 0 0; }

.gis-input,
.gis-select,
.gis-textarea {
	width: 100%;
	font-family: inherit;
	font-size: .95rem;
	color: var(--gis-ink);
	background: var(--gis-surface);
	border: 1px solid var(--gis-line);
	border-radius: var(--gis-r);
	padding: .72rem .9rem;
	transition: border-color var(--gis-fast) var(--gis-ease),
		box-shadow var(--gis-fast) var(--gis-ease);
}
.gis-input::placeholder, .gis-textarea::placeholder { color: var(--gis-faint); }
.gis-input:focus,
.gis-select:focus,
.gis-textarea:focus {
	outline: none;
	border-color: var(--gis-accent);
	box-shadow: 0 0 0 3px var(--gis-accent-bg);
}
.gis-input-group { position: relative; }
.gis-input-group .gis-input { padding-left: 2.5rem; }
.gis-input-group__icon {
	position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
	color: var(--gis-faint); pointer-events: none;
}

/* ----- Badges ----- */
.gis-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .75rem; font-weight: 600;
	padding: .3rem .65rem; border-radius: var(--gis-r-pill);
	background: var(--gis-line-soft); color: var(--gis-ink-soft);
}
.gis-badge--accent { background: var(--gis-accent-bg); color: var(--gis-accent-ink); }
.gis-badge--success { background: var(--gis-success-bg); color: var(--gis-success); }
.gis-badge--warn { background: var(--gis-warn-bg); color: var(--gis-warn); }
.gis-badge--danger { background: var(--gis-danger-bg); color: var(--gis-danger); }

/* ----- Inline notice / messages ----- */
.gis-notice {
	display: flex; align-items: flex-start; gap: .65rem;
	padding: .9rem 1.1rem; border-radius: var(--gis-r);
	font-size: .9rem; border: 1px solid transparent;
}
.gis-notice--success { background: var(--gis-success-bg); color: #0a7a52; border-color: #bfe9d6; }
.gis-notice--error { background: var(--gis-danger-bg); color: #a8332c; border-color: #f4c4c1; }
.gis-notice--info { background: var(--gis-accent-bg); color: var(--gis-accent-ink); border-color: #cfe0ff; }

/* ----- Empty state ----- */
.gis-empty {
	text-align: center;
	padding: 3.5rem 1.5rem;
	background: var(--gis-surface);
	border: 1px dashed var(--gis-line);
	border-radius: var(--gis-r-lg);
}
.gis-empty__icon {
	width: 64px; height: 64px; margin: 0 auto 1rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--gis-line-soft);
	color: var(--gis-faint); font-size: 1.6rem;
}
.gis-empty__title { font-size: 1.2rem; font-weight: 650; margin: 0 0 .5rem; }
.gis-empty__text { color: var(--gis-muted); margin: 0 auto 1.5rem; max-width: 42ch; }

/* ----- Modal ----- */
.gis-modal { position: fixed; inset: 0; z-index: 99999; display: none; }
.gis-modal.is-open { display: block; }
.gis-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(15, 18, 24, .5);
	backdrop-filter: blur(3px);
}
.gis-modal__dialog {
	position: relative;
	max-width: 440px; width: calc(100% - 2rem);
	margin: 12vh auto 0;
	background: var(--gis-surface);
	border-radius: var(--gis-r-lg);
	box-shadow: var(--gis-shadow-lg);
	padding: 1.75rem;
	animation: gis-pop var(--gis-base) var(--gis-ease);
}
@keyframes gis-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* ----- Utilities ----- */
.gis-stack > * + * { margin-top: 1rem; }
.gis-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.gis-spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gis-grow { flex: 1 1 auto; min-width: 0; }
.gis-mt-0 { margin-top: 0 !important; }
.gis-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.gis-scope *, .gis-modal__dialog { animation: none !important; transition: none !important; }
}

/* =============================================================================
   Defensive hardening — keep the host theme (Dokan/Woo/Elementor) from
   clobbering our controls. The album/upload screens live inside the Dokan
   dashboard, whose global `button`, `input` and `select` rules were leaking in
   (red submit buttons, oddly-sized inputs, native select chrome). Everything
   here is scoped to .gis-scope so it never escapes our components.
   ============================================================================= */

/* Buttons — re-assert our palette over theme button styles */
.gis-scope .gis-btn {
	font-family: var(--gis-font);
	height: auto;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: var(--gis-shadow-xs);
}
.gis-scope .gis-btn--primary { background: var(--gis-ink) !important; color: #fff !important; border-color: transparent !important; }
.gis-scope .gis-btn--primary:hover { background: #000 !important; color: #fff !important; }
.gis-scope .gis-btn--accent { background: var(--gis-accent) !important; color: #fff !important; border-color: transparent !important; }
.gis-scope .gis-btn--accent:hover { background: var(--gis-accent-ink) !important; color: #fff !important; }
.gis-scope .gis-btn--ghost { background: var(--gis-surface) !important; color: var(--gis-ink) !important; border-color: var(--gis-line) !important; }
.gis-scope .gis-btn--ghost:hover { background: var(--gis-surface-2) !important; }
.gis-scope .gis-btn[disabled], .gis-scope .gis-btn.is-disabled { background: var(--gis-ink); }

/* Inputs & selects — neutralize theme height/appearance/background overrides */
.gis-scope .gis-input,
.gis-scope .gis-select,
.gis-scope .gis-textarea {
	-webkit-appearance: none;
	appearance: none;
	height: auto;
	min-height: 0;
	max-width: 100%;
	background-color: var(--gis-surface);
	background-image: none;
	color: var(--gis-ink);
	box-shadow: none;
	line-height: 1.4;
	text-transform: none;
}
.gis-scope .gis-input:focus,
.gis-scope .gis-select:focus,
.gis-scope .gis-textarea:focus {
	border-color: var(--gis-accent);
	box-shadow: 0 0 0 3px var(--gis-accent-bg);
}

/* Custom chevron for single selects (replaces the native arrow we removed) */
.gis-scope .gis-select {
	padding-right: 2.5rem;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1rem center;
	cursor: pointer;
}

/* ----- Category chips (replaces the dated native multi-select listbox) ----- */
.gis-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.gis-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .42rem .8rem;
	border-radius: var(--gis-r-pill);
	border: 1px solid var(--gis-line);
	background: var(--gis-surface);
	color: var(--gis-ink-soft);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background var(--gis-fast) var(--gis-ease),
		border-color var(--gis-fast) var(--gis-ease),
		color var(--gis-fast) var(--gis-ease);
}
.gis-chip:hover { border-color: var(--gis-faint); background: var(--gis-surface-2); }
.gis-chip__input {
	position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.gis-chip__x {
	display: none;
	font-size: 1.05em;
	line-height: 1;
	opacity: .85;
}
/* Selected state — modern browsers via :has(), with a .is-on JS fallback */
.gis-chip.is-on,
.gis-chip:has( .gis-chip__input:checked ) {
	background: var(--gis-accent);
	border-color: var(--gis-accent);
	color: #fff;
}
.gis-chip.is-on .gis-chip__x,
.gis-chip:has( .gis-chip__input:checked ) .gis-chip__x { display: inline; }
.gis-chip:has( .gis-chip__input:focus-visible ) {
	box-shadow: 0 0 0 3px var(--gis-accent-bg);
}