/* Custom frontend component layer — hand-maintained (no build step), loaded after
   tokens.css and bootstrap.css (vendor). Everything here reads from the --fp-* tokens
   in tokens.css rather than hardcoded values. */

body {
    background: var(--fp-background);
    color: var(--fp-text);
    /* Safety net: large-gutter rows (.g-4/.g-5) inside a plain .container bleed a
       few px past the viewport edge (their negative margin exceeds the container's
       default half-gutter padding). overflow-clip (not hidden/auto) clips that
       bleed without turning body into a scroll container, so position:sticky in
       .fp-navbar keeps working. */
    overflow-x: clip;
}

/* ---------- Live brand color ---------- */
/* Same root cause as the admin side: Bootstrap bakes most component colors (buttons,
   focus rings) as literal values at Sass build time — they don't read --bs-primary
   at runtime the way utility classes do. Patched by hand here. */

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.page-link {
    color: var(--bs-primary);
}

.page-link:hover {
    color: color-mix(in srgb, var(--bs-primary) 80%, black);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

/* ---------- Known Bootstrap RTL gaps (same one-time compile as the admin bundle) ---------- */

.offcanvas-header .btn-close,
.modal-header .btn-close {
    margin-left: 0;
    margin-inline-start: auto;
}

/* .input-group corner-radius removal is written for LTR (strips radius from the
   physical right side of the first child / left side of the last child) — backwards
   under RTL, where the first child's outer edge is on the right. Scoped to
   [dir="rtl"] only since the site now also serves an English/LTR locale, where
   Bootstrap's original (unpatched) behavior is already correct. */
html[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html[dir="rtl"] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---------- Navbar ---------- */

.fp-navbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    background: var(--fp-surface);
    border-bottom: 1px solid var(--fp-border);
    min-height: var(--fp-navbar-height);
}

.fp-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--fp-text);
}

.fp-navbar .navbar-brand img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: var(--fp-radius);
}

.fp-navbar .nav-link {
    font-weight: 600;
    color: var(--fp-muted);
    padding-inline: .9rem !important;
}

.fp-navbar .nav-link:hover,
.fp-navbar .nav-link.active {
    color: var(--bs-primary);
}

.fp-icon-btn {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-text);
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}

.fp-icon-btn:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.fp-navbar .navbar-collapse .fp-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .9rem;
}

.fp-cart-badge {
    position: absolute;
    inset-block-start: -.15rem;
    inset-inline-end: -.15rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: var(--fp-radius-pill);
    background: var(--bs-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fp-surface);
}

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

.fp-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
}

.fp-hero-carousel,
.fp-hero-carousel .carousel-inner,
.fp-hero-carousel .carousel-item {
    height: min(38rem, 78vh);
}

@media (max-width: 767.98px) {
    .fp-hero-carousel,
    .fp-hero-carousel .carousel-inner,
    .fp-hero-carousel .carousel-item {
        height: 56vw;
    }
}

.fp-hero-slide {
    display: block;
    height: 100%;
    background-color: var(--bs-primary);
    background-size: cover;
    background-position: center;
    position: relative;
}

.fp-hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .3) 0%, transparent 20%);
    pointer-events: none;
}

.fp-hero-fallback {
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 60%, #2b0d0d));
    padding-block: 4rem;
}

.fp-hero-fallback .fp-hero-lead {
    max-width: 34rem;
}

.fp-hero-content {
    position: relative;
    z-index: 1;
}

.fp-hero-arrow {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    backdrop-filter: blur(2px);
}

.carousel-control-prev,
.carousel-control-next {
    width: 4rem;
}

.fp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: var(--fp-radius-pill);
    background: rgba(255, 255, 255, .15);
    font-weight: 600;
    font-size: .85rem;
}

.fp-hero-title {
    font-weight: 800;
    line-height: 1.25;
}

.fp-hero-lead {
    color: rgba(255, 255, 255, .85);
    max-width: 34rem;
}

.fp-hero .btn-light {
    font-weight: 700;
}

.fp-hero-carousel .carousel-indicators [data-bs-target] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .5);
}

.fp-hero-carousel .carousel-indicators .active {
    background-color: #fff;
}

/* ---------- Stats ---------- */

.fp-stats {
    margin-block-start: -3.5rem;
    position: relative;
    z-index: 2;
}

.fp-stat-card {
    background: var(--fp-surface);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-lg);
    padding: 1.75rem 1.25rem;
    text-align: center;
    height: 100%;
}

.fp-stat-icon {
    width: 3rem;
    height: 3rem;
    margin-inline: auto;
    margin-block-end: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    font-size: 1.35rem;
}

.fp-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--fp-text);
}

.fp-stat-label {
    color: var(--fp-muted);
    font-weight: 600;
    font-size: .9rem;
}

/* ---------- Section heading ---------- */

.fp-section-eyebrow {
    color: var(--bs-primary);
    font-weight: 700;
    letter-spacing: .03em;
    font-size: .85rem;
    text-transform: uppercase;
}

.fp-section-title {
    font-weight: 800;
}

/* ---------- Orphan cards ---------- */

.fp-orphan-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
}

.fp-orphan-card:hover {
    box-shadow: var(--fp-shadow);
    transform: translateY(-.2rem);
}

.fp-orphan-photo-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(var(--bs-primary-rgb), .08);
    overflow: hidden;
}

.fp-orphan-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-orphan-photo-wrap .fp-orphan-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(var(--bs-primary-rgb), .4);
}

