/* Ihsabha — embed-code-box.css
   Styles the collapsible "Get Embed Code" box added to the ten most-searched calculator
   pages (en + ar), used with the site's existing CSS variables from style.min.css. */

.embed-code-box {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg);
}

.embed-code-box summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  list-style: none;
}

.embed-code-box summary::-webkit-details-marker { display: none; }

.embed-code-box summary::before {
  content: "▸";
  display: inline-block;
  margin-inline-end: 6px;
  color: var(--brand);
  transition: transform .15s ease;
}

.embed-code-box[open] summary::before {
  transform: rotate(90deg);
}

.embed-code-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 8px;
}

.embed-code-textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

.embed-code-copy {
  margin-top: 8px;
  padding: 8px 16px;
  font-size: 13.5px;
}

.embed-code-copied {
  margin-inline-start: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}