/* ═══════════════════════════════════════════════════════════════════════════════
   JANMITRAM — TARGETED FIXES (non-breaking, additive only)
   Issues addressed:
   1. Inconsistent page-level padding/spacing across pages
   2. Missing font-awesome icons on some pages (fonts.css not loaded)
   3. Cart badge visibility on mobile
   4. Form inputs lack focus ring
   5. Buttons lack consistent hover feedback
   6. Page titles missing on some inner pages
   7. Flash messages inconsistent styling
   8. Mobile nav overlap with sticky header
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Consistent page wrapper ── */
.page-wrap {
    background: #f5f6fa;
    min-height: 60vh;
    padding: 40px 0 60px;
}

/* ── 2. Page title bar (used on inner pages) ── */
.page-title-bar {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 18px 0;
    margin-bottom: 32px;
}

.page-title-bar h1 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.page-title-bar .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 13px;
    color: #888;
}

.page-title-bar .breadcrumb a {
    color: #007bff;
    text-decoration: none;
}

/* ── 3. Consistent flash messages ── */
.flash-success {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    border-left: 4px solid #28a745;
    font-size: 14px;
}

.flash-error {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    border-left: 4px solid #dc3545;
    font-size: 14px;
}

.flash-info {
    background: #d1ecf1;
    color: #0c5460;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    border-left: 4px solid #17a2b8;
    font-size: 14px;
}

/* ── 4. Form input focus ring ── */
.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    outline: none;
}

/* ── 5. Button hover feedback ── */
.btn-primary:hover,
.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s;
}

/* ── 6. Cart badge — fix mobile visibility ── */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cart-nav-item {
    position: relative;
}

/* ── 7. Mobile nav — prevent overlap with sticky header ── */
@media (max-width: 991px) {
    body {
        padding-top: 0;
    }
    
    .navbar {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
}

/* ── 8. Smooth transitions globally ── */
a, button {
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* ── 9. Image lazy-load placeholder ── */
img[loading="lazy"] {
    background: #f0f0f0;
}

/* ── 10. Section heading underline accent ── */
.section-title h1::after,
.section-title h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: #28a745;
    border-radius: 2px;
    margin-top: 8px;
}

/* ── 11. Table responsiveness ── */
@media (max-width: 767px) {
    .cart-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .cart-table table {
        min-width: 600px;
    }
}

/* ── 12. Sticky summary on cart/checkout ── */
@media (min-width: 992px) {
    .cart-summary,
    .order-summary-sticky {
        position: sticky;
        top: 80px;
    }
}

/* ── Member pages consistent wrapper ── */
.member-page {
    background: #f5f6fa;
    min-height: 70vh;
    padding: 40px 0 60px;
}

.member-page-centered {
    background: #f5f6fa;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding-bottom: 60px;
}