:root {
	/* colors for offcanvas filter toggles and filter badges */
	--filter-badge-color: white; /* foreground color */
	--filter-toggle-color-checked: white; /* foreground color */
	--filter-color-state: #00008B; /* dark blue */
	--filter-color-keyword: #5D3FD3; /* iris */
	--filter-color-etag: #7393B3; /* blue grey */
	--filter-color-qtag: #40B5AD; /* Verdigris */
	--filter-color-tag: #3F00FF; /* indigo */
	--filter-color-city: #4682B4; /* steel blue */
}

body {
	padding-top: 70px; // to allow space for navbar
}

nav.navbar, footer {
	//background-color: #d3e0ff;
	background-color: white;

}

.req {
	color: red;
}

form label {
	font-weight: 700;
}

.help-block {
	font-size: 0.8em;
	font-style: italic;
}

span.size-note {
	color: orange;
	font-size: 1em;
}

.card-text a {
	text-decoration: none;
}

div.card-img-overlay span.badge {
	color: #403f3f; /* a shade of dark grey */
}

div.card-img-overlay span.badge-tod {
	background-color: #defade; /* green */
}

div.card-img-overlay span.badge-tom {
	background-color: #FAFAD2; /* yellow */
}

div.card-img-overlay span.badge-nex {
	background-color: #fed5a4; /* orange */
}

div.card-img-overlay span.badge-pickup {
	background-color: #99ff99; /* green yellow */
}

div.card-img-overlay span.badge-kids {
	background-color: #FFC107; /* shool bus yellow */
}

div.card-img-overlay span.badge-lgbt {
	background-color: #dda0dd; /* plum */
}

div.card-img-overlay span.badge-accessible {
	background-color: #96CCEE; /* handicap blue */
}

div.card-img-overlay span.badge-age {
	background-color: #edda74; /* goldenrod */
}

div.card-img-overlay span.badge-rating {
	background-color: #7fffd4; /* aquamarine */
}

div.card-img-overlay span.badge-private {
	background-color: #ff3333; /* red-orange */
	color: white;
}

/* hover for toggle buttons */
/*btn-check + .btn.btn-outline-primary:hover {*/
/*.btn-check + .btn.rounded-pill:hover {*/
.btn-check + .btn.toggle-checkbox:hover {
	color: var(--bs-btn-hover-color); /* Uses Bootstrap's hover text color variable */
	background-color: var(--bs-btn-hover-bg); /* Uses Bootstrap's hover background color variable */
	border-color: var(--bs-btn-hover-border-color); /* Uses Bootstrap's hover border color variable */
}

/* this class controls the "checkbox toggles" used in off-canvas
** set the border-radius to 1rem to make it a "rounded-pill"
** otherwise, this gives a different shape
*/
.toggle-checkbox {
	border-top-left-radius: 1rem;
	border-top-right-radius: 0.3rem;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 0.3rem;
}

/* for logo in navbar - based on BRAND_SLUG */
a.navbar-brand > img.pricoday {
	height: 1.5rem;
}

body.page-faq div.faq-content p {
	padding-left: 1rem !important;
}

/* these classes are for dealing with "favorite items" buttons */
div.card-img-overlay button {
	padding: 3px 5px 0 5px;
	margin: 0.05em 0.05em auto auto; /* positions to top right corner */
}

button i.bi-heart {
	display: inline-block;
}

button i.bi-heart-fill {
	color: red;
	display: none;
}

button.fav i.bi-heart {
	display: none;
}

button.fav i.bi-heart-fill {
	display: inline-block;
}

/* FOR FILTER BADGES and OUTLINE BUTTONS IN OFFCANVAS */

/* STATE and KEYWORD */
.filter-badge-state {
	color: var(--filter-badge-color);
	background-color: var(--filter-color-state);
}

.filter-badge-keyword {
	color: var(--filter-badge-color);
	background-color: var(--filter-color-keyword);
}


/* ETAG */

.filter-badge-etag {
	color: var(--filter-badge-color);
	background-color: var(--filter-color-etag);
}

.btn-outline-etag {
  color: var(--filter-color-etag);
  border-color: var(--filter-color-etag);
}

.btn-outline-etag:hover,
.btn-outline-etag:focus,
.btn-outline-etag:active,
.btn-outline-etag.active,
.btn-check:checked+.btn-outline-etag {
  color: var(--filter-toggle-color-checked) !important; /* Text color on hover */
  background-color: var(--filter-color-etag) !important; /* Background color on hover */
  border-color: var(--filter-color-etag) !important;
}

/* QTAG */

.filter-badge-qtag {
	color: var(--filter-badge-color);
	background-color: var(--filter-color-qtag);
}

.btn-outline-qtag {
  color: var(--filter-color-qtag);
  border-color: var(--filter-color-qtag);
}

.btn-outline-qtag:hover,
.btn-outline-qtag:focus,
.btn-outline-qtag:active,
.btn-outline-qtag.active,
.btn-check:checked+.btn-outline-qtag {
  color: var(--filter-toggle-color-checked) !important; /* Text color on hover */
  background-color: var(--filter-color-qtag) !important; /* Background color on hover */
  border-color: var(--filter-color-qtag) !important;
}

/* TAG */

.filter-badge-tag {
	color: var(--filter-badge-color);
	background-color: var(--filter-color-tag);
}

.btn-outline-tag {
  color: var(--filter-color-tag);
  border-color: var(--filter-color-tag);
}

.btn-outline-tag:hover,
.btn-outline-tag:focus,
.btn-outline-tag:active,
.btn-outline-tag.active,
.btn-check:checked+.btn-outline-tag {
  color: var(--filter-toggle-color-checked) !important; /* Text color on hover */
  background-color: var(--filter-color-tag) !important; /* Background color on hover */
  border-color: var(--filter-color-tag) !important;
}

/* CITY */

.filter-badge-city {
	color: var(--filter-badge-color);
	background-color: var(--filter-color-city);
}

.btn-outline-city {
  color: var(--filter-color-city);
  border-color: var(--filter-color-city);
}

.btn-outline-city:hover,
.btn-outline-city:focus,
.btn-outline-city:active,
.btn-outline-city.active,
.btn-check:checked+.btn-outline-city {
  color: var(--filter-toggle-color-checked) !important; /* Text color on hover */
  background-color: var(--filter-color-city) !important; /* Background color on hover */
  border-color: var(--filter-color-city) !important;
}

/* BLOG */

body.page-content div.card h5.card-title a {
	text-decoration: none;
	color: inherit;
}