.listentries {
   input, select, textarea { width: 100%; margin-bottom: 1em; padding: 0.6em; }
   input[type=checkbox] { width: auto; }
   input[type=radio] { width: auto; }
   input::placeholder { color: #ccc; font-style: italic;}
   label { font-weight: bold; display: block; margin-top: 1em; }
   h1 { border-bottom: 1px solid #ccc; padding-bottom: 0.2em; }
   h2 { border-bottom: 1px solid #ccc; padding-bottom: 0.2em; font-size: 1em; font-weight: normal;}
   span { /* uside in step4_domain_details */
      float: right;
      color: orange;
      font-size: 0.7em;
      font-style: italic;
   }
   .size {
      padding: 0px;
      margin: 0px;
      //font-size: 0px;
      //line-height: 0px;
      border: 0px solid black;
   }
   .review {
      width: 90%;
      border: 0px solid #888;
      margin:0px auto 0px auto;
      td { background: none; border: 1px solid #ccc; padding:2px 5px;}
      .rgt { text-align: right; }
   }
   .dim {
      color: #ccc;
      font-style: italic;
   }
   .hosting {
      border: 1px solid #ccc;
      padding: 15px 30px;
      border-radius: 5px;
      background: #f9fcf9;
   }
   /*·······························································*/
   input[type=submit], button[type=submit] {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
   }
/*·······························································*/
/* BLUE                                                          */

.btn-ok {
background-color: #007bff;
}
.btn-ok:hover {
background-color: #0056b3;
}

   /*·······························································*/
   /* GRAY-DISABLED                                                 */
   .btn-disabled, input:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
   }
/*·······························································*/
/* RED                                                           */

.btn-back {
background-color: #dc3545;
}
.btn-back:hover {
background-color: #a71d2a;
}

   /*·······························································*/
   /* GREEN SMALL BUTTON                                            */
   input[type=submit].btn-domain {
      margin: 0px;
   }
   .btn-domain {
      width: auto;
      padding: 10px;
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 5px;
      background-color: #28a745;
   }
   .btn-domain:hover {
      background-color: #218838;
   }
   /*·······························································*/
   /* RED SMALL BUTTON                                              */
   .btn-remove {
      width: auto;
      padding: 10px;
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 5px;
      background-color: #dc3545;
   }
   .btn-remove:hover {
      background-color: #a71d2a;
   }
   /*·······························································*/
   \@keyframes flash {
      0%   { opacity: 1; }
      50%  { opacity: 0.1; }
      100% { opacity: 1; }
   }
   .flash-text {
      animation: flash 1s linear infinite;
      //color: #555;
      color: #55f;
      font-style: italic;
   }
   /*·······························································*/
   .no-flash {
      animation: none !important;
      color: red;
   }
   /*·······························································*/
   .sugg-div {
      border: 1px solid #ccc;
      padding: 10px 30px;
      margin: 0px 30px 30px 30px;
      border-radius: 10px;
   }
}
/*··································································*/
/* GREEN                                                            */
.btn-alt {
   background-color: #0ef;
   margin: 0px;
}
.btn-alt:hover {
   background-color: #0ae;
}
/* --- Step 5 Httpd table alignment helpers --- */
/*
#httpd-table {
  table-layout: fixed;
}
#httpd-table thead { display: none; }
#httpd-table th, #httpd-table td {
  vertical-align: top;
   display: block; width: 100%;
   border: none; padding: 4px 0;
}
#httpd-table tr {
  border: 3px solid #ddd; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fff;
}
*/


#httpd-table thead { display: none; }
   #httpd-table, #httpd-table tbody, #httpd-table tr, #httpd-table td { display: block; width: 100%; }
   #httpd-table tr { border: 3px solid #ddd; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fff; }
   #httpd-table td { border: none; padding: 4px 0; }




#webfw-table {
  table-layout: fixed;
}
#webfw-table th, #webfw-table td {
  vertical-align: top;
}
/* --- Step 7 Email table alignment helpers --- */
#email-table {
  table-layout: fixed;
}
#email-table th, #email-table td {
  vertical-align: top;
}
.col-user   { width: 28%; }
.col-type   { width: 28%; }
.col-secret { width: 28%; }
.col-actions{ } #width: 8%;  }
/* Input + domain affix on one line */
.affix-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.affix-input input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}
.affix {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

/* Mobile keeps your existing behavior; nothing else to change */


/* Reuse mobile-friendly style similar to Step 7 */
@media (max-width: 640px) {
   #httpd-table thead { display: none; }
   #httpd-table, #httpd-table tbody, #httpd-table tr, #httpd-table td { display: block; width: 100%; }
   #httpd-table tr { border: 3px solid #ddd; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fff; }
   #httpd-table td { border: none; padding: 4px 0; }
}


/* Mobile-friendly like in Steps 5 & 7 */
/*
@media (max-width: 640px) {
   #webfw-table thead { display: none; }
   #webfw-table, #webfw-table tbody, #webfw-table tr, #webfw-table td { display: block; width: 100%; }
   #webfw-table tr { border: 1px solid #ddd; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fff; }
   #webfw-table td { border: none; padding: 4px 0; }
}
*/


/* Mobile-friendly table for Step 7 only */
@media (max-width: 640px) {
   #email-table thead { display: none; }
   #email-table, #email-table tbody, #email-table tr, #email-table td { display: block; width: 100%; }
   #email-table tr { border: 1px solid #ddd; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fff; }
   #email-table td { border: none; padding: 4px 0; }
   #email-table td .errline, #email-table td .errfield { margin-top: 4px; }
   #email-table button.btn-back { width: 100%; margin-top: 6px; }
}

.preview-line {
   display:block;
   padding:6px 8px;
   //background:#fff7e6;
   //background:yellow;
   //border-left:3px solid #ff9800;
   //color:#8a4b00;
   color:#ccc;
   font-size:13px;
   border-radius:4px;
}

  .httpd-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }
  .httpd-card .controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto; /* zone | proto | delete */
    gap: 8px;
    align-items: center;
  }
  .httpd-card .controls input[type="text"],
  .httpd-card .controls select {
    width: 100%;
  }
  .httpd-card .sub {
    margin-top: 8px;
    font-size: 13px;
  }
  .httpd-card .errline {
    color: #a71d2a;
    margin-top: 6px;
  }

  /* Mobile stacking */
  @media (max-width: 640px) {
    .httpd-card .controls {
      grid-template-columns: 1fr; /* stack */
    }
    .httpd-card .controls .btn-remove {
      width: 100%;
      justify-self: stretch;
    }
  }

