/* Clikin Ringg.ai webcall skin. Scoped to Ringg widget data attributes only. */
:root {
  --clikin-ringg-panel: #1f2a1d;
  --clikin-ringg-panel-soft: rgba(255, 255, 255, 0.06);
  --clikin-ringg-border: rgba(255, 255, 255, 0.18);
  --clikin-ringg-border-strong: rgba(255, 255, 255, 0.42);
  --clikin-ringg-text: #ffffff;
  --clikin-ringg-text-dim: rgba(255, 255, 255, 0.86);
  --clikin-ringg-accent: #f0b79e;
  --clikin-ringg-live: rgba(216, 189, 122, 0.94);
  --clikin-ringg-radius: 12px;
  --clikin-ringg-button-radius: 8px;
  --clikin-ringg-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-ringg="trigger-button"] {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-width: 104px !important;
  width: auto !important;
  height: 54px !important;
  padding: 0 18px !important;
  color: #7f6a34 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(247, 244, 234, 0.94) 58%, rgba(232, 221, 197, 0.92) 100%) !important;
  border: 1px solid rgba(155, 138, 82, 0.34) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 8px rgba(155, 138, 82, 0.09), 0 18px 40px rgba(32, 36, 27, 0.18) !important;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

[data-ringg="trigger-icon"] {
  display: none !important;
}

[data-ringg="trigger-button"]::before {
  content: "Enquire";
  line-height: 1;
}

[data-ringg="trigger-button"]::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #fbfaf2;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
  background: #7f6a34;
  border-radius: 999px;
  transition: transform 220ms ease;
}

