/* ═══════════════════════════════════════════════════════════════════════════
   DNR Pest Control — DPDP consent & data-rights UI
   Digital Personal Data Protection Act, 2023 + DPDP Rules, 2025

   WHY THIS IS A SEPARATE STYLESHEET
   The site runs two design systems side by side: index.html and the new
   service pages load styles.css (teal-green, Plus Jakarta Sans), while
   booking.html, checkout.html, hiring.html, privacy-policy.html and
   terms-of-service.html still load the original style.css (brighter green,
   system stack). The consent UI has to appear on pages from both families and
   look native in each, so it cannot live inside either one.

   Everything here is therefore:
     • namespaced under .dnr-* so it can never leak into either design, and
     • themed from the HOST page's own variables, with a fallback chain:
         var(--green-700, var(--primary-dark, #1e7e34))
       picks up the new palette where it exists, the old palette where it
       does not, and a safe literal if neither is defined.

   Body copy is 14px and every interactive target is at least 44px on touch,
   per the brief.
   ═══════════════════════════════════════════════════════════════════════════ */

.dnr-consent,
.dnr-cookie,
.dnr-map,
.dnr-req,
.dnr-langbar {
  /* Themed from the host page, in this order of preference. */
  --dnr-brand:        var(--green-700, var(--primary-dark, #1e7e34));
  --dnr-brand-strong: var(--green-800, var(--primary-dark, #19692c));
  --dnr-brand-soft:   var(--green-50, #f1f8f3);
  --dnr-brand-line:   var(--green-200, #c3e6cb);
  --dnr-ink:          var(--ink, var(--dark-color, #2c3e50));
  --dnr-text:         var(--ink-2, var(--text-color, #495057));
  --dnr-muted:        var(--muted, #667);
  --dnr-line:         var(--line, var(--border-color, #e0e0e0));
  --dnr-surface:      #ffffff;
  --dnr-surface-soft: var(--bg-soft, #f7f9f8);
  --dnr-danger:       #b3261e;
  --dnr-danger-soft:  #fdecea;
  --dnr-radius:       var(--r, 12px);
  --dnr-radius-sm:    var(--r-sm, 8px);

  font-size: 14px;
  line-height: 1.6;
  color: var(--dnr-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. CONSENT NOTICE BLOCK  (above the submit button on every form)
   ═══════════════════════════════════════════════════════════════════════════ */

.dnr-consent {
  margin: 20px 0;
  padding: 16px;
  background: var(--dnr-surface);
  border: 1px solid var(--dnr-line);
  border-left: 4px solid var(--dnr-brand);
  border-radius: var(--dnr-radius);
}

.dnr-consent-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dnr-ink);
}
.dnr-consent-head svg { width: 18px; height: 18px; color: var(--dnr-brand); flex-shrink: 0; }

/* The plain-language notice itself. This is the standalone notice the Act
   requires — not a link to one. */
.dnr-consent-notice { margin: 0 0 14px; font-size: 14px; color: var(--dnr-text); }
.dnr-consent-notice p { margin: 0 0 8px; }
.dnr-consent-notice p:last-child { margin-bottom: 0; }
.dnr-consent-notice strong { color: var(--dnr-ink); font-weight: 700; }

.dnr-consent-what {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--dnr-surface-soft);
  border-radius: var(--dnr-radius-sm);
  font-size: 13.5px;
}
.dnr-consent-what dl { margin: 0; }
.dnr-consent-what dt {
  font-weight: 700;
  color: var(--dnr-ink);
  margin-top: 8px;
}
.dnr-consent-what dt:first-child { margin-top: 0; }
.dnr-consent-what dd { margin: 2px 0 0; color: var(--dnr-text); }

/* Checkbox rows — 44px minimum touch target. */
.dnr-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  cursor: pointer;
}
.dnr-check + .dnr-check { border-top: 1px dashed var(--dnr-line); }

.dnr-check input[type="checkbox"] {
  /* 22px box inside a 44px row keeps the hit area large without a giant tick. */
  width: 22px;
  height: 22px;
  margin: 8px 0 0;
  flex-shrink: 0;
  accent-color: var(--dnr-brand);
  cursor: pointer;
}
.dnr-check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--focus, #0b6bd3);
  outline-offset: 2px;
}

.dnr-check-text { flex: 1; padding-top: 4px; font-size: 14px; }
.dnr-check-text b { display: block; color: var(--dnr-ink); font-weight: 700; }
/* Direct child only. A plain descendant selector here also caught the
   .dnr-req-star and .dnr-optional spans nested inside the <b>, turning the
   required asterisk into its own line and stretching the "Optional" badge
   across the full row. */
.dnr-check-text > span { display: block; color: var(--dnr-muted); font-size: 13px; margin-top: 2px; }

.dnr-req-star { color: var(--dnr-danger); font-weight: 700; }
.dnr-optional {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--dnr-surface-soft);
  border: 1px solid var(--dnr-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dnr-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: 1px;
}

/* Error state — announced via aria-live, shown here. */
.dnr-consent.has-error { border-left-color: var(--dnr-danger); }
.dnr-check.has-error { background: var(--dnr-danger-soft); border-radius: var(--dnr-radius-sm); }

.dnr-consent-error {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--dnr-danger-soft);
  border: 1px solid #f5c6c2;
  border-radius: var(--dnr-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: #7d1f19;
}
.dnr-consent-error.is-shown { display: flex; }
.dnr-consent-error svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--dnr-danger); }

.dnr-consent-foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--dnr-line);
  font-size: 13px;
  color: var(--dnr-muted);
}
.dnr-consent-foot a { color: var(--dnr-brand); font-weight: 600; }
.dnr-consent-foot a:hover { color: var(--dnr-brand-strong); }

/* ═══════════════════════════════════════════════════════════════════════════
   2. COOKIE / TRACKING BANNER
   Accept and Reject carry identical visual weight — same size, same contrast,
   same position. Nothing is pre-selected and there is no "continue browsing
   means yes". Rejecting is one click, exactly like accepting.
   ═══════════════════════════════════════════════════════════════════════════ */

.dnr-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483000;           /* above the mobile action bar */
  background: var(--dnr-surface);
  border-top: 2px solid var(--dnr-brand);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .14);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.dnr-cookie[hidden] { display: none; }

.dnr-cookie-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.dnr-cookie h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dnr-ink);
}
.dnr-cookie p { margin: 0; font-size: 13.5px; color: var(--dnr-text); }
.dnr-cookie a { color: var(--dnr-brand); font-weight: 600; }

.dnr-cookie-actions { display: grid; gap: 8px; }

/* Equal weight: both buttons are the same height, width behaviour, font size
   and border treatment. The only difference is fill, and neither is dimmed. */
.dnr-cookie-btn {
  min-height: 44px;
  padding: 11px 20px;
  border-radius: var(--dnr-radius-sm);
  border: 2px solid var(--dnr-brand);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.dnr-cookie-accept { background: var(--dnr-brand); color: #fff; }
.dnr-cookie-accept:hover { background: var(--dnr-brand-strong); border-color: var(--dnr-brand-strong); }
.dnr-cookie-reject { background: #fff; color: var(--dnr-brand); }
.dnr-cookie-reject:hover { background: var(--dnr-brand-soft); }
.dnr-cookie-btn:focus-visible { outline: 3px solid var(--focus, #0b6bd3); outline-offset: 2px; }

@media (min-width: 720px) {
  .dnr-cookie-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
  }
  .dnr-cookie-actions { grid-auto-flow: column; gap: 10px; }
  .dnr-cookie-btn { min-width: 132px; }
}

/* Persistent footer entry point to change the choice later. */
.dnr-cookie-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CLICK-TO-LOAD MAP
   The Google Maps iframe sends the visitor's IP and cookies to Google the
   moment it is in the DOM. It therefore ships as a static placeholder and is
   only swapped for the real iframe when the visitor asks for it.
   ═══════════════════════════════════════════════════════════════════════════ */

.dnr-map {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 24px 20px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--dnr-surface-soft) 0 12px, #eef3f1 12px 24px);
  border: 1px solid var(--dnr-line);
  border-radius: var(--dnr-radius-sm);
}
.dnr-map svg { width: 30px; height: 30px; color: var(--dnr-brand); }
.dnr-map b { font-size: 14px; color: var(--dnr-ink); }
.dnr-map p { margin: 0; max-width: 40ch; font-size: 13px; color: var(--dnr-muted); }
.dnr-map-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dnr-map-btn {
  min-height: 44px;
  padding: 11px 18px;
  border: 2px solid var(--dnr-brand);
  border-radius: var(--dnr-radius-sm);
  background: var(--dnr-brand);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.dnr-map-btn:hover { background: var(--dnr-brand-strong); color: #fff; }
.dnr-map-btn.is-alt { background: #fff; color: var(--dnr-brand); }
.dnr-map-btn.is-alt:hover { background: var(--dnr-brand-soft); color: var(--dnr-brand-strong); }
.dnr-map-btn:focus-visible { outline: 3px solid var(--focus, #0b6bd3); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. DATA REQUEST PAGE  (data-request.html)
   ═══════════════════════════════════════════════════════════════════════════ */

.dnr-req { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; font-size: 15px; }
.dnr-req h1 { font-size: 28px; line-height: 1.2; color: var(--dnr-ink); margin: 0 0 12px; }
.dnr-req .dnr-lede { font-size: 16px; color: var(--dnr-text); margin: 0 0 24px; }
.dnr-req h2 { font-size: 18px; color: var(--dnr-ink); margin: 28px 0 10px; }

.dnr-req-card {
  background: var(--dnr-surface);
  border: 1px solid var(--dnr-line);
  border-radius: var(--dnr-radius);
  padding: 20px;
  margin-bottom: 20px;
}

.dnr-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--dnr-brand-soft);
  border: 1px solid var(--dnr-brand-line);
  border-radius: var(--dnr-radius-sm);
  font-size: 13.5px;
  margin-bottom: 20px;
}
.dnr-note svg { width: 18px; height: 18px; color: var(--dnr-brand); flex-shrink: 0; margin-top: 2px; }
.dnr-note p { margin: 0; }
.dnr-note p + p { margin-top: 6px; }

.dnr-field { margin-bottom: 16px; }
.dnr-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dnr-ink);
}
.dnr-field input[type="text"],
.dnr-field input[type="tel"],
.dnr-field input[type="email"],
.dnr-field select,
.dnr-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--dnr-ink);
  background: #fff;
  border: 1px solid var(--dnr-line);
  border-radius: var(--dnr-radius-sm);
  box-sizing: border-box;
}
.dnr-field textarea { min-height: 96px; resize: vertical; }
.dnr-field input:focus,
.dnr-field select:focus,
.dnr-field textarea:focus {
  outline: none;
  border-color: var(--dnr-brand);
  box-shadow: 0 0 0 3px rgba(30, 126, 52, .16);
}
.dnr-field input:focus-visible,
.dnr-field select:focus-visible,
.dnr-field textarea:focus-visible { outline: 3px solid var(--focus, #0b6bd3); outline-offset: 1px; }

.dnr-field.has-error input,
.dnr-field.has-error select,
.dnr-field.has-error textarea,
.dnr-field.has-error .dnr-radios { border-color: var(--dnr-danger); }
.dnr-field-error { display: none; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--dnr-danger); }
.dnr-field.has-error .dnr-field-error { display: block; }

/* Request-type radio list */
.dnr-radios { display: grid; gap: 2px; border: 1px solid transparent; border-radius: var(--dnr-radius-sm); }
.dnr-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--dnr-line);
  border-radius: var(--dnr-radius-sm);
  cursor: pointer;
}
.dnr-radio:hover { background: var(--dnr-brand-soft); }
.dnr-radio input[type="radio"] {
  width: 20px; height: 20px; margin: 2px 0 0;
  flex-shrink: 0; accent-color: var(--dnr-brand); cursor: pointer;
}
.dnr-radio input[type="radio"]:focus-visible { outline: 3px solid var(--focus, #0b6bd3); outline-offset: 2px; }
.dnr-radio-text b { display: block; font-size: 14px; color: var(--dnr-ink); }
.dnr-radio-text > span { display: block; font-size: 13px; color: var(--dnr-muted); margin-top: 1px; }
.dnr-radio:has(input:checked) { border-color: var(--dnr-brand); background: var(--dnr-brand-soft); }

.dnr-submit {
  width: 100%;
  min-height: 48px;
  padding: 13px 24px;
  background: var(--dnr-brand);
  color: #fff;
  border: 2px solid var(--dnr-brand);
  border-radius: var(--dnr-radius-sm);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.dnr-submit:hover { background: var(--dnr-brand-strong); border-color: var(--dnr-brand-strong); }
.dnr-submit:focus-visible { outline: 3px solid var(--focus, #0b6bd3); outline-offset: 2px; }
.dnr-submit[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Result states */
.dnr-result { display: none; gap: 12px; padding: 16px; border-radius: var(--dnr-radius); margin-bottom: 20px; }
.dnr-result.is-shown { display: flex; }
.dnr-result svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.dnr-result h2 { margin: 0 0 6px; font-size: 16px; }
.dnr-result p { margin: 0 0 6px; font-size: 14px; }
.dnr-result p:last-child { margin-bottom: 0; }
.dnr-result-ok { background: var(--dnr-brand-soft); border: 1px solid var(--dnr-brand-line); }
.dnr-result-ok svg { color: var(--dnr-brand); }
.dnr-result-ok h2 { color: var(--dnr-brand-strong); }
.dnr-result-err { background: var(--dnr-danger-soft); border: 1px solid #f5c6c2; color: #7d1f19; }
.dnr-result-err svg { color: var(--dnr-danger); }
.dnr-result-err h2 { color: #7d1f19; }
.dnr-ref {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  background: #fff;
  border: 1px dashed var(--dnr-brand-line);
  border-radius: var(--dnr-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--dnr-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RETENTION / RIGHTS TABLES  (used inside the privacy notice)
   ═══════════════════════════════════════════════════════════════════════════ */

.dnr-table-wrap { overflow-x: auto; margin: 16px 0 24px; -webkit-overflow-scrolling: touch; }
.dnr-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.dnr-table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--dnr-muted);
  padding-bottom: 8px;
}
.dnr-table th,
.dnr-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--dnr-line);
}
.dnr-table thead th {
  background: var(--dnr-brand-soft);
  color: var(--dnr-ink);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dnr-table tbody th { background: var(--dnr-surface-soft); font-weight: 700; color: var(--dnr-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. LANGUAGE SWITCHER  (privacy notice: English / ಕನ್ನಡ / తెలుగు)
   ═══════════════════════════════════════════════════════════════════════════ */

.dnr-langbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px 12px;
  background: var(--dnr-surface-soft);
  border: 1px solid var(--dnr-line);
  border-radius: var(--dnr-radius-sm);
}
.dnr-langbar-label { font-size: 13px; font-weight: 700; color: var(--dnr-muted); margin-right: 2px; }
.dnr-lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--dnr-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dnr-text);
  text-decoration: none;
}
.dnr-lang:hover { border-color: var(--dnr-brand); color: var(--dnr-brand); }
.dnr-lang[aria-current="page"] {
  background: var(--dnr-brand);
  border-color: var(--dnr-brand);
  color: #fff;
}
.dnr-lang:focus-visible { outline: 3px solid var(--focus, #0b6bd3); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. Motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .dnr-consent, .dnr-cookie, .dnr-map, .dnr-req, .dnr-langbar,
  .dnr-consent *, .dnr-cookie *, .dnr-map *, .dnr-req *, .dnr-langbar * {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}