/* Custom styling for the standalone Bootstrap 5 public services pages.
   Loaded only on services/public and the public product details page. */

:root {
    --svc-accent: #2196f3;
    --svc-accent-dark: #1769aa;
}

body.services-public-bs5 {
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.svc-page-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.svc-page-header h1 {
    font-weight: 700;
}
.svc-page-header p {
    color: #6c757d;
    max-width: 640px;
    margin: 0 auto;
}

/* Category tabs */
.svc-tabs .nav-link {
    color: #495057;
    border-radius: 999px;
    padding: .4rem 1rem;
}
.svc-tabs .nav-link.active {
    background: var(--svc-accent);
    color: #fff;
}

/* Plan cards */
.svc-card {
    position: relative;
    height: 100%;
    border: 1px solid #e6e9ee;
    border-radius: 1rem;
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}
.svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}
.svc-card-highlight {
    border: 2px solid var(--svc-accent);
    box-shadow: 0 16px 40px rgba(33, 150, 243, .18);
}
.svc-card .card-body {
    padding: 1.75rem;
}

.svc-price {
    font-size: 2rem;
    font-weight: 700;
}
.svc-compare {
    text-decoration: line-through;
    color: #adb5bd;
    font-size: 1.1rem;
    margin-left: .4rem;
}
.svc-desc {
    color: #6c757d;
}

/* "Most Popular" ribbon */
.svc-ribbon {
    position: absolute;
    top: 1rem;
    right: -0.35rem;
    z-index: 2;
}
.svc-ribbon span {
    display: inline-block;
    background: var(--svc-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: .35rem .8rem;
    border-radius: .25rem 0 0 .25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    white-space: nowrap;
}
.svc-ribbon span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -6px;
    border-left: 6px solid var(--svc-accent-dark);
    border-bottom: 6px solid transparent;
}

/* Make every card in a row equal height */
.svc-grid > [class*="col-"] {
    display: flex;
}

/* ---------------------------------------------------------------------------
   Compatibility rules for the shared register modal (modals/register.php),
   which still uses Bootstrap 3 class names. These keep it presentable on a
   Bootstrap 5 page until/unless it's migrated too.
   --------------------------------------------------------------------------- */
.services-public-bs5 .hidden { display: none !important; }

.services-public-bs5 .btn-default {
    color: #333;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

.services-public-bs5 .modal .close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    opacity: .6;
    margin-left: auto;
}
.services-public-bs5 .modal .close:hover { opacity: 1; }

/* BS3 .form-group had bottom spacing; BS5 dropped it. Restore inside the modal. */
.services-public-bs5 .modal .form-group { margin-bottom: 1rem; }
.services-public-bs5 .modal .control-label { font-weight: 500; margin-bottom: .25rem; display: inline-block; }

/* ---------------------------------------------------------------------------
   UX polish (2026-06-26): navbar, headers, tabs, cards, CTA, details page.
   --------------------------------------------------------------------------- */

/* Navbar: subtle shadow + comfortable height */
.services-public-bs5 .navbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.services-public-bs5 .navbar-brand { font-size: 1.15rem; }

/* Page header */
.svc-page-header h1 { letter-spacing: -.5px; }
.svc-greeting { color: #495057; font-size: 1.05rem; }

/* Tabs: clearer hover + active lift */
.svc-tabs .nav-link {
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.svc-tabs .nav-link:hover {
    background: #eef4fb;
    color: var(--svc-accent-dark);
}
.svc-tabs .nav-link.active:hover { color: #fff; }

/* Card body rhythm */
.svc-card .card-title,
.svc-card h3 { letter-spacing: -.3px; }
.svc-price { color: #1b2733; line-height: 1.1; }
.svc-price small,
.svc-price .text-muted { font-size: .9rem; font-weight: 500; }

/* Primary CTA: match accent + hover feedback */
.services-public-bs5 .btn-primary {
    background: var(--svc-accent);
    border-color: var(--svc-accent);
}
.services-public-bs5 .btn-primary:hover,
.services-public-bs5 .btn-primary:focus {
    background: var(--svc-accent-dark);
    border-color: var(--svc-accent-dark);
}
.services-public-bs5 .btn { border-radius: .6rem; }
.services-public-bs5 .btn-sm { border-radius: .5rem; }

/* Empty state */
.svc-empty-icon { font-size: 2.5rem; opacity: .35; }

/* Details page */
.services-detail-page .services_description img { border-radius: .5rem; }
.services-detail-main .card-body { padding: 2rem; }

/* FAQ accordion (details page) */
.services-public-bs5 .faq-item { border-bottom: 1px solid #e6e9ee; }
.services-public-bs5 .faq-title {
    display: block;
    padding: .85rem 0;
    font-weight: 600;
    color: #1b2733;
    text-decoration: none;
    position: relative;
}
.services-public-bs5 .faq-title::after {
    content: "\2212"; /* minus */
    position: absolute;
    right: .25rem;
    color: var(--svc-accent);
}
.services-public-bs5 .faq-title.collapsed::after { content: "\002B"; } /* plus */
.services-public-bs5 .faq-content { padding: 0 0 1rem; color: #495057; }

/* Responsive spacing */
@media (max-width: 575.98px) {
    .svc-page-header { margin-bottom: 1.75rem; }
    .svc-card .card-body { padding: 1.35rem; }
    .svc-price { font-size: 1.6rem; }
}