/* ── DOSD v1.1 Styles ───────────────────────────────────────────────────────── */

:root {
  --dosd-blue:       #1F4E79;
  --dosd-mid:        #2E75B6;
  --dosd-light:      #D6E4F0;
  --dosd-gold:       #C8A951;
  --dosd-text:       #1A1A2E;
  --dosd-muted:      #666677;
  --dosd-radius:     10px;
  --dosd-success:    #2E7D32;
}

.dosd-wrap {
  max-width: 640px;
  margin: 2em auto;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dosd-text);
}

/* ── Notice Card (colored header with white flag badge) ── */
.dosd-notice-card {
  border-radius: var(--dosd-radius) var(--dosd-radius) 0 0;
  padding: 2em 2em 1.6em;
  text-align: center;
  color: #fff;
}

.dosd-notice-card h2 {
  font-size: 1.5em;
  margin: .5em 0 .3em;
  color: #fff;
}

.dosd-notice-card .dosd-subtitle {
  font-size: .9em;
  opacity: .88;
  margin: 0;
  line-height: 1.5;
}

/* ── White Flag Badge — white flag on colored bg ── */
.dosd-flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 3px solid rgba(255,255,255,.55);
  margin-bottom: .4em;
}

.dosd-flag-inner {
  font-size: 2em;
  line-height: 1;
  color: #ffffff;
  filter: brightness(10);  /* forces pure white regardless of emoji color */
}

.dosd-flag-badge--large {
  width: 80px;
  height: 80px;
  margin: 0 auto .6em;
}

.dosd-flag-badge--large .dosd-flag-inner {
  font-size: 2.6em;
}

