/* colors
black #333333
orange #ff5733
blue #005eaf
red #b72727
green #228322

downpayment green #406f40
canceled red  #913f3f
quote-sent blue #498997
new bronze #514935


https://heroicons.com/outline
https://css.gg/ (these icons are used in the main nav)
*/

/* pico overrides */
:root:not([data-theme="dark"]),
[data-theme="light"] {
	--pico-primary: #ff5733;
	--pico-primary-background: var(--pico-primary);
	--pico-primary-border: var(--pico-primary);
	--pico-primary-hover: #e14e2d;
	--pico-primary-hover-background: var(--pico-primary-hover);
	--pico-primary-hover-border: var(--pico-primary-hover-background);
	--pico-primary-focus: #ffaa33;
	--pico-muted-color: #8b8b8b;
	--pico-form-element-spacing-vertical: 0.5rem;
	--hb-green: #228322;
	--hb-black: #333333;
	--hb-orange: #ff5733;
	--hb-blue: #005eaf;
	--hb-red: #b72727;
	--hb-yellow: #ffaa33;
	--hb-grey: #333;

	--hb-downpayment: linear-gradient(to right, #2a9e2a, #355e35);
	/* Enhanced green, more clarity */
	--hb-canceled: linear-gradient(to right, #616161, #2e2e2e);
	/* Slightly darker for contrast */
	--hb-quote-sent: linear-gradient(to right, #8066c1, #413558);
	/* Slightly less saturation for legibility */
	--hb-new: linear-gradient(to right, #ff5733, #992d1f);
	/* orange green-blue, distinct from others */
	--hb-declined: linear-gradient(to right, #999999, #6a655c);
	/* Better mid-tone grey with brown tint */
	--hb-full-payment: linear-gradient(to right, #023c17, #2e3f2e);
	--hb-archived: linear-gradient(to right, #318aa3, #2f5560);
}

html {
	font-size: 1rem;
}

body {
	margin: 0 auto;
	font-family: "DM Sans", sans-serif;
	color: #333;
	padding: 0;
}

div,
p {
	font-weight: 400;
	font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
	margin: 0 0 15px 0;
}

h1 {
	font-size: 2.875rem;
}

h2 {
	font-size: 2.25rem;
}

h3 {
	font-size: 1.625rem;
}

h4 {
	font-size: 1.25rem;
}

a {
	color: var(--hb-orange);
	text-decoration: none;
	font-weight: 600;
}

a:hover {
	color: #777;
	text-decoration: none;
}

/* input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="text"] {
	margin: 0 0 10px 0;
} */

/* header */
.header {
	border-bottom: 1px solid #ddd;
	background: #f2f2f2;
	display: block;
	margin: 0 auto;
	padding: 0 10%;
	min-height: 45px;
}

footer {
	display: flex;
	justify-content: center;
	min-height: 12vh;
	background: #333;
}

article footer {
	display: flex;
	justify-content: center;
	height: unset;
	background: unset;
}

.inner-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-container {
	display: flex;
	justify-content: space-between;
	padding: 15px 0;
	align-items: center;
	flex-direction: column;
	gap: 30px;
}

nav.account ul {
	gap: 15px;
}

.navbar {
	color: #222;
	text-transform: uppercase;
}

.navbar-mobile {
	display: none;
}

.navbar a {
	color: #333;
	text-transform: capitalize;
	font-weight: 400;
}

.navbar a:active,
.navbar a:hover {
	background: #ddd;
	color: #000;
	border-radius: 8px;
}

.navbar.mobile {
	display: none;
}

nav.navigation {
	display: flex;
	gap: 30px;
	align-items: center;
}

/* button[type=submit] {
    width: unset;
} */

button.orange-button,
a.orange-button {
	padding: 5px 20px;
	color: #fff;
	background: var(--pico-primary);
	border: 2px solid var(--pico-primary);
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

a.orange-button:hover {
	background: var(--pico-primary-hover);
	border: 2px solid var(--pico-primary-focus);
}

.dark-button {
	padding: 5px 20px;
	color: #fff;
	background: #333;
	border: 2px solid #333;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 600;
}

.dark-button svg {
	width: 20px;
	height: 20px;
	stroke: white;
}

.green-button:hover {
	background: #555;
}

.green-button {
	padding: 5px 20px;
	color: #fff;
	background: #228322;
	border: 2px solid #228322;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 600;
}

.green-button.large {
	padding: 15px 45px;
	color: #fff;
	background: #228322;
	border: 2px solid #228322;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 1.125rem;
	font-weight: 600;
	margin: 15px 0;
}

.green-button svg {
	width: 20px;
	height: 20px;
	stroke: white;
}

.green-button:hover {
	background: #555;
}

.red-button {
	padding: 5px 20px;
	color: #fff;
	background: #b72727;
	border: 2px solid #b72727;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 600;
	align-self: flex-start;
}

.red-button svg {
	width: 20px;
	height: 20px;
	stroke: white;
}

.red-button:hover {
	background: #555;
}

.blue-button {
	padding: 5px 20px;
	color: #fff;
	background: #005eaf;
	border: 2px solid #005eaf;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 600;
}

.blue-button svg {
	width: 20px;
	height: 20px;
	stroke: white;
}

.blue-button:hover {
	background: #555;
}

.grouped-button {
	padding: 3px 20px;
	color: #fff;
	background: #555;
	border: 2px solid #555;
	border-radius: 0 6px 6px 0;
	text-transform: uppercase;
	font-size: 0.7rem;
	font-weight: 600;
}

.right-button {
	display: block;
	margin-left: auto;
}

.final-payment-actions {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

.final-payment-actions>button {
	flex-basis: 50%;
	text-align: center;
}

div.request-final-payment {
	margin-bottom: 30px;
}

button.request-final-payment {
	width: 100%;
	font-size: 1rem;
}

#custom_terms_and_conditions {
	font-size: 0.875rem;
	min-height: 300px;
}

body.view-haul {
	max-width: 800px;
	display: block;
	margin: 30px auto;
}

body.view-haul .header,
body.view-haul footer.hauler_boss-footer {
	display: none;
}

body.view-haul .haul-header {
	display: flex;
	flex-direction: row;
	background: #ddd;
	border: #ccc;
	color: #333;
	justify-content: space-between;
	padding: 15px 30px;
	margin-bottom: 30px;
}

.spacer-15 {
	height: 15px;
	padding: 0;
	margin: 0;
}

.spacer-30 {
	height: 30px;
	padding: 0;
	margin: 0;
}

.spacer-60 {
	height: 60px;
	padding: 0;
	margin: 0;
}

.main {
	margin: 0;
	padding: 0;
	min-height: 80vh;
}

.boxed {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px;
}

h1.page-title {
	font-size: 1.5rem;
	margin-top: 30px;
	display: none;
}

.branding {
	opacity: 0.85;
}

.branding a {
	display: flex;
	align-items: center;
}

.branding img {
	height: 25px;
	width: auto;
}

.branding h3 {
	font-size: 1.3rem;
	font-weight: 600;
	width: auto;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-style: italic;
	color: #222;
}

p.large-print {
	font-size: 1.5rem;
}

.centered {
	text-align: center;
}

.gv-tel-link {
	display: none !important;
}

#copy-status {
	font-size: 1rem;
	font-weight: 600;
	color: #228322;
}

.settings-header {
	margin: 30px 0;
	font-weight: 600;
}

.hb-icon {
	height: 18px;
	width: 18px;
}

.hb-icon.invert {
	filter: invert(100%);
}

/* Gauge Styles */

.gauge {
	position: relative;
	width: 150px;
	height: 75px;
	overflow: hidden;
}

.gauge-bg {
	width: 100%;
	height: 200%;
	background: conic-gradient(red 0deg, yellow 30%, green 60%);
	border-radius: 50%;
	transform: rotate(-90deg);
}

.needle {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 60px solid black;
	top: 12px;
	left: calc(50% - 6px);
	transform-origin: bottom center;
	transform: rotate(-90deg);
	transition: transform 1.5s ease;
}

.center-dot {
	position: absolute;
	width: 20px;
	height: 20px;
	background: black;
	border-radius: 50%;
	top: 65px;
	left: 50%;
	transform: translateX(-50%);
}

/* home landing page */

.button-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin: 15px 0;
}

.home-hero {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin-bottom: 0;
}

.hh-left {
	background: url("/assets/images/road-trees-hero.jpg");
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

/* .hh-left::after {
    content: "";
    background:#fff;
    opacity:0.5;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:2;
} */
.hh-right {
	padding: 8%;
	width: 50%;
	text-align: center;
}

.hh-right h1 {
	font-size: 2.5rem;
}

.hh-right h2 {
	font-size: 1.625rem;
}

a.hb-btn {
	background: #ff5733;
	color: #eee;
	padding: 15px 30px;
	margin: 15px 0;
	font-size: 1.125rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 6px;
	text-align: center;
}

a.hb-btn:hover {
	background: #313131;
}

a.signup-btn {
	background: #005eaf;
	color: #eee;
	padding: 15px 30px;
	margin: 15px 0;
	font-size: 1.125rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 6px;
	text-align: center;
}

a.signup-btn:hover {
	background: #313131;
}

.hidden {
	display: none !important;
}

body.home .main {
	max-width: 100%;
}

body.home .header,
body.home footer,
body.home h1.page-title {
	display: none;
}

body.onboarding .main {
	max-width: 800px;
	margin: 0 auto;
}

img.lander-logo {
	width: 20vw;
	height: auto;
	z-index: 9;
	filter: invert(1);
}

span.field-label {
	font-weight: 900;
	text-transform: uppercase;
	font-size: 0.875rem;
	margin-right: 5px;
	display: block;
}

article.haul span.field-label {
	display: inline;
}

span.section-label {
	font-weight: 900;
	text-transform: uppercase;
	display: block;
}

.add-hint {
	display: flex !important;
	align-items: center;
}

.add-hint>span {
	border: 1px solid #999;
	border-radius: 100px;
	font-size: 0.75em;
	font-weight: 400;
	color: #ffffff;
	margin-left: 0.5em;
	cursor: help;
	width: 1.25em;
	height: 1.25em;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--hb-orange);
}

.dollar-sign {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dollar-sign::before {
	content: "$";
	font-size: 1.2rem;
}

span.section-label.with-hint {
	display: flex;
	align-items: center;
}

span.section-label-sm {
	font-weight: 900;
	font-size: 0.75rem;
	text-transform: uppercase;
	display: block;
}

.main {
	padding: 30px 0;
}

body.home .main {
	padding: 0;
}

/* dashboard */
details summary[role="button"] {
	width: 100%;
	text-align: left;
	padding: 5px 15px;
}

body.signup .main {
	max-width: 1200px;
	margin: 0 auto;
}

body.signup .main h1 {
	text-align: center;
}

.main {
	max-width: 1200px;
	margin: 0 auto;
}

#dashboard-container {
	display: flex;
	flex-direction: row;
	gap: 30px;
	justify-content: center;
}

#hauls-container {
	max-width: 700px;
	margin: 30px auto 90px auto;
}

.two-grid {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: center;
	gap: 30px;
}

.flex-row {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 15px 0;
}

.flex-col {
	display: flex;
	justify-content: column;
	gap: 30px;
	margin: 15px 0;
}

#settings-container {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.hb-primary-container {
	width: 50%;
	display: flex;
	flex-direction: column;
}

.hb-primary-sidebar {
	width: 50%;
	display: flex;
	flex-direction: column;
}

#quote-form-container {
	max-width: 600px;
	display: block;
	margin: 0 auto;
}

/* hauls section */
article.haul-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

article.haul-list body {
	padding: 30px;
}

article.haul {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin-bottom: 5px;
}

article.haul details {
	padding: 0;
}

article.haul summary[role="button"].haul-header {
	margin-top: 0;
}

.haul-upper {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.inline-checks {
	display: flex;
	flex-direction: row;
	gap: 30px;
	margin: 15px 0;
}

.column-checks {
	margin: 15px 0;
}

.column-checks span {
	font-weight: 600;
	text-transform: capitalize;
}

.haul-rates {
	align-items: center;
	gap: 30px;
}

.haul-rates div {
	text-align: center;
}

.haul-statuses {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.haul details {
	width: 100%;
	display: block;
	padding: 20px;
	margin-bottom: 0.25rem;
}

details.haul-detail[open] {
	background: #ebebeb;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

details.branding-form {
	margin-top: 60px;
}

details summary[role="button"].haul-header {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}

body.start-quote .header,
body.start-quote footer.hauler_boss-footer {
	display: none;
}

details summary[role="button"].canceled {
	background: #b9b9b9;
	border-color: #b9b9b9;
	color: #777;
	cursor: default;
}

.failed {
	background: #ddd;
	border-radius: 8px;
	color: red;
	font-weight: 600;
	text-align: center;
	padding: 30px;
}

.success {
	background: #ddd;
	border-radius: 8px;
	color: green;
	font-weight: 600;
	text-align: center;
	padding: 30px;
}

/*haul individual section*/
body.haul summary.haul-header {
	cursor: default;
	margin-bottom: 15px;
}

body.haul summary.haul-header:hover {
	background: var(--pico-primary-background);
}

body.haul .haul-header {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
	padding: 15px 0 0 0;
}

body.haul article.haul {
	padding: 20px;
	max-width: 700px;
	margin: auto;
	margin-bottom: 90px;
}

article header {
	background: #eee;
}

/* settings section */
div.settings {
	margin-bottom: 30px;
}

.business-name-preview h3 {
	font-size: 1.5rem;
}

img.hauler-logo-uploaded {
	width: 200px;
	height: auto;
}

.full-width-btn {
	display: block;
	width: 100%;
}

.new-doc-list {
	margin: 30px 0;
}

/* signup */
#signup-container {
	max-width: 400px;
	margin: 30px auto;
}

#card-element {
	border: 1px solid var(--pico-border-color);
	border-radius: 0.5rem;
	padding: 1.2rem;
	background-color: #eee;
	font-size: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
	margin-bottom: 30px;
}

.payment-form #card-errors,
.card-error {
	color: var(--hb-red);
	text-align: center;
}

.error-message {
	color: var(--hb-red);
	font-weight: 500;
	margin: 10px 0;
	text-align: center;
}

.payment-form label {
	text-align: left;
	margin-bottom: 0;
}

.payment-form #card-number,
.payment-form #card-expiry,
.payment-form #card-cvc {
	border: 1px solid #cfd5e2;
	border-radius: 8px;
	padding: 15px 30px;
	background: #fff;
	margin-bottom: 15px;
}

h4.haul-view-payment-total {
	text-align: center;
	margin-top: 15px;
}

/* customer view */
form#haul-payment-form {
	width: 100% !important;
}

.accept-checkbox {
	display: flex;
	gap: 15px;
	margin: 15px;
	padding: 15px;
}

article.terms_and_conditions .haul-terms-and-conditions {
	text-align: left;
}

textarea.read-terms {
	font-size: 0.875rem;
	min-height: 300px;
	padding: 30px;
}

.haul-id-title {
	margin-top: 30px;
	font-size: 1.5rem;
}

/* footer */
.copyright {
	color: var(--hb-orange);
	font-size: 0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
}

.footerlink-container {
	display: flex;
	gap: 30px;
	justify-content: flex-end;
	align-items: center;
}

.footerlink-container a {
	color: #eee;
	font-size: 1rem;
	text-transform: capitalize;
	font-weight: 300;
}

.footerlink-container a:hover {
	color: var(--hb-orange);
}

footer p {
	margin: 0;
	padding: 0;
}

#login-container {
	width: 400px;
	display: block;
	margin: 60px auto;
}

/* view-haul */
form#haul-payment-form {
	width: 400px;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.update-success {
	opacity: 1;
	animation: fadeOut 1s ease forwards;
	animation-delay: 1s;
	color: #228322;
}

.update-failure {
	opacity: 1;
	color: #832222;
}

/* admin section */

body.admin .main h1 {
	font-size: 1.5rem;
}

fieldset.toggle {
	display: flex;
	justify-content: space-between;
}

.error {
	color: red;
	text-align: center;
	margin: 30px;
	border: 2px solid red;
	padding: 15px;
	border-radius: 8px;
	font-size: 1rem;
	text-transform: uppercase;
	line-height: 1.2em;
}

.success {
	color: green;
	text-align: center;
	margin: 30px;
	border: 2px solid green;
	padding: 15px;
	border-radius: 8px;
	font-size: 1rem;
	text-transform: uppercase;
	line-height: 1.2em;
}

.hb-footer {
	height: unset;
	text-align: center;
}

div.hb-footer span {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
}

img.footer-logo {
	width: 30px;
	height: auto;
}

span.hb-name {
	text-transform: uppercase;
	font-style: italic;
	font-size: 1.125rem;
	font-weight: 600;
}

.client-view-link h3 {
	font-size: 0.875rem;
	text-align: center;
}

.haul details.dropdown {
	padding: 0;
}

a.hauls-button {
	padding: 10px 30px;
	display: block;
	border: 2px solid #ddd;
	background: #555;
	border-radius: 8px;
}

a.hauls-button:hover {
	border: 2px solid var(--hb-orange);
}

.haul-detail-inner {
	display: flex;
	flex-direction: column;
}

.haul-detail-inner span {
	font-weight: 500;
	font-size: 0.8rem;
	color: #ffffff;
	text-transform: capitalize;
}

.haul-block-upper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.haul-block-lower {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap: 15px;
	background: #00000070;
	padding: 2px 10px;
	border-radius: 30px;
}

.haul-block-lower span {
	white-space: nowrap;
}

.trip-arrow-row {
	border-bottom: 1px solid #ddd;
	width: 100%;
	flex: 1;
	align-self: center;
	position: relative;
}

.trip-arrow-row::after {
	content: ">";
	position: absolute;
	right: -3px;
	display: flex;
	align-self: center;
	color: #ddd;
	font-size: 1.2rem;
}

a.hauls-button {
	border: 3px solid #fff;
}

a.hauls-button:hover {
	border: 3px solid var(--hb-orange);
}

a.hauls-button.new {
	background: var(--hb-new);
}

a.hauls-button.quote-sent {
	background: var(--hb-quote-sent);
}

a.hauls-button.downpayment {
	background: var(--hb-downpayment);
}

a.hauls-button.canceled {
	background: var(--hb-canceled);
}

a.hauls-button.full-payment {
	background: var(--hb-full-payment);
}

a.hauls-button.declined {
	background: var(--hb-declined);
}

a.hauls-button.archived {
	background: var(--hb-archived);
}

[data-tooltip]:not(a, button, input) {
	border-bottom: none;
}

.tooltip-hint {
	border: 1px solid #999;
	border-radius: 100px;
	font-size: 0.75em;
	font-weight: 400;
	color: #ffffff;
	margin-left: 0.5em;
	cursor: help;
	width: 1.25em;
	height: 1.25em;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--hb-orange);
}

