/* ==========================================================
   RAVID PATCH 11.2 - Game Etika Modal Final Stabilizer
   Must load after all older game CSS files.
   Goal: fix the cropped/stacked adab modal caused by old recovery/flagship styles.
   Scope: only #section-salam Game Etika.
   ========================================================== */

body.ravid-premium-theme #section-salam.premium-etika-page,
#section-salam.premium-etika-page {
  isolation: isolate;
}

body.ravid-premium-theme #section-salam.premium-etika-page .etika-board-wrap,
#section-salam.premium-etika-page .etika-board-wrap {
  position: relative !important;
  overflow: visible !important;
}

/* Single clean board dimmer. It replaces old full-page blur overlays. */
body.ravid-premium-theme #section-salam.premium-etika-page .etika-board-wrap:has(#greeting-panel:not(.hidden))::before,
#section-salam.premium-etika-page .etika-board-wrap:has(#greeting-panel:not(.hidden))::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 58 !important;
  border-radius: 30px !important;
  background: rgba(15, 23, 42, .20) !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Neutralize old recovery CSS that targeted every dialog/backdrop in the game. */
body.ravid-premium-theme #section-salam.premium-etika-page .ravid-adab-backdrop,
body.ravid-premium-theme #section-salam.premium-etika-page .modal-backdrop,
body.ravid-premium-theme #section-salam.premium-etika-page [class*="backdrop"],
#section-salam.premium-etika-page .ravid-adab-backdrop,
#section-salam.premium-etika-page .modal-backdrop,
#section-salam.premium-etika-page [class*="backdrop"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
}

/* The actual modal: center on board, not viewport. */
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel.greeting-panel,
#section-salam.premium-etika-page #greeting-panel.greeting-panel,
body.ravid-premium-theme #section-salam.premium-etika-page [role="dialog"]#greeting-panel,
#section-salam.premium-etika-page [role="dialog"]#greeting-panel {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 520px) !important;
  max-width: calc(100% - 34px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 76px 34px 30px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 70 !important;
  border-radius: 34px !important;
  text-align: center !important;
  color: #0f172a !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(191, 219, 254, .96) !important;
  box-shadow: 0 34px 76px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.98) !important;
  backdrop-filter: none !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel.greeting-panel.hidden,
#section-salam.premium-etika-page #greeting-panel.greeting-panel.hidden {
  display: none !important;
}

/* Kill all older pseudo layers that created the white horizontal strip/star overlap. */
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel.greeting-panel::before,
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel.greeting-panel::after,
#section-salam.premium-etika-page #greeting-panel.greeting-panel::before,
#section-salam.premium-etika-page #greeting-panel.greeting-panel::after {
  content: none !important;
  display: none !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .ravid-adab-modal-orb,
