html {
  font-size: 21px;
}

@media (min-width: 768px) {
  html {
    font-size: 24px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Quicksand', sans-serif;
  margin-bottom: 60px;
  color: #FFFFFF;
  background-color: #27273f;
}

header {
  color: #FFFFFF;
  background-color: #363657;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030; /* higher than default Bootstrap navbar */
}

.footer {
  background-color: #363657;
  color: #FFFFFF;
}

body > .container {
  padding-top: 170px; /* Adjust this value to match your header's height */
}

h1.text-center.mb-4 {
  color: #FF8CA8;
}

/* Dropdown hover functionality for desktop */
@media (min-width: 768px) {
	/* Keep menu in layout but hidden until hover/focus */
	.dropdown-menu {
		margin-top: 0;
		border: none;
		box-shadow: 0 4px 8px rgba(0,0,0,0.3);
		background-color: #363657;
		display: block; /* avoid display toggle flicker */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	/* Show on hover or when focused (keyboard) */
	.dropdown:hover > .dropdown-menu,
	.dropdown:focus-within > .dropdown-menu,
	.dropdown-menu:hover {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	/* Also respect Bootstrap's JS-driven 'show' state */
	.dropdown-menu.show {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.dropdown-item {
		color: #FFFFFF;
		padding: 8px 20px;
		transition: background-color 0.2s ease;
	}

	.dropdown-item:hover {
		background-color: #4a4a6a;
		color: #FFFFFF;
	}
}

/* Options and Prices Page Styles */

/* Pricing table styling */
.pricing-table {
	width: auto;
	margin: 0 auto;
	border: 1px solid #FF8CA8;
}

.pricing-table thead,
.pricing-table tbody {
	color: #FF8CA8;
}

.pricing-table th,
.pricing-table td {
	color: #FF8CA8;
}

/* Gallery image thumbnails */
.gallery-img {
	cursor: pointer;
	width: 250px;
	height: 250px;
	object-fit: contain;
}

/* Modal image styling */
#modalImage {
	max-height: 90vh;
	max-width: 100%;
	object-fit: contain;
}

/* Social Media Icons Styling (Carrd.co inspired) */
.social-icons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.social-icons .nav-link {
    padding: 0.25rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
}

.social-icons .nav-link:hover {
    transform: scale(1.15);
    opacity: 1;
}

.social-icons svg {
    transition: fill 0.3s ease, stroke 0.3s ease;
    fill: #FF8CA8;
    stroke: #FF8CA8;
    color: #FF8CA8;
}

.social-icons .nav-link:hover svg {
    fill: #FFB6D9;
    stroke: #FFB6D9;
    color: #FFB6D9;
}

/* Make icons slightly smaller on mobile */
@media (max-width: 767px) {
    .social-icons svg {
        width: 45px;
        height: 45px;
    }
}

/* Category Avatar Circular Masking */
.category-avatar-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #FF8CA8;
    box-shadow: 0 4px 8px rgba(255, 140, 168, 0.3);
}

.category-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-avatar:hover {
    transform: scale(1.6) !important;
}

.category-avatar-other:hover {
  transform: scale(1.8) !important;
}

/* Individual category avatar positioning - customize each one */
.category-avatar-anthro {
    object-position: center -50%;
    transform: scale(1.5);
}

.category-avatar-animehuman {
    object-position: center -50%;
    transform: scale(1.5);
}

.category-avatar-mlp {
    object-position: center -30%;
    transform: scale(1.5);
}

.category-avatar-other {
    object-position: center -120%;
    transform: scale(1.7);
}

/* Adjust size on smaller screens */
@media (max-width: 767px) {
    .category-avatar-container {
        width: 120px;
        height: 120px;
    }
}