.status-pill {
	padding: 3px 15px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 5rem;
	border: 1px solid #ddd;
	text-transform: uppercase;
}

.downpayment-paid,
.final-payment-paid {
	background: #2ae12a;
}

.downpayment-pending,
.final-payment-pending {
	background: var(--hb-yellow);
}

.quote-status {
	background: #71bdff;
}

.orange-text {
	color: var(--hb-orange);
	font-weight: 600;
}

.paid-title {
	font-weight: 600;
	font-size: 1.125rem;
	text-align: center;
	display: block;
	color: var(--hb-green);
}

.na-paid {
	background: #b6b6b6;
}

.down-and-final-total {
	margin: 1rem auto;
	display: flex;
	justify-content: center;
	padding: 1rem 2rem;
	border: 1px solid #b9ffb9;
	background: #b9ffb9;
	border-radius: 8px;
}

.down-and-final-total span,
.down-and-final-total div {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
}

.hb-section-box {
	padding: 1rem 2rem;
	margin: 1rem 0;
	border: 1px solid #ddd;
	background: #eee;
	border-radius: 8px;
}

.hb-section-box.centered {
	text-align: center;
	display: flex;
	flex-direction: column;
}

article.haul-list header,
article.haul header {
	text-transform: capitalize;
}

.gauge-holder {
	display: flex;
	justify-content: center;
	align-items: center;
}

