/* =========================================================
   SISTEM SUNYI MINI SEARCH
   v3.5 MENU ENGLISH FIELD INTEGRATION
   Lightmode only.
   Compact header search, TagDiv safe.
   Portal panel safe.
========================================================= */


/* =========================================================
   01. ROOT TOKENS
========================================================= */

.ssms-wrap,
.ssms-panel {
  --ssms-bg: rgba(255,250,241,.78);
  --ssms-bg-soft: rgba(255,255,255,.62);
  --ssms-panel-bg: rgba(255,255,255,.96);

  --ssms-text: #172235;
  --ssms-muted: rgba(23,34,53,.64);
  --ssms-soft: rgba(23,34,53,.46);
  --ssms-faint: rgba(23,34,53,.34);

  --ssms-line: rgba(23,34,53,.105);
  --ssms-line-strong: rgba(23,34,53,.16);
  --ssms-line-gold: rgba(154,111,53,.30);

  --ssms-gold: #9a6f35;
  --ssms-gold-strong: #765322;
  --ssms-gold-soft: rgba(154,111,53,.105);

  --ssms-blue: #314862;
  --ssms-blue-soft: rgba(49,72,98,.075);

  --ssms-shadow: 0 18px 48px rgba(24,34,52,.12);
  --ssms-shadow-panel: 0 22px 60px rgba(24,34,52,.18);

  font-family:
    Inter,
    "Lato",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
}

.ssms-wrap {
  position: relative !important;
  z-index: 120 !important;

  width: 100% !important;
  max-width: 100% !important;
}


/* =========================================================
   02. RESET
========================================================= */

.ssms-wrap,
.ssms-wrap *,
.ssms-wrap *::before,
.ssms-wrap *::after,
.ssms-panel,
.ssms-panel *,
.ssms-panel *::before,
.ssms-panel *::after {
  box-sizing: border-box !important;
}

#td-outer-wrap .ssms-wrap,
.td-main-content-wrap .ssms-wrap,
.td-post-content .ssms-wrap,
.td-container .ssms-wrap {
  font-family:
    Inter,
    "Lato",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
}

.ssms-wrap a,
.ssms-wrap a:link,
.ssms-wrap a:visited,
.ssms-wrap a:hover,
.ssms-wrap a:active,
.ssms-panel a,
.ssms-panel a:link,
.ssms-panel a:visited,
.ssms-panel a:hover,
.ssms-panel a:active {
  text-decoration: none !important;
  box-shadow: none !important;
}

.ssms-wrap button,
.ssms-wrap input,
.ssms-panel button,
.ssms-panel input {
  font-family: inherit !important;
  box-shadow: none !important;
}


/* =========================================================
   03. SEARCH SHELL
========================================================= */

.ssms {
  position: relative !important;

  width: 100% !important;
  max-width: 520px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

.ssms-input-wrap {
  position: relative !important;
  width: 100% !important;
}


/* =========================================================
   04. INPUT
========================================================= */

.ssms-input {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  height: 38px !important;

  margin: 0 !important;
  padding: 0 44px 0 44px !important;

  border: 1px solid var(--ssms-line-gold) !important;
  border-radius: 18px !important;

  color: var(--ssms-text) !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 520 !important;
  letter-spacing: .010em !important;

  outline: none !important;

  box-shadow: 0 10px 28px rgba(24,34,52,.060) !important;

  transition:
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease,
    color .20s ease !important;
}

.ssms-input:focus {
  border-color: rgba(154,111,53,.42) !important;

  box-shadow:
    0 14px 36px rgba(24,34,52,.10),
    0 0 0 3px rgba(154,111,53,.105) !important;
}

.ssms-input::placeholder {
  color: var(--ssms-faint) !important;
  opacity: 1 !important;
}

.ssms-icon {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;

  width: 17px !important;
  height: 17px !important;

  transform: translateY(-50%) !important;

  color: var(--ssms-soft) !important;
  opacity: 1 !important;

  pointer-events: none !important;
}

.ssms-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;

  width: 26px !important;
  height: 26px !important;

  transform: translateY(-50%) !important;

  display: none;

  border: 1px solid var(--ssms-line) !important;
  border-radius: 999px !important;

  color: var(--ssms-muted) !important;
  background: var(--ssms-bg-soft) !important;

  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 520 !important;

  cursor: pointer !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease !important;
}

