/* ================================================================
   Hani's Playground — Premium theme override
   Deep forest green + muted gold, matching the logo.

   This file is loaded AFTER style.css and enhancements.css so it
   wins on specificity for any repeated selector. Delete this file
   to fall back to the original coral theme.

   Palette (from the logo):
     --brand-green      #0D3530   deep forest green (primary)
     --brand-green-hi   #164740   slightly lighter, for hover
     --brand-green-lo   #0A2925   darker, for pressed/focus
     --brand-gold       #D98115   warm gold (accent, sparingly)
     --brand-gold-lo    #B26810   deeper gold
     --brand-cream      #FAF8F3   warm off-white (section backgrounds)
     --brand-cream-2    #F2EDDF   slightly deeper cream (subtle bg contrast)
     --brand-ink        #1F1F1D   near-black for headings
     --brand-body       #4A4A45   warm charcoal for body text
   ================================================================ */

:root {
	--brand-green: #0D3530;
	--brand-green-hi: #164740;
	--brand-green-lo: #0A2925;
	--brand-gold: #D98115;
	--brand-gold-lo: #B26810;
	--brand-cream: #FAF8F3;
	--brand-cream-2: #F2EDDF;
	--brand-ink: #1F1F1D;
	--brand-body: #4A4A45;
}

/* =====================================================
   1. Coral colour overrides (from style.css)
   ===================================================== */

/* --- Text colour (uppercase eyebrow labels: "OUR SERVICES", "AFFORDABLE RATES" etc) --- */
.text-primary,
p.text-primary,
.text-primary-hover:hover {
	color: var(--brand-green) !important;
}

/* --- Buttons --- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
	background: var(--brand-green) !important;
	border-color: var(--brand-green) !important;
	color: #fff !important;
	transition: all 0.25s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover {
	background: var(--brand-green-hi) !important;
	border-color: var(--brand-green-hi) !important;
	box-shadow: 0 6px 18px rgba(13, 53, 48, 0.22);
	transform: translateY(-1px);
}
.btn-outline-primary {
	color: var(--brand-green) !important;
	border-color: var(--brand-green) !important;
	background: transparent !important;
}
.btn-outline-primary:hover {
	background: var(--brand-green) !important;
	color: #fff !important;
}

/* --- Headings & links using coral --- */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
	color: var(--brand-green-hi);
}

/* --- Phone / contact links in the FAQ sidebar --- */
.content a[href^="tel:"],
.content a[href^="mailto:"] {
	color: var(--brand-green) !important;
	border-bottom-color: var(--brand-green) !important;
}
.content a[href^="tel:"]:hover,
.content a[href^="mailto:"]:hover {
	color: var(--brand-green-hi) !important;
}

/* --- Colored-box (the small icon boxes in "What we do" cards) --- */
.colored-box {
	color: var(--brand-green) !important;
	border-color: var(--brand-green) !important;
}
.service-item .colored-box {
	color: var(--brand-green) !important;
	border: 2px solid var(--brand-green) !important;
}
.service-item .block:hover .colored-box,
.service-item:hover .colored-box {
	background-color: var(--brand-green) !important;
	color: #fff !important;
}

/* --- Navbar active link --- */
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link.active,
.navbar .nav-item.active .nav-link {
	color: var(--brand-green) !important;
}

/* --- FAQ accordion active/expanded state --- */
.accordion-button:not(.collapsed),
.accordion-button.active {
	color: var(--brand-green) !important;
}
.accordion-button:focus {
	box-shadow: none !important;
	border-color: var(--brand-green) !important;
}

/* --- Section titles that use coral colour rule --- */
.section-title h1 span,
.section-title h2 span,
.hero-title span {
	color: var(--brand-green);
}

/* --- The "loan-steps" (Get Started In Just 3 Easy Steps) step-number circles --- */
.loan-steps .step-number,
.step-item .step-number {
	background: var(--brand-green) !important;
	color: #fff !important;
}

