/*
 * assets/search-sheet.css
 *
 * Mobile search-sheet styles, extracted verbatim from jobs/index.html.
 * Link this on any page that uses the keyword/location search-sheet markup.
 */
.search-sheet {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
    }

.search-sheet[data-open="true"] {
      display: block;
    }

.search-sheet__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(1, 34, 27, 0.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

.search-sheet__panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      background: #FFFEFB;
      animation: searchSheetUp 0.22s ease forwards;
    }

@keyframes searchSheetUp {
      from { transform: translateY(12px); opacity: 0.7; }
      to { transform: translateY(0); opacity: 1; }
    }

.search-sheet__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 22px 22px 16px;
      border-bottom: 1px solid rgba(1, 56, 44, 0.06);
      flex-shrink: 0;
    }

.search-sheet__title {
      font-size: 1.35rem;
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: #01382C;
      margin: 0;
      font-weight: 600;
    }

.search-sheet__close {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: rgba(1, 56, 44, 0.06);
      color: #01382C;
      font-size: 1.25rem;
      line-height: 1;
      flex-shrink: 0;
      border: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

.search-sheet__close:hover {
      background: rgba(1, 56, 44, 0.1);
    }

.search-sheet__body {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 18px 22px 24px;
    }

.search-sheet__input-shell {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 52px;
      border-radius: 16px;
      border: 1px solid rgba(1, 56, 44, 0.1);
      background: #fff;
      padding: 0 10px 0 14px;
      transition: border-color 0.18s, box-shadow 0.18s;
    }

.search-sheet__input-shell:focus-within {
      border-color: rgba(5, 150, 105, 0.35);
      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
    }

.search-sheet__search-icon {
      color: rgba(1, 56, 44, 0.55);
      flex-shrink: 0;
    }

.search-sheet__input {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      min-height: 52px;
      padding: 0 10px;
      border: 0;
      background: transparent;
      color: #01382C;
      font-size: 0.9375rem;
      font-weight: 500;
      outline: none;
    }

.search-sheet__input::placeholder {
      color: rgba(1, 56, 44, 0.42);
    }

.search-sheet__clear {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: rgba(1, 56, 44, 0.08);
      color: #01382C;
      font-size: 1rem;
      line-height: 1;
      border: 0;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
    }

.search-sheet__clear:hover {
      background: rgba(1, 56, 44, 0.14);
    }

.search-sheet__input-shell[data-has-value="true"] .search-sheet__clear {
      display: inline-flex;
    }

.search-sheet__suggestions {
      margin-top: 18px;
      display: grid;
      gap: 6px;
    }

.search-sheet__suggestions-label {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(1, 56, 44, 0.42);
      margin: 0 0 4px;
      padding-left: 4px;
    }

.search-sheet__suggestion {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      background: transparent;
      border: 0;
      color: #01382C;
      font-size: 0.9375rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.12s;
    }

.search-sheet__suggestion:hover,
    .search-sheet__suggestion:focus-visible {
      background: rgba(1, 56, 44, 0.04);
      outline: none;
    }

.search-sheet__suggestion-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(5, 150, 105, 0.08);
      color: #059669;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

.search-sheet__suggestion-label {
      flex: 1 1 auto;
      font-weight: 500;
      color: #01382C;
    }

.search-sheet__suggestion-meta {
      color: rgba(1, 56, 44, 0.55);
      font-size: 0.8125rem;
      font-weight: 400;
    }

.search-sheet__empty {
      padding: 24px 16px;
      text-align: center;
      color: rgba(1, 56, 44, 0.55);
      font-size: 0.875rem;
    }

.search-sheet__footer {
      display: flex;
      align-items: center;
      padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid rgba(1, 56, 44, 0.06);
      background: rgba(255, 254, 251, 0.94);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      flex-shrink: 0;
    }

.search-sheet__submit {
      flex: 1 1 0;
      min-height: 48px;
      border: 0;
      border-radius: 14px;
      background: #059669;
      color: #fff;
      font-family: inherit;
      font-size: 0.9375rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
    }

.search-sheet__submit:hover,
    .search-sheet__submit:focus-visible {
      background: #047857;
      outline: none;
    }

.search-sheet__submit:active {
      transform: scale(0.98);
    }

@media (min-width: 768px) {
  .search-sheet { display: none !important; }
}