.fp-filter-box {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow);
    padding: 1rem;
}

.fp-orphan-body {
    padding: 1.1rem;
}

.fp-orphan-name {
    font-weight: 700;
    margin-bottom: .15rem;
}

.fp-orphan-meta {
    color: var(--fp-muted);
    font-size: .85rem;
}

.fp-orphan-family {
    position: relative;
    z-index: 2;
    font-size: .85rem;
}

.fp-orphan-family a {
    color: var(--bs-primary);
    text-decoration: none;
}

.fp-orphan-family a:hover {
    text-decoration: underline;
}

.fp-add-to-cart-btn {
    position: relative;
    z-index: 2;
}

.fp-orphan-amount {
    font-weight: 800;
    color: var(--bs-primary);
}

.fp-orphan-amount small {
    font-weight: 600;
    color: var(--fp-muted);
}

.fp-orphan-sponsor-box {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
}

/* ---------- About ---------- */

.fp-about-visual {
    position: relative;
    border-radius: var(--fp-radius-lg);
    background: linear-gradient(160deg, rgba(var(--bs-primary-rgb), .12), rgba(var(--bs-primary-rgb), .03));
    aspect-ratio: 16 / 10;
    min-height: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--fp-shadow);
}

.fp-about-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-about-visual i {
    color: var(--bs-primary);
    opacity: .9;
}

.fp-about-visual .fp-about-icon-lg {
    font-size: 9rem;
}

.fp-about-visual .fp-about-icon-float {
    position: absolute;
    background: var(--fp-surface);
    border-radius: 50%;
    box-shadow: var(--fp-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
}

.fp-about-list li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .75rem;
}

.fp-about-list i {
    color: var(--bs-primary);
    font-size: 1.15rem;
    margin-block-start: .1rem;
}

.fp-about-story {
    color: var(--fp-muted);
    font-size: 1.05rem;
    line-height: 2;
}

/* ---------- CTA ---------- */

.fp-cta {
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #2b0d0d));
    border-radius: var(--fp-radius-lg);
    color: #fff;
    overflow: hidden;
    position: relative;
}

/* ---------- Footer ---------- */

.fp-footer {
    background: #1c1414;
    color: rgba(255, 255, 255, .7);
}

.fp-footer a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

.fp-footer a:hover {
    color: #fff;
}

.fp-footer h2 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.fp-footer-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.fp-footer-social {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.fp-footer-social:hover {
    background: var(--bs-primary);
}

.fp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* ---------- Inner page header (contact, generic pages) ---------- */

.fp-page-header {
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 60%, #2b0d0d));
    color: #fff;
}

.fp-page-header .container {
    padding-block: 2rem !important;
}

.fp-page-header .fp-hero-title {
    font-size: 1.5rem;
}

.fp-page-header .fp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: var(--fp-radius-pill);
    background: rgba(255, 255, 255, .15);
    font-weight: 600;
    font-size: .75rem;
}

.fp-page-body {
    line-height: 1.9;
    color: var(--fp-text);
}

/* ---------- Mobile Side-Nav (Offcanvas) ---------- */

.fp-sidenav {
    padding: .5rem 0;
}

.fp-sidenav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-radius: var(--fp-radius);
    font-weight: 600;
    font-size: .95rem;
    color: var(--fp-text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    margin-bottom: .15rem;
}

.fp-sidenav-link i {
    font-size: 1.15rem;
    width: 1.4rem;
    text-align: center;
    color: var(--fp-muted);
    flex-shrink: 0;
    transition: color .15s ease;
}

.fp-sidenav-link:hover,
.fp-sidenav-link.active {
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
}

.fp-sidenav-link:hover i,
.fp-sidenav-link.active i {
    color: var(--bs-primary);
}

/* ---------- Fixed Mobile Bottom Bar (Full-width) ---------- */

.fp-bottom-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1040;
    width: 100%;
}

.fp-bottom-bar-container {
    background: #ffffff;
    border-top: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg) var(--fp-radius-lg) 0 0;
    display: flex;
    align-items: stretch;
    padding: .35rem .25rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
}

.fp-bottom-bar-item-wrapper {
    flex: 1;
    display: flex;
}

.fp-bottom-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--fp-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem 0;
    transition: color .15s ease, transform .15s ease;
    border-radius: var(--fp-radius);
}

.fp-bottom-bar-item i {
    font-size: 1.35rem;
    line-height: 1;
    transition: transform .15s ease;
}

.fp-bottom-bar-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 5.5rem;
}

.fp-bottom-bar-item:hover,
.fp-bottom-bar-item.active {
    color: var(--bs-primary);
}

.fp-bottom-bar-item:hover i,
.fp-bottom-bar-item.active i {
    transform: translateY(-2px);
    color: var(--bs-primary);
}

/* Cart icon badge wrapper */
.fp-bottom-bar-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fp-bottom-bar-badge {
    position: absolute;
    inset-block-start: -.35rem;
    inset-inline-end: -.5rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: #25d366; /* Green badge as seen in sample image */
    color: #ffffff;
    font-size: .6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

/* Push page content up so it's never hidden behind the fixed bottom bar */
@media (max-width: 991.98px) {
    body.fp-has-bottom-bar {
        padding-bottom: 4.5rem !important;
    }
}

/* ---------- Cart dropdown (desktop navbar + mobile bottom bar) ---------- */

.fp-cart-dropdown {
    width: 320px;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
}

.fp-cart-dropdown .cart-items-container {
    max-height: 22rem;
    overflow-y: auto;
}