/* --- Any inline SVG that uses the coral fill (decorative shapes) --- */
.svg-primary,
.text-primary svg,
svg.text-primary {
	color: var(--brand-green) !important;
	fill: var(--brand-green) !important;
}

/* =====================================================
   2. Backgrounds: warmer, more premium
   ===================================================== */

/* Body background - very subtle warm tint */
body {
	background: #FDFBF7;
	color: var(--brand-body);
}

/* The .bg-tertiary sections (used a lot for "How it works", location, etc)
   Change from cool light grey to warm cream */
.bg-tertiary,
section.bg-tertiary {
	background: var(--brand-cream) !important;
}

/* Sections that were pure white - keep white but use the cream on alternates
   For the pricing section and FAQ specifically */
.homepage_tab,
section.homepage_tab {
	background: var(--brand-cream) !important;
}

/* =====================================================
   3. Typography refinement for premium feel
   ===================================================== */

/* Headings feel more premium with tighter letter-spacing and warmer black */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	color: var(--brand-ink);
	letter-spacing: -0.01em;
}
h1, .h1 {
	letter-spacing: -0.02em;
	font-weight: 700;
}

/* The eyebrow labels ("OUR SERVICES" etc) — refined spacing */
.text-primary.text-uppercase {
	letter-spacing: 0.14em !important;
	font-size: 0.78rem !important;
}

/* =====================================================
   4. Refined coral-to-gold for premium accent moments only
   ===================================================== */

/* The "Most Popular" badge on the pricing card: use gold, not green
   (gold-on-green feels more premium than green-on-green) */
.pricing-card-badge {
	background: var(--brand-gold) !important;
	color: #fff !important;
	letter-spacing: 0.08em;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(217, 129, 21, 0.25);
}

/* The featured pricing card border - subtle gold not harsh green */
.pricing-card-featured {
	border-color: var(--brand-gold) !important;
	box-shadow: 0 10px 32px rgba(13, 53, 48, 0.08) !important;
}
.pricing-card-featured:hover {
	border-color: var(--brand-gold) !important;
	box-shadow: 0 14px 40px rgba(13, 53, 48, 0.12) !important;
}

/* Pricing card labels (HALF DAY, FULL DAY, MONTHLY PLAN) - green */
.pricing-card-label {
	color: var(--brand-green) !important;
	letter-spacing: 0.14em;
}

/* Pricing card bullet dots — gold, not coral */
.pricing-card-list li::before {
	background: var(--brand-gold) !important;
}

/* Why Choose Hani's list dots — green */
.why-list li::before {
	background: var(--brand-green) !important;
}

/* =====================================================
   5. Cards — softer, more premium shadows
   ===================================================== */

.pricing-card {
	box-shadow: 0 4px 20px rgba(13, 53, 48, 0.06);
	border: 1px solid rgba(13, 53, 48, 0.08) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 40px rgba(13, 53, 48, 0.10);
}

.play-area-card {
	box-shadow: 0 4px 20px rgba(13, 53, 48, 0.06);
	border: 1px solid rgba(13, 53, 48, 0.06);
}
.play-area-card:hover {
	box-shadow: 0 12px 32px rgba(13, 53, 48, 0.10);
}

/* Service cards in "What we do" - subtle border for definition */
.service-item .block {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	padding: 1.5rem 1.25rem;
	border-radius: 8px;
}
.service-item .block:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(13, 53, 48, 0.08);
}

/* =====================================================
   6. Hero: cleaner underline swoosh
   Replace the coral hand-drawn swoosh under "Doggy" with a
   more refined thin gold line
   ===================================================== */

.hero-title-underline,
.hero .banner-title span,
.banner h1 span[style*="border-bottom"] {
	border-bottom-color: var(--brand-gold) !important;
}

