/* Extracted from pages/services.blade.php (block 1) */
.services-page .services-filter-card,
    .services-page .services-table-card,
    .services-page .service-row.card {
        border-color: rgba(var(--primary-rgb), 0.16) !important;
    }

    .services-page .form-label,
    .services-page .category-title {
        color: var(--primary);
        font-weight: 700;
    }

    .services-page .form-label i,
    .services-page .input-group-text i,
    .services-page .service-meta i,
    .services-page .category-title i,
    .services-page .category-header-row i {
        color: var(--primary);
    }

    .services-page .input-group-text,
    .services-page .category-header-row td,
    .services-page .category-header {
        background: rgba(var(--primary-rgb), 0.06) !important;
    }

    .services-page .btn-service-clear,
    .services-page .btn-service-view {
        border-color: rgba(var(--primary-rgb), 0.35) !important;
        color: var(--primary) !important;
        background: #fff !important;
    }

    .services-page .btn-service-clear:hover,
    .services-page .btn-service-view:hover {
        color: #fff !important;
        background: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    .services-page .service-price-badge,
    .services-page .service-count-badge,
    .services-page .service-id-badge {
        background: rgba(var(--primary-rgb), 0.1) !important;
        color: var(--primary) !important;
        border: 1px solid rgba(var(--primary-rgb), 0.2);
    }

    .services-page .category-header-row td {
        color: var(--primary) !important;
    }

    .services-page .service-table td,
    .services-page .service-table th {
        white-space: nowrap;
    }

    .services-page .service-table td:nth-child(2) {
        white-space: normal;
        min-width: 260px;
    }

    .services-page .service-table td:nth-child(4) {
        color: var(--primary);
        font-weight: 800;
    }

    .services-page .services-filter-card .form-select,
    .services-page .services-filter-card .form-control,
    .services-page .services-filter-card .input-group-text,
    .services-page .services-filter-card .btn-service-clear {
        min-height: 42px;
    }

    .services-page .services-filter-card .form-select,
    .services-page .services-filter-card .form-control {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .services-page .service-search-group {
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .services-page .service-search-group .input-group-text {
        border-radius: 8px !important;
    }

    .services-page .service-search-group .form-control {
        border-radius: 8px !important;
    }

    .services-page .service-search-group .btn-service-clear {
        border-radius: 8px !important;
        min-width: 74px;
        white-space: nowrap;
    }

    html[data-theme-mode="dark"] .services-page .services-filter-card,
    html[data-theme-mode="dark"] .services-page .services-table-card,
    html[data-theme-mode="dark"] .services-page .service-row.card {
        background: #171b22 !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    html[data-theme-mode="dark"] .services-page .form-label,
    html[data-theme-mode="dark"] .services-page .category-title,
    html[data-theme-mode="dark"] .services-page .category-header-row td {
        color: #e8eef8 !important;
    }

    html[data-theme-mode="dark"] .services-page .form-label i,
    html[data-theme-mode="dark"] .services-page .input-group-text i,
    html[data-theme-mode="dark"] .services-page .service-meta i,
    html[data-theme-mode="dark"] .services-page .category-header-row i {
        color: #7db7ff !important;
    }

    html[data-theme-mode="dark"] .services-page .form-control,
    html[data-theme-mode="dark"] .services-page .form-select,
    html[data-theme-mode="dark"] .services-page .input-group-text {
        background-color: #252a3a !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        color: #f4f7fb !important;
    }

    html[data-theme-mode="dark"] .services-page .form-control::placeholder {
        color: rgba(244, 247, 251, 0.58) !important;
    }

    html[data-theme-mode="dark"] .services-page .btn-service-clear,
    html[data-theme-mode="dark"] .services-page .btn-service-view {
        background: #f8fafc !important;
        color: #0f2855 !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

    html[data-theme-mode="dark"] .services-page .btn-service-clear:hover,
    html[data-theme-mode="dark"] .services-page .btn-service-view:hover {
        background: #1e90ff !important;
        color: #ffffff !important;
        border-color: #1e90ff !important;
    }

    html[data-theme-mode="dark"] .services-page .category-header,
    html[data-theme-mode="dark"] .services-page .category-header-row td {
        background: #101722 !important;
    }

    html[data-theme-mode="dark"] .services-page .service-count-badge,
    html[data-theme-mode="dark"] .services-page .service-price-badge,
    html[data-theme-mode="dark"] .services-page .service-id-badge {
        background: rgba(30, 144, 255, 0.16) !important;
        color: #dbeafe !important;
        border-color: rgba(125, 183, 255, 0.35) !important;
    }

    html[data-theme-mode="dark"] .services-page .service-table tbody tr.service-row {
        background: #2d3049 !important;
        color: #eef4ff !important;
    }

    html[data-theme-mode="dark"] .services-page .service-table tbody tr.service-row:hover {
        background: #383c5a !important;
    }

    html[data-theme-mode="dark"] .services-page .service-table td,
    html[data-theme-mode="dark"] .services-page .service-table td.fw-medium {
        color: #eef4ff !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme-mode="dark"] .services-page .service-table td:nth-child(4) {
        color: #7db7ff !important;
    }

    .services-page .top-updated-section {
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid rgba(var(--primary-rgb), 0.16);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.015)),
            var(--bs-body-bg);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    }

    .services-page .top-updated-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }

    .services-page .top-updated-title {
        margin: 0;
        color: var(--primary);
        font-weight: 800;
        letter-spacing: 0;
    }

    .services-page .top-updated-subtitle {
        color: var(--bs-secondary-color);
        font-size: 0.875rem;
    }

    .services-page .top-updated-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .services-page .top-service-tile {
        display: flex;
        min-height: 152px;
        flex-direction: column;
        padding: 1rem;
        overflow: visible;
        border: 1px solid rgba(var(--primary-rgb), 0.18);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.02)),
            var(--bs-body-bg);
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    }

    .services-page .top-service-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .services-page .top-service-identity {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
    }

    .services-page .top-service-rank {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        color: #fff;
        background: var(--primary);
        font-weight: 800;
        font-size: 0.78rem;
    }

    .services-page .service-id-badge {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        border-radius: 8px;
        padding: 0.18rem 0.5rem;
        font-size: 0.76rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .services-page .btn-top-service-desc {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(var(--primary-rgb), 0.24);
        border-radius: 8px;
        color: var(--primary);
        background: rgba(var(--primary-rgb), 0.08);
    }

    .services-page .btn-top-service-desc:hover {
        color: #fff;
        background: var(--primary);
        border-color: var(--primary);
    }

    .services-page .top-service-name {
        display: block;
        margin-top: 0.75rem;
        overflow: visible;
        color: var(--bs-body-color);
        font-weight: 800;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .services-page .top-service-desc-preview {
        display: grid;
        gap: 0.25rem;
        margin-top: 0.6rem;
        color: var(--bs-secondary-color);
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .services-page .top-service-desc-line {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .services-page .top-service-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: auto;
        padding-top: 0.9rem;
    }

    .services-page .top-service-price {
        color: var(--primary);
        font-weight: 900;
        white-space: nowrap;
    }

    .services-page .top-service-time {
        color: var(--bs-secondary-color);
        font-size: 0.76rem;
        text-align: right;
    }

    html[data-theme-mode="dark"] .services-page .top-service-tile {
        background:
            linear-gradient(135deg, rgba(30, 144, 255, 0.16), rgba(30, 144, 255, 0.04)),
            #171b22;
        border-color: rgba(125, 183, 255, 0.22);
        box-shadow: none;
    }

    html[data-theme-mode="dark"] .services-page .top-updated-section {
        background:
            linear-gradient(135deg, rgba(30, 144, 255, 0.14), rgba(30, 144, 255, 0.03)),
            #101722;
        border-color: rgba(125, 183, 255, 0.24);
        box-shadow: none;
    }

    html[data-theme-mode="dark"] .services-page .top-updated-title,
    html[data-theme-mode="dark"] .services-page .top-service-price,
    html[data-theme-mode="dark"] .services-page .top-service-name {
        color: #e8eef8 !important;
    }

    html[data-theme-mode="dark"] .services-page .top-service-rank { background: #1e90ff; }

    html[data-theme-mode="dark"] .services-page .top-updated-subtitle,
    html[data-theme-mode="dark"] .services-page .top-service-desc-preview,
    html[data-theme-mode="dark"] .services-page .top-service-time {
        color: #b9c7dd !important;
    }

    html[data-theme-mode="dark"] .services-page .btn-top-service-desc {
        color: #dbeafe;
        background: rgba(30, 144, 255, 0.14);
        border-color: rgba(125, 183, 255, 0.3);
    }

    html[data-theme-mode="dark"] .services-page .btn-top-service-desc:hover {
        color: #fff;
        background: #1e90ff;
        border-color: #1e90ff;
    }

    .service-desc-modal .modal-content {
        overflow: hidden;
        border: 0;
        border-radius: 8px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    }

    .service-desc-modal .modal-header {
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.14);
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.02));
    }

    .service-desc-modal .modal-title {
        color: var(--primary);
        font-weight: 900;
        line-height: 1.35;
    }

    .service-desc-modal .service-description-body ul {
        margin: 0;
        padding-left: 1.1rem;
    }

    .service-desc-modal .service-description-body li + li {
        margin-top: 0.45rem;
    }

    html[data-theme-mode="dark"] .service-desc-modal .modal-content {
        background: #171b22;
        border-color: rgba(255, 255, 255, 0.14);
        color: #eef4ff;
    }

    html[data-theme-mode="dark"] .service-desc-modal .modal-header {
        background: #101722;
        border-color: rgba(255, 255, 255, 0.12);
    }

    .services-page {
        --services-navy: #0a2346;
        --services-blue: #0d6fe8;
        --services-cyan: #0aa5bd;
        --services-green: #11966e;
        --services-border: #dce7f2;
        max-width: 1400px;
    }

    .services-directory-hero {
        position: relative;
        display: flex;
        min-height: 178px;
        margin-bottom: 1rem;
        padding: 1.6rem 1.8rem;
        overflow: hidden;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        border-radius: 20px;
        background:
            radial-gradient(circle at 82% 8%, rgba(36, 210, 220, .25), transparent 30%),
            linear-gradient(120deg, #081f40 0%, #0b4d91 58%, #087d9e 100%);
        box-shadow: 0 16px 38px rgba(9, 48, 89, .18);
        color: #fff;
    }

    .services-hero-copy { position: relative; z-index: 2; max-width: 620px; }
    .services-hero-kicker { display: inline-flex; margin-bottom: .55rem; padding: .34rem .62rem; align-items: center; gap: .38rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .services-directory-hero h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.55rem); font-weight: 850; letter-spacing: -.04em; }
    .services-directory-hero p { margin: .45rem 0 0; color: rgba(255,255,255,.78); font-size: .9rem; }
    .services-hero-stats { position: relative; z-index: 2; display: grid; min-width: 470px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
    .services-hero-stat { display: flex; min-height: 76px; padding: .75rem; align-items: center; gap: .6rem; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
    .services-hero-stat > i { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.16); font-size: 1.05rem; }
    .services-hero-stat strong { display: block; color: #fff; font-size: 1.15rem; font-weight: 850; line-height: 1; }
    .services-hero-stat span { display: block; margin-top: .25rem; color: rgba(255,255,255,.7); font-size: .66rem; font-weight: 700; white-space: nowrap; }
    .services-hero-shape { position: absolute; border-radius: 50%; pointer-events: none; }
    .services-hero-shape-one { width: 210px; height: 210px; right: -65px; bottom: -125px; background: rgba(255,255,255,.09); }
    .services-hero-shape-two { width: 82px; height: 82px; top: -32px; left: 42%; border: 16px solid rgba(255,255,255,.055); }

    .services-page .top-updated-section { padding: 1.15rem; border-color: var(--services-border); border-radius: 18px; box-shadow: 0 10px 28px rgba(15, 48, 82, .08); }
    .services-page .top-updated-title { color: var(--services-navy); font-size: 1.08rem; }
    .services-page .top-service-tile { min-height: 165px; border-color: var(--services-border); border-radius: 14px; background: linear-gradient(145deg, #fff, #f6faff); box-shadow: 0 7px 18px rgba(15, 48, 82, .07); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
    .services-page .top-service-tile:hover { border-color: rgba(13,111,232,.4); box-shadow: 0 14px 28px rgba(15, 67, 119, .13); transform: translateY(-3px); }
    .services-page .top-service-rank { background: linear-gradient(135deg, var(--services-blue), var(--services-cyan)); }

    .services-page .services-filter-card { overflow: hidden; border: 1px solid var(--services-border) !important; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(15, 48, 82, .08); }
    .services-page .services-filter-card .card-body { padding: 1.15rem; }
    .services-filter-heading { display: flex; margin-bottom: 1rem; padding-bottom: .9rem; align-items: center; gap: .7rem; border-bottom: 1px solid #e7eef5; }
    .services-filter-icon { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 12px; background: #e9f3ff; color: var(--services-blue); font-size: 1.1rem; }
    .services-filter-heading h2 { margin: 0; color: var(--services-navy); font-size: .95rem; font-weight: 850; }
    .services-filter-heading p { margin: .18rem 0 0; color: #71849a; font-size: .72rem; }
    .services-page .services-filter-card .form-label { margin-bottom: .42rem !important; color: #425b73; font-size: .75rem; }
    .services-page .services-filter-card .form-control,
    .services-page .services-filter-card .form-select,
    .services-page .services-filter-card .input-group-text,
    .services-page .services-filter-card .btn-service-clear { min-height: 45px; border-color: var(--services-border) !important; border-radius: 11px !important; background-color: #f8fbfe !important; }
    .services-page .services-filter-card .form-control:focus,
    .services-page .services-filter-card .form-select:focus { border-color: rgba(13,111,232,.45) !important; box-shadow: 0 0 0 .2rem rgba(13,111,232,.1); }

    .services-page .services-table-card { overflow: hidden; border: 1px solid var(--services-border) !important; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(15, 48, 82, .08); }
    .services-page .service-table thead th { padding: .82rem .75rem; border-bottom: 1px solid var(--services-border); background: #f3f7fb; color: #63798f; font-size: .68rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
    .services-page .service-table tbody tr.service-row { background: #fff; transition: background .18s ease, box-shadow .18s ease; }
    .services-page .service-table tbody tr.service-row:hover { background: #f7fbff; box-shadow: inset 3px 0 0 var(--services-blue); }
    .services-page .service-table td { padding: .78rem .75rem; border-color: #eaf0f6; color: #50667c; font-size: .76rem; }
    .services-page .service-table td:nth-child(2) { color: var(--services-navy); font-weight: 750; line-height: 1.45; }
    .services-page .category-header-row td { padding: .65rem .75rem; background: linear-gradient(90deg, #eaf4ff, #f7fbff) !important; color: #13558f !important; }
    .services-page .btn-service-view { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; border-radius: 9px !important; font-weight: 750; }

    .services-page .d-md-none .service-row.card { overflow: hidden; border: 1px solid var(--services-border) !important; border-radius: 16px; background: linear-gradient(145deg, #fff, #f8fbfe); box-shadow: 0 8px 22px rgba(15,48,82,.08); }
    .services-page .d-md-none .service-row .card-body { padding: 1rem; }
    .service-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
    .service-mobile-platform { display: inline-flex; min-width: 0; align-items: center; gap: .3rem; overflow: hidden; color: #6c8197; font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .service-mobile-platform i { color: var(--services-cyan); }
    .service-mobile-name { margin-top: .75rem; color: var(--services-navy); font-size: .92rem; font-weight: 800; line-height: 1.48; overflow-wrap: anywhere; word-break: break-word; }
    .service-mobile-price { margin-top: .65rem; color: var(--services-blue); font-size: 1.08rem; font-weight: 900; }
    .service-mobile-price span { color: #8193a5; font-size: .67rem; font-weight: 700; }
    .service-mobile-metrics { display: grid; margin-top: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .service-mobile-metrics > div { min-width: 0; padding: .6rem; border: 1px solid #e1eaf3; border-radius: 11px; background: #f6f9fc; }
    .service-mobile-metrics span,
    .service-mobile-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; }
    .service-mobile-metrics span { color: #8193a5; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
    .service-mobile-metrics strong { margin-top: .25rem; color: #344e67; font-size: .72rem; white-space: nowrap; }
    .service-mobile-actions { margin-top: .8rem; }

    html[data-theme-mode="dark"] .services-directory-hero { box-shadow: 0 16px 38px rgba(0,0,0,.25); }
    html[data-theme-mode="dark"] .services-page .services-filter-card,
    html[data-theme-mode="dark"] .services-page .services-table-card,
    html[data-theme-mode="dark"] .services-page .d-md-none .service-row.card { background: #111d2a !important; border-color: #2b4055 !important; }
    html[data-theme-mode="dark"] .services-filter-heading { border-color: #293c50; }
    html[data-theme-mode="dark"] .services-filter-heading h2,
    html[data-theme-mode="dark"] .service-mobile-name { color: #edf6ff; }
    html[data-theme-mode="dark"] .service-mobile-metrics > div { border-color: #2b4055; background: #172637; }
    html[data-theme-mode="dark"] .service-mobile-metrics strong { color: #dbe8f5; }

    @media (max-width: 1199.98px) {
        .services-page .top-updated-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .services-directory-hero { align-items: stretch; flex-direction: column; }
        .services-hero-stats { min-width: 0; width: 100%; }
    }

    @media (max-width: 767.98px) {
        .services-page .top-updated-section {
            display: none;
        }

        .services-page .top-updated-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .services-page .top-updated-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.75rem;
            overflow: visible;
            padding-bottom: 0;
        }

        .services-page .top-service-tile {
            min-width: 0;
        }

        .services-page { padding-inline: .7rem; }
        .services-directory-hero { min-height: auto; padding: 1.25rem; gap: 1.1rem; border-radius: 17px; }
        .services-directory-hero h1 { font-size: 1.75rem; }
        .services-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
        .services-hero-stat { min-width: 0; min-height: 70px; padding: .55rem; align-items: flex-start; flex-direction: column; gap: .4rem; }
        .services-hero-stat > i { width: 30px; height: 30px; flex-basis: 30px; }
        .services-hero-stat strong { font-size: 1rem; }
        .services-hero-stat span { overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
        .services-page .services-filter-card { border-radius: 15px; }
        .services-filter-heading { align-items: flex-start; }
        .services-page .service-search-group { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .45rem; }
        .services-page .service-search-group .btn-service-clear { grid-column: 1 / -1; width: 100%; }
        .service-mobile-name { display: block; width: 100%; max-height: none; overflow: visible; text-overflow: clip; white-space: normal; }
        .service-mobile-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .service-mobile-metrics > div:last-child { grid-column: 1 / -1; }
    }