.dosd-flag-badge--sm {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.dosd-flag-badge--sm .dosd-flag-inner {
  font-size: 1.4em;
}

/* ── Declaration box ── */
.dosd-declaration-box {
  background: var(--dosd-light);
  border-left: 4px solid var(--dosd-gold);
  border-radius: 0 0 0 0;
  padding: 1.2em 1.4em;
  font-style: italic;
  font-size: .91em;
  color: var(--dosd-blue);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Form ── */
.dosd-form {
  background: #F9FBFD;
  border: 1px solid #DDE8F2;
  border-top: none;
  border-radius: 0 0 var(--dosd-radius) var(--dosd-radius);
  padding: 1.8em;
}

.dosd-step-label {
  font-size: .8em;
  font-weight: bold;
  color: var(--dosd-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1.4em;
  padding-bottom: .5em;
  border-bottom: 1px solid #DDE8F2;
}

.dosd-field {
  margin-bottom: 1.3em;
}

.dosd-field label {
  display: block;
  font-weight: bold;
  font-size: .88em;
  margin-bottom: .4em;
  color: var(--dosd-blue);
}

.dosd-optional {
  font-weight: normal;
  font-style: italic;
  color: var(--dosd-muted);
  font-size: .9em;
  margin-left: 4px;
}

.dosd-field .req { color: #C0392B; margin-left: 2px; }

.dosd-field input[type="text"],
.dosd-field input[type="email"],
.dosd-field input[type="tel"] {
  width: 100%;
  padding: .7em .9em;
  border: 1.5px solid #B8CEE4;
  border-radius: 6px;
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .2s;
  background: #fff;
}

.dosd-field input:focus {
  outline: none;
  border-color: var(--dosd-mid);
  box-shadow: 0 0 0 3px rgba(46,117,182,.14);
}

.dosd-field small {
  display: block;
  color: var(--dosd-muted);
  font-size: .78em;
  margin-top: .3em;
  line-height: 1.45;
}

/* ── Cross-domain lookup ── */
.dosd-crossdomain {
  background: #F0F6FC;
  border: 1px dashed #B8CEE4;
  border-radius: 8px;
  padding: 1em 1.1em;
}

.dosd-node-lookup-row {
  display: flex;
  gap: .5em;
  align-items: stretch;
}

.dosd-node-lookup-row input {
  flex: 1;
}

.dosd-lookup-btn {
  padding: .6em 1em;
  background: var(--dosd-mid);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .9em;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .2s;
}

.dosd-lookup-btn:hover { background: var(--dosd-blue); }

.dosd-lookup-result {
  margin-top: .6em;
  padding: .7em .9em;
  border-radius: 6px;
  font-size: .86em;
  line-height: 1.5;
}

.dosd-lookup-result.found {
  background: #E8F5E9;
  border: 1px solid #C8E6C9;
  color: #1B5E20;
}

.dosd-lookup-result.not-found {
  background: #FFF3E0;
  border: 1px solid #FFCC80;
  color: #7F3B00;
}

/* ── Consent checkbox ── */
.dosd-consent {
  background: #EEF5FB;
  border-radius: 6px;
  padding: .9em 1em;
}

.dosd-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  font-weight: normal !important;
  font-size: .86em;
  cursor: pointer;
  color: var(--dosd-text) !important;
  line-height: 1.5;
}

.dosd-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--dosd-blue);
}

/* ── Messages ── */
.dosd-msg {
  padding: .8em 1em;
  border-radius: 6px;
  font-size: .9em;
  margin-bottom: 1em;
  line-height: 1.5;
}
.dosd-msg.error   { background: #FDE8E8; color: #A00; border: 1px solid #F5C6C6; }
.dosd-msg.success { background: #E8F5E9; color: #1B5E20; border: 1px solid #C8E6C9; }

/* ── Button ── */
.dosd-btn {
  width: 100%;
  padding: .9em 1.4em;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  font-family: inherit;
}
.dosd-btn:hover   { opacity: .88; }
.dosd-btn:active  { transform: scale(.98); }
.dosd-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Step 2 info box ── */
.dosd-info-box {
  background: var(--dosd-light);
  border-left: 4px solid var(--dosd-gold);
  border-radius: 6px;
  padding: 1.2em 1.4em;
  line-height: 1.65;
  font-size: .92em;
  margin-bottom: 1.2em;
}

.dosd-info-box p { margin: .4em 0; }

.dosd-step-note {
  text-align: center;
  color: var(--dosd-muted);
  font-size: .88em;
  font-style: italic;
}

/* ── SMS code entry ── */
.dosd-sms-row {
  display: flex;
  gap: .5em;
  align-items: stretch;
  margin-top: 1em;
}

.dosd-sms-row input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 1.2em;
  text-align: center;
  font-family: monospace;
}

.dosd-sms-btn {
  padding: .6em 1.2em;
  background: var(--dosd-success);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .95em;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.dosd-sms-btn:hover { opacity: .88; }

/* ── Success ── */
.dosd-success {
  text-align: center;
  padding: 2.4em 1.6em;
  background: #E8F5E9;
  border: 2px solid #4CAF50;
  border-radius: var(--dosd-radius);
}

.dosd-success h3 { color: #1B5E20; font-size: 1.5em; margin: .3em 0 .5em; }

.dosd-node-display {
  font-size: .82em;
  color: var(--dosd-muted);
  word-break: break-all;
  margin-top: .8em;
}

.dosd-node-display code {
  background: #F0F0F0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
}

/* ── Tree widget ── */
.dosd-tree-wrap {
  background: #F0F6FC;
  border: 1px solid #C5D9ED;
  border-radius: var(--dosd-radius);
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.dosd-tree-header {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: 1.1em 1.4em;
  color: #fff;
}

.dosd-tree-count { font-size: 2.4em; font-weight: bold; line-height: 1; }
.dosd-tree-label { font-size: .9em; opacity: .9; }

.dosd-tree-genesis {
  font-size: .78em;
  color: var(--dosd-muted);
  padding: .7em 1.4em;
  border-bottom: 1px solid #C5D9ED;
  background: #fff;
}

.dosd-tree-genesis code {
  background: #F0F6FC;
  padding: 2px 6px;
  border-radius: 4px;
}

.dosd-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

.dosd-tree-node {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .55em 1.4em;
  border-bottom: 1px solid #EEF3F8;
  font-size: .87em;
}

.node-chain  { color: var(--dosd-mid); font-size: 1.1em; flex-shrink: 0; }
.node-name   { font-weight: bold; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-origin { font-size: .78em; color: #6A0DAD; background: #F3E8FF; padding: 1px 6px; border-radius: 10px; white-space: nowrap; }
.node-hash   { color: var(--dosd-muted); font-family: monospace; font-size: .82em; white-space: nowrap; }
.node-date   { color: var(--dosd-muted); font-size: .78em; white-space: nowrap; }

.dosd-tree-note {
  padding: .8em 1.4em;
  font-size: .84em;
  color: var(--dosd-muted);
  text-align: center;
  background: #F9FBFD;
  border-top: 1px solid #DDE8F2;
}

.dosd-inline-count { font-weight: bold; color: var(--dosd-blue); }

@media (max-width: 480px) {
  .dosd-form { padding: 1.2em; }
  .node-hash, .node-origin { display: none; }
  .dosd-node-lookup-row { flex-direction: column; }
  .dosd-lookup-btn { width: 100%; }
}