/* =========================================================
   ShopSockets - forms.css
   Purpose:
   - System-wide shared form/layout/button utilities
   ========================================================= */

/* ---------- Global page wrapper ---------- */

.container{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.ucase{
  text-transform: uppercase;
}

/* ---------- Shared titles / panels ---------- */

.page-header {
    margin-bottom: 4px !important;
}

.page-header h2 {
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
}

.page-title{
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
}

.panel{
  border: 1px solid #111;
  padding: 5px 8px;
  background: #cfe0e3;
}

.panel-title{
  font-weight: bold;
  margin-bottom: 4px;
}

/* ---------- Shared compact controls ---------- */

.input-compact{
  box-sizing: border-box;
  width: 180px;
  height: 22px;
  padding: 2px 4px;
  font-size: 12px;
}

.input-compact-custno{
  width: 50px;
  font-size: 12px;
}

.country-select{
  width: 180px !important;
  max-width: 180px !important;
  height: auto;
  font-size: 12px;
  padding: 2px;
}

select.input-compact{
  height: 22px;
  padding: 1px 4px;
}

.form-row-compact{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.form-row-compact label{
  width: 120px;
  min-width: 120px;
  margin: 0;
  padding-right: 6px;
  font-size: 0.80rem;
  white-space: nowrap;
}

.form-row-compact input,
.form-row-compact select{
  font-size: 12px;
  padding: 2px 4px;
  height: 22px;
}

.form-row-compact input[type="checkbox"]{
  margin-right: 6px;
}

.form-row-compact-custno label{
  width: 50px !important;
  min-width: 50px !important;
  white-space: nowrap;
}

/* ---------- Shared checkbox layouts ---------- */

.checkbox-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin-bottom: 6px;
}

.checkbox-item{
  display: flex;
  align-items: center;
}

.checkbox-item label{
  margin: 0;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.checkbox-item input[type="checkbox"]{
  margin-right: 4px;
}

/* ---------- Shared buttons ---------- */

button.btn-ss{
  font-size: 12px !important;
  padding: 0px 6px !important;
  line-height: 1 !important;
}

.btn.btn-ss{
  font-size: 10px !important;
  padding: 0px 4px !important;
  line-height: 1 !important;
  height: 18px !important;
}

.btn-processing-has-text{
  background:#FFEBCD !important;
  color:#000 !important;
}

.btn-shipto-has-data{
  background: #FFEBCD !important;
  color: #000 !important;
}

.btn-documents-has-data{
  background-color: #FFEBCD !important;
  border-color: #e0c9a6 !important;
  color: #000;
}

#useDocumentBtn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-compact:focus{
  box-shadow: none !important;
}

.btn-secondary {
    background-color: #555 !important;
    border-color: #444 !important;
    color: #fff !important;
}

.btn-compact.btn-secondary:hover{
  background-color: #555 !important;
  border-color: #444 !important;
  color: #fff !important;
}

.contacts-table .btn-compact:hover{
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

/* ---------- Shared sticky form actions ---------- */

.form-actions{
  position: sticky;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  bottom: 0;
  background: #fff;
  padding: 10px 10px;
  border-top: 1px solid #ccc;
  z-index: 10;
}

.form-actions .btn[type="submit"] {
  margin-right: 12px;
}

/* ---------- Shared scrollable list/table containers ---------- */

.scroll-list-wrap{
  border: 1px solid #111;
  background: #cfe0e3;
}

.scroll-list-header{
  background: #0B0B3B;
  color: #fff;
  font-weight: bold;
  padding: 4px 8px;
}

.scroll-list-panel{
  height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.scroll-list-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  line-height: 1.1;
}

.scroll-list-table td{
  padding: 1px 6px;
  border-top: 1px solid #aaa;
  vertical-align: middle;
}

/* ---------- Shared modal shell ---------- */

.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-card{
  background: #fff;
  max-width: calc(100vw - 20px);
  padding: 14px;
  border-radius: 6px;
  box-shadow: 0 8px 25px rgba(0,0,0,.25);
  font-size: 12px;
}

.modal-header-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.modal-title{
  font-weight: bold;
  font-size: 14px;
}

/* ---------- Shared compact modal rows ---------- */

.cm-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.cm-field{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
}

.cm-field label{
  width: 92px;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
}

.cm-field input,
.cm-field select{
  width: 100%;
  height: 22px;
  padding: 2px 4px;
  font-size: 12px;
  box-sizing: border-box;
}

.cm-row-2{
  display:flex;
  gap:12px;
  margin-bottom:6px;
}

.cm-row-3{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.cm-3{
  display:flex;
  align-items:center;
  gap:6px;
}

.cm-inline{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:10px;
  font-size:12px;
}

.cm-inline label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
}

.cm-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
}

.cm-actions .left,
.cm-actions .right{
  display:flex;
  gap:8px;
}

/* ---------- Shared contact-field uppercase ---------- */

#contactForm input[name="contact_name"],
#contactForm input[name="contact_title"]{
  text-transform: uppercase;
}

.field-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    border: 1px solid #999;
    background: #e6eff2;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    cursor: help;
}

/* Formatting for universal re-entry of password */
.verify-container {
    max-width: 520px;
    margin: 40px auto;
}

.verify-card {
    background: #cfe0e3;
    border: 1px solid #9fb6bb;
    padding: 12px;
    border-radius: 4px;
}

.verify-card h2 {
    margin-top: 0;
    font-size: 20px;
}

.verify-card p {
    margin-bottom: 12px;
}