/* Step 6 (Web forwarding) . same card look as step5 */
#webfw-table thead { display: none; }
#webfw-table, #webfw-table tbody, #webfw-table tr, #webfw-table td { display: block; width: 100%; }
#webfw-table tr { border: 3px solid #ddd; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fff; }
#webfw-table td { border: none; padding: 4px 0; }
/* Step 6 web forwarding grid (keep all 4 fields in one line on desktop) */
#webfw-table .httpd-card .controls {
  display: grid;
  grid-template-columns: 1fr 120px 1fr 160px auto; /* Zone | Protocol | Target | Redirect | Delete */
  gap: 8px;
  align-items: center;
}

/* Stack on narrow screens */
@media (max-width: 640px) {
  #webfw-table .httpd-card .controls {
    grid-template-columns: 1fr; /* one column per field */
  }
  #webfw-table .btn-remove {
    width: 100%;
  }
}


/* Step 7 (Email) . same card look */
#email-table thead { display: none; }
#email-table, #email-table tbody, #email-table tr, #email-table td { display: block; width: 100%; }
#email-table tr { border: 3px solid #ddd; border-radius: 8px; padding: 8px; margin-bottom: 10px; background: #fff; }
#email-table td { border: none; padding: 4px 0; }

/* Step 3 */
.dns-desc {
   display: inline-block;
   color: #ccc;
   font-size: 12px;
   margin-left:0px;
   font-style: italic;
}

/* Step 3 */
input[readonly] {
   opacity: 0.5;
   cursor: not-allowed;
   font-style: italic;
}

/* Step 9 */
.register {
   margin-left: 20px;
   font-size: 13px;
   color: #555;
   font-style: italic;
}

/* For all Steps */
.help-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    border:1px solid #ff9900;
    background-color: #fff900; /* yellow */
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 6px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0; /* CRITICAL for clipping */
}

.form-field-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-field-help {
  flex: 0 0 auto;
  cursor: pointer;
}

.form-field-input {
  width: 100%;
  box-sizing: border-box;
}


.help-tooltip {
    position: absolute;
    background: #fffaf2;
    border: 1px solid #ffa64d;
    padding: 10px;
    max-width: 260px;
    z-index: 9999;
    border-radius: 6px;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
    font-size: 11px;
    i {
       font-size: 12px;
       color: #f90;
    }
    b {
       font-size: 11px;
    }
    u {
       font-size: 11px;
       color: blue;
    }
}