.ssms-clear:hover {
  color: var(--ssms-gold-strong) !important;
  border-color: rgba(154,111,53,.28) !important;
}


/* =========================================================
   05. PANEL
========================================================= */

.ssms-panel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;

  width: min(520px, calc(100vw - 24px)) !important;
  max-height: min(520px, calc(100vh - 120px)) !important;

  transform: translateY(4px) !important;

  display: none;
  overflow: hidden !important;

  border: 1px solid var(--ssms-line-gold) !important;
  border-radius: 20px !important;

  color: var(--ssms-text) !important;

  background:
    radial-gradient(circle at 12% 0%, var(--ssms-gold-soft), transparent 34%),
    radial-gradient(circle at 92% 18%, var(--ssms-blue-soft), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.70)),
    var(--ssms-panel-bg) !important;

  box-shadow: var(--ssms-shadow-panel) !important;

  z-index: 2147483646 !important;

  backdrop-filter: blur(16px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(118%) !important;

  opacity: 0 !important;

  transition:
    opacity .18s ease,
    transform .18s ease !important;
}

.ssms-panel-show {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.ssms-panel::before {
  content: "" !important;

  position: absolute !important;
  left: 26px !important;
  right: 26px !important;
  top: 0 !important;

  height: 1px !important;

  background: linear-gradient(90deg, transparent, var(--ssms-gold), transparent) !important;

  opacity: .48 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}


/* =========================================================
   06. HISTORY
========================================================= */

.ssms-history-wrap {
  padding: 13px 14px 11px !important;
  border-bottom: 1px solid var(--ssms-line) !important;
}

.ssms-history-label {
  margin: 0 0 8px !important;

  color: var(--ssms-soft) !important;

  font-size: 10.5px !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  opacity: 1 !important;
}

.ssms-history {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.ssms-history-btn {
  appearance: none !important;

  min-height: 27px !important;
  padding: 5px 9px !important;

  border: 1px solid var(--ssms-line) !important;
  border-radius: 999px !important;

  color: var(--ssms-muted) !important;
  background: var(--ssms-bg-soft) !important;

  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;

  cursor: pointer !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease !important;
}

.ssms-history-btn:hover {
  color: var(--ssms-gold-strong) !important;
  border-color: rgba(154,111,53,.28) !important;
  transform: translateY(-1px) !important;
}


/* =========================================================
   07. ADVANCED SEARCH
========================================================= */

.ssms-advanced {
  display: flex !important;
  justify-content: flex-end !important;

  padding: 8px 12px !important;

  border-bottom: 1px solid var(--ssms-line) !important;
}

.ssms-advanced-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 29px !important;
  padding: 6px 11px !important;

  border: 1px solid var(--ssms-line) !important;
  border-radius: 999px !important;

  color: var(--ssms-muted) !important;
  background: var(--ssms-bg-soft) !important;

  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;

  opacity: 1 !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease !important;
}

.ssms-advanced-btn:hover {
  color: var(--ssms-gold-strong) !important;
  border-color: rgba(154,111,53,.28) !important;
  background: var(--ssms-gold-soft) !important;
  transform: translateY(-1px) !important;
}


/* =========================================================
   08. RESULTS
========================================================= */

.ssms-results {
  max-height: 340px !important;
  overflow-y: auto !important;

  padding: 9px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(154,111,53,.42) transparent !important;
}

.ssms-results::-webkit-scrollbar {
  width: 8px !important;
}

.ssms-results::-webkit-scrollbar-track {
  background: transparent !important;
}

.ssms-results::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(154,111,53,.42) !important;
}

.ssms-item {
  position: relative !important;

  padding: 12px 12px !important;

  border: 1px solid transparent !important;
  border-radius: 15px !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease !important;
}

.ssms-item:hover {
  border-color: var(--ssms-line) !important;

  background:
    radial-gradient(circle at 88% 12%, var(--ssms-gold-soft), transparent 36%),
    var(--ssms-bg-soft) !important;

  transform: translateY(-1px) !important;
}

