/*****************************************************************
 * DNSai Advanced DNS Lookup  –  MASTER STYLESHEET
 * ---------------------------------------------------------------
 *  All original selectors kept intact
 *  Sections renumbered and re-titled for quicker navigation
 *****************************************************************/

/* ================================================================
 *  1.  GLOBAL RESET & SCROLLBARS
 * ================================================================ */
*{
  box-sizing:border-box;
  /* custom scrollbar (WebKit + Firefox) */
  scrollbar-width:thin;
  scrollbar-color:#555555 #333333;
}
::-webkit-scrollbar        { width:12px; }
::-webkit-scrollbar-track  { background:#333333; }
::-webkit-scrollbar-thumb  {
  background-color:#555555;
  border-radius:6px;
  border:3px solid #333333;
}
::-webkit-scrollbar-thumb:hover{ background-color:#777777; }


/* ================================================================
 *  2.  BASE BODY & THEME MODES
 * ================================================================ */
body{
  font-family:Arial,sans-serif;
  font-size:16px;
  margin:0;
  padding:0;
  color:#fff;
  background:#000;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow:auto;
  transition:background .3s,color .3s;
}
.dark-mode  { background:#000; color:#fff; }
.light-mode { background:#fff; color:#000; }


/* ================================================================
 *  3.  TYPOGRAPHY & INLINE UTILITIES
 * ================================================================ */
.centered{ text-align:center; margin:0; }
.bold    { font-weight:700; }
.thin    { font-weight:300; }
.small   { font-size:8px; text-align:left; padding-bottom:10px; }
.required-asterisk{ color:red; }

/* ================================================================
 *  4.  TITLES, HEADERS & CREATOR CREDIT
 * ================================================================ */
/* -- shared header helpers -- */
.title-section               { text-align:center; margin-bottom:30px; }
.title-section .logo         { max-width:80px; margin-bottom:10px; }

.title-section .main-title,
.title                       { font-size:1.75rem; margin:0; line-height:1; }
.header_title                { text-align:center; font-size:42px; padding:35px 0 15px; margin:5px; }

.title-section .main-title .bold,
.title .bold,
.header_title .bold          { font-weight:700; }
.title-section .main-title .thin,
.title .thin,
.header_title .thin          { font-weight:300; }

.title-section .sub-title,
.sub-title                   { text-align:center; font-size:1rem; font-weight:700; margin:8px 0 16px; color:#fff; }

.creator                         { text-align:center; font-size:8pt; padding-bottom:15px; }
.creator a.creator-link          { color:#fff; text-decoration:none; }
.creator a.creator-link:hover    { text-decoration:underline; }
.title-section .creator          { font-size:8pt; }
.title-section .creator a.creator-link,
.title-section .creator a.creator-link:hover{ color:#fff; text-decoration:none; }

.header_title img {
  vertical-align: middle;
  max-width: 60px;
  margin-right: 12px;
}

/* ================================================================
 *  5.  NAVIGATION MENU, MODE SWITCH & FLY-OUT
 * ================================================================ */

.nav-menu{
  position:fixed; top:0; width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0;
  background:rgba(0,0,0,.8);
  transition:background .3s;
  z-index:1000;
}

.nav-menu a,
.menu-icon{
  color:#fff;
  text-decoration:none;
  font-size:10px;
  margin:0 10px;
  transition:color .3s;
}
.nav-menu a:hover,
.menu-icon:hover{ color:#e6e6e6; }

.menu-icon  { cursor:pointer; font-size:20px; color:#404040; padding-right:10px; }
.menu-close { cursor:pointer; font-size:16px; color:#424242; }
.nav-logo   { max-width:30px; height:auto; }
.logo       { display:block; margin:0 auto; max-width:70px; height:auto; }

.light-mode .nav-menu       { background:rgba(255,255,255,.8); }
.light-mode .nav-menu a,
.light-mode .menu-icon      { color:#000; }

/* -- fly-out panel -- */
.flyout-menu{
  position:fixed; right:-250px; top:0; width:250px; height:100%;
  background:#1d1d1d; border-left:1px solid #000;
  box-shadow:5px 0 15px rgba(0,0,0,.5);
  padding:20px; overflow:auto; transition:right .3s ease; z-index:999;
}
.flyout-menu a{ display:block; color:#fff; padding:10px; font-size:14px; text-decoration:none; }
.flyout-menu a:hover{ color:#e6e6e6; }

/* -- dark/light toggle -- */
.mode-switch{ display:flex; align-items:center; }
.mode-switch input{ display:none; }
.mode-switch label{
  width:35px; height:15px; background:#ccc; border-radius:25px;
  position:relative; cursor:pointer; margin-left:10px;
}
.mode-switch label::after{
  content:''; width:11px; height:11px; background:#fff; border-radius:50%;
  position:absolute; top:2px; left:2px; transition:.3s;
}
.mode-switch input:checked+label::after{ transform:translateX(20px); }


/* ================================================================
 *  6.  HERO BANNER (Shared)
 * ================================================================ */
.header-hero{
  position:relative; width:100%; height:300px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:40px; font-weight:bold; text-align:center;
}
.header-hero video{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100%; height:100%; object-fit:cover; z-index:-1;
}
.header_title{ display:flex; flex-direction:column; align-items:center; }

.hero-main     { display:flex; align-items:center; gap:6px; }
.hero-subtitle { font-size:14px; margin:4px 0 0; }

/* -- hero mobile -- */
@media(max-width:768px){
  .header-hero{ height:200px; font-size:24px; }
  .header_title{ font-size:20px; }
  .content     { width:90%; }
}
.light-mode .header-hero{ color:#fff; }

.company-info-block {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.company-info-block img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* ================================================================
 *  7.  INPUT FORM LAYOUT (Default)
 * ================================================================ */
.container{
  max-width: 460px;
  margin: 60px auto 0;
  padding: 15px;
  background: #1c1c1c;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,.3);
}
.light-mode .container{ background: #333; color: #fff; }

/* ----------------------------------------------------------------
   FORM FIELDS
   ---------------------------------------------------------------- */
.form-input{
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #555;
  background: #444;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
}
.form-input::placeholder{ color: #bbb; }

/* ----------------------------------------------------------------
   BASE BUTTON STYLE  –  shared by ALL buttons
   ---------------------------------------------------------------- */
button,
.submit-button{                       /* `.submit-button` is an alias */
  width: 100%;                        /* overridden later if needed   */
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #555;
  background: linear-gradient(to bottom, #0054FF, #0447D3);
  color: #fff;
  cursor: pointer;
  transition: background .3s;
  box-sizing: border-box;
}
button:disabled,
.submit-button:disabled{
  opacity: .5;
  cursor: not-allowed;
}
button:hover:not(:disabled),
.submit-button:hover:not(:disabled){
  background: linear-gradient(to bottom, #0447D3, #0054FF);
}

/* ----------------------------------------------------------------
   RESULTS-VIEW CTA BUTTONS  –  “Advanced DNSai Lookup”, “Domain Profile”
   ---------------------------------------------------------------- */
.search-button{                       /* add alongside .submit-button */
  width:  auto;                       /* shrink-to-fit                */
  max-width: 250px;                   /* hard cap                     */
  padding: 10px 14px;                 /* symmetric horizontal padding */
}

/* ----------------------------------------------------------------
   NEW-SEARCH MINI BUTTON (post-results corner case)
   ---------------------------------------------------------------- */
.new-search-button,
.new-search-button2{ display: none; }  /* still hidden by default     */
.new-search-button2{
  width: 22%;
  padding: 4px;
  margin: 10px auto;
  background: transparent;
  border: none;
  text-align: center;
  transition: background-color .3s;
}
.new-search-button2:hover{
  background: #242424 !important;
  color: #fff;
}

/* ----------------------------------------------------------------
   COPY BUTTONS  (small, subtle)
   ---------------------------------------------------------------- */
.copy-button,
.copy-button2{
  width: 18%;
  float: right;
  font-size: 12px;
  color: #ccc;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  text-align: right;
}
.copy-button  { margin-top: 37px; }
.copy-button2 { margin-top: 7px; }
.copy-button:hover,
.copy-button2:hover{
  border: 1px solid #ccc;
  background: #000 !important;
}

.light-mode .small a{ color: #000; text-decoration: none; }


/* ================================================================
 *  8.  COLLAPSIBLE DRAWERS
 * ================================================================ */
.drawer{ overflow:hidden; max-height:0; transition:max-height .3s ease-out; }
.drawer.open{ max-height:100px; }

.drawer-toggle{
  cursor:pointer; color:#666; margin-bottom:20px; font-size:12px;
  display:block; text-align:right;
}
.drawer-toggle:hover{ color:#ccc; }


/* ================================================================
 *  9.  PROCESSING MODAL & SPINNER
 * ================================================================ */
#processingModal{
  display:none; position:fixed; z-index:999999;
  left:0; top:0; width:100%; height:100%;
  overflow:auto; background-color:rgba(8,34,67,.5);
  justify-content:center; align-items:center;
}
#processingModalContent{
  background:linear-gradient(to bottom,#191919,#333333);
  padding:20px; border:1px solid #97B8D5; width:45%;
  text-align:center; border-radius:15px; color:white;
}
.dark-mode  #processingModalContent{ background-color:#333333; color:white; }
.light-mode #processingModalContent{ background-color:#474747; color:white; }

.spinner{ display:inline; font-size:1rem; white-space:nowrap; }
.dot{ display:inline-block; animation:spin 1.2s linear infinite; }
.dot:nth-child(1){ animation-delay:-.2s; }
.dot:nth-child(2){ animation-delay:-.1s; }
@keyframes spin{ 0%,80%,100%{ transform:scale(.5);} 40%{ transform:scale(1);} }

/* ================================================================
 * 10.  RESULTS LAYOUT  (<body class="results-layout">)
 * ================================================================ */

/* ---------- outer container ---------- */
.results-layout .container{
  flex: 1 1 auto;
  width: auto;
  max-width: 1100px;
  margin: 0 auto;
  padding: 15px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- hero banner ---------- */
.results-layout .header-hero   { margin-bottom: 0; }
.results-layout .header_title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  padding: 35px 0 15px;
  margin: 5px;
  font-weight: 400;   /* normal weight (not bold) */
}

.results-layout .header_title img{
  vertical-align: middle;
  max-width: 60px;
  margin-right: 12px;
}

/* ---------- quadrant grid ---------- */
.results-layout .top-row,
.results-layout .bottom-row{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.results-layout .left-column,
.results-layout .right-column{ width: 100%; }
.results-layout .right-column .quadrant2{ margin-bottom: 20px; }
.results-layout .ad1,
.results-layout .ad2{
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  margin-top: 15px;
  transition: height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

/* Ad iframe styling */
.results-layout .ad1 .ad-iframe,
.results-layout .ad2 .ad-iframe {
  width: 100%;
  max-width: 350px;
  height: 145px;
  border: none;
  display: block;
  margin: 0 auto;
  transition: height 0.3s ease, opacity 0.3s ease;
}

/* Collapsed state when ads are disabled */
.results-layout .ad1.ad-hidden,
.results-layout .ad2.ad-hidden {
  height: 0 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.results-layout .ad1.ad-hidden .ad-iframe,
.results-layout .ad2.ad-hidden .ad-iframe {
  height: 0 !important;
  opacity: 0;
}
.results-layout .quadrant3{ margin-top: 20px; }

@media (min-width: 768px){
  .results-layout .top-row      { flex-direction: row;  align-items: flex-start; }
  .results-layout .left-column  { width: calc(80% - 200px); }
  .results-layout .right-column { width: calc(20% + 200px); display: flex; flex-direction: column; }
  .results-layout .bottom-row   { flex-direction: row; }
  .results-layout .ad2          { width: 20%; }
  .results-layout .quadrant4    { width: 80%; }
}

/* ---------- summary box ---------- */
.dns-records-title,
.summary-title {
  font-size: 24px;
  margin-top: 22px;
  padding-top: 20px;
  display: none;
}

.summary-box span {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  white-space: normal;
}

.results-layout .summary-box{
  border: 1px solid #555;
  border-radius: 8px;
  padding: 20px;
  background: #111;
  margin-bottom: 20px;
  white-space: normal;
  overflow-x: visible;
  max-width: 100%;
}

/* light-mode summary overrides */
.light-mode .summary-box{
  background: #f1f1f1 !important;
  border: 1px solid #ccc !important;
  color: #000 !important;
}
.light-mode .summary-box span[style*="font-weight:bold; font-size:16px; color:#fff;"]{ color: #000 !important; }
.light-mode .summary-box span[style*="font-size:18px; color:#FC6FCF;"]            { color: #a9005f !important; }
.light-mode .summary-box span[style*="color:#97B8D5;"]                            { color: #000080 !important; }
.light-mode .summary-box span[style*="color:#D3D212;"]                            { color: #cc5500 !important; }

/* ---------- DNS-Records Section (exact Step-1 match) ---------- */
.results-layout .dns-records-section{
  margin-top: 20px;
  padding: 20px;
  background-color: #111;
  border-radius: 8px;
}
.light-mode .dns-records-section{ background-color: #f1f1f1; }

/* header row */
.results-layout .dns-records-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.results-layout .dns-records-header h2{
  margin: 0;
  font-size: 24px;
}

/* grid that holds the record boxes */
.results-layout .records-grid{
  display: grid;
  grid-template-columns: 1fr;   /* For narrower screens */
  grid-gap: 15px;
  margin-top: 20px;
}

/* record box */
.results-layout .record-box{
  background-color: #222;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #333;
  max-width: 1030px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.results-layout .record-box h3{
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 16px;
  color: #40a8ff;
}
.results-layout .record-box p{
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.4em;
}

/* light-mode record overrides */
.light-mode .record-box{
  background-color: #fff;
  border: 1px solid #ccc;
}


/* ================================================================
 * LIGHT-MODE TEXT FIXES  –  normal text, records, footer
 * (append to the end of advanced-dnsai.css)
 * ================================================================ */

/* master text colour for light mode */
.light-mode,
.light-mode .record-box,
.light-mode .record-box p,
.light-mode .summary-box,
/*.light-mode .creator,*/
.light-mode .footer {
  color: #000 !important;
}

/* keep links readable in light mode */
.light-mode .content a,
.light-mode .creator-link,
.light-mode .footer-link {
  color: #0054FF;
}
.light-mode .content a:hover,
.light-mode .creator-link:hover,
.light-mode .footer-link:hover {
  color: #005FFF;
}

/* ================================================================
 * 20.  LIGHT-MODE EXTRAS  –  nav, fly-out, marketing copy, footer
 *      (append this block after all existing rules)
 * ================================================================ */

/* ================================================================
 * 20.  LIGHT-MODE EXTRAS  –  nav, fly-out, records header, marketing,
 *      footer, misc dynamic text
 *      (append after all existing rules)
 * ================================================================ */

/* ----------------------------------------------------------------
   1)  Global “plain-text” colour in light mode
   ---------------------------------------------------------------- */
.light-mode,
.light-mode .results-layout,
.light-mode .results-layout .container,
.light-mode .quadrant4,
.light-mode .quadrant4 p,
.light-mode .quadrant4 h3,
.light-mode .summary-title,
.light-mode .dns-records-title,
.light-mode #domainProfileTitle,
.light-mode #domainProfileDesc,
/*.light-mode .creator,*/
.light-mode .small,
.light-mode .bulk-button-container,
/*.light-mode .menu-close {
  color: #000 !important;
}*/

/* ----------------------------------------------------------------
   2)  DNS-Records header block (h2, <p>, dynamic spans)
   ---------------------------------------------------------------- */
.light-mode .dns-records-header,
.light-mode .dns-records-header h2,
.light-mode .dns-records-header p,
.light-mode .dns-records-header span {
  color: #000 !important;
}

/* ----------------------------------------------------------------
   3)  Nav-bar links, icons, hover
   ---------------------------------------------------------------- */
.light-mode .nav-menu a,
.light-mode .menu-icon,
/*.light-mode .menu-close { color: #000; }*/
.light-mode .nav-menu a:hover,
.light-mode .menu-icon:hover,
.light-mode .menu-close:hover { color: #333; }

/* ----------------------------------------------------------------
   4)  Fly-out menu background + links
   ---------------------------------------------------------------- */
/*.light-mode .flyout-menu        { background: #f9f9f9; }
.light-mode .flyout-menu a      { color: #000; }
.light-mode .flyout-menu a:hover{ color: #333; }*/

/* ----------------------------------------------------------------
   5)  Footer colours
   ---------------------------------------------------------------- */
.light-mode .footer,
.light-mode .footer-link { color: #000 !important; }
.light-mode .footer-link:hover { color: #333 !important; }

/* ----------------------------------------------------------------
   6)  Bottom-row marketing block (quadrant4)
   ---------------------------------------------------------------- */
.light-mode .bottom-row,
.light-mode .quadrant4 { background: transparent; color: #000; }

/* ----------------------------------------------------------------
   7)  Links inside MAIN CONTENT keep blue scheme
   ---------------------------------------------------------------- */
.light-mode .content   a,
.light-mode .creator-link,
.light-mode .bulk-button,
.light-mode .link2        { color: #0054FF; }
.light-mode .content   a:hover,
.light-mode .creator-link:hover,
.light-mode .bulk-button:hover,
.light-mode .link2:hover  { color: #005FFF; }
.light-mode .dns-records-section p { color: #000 !important; }

/* ----------------------------------------------------------------
   8)  Copy / Share buttons text colour in light mode
   ---------------------------------------------------------------- */
.light-mode .copy-button,
.light-mode .copy-button2 { color: #666; }

/* ----------------------------------------------------------------
   9)  Buttons already use gradients that contrast well in both modes
   ---------------------------------------------------------------- */


/* ---------- tablet / midsize tweaks ---------- */
@media (min-width: 769px) and (max-width: 1024px){
  /* slightly wider main container, a bit more breathing room */
  .results-layout .container           { max-width: 1050px; padding: 20px; }

  /* bump text size in the records panel */
  .results-layout .dns-records-section { font-size: 10pt; }

  /* record boxes: larger text + wider cap */
  .results-layout .record-box{
    font-size: 11px;
    max-width: 800px;         /* was 1050 on desktop, 400 on mobile */
    padding-right: 10px;
  }
}

/* ---------- mobile tweaks ---------- */
@media (max-width: 768px){
  .results-layout .container           { max-width: 768px; padding: 15px; }
  .results-layout .dns-records-section { font-size: 9pt; }
  .results-layout .record-box{
    font-size: 9px;
    max-width: 400px;
    min-width: 350px;
    padding-right: 5px;
  }
}

/* ================================================================
 * 11.  NAV-BAR SEARCH (Results View) – FIXED FOR TRUE CENTRE
 * ================================================================ */

/* give the bar a positioning context in results view */

/* layout positioning */
.results-layout .nav-search{
  order: 2;                              /* original order retained */
  position: absolute;                    /* pop out of flex flow */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);      /* hard-centre trick */

  flex: 0 0 auto;                        /* shrink-to-fit */
  width: auto;
  margin: 0;
  display: flex!important;
  justify-content: center;
  align-items: center;
}

.results-layout .nav-links{
  order: 3;
  margin-left: auto;
}

/* form sizing */
.results-layout .nav-search form{
  width: auto;            /* let contents dictate width */
  max-width: none;        /* remove 320 px cap */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.results-layout .nav-search form input{
  width: 100%;
  max-width: 135px;
  font-size: 12px;
  margin-right: 2px;
}
.results-layout .nav-search form button{
  flex: 0 0 auto;
  font-size: 11px;
  padding: 4px 6px;
  margin-left: 2px;
}

/* dedicated input + button styles */
.nav-search-input{
  font-size: 12px;
  width: 100%;
  max-width: 135px;
  padding: 2px 6px;
  margin: 0;
  border-radius: 5px;
  border: 1px solid #555;
  background: #444;
  color: #fff;
  box-sizing: border-box;
}
.nav-search-input::placeholder{ color: #bbb; }

.nav-submit-button{
  background: linear-gradient(to bottom, #0054FF, #0447D3);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background .3s;
  font-size: 11px;
  padding: 4px 10px;
  width: auto;
  margin-left: 2px;
}
.nav-submit-button:disabled{ opacity: .5; cursor: not-allowed; }
.nav-submit-button:hover:not(:disabled){
  background: linear-gradient(to bottom, #0447D3, #0054FF);
}

/* mobile fallback */
@media (max-width: 768px){
  .results-layout .nav-search{
    position: static;
    transform: none;
    flex: 1 1 auto;
    margin: 0 12px;
  }
  .results-layout .nav-search form{
    max-width: 250px;
  }
}

/* misc copy-button override */
.results-layout .copy-button{
  width: 50px;
  margin-top: 5px;
  float: right;
  font-size: 12px;
  color: #ccc;
  background: transparent;
  border: none;
  cursor: pointer;
}
.results-layout .copy-button:hover{
  border: 1px solid #ccc;
  background: #000!important;
}

/* anchor colours inside results .content */
.content a{ color: #0054FF; text-decoration: none; }
.content a:hover{ color: #005FFF; }

/* ================================================================
 * 12.  BULK-LOOKUP CTA & MISC LINKS
 * ================================================================ */
.bulk-button{
  display:inline-block; font-size:9pt; color:#fff;
  border:1px solid #fff; border-radius:50px;
  padding:4px 10px; margin-top:5px; text-align:center;
  text-decoration:none; transition:all .3s ease;
}
.bulk-button:hover{ background:#fff; color:#000; }

.light-mode .bulk-button{
  color: #000;             /* black text       */
  border: 1px solid #000;  /* black outline    */
  background: transparent; /* keep background clear */
}


.light-mode .bulk-button:hover{ background:#000; color:#fff; }

.bulk-button-container{ display:flex; justify-content:center; align-items:center; height:100px; }

.link2            { color:#fff; text-decoration:none; }
.light-mode .link2{ color:#000; text-decoration:none; }


/* ================================================================
 * 13.  FOOTER
 * ================================================================ */
.footer{
  position:relative; bottom:10px; width:100%;
  text-align:center; font-size:6pt; padding-bottom:15px;
  transition:background .3s,color .3s;
}
.footer-link{ color:#fff; text-decoration:none; transition:color .3s; }
.footer-link:hover{ text-decoration:none; color:#fff; }
.light-mode .footer-link{ color:#000; }


/* ================================================================
 * 14.  NOTIFICATION POP-UPS
 * ================================================================ */
#copyNotification,
#shareNotification{
  display:none; position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#0F1926; color:#fff;
  padding:12px; border:1px solid #97B8D5; border-radius:5px; z-index:1000;
}
#shareNotification{ z-index:1005; }


/* ================================================================
 * 15.  HIDDEN / MISC HELPERS
 * ================================================================ */
.hidden-honeypot{ display:none; }
.grecaptcha-badge{ visibility:hidden; }

/* ================================================================
 * 16.  ADDITIONAL MOBILE MEDIA QUERIES  – FIXED
 * ================================================================ */
@media (max-width:768px){

  /* container + record sizing */
  .container           { max-width:768px; margin:0 auto; margin-top:50px; padding:15px; }
  .dns-records-section { font-size:9pt;   max-width:100%; }
  .record-box          { font-size:9px;   max-width:400px; min-width:350px; padding-right:5px; padding-left:5px}

  /* nav-bar visibility tweaks */
  .nav-links{
    display:flex !important;            /* keep wrapper visible */
    align-items:center;
  }
  .nav-links a{
    display:none !important;            /* hide text links */
  }
  .menu-icon{
    display:inline-block !important;    /* always show ☰ */
  }

  /* centred search bar */
  .nav-search           { display:block; width:200px; }
  .nav-search form input{ max-width:135px; }
  .results-layout .nav-search form{ max-width:250px; }
}


/* ================================================================
 * 17.  NAV-SEARCH FORM (Global)
 * ================================================================ */
.nav-search form{ display:flex; flex-wrap:nowrap; align-items:center; }
.nav-search form input{ margin-right:2px; }
.nav-search form button{ margin-left:2px; }

.nav-form-input{
  font-size:12px; width:100%; padding:2px; margin:10px 0;
  border-radius:5px; border:1px solid #555555;
  background-color:#444444; color:white; box-sizing:border-box;
}
.nav-form-input::placeholder{ color:#bbbbbb; }


/* ================================================================
 * 18.  COPY & SHARE BUTTONS (Inline)
 * ================================================================ */
.copy-button{
  margin-top:5px; width:50px; float:right; text-align:right; cursor:pointer;
  font-size:12px; color:#cccccc; border:none; padding:4px!important;
  background:transparent; outline:none;
}
.copy-button:hover{
  border:1px solid #cccccc; background:#000000!important;
}
.copy-button2{ /* retained duplicate styling for specific contexts */
  width:18%; float:right; font-size:12px; color:#ccc;
  background:transparent; border:none; cursor:pointer;
  padding:4px; display:none; text-align:right; margin-top:7px;
}
.copy-button2:hover{ border:1px solid #ccc; background:#000!important; }


/* ================================================================
 * 19.  DISCLAIMER SECTION (always visible)
 * ================================================================ */
.disclaimer-section{
  max-width:420px;
  margin:40px auto;
  line-height:1.4em;
}
.light-mode .disclaimer-section{ color:#000; }

/* ================================================================
 *  END OF STYLESHEET
 * ================================================================ */