/* Accessibility and Contrast Improvements */
:root {
	--primary-color: #0056b3;
	--secondary-color: #6c757d;
	--success-color: #198754;
	--danger-color: #dc3545;
	--focus-outline-color: #4A90E2;
}

/* High Contrast Focus States */
:focus {
	outline: 3px solid var(--focus-outline-color) !important;
	outline-offset: 2px !important;
}

/* Improved Color Contrast */
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); }
.btn-success { background-color: var(--success-color); border-color: var(--success-color); }
.btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); }

/* Skip Link for Screen Readers */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #000;
	color: white;
	padding: 8px;
	z-index: 100;
}
.skip-link:focus {
	top: 0;
}


/*galerija*/
.gallery-image {
	cursor: pointer;
	transition: transform 0.3s ease;
	border: 3px solid transparent;
	outline: none;
}
.gallery-image-link:hover .gallery-image,
.gallery-image-link:focus .gallery-image {
	border-color: #007bff;
}

/*novice*/
.content img {
	max-width: 100%;
	height: auto;
}
.gallery-preview {
	transition: transform 0.3s ease;
}
.gallery-preview:hover {
	transform: scale(1.05);
}

/*lightbox*/
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	display: none;
	z-index: 1000;
	align-items: center;
	justify-content: center;
}
.lightbox-content {
	max-width: 90%;
	max-height: 90%;
	position: relative;
}
.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.2);
	color: white;
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	z-index: 1001;
	outline: 2px solid transparent;
	transition: outline-color 0.3s ease;
}
.lightbox-nav:hover,
.lightbox-nav:focus {
	outline-color: white;
}
.lightbox-prev {
	left: 10px;
}
.lightbox-next {
	right: 10px;
}
.lightbox-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255,255,255,0.2);
	color: white;
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	outline: 2px solid transparent;
	transition: outline-color 0.3s ease;
}
.lightbox-close:hover,
.lightbox-close:focus {
	outline-color: white;
}
#lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}
.lightbox-caption {
    color: white;
    margin-top: 10px;
    max-width: 100%;
}

.preview-image {
	max-height: 300px;
	object-fit: cover;
}
.image-preview-container .card {
	height: 100%;
}

.note-editor {
	margin-bottom: 1rem;
}
.note-editing-area {
	background-color: white;
}

/* Image card hover effect */
.gallery-image-card {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}

.gallery-image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Image thumbnail styling */
.gallery-image-card .card-img-top {
  height: 150px;
  object-fit: cover;
  background-color: #f8f9fa;
}

/* Loading spinner */
.gallery-images-container .spinner-border {
  width: 3rem;
  height: 3rem;
  color: #6c757d;
}