/* ===========================================================================
   Proman — minimal custom styles.
   Most of the UI is plain Bootstrap 5; this file only applies the brand
   palette (via Bootstrap CSS variables) and a few component accents.
   Palette: primary #0B5CAB · CTA #F97316 · trust-green #1E9E5A · ink #15243A
   =========================================================================== */

:root {
    /* Re-map Bootstrap primary to the brand blue (recolors navbar, links, etc.) */
    --bs-primary: #0B5CAB;
    --bs-primary-rgb: 11, 92, 171;
    --bs-link-color: #0B5CAB;
    --bs-link-hover-color: #084A8C;

    --brand-cta: #F97316;
    --brand-cta-dark: #EA6A0C;
    --brand-green: #1E9E5A;
    --brand-ink: #15243A;
    --brand-tint: #EAF2FB;

    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: #3a4a5a;
}

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 1rem; }
body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.01em; }

/* ---- Utility brand classes ---- */
.text-ink        { color: var(--brand-ink) !important; }
.bg-ink          { background-color: var(--brand-ink) !important; }
.text-brand-green{ color: var(--brand-green) !important; }
.text-white-75   { color: rgba(255, 255, 255, 0.82); }

/* ---- CTA button (custom Bootstrap button variant) ---- */
.btn-cta {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-cta);
    --bs-btn-border-color: var(--brand-cta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-cta-dark);
    --bs-btn-hover-border-color: var(--brand-cta-dark);
    --bs-btn-active-bg: #d65f08;
    --bs-btn-active-border-color: #d65f08;
    --bs-btn-focus-shadow-rgb: 249, 115, 22;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.28);
}

/* ---- Hero ---- */
.hero {
    background: linear-gradient(180deg, #E8F1FB 0%, #F6FAFE 55%, #ffffff 100%);
}
.hero-img { filter: drop-shadow(0 24px 36px rgba(11, 92, 171, 0.18)); }
.reviewed-badge {
    background: #E8F6EE;
    color: #137a43;
    border: 1px solid #cdeeda;
    border-radius: 50rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}
.reviewed-badge i { font-size: 1rem; }

/* ---- Price block ---- */
.price-block {
    background: #fff;
    border: 1px solid #e6edf4;
    border-radius: 0.85rem;
    padding: 0.75rem 1.1rem;
    box-shadow: 0 4px 14px rgba(21, 36, 58, 0.06);
}
.discount-badge {
    background: var(--brand-cta);
    color: #fff;
    font-weight: 800;
    border-radius: 0.5rem;
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
}
.price-old { display: block; color: #9aa7b4; text-decoration: line-through; font-size: 0.95rem; font-weight: 600; }
.price-new { display: block; color: var(--brand-ink); font-size: 1.9rem; font-weight: 800; }

/* ---- Ingredient cards ---- */
.ingredient-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-tint);
    color: var(--bs-primary);
    font-size: 1.55rem;
}
.ingredient-card, .review-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.ingredient-card:hover, .review-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(21, 36, 58, 0.12) !important; }

/* ---- Expert / author (EEAT) ---- */
.author-card { background: #fff; }
.author-photo img { width: 100%; height: 100%; object-fit: cover; }
.expert-quote {
    border-left: 4px solid var(--bs-primary);
    padding-left: 1rem;
    font-style: italic;
}
@media (max-width: 767.98px) {
    .author-photo img { max-height: 300px; }
}

/* ---- Reviews ---- */
.review-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem;
    flex-shrink: 0;
}

/* ---- FAQ ---- */
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--brand-tint);
    color: var(--bs-primary);
    box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: #cfe0f2; }
.faq-accordion .accordion-item { background: #fff; }

/* ---- Order section ---- */
.order-section { background: linear-gradient(135deg, #0B5CAB 0%, #084A8C 100%); }
.order-product { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25)); }

/* ---- Sticky buy bar (appears on scroll; navbar itself stays non-sticky) ---- */
.sticky-buy-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: #fff; border-top: 1px solid #e6edf4;
    box-shadow: 0 -6px 20px rgba(21, 36, 58, 0.12);
    transform: translateY(115%); transition: transform 0.3s ease;
}
.sticky-buy-bar.visible { transform: translateY(0); }
@media (max-width: 575.98px) {
    .sticky-buy-bar .btn { padding-left: 1rem; padding-right: 1rem; }
}