/* Mobiele popup-afwerking op basis van de aangeleverde voorbeelden. */
.online-dialog:has(.premium-feature-grid),
.online-dialog:has(#buyPremiumButton),
.online-dialog:has(.social-profile-actions),
.online-dialog:has(.social-shell) {
  font-family: Arial, Helvetica, sans-serif !important;
  background: linear-gradient(145deg, #fffaf0 0%, #d8e1d5 100%) !important;
  border: 2px solid #c99b3d !important;
  color: #3d3025 !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.52), inset 0 0 0 3px rgba(255,244,205,.66) !important;
}

.online-dialog:has(.premium-feature-grid) > .last-trick-header,
.online-dialog:has(#buyPremiumButton) > .last-trick-header,
.online-dialog:has(.social-profile-actions) > .last-trick-header,
.online-dialog:has(.social-shell) > .last-trick-header {
  background: rgba(255,250,240,.96) !important;
  border-bottom: 1px solid #c9a45f !important;
}

.online-dialog:has(.premium-feature-grid) #onlineTitle,
.online-dialog:has(#buyPremiumButton) #onlineTitle,
.online-dialog:has(.social-profile-actions) #onlineTitle,
.online-dialog:has(.social-shell) #onlineTitle {
  color: #123f29 !important;
  text-shadow: none !important;
}

.online-dialog:has(.premium-feature-grid) .last-trick-header span,
.online-dialog:has(#buyPremiumButton) .last-trick-header span,
.online-dialog:has(.social-profile-actions) .last-trick-header span,
.online-dialog:has(.social-shell) .last-trick-header span { color: #725938 !important; }

.online-dialog:has(.premium-feature-grid) #closeOnlineButton,
.online-dialog:has(#buyPremiumButton) #closeOnlineButton,
.online-dialog:has(.social-profile-actions) #closeOnlineButton,
.online-dialog:has(.social-shell) #closeOnlineButton {
  background: linear-gradient(145deg, #195b38, #0b3522) !important;
  border: 2px solid #c99b3d !important;
  color: #fff3d4 !important;
}

.online-dialog:has(.premium-feature-grid) #onlineContent,
.online-dialog:has(#buyPremiumButton) #onlineContent,
.online-dialog:has(.social-profile-actions) #onlineContent { color: #3d3025 !important; }

.online-dialog:has(.premium-feature-grid) .premium-hero,
.online-dialog:has(#buyPremiumButton) .premium-hero,
.online-dialog:has(.social-profile-actions) .premium-hero {
  background: linear-gradient(145deg, #174f33, #0b3522) !important;
  border: 1px solid #c99b3d !important;
  box-shadow: 0 4px 12px rgba(11,53,34,.22) !important;
}

.online-dialog:has(.premium-feature-grid) .premium-hero > span,
.online-dialog:has(#buyPremiumButton) .premium-hero > span,
.online-dialog:has(.social-profile-actions) .premium-hero > span { color: #f0c969 !important; opacity: 1 !important; }

.online-dialog:has(.premium-feature-grid) .premium-hero h2,
.online-dialog:has(#buyPremiumButton) .premium-hero h2,
.online-dialog:has(.social-profile-actions) .premium-hero h2 { color: #fff3d4 !important; text-shadow: none !important; }

.online-dialog:has(.premium-feature-grid) .premium-hero p,
.online-dialog:has(#buyPremiumButton) .premium-hero p,
.online-dialog:has(.social-profile-actions) .premium-hero p { color: #f3ead8 !important; opacity: 1 !important; }

.online-dialog:has(.premium-feature-grid) .premium-feature-grid { gap: 10px !important; }
.online-dialog:has(.premium-feature-grid) .premium-feature-grid > div {
  padding: 13px 15px !important;
  border: 1px solid #c9a45f !important;
  border-radius: 12px !important;
  background: rgba(255,250,240,.94) !important;
  box-shadow: 0 3px 8px rgba(61,48,37,.1) !important;
}
.online-dialog:has(.premium-feature-grid) .premium-feature-grid strong { color: #123f29 !important; }
.online-dialog:has(.premium-feature-grid) .premium-feature-grid span { color: #624c36 !important; opacity: 1 !important; }
.online-dialog:has(.premium-feature-grid) .online-status { color: #624c36 !important; opacity: 1 !important; }

.online-dialog:has(.premium-feature-grid) #buyPremiumButton,
.online-dialog:has(.social-profile-actions) .social-profile-actions button,
.online-dialog:has(.social-shell) .social-card-actions button {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid #d6a544 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #195b38, #0b3522) !important;
  color: #fff3d4 !important;
  font: 800 14px/1.15 Arial, Helvetica, sans-serif !important;
  box-shadow: 0 3px 8px rgba(11,53,34,.22) !important;
}

.online-dialog:has(.social-profile-actions) .social-profile-actions { gap: 9px !important; }
.online-dialog:has(.social-profile-actions) .social-profile-actions .danger {
  background: #fff7f3 !important;
  border-color: #a33b35 !important;
  color: #922c28 !important;
}

.online-dialog:has(.social-shell) .social-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.online-dialog:has(.social-shell) .social-card-actions button { width: auto !important; flex: 1 1 108px !important; }
.online-dialog:has(.social-shell) .social-more { flex: 0 0 42px !important; min-width: 42px !important; }

body.game-active .table-chat-form input {
  background: rgba(3,20,14,.94) !important;
  border: 1px solid #315b4b !important;
  color: #fffaf0 !important;
  opacity: 1 !important;
}
body.game-active .table-chat-form input::placeholder { color: #c8c4b9 !important; opacity: 1 !important; }
body.game-active .table-chat-form button {
  background: linear-gradient(145deg, #195b38, #0b3522) !important;
  border: 1px solid #c99b3d !important;
  color: #fff3d4 !important;
  font-weight: 800 !important;
}

@media (max-width: 700px) {
  .online-dialog:has(.premium-feature-grid),
  .online-dialog:has(#buyPremiumButton),
  .online-dialog:has(.social-profile-actions),
  .online-dialog:has(.social-shell) { border-radius: 18px !important; }

  .online-dialog:has(.premium-feature-grid) .premium-hero h2,
  .online-dialog:has(#buyPremiumButton) .premium-hero h2,
  .online-dialog:has(.social-profile-actions) .premium-hero h2 { font-size: clamp(24px, 7vw, 34px) !important; }

  .online-dialog:has(.premium-feature-grid) .premium-feature-grid { grid-template-columns: 1fr !important; }
  .online-dialog:has(.premium-feature-grid) #buyPremiumButton { font-size: 16px !important; }
}