/* =====================================================
   Custom styles - ISP Mikrotik Billing
   Add module-specific styling here as you build pages.
   ===================================================== */

body {
    background-color: #f4f6f9;
}

#sidebar .nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

#sidebar .nav-link:hover,
#sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.card {
    border: none;
    box-shadow: 0 0 0.875rem 0 rgba(33, 37, 41, 0.05);
}

/* Printable invoices/receipts: hide chrome, keep only the .print-area */
@media print {
    #sidebar, .navbar, .no-print {
        display: none !important;
    }
    #page-content {
        width: 100% !important;
        margin: 0 !important;
    }
    main.container-fluid {
        padding: 0 !important;
    }
    body {
        background: #fff !important;
    }
}

/* =====================================================
   Public site (landing / packages / reviews / contact)
   ===================================================== */
.public-navbar {
    background: #0f5132;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.public-navbar .navbar-brand { font-weight: 700; color: #fff !important; }
.public-navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.public-navbar .nav-link.active,
.public-navbar .nav-link:hover { color: #fff !important; }

.hero-section {
    background: linear-gradient(135deg, #0f5132 0%, #146c43 55%, #198754 100%);
    color: #fff;
    padding: 5rem 0 6rem;
}
.hero-section h1 { font-weight: 700; }
.hero-section .btn-hero {
    background: #ffc107;
    color: #212529;
    font-weight: 600;
    border-radius: 50px;
    padding: .65rem 1.75rem;
}
.hero-section .btn-hero:hover { background: #ffca2c; color: #212529; }

.feature-icon-box {
    width: 64px; height: 64px; border-radius: 50%;
    background: #e8f5e9; color: #198754;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 1rem;
}

.section-title h2 { font-weight: 700; }
.section-title p { color: #6c757d; }

.pricing-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    padding: 1.75rem 1.5rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-top: 4px solid #198754;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-box:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.pricing-box.pricing-box-featured { border-top-color: #ffc107; }
.pricing-box .pricing-speed-badge {
    width: 56px; height: 56px; border-radius: 50%;
    background: #e8f5e9; color: #198754;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto .75rem;
}
.pricing-box .plan-badge {
    display: inline-block; font-size: .7rem; letter-spacing: .5px;
    text-transform: uppercase; background: #f1f3f5; color: #495057;
    padding: .2rem .6rem; border-radius: 50px; margin-bottom: .5rem;
}
.pricing-box .price-amount { font-size: 2rem; font-weight: 700; color: #198754; }
.pricing-box ul { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; }
.pricing-box ul li { padding: .3rem 0; font-size: .9rem; color: #495057; }
.pricing-box ul li i { color: #198754; margin-right: .4rem; }
.pricing-box .price-btn {
    display: inline-block; width: 100%; margin-top: auto;
    background: #198754; color: #fff; border: none; border-radius: 50px;
    padding: .6rem 1rem; font-weight: 600; text-decoration: none;
}
.pricing-box .price-btn:hover { background: #146c43; color: #fff; }

.review-card {
    border-radius: 18px; border: none; height: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,.06); background: #fff;
}
.review-card .avatar-circle {
    width: 48px; height: 48px; border-radius: 50%;
    background: #e8f5e9; color: #198754; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.public-footer { background: #14231d; color: #cbd5d1; padding: 3rem 0 1.5rem; }
.public-footer h5 { color: #fff; }
.public-footer a { color: #cbd5d1; text-decoration: none; }
.public-footer a:hover { color: #ffc107; }
.public-footer .footer-links-list { list-style: none; padding: 0; margin: 0; }
.public-footer .footer-links-list li { margin-bottom: .5rem; }
.public-footer .social-link {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: inline-flex; align-items: center; justify-content: center;
}
.public-footer .social-link:hover { background: #198754; color: #fff; }
.public-footer hr { border-color: rgba(255,255,255,.1); }
.visitor-counter-badge { display: inline-flex; gap: 3px; }
.visitor-digit {
    background: rgba(255,255,255,.08); color: #ffc107; font-weight: 700;
    border-radius: 4px; padding: .2rem .4rem; font-size: .8rem; min-width: 1.4rem; text-align: center;
}

#btn-back-to-top {
    position: fixed; bottom: 24px; right: 24px; display: none; z-index: 999;
    background: #198754; color: #fff; border-radius: 50%; width: 46px; height: 46px;
}

.captcha-box {
    background: #f1f3f5; border-radius: 8px; padding: .5rem 1rem;
    font-weight: 700; letter-spacing: 1px; display: inline-block;
}