/* Base reset */
	body
	{
		line-height: 1.6;
		margin: 0;
		font-family: Arial, sans-serif;
		background: #f9f9f9;
		color: #333;
	}

/* Header (sticky top bar) */
	header
	{
		position: sticky;
		top: 0;
		z-index: 1000;
		background-color: #003366;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.5rem 2rem;
		color: white;
	}

	.align-justify
	{
		text-align: justify;
	}

	label
	{
		text-align: left;
	}

/* Logo */
	.logo
	{
		display: flex;
		align-items: center;
	}

	.logo img
	{
		width: 50px;
		height: 50px;
		object-fit: contain;
		margin-right: 0.75rem;
	}

	.logo span
	{
		font-size: 1.25rem;
		font-weight: bold;
	}

/* Navigation styles */
	nav ul
	{
		list-style: none;
		display: flex;
		margin: 0;
		padding: 0;
		gap: 1.5rem;
	}

	nav li
	{ 
		position: relative;
	}

	nav a
	{
		text-decoration: none;
		color: white;
		font-size: 1rem;
		padding: 0.25rem 0;
		display: inline-block;
		transition: color 0.2s ease-in-out;
	}

	nav a:hover, nav a:focus
	{
		color: #ffcc00;
		outline: none;
	}

/* Dropdown */
	nav ul ul
	{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #004080;
		padding: 0.5rem 0;
		min-width: 180px;
		border-radius: 6px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.2);
	}

	nav ul ul li
	{ 
		width: 100%;
	}

	nav ul ul a
	{ 
		display: block; 
		padding: 0.6rem 1rem; 
		color: white;
	}

	nav ul ul a:hover
	{
		background-color: #0059b3;
	}

	nav li:hover > ul
	{
		display: block;
	}

/* Dropdown section titles */
	.dropdown-title
	{
		padding: 0.5rem 1rem;
		font-weight: bold;
		color: #ffcc00;
		background: #003d80;
		cursor: default;
	}

/* Divider between groups */
	.dropdown-divider
	{
		height: 1px;
		margin: 0.5rem 0;
		background: #0059b3;
	}

/* Mobile menu button (hamburger) */
	.menu-toggle
	{
		display: none;
		flex-direction: column;
		cursor: pointer;
		gap: 5px;
		padding: 0.5rem;
		border: none;
		background: transparent;
	}

	.menu-toggle span
	{
		width: 28px;
		height: 3px;
		background: white;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	.navbar-toggler-icon
	{
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
	}

	.navbar-toggler
	{
		background-color: #007bff; /* Custom background color */
		border-color: #000000; /* Custom border color */
		padding: 0.25rem 0.35rem; /* Adjust padding */
		border-radius: 0.25rem; /* Add border-radius */
	}

	.navbar-toggler:focus
	{
		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); /* Custom focus outline */
	}


	.dropdown-header
	{
		font-weight: bold;
		color: #ffcc00; /* Highlighted section titles */
	}

	.navbar
	{
		background-color: #003366;
	}

	.navbar .nav-link,
	.navbar-brand
	{
		color: white;
	}

	.navbar .nav-link:hover,
	.navbar .dropdown-item:hover
	{
		color: #ffcc00;
		background: none;
	}

	.dropdown-menu
	{
		background-color: #004080;
	}

	.dropdown-item
	{
		color: white;
	}

	.dropdown-divider
	{
		border-color: #0059b3;
	}

	.logo-img
	{
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}

	.hidden
	{
		display: none;
	}

/* Main content */
	main
	{
		padding: 2rem;
	}

	.caption
	{
		text-align: center;
		margin-top: 8px;
		font-style: italic;
		color: #333;
	}

	.photo-slider
	{
		width: 400px;   /* smaller container */
		margin: auto;
	}

	.photo-slider img
	{
		width: 100%;    /* image scales to container width */
		border-radius: 10px;
	}

	.col-md-4 {
/*		display: flex;*/
	}


/*//	adoptable-card*/
    
    
/* Milk Carton Card Styling */
	.adoptable-card
	{
		border: 2px solid midnightblue;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/*		font-family: 'Special Elite', Courier, monospace;  Distressed font */
		text-align: center;
		position: relative;
		overflow: hidden;
		letter-spacing: 4px;
	}

	.adoptable-card .card-header
	{
		background-color: midnightblue;
		color: #fff;
		font-size: 1.5rem;
		font-weight: bold;
		text-transform: uppercase;
		padding: 0.5rem;
	}

	.adoptable-card img
	{
/*		filter: grayscale(80%);  Desaturated for milk carton look */
		max-height: 200px;
		object-fit: cover;
	}

	.adoptable-card .card-body
	{
		padding: 1rem;
	}

	.adoptable-card dt
	{
		font-weight: bold;
		color: #333;
		text-transform: uppercase;
		font-size: 0.9rem;
	}

	.adoptable-card dd
	{
		margin-bottom: 0.2rem;
		font-size: 1rem;
	}

	.adoptable-card .btn-cta
	{
		background-color: #dc3545; /* Red for urgency */
		border-color: #dc3545;
		font-family: 'Special Elite', Courier, monospace;
	}

	.adoptable-card .btn-cta:hover
	{
		background-color: #c82333;
		border-color: #c82333;
	}

