/* ==========================================================================
   Khoj Juntion — shared UI extras
   ==========================================================================
   23 Sep 2026. Three things live here, all requested together and all site-
   wide, so they get one small linked stylesheet instead of being pasted into
   every layout's inline <style> block:

     1. .kj-empty-state  — the "nothing here" illustration + text block
     2. .kj-skeleton      — shimmer placeholder, put on an <img> while it loads
     3. .kj-btn-loading   — a spinner + disabled look for a button mid-submit

   A plain linked CSS file, not a Tailwind utility class, so the frozen
   public/css/tw.min.css is not involved and nothing here can silently no-op.
   Uses the same tokens as about/index.blade.php so the "premium" look reads
   as one design system, not three different ones.
   ========================================================================== */

:root {
    --kj-navy: #0F3460;
    --kj-red: #e40001;
    --kj-ink: #1f2733;
    --kj-soft: #5b6472;
    --kj-line: #e7e5e1;
    --kj-surface: #ffffff;
    --kj-ground: #faf8f5;
}
html.kj-dark {
    --kj-navy: #8fb2e0;
    --kj-ink: #ece8e1;
    --kj-soft: #a8a29a;
    --kj-line: #33302c;
    --kj-surface: #1c1a17;
    --kj-ground: #131211;
}

/* ── 1. Empty state ───────────────────────────────────────────────────── */

.kj-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 20px 60px;
}
.kj-empty-illo { margin-bottom: 18px; }
.kj-empty-illo svg { display: block; }
.kj-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--kj-navy);
    margin: 0 0 6px;
}
.kj-empty-message {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--kj-soft);
    margin: 0;
    max-width: 40ch;
}
.kj-empty-cta { margin-top: 20px; }

.kj-es-bg     { fill: var(--kj-ground); stroke: var(--kj-line); stroke-width: 1.5; }
.kj-es-card   { fill: var(--kj-surface); stroke: var(--kj-line); stroke-width: 2; }
.kj-es-line   { fill: var(--kj-line); }
.kj-es-line-strong { fill: none; stroke: var(--kj-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kj-es-glass  { fill: var(--kj-surface); stroke: var(--kj-red); stroke-width: 5; opacity: .55; }
.kj-es-handle { stroke: var(--kj-red); stroke-width: 6; stroke-linecap: round; opacity: .55; }
.kj-es-dot-bg { fill: var(--kj-surface); stroke: var(--kj-red); stroke-width: 2.5; opacity: .7; }
.kj-es-check  { fill: none; stroke: var(--kj-red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }

/* ── 2. Image skeleton (shimmer) ──────────────────────────────────────── *
 * Applied and removed by a tiny script in layouts/main.blade.php — see the
 * note there. Nothing here runs unless that class is present, so a page that
 * never gets the class behaves exactly as before.
 */

.kj-skeleton {
    position: relative;
    overflow: hidden;
    background: #eceae6;
}
html.kj-dark .kj-skeleton { background: #2a2822; }

.kj-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: kj-shimmer 1.4s ease-in-out infinite;
}
html.kj-dark .kj-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
}

@keyframes kj-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .kj-skeleton::after { animation: none; }
}

/* ── 3. Button loading state ──────────────────────────────────────────── *
 * Add data-kj-loading="Saving…" to a <button type="submit"> and the shared
 * script in layouts/main.blade.php handles the rest on that form's submit —
 * text swaps, a spinner shows, the button disables so a slow connection
 * cannot produce a double-submit. Opt-in per button on purpose: a page with
 * its own AJAX submit logic is left alone unless it asks for this.
 */

button.kj-btn-loading,
a.kj-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: .85;
}
button.kj-btn-loading::after,
a.kj-btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: kj-spin .7s linear infinite;
}
/* light_red_btn's text is dark red, not white — its spinner matches that. */
a.light_red_btn.kj-btn-loading::after,
button.light_red_btn.kj-btn-loading::after {
    border: 2.5px solid rgba(228, 0, 1, .25);
    border-top-color: var(--kj-red);
}

@keyframes kj-spin {
    to { transform: rotate(360deg); }
}