#section-salam.premium-etika-page #greeting-panel .ravid-adab-modal-orb {
  position: absolute !important;
  left: 50% !important;
  top: -38px !important;
  transform: translateX(-50%) !important;
  width: 76px !important;
  height: 76px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 26px !important;
  color: #facc15 !important;
  font-size: 40px !important;
  line-height: 1 !important;
  background: linear-gradient(145deg, #2563eb 0%, #16a7ea 100%) !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.52) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .ravid-adab-close,
#section-salam.premium-etika-page #greeting-panel .ravid-adab-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(203,213,225,.95) !important;
  background: rgba(255,255,255,.92) !important;
  color: #334155 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
  z-index: 4 !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .etika-step.hidden,
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .hidden,
#section-salam.premium-etika-page #greeting-panel .etika-step.hidden,
#section-salam.premium-etika-page #greeting-panel .hidden {
  display: none !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .etika-step:not(.hidden),
#section-salam.premium-etika-page #greeting-panel .etika-step:not(.hidden) {
  display: block !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-title,
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel #etika-step-title,
#section-salam.premium-etika-page #greeting-panel .greeting-title,
#section-salam.premium-etika-page #greeting-panel #etika-step-title {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #0b1020 !important;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem) !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  opacity: 1 !important;
  white-space: normal !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .muted,
#section-salam.premium-etika-page #greeting-panel .muted {
  display: block !important;
  max-width: 390px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  color: #64748b !important;
  text-align: center !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  font-weight: 750 !important;
  opacity: 1 !important;
  white-space: normal !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-options,
#section-salam.premium-etika-page #greeting-panel .greeting-options {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* FINAL reset for old button/global styles. */
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice,
#section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice,
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel button#adab-choice,
#section-salam.premium-etika-page #greeting-panel button.adab-choice {
  appearance: none !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 76px !important;
  height: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  border-radius: 24px !important;
  text-align: left !important;
  overflow: hidden !important;
  color: #1e3a8a !important;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
  border: 1px solid rgba(191,219,254,.96) !important;
  box-shadow: 0 12px 28px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice::before,
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice::after,
#section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice::before,
#section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice::after {
  content: none !important;
  display: none !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice-green,
body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-options #btn-adab-uang,
#section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice-green,
#section-salam.premium-etika-page #greeting-panel .greeting-options #btn-adab-uang {
  color: #166534 !important;
  background: linear-gradient(180deg, #f8fff9 0%, #dcfce7 100%) !important;
  border-color: rgba(187,247,208,.98) !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .adab-choice > span,
#section-salam.premium-etika-page #greeting-panel .adab-choice > span {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .adab-choice .adab-choice-icon,
#section-salam.premium-etika-page #greeting-panel .adab-choice .adab-choice-icon {
  grid-column: 1 !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  justify-content: center !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  font-size: 27px !important;
  line-height: 1 !important;
  background: linear-gradient(145deg, #2563eb, #16a7ea) !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(37,99,235,.22) !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel #btn-adab-uang .adab-choice-icon,
#section-salam.premium-etika-page #greeting-panel #btn-adab-uang .adab-choice-icon {
  background: linear-gradient(145deg, #dcfce7, #ffffff) !important;
  color: #15803d !important;
  box-shadow: 0 12px 22px rgba(22,163,74,.16) !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .adab-choice > span:nth-child(2),
#section-salam.premium-etika-page #greeting-panel .adab-choice > span:nth-child(2) {
  grid-column: 2 !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(1rem, 1.8vw, 1.18rem) !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: -.015em !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .adab-choice .adab-choice-arrow,
#section-salam.premium-etika-page #greeting-panel .adab-choice .adab-choice-arrow {
  grid-column: 3 !important;
  justify-content: flex-end !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  margin-left: auto !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-message,
#section-salam.premium-etika-page #greeting-panel .greeting-message {
  display: block !important;
  margin: 14px 0 0 !important;
  min-height: 0 !important;
  color: #475569 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-message:empty,
#section-salam.premium-etika-page #greeting-panel .greeting-message:empty {
  display: none !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .form-row,
#section-salam.premium-etika-page #greeting-panel .form-row {
  display: flex !important;
  gap: 12px !important;
  align-items: end !important;
}

body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel input,
#section-salam.premium-etika-page #greeting-panel input {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(191,219,254,.96) !important;
  background: #fff !important;
  color: #0f172a !important;
}

@media (max-width: 760px) {
  body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel.greeting-panel,
  #section-salam.premium-etika-page #greeting-panel.greeting-panel {
    width: min(94vw, 440px) !important;
    max-width: calc(100% - 20px) !important;
    padding: 68px 18px 22px !important;
    border-radius: 26px !important;
  }

  body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice,
  #section-salam.premium-etika-page #greeting-panel .greeting-options .btn.adab-choice {
    grid-template-columns: 46px minmax(0, 1fr) 24px !important;
    min-height: 68px !important;
    padding: 10px 15px !important;
    border-radius: 20px !important;
  }

  body.ravid-premium-theme #section-salam.premium-etika-page #greeting-panel .adab-choice .adab-choice-icon,
  #section-salam.premium-etika-page #greeting-panel .adab-choice .adab-choice-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    font-size: 23px !important;
  }
}