/* =========================
   Service Search (clean)
   Mobile-first, RTL-safe
   ========================= */

/* ---- Page wrapper ---- */
.apply-service {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem; /* equal side padding on all screens */
}

    /* First intro card */
    .apply-service .es-card {
        margin-bottom: 1.5rem;
    }

/* Base (neutral) */
.es-search__input {
    font-size: 14px;
    padding-block: 10px; /* ONLY top/bottom */
    padding-inline: 16px; /* default, will be overridden */
}

/* RTL → icon on right, extra padding right */
html[dir="rtl"] .es-search__input {
/*    padding-inline-end: 40px;*/
    padding-inline-start: 35px;
}

html[dir="rtl"] .es-search__btn {
    right: 10px;
    left: auto;
}

/* LTR → icon on left, extra padding left */
html[dir="ltr"] .es-search__input {
    padding-inline-start: 40px;
/*    padding-inline-end: 25px;*/
}

html[dir="ltr"] .es-search__btn {
    left: 10px;
    right: auto;
}

html[dir="rtl"] .es-search__input::placeholder {
    text-align: right;
}

html[dir="ltr"] .es-search__input::placeholder {
    text-align: left;
}

.search-highlight {
    background-color: #fde8ef; 
    color: #7a143a; 
    padding: 0 0.15rem;
    border-radius: 0.25rem;
}


/* ---- Tabs (filters) ---- */
#servicesTabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 1rem 0 0; /* space above grid */
    padding: 0;
}

    #servicesTabs .nav-link {
        display: flex;
        align-items: center;
        gap: .4rem;
        padding: 8px 14px;
        font-size: 13.5px;
        color: #000;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        transition: all .2s ease-in-out;
    }

        #servicesTabs .nav-link:hover {
            color: #8A1538;
            border-color: #8A1538;
        }

        #servicesTabs .nav-link.active,
        #servicesTabs .nav-link[aria-selected="true"] {
            color: #fff;
            background: #8A1538;
            border-color: #8A1538;
        }

        #servicesTabs .nav-link i {
            line-height: 1;
            font-size: 1.05rem;
        }

/* ---- Cards grid inside each tab ---- */
.tab-content .row {
    row-gap: 15px;
}

/* ---- Service card ---- */
.service-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 18px;
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    transition: all .2s ease-in-out;
    animation: popIn .3s ease;
}

    .service-card:hover {
        border-color: #8A1538;
        transform: translateY(-2px);
    }

.service-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.icon-wrapper {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EBE4E6;
    color: #8A1538;
    font-size: 22px;
}

.service-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.service-card p {
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #8A1538;
    text-decoration: underline;
    transition: color .2s;
}

    .service-card a:hover {
        color: #5c002a;
    }

/* RTL → keep arrow pointing left */
html[dir="rtl"] .service-card a img {
    transform: scaleX(1);
}

/* LTR → flip arrow horizontally to make it point right */
html[dir="ltr"] .service-card a img {
    transform: scaleX(-1);
}