/* Optional texture */
	.adoptable-card::before
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
/*		background: url('https://www.animalrescueresources.org/img/detailed-grunge-scratched-texture-background_1048-20331.png');*/
		opacity: 0.1;
		z-index: 0;
	}
    
	.adoptable-card .card-header,
	.adoptable-card .card-body
	{
		position: relative;
		z-index: 1;
	}

	.adoptable-card .card-img-top
	{
		width: 100%;
		aspect-ratio: 4/3; /* Standard photo ratio */
		object-fit: cover;
/*		filter: grayscale(80%);*/
	}

	.adoptable-card.pending .pending-banner
	{
		position: absolute;
		top: 140px;
		left: -120px;
		width: 500px;
/*		background-color: #28a745; /* Green for success */
		color: #28a745;
		opacity: 0.9;
		font-family: 'Special Elite', Courier, monospace;
		font-size: 3.5rem;
		font-weight: bold;
		text-align: center;
		line-height: 2rem;
		transform: rotate(-25deg);
		z-index: 2; /* Above image */
/*		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);*/
	}

	.adoptable-card.pending .card-header
	{
		background-color: #28a745; /* Match banner for found pets */
	}

/* Milk Carton Card Styling */
	.missing-card
	{
		border: 2px solid #000;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		font-family: 'Special Elite', Courier, monospace; /* Distressed font */
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.missing-card .card-header
	{
		background-color: #000;
		color: #fff;
		font-size: 1.5rem;
		font-weight: bold;
		text-transform: uppercase;
		padding: 0.5rem;
	}

	.missing-card img
	{
		filter: grayscale(80%); /* Desaturated for milk carton look */
		max-height: 200px;
		object-fit: cover;
	}

	.missing-card .card-body
	{
		padding: 1rem;
	}

	.missing-card dt
	{
		font-weight: bold;
		color: #333;
		text-transform: uppercase;
		font-size: 0.9rem;
	}

	.missing-card dd
	{
		margin-bottom: 0.2rem;
		font-size: 1rem;
	}

	.missing-card .btn-cta
	{
		background-color: #dc3545; /* Red for urgency */
		border-color: #dc3545;
		font-family: 'Special Elite', Courier, monospace;
	}

	.missing-card .btn-cta:hover
	{
		background-color: #c82333;
		border-color: #c82333;
	}

	/* Optional texture */
	.missing-card::before
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('https://www.animalrescueresources.org/img/detailed-grunge-scratched-texture-background_1048-20331.png');
		opacity: 0.1;
		z-index: 0;
	}

	.missing-card .card-header,
	.missing-card .card-body
	{
		position: relative;
		z-index: 1;
	}

	.missing-card .card-img-top
	{
		width: 100%;
		aspect-ratio: 4/3; /* Standard photo ratio */
		object-fit: cover;
		filter: grayscale(80%);
	}


/* New .found-banner styles (using <div> for reliability) */
	.missing-card.found .found-banner
	{
		position: absolute;
		top: 140px;
		left: -120px;
		width: 500px;
/*		background-color: #28a745; /* Green for success */
		color: #28a745;
		opacity: 0.9;
		font-family: 'Special Elite', Courier, monospace;
		font-size: 3.5rem;
		font-weight: bold;
		text-align: center;
		line-height: 2rem;
		transform: rotate(-25deg);
		z-index: 2; /* Above image */
/*		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);*/
	}

	.missing-card.found .card-header
	{
		background-color: #28a745; /* Match banner for found pets */
	}

	.missing-card.found .visually-hidden
	{
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}




/* Hero Section */
	.hero-birthday
	{
		background-image: url('https://www.animalrescueresources.org/img/011a763b3c05-Medium.jpg'); /* Placeholder birthday image */
		background-size: cover;
		background-position: center;
		position: relative;
		padding: 5rem 0;
		color: #333;
	}

	.hero-birthday::before
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.7); /* Muted overlay */
		z-index: 1;
	}

	.hero-birthday .container
	{
		position: relative;
		z-index: 2;
	}