.estimated-total {
	display: flex;
	margin-bottom: 15px;
}

.estimated-total span.field-label {
	font-size: 1.25rem;
	color: var(--hb-green);
	text-align: center;
	font-weight: 600;
}

.dollar-input {
	position: relative;
}

.dollar-input::before {
	content: "$";
	position: absolute;
	left: 5px;
	top: 55%;
	transform: translateY(-50%);
	color: #333;
	pointer-events: none;
	font-size: 1.25rem;
}

.dollar-input input {
	padding-left: 20px;
}

.haul-detail-entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.inline-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.inline-group input[type="file"] {
	padding: 5px;
	font-size: 1rem;
}

.notfound-container {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 15%;
}

div#uploaded-documents {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

button.hf-button {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	max-width: 80px;
	padding: 12px 10px;
	margin: 0;
	border-radius: 0 6px 6px 0;
}

button.hf-button:hover {
	cursor: pointer;
	color: var(--hb-orange);
}

button.hf-button.fb-selected {
	border: none;
	background-color: #555;
	color: white;
	border-color: #222;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 1);
}

button.hf-button.fb-selected:hover {
	cursor: pointer;
	color: #bbb;
}

.filter-wrapper {
	background: #eee;
	padding: 15px;
	border: 1px solid #ddd;
}

.haul-list-filter-buttons {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
	margin: 10px 0;
}

summary.filter-toggle {
	justify-content: flex-end;
	display: flex;
	margin-bottom: 15px;
}

details>summary.filter-toggle::before {
	content: "Open filter";
	font-weight: 600;
	color: var(--hb-orange);
	text-transform: uppercase;
}

details[open]>summary.filter-toggle::before {
	content: "Close filter";
	font-weight: 600;
	color: var(--hb-orange);
	text-transform: uppercase;
}

summary.filter-toggle::after {
	color: var(--hb-orange);
}

form.is-submitting {
	pointer-events: none;
	position: relative;
}

form.is-submitting input,
form.is-submitting button,
form.is-submitting select,
form.is-submitting textarea {
	pointer-events: none;
	opacity: 0.6;
}

.dot-link-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

button.link-button {
	background: none;
	border: none;
	padding: 0;
	color: var(--hb-orange);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
}

button.link-button:hover {
	text-decoration: underline;
}

summary.summary-toggle {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 3px 10px;
	margin: 10px;
}

details[open]>summary.summary-toggle {
	border: none;
	display: none;
}

.haul-documents-list {
	padding: 15px;
}

.haul-documents-list a {
	font-size: 0.8rem;
}

.doc-title {
	font-weight: 600;
	margin-right: 15px;
	text-transform: capitalize;
}

.doc-list {
	margin-bottom: 5px;
}

.doc-list a {
	text-transform: capitalize;
	font-weight: 600;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}

.doc-list a:before {
	content: "↗";
	font-size: 0.8rem;
	background: #fff;
	color: #777;
	padding: 0 4px;
	border-radius: 4px;
	margin-right: 5px;
	border: 1px solid #777;
}

.haul-status {
	font-weight: 900;
}

.doc-status {
	display: flex;
	align-items: center;
	gap: 10px;
}

#forgot-password-container {
	display: flex;
	max-width: 350px;
	justify-content: center;
	flex-direction: column;
	margin: 30px auto;
}

#forgot-password-container h1 {
	font-size: 2rem;
}

