/* AI Search — Enmerkar */

/* Leave the original form flex layout mostly intact, just ensure items align */
.enmerkar-search-block form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
}

/* Override the base 600px max-width to give room for the dual button */
.enmerkar-search-block .search-input-group {
  max-width: 620px !important;
  width: 100% !important;
}

/* Make the input field take as much space as possible */
.enmerkar-search-block input.search-field {
  flex: 1 1 150px !important;
  min-width: 150px !important;
  max-width: none !important;
}

/* Dual Search Button (Looks like the Language Switcher) */
.ai-dual-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #010101 !important;
  border-radius: 0 50px 50px 0 !important; /* Exact shape: flat left, fully rounded right */
  padding: 0 10px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  /* No transition to avoid flickering */
}

.ai-dual-btn:hover {
  background: linear-gradient(to bottom, #000000, #4B0000) !important;
}

/* Inside the pill — buttons */
.ai-dual-submit, .ai-dual-ai {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Georgia', serif !important;
  font-size: 18px !important; 
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 16px 12px !important;
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Hover: golden glow */
.ai-dual-submit:hover, .ai-dual-ai:hover {
  color: #c47d2a !important;
  text-shadow: 0 0 10px rgba(196, 125, 42, 0.5), 0 0 25px rgba(196, 125, 42, 0.25) !important;
}

.ai-dual-divider {
  color: rgba(255,255,255,0.3) !important;
  font-family: inherit !important;
  font-size: 18px !important;
  user-select: none !important;
  margin: 0 !important;
}

/* Results Container */
.ai-search-results {
  max-width: 1100px !important;
  margin: 40px auto 0 !important;
  width: 100% !important;
  clear: both !important;
}

/* Loading */
.ai-loading { text-align: center !important; padding: 40px 0 !important; color: #8a7d6b !important; font-size: 15px !important; }
.ai-spinner {
  width: 34px !important; height: 34px !important; margin: 0 auto 15px !important;
  border: 3px solid rgba(196, 125, 42, 0.15) !important;
  border-top-color: #c47d2a !important;
  border-radius: 50% !important;
  animation: aispin 0.8s linear infinite !important;
}
@keyframes aispin { to { transform: rotate(360deg); } }

/* Header */
.ai-header {
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #8a7d6b !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 30px !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  padding-bottom: 15px !important;
}

/* Layout with Absolute Side Arrows on Desktop */
.ai-results-layout {
  position: relative !important;
  display: block !important;
  padding: 0 140px !important; /* Increased space to push arrows out further */
}

/* Side arrows container */
.ai-nav-side {
  position: absolute !important;
  top: 50% !important; 
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  height: auto !important;
  width: 65px !important;
}

.ai-nav-left { left: 0 !important; }
.ai-nav-right { right: 0 !important; }

.ai-cards-container {
  width: 100% !important;
}

/* Pagination arrows */
.ai-pg-circle {
  background: #fff !important;
  border: 1px solid #e3d9c8 !important;
  color: #c47d2a !important;
  width: 65px !important; height: 65px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05) !important;
}

.ai-pg-circle:hover {
  background: #c47d2a !important;
  border-color: #c47d2a !important;
  color: #fff !important;
  box-shadow: 0 5px 18px rgba(196, 125, 42, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Cards */
.ai-search-results .ai-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 30px !important;
  padding: 25px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  margin: 0 !important;
  width: 100% !important;
}

.ai-search-results .ai-card:first-child { padding-top: 0 !important; }
.ai-search-results .ai-card:last-child { border-bottom: none !important; }

.ai-search-results .ai-thumb-wrap {
  flex-shrink: 0 !important;
  width: 180px !important;
  height: 180px !important;
  min-width: 180px !important;
  min-height: 180px !important;
  max-width: 180px !important;
  max-height: 180px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  margin: 0 !important;
  display: block !important;
}

.ai-search-results .ai-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
  max-width: none !important;
}

.ai-search-results .ai-thumb-wrap:hover .ai-thumb {
  transform: scale(1.08) !important;
}

.ai-card-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.ai-title {
  display: block !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #7a2b25 !important; 
  text-decoration: none !important;
  margin-bottom: 10px !important;
  line-height: 1.35 !important;
  transition: color 0.2s !important;
}
.ai-title:hover { text-decoration: underline !important; color: #a63932 !important; }

.ai-text {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #333 !important;
  margin: 0 0 15px !important;
  font-style: normal !important; 
}

.ai-link {
  font-size: 13px !important;
  color: #b0956e !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: color 0.2s !important;
}
.ai-link:hover { color: #c47d2a !important; }

/* Page indicator bottom row */
.ai-pagination-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 25px !important;
  margin-top: 40px !important;
  width: 100% !important;
}

.ai-page-indicator {
  font-size: 14px !important;
  color: #bfae9a !important;
  font-weight: 600 !important;
}

/* Messages */
.ai-msg { text-align: center !important; padding: 25px !important; color: #8a7d6b !important; font-size: 15px !important; }
.ai-err { color: #a85a32 !important; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .enmerkar-search-block form {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .enmerkar-search-block input.search-field { width: 100% !important; flex: none !important; }

  .ai-dual-btn {
    width: 100% !important;
    border-radius: 0 0 12px 12px !important; /* Flat top, slightly rounded bottom matching standard Search */
    padding: 0 !important;
  }

  .ai-dual-submit, .ai-dual-ai {
    /* Let them sit neatly in the center together instead of forcing equal width which creates gaps */
    width: auto !important;
    flex: 0 1 auto !important;
  }

  /* Redo layout so arrows aren't overlapping text on mobile */
  .ai-results-layout { padding: 0 !important; display: flex !important; flex-direction: column !important; }

  .ai-nav-side {
    position: static !important;
    transform: none !important;
    display: none !important; /* Handled by bottom row now */
  }

  .ai-search-results .ai-card {
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    text-align: center !important;
    padding: 25px 0 !important; 
  }

  .ai-search-results .ai-thumb-wrap { 
    width: 160px !important; height: 160px !important; 
    min-width: 160px !important; min-height: 160px !important;
  }
  .ai-title { font-size: 19px !important; }
  .ai-text { font-size: 14px !important; }
}