/* ===================================================================
   Pace Debt Management Ltd — Custom Styles
   Brand Colors:
     Primary Blue:   #0E4E8C
     Secondary Blue: #114D88
     Navy/Text:      #081A24
     Accent Orange:  #F15A2C
     Alt Orange:     #F26322
     Light BG:       #F5F7FA
     Border Grey:    #E6EAF0
   =================================================================== */

:root {
    --pace-blue: #0E4E8C;
    --pace-blue-dark: #114D88;
    --navy: #081A24;
    --accent-orange: #F15A2C;
    --accent-orange-hover: #F26322;
    --light-bg: #F5F7FA;
    --border-grey: #E6EAF0;
}

/* --- Global --- */

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--navy);
}

a {
    color: var(--pace-blue);
}

a:hover {
    color: var(--pace-blue-dark);
}

/* --- Brand Utility Classes --- */

.bg-pace-blue {
    background-color: var(--pace-blue) !important;
}

.bg-navy {
    background-color: var(--navy) !important;
}

.bg-light-section {
    background-color: var(--light-bg) !important;
}

.text-pace-blue {
    color: var(--pace-blue) !important;
}

.text-navy {
    color: var(--navy) !important;
}

.text-accent-orange {
    color: var(--accent-orange) !important;
}

.text-light-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Buttons --- */

.btn-pace-blue {
    background-color: var(--pace-blue);
    border-color: var(--pace-blue);
    color: #fff;
}

.btn-pace-blue:hover,
.btn-pace-blue:focus {
    background-color: var(--pace-blue-dark);
    border-color: var(--pace-blue-dark);
    color: #fff;
}

.btn-accent-orange {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

.btn-accent-orange:hover,
.btn-accent-orange:focus {
    background-color: var(--accent-orange-hover);
    border-color: var(--accent-orange-hover);
    color: #fff;
}

.btn-outline-pace-blue {
    border-color: var(--pace-blue);
    color: var(--pace-blue);
}

.btn-outline-pace-blue:hover,
.btn-outline-pace-blue:focus {
    background-color: var(--pace-blue);
    border-color: var(--pace-blue);
    color: #fff;
}

/* --- Navbar --- */

.navbar-brand img {
    height: 40px;
    width: auto;
    background-color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
}

.brand-text {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #fff;
}

.navbar-dark.bg-pace-blue .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    transition: color 0.2s;
}

.navbar-dark.bg-pace-blue .navbar-nav .nav-link:hover,
.navbar-dark.bg-pace-blue .navbar-nav .nav-link.active {
    color: #fff;
}

/* --- Hero Section --- */

.hero-section {
    background: linear-gradient(135deg, var(--pace-blue) 0%, var(--navy) 100%);
    padding: 4rem 0;
}

/* --- Page Headers --- */

.page-header {
    background: linear-gradient(135deg, var(--pace-blue) 0%, var(--pace-blue-dark) 100%);
}

/* --- Service Cards --- */

.service-card {
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* --- Step Numbers --- */

.step-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-orange);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* --- Process Step Circle (How It Works page) --- */

.process-step-circle {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pace-blue);
    color: #fff;
    border-radius: 50%;
    margin: 0 auto;
}

.process-step-num {
    font-size: 1.5rem;
    font-weight: 700;
}

/* --- Trust Blocks --- */

.trust-block {
    padding: 1.5rem 1rem;
}

/* --- Cards --- */

.card {
    border-radius: 8px;
}

/* --- Footer --- */

.footer-logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-link:hover {
    color: #fff !important;
}

/* --- Mobile Sticky Actions --- */

.mobile-sticky-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    display: flex;
    gap: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.mobile-sticky-actions .btn {
    flex: 1;
    border-radius: 0;
    padding: 12px;
    font-weight: 600;
}

/* Add bottom padding to body on mobile so content isn't hidden behind sticky bar */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 56px;
    }
}

/* Hide mobile sticky on desktop */
@media (min-width: 992px) {
    .mobile-sticky-actions {
        display: none !important;
    }
}

/* --- Breadcrumbs --- */

.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* --- Form Enhancements --- */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--pace-blue);
    box-shadow: 0 0 0 0.2rem rgba(14, 78, 140, 0.25);
}

.form-check-input:checked {
    background-color: var(--pace-blue);
    border-color: var(--pace-blue);
}

/* --- Alerts --- */

.alert-success {
    border-left: 4px solid #198754;
}

.alert-danger {
    border-left: 4px solid #dc3545;
}

/* --- Consultation Form Submit Button --- */

@media (max-width: 575.98px) {
    #consultationForm .btn-lg {
        width: 100%;
    }
}

/* --- Smooth scroll --- */

html {
    scroll-behavior: smooth;
}

/* --- Selection color --- */

::selection {
    background-color: var(--pace-blue);
    color: #fff;
}