.ssms-item-clickable {
  cursor: pointer !important;
}

.ssms-item-clickable:hover .ssms-title {
  color: var(--ssms-gold-strong) !important;
}

.ssms-item-clickable:focus-visible {
  outline: 2px solid var(--ssms-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(154,111,53,.16) !important;
}

.ssms-title {
  color: var(--ssms-text) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1.34 !important;
  font-weight: 680 !important;
  letter-spacing: -.018em !important;

  transition:
    color .18s ease !important;
}

.ssms-meta {
  margin-top: 4px !important;

  color: var(--ssms-soft) !important;

  font-size: 10.5px !important;
  line-height: 1.3 !important;
  font-weight: 820 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;

  opacity: 1 !important;
}

.ssms-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;

  margin-top: 9px !important;
}

.ssms-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 28px !important;
  padding: 6px 10px !important;

  border: 1px solid var(--ssms-line) !important;
  border-radius: 999px !important;

  color: var(--ssms-muted) !important;
  background: var(--ssms-bg-soft) !important;

  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
  letter-spacing: .035em !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

.ssms-link:hover {
  color: var(--ssms-gold-strong) !important;
  border-color: rgba(154,111,53,.28) !important;
  background: var(--ssms-gold-soft) !important;
}


/* =========================================================
   v3.5.2 — Close Search on KBDS Popup Open
   Keep Mini Search actions in one compact row where possible.
========================================================= */
.ssms-links {
  gap: 5px !important;
  align-items: center !important;
}

.ssms-link {
  min-height: 26px !important;
  padding: 5px 8px !important;
  font-size: 10px !important;
}

.ssms-link.is-icon,
.ssms-kbds-popup {
  width: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
}

.ssms-link.is-icon {
  color: var(--ssms-gold-strong) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.ssms-kbds-popup {
  font-size: 12px !important;
}

/* =========================================================
   v3.5.2 — Close Search on KBDS Popup Open
   Scoped to Mini Search result actions only.
========================================================= */
.ssms-kbds-popup {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;

  border: 1px solid var(--ssms-line) !important;
  border-radius: 999px !important;

  color: var(--ssms-gold-strong) !important;
  background: var(--ssms-bg-soft) !important;

  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  cursor: pointer !important;
  box-shadow: none !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease !important;
}

.ssms-kbds-popup:hover,
.ssms-kbds-popup:focus-visible {
  color: var(--ssms-text) !important;
  border-color: rgba(154,111,53,.34) !important;
  background: var(--ssms-gold-soft) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}


/* =========================================================
   09. EMPTY AND HIGHLIGHT
========================================================= */

.ssms-empty {
  padding: 14px 12px !important;

  color: var(--ssms-soft) !important;

  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 520 !important;

  opacity: 1 !important;
}

.ssms-hl {
  display: inline !important;

  padding: 0 3px !important;

  border-radius: 5px !important;

  color: inherit !important;
  background: rgba(202,167,102,.24) !important;
}


/* =========================================================
   10. FOCUS
========================================================= */

.ssms-wrap a:focus-visible,
.ssms-wrap button:focus-visible,
.ssms-wrap input:focus-visible,
.ssms-panel a:focus-visible,
.ssms-panel button:focus-visible,
.ssms-panel input:focus-visible,
.ssms-advanced-btn:focus-visible {
  outline: 2px solid var(--ssms-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(154,111,53,.16) !important;
}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 640px) {
  .ssms {
    max-width: 100% !important;
  }

  .ssms-input {
    height: 44px !important;
    border-radius: 16px !important;
    font-size: 13.5px !important;
  }

  .ssms-panel {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 120px) !important;
    border-radius: 18px !important;
  }

  .ssms-results {
    max-height: 320px !important;
  }

  .ssms-title {
    font-size: 15.5px !important;
  }

  .ssms-link,
  .ssms-history-btn,
  .ssms-advanced-btn {
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .ssms-input {
    height: 42px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .ssms-icon {
    left: 14px !important;
  }
}