/* Some templates use a background-image for the swoosh */
.text-underline-primary,
.hero h1 .underline {
	background-image: linear-gradient(transparent 82%, var(--brand-gold) 82%, var(--brand-gold) 92%, transparent 92%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* =====================================================
   7. Footer polish
   ===================================================== */

footer.bg-tertiary,
footer .bg-tertiary,
.footer {
	background: var(--brand-cream-2) !important;
	color: var(--brand-body);
}
footer a,
.footer a {
	color: var(--brand-body);
}
footer a:hover,
.footer a:hover {
	color: var(--brand-green);
}
footer h4, footer h5, footer h6,
.footer h4, .footer h5, .footer h6 {
	color: var(--brand-ink);
}

/* Social icons in footer */
footer .list-inline-item a,
.footer .list-inline-item a {
	color: var(--brand-green) !important;
	transition: color 0.2s ease;
}
footer .list-inline-item a:hover,
.footer .list-inline-item a:hover {
	color: var(--brand-gold) !important;
}

/* =====================================================
   8. Contact form / register form refinements
   ===================================================== */

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--brand-green) !important;
	box-shadow: 0 0 0 0.15rem rgba(13, 53, 48, 0.12) !important;
}

/* Multi-step registration form step buttons and indicators */
.reg-btn-radio input:checked + label,
.reg-btn-radio label.active {
	background: var(--brand-green) !important;
	border-color: var(--brand-green) !important;
	color: #fff !important;
}
.reg-btn-radio label:hover {
	border-color: var(--brand-green) !important;
}

.reg-progress-dot.active {
	background: var(--brand-green) !important;
}
.reg-progress-dot.done {
	background: var(--brand-gold) !important;
}

/* Reg success check icon */
.reg-success .icon {
	background: var(--brand-green) !important;
}

