/*
 Theme Name:   Superio Child
 Theme URI:    https://themeforest.net/item/superio-job-board-wordpress-theme/32180231
 Description:  Superio Child Theme
 Author:       ApusTheme
 Author URI:   http://apusthemes.com
 Template:     superio
 Version:      1.0.0
 Text Domain:  superio-child
*/

/*#wpadminbar {*/
/*    display: none!important;*/
/*}*/

html {
    margin-top: 0px!important;
}

/* — Fixed bottom controls bar — */
.fixed-bottom-controls {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  padding: 15px 20px;
  display: flex;
  align-items: center;
}

/* — Filter toggle button — */
.fixed-filter-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  margin-right: 1rem;
  cursor: pointer;
  color: #333;
}
.fixed-filter-btn:focus {
  outline: none;
}

/* — Reserve space so the deck isn’t hidden by the bottom bar — */

/* — Hide original ordering wrapper if desired — */
.jobs-alert-ordering-wrapper {
  display: none !important;
}


.page-template-page-jobs-php .jobs-pagination-wrapper {
    display: none;
}

/* — Tinder-style swipe deck container — */
#job-swipe-deck {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: calc(100vh - 152px);
    margin: 0 auto;
    padding-top: 1rem;
    margin-top: 1rem;
}

#job-swipe-deck .map-item,
#job-swipe-deck .default {
  display: block !important;
}

#job-swipe-deck > .job-card { 
  position: absolute; 
  /* … your existing card styling … */ 
}
#job-swipe-deck .job-card .job-card { 
  position: static; 
  /* undo the inner one */ 
}

/* — Swipe card styling — */
.job-card {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  overflow: auto;
  touch-action: pan-y;
  background-color: #f4f7fd;
}

/* only the topmost card receives pointer events */
.job-card:not(:last-child) {
  pointer-events: none;
}


.jobs-alert-ordering-wrapper {
    display: none;
}

.results-filter-wrapper {
    margin-bottom: 0px!important;
    padding-bottom: 2rem;

}

.results-filter-wrapper .title {
    display: none;
}


/* ──────────────────────────────────────────────────────────────────────────────
   Off-canvas filter sidebar
────────────────────────────────────────────────────────────────────────────── */
.filter-sidebar.offcanvas-filter-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;            /* or whatever width you prefer */
  max-width: 80%;
  background: #fff;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 9999 !important;
}

/* when “active” is toggled by the JS, it slides into view */
.filter-sidebar.offcanvas-filter-sidebar.active {
  transform: translateX(0);
}

/* dimmer overlay sits just behind the panel */
.over-dark {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9998!important;
}
.over-dark.active {
  display: block;
}


/* — Hide the old “Show Sidebar” text button if still present — */
.mobile-sidebar-btn.hidden-lg.hidden-md {
  display: none !important;
}

/* — Style your fixed bottom filter button — */
.fixed-filter-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  margin-right: 1rem;
  cursor: pointer;
  color: #333;
  position: relative;
  z-index: 1100; /* above other layers */
}

.page-job-board {
    margin-top: 0px!important;
}


/* Clamp excerpt to 4 lines */
.job-description-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Backdrop covers entire screen */
.job-description-full-modal-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Modal window */
.job-description-full-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2rem;              /* generous padding inside */
  max-width: 90%;            /* near-full width on mobile */
  width: 600px;              /* caps at 600px on desktop */
  max-height: 80vh;          /* keep it from overflowing vertically */
  overflow-y: auto;
  border-radius: 12px;       /* smooth corners */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  z-index: 9999;
}

/* Close button styling */
.job-description-modal-close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
}

/* Ensure the excerpt and link stay above the deck cards */
.job-description-excerpt,
.job-description-preview-link {
  position: relative;
  z-index: 1100;
}

.job-full-content-hidden {
  display: none !important;
}

/* Clamp excerpt to 4 lines (full‐width) */
.job-description-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-bottom: 0.5rem; /* give a little breathing room */
}

/* Style the “Read more” link */
.job-description-preview-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-weight: 500;
  color: #0063cf;
  cursor: pointer;
}

#job-swipe-deck > .job-card:not(:last-child) {
  display: none;
}

/* show modal & backdrop when “active” */
.job-description-full-modal-backdrop.active,
.job-description-full-modal.active {
  display: block;
}


/* hide hidden‐full content */
.job-full-content-hidden {
  display: none;
}

/* backdrop & modal are hidden by default */
.job-description-full-modal-backdrop,
.job-description-full-modal {
  display: none;
}

/* show when “active” */
.job-description-full-modal-backdrop.active,
.job-description-full-modal.active {
  display: block;
}

.job-description-full-modal .job-detail-detail {
    margin-bottom: 2rem;
}