/* Halloween Theme */
	.missing-card.theme-halloween
	{
		border-color: #ff6200; /* Orange */
		background-color: #fff; /* Keep white for contrast */
	}

	.missing-card.theme-halloween .card-header
	{
		background-color: #000; /* Black for spooky vibe */
		color: #ff6200; /* Orange text */
	}

	.missing-card.theme-halloween .btn-cta
	{
		background-color: #ff6200;
		border-color: #ff6200;
	}

	.missing-card.theme-halloween .btn-cta:hover
	{
		background-color: #e65a00;
		border-color: #e65a00;
	}

	.missing-card.theme-halloween.found .found-banner
	{
		background-color: #800080; /* Purple for spooky */
	}

	.missing-card.theme-halloween.found .card-header
	{
		background-color: #800080;
	}

	.missing-card.theme-halloween::before
	{
		background: url('https://www.animalrescueresources.org/img/halloween-grain.jpg'); /* Optional: Halloween-themed grain, e.g., https://images.pexels.com/photos/5909756/pexels-photo-5909756.jpeg */
		opacity: 0.15;
	}

	.missing-card.theme-halloween::after
	{
		content: '🎃'; /* Pumpkin emoji */
		position: absolute;
		bottom: 10px;
		right: 10px;
		font-size: 1.5rem;
		z-index: 2;
	}