.payments-view {
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.payments-view h3 {
	margin-bottom: 2rem;
	text-align: center;
}

.payments-table-container {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.payments-table {
	width: 100%;
	border-collapse: collapse;
}

.payments-table th {
	background: var(--hb-grey);
	color: #fff;
	padding: 1rem;
	text-align: left;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.5px;
}

.payments-table td {
	/* padding: 1rem; */
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

.payment-row:hover,
.haul-summary-row:hover {
	background: #f8f9fa;
}

.haul-summary-row {
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.haul-summary-row.expanded {
	background: #f0f7ff;
	border-left: 3px solid var(--hb-blue);
}

.haul-details-row {
	background: #fafbfc;
	border-top: none;
}

.haul-details-row.hidden {
	display: none;
}

.details-container {
	padding: 0 !important;
}

.payment-details-table-wrapper {
	margin: 0.5rem 1rem 1rem 1rem;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
}

.payment-details-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	background: white;
}

.payment-details-table th {
	background: #f8f9fa;
	color: var(--hb-grey);
	padding: 0.7rem;
	text-align: left;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #dee2e6;
}

.payment-details-table td {
	padding: 0.8rem;
	border-bottom: 1px solid #f0f0f0;
}

.payment-detail-row:last-child td {
	border-bottom: none;
}

.payment-detail-row:hover {
	background: #f8f9fa;
}

.payment-row:last-child td {
	border-bottom: none;
}

.total-amount {
	font-weight: 600;
}

.count-badge {
	font-weight: 600;
}

.last-payment-date {
	color: #666;
	font-size: 0.8rem;
	white-space: no-wrap;
}

.haul-status-badge {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.haul-status-badge.complete {
	background: #e7f5e7;
	color: var(--hb-green);
	border: 1px solid var(--hb-green);
}

.expand-cell {
	width: 40px;
	text-align: center;
}

.expand-button {
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	border-radius: 4px;
	color: #666;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.expand-button:hover {
	background: #f0f0f0;
	color: var(--hb-blue);
}

.expand-button[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.expand-button svg {
	transition: transform 0.2s ease;
}

.haul-link {
	color: var(--hb-orange);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9rem;
	white-space: nowrap;
}

.haul-link:hover {
	text-decoration: underline;
	color: var(--hb-grey);
}

.payment-type-badge {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.deposit-badge {
	background: var(--hb-green);
	color: white;
}

.balance-badge {
	background: #205500;
	color: white;
}

.refund-badge {
	background: #b41717;
	color: white;
}

.payment-amount {}

.payment-method {
	min-width: 180px;
}

.payment-method-info {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.card-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.method-type {
	font-weight: 600;
	color: var(--hb-grey);
	text-transform: uppercase;
	font-size: 0.8rem;
}

.card-details {
	font-family: "Courier New", monospace;
	color: #666;
	font-size: 0.85rem;
}

.card-exp {
	color: #999;
	font-size: 0.75rem;
	font-family: "Courier New", monospace;
}

.payment-date {
	color: #666;
	font-size: 0.9rem;
	min-width: 100px;
}

.haul-payments-container .payment-container .payment-date {
	font-size: 0.8rem;
	font-style: italic;
}

.payment-status-badge {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.payment-status-badge.success {
	background: #e7f5e7;
	color: var(--hb-green);
	border: 1px solid var(--hb-green);
}

.no-payments {
	text-align: center;
	padding: 3rem;
	color: #666;
}

.no-payments p {
	font-size: 1.1rem;
	margin: 0;
}

.info {
	background: #b7ddff;
	padding: 15px;
	text-align: center;
	border-radius: 8px;
	margin: 15px 0;
}

/* 
button[type=submit] {
    width: unset;
} */
.grid.centered-grid div.summary-total {
	font-weight: 600;
	background: rgb(185, 255, 185);
}

.grid.centered-grid h5 {
	margin: 0;
	color: var(--hb-orange);
	font-size: 1.25rem;
}

.result {
	text-align: center;
	font-size: 1.2rem;
}

.radio-buttons {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-bottom: 30px;
}

.radio-buttons input[type="radio"] {
	display: none;
}

.radio-buttons label {
	display: inline-block;
	cursor: pointer;
	margin-right: 10px;
}

.radio-buttons input[type="radio"]:checked+label {
	background-color: #4caf50;
	color: white;
	border-color: #4caf50;
}

.subscription-price {
	font-weight: 600;
}

hr {
	margin: 30px 0;
	border-color: #bdbdbd;
}

gmp-place-autocomplete#toAuto,
gmp-place-autocomplete#fromAuto {
	height: 2.25em;
}

.centered-text {
	text-align: center;
}

.haul-detail-inner span.req-name {
	font-weight: 600;
	font-size: 1.1rem;
}

.grid.centered-grid {
	justify-items: center;
	text-align: center;
}

.grid.centered-grid div {
	border: 1px solid #ddd;
	width: 100px;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 6px;
	background: #ddd;
	gap: 5px;
}

.status-in-header {
	font-weight: 600;
}

.haul-header-sub-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 1rem;
	padding: 5px 30px;
}

.haul-header-client-name {
	font-size: 1.5rem;
	color: #fff;
	font-weight: 600;
}

header.haul-header.quote-sent {
	background: var(--hb-quote-sent);
	color: #fff;
}

header.haul-header.downpayment {
	background: var(--hb-downpayment);
	color: #fff;
}

header.haul-header.canceled {
	background: var(--hb-canceled);
	color: #fff;
}

header.haul-header.new {
	background: var(--hb-new);
	color: #fff;
}

header.haul-header.declined {
	background: var(--hb-declined);
	color: #fff;
}

header.haul-header.full-payment {
	background: var(--hb-full-payment);
	color: #fff;
}

.doc-label {
	font-weight: 600;
	font-size: 1.25rem;
	text-transform: capitalize;
}

.uploaded-file {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.uploaded-file a {
	font-weight: 600;
	font-size: 1.25rem;
	text-transform: capitalize;
	text-align: center;
}

.delete-uploaded-document {
	background: var(--hb-red);
	padding: 0 10px;
	display: block;
	max-width: 100px;
	margin: 0;
	font-size: 0.8rem;
}

.delete-uploaded-document:hover {
	background: #555;
}

.decline-button {
	background: var(--hb-red);
	padding: 3px 15px;
	display: block;
	font-size: 0.8rem;
	margin: 0 auto;
}

.decline-button:hover {
	background: #555;
}

.big-font {
	font-size: 1.125em;
	font-weight: 600;
}

.pkey-result {
	color: var(--hb-red);
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}

.close-modal {
	display: block;
	width: 100%;
}

.onboarding-help-section {
	margin-bottom: 30px;
	border: none;
	padding: 45px;
	border-radius: 8px;
	background: #fff;
}

.stripe-help-modal {
	background: #bbb;
}

.help-modal {
	background: #f5f5f5;
}

img.square-logo {
	width: 100px;
	height: auto;
	margin: 15px 0;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 4px 8px;
	background: #f8f8f8;
}

button.close-square-modal {
	height: 45px;
}

.nav-icon img {
	width: 15px;
	height: auto;
	margin-right: 5px;
}

.nav-settings::after {
	content: "Settings";
}

.nav-dashboard::after {
	content: "Hauls";
}

.nav-itinerary::after {
	content: "Interary";
}

.nav-payments::after {
	content: "Payments";
}

.nav-admin::after {
	content: "Admin";
}

.nav-logout::after {
	content: "Logout";
}

.nav-billing::after {
	content: "Billing";
}

.turnstile-container {
	display: flex;
	justify-content: center;
	margin: 30px 0;
}

.haul-declined-messages {
	text-align: center;
	color: var(--hb-red);
	font-weight: 600;
}

details.filter-wrapper {
	padding: 0;
	margin: 0;
	background: none;
	border: none;
}

.is-submitting::before {
	content: "";
	display: block;
	background: #efefefab;
	position: fixed;
	top: -15px;
	left: -15px;
	right: -15px;
	bottom: -15px;
	z-index: 9;
	box-shadow: inset 0 0 30px rgb(255, 255, 255);
}

.is-submitting::after {
	content: "";
	display: block;
	width: 180px;
	height: 180px;
	background: url("/assets/images/boss-orange.gif") no-repeat center center;
	background-size: contain;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
	border: 30px solid #fff;
	/* white “padding” */
	border-radius: 50%;
}

details summary {
	font-weight: 600;
}

.monthly,
.yearly {
	position: relative;
	padding: 10px 20px;
	border: 1px solid #888;
	border-radius: 4px;
	text-align: center;
}

.yearly-discount-banner {
	position: absolute;
	right: 0;
	bottom: -20px;
	background: var(--hb-orange);
	padding: 3px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.subscription-price {
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
}

.subscription-term {
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
}

.form-container {
	margin: 15px 0;
}

.field-description {
	font-size: 1rem;
	color: #555;
	margin-top: 0;
	text-align: right;
}

#update-dropoff-address,
#update-pickup-address {
	background: #ddd;
	padding: 15px;
	border-radius: 6px;
}

#update-dropoff-address .section-label,
#update-pickup-address .section-label {
	font-size: 0.8rem;
	margin-bottom: 10px;
}

#update-dropoff-address p,
#update-pickup-address p {
	margin-bottom: 0;
}

.haul-start-location,
.haul-end-location {
	padding: 15px 50px;
	position: relative;
	text-transform: capitalize;
	font-weight: 600;
}

.haul-start-location details,
.haul-end-location details {
	text-transform: capitalize;
}

.haul-start-location summary::after,
.haul-end-location summary::after {
	background-size: 0;
	content: "🖉";
	position: absolute;
	font-size: 0.85rem;
	color: #777;
	top: 15px;
	right: 15px;
	transform: rotate(0deg);
}

.haul-start-location details[open] summary::after,
.haul-end-location details[open] summary::after {
	content: "✕";
}

span.from-to-label {
	background: #777;
	padding: 3px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 0 6px 6px 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	/* flips text vertical */
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	color: #eee;
	font-size: 0.8rem;
}

.icon-label-icon {
	width: 14px;
	height: auto;
	margin-right: 10px;
}

.view-route-icon {
	width: 20px;
}

.address-display {
	font-size: 1rem;
	font-weight: 600;
}

.location-wrapper {
	display: flex;
}

.itinerary-view-nav {
	display: flex;
	gap: 30px;
	margin: 0 0 15px 0;
}

.itinerary-view-nav a {
	padding: 3px 10px;
	background: #ddd;
	border-radius: 30px;
	font-size: 0.8rem;
}

.itinerary-view-nav a:hover {
	color: #333;
}

.itinerary-distance-wrapper {
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin: 15px 0;
}

.itinerary-distance-wrapper span {
	font-size: 1.5rem;
}

.event-card {
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
	padding: 15px 30px;
	margin: 15px 0;
}

.event-card.completed {
	box-shadow: 1px 1px 8px rgba(86, 86, 86, 0.3);

	border: none;
	opacity: 0.5;
}

a.submit-date-form {
	display: block;
	white-space: nowrap;
	color: #fff;
	font-weight: 600;
	background: var(--hb-orange);
	align-self: center;
	padding: 15px;
	border-radius: 10px;
}

a.submit-today-form {
	background: #a53d00;
	border-color: #a53d00;
	align-self: center;
	padding: 15px;
	color: #fff;
	white-space: nowrap;
}

#selected_date {
	height: 100%;
	padding: 13px 25px;
}

.select-submit-date-form {}

.text-muted {
	color: #999;
}

.itinerary-head-miles-time-wrapper {
	display: flex;
	gap: 30px;
}

.itinerary-column-wrapper {
	display: flex;
	flex-direction: column;
}

.itinerary-column-one {}

.itinerary-column-two {}

.section.locations {
	margin: 30px 0;
}

.client-view-contact-line {
	display: flex;
	gap: 30px;
}

details.decline-quote-wrapper {
	display: block;
	margin: auto;
	max-width: 300px;
	border: 1px solid #ddd;
	padding: 10px 30px;
	border-radius: 6px;
}

details.decline-quote-wrapper summary {
	text-align: center;
}

details.decline-quote-wrapper h4,
details.decline-quote-wrapper p,
details.decline-quote-wrapper div,
details.decline-quote-wrapper div a,
details.decline-quote-wrapper span,
details.decline-quote-wrapper div span {
	text-align: center;
}

.day-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(64px, 1fr);
	gap: 0.5rem;
	overflow-x: auto;
	padding: 0.5rem 0;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.day-btn {
	scroll-snap-align: start;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #333;
	padding: 5px 2px;
	border-radius: 6px;
}

.day-btn[aria-pressed="true"] {
	border: 2px solid var(--hb-orange);
	background: var(--hb-orange);
	color: #fff;
}

.day-btn-day {
	font-size: 0.7rem;
	color: #fff;
}

.day-btn-date {
	font-size: 2rem;
	color: #fff;
}

.color-invert {
	filter: invert(1);
}

.day-btn-count {
	display: none;
}

.events-count-0 {
	background: #ddd;
	pointer-events: none;
}

article.payment-item ul li,
article.payment-item ul {
	list-style: none;
}

article.payment-item ul li::marker {
	display: none;
}

article.payment-item ul li {
	line-height: 0.8rem;
}

.itnerary-completion-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 15px 0;
	background: #eee;
	padding: 0 0 0 15px;
	color: #999999;
	border-radius: 40px;
}

.undo-button {
	padding: 3px 10px;
	font-size: 0.7rem;
	font-weight: 500;
	background: var(--hb-blue);
	border: none;
	border-radius: 6px;
}

.event-completed-message {
	background-color: #999;
	border-color: #999;
	color: white;
	padding: 0.25rem 0.5rem;
	margin: 15px 0;
	border-radius: 0.375rem;
	border: 1px solid transparent;
	font-size: 0.7rem;
	font-weight: 500;
}

button.close-button {
	background: none;
	padding-right: 15px;
	color: #555;
	border: none;
	font-size: 0.8rem;
}

button.hf-button {
	/* width: 24px;
	height: 24px;
	background: url("/assets/icons/search.svg") no-repeat center;
	background-size: contain;
	border: none;
	cursor: pointer;
	line-height: 0;
	margin-bottom: 0; */
}

button.hf-button:focus,
button.hf-button:hover {
	box-shadow: none;
}

button.close-button:hover,
button.hf-button:hover {
	opacity: 0.7;
}

.search-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	width: 100%;
}

#haul-filter {
	max-width: 175px;
	margin-bottom: 0;
}

#haul-filter-value {
	border: none;
}