/* ---- Simple pop animation ---- */
@keyframes popIn {
    from {
        transform: scale(.98);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================
   Breakpoints
   ========================= */

/* Tablets (768–991px) */
@media (min-width:768px) and (max-width:991.98px) {
    .apply-service {
        padding: 0 2rem;
        width: 90%;
    }

    .service-card {
        padding: 20px;
    }
}

/* Desktop (≥992px) */
@media (min-width:992px) {
    .apply-service {
        padding: 0 1rem;

    }

    #servicesTabs .nav-link {
        font-size: 14px;
        padding: 9px 18px;
    }

    .service-card {
        padding: 20px;
    }
}

@media (max-width:600px)
{
    .apply-service {
        width: 100% !important;
    }
}
/* ===== DARK MODE FOR SERVICE SEARCH PAGE ===== */

html.dark-mode,
html.dark-mode body {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-card: #2d2d2d;
    --bg-input: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #b0b0b0;
    --border-primary: #444444;
    --border-secondary: #3a3a3a;
    --accent: #E6E504;
    --accent-hover: #d4d304;
    --maroon: #a82050;
    --maroon-600: #a82050;
}

    /* Page background */
    html.dark-mode .apply-service {
        background-color: var(--bg-primary);
    }

        /* Intro card at top */
        html.dark-mode .apply-service .es-card {
            background: var(--bg-card);
            border-color: var(--border-primary);
        }

            html.dark-mode .apply-service .es-card h2,
            html.dark-mode .apply-service .es-card h3,
            html.dark-mode .apply-service .es-card h4,
            html.dark-mode .apply-service .es-card h5 {
                color: var(--text-primary) !important;
            }

            html.dark-mode .apply-service .es-card p {
                color: var(--text-secondary);
            }

    /* ===== TAB BUTTONS - Black icons/text when inactive ===== */
    html.dark-mode #servicesTabs .nav-link {
        background: var(--bg-card);
        border-color: var(--border-primary);
        color: var(--text-primary) !important;
    }

        html.dark-mode #servicesTabs .nav-link i {
            color: var(--text-primary) !important;
        }

        html.dark-mode #servicesTabs .nav-link:hover {
            border-color: var(--maroon);
            color: var(--accent) !important;
        }

            html.dark-mode #servicesTabs .nav-link:hover i {
                color: var(--accent) !important;
            }

        /* Active tab - maroon background, white text */
        html.dark-mode #servicesTabs .nav-link.active,
        html.dark-mode #servicesTabs .nav-link[aria-selected="true"] {
            background: var(--maroon) !important;
            border-color: var(--maroon) !important;
            color: #fff !important;
        }

            html.dark-mode #servicesTabs .nav-link.active i,
            html.dark-mode #servicesTabs .nav-link[aria-selected="true"] i {
                color: #fff !important;
            }

    /* ===== SERVICE CARDS ===== */
    html.dark-mode .service-card {
        background: var(--bg-card);
        border-color: var(--border-primary);
    }

        html.dark-mode .service-card:hover {
            border-color: var(--maroon);
        }

        /* Service card titles - WHITE */
        html.dark-mode .service-card h3,
        html.dark-mode .service-card h4,
        html.dark-mode .service-card h5 {
            color: var(--text-primary) !important;
        }

        /* Service card descriptions - WHITE or YELLOW (choose one below) */

        /* Option 1: White descriptions */
        html.dark-mode .service-card p {
            color: var(--text-secondary) !important;
        }

    /* Option 2: Yellow descriptions (uncomment if you prefer this)
html.dark-mode .service-card p {
    color: var(--accent) !important;
}
*/

    /* ===== ICONS - Keep MAROON (same as light mode) ===== */
    html.dark-mode .icon-wrapper {
        background-color: var(--icon-wrapper-bg, #3d3d3d);
        color: var(--maroon) !important;
    }

        html.dark-mode .icon-wrapper i {
            color: var(--maroon) !important;
        }

    html.dark-mode .service-card .icon-wrapper {
        background-color: #3d3d3d;
        color: var(--maroon) !important;
    }

        html.dark-mode .service-card .icon-wrapper i {
            color: var(--maroon) !important;
        }

    /* ===== LINKS - "Get The Service" ===== */
    html.dark-mode .service-card a {
        color: var(--maroon) !important;
    }

        html.dark-mode .service-card a:hover {
            color: var(--accent) !important;
        }

    /* Search highlight in dark mode */
    html.dark-mode .search-highlight {
        background-color: rgba(230, 229, 4, 0.2);
        color: var(--accent);
    }

    /* Tab content area */
    html.dark-mode .tab-content {
        background-color: transparent;
    }

    /* Ensure text in service header is white */
    html.dark-mode .service-header h3,
    html.dark-mode .service-header h4,
    html.dark-mode .service-header h5 {
        color: var(--text-primary) !important;
    }

    /* Small text/labels */
    html.dark-mode .service-card small,
    html.dark-mode .service-card .small {
        color: var(--text-muted);
    }