/* Pet Cards Christmas Theme */
	.missing-card.theme-christmas
	{
		border-color: #d00000; /* Red */
		background-color: #fff;
	}

	.missing-card.theme-christmas .card-header
	{
		background-color: #006400; /* Dark green */
		color: #fff;
	}

	.missing-card.theme-christmas .btn-cta
	{
		background-color: #d00000;
		border-color: #d00000;
	}

	.missing-card.theme-christmas .btn-cta:hover
	{
		background-color: #b00000;
		border-color: #b00000;
	}

	.missing-card.theme-christmas.found .found-banner
	{
		background-color: #ffd700; /* Gold for festive */
	}

	.missing-card.theme-christmas.found .card-header
	{
		background-color: #ffd700;
	}

	.missing-card.theme-christmas::before
	{
		background: url('https://www.animalrescueresources.org/img/christmas-grain.jpg'); /* Optional: Snowy grain, e.g., https://images.pexels.com/photos/688660/pexels-photo-688660.jpeg */
		opacity: 0.2;
	}

	.missing-card.theme-christmas::after
	{
		content: '❄️'; /* Snowflake emoji */
		position: absolute;
		bottom: 10px;
		right: 10px;
		font-size: 1.5rem;
		z-index: 2;
	}


	hr
	{
		color: blue;
		background-color: blue;
	}

	th.viewadopttd
	{
		font-family: arial,helvetica;
		font-size:90%;
		text-align: left;
		vertical-align: top;
		border-bottom: grey 1px solid;
	}

	td.viewadopttd
	{
		font-family: arial,helvetica;
		text-decoration: none;
		font-size:70%;
		text-align: left;
		vertical-align: top;
	}

	#pet_breed_dogs
	{
		width: 200px;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	#pet_breed_cats
	{
		width: 200px;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	#dropZone
	{
		border: 2px dashed #888;
		border-radius: 8px;
		width: 320px;
		height: 160px;
		display:flex;
		align-items:center;
		justify-content:center;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:10px;
	}

	#dropZone.dragover
	{
		border-color:#2a9fd6;
		background:#f0faff;
	}

	.dz-preview .dz-image img
	{
		width: 100px;
		height: 100px;
		object-fit: cover;
		border-radius: 8px;
	}

	.dz-progress
	{
		background: #e3f2fd;
		border-radius: 6px;
	}

	.dz-complete .dz-success-mark
	{
		display: none;
	}

	.dz-error .dz-error-mark
	{
		display: block;
		background: #f44336;
		border-radius: 50%;
	}

	.preview
	{
		display:flex;
		align-items:center;
		margin:6px 0;
	}

	.preview img
	{
		width:80px;
		margin-right:10px;
		border-radius:6px;
	}

	.progress
	{
		flex:1;
		background:#eee;
		border-radius:6px;
		height:12px;
		overflow:hidden;
		margin-right:10px;
	}

	.progress-bar
	{
		background:#2a9fd6;
		width:0;
		height:100%;
		transition: width 0.2s;
	}

	.status
	{
		font-size:12px;
	}

	.hidden-div
	{
		display: none;
	}

  /* Basic styling for the error state */
	.error
	{
		border: 2px solid red;
	}

  /* Styling for the error message container */
	#phoneError
	{
		display: block; /* Make the error message appear on a new line */
		color: red;
		margin-top: 5px;
		font-size: 0.9em;
	}

	.button-container
	{
		display: flex; /* Enables Flexbox */
		justify-content: center; /* Centers horizontally */
		margin-top: 50px;
	}


	.content120	{font-family: arial,helvetica; text-decoration: none; font-size: 120%; text-align: justify;}
	.content110	{font-family: arial,helvetica; text-decoration: none; font-size: 110%; text-align: justify;}
	.content		{font-family: arial,helvetica; text-decoration: none; font-size: 100%; text-align: justify;}
	.content90	{font-family: arial,helvetica; text-decoration: none; font-size: 90%; text-align: justify;}
	.content80	{font-family: arial,helvetica; text-decoration: none; font-size: 80%; text-align: justify;}
	.content70	{font-family: arial,helvetica; text-decoration: none; font-size: 70%; text-align: justify;}
	.content60	{font-family: arial,helvetica; text-decoration: none; font-size: 60%; text-align: justify;}

	.big200		{font-family: arial,helvetica; text-decoration: none; font-size:200%;}
	.big180		{font-family: arial,helvetica; text-decoration: none; font-size:180%;}
	.big170		{font-family: arial,helvetica; text-decoration: none; font-size:170%;}
	.big165		{font-family: arial,helvetica; text-decoration: none; font-size:165%;}
	.big160		{font-family: arial,helvetica; text-decoration: none; font-size:160%;}
	.big150		{font-family: arial,helvetica; text-decoration: none; font-size:150%;}
	.big140		{font-family: arial,helvetica; text-decoration: none; font-size:140%;}
	.big130		{font-family: arial,helvetica; text-decoration: none; font-size:130%;}
	.big120		{font-family: arial,helvetica; text-decoration: none; font-size:120%;}
	.big110		{font-family: arial,helvetica; text-decoration: none; font-size:110%;}
	.normal		{font-family: arial,helvetica; text-decoration: none; font-size:100%;}
	.small90		{font-family: arial,helvetica; text-decoration: none; font-size:90%;}
	.small80		{font-family: arial,helvetica; text-decoration: none; font-size:80%;}
	.small75		{font-family: arial,helvetica; text-decoration: none; font-size:75%;}
	.small70		{font-family: arial,helvetica; text-decoration: none; font-size:70%;}
	.small60		{font-family: arial,helvetica; text-decoration: none; font-size:60%;}
	.small55		{font-family: arial,helvetica; text-decoration: none; font-size:55%;}
	.small50		{font-family: arial,helvetica; text-decoration: none; font-size:50%;}
	.small40		{font-family: arial,helvetica; text-decoration: none; font-size:40%;}
	.small30		{font-family: arial,helvetica; text-decoration: none; font-size:30%;}
	.small20		{font-family: arial,helvetica; text-decoration: none; font-size:20%;}
	.small10		{font-family: arial,helvetica; text-decoration: none; font-size:10%;}


	
/* Mobile styles */
@media (max-width: 576px)
{
	header
	{
		flex-wrap: wrap;
	}

/* Order so logo is left, burger right, menu full width below */
	.logo
	{
		order: 1;
	}

	.menu-toggle
	{
		order: 2;
	}

	nav
	{
		order: 3;
		width: 100%;
	}

/* Hide menu by default on mobile */
	nav
	{
		display: none;
	}

	nav.active
	{
		display: block;
	}

/* Mobile vertical menu */
	nav ul
	{
	        flex-direction: column;
	        background: #003366;
	        gap: 0;
	}

	nav ul li
	{
		border-top: 1px solid #004080;
	}

	nav ul li:first-child
	{
		border-top: none;
	}

/* Nested dropdowns open via JS with .open */
	nav ul ul
	{
		position: static;
		box-shadow: none;
		border-radius: 0;
		background: #003d80;
		display: none;
	}

	nav li.open > ul
	{
		display: block;
	}

	nav ul ul a
	{
		padding-left: 2rem;
	}

/* Show hamburger on mobile */
	.menu-toggle
	{
		display: flex;
	}

/* Animate hamburger into an X when active */
	.menu-toggle.active span:nth-child(1)
	{
		transform: translateY(8px) rotate(45deg);
	}

	.menu-toggle.active span:nth-child(2)
	{
		opacity: 0;
	}

	.menu-toggle.active span:nth-child(3)
	{
		transform: translateY(-8px) rotate(-45deg);
	}


/* Responsive adjustments */
	.missing-card .card-img-top
	{
	  height: 150px;
	}

	.missing-card.found .card-img-top::after
	{
	  top: 15px;
	  left: -30px;
	  width: 150px;
	  font-size: 1rem;
	  line-height: 1.8rem;
	}

	.missing-card dt
	{
		font-size: 0.8rem;
	}

	.missing-card dd
	{
		font-size: 0.9rem;
	}
}