.hf-input {}

.search-and-clear-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #d4d4d4;
	border-radius: 6px 0 0 6px;
	width: 100%;
}

.search-and-clear-wrapper button {
	margin-bottom: 0;
}

.search-and-clear-wrapper input {
	margin-bottom: 0;
}

.client-view-copy-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin: 0 0 15px 0;
}

.trip-link-button {
	color: #fff;
	background: var(--hb-orange);
	padding: 3px 15px;
	border-radius: 6px;
	text-align: center;
}

.trip-link-button:hover {
	background: #777;
	color: #eee;
}

.client-view-copy-links svg.copy-link-icon {
	color: #ffffff;
	height: 20px;
	width: 20px;
}

.distace-mi-wrapper {
	display: flex;
	gap: 15px;
	font-weight: 600;
}

/* the-end */

/* Haul Logs Styles */
.haul-logs-container {
	margin: 20px 0;
	padding: 15px;
}

.haul-logs-scrollable {
	max-height: 300px;
	overflow-y: auto;
}

.add-log-entry-container {
	padding: 15px;
}

.haul-log-entry {
	padding: 15px;
	margin-bottom: 10px;
	border-left: 3px solid var(--hb-orange);
	background: #f8f9fa;
	border-radius: 4px;
}

.haul-log-entry:last-child {
	margin-bottom: 0;
}

.haul-log-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-size: 0.9rem;
}

.haul-log-author {
	font-weight: 600;
	color: var(--hb-orange);
	text-transform: capitalize;
}

.haul-log-date {
	color: #6c757d;
	font-size: 0.8rem;
}

.haul-log-text {
	color: var(--hb-black);
	line-height: 1.4;
	word-wrap: break-word;
}

.haul-log-empty {
	text-align: center;
	color: #6c757d;
	font-style: italic;
	padding: 20px;
}

textarea.customer-notes {
	opacity: 1;
	pointer-events: all;
}

/* OAuth Integration Styles */
.oauth-status {
	margin: 30px 0;
}

.oauth-connected {
	display: flex;
	align-items: center;
	gap: 15px;
	color: var(--hb-green);
	border: 1px solid #ddd;
	padding: 5px 15px;
	border-radius: 8px;
}

.oauth-disconnected {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--hb-red);
}

.status-icon {
	font-size: 1.2rem;
	font-weight: bold;
}

.status-text {
	font-weight: 500;
	flex-grow: 1;
}

.oauth-actions {
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
	flex-wrap: wrap;
}