/* Calculator on services page */
.price-calc-tabs button.active,
.price-calc button.active {
	background: var(--brand-green) !important;
	color: #fff !important;
	border-color: var(--brand-green) !important;
}
.price-calc button:hover:not(.active) {
	border-color: var(--brand-green) !important;
}
.price-calc-total {
	background: linear-gradient(135deg, #FAF8F3 0%, #F2EDDF 100%) !important;
	border: 1px solid rgba(217, 129, 21, 0.2) !important;
}
.price-calc-total-label {
	color: var(--brand-green) !important;
}
.price-calc-total-amount {
	color: var(--brand-green) !important;
}

/* =====================================================
   9. Timeline (Day in the life)
   ===================================================== */
.timeline-circle {
	border-color: var(--brand-green) !important;
	color: var(--brand-green) !important;
}
.timeline-time {
	color: var(--brand-gold) !important;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.timeline-line,
.timeline::before {
	background: var(--brand-green) !important;
	opacity: 0.3;
}

/* =====================================================
   10. Miscellaneous refinements
   ===================================================== */

/* Any bordered element with coral border */
.border-primary {
	border-color: var(--brand-green) !important;
}

/* "Contact Us" button in navbar - make it feel special with green */
.navbar .btn,
header .btn {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.navbar .btn:hover,
header .btn:hover {
	background: var(--brand-green-hi);
	border-color: var(--brand-green-hi);
	color: #fff;
}

/* Cursor - subtle green highlight for text selection */
::selection {
	background: var(--brand-green);
	color: #fff;
}
::-moz-selection {
	background: var(--brand-green);
	color: #fff;
}

/* =====================================================
   10b. Build progress tracker (home page only, top of page)
   ===================================================== */
.build-progress {
	background: var(--brand-cream-2);
	padding: 2.25rem 0 2rem;
}
.build-progress-head {
	text-align: center;
	margin-bottom: 1.75rem;
}
.build-progress-kicker {
	color: var(--brand-gold);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
	margin-bottom: 0.35rem;
}
.build-progress-eta {
	color: var(--brand-green);
	font-size: 1.05rem;
	font-weight: 500;
}
.build-progress-eta strong {
	color: var(--brand-green);
	font-weight: 800;
}
.build-progress-track {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.25rem;
}
.build-progress-line {
	position: absolute;
	top: 24px;
	left: 24px;
	right: 24px;
	height: 4px;
	background: rgba(13, 53, 48, 0.12);
	border-radius: 999px;
	z-index: 0;
}
.build-progress-line-fill {
	height: 100%;
	background: var(--brand-green);
	border-radius: 999px;
	transition: width 0.4s ease;
}
.build-progress-step {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.55rem;
}
.build-progress-dot {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand-cream-2);
	border: 3px solid rgba(13, 53, 48, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	color: rgba(13, 53, 48, 0.4);
}
.build-progress-step.is-done .build-progress-dot {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: var(--brand-cream);
	font-size: 1.1rem;
}
.build-progress-step.is-current .build-progress-dot {
	background: var(--brand-gold);
	border-color: var(--brand-gold);
	color: var(--brand-green);
	box-shadow: 0 0 0 6px rgba(217, 129, 21, 0.2);
	animation: build-progress-pulse 1.8s ease-in-out infinite;
}
.build-progress-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--brand-body);
}
.build-progress-step.is-done .build-progress-label,
.build-progress-step.is-current .build-progress-label {
	color: var(--brand-green);
}
@keyframes build-progress-pulse {
	0%, 100% { box-shadow: 0 0 0 6px rgba(217, 129, 21, 0.2); }
	50% { box-shadow: 0 0 0 10px rgba(217, 129, 21, 0.12); }
}
@media (max-width: 640px) {
	.build-progress {
		padding: 1.75rem 0;
	}
	.build-progress-eta {
		font-size: 0.92rem;
	}
	.build-progress-line {
		top: 20px;
		left: 20px;
		right: 20px;
	}
	.build-progress-dot {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}
	.build-progress-label {
		font-size: 0.68rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.build-progress-step.is-current .build-progress-dot {
		animation: none;
	}
}

/* =====================================================
   11. Soft launch banner (top-of-page announcement strip)
   ===================================================== */
.soft-launch-banner {
	background: var(--brand-green);
	color: var(--brand-cream);
	font-size: 0.9rem;
	line-height: 1.5;
	padding: 0.7rem 0;
	position: relative;
	z-index: 1050;
	border-bottom: 1px solid rgba(217, 129, 21, 0.35);
}
.soft-launch-banner-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
}
.soft-launch-banner-text {
	flex: 0 1 auto;
	text-align: center;
}
.soft-launch-banner-icon {
	display: inline-block;
	margin-right: 0.25rem;
	font-size: 1rem;
	vertical-align: -1px;
}
.soft-launch-banner-text strong {
	color: var(--brand-gold);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.soft-launch-banner-link {
	color: var(--brand-cream) !important;
	text-decoration: underline;
	text-decoration-color: rgba(250, 248, 243, 0.4);
	text-underline-offset: 3px;
	font-weight: 500;
	transition: text-decoration-color 0.2s ease;
}
.soft-launch-banner-link:hover {
	color: var(--brand-gold) !important;
	text-decoration-color: var(--brand-gold);
}
.soft-launch-banner-offer {
	color: var(--brand-gold);
	font-weight: 700;
}
.soft-launch-banner-strike {
	text-decoration: line-through;
	opacity: 0.55;
	font-weight: 500;
}
.soft-launch-banner-cta {
	flex: 0 0 auto;
	background: var(--brand-gold);
	color: var(--brand-green) !important;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	transition: background 0.2s ease, transform 0.15s ease;
}
.soft-launch-banner-cta:hover {
	background: #eda03a;
	color: var(--brand-green) !important;
	transform: translateY(-1px);
}
.soft-launch-banner-close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--brand-cream);
	opacity: 0.6;
	cursor: pointer;
	padding: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.soft-launch-banner-close:hover {
	opacity: 1;
	background: rgba(250, 248, 243, 0.1);
}
.soft-launch-banner.is-dismissed {
	display: none;
}

/* Mobile: stack layout with smaller text */
@media (max-width: 640px) {
	.soft-launch-banner {
		font-size: 0.82rem;
		padding: 0.6rem 0;
	}
	.soft-launch-banner-inner {
		padding: 0 2.5rem 0 1rem;
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
	.soft-launch-banner-close {
		right: 0.4rem;
		padding: 0.3rem;
	}
	.soft-launch-banner-cta {
		font-size: 0.8rem;
		padding: 0.35rem 0.9rem;
	}
}

/* =====================================================
   12. Navbar logo (wordmark version)
   The old logo was a square. The new logo is a wide wordmark
   (~7.5:1). Sized so it reads clearly without overwhelming the nav.
   ===================================================== */
.navbar-brand .navbar-logo {
	height: 42px;
	width: auto;
	max-width: 260px;
	display: block;
	transition: opacity 0.2s ease;
}
.navbar-brand:hover .navbar-logo {
	opacity: 0.85;
}

/* Mobile: slightly smaller so nav toggler + logo fit comfortably */
@media (max-width: 767px) {
	.navbar-brand .navbar-logo {
		height: 34px;
		max-width: 210px;
	}
}

/* Very small screens */
@media (max-width: 380px) {
	.navbar-brand .navbar-logo {
		height: 28px;
		max-width: 175px;
	}
}

/* Button hover "fill" effect: the template used a bright off-brand green.
   Use the brand's slightly-lighter green so hover and tap stay on-brand. */
.btn::after {
	background-color: var(--brand-green-hi) !important;
}
.btn-outline-primary::after {
	background-color: var(--brand-green) !important;
}

/* Secondary (outline) buttons, e.g. "Register another dog" */
.btn-outline-primary {
	background: #fff !important;
	color: var(--brand-green) !important;
	border: 2px solid var(--brand-green) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	color: #fff !important;
}

/* Services page rate sections (was an inline 65px padding that squeezed text on phones) */
.rates-section { padding: 65px 0; }
@media (max-width: 767px) { .rates-section { padding: 40px 0; } }

/* Opening Special reminder under the price calculator total */
.price-calc-special {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--brand-gold-lo);
}

/* Remaining template coral, switched to brand colours */
a { color: var(--brand-green); }
.content a { border-bottom-color: var(--brand-green); }
.loan-steps .step-item .count { background-color: var(--brand-gold) !important; color: #fff !important; }
.loan-steps .step-item::before { border-color: rgba(217, 129, 21, 0.5) !important; }
.navigation .nav-item .nav-link::before { background-color: var(--brand-gold) !important; }
.navigation .nav-item:hover .nav-link,
.navigation .dropdown-item:hover,
.navigation .dropdown-item:focus,
.navigation .dropdown-item.active,
.navigation .dropdown-item:active { color: var(--brand-green) !important; }
.footer-widget ul li a:hover,
.card-social a:hover,
.text-black a:hover, a.text-black:hover,
.page-header .breadcrumbs a:hover { color: var(--brand-gold) !important; }
.content ul:not(.nav) li::before,
.content.check-list ul li::before { color: var(--brand-gold); }
.icon-box-item .icon { color: #fff; background-color: var(--brand-green); }
.difference-of-us-item:nth-child(even) .icon { color: var(--brand-gold); }
.slick-arrow:hover { background: var(--brand-green); }

/* Bigger tap targets for footer links on phones */
@media (max-width: 767px) {
	.footer-widget ul li a { display: inline-block; padding: 4px 0; }
}

/* Online booking "coming soon" state (see HP_BOOKING_OPEN in js/enhancements.js) */
.btn.is-soon,
.btn.is-soon:hover,
.btn.is-soon:focus {
	background: #E9E6DE !important;
	border-color: #E9E6DE !important;
	color: #8C887E !important;
	cursor: not-allowed;
	box-shadow: none !important;
	transform: none !important;
}
.btn.is-soon::after { display: none !important; }
.nav-soon { color: #9A968C !important; }
.soon-pill {
	display: inline-block;
	background: var(--brand-gold);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
	margin-left: 3px;
	vertical-align: 2px;
}

/* Registration success: Opening Special confirmation */
.reg-special-msg {
	max-width: 460px;
	margin: 1.5rem auto 0;
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	background: #FDF3E4;
	border: 1px solid rgba(217, 129, 21, 0.35);
	color: var(--brand-body);
	font-size: 0.95rem;
}
.reg-special-msg strong { color: var(--brand-green); }