[data-ringg="trigger-button"]:hover,
[data-ringg="trigger-button"]:focus-visible {
  background: radial-gradient(circle at 30% 28%, #ffffff 0%, rgba(251, 250, 242, 0.98) 58%, #ece5cf 100%) !important;
  border-color: rgba(155, 138, 82, 0.52) !important;
  outline: none;
  box-shadow: 0 0 0 10px rgba(155, 138, 82, 0.11), 0 22px 46px rgba(32, 36, 27, 0.22) !important;
  transform: translateY(-2px);
}

[data-ringg="trigger-button"]:hover::after,
[data-ringg="trigger-button"]:focus-visible::after {
  transform: rotate(45deg);
}

body.clikin-ringg-hide-native-trigger [data-ringg="trigger-button"] {
  min-width: 1px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.clikin-ringg-hide-native-trigger [data-ringg="trigger-button"]::before,
body.clikin-ringg-hide-native-trigger [data-ringg="trigger-button"]::after {
  display: none !important;
}

[data-ringg="widget-root"] {
  background: radial-gradient(circle at 50% 50%, rgba(126, 139, 86, 0.14), transparent 34%), linear-gradient(180deg, #1f2618 0%, #141a10 100%) !important;
  background-color: #1f2618 !important;
  border-color: var(--clikin-ringg-border) !important;
  border-radius: var(--clikin-ringg-radius) !important;
  font-family: var(--clikin-ringg-font) !important;
  color: var(--clikin-ringg-text);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  width: min(860px, calc(100vw - 36px)) !important;
  max-width: 96vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(72vh, 640px) !important;
  container-type: inline-size;
  container-name: clikin-ringg-widget;
}

[data-ringg="widget-root"]:not(:has([data-ringg="header"])) {
  width: min(95vw, 380px) !important;
}

[data-ringg="widget-panel"]:has([data-ringg="header"]) {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header viz"
    "error error"
    "actions actions";
  column-gap: 20px;
  row-gap: 10px;
  padding: 18px 20px !important;
  align-items: start;
}

[data-ringg="widget-panel"] [data-ringg="header"] {
  position: static !important;
  grid-area: header;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

[data-ringg="header-logo"] {
  display: none !important;
}

[data-ringg="header-text"] {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-ringg="header-title"] {
  color: var(--clikin-ringg-text) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.2;
}

[data-ringg="header-title"]::after {
  content: "Live";
  display: inline-flex !important;
  align-items: center !important;
  min-height: 27px !important;
  padding: 0 11px !important;
  font-family: var(--clikin-ringg-font) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: #e8d28f !important;
  background: rgba(155, 138, 82, 0.08) !important;
  border: 1px solid rgba(155, 138, 82, 0.55) !important;
  border-radius: 8px !important;
}

[data-ringg="header-status"] {
  color: var(--clikin-ringg-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  margin: 0 !important;
}

[data-ringg="header-description"],
[data-clikin="status-mirror"],
[data-ringg="mute-control"],
[data-ringg="mute-label"],
[data-ringg="end-call-button"] svg,
[data-ringg="end-call-label"],
[data-ringg="close-button"],
[data-ringg="minimize-button"],
[data-ringg="footer"] {
  display: none !important;
}

[data-ringg="voice-animation-wrapper"] {
  grid-area: viz;
  margin: 0 !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

[data-ringg="voice-animation-dot"] {
  background-color: var(--clikin-ringg-live) !important;
  opacity: 0.35;
  transition: opacity 120ms ease;
}

[data-ringg="voice-animation-dot"][data-ringg-lit="true"] {
  opacity: 1;
  box-shadow: 0 0 6px rgba(214, 200, 168, 0.45);
}

[data-ringg="error-message"] {
  grid-area: error;
  text-align: left !important;
  color: var(--clikin-ringg-accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

[data-ringg="call-controls"] {
  grid-area: actions;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
}

[data-ringg="end-call-control"] {
  gap: 0 !important;
  display: flex !important;
  align-items: center;
}

[data-ringg="end-call-button"],
[data-ringg="start-call-button"],
[data-ringg="start-chat-button"] {
  height: 42px !important;
  border-radius: var(--clikin-ringg-button-radius) !important;
  background-color: var(--clikin-ringg-panel-soft) !important;
  border: 1px solid var(--clikin-ringg-border-strong) !important;
  color: var(--clikin-ringg-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-ringg="end-call-button"] {
  width: auto !important;
  min-width: 86px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

[data-ringg="end-call-button"]::before {
  content: "End Call";
  color: var(--clikin-ringg-text);
}

[data-ringg="start-call-button"],
[data-ringg="start-chat-button"] {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

[data-ringg="start-call-button"] svg,
[data-ringg="start-chat-button"] svg {
  display: none !important;
}

[data-ringg="end-call-button"]:hover,
[data-ringg="start-call-button"]:hover,
[data-ringg="start-chat-button"]:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
}

[data-ringg="message-input-form"] {
  grid-area: actions;
}

[data-ringg="message-input"] {
  background-color: var(--clikin-ringg-panel-soft) !important;
  border-color: var(--clikin-ringg-border) !important;
  border-radius: var(--clikin-ringg-button-radius) !important;
}

[data-ringg="message-input-field"] {
  background-color: transparent !important;
  color: var(--clikin-ringg-text) !important;
}

[data-ringg="message-input-field"]::placeholder {
  color: var(--clikin-ringg-text-dim) !important;
}

[data-ringg="message-send-button"] {
  background-color: var(--clikin-ringg-accent) !important;
  color: var(--clikin-ringg-panel) !important;
}

[data-ringg="loading-bar-track"] {
  background-color: var(--clikin-ringg-panel-soft) !important;
}

[data-ringg="loading-bar-fill"] {
  background: var(--clikin-ringg-text) !important;
}

[data-ringg="feedback-screen"] {
  background-color: var(--clikin-ringg-panel) !important;
}

[data-ringg="feedback-title"],
[data-ringg="end-call-dialog-title"] {
  color: var(--clikin-ringg-text) !important;
}

[data-ringg="feedback-description"],
[data-ringg="end-call-dialog-description"],
[data-ringg="legal-disclaimer"],
[data-ringg="legal-link-privacy"],
[data-ringg="legal-link-terms"] {
  color: var(--clikin-ringg-text-dim) !important;
}

[data-ringg="widget-root"] *:has(> [data-ringg="end-call-dialog"]) {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

[data-ringg="end-call-dialog"] {
  background-color: var(--clikin-ringg-panel) !important;
  color: var(--clikin-ringg-text) !important;
  border: 1px solid var(--clikin-ringg-border) !important;
  border-radius: var(--clikin-ringg-radius) !important;
  padding: 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

[data-ringg="end-call-cancel"] {
  background-color: var(--clikin-ringg-panel-soft) !important;
  color: var(--clikin-ringg-text) !important;
  border-color: var(--clikin-ringg-border) !important;
  border-radius: var(--clikin-ringg-button-radius) !important;
}

[data-ringg="end-call-confirm"],
[data-ringg="feedback-submit"] {
  background-color: var(--clikin-ringg-accent) !important;
  color: var(--clikin-ringg-panel) !important;
  border-radius: var(--clikin-ringg-button-radius) !important;
}

[data-ringg="feedback-comment"] {
  background-color: var(--clikin-ringg-panel-soft) !important;
  color: var(--clikin-ringg-text) !important;
  border-color: var(--clikin-ringg-border) !important;
  border-radius: var(--clikin-ringg-button-radius) !important;
}

[data-ringg="feedback-comment"]::placeholder {
  color: var(--clikin-ringg-text-dim) !important;
}

[data-ringg="feedback-skip"] {
  background-color: transparent !important;
  color: var(--clikin-ringg-text-dim) !important;
}

@container clikin-ringg-widget (max-width: 600px) {
  [data-ringg="widget-panel"]:has([data-ringg="header"]) {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "viz"
      "error"
      "actions" !important;
    row-gap: 14px !important;
    padding: 20px !important;
  }

  [data-ringg="header-title"],
  [data-ringg="header-status"] {
    text-align: left !important;
  }

  [data-ringg="voice-animation-wrapper"] {
    width: 100% !important;
  }

  [data-ringg="error-message"] {
    text-align: center !important;
  }

  [data-ringg="call-controls"] {
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  [data-ringg="widget-root"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(78vh, 640px) !important;
  }
}