.connect-button {
	background: var(--hb-grey);
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.connect-button:hover {
	background: #555;
}

.connect-button:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.reconnect-button {
	background: var(--hb-grey);
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.reconnect-button:hover {
	background: #004a8f;
}

.disconnect-button {
	background: var(--hb-red);
	color: white;
	border: none;
	padding: 0.5rem 0.75rem;
	margin: 0;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.disconnect-button:hover {
	background-color: #d32f2f;
}

.message {
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	border-radius: 6px;
	font-weight: 500;
	animation: fadeIn 0.3s ease-in;
}

.message-success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.message-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.message-info {
	background: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Manual fields (hidden for OAuth) */
.manual-fields {
	display: none !important;
}

.cancellation-requested p {
	margin: 0.5rem 0;
}

.cancellation-requested p:first-child {
	margin-top: 0;
}

.cancellation-requested p:last-child {
	margin-bottom: 0;
}

.cancellation-section {
	margin-top: 1rem;
}

.cancellation-section p {
	margin-bottom: 1rem;
	color: #6c757d;
}

.maplink-button {
	background-color: #007900;
	color: white;
	padding: 0.8rem 2rem;
	display: flex;
	gap: 15px;
	justify-content: center;
	text-align: center;
	margin: 15px auto;
	border-radius: 6px;
	border: 1px solid var(--hb-green);
	font-size: 1.2rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.maplink-button img {
	width: 25px;
	height: 25px;
}

.maplink-button:hover {
	background-color: var(--hb-grey);
	color: #fff;
}

.small-button-blue {
	background-color: var(--hb-blue);
	border-color: var(--hb-blue);
	color: white;
	padding: 0.25rem 0.5rem;
	margin: 15px 0;
	border-radius: 0.375rem;
	border: 1px solid transparent;
	font-size: 0.7rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.small-button-blue:hover {
	background-color: #555;
}

.red-button {
	background-color: #dc3545;
	border-color: #dc3545;
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	border: 1px solid transparent;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.red-button:hover {
	background-color: #c82333;
	border-color: #bd2130;
}

.red-button:disabled {
	background-color: #6c757d;
	border-color: #6c757d;
	cursor: not-allowed;
}

/* Payment Method Section Styles */
.payment-method-container {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	margin-top: 1rem;
}

.credit-card {
	background: linear-gradient(135deg, #838383 0%, #101010 100%);
	border-radius: 12px;
	padding: 1.5rem;
	color: white;
	min-width: 320px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

.credit-card::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle,
			rgba(255, 255, 255, 0.1) 0%,
			transparent 70%);
	pointer-events: none;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.card-chip {
	width: 40px;
	height: 30px;
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	border-radius: 6px;
	position: relative;
}

.card-chip::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 16px;
	background: repeating-linear-gradient(90deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.3) 2px,
			rgba(0, 0, 0, 0.3) 4px);
}

.card-brand {
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.card-number {
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 2px;
	margin-bottom: 2rem;
	font-family: "Courier New", monospace;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.itnerary-completion-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.card-holder,
.card-expiry {
	display: flex;
	flex-direction: column;
}

.card-holder .label,
.card-expiry .label {
	font-size: 0.7rem;
	opacity: 0.8;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.card-holder .value,
.card-expiry .value {
	font-size: 0.9rem;
	font-weight: 500;
}

.payment-update-form {
	flex: 1;
	min-width: 0;
	margin: auto;
}

.payment-update-form h4 {
	margin: 0 0 1rem 0;
	color: #333;
	font-size: 1.1rem;
}

.payment-update-form .payment-form {
	margin-bottom: 1rem;
}

.payment-update-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #555;
}

.payment-update-form .form-row {
	display: flex;
	gap: 1rem;
}

.payment-update-form .form-group {
	flex: 1;
}

.payment-update-form #card-number,
.payment-update-form #card-expiry,
.payment-update-form #card-cvc {
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 0.75rem;
	background: white;
	margin-bottom: 1rem;
}

.payment-update-form #card-number:focus,
.payment-update-form #card-expiry:focus,
.payment-update-form #card-cvc:focus {
	border-color: #005eaf;
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 94, 175, 0.1);
}

/* Subscription Card Styles */
.subscription-card {
	background: linear-gradient(135deg, #ff5f00 0%, #000000 100%);
	border-radius: 16px;
	padding: 2rem;
	color: white;
	margin-bottom: 2rem;
	box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
	position: relative;
	overflow: hidden;
}

.subscription-card::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle,
			rgba(255, 255, 255, 0.1) 0%,
			transparent 70%);
	pointer-events: none;
}

.subscription-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.subscription-icon {
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
}

.subscription-header h3 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: white;
}

.subscription-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.renewal-info {
	text-align: right;
}

.renewal-label {
	font-size: 0.8rem;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.25rem;
}

.renewal-date {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #ffd700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.renewal-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	opacity: 0.9;
}

.status-dot {
	width: 8px;
	height: 8px;
	background: #4ade80;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
	animation: pulse 2s infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.7;
		transform: scale(1.1);
	}
}

#itineraryMenu .off-canvas-content.disabled {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.6;
}

/* Itinerary Styles */
.date-range-selector {
	max-width: 350px;
}

.date-range-selector input[type="date"] {
	border: 1px solid #ddd;
	border-radius: 4px;
	margin: 0 0.5rem;
	background-image: none;
}

/* Fix for date picker widget not showing - override Pico CSS */
.hb-date-input::-webkit-calendar-picker-indicator {
	opacity: 1 !important;
	cursor: pointer;
}

.hb-date-input {
	padding: 0;
}

.date-range-selector button {
	background: #007bff;
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	cursor: pointer;
}

.day-container {
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 1rem;
	padding: 1rem;
}

.day-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #eee;
}

.day-date {
	font-weight: bold;
	font-size: 1.1rem;
}