/* ── 4. Worker/listing card — hover lift ──────────────────────────────── *
 * 23 Sep 2026. The card itself (worker/_card.blade.php) is inline-styled on
 * purpose (see the note at the top of that file — tw.min.css is frozen and
 * can't be relied on for a card built after the last build). A hover state
 * is safe to add here instead: it is pure enhancement, so a page that never
 * loads this file just keeps the card exactly as it always was — flat,
 * static, fully usable.
 */
.kj-worker-card,
.kj-card-lift {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
    .kj-worker-card:hover,
    .kj-card-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(15, 52, 96, .12);
        border-color: #d8dce3 !important;
    }
}

/* ── 5. Filter sidebar — desktop polish ───────────────────────────────── *
 * Sticky on desktop so filters stay in view next to a long results list; a
 * touch more shadow/radius to read as one system with the cards. Mobile
 * drawer behaviour (position:fixed, translate) is set inline on the aside
 * in workers/ads/tourist_places index views and is untouched — this only
 * fires at the lg breakpoint, where that drawer is already switched off.
 */
@media (min-width: 1024px) {
    .kj-filter-sidebar-premium {
        position: sticky;
        top: 16px;
        border-radius: 14px !important;
        box-shadow: 0 2px 10px rgba(15, 52, 96, .06) !important;
    }
}

/* ── 6. Homepage hero search — Business / Tourist Places tab inputs ────── *
 * 23 Sep 2026. The Workers tab's dropdown is the KhojSelect widget
 * (public/css/khoj-select.css, .ks-trigger) — a plain <select> turned into a
 * proper 42px-tall box with a red focus ring. The Business and Tourist
 * Places tabs are ordinary <input type="text">, which only ever had
 * .custom_input_design (corner radius) and Tailwind's generic 1px grey
 * `border` — no matching height, no hover/focus state — so next to the
 * Workers tab they read as unfinished, not merely "a different field type".
 * This gives them the SAME height, border weight and red focus ring as
 * .ks-trigger, so all three tabs look like one widget.
 */
.kj-search-input {
    min-height: 42px;
    padding: 9px 14px !important;
    border: 1.5px solid #e5e7eb !important;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.kj-search-input:hover { border-color: #e40001 !important; }
.kj-search-input:focus {
    border-color: #e40001 !important;
    box-shadow: 0 0 0 3px rgba(228, 0, 1, .10);
    outline: none;
}

/* The "Search" button next to these inputs (and next to the Workers tab's
   KhojSelect dropdown, which also renders at 42px via .ks-trigger) had no
   explicit height of its own — its box came out of Tailwind's px-4/py-2
   plus its own line-height, which lands close to 42px but not exactly, so
   next to a field pinned at min-height:42px the two edges visibly did not
   line up. Pinning the button to the same 42px removes the guesswork. */
.kj-search-btn {
    min-height: 42px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── 7. Location pill — "detect my location", inline in the header ─────
 * 23 Sep 2026, moved twice the same day. First pass was a full-width strip
 * under the header with a permanently-open "Enter your city" row (a class
 * selector on that row beat the browser's own `[hidden]{display:none}`
 * rule). Second pass fixed the visibility bug but was still its own row,
 * which made the whole header taller on every page — reported as "header
 * height jyada lag rahi hai". Final shape: no row of its own at all. It is
 * an inline pill sitting IN the header's existing row (a small one next to
 * the logo on mobile, a slightly larger one in the auth row on desktop —
 * both `.kj-loc-pill`, see main.blade.php for exactly where), so the
 * header's height never changes on any screen size. Only the popover
 * (`.kj-loc-popover-fixed`) floats below it.
 */

.kj-loc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 0 10px;
    height: 36px;
    border-radius: 15px 0 15px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--kj-ink);
    cursor: pointer;
    transition: border-color .15s;
    max-width: 150px;
}
html.kj-dark .kj-loc-pill { background: var(--kj-surface); border-color: var(--kj-line); }
.kj-loc-pill:hover { border-color: #e40001; }
.kj-loc-pill .kj-loc-pin { color: var(--kj-red); flex-shrink: 0; }
.kj-loc-pill .kj-loc-chevron { color: var(--kj-soft); flex-shrink: 0; transition: transform .15s; }
.kj-loc-pill[aria-expanded="true"] .kj-loc-chevron { transform: rotate(180deg); }
.kj-loc-pill .kj-loc-text-target {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile copy sits next to the logo, where space is tight — icon + a short
   name only, no chevron (it still opens the same popover on tap). */
.kj-loc-pill-mobile {
    width: auto;
    max-width: 110px;
    height: 36px;
}
@media (min-width: 640px) {
    .kj-loc-pill-mobile .kj-loc-text-target { max-width: 90px; }
}

.kj-loc-popover[hidden] { display: none !important; }
.kj-loc-popover-fixed {
    position: fixed;
    top: calc(var(--kj-hdr, 64px) + 8px);
    right: 16px;
    z-index: 80;
}
@media (max-width: 480px) {
    .kj-loc-popover-fixed { left: 16px; right: 16px; }
}
.kj-loc-popover {
    width: 260px;
    max-width: calc(100vw - 32px);
    background: var(--kj-surface);
    border: 1px solid var(--kj-line);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .16);
    padding: 14px;
}
@media (max-width: 480px) {
    .kj-loc-popover { width: 100%; }
}
.kj-loc-popover label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kj-soft);
    margin-bottom: 8px;
}
.kj-loc-popover-row { display: flex; gap: 8px; }
.kj-loc-popover-row input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1.5px solid var(--kj-line);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13.5px;
    background: var(--kj-ground);
    color: var(--kj-ink);
}
.kj-loc-popover-row input:focus {
    outline: none;
    border-color: var(--kj-red);
    box-shadow: 0 0 0 3px rgba(228, 0, 1, .12);
}
.kj-loc-popover-row .main_btn { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }

/* ==========================================================================
   25 Sep 2026 — tourist place "cover" (hero) image, real fixed height
   ==========================================================================
   tourist_places/show.blade.php's big top image had `h-full max-h-[200px]
   lg:max-h-[340px] md:max-h-[340px] object-cover`. Two problems:
     - `h-full` needs a parent with an explicit height to mean anything; this
       one has none, so it did nothing.
     - `max-h-[200px]` / `max-h-[340px]` (and their lg:/md: variants) never
       existed in the frozen public/css/tw.min.css build, so they silently
       no-op — a known recurring issue in this codebase with arbitrary-value
       Tailwind classes added after the last build.
   Net effect: the box had no real height at all, so it just took whatever
   height the uploaded image's own aspect ratio produced — a tall/portrait
   cover photo made the whole card visibly taller, a short one left it
   shorter. object-fit:cover only crops correctly once a height exists.
   This gives it one. */
.kj-tp-hero-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .kj-tp-hero-img { height: 340px; }
}


/* ==========================================================================
   1 Oct 2026 — form fields that turned BLACK on phones (worker signup,
   "Locality" / address and the city list).
   ==========================================================================
   Those inputs never set a background, so they borrowed the browser's default
   "field" colour. Phone browsers with "force dark" (Samsung Internet, Brave,
   Opera, Chrome's dark-page flag) repaint that default as black, while the
   page around it stayed white — a black box with unreadable text.

   Fix: give every plain field an explicit white background and dark text.
   :where() keeps the specificity at ZERO, so any field that already has its
   own colour (a Tailwind bg-* class, the header search box, the dark-mode
   toggle) still wins and nothing existing changes. The site's own dark mode
   is a whole-page invert filter, so a white field still becomes a dark one
   there, as before. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="color"]), select, textarea) {
    background-color: #fff;
    color: #111827;
}
:where(input, select, textarea)::placeholder { color: #9ca3af; }
:where(select option) { background-color: #fff; color: #111827; }


/* ==========================================================================
   1 Oct 2026 — Hero text readable on phones.
   ==========================================================================
   On a phone the hero photo is bright right where the sentence
   "Electricians, plumbers, carpenters..." sits, and thin white text on it was
   hard to read. A soft dark layer over the photo (phones only) plus a firmer
   text shadow fixes it without changing the desktop look. */
@media (max-width: 767px) {
    .home_page_section {
        background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url(../images/banner_img_ovrly.png);
        background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), image-set(url(../images/banner_img_ovrly.webp) type("image/webp"), url(../images/banner_img_ovrly.png) type("image/png"));
    }
    .home_page_section h1,
    .home_page_section > div > p {
        text-shadow: 0 1px 4px rgba(0,0,0,.65) !important;
    }
}