.add-event-btn {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.add-event-btn:hover {
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	transform: rotate(90deg);
}

.events-container {
	min-height: 100px;
	border: 2px dashed #ddd;
	border-radius: 4px;
	padding: 1rem;
	background: #fafafa;
}

.event-item {
	position: relative;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.75rem;
	margin-bottom: 0.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.event-item:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.animal-count {
	background: #ff5733;
	color: white;
	font-size: 0.75rem;
	padding: 2px 6px;
	border-radius: 10px;
	font-weight: 500;
	margin-left: auto;
}

.event-distance {
	font-size: 0.75rem;
	color: #666;
	margin-top: 2px;
	font-style: italic;
}

.event-type-badge {
	padding: 0.25rem 0.5rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: bold;
}

.event-type-pickup {
	background: #e3f2fd;
	color: #1976d2;
}

.event-type-dropoff {
	background: #f3e5f5;
	color: #7b1fa2;
}

.event-type-location {
	background: #e8f5e8;
	color: #388e3c;
}

.delete-event-btn {
	cursor: pointer;
	margin-left: 30px;
	background: none;
	padding: 0;
	border: none;
	opacity: 0.7;
}

.delete-event-btn:hover {
	opacity: 1;
}

/* Off-canvas styles */
.off-canvas-itinerary-menu {
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: white;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
	transition: right 0.3s ease;
	z-index: 1000;
	overflow-y: auto;
}

.off-canvas-itinerary-menu.open {
	right: 0;
}

.off-canvas-header {
	background: #f8f9fa;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.off-canvas-header h4 {
	margin: 0;
}

.off-canvas-close {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.7;
}

.off-canvas-content {
	padding: 1rem;
}

.section-title {
	font-weight: bold;
}

.haul-item,
.location-item {
	background: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.5rem;
	margin-bottom: 0.25rem;
	cursor: pointer;
	transition: background-color 0.2s;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

.location-content {
	flex: 1;
	cursor: pointer;
}

.location-item,
.location-item div {
	font-size: 0.85rem;
}

.haul-item:hover,
.location-item:hover {
	background: #e9ecef;
}

.delete-location-btn {
	background: #dc354500;
	border: none;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
	cursor: pointer;
	font-size: 0.75rem;
	opacity: 0;
	transition: opacity 0.2s;
	margin-left: 0.5rem;
}

.location-item:hover .delete-location-btn {
	opacity: 1;
}

.delete-location-btn:hover {
	background: var(--hb-red);
}

.haul-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.haul-action-btn {
	background: #007bff;
	color: white;
	border: none;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.7rem;
}

.haul-action-btn:hover {
	background: #004894;
}

.haul-action-btn.disabled {
	background: #6c757d !important;
	color: #fff !important;
	cursor: not-allowed !important;
	opacity: 0.6;
}

.haul-action-btn.disabled:hover {
	background: #6c757d !important;
}

.add-location-form {
	margin-top: 1rem;
}

.add-location-form input {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.add-location-form button {
	background: #28a745;
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	cursor: pointer;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: none;
}

.overlay.show {
	display: block;
}

.empty-day-message {
	text-align: center;
	padding: 2rem;
	color: #6c757d;
	background: #f8f9fa;
	border-radius: 8px;
}

.events-list {
	/* Event list container */
}

.event-header {
	background: #f8f9fa;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}

.event-header:hover {
	background: #e9ecef;
}

.event-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
}

.event-checkbox {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.event-completed {
	text-decoration: line-through;
	opacity: 0.6;
}

.event-details.create-element {
	padding: 1rem;
	display: none;
}

.event-details.create-element.show {
	display: block;
}

.detail-row {
	display: flex;
	margin-bottom: 0.5rem;
}

.detail-label {
	font-weight: bold;
	width: 120px;
	flex-shrink: 0;
}

.detail-value {
	flex: 1;
}

.no-events {
	text-align: center;
	padding: 2rem;
	color: #6c757d;
	background: #f8f9fa;
	border-radius: 8px;
}

.completion-stats {
	background: #e9ecef;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.progress-bar {
	background: #dee2e6;
	border-radius: 10px;
	height: 20px;
	overflow: hidden;
	flex: 1;
	margin: 0 1rem;
}

.progress-fill {
	background: #28a745;
	height: 100%;
	transition: width 0.3s ease;
}

.event-actions {
	display: flex;
	gap: 5px;
}

.move-up-btn,
.move-down-btn {
	padding: 0;
	cursor: pointer;
	background: none;
	border: none;
	opacity: 0.7;
	transition: transform 0.3s ease;
}

.move-up-btn:hover,
.move-down-btn:hover {
	opacity: 1;
	transform: scale(1.1);
}

.move-up-btn:disabled,
.move-down-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hidden {
	display: none;
}

/* Success feedback animations */
@keyframes slideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* Save Controls */
.save-controls {
	margin: 30px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 350px;
	gap: 15px;
}

.save-btn {
	background: var(--hb-green);
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	width: 100%;
	text-align: center;
	align-items: center;
}

.save-btn:hover:not(:disabled) {
	background: #1a6b1a;
	transform: translateY(-1px);
}

.save-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
}

.save-btn.has-changes {
	background: var(--hb-orange);
}

.save-btn.has-changes:hover:not(:disabled) {
	background: #e14e2d;
}

.save-status {
	font-size: 14px;
	font-weight: 500;
}

.save-status.pending {
	color: var(--hb-orange);
}

.save-status.saving {
	color: var(--hb-blue);
}

.save-status.success {
	color: var(--hb-green);
}

.save-status.error {
	color: var(--hb-red);
}

.save-status.no-changes {
	color: #666;
}

/* Animal Count Styling */
.animal-count {
	font-weight: 500;
}

/* Haul card styling for scheduled dates and addresses */
.haul-scheduled-date {
	color: #666;
	font-size: 0.85rem;
	margin-bottom: 5px;
}

.haul-addresses {
	margin-bottom: 8px;
}

.pickup-address,
.dropoff-address {
	font-size: 0.8rem;
	margin-bottom: 2px;
	line-height: 1.2;
}

.pickup-address strong,
.dropoff-address strong {
	font-weight: 600;
}

/* Event item scheduled date styling */
.event-scheduled-date {
	font-size: 0.75rem;
	margin-top: 2px;
	font-style: italic;
}

/* Payment Details Styling */
.haul-details-payments .payment-container {
	background: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 10px;
	transition: box-shadow 0.2s ease;
}

.haul-details-payments .payment-container:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.haul-details-payments .payment-details {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.haul-details-payments .payment-icon {
	width: 24px;
	height: 24px;
	opacity: 0.7;
	flex-shrink: 0;
}

.haul-details-payments .card-brand {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9rem;
	color: var(--hb-blue);
	letter-spacing: 0.5px;
}

.haul-details-payments .card-last4 {
	font-family: "Courier New", monospace;
	font-weight: 500;
	font-size: 0.9rem;
	color: #555;
}

.haul-details-payments .card-last4::before {
	content: "•••• ";
	color: #999;
}

.haul-details-payments .card-exp {
	font-family: "Courier New", monospace;
	font-size: 0.85rem;
	color: #666;
	background: #f0f0f0;
	padding: 2px 6px;
	border-radius: 4px;
}

.haul-details-payments .payment-amount {
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--hb-green);
	margin-left: auto;
	text-align: right;
}

/* Refund styling */
.haul-details-payments .refund-amount {
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--hb-red);
	margin-left: auto;
	text-align: right;
}

.haul-details-payments .refund-container {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.haul-details-payments .refund-container:hover {
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

.refund-title {
	color: var(--hb-red);
	font-weight: 600;
}

/* Manual refund form styling */
.manual-refund-section {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e5e5e5;
}

.manual-refund-form {
	padding: 10px 0;
}

.refund-input-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.refund-input-group label {
	min-width: 120px;
	font-weight: 500;
}

.refund-input-group input[type="number"] {
	width: 120px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 0.9rem;
}

.refund-input-group input[type="number"]:focus {
	border-color: var(--hb-blue);
	outline: none;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Manual payment styling */
.haul-details-payments .payment-details span:first-child {
	font-weight: 600;
	color: var(--hb-orange);
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
}

/* MEDIA QUERIES - Organized by breakpoint size from largest to smallest */

/* 1240px and below */
@media (max-width: 1240px) {
	body {
		padding: 0px;
	}
}

/* 1200px and below */
@media (max-width: 1200px) {
	.main {
		max-width: 980px;
	}
}

/* 980px and below */
@media (max-width: 980px) {
	.main {
		max-width: 768px;
	}
}

/* 768px and below - Main tablet/mobile breakpoint */
@media (max-width: 768px) {
	body {
		padding: 0px;
	}

	.footer-container,
	.inner-header {
		width: 100%;
	}

	.navbar {
		display: none;
	}

	.navbar.mobile {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 10px;
	}

	nav.account ul {
		text-align: left;
	}

	nav.account ul li a {
		line-height: 2em;
		font-size: 1.25rem;
	}

	.footerlink-container {
		display: flex;
		flex-direction: column;
		gap: 10px;
		justify-content: center;
		align-items: center;
	}

	.footer-container {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.header {
		padding: 0;
	}

	.hh-left {
		width: 100%;
		height: 30vh;
	}

	.hh-right {
		width: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
		height: 70vh;
	}

	.hh-right h1 {
		font-size: 1.75rem;
	}

	.hh-right h2 {
		font-size: 1.25rem;
	}

	.inner-header {
		padding: 30px;
	}

	img.lander-logo {
		width: 40vw;
		height: auto;
	}

	.home-hero {
		flex-direction: column;
		height: 100vh;
		margin-bottom: 0;
		justify-content: flex-start;
	}

	.hero {
		text-align: center;
	}

	.hero h1 {
		font-size: 1.875rem;
	}

	.hero h2 {
		font-size: 1.25rem;
	}

	.button-row {
		gap: 15px;
		margin: 15px 0;
	}

	html {
		font-size: 1.25rem;
	}

	div.navbar-mobile>nav>details>summary.mobile-toggle {
		border: none;
		background: var(--hb-orange);
		text-transform: uppercase;
		font-weight: 600;
		color: #ffffff;
		display: flex;
		align-items: center;
	}

	div.navbar-mobile>nav>details>summary.mobile-toggle:after {
		display: none;
	}

	div.navbar-mobile>nav>details[open] summary {
		color: var(--hb-orange);
	}

	.haul-list-filter-buttons {
		display: grid;
		gap: 0;
	}

	/* .haul-list-filter-buttons button {
		flex: 1;
		margin: 5px;
	} */

	button.hf-button {
		font-size: 0.9rem;
	}

	.haul-detail-inner {
		flex-direction: column;
		gap: 10px;
	}

	.grid.centered-grid div {
		width: 100%;
	}

	[data-tooltip]::after,
	[data-tooltip]::before,
	[data-tooltip][data-placement="top"]::after,
	[data-tooltip][data-placement="top"]::before {
		white-space: pre-wrap;
		width: 200px;
		height: auto;
		font-size: 0.8rem;
		padding: 15px;
		transform: translate(-50%, 1rem) !important;
	}

	body.view-haul .haul-header {
		flex-direction: column;
		gap: 15px;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.haul-detail-inner span.req-name {
		text-align: center;
	}

	.haul-block-upper {
		flex-direction: column;
	}

	.address-display {
		font-size: 0.8rem;
	}

	.event-info {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.event-item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.animal-count {
		margin-left: 0 !important;
	}

	.event-actions {
		margin: 15px 0;
		border-radius: 6px;
		padding: 5px 15px;
		width: 100%;
		justify-content: center;
		gap: 10px;
	}

	fieldset.submit-date-fieldset {
		flex-direction: column;
	}

	.itinerary-head-miles-time-wrapper {
		flex-direction: column;
		gap: 5px;
		margin: 15px 0;
		padding: 5px 0;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

	.event-type-badge {
		display: block;
		text-align: center;
		margin-bottom: 15px;
	}

	.maplink-button {
		margin: 15px auto !important;
		display: block;
		text-align: center;
	}

	a.submit-date-form,
	a.submit-today-form {
		width: 100%;
		text-align: center;
	}

	.container {
		padding-left: 5px;
		padding-right: 5px;
	}

	.day-container,
	.events-container {
		padding: 0.5rem !important;
	}

	/* Haul logs responsive */
	.haul-logs-scrollable {
		max-height: 250px;
	}

	.haul-log-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.haul-log-entry {
		padding: 10px;
	}

	/* Processor selection responsive */
	.radio-group {
		gap: 10px;
	}

	.radio-option {
		padding: 12px;
	}

	.processor-descriptions {
		padding: 15px;
	}

	.processor-config {
		padding: 15px;
	}

	.processor-config .flex-row {
		flex-direction: column;
	}

	/* OAuth responsive */
	.oauth-actions {
		flex-direction: column;
	}

	.oauth-connected,
	.oauth-disconnected {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.disconnect-button {
		align-self: flex-start;
	}

	/* Payment Method responsive */
	.payment-method-container {
		flex-direction: column;
		gap: 1.5rem;
	}

	.credit-card {
		min-width: auto;
		margin: 0 auto;
	}

	.payment-update-form .form-row {
		flex-direction: column;
		gap: 0;
	}

	.payment-update-form .form-group {
		margin-bottom: 1rem;
	}

	/* Subscription Card responsive */
	.subscription-card {
		padding: 1.5rem;
	}

	.subscription-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.renewal-info {
		text-align: left;
		width: 100%;
	}

	.product-name {
		font-size: 1.5rem;
	}

	.date-range-selector {
		margin: auto;
	}

	.save-controls {
		margin: 15px auto;
	}

	.section-title {
		text-align: center;
		font-size: 1.2rem;
	}

	/* Payment details responsive */
	.haul-details-payments .payment-details {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.haul-details-payments .payment-amount {
		margin-left: 0;
		align-self: flex-end;
		font-size: 1.2rem;
	}

	.haul-details-payments .payment-container {
		padding: 12px;
	}

	.navbar {
		display: none;
	}

	.navbar-mobile {
		display: block;
	}

	footer {
		height: unset;
	}

	.main {
		padding: 15px;
	}

	#settings-container {
		flex-direction: column;
	}

	.hb-primary-sidebar,
	.hb-primary-container {
		width: 100%;
	}

	.flex-row {
		flex-direction: column;
	}
}

/* 480px and below - Mobile breakpoint */
@media (max-width: 480px) {
	body {
		padding: 0px;
	}

	details summary[role="button"].haul-header {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	details.haul-detail[open] {
		padding: 15px;
	}

	body.haul .haul-header {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	body.haul article.haul {
		padding: 15px;
	}

	.haul-rates {
		display: grid;
	}

	.branding h3 {
		font-size: 1.2rem;
	}

	.hb-section-box {
		padding: 0.5rem 1rem;
		margin: 0.5rem auto;
	}

	fieldset legend,
	label {
		margin-bottom: 0;
	}

	.right-button,
	.blue-button {
		display: block;
		width: 100%;
	}

	#update-dropoff-address,
	#update-pickup-address {
		padding: 5px;
		border-radius: 6px;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#update-dropoff-address p,
	#update-pickup-address p {
		text-align: center;
		font-size: 0.75rem;
	}

	#update-dropoff-address input,
	#update-pickup-address input {
		margin: 0;
		font-size: 0.75rem;
	}

	.day-btn-day {
		font-size: 0.5rem;
	}

	.itinerary-view-nav a {
		display: block;
		width: 100%;
		text-align: center;
	}

	.main {
		padding: 30px 0;
	}

	.settings-header {
		text-align: center;
	}

	.payments-view h3 {
		text-align: center;
	}

	/* Payments table responsive */
	.payments-view {
		max-width: 100%;
		padding: 0 1rem;
	}

	.payments-table-container {
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.payments-table {
		font-size: 0.8rem;
	}

	.payments-table th,
	.payments-table td {
		padding: 0.7rem 0.5rem;
	}

	.payments-table th {
		font-size: 0.7rem;
	}

	.haul-cell {
		width: auto;
	}

	.haul-link {
		font-size: 0.8rem;
	}

	.total-amount {
		font-size: 1rem;
	}

	.count-badge {
		font-size: 0.65rem;
		padding: 0.2rem 0.5rem;
	}

	.last-payment-date {
		font-size: 0.8rem;
	}

	.haul-status-badge {
		font-size: 0.65rem;
		padding: 0.2rem 0.6rem;
	}

	.expand-button {
		padding: 0.3rem;
	}

	.payment-details-table-wrapper {
		margin: 0.3rem 0.5rem 0.7rem 0.5rem;
	}

	.payment-details-table {
		font-size: 0.75rem;
	}

	.payment-details-table th,
	.payment-details-table td {
		padding: 0.5rem 0.3rem;
	}

	.payment-details-table th {
		font-size: 0.65rem;
	}

	.payment-method {
		min-width: 140px;
	}

	.payment-method-info {
		gap: 0.2rem;
	}

	.card-info {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;
	}

	.method-type {
		font-size: 0.7rem;
	}

	.manual-payment {
		font-size: 0.6rem;
		padding: 0.15rem 0.5rem;
	}

	.card-details,
	.card-exp {
		font-size: 0.7rem;
	}

	.payment-amount {
		font-size: 1rem;
	}

	.payment-date {
		font-size: 0.8rem;
		min-width: 90px;
	}

	.payment-type-badge,
	.payment-status-badge {
		font-size: 0.65rem;
		padding: 0.2rem 0.6rem;
	}

	.subscription-card {
		border-radius: 0 !important;
	}

	.itinerary-column-one {
		padding: 15px;
	}

	.itinerary-column-wrapper {
		padding: 0;
	}

	.haul-id-title {
		text-align: center;
	}

	.client-view-contact-line {
		padding: 5px 15px;
		flex-direction: column;
		gap: 5px;
	}

	.maplink-button img {
		align-self: center;
		margin-right: 10px;
	}

	/* Payment Method responsive for mobile */
	.credit-card {
		padding: 1rem;
		width: 100%;
	}

	.card-number {
		font-size: 1rem;
		letter-spacing: 1px;
	}

	.card-header {
		margin-bottom: 1.5rem;
	}

	.card-footer {
		align-items: center;
		gap: 0.5rem;
	}

	/* Subscription Card responsive for mobile */
	.subscription-card {
		padding: 1rem;
	}

	.subscription-header {
		margin-bottom: 1rem;
	}

	.subscription-header h3 {
		font-size: 1.3rem;
	}

	.product-name {
		font-size: 1.3rem;
	}

	.renewal-date {
		font-size: 1.2rem;
	}

	/* Payment details responsive for mobile */
	.haul-details-payments .payment-details {
		gap: 6px;
	}

	.haul-details-payments .card-brand,
	.haul-details-payments .card-last4,
	.haul-details-payments .card-exp {
		font-size: 0.8rem;
	}

	/* Payments table mobile responsive */
	.payments-table-container {
		margin: 0 -1rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.payments-table {
		font-size: 0.75rem;
	}

	.payments-table th,
	.payments-table td {
		padding: 0.25rem 0.5rem;
	}

	.payments-table th {
		font-size: 0.65rem;
		padding: 0.7rem 0.3rem;
	}

	.haul-cell {
		width: auto;
	}

	.haul-link {
		font-size: 0.7rem;
	}

	.total-amount {
		font-size: 0.9rem;
	}

	.count-badge {
		font-size: 0.6rem;
		padding: 0.15rem 0.4rem;
	}

	.last-payment-date {
		font-size: 0.7rem;
	}

	.haul-status-badge {
		font-size: 0.6rem;
		padding: 0.15rem 0.4rem;
	}

	.expand-button {
		padding: 0.2rem;
	}

	.expand-button svg {
		width: 12px;
		height: 12px;
	}

	.payment-details-table-wrapper {
		margin: 0.2rem 0.2rem 0.5rem 0.2rem;
	}

	.payment-details-table {
		font-size: 0.7rem;
	}

	.payment-details-table th,
	.payment-details-table td {
		padding: 0.4rem 0.2rem;
	}

	.payment-details-table th {
		font-size: 0.6rem;
	}

	.payment-method {
		min-width: 120px;
	}

	.payment-amount {
		font-size: 0.8rem;
	}

	.payment-date {
		font-size: 0.7rem;
		min-width: 75px;
	}

	.payment-type-badge,
	.payment-status-badge {
		font-size: 0.55rem;
		padding: 0.12rem 0.35rem;
		text-align: center;
		line-height: 0.75rem;
	}

	.method-type {
		font-size: 0.6rem;
	}

	.manual-payment {
		font-size: 0.5rem;
		padding: 0.08rem 0.3rem;
	}

	.card-details,
	.card-exp {
		font-size: 0.6rem;
	}

	.client-view-copy-links {
		flex-direction: column;
		gap: 15px;
	}

	.client-view-copy-links .trip-link-button {
		width: 100%;
	}

	td.total-amount {
		font-size: 0.7rem;
	}

	td.expand-cell {
		background: #ddd;
	}

	button.hf-button {
		font-size: 0.7rem;
		padding: 16px 10px;
	}

	.day-header {
		flex-direction: column;
	}
}

/* 380px and below - Very small mobile */
@media (max-width: 380px) {
	.branding h3 {
		font-size: 1.5rem;
	}
}