/*
 * ship_responsive.css  —  CONSOLIDATED
 * -------------------------------------------------------------------------
 * Single stylesheet for ord_ent1.php and its dynamically-loaded account
 * snippets (e.g. ship_custom/55003.php).
 *
 * Load order in ord_ent1.php:
 *   1. css/ship_responsive.css  ← THIS FILE ONLY
 *      (eza.css and ship_custom/style.css are NOT linked from ord_ent1.php)
 *
 * eza.css is excluded from ord_ent1.php because its BODY rule
 * (white-space:pre; font-family:monospace) cannot be safely overridden
 * on mobile browsers from a descendant-selector scope.  eza.css continues
 * to load normally on all other pages of the site.
 *
 * ship_custom/style.css rules are fully absorbed into this file.
 *
 * Breakpoints:
 *   > 640px  two-column desktop layout
 *   <= 640px single-column mobile, stacked:
 *            Authorization > Service Details > Pickup > Delivery >
 *            Notes > Account Details > Submit/Clear
 * -------------------------------------------------------------------------
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */
:root {
  --navy:          #000053;
  --navy-light:    #e8e8f5;
  --red:           #cc0033;
  --border:        #c8c8d8;
  --border-light:  #e0e0ea;
  --bg-section:    #fafafa;
  --bg-section-alt:#f4f4fb;
  --label-color:   #065B9B;
  --label-w:       140px;
  --input-radius:  3px;
  --input-border:  #aaaacc;
  --focus-ring:    #000053;
  --gap-field:     4px;
  --gap-section:   8px;
  --font:          Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   BODY BASE
   Sets the font default for the whole page so the browser does not fall
   back to its built-in serif font when eza.css is not loaded.
   ========================================================================== */
body {
  font-family: var(--font);
  font-size: 0.88rem;
  color: #111;
  background: #fff;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   OUTER FORM WRAPPER
   ========================================================================== */
.form-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 10px 20px;
  overflow-x: hidden;
  background: #fff;
  color: #111;
  font-size: 0.88rem;
}

/* ==========================================================================
   FORM PAGE TITLE ROW
   ========================================================================== */
.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 6px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 10px;
  min-width: 0;
}
.form-title-row .page-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   TWO-COLUMN GRID
   ========================================================================== */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.two-col-grid > *,
.field-row > *,
.field-input > * {
  min-width: 0;
}

/* ==========================================================================
   SECTION PANELS
   ========================================================================== */
.section-panel {
  background: var(--bg-section);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--navy);
  border-radius: 3px;
  padding: var(--gap-section);
  min-width: 0;
}

.section-panel.pickup,
.section-panel.delivery { border-top-color: #004488; }

.section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-light);
}

/* ==========================================================================
   FIELD ROWS  (.field-row is used by the main form)
   ========================================================================== */
.field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--gap-field);
  flex-wrap: nowrap;
  min-width: 0;
}

.field-label {
  width: var(--label-w);
  min-width: var(--label-w);
  color: var(--label-color);
  font-size: 0.82rem;
  line-height: 1.3;
  flex-shrink: 0;
  text-align: right;
  padding-right: 6px;
}

.field-input {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   INPUT / SELECT GLOBAL STYLES  (scoped inside .form-wrapper)
   Padding 3px 5px is deliberately tighter than the previous 4px 6px.
   ========================================================================== */
.form-wrapper input[type="text"],
.form-wrapper input[type="date"],
.form-wrapper input[type="number"],
.form-wrapper input[type="email"],
.form-wrapper input[type="tel"],
.form-wrapper select,
.form-wrapper textarea {
  font-family: var(--font);
  font-size: 0.85rem;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: 3px 5px;            /* tighter than before (was 4px 6px) */
  background: #fff;
  color: #111;
  transition: border-color 0.15s, box-shadow 0.15s;
  max-width: 100%;
  white-space: normal;
}

.form-wrapper input[type="text"]:focus,
.form-wrapper input[type="date"]:focus,
.form-wrapper input[type="number"]:focus,
.form-wrapper input[type="email"]:focus,
.form-wrapper input[type="tel"]:focus,
.form-wrapper select:focus,
.form-wrapper textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 2px rgba(0,0,83,0.15);
}

/* Full-width inputs inside .field-input */
.field-input input[type="text"],
.field-input input[type="email"],
.field-input input[type="tel"],
.field-input select {
  width: 100%;
}

.form-wrapper input[type="date"]   { min-width: 120px; }
.form-wrapper input[type="number"] { width: 5em; }

/* ==========================================================================
   CITY / STATE / ZIP ROW
   ========================================================================== */
.city-state-zip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}
.city-state-zip .csz-city  { flex: 1; min-width: 60px; }
.city-state-zip .csz-state { width: 3em;  flex-shrink: 0; }
.city-state-zip .csz-zip   { width: 6em;  flex-shrink: 0; }
.csz-label {
  font-size: 0.78rem;
  color: var(--label-color);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   DIMENSIONS ROW  (L x W x H)
   ========================================================================== */
.dimensions-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.dimensions-row input { width: 4.5em; flex-shrink: 0; }
.dim-sep { font-size: 0.8rem; color: #555; padding: 0 2px; flex-shrink: 0; }

/* ==========================================================================
   SERVICE SELECTS + PIECES / WEIGHT
   ========================================================================== */
.svc-selects {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.svc-selects select { flex: 1; min-width: 90px; }

.pieces-weight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.pieces-weight input[type="text"] { width: 5em; flex-shrink: 0; }
.pw-label {
  font-size: 0.82rem;
  color: var(--label-color);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   ADDRESS SEARCH BUTTON
   ========================================================================== */
.search-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.search-btn:hover { opacity: 1; }
.search-btn img { display: block; width: 18px; height: auto; }

/* ==========================================================================
   SAVE-TO-ADDRESS-BOOK ROW
   ========================================================================== */
.save-addr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #555;
}
.save-addr-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   READY DATE / TIME ROW
   ========================================================================== */
.ready-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 0 2px;
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
  min-width: 0;
}
.ready-date-row .rd-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
}
.time-selects { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.time-selects select { width: auto; }

/* ==========================================================================
   LOWER FORM AREA
   ========================================================================== */
.form-lower-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.lower-notes {
  background: var(--bg-section-alt);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--navy);
  border-radius: 3px;
  padding: var(--gap-section);
  min-width: 0;
}
.lower-notes .section-title { margin-bottom: 6px; }
.lower-notes input[type="text"] {
  width: 100%;
  margin-bottom: 3px;
  display: block;
}

.lower-acct { min-width: 0; }

.lower-submit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: var(--gap-section) 0;
  border-top: 1px solid var(--border-light);
  min-width: 0;
}
.lower-submit input[type="submit"],
.lower-submit input[type="reset"] {
  width: auto;
  min-width: 140px;
}

/* ==========================================================================
   ACCOUNT DETAILS — #accountDetails wrapper + injected fieldset
   Replaces ship_custom/style.css entirely.
   The injected PHP uses .aligned-form, .form-row, .radio-group — all handled
   here so ship_custom/style.css is no longer needed.
   ========================================================================== */
#accountDetails { min-width: 0; }

/* --- fieldset (both the #accountDetails wrapper and .aligned-form) --- */
#accountDetails fieldset,
.form-wrapper .aligned-form {
  border: 1px solid var(--border);
  border-top: 3px solid #004488;
  border-radius: 3px;
  padding: var(--gap-section) 10px 10px;
  background: var(--bg-section);
  min-width: 0;
  max-width: 100%;            /* override .aligned-form max-width:650px */
  margin: 0;
}

/* --- legend --- */
#accountDetails legend,
.form-wrapper .aligned-form legend {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 6px;
}

/* --- .form-row inside account details ---
     Two-column grid: fixed label column + flexible input column.
     margin-bottom replaces style.css's 0.75em (≈12px) with a tighter 4px.
     ------------------------------------------------------------------- */
#accountDetails .form-row,
.form-wrapper .aligned-form .form-row {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;         /* was 0.75em (~12px) in style.css */
  min-width: 0;
}

/* --- labels inside .form-row --- */
#accountDetails .form-row label,
.form-wrapper .aligned-form .form-row label {
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--label-color);
  font-weight: normal;
  text-align: right;
  padding-right: 6px;
  white-space: normal;
}

/* --- inputs / selects inside .form-row ---
     Overrides style.css padding:6px 8px with the same tight value used
     elsewhere in this form.
     ------------------------------------------------------------------- */
#accountDetails .form-row input[type="text"],
#accountDetails .form-row input[type="number"],
#accountDetails .form-row input[type="date"],
#accountDetails .form-row input[type="datetime-local"],
#accountDetails .form-row select,
.form-wrapper .aligned-form .form-row input[type="text"],
.form-wrapper .aligned-form .form-row input[type="number"],
.form-wrapper .aligned-form .form-row input[type="date"],
.form-wrapper .aligned-form .form-row input[type="datetime-local"],
.form-wrapper .aligned-form .form-row select {
  padding: 3px 5px;           /* was 6px 8px in style.css */
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font);
  font-size: 0.85rem;
  background: #fff;
  color: #111;
}

/* Required field highlight (retain from style.css) */
#accountDetails .form-row input:required,
#accountDetails .form-row select:required,
.form-wrapper .aligned-form .form-row input:required,
.form-wrapper .aligned-form .form-row select:required {
  border-color: #e57373;
}

/* Hover / focus (retain from style.css) */
#accountDetails .form-row input:hover,
#accountDetails .form-row select:hover,
.form-wrapper .aligned-form .form-row input:hover,
.form-wrapper .aligned-form .form-row select:hover {
  border-color: #66afe9;
  box-shadow: 0 0 3px rgba(102,175,233,0.4);
}
#accountDetails .form-row input:focus,
#accountDetails .form-row select:focus,
.form-wrapper .aligned-form .form-row input:focus,
.form-wrapper .aligned-form .form-row select:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 2px rgba(0,0,83,0.15);
}

/* --- radio group --- */
#accountDetails .radio-group,
.form-wrapper .aligned-form .radio-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
}
#accountDetails .radio-group label,
.form-wrapper .aligned-form .radio-group label {
  width: auto;
  min-width: 0;
  text-align: left;
  padding-right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: normal;
  color: inherit;
  white-space: nowrap;
}

/* date+time composite row inside account details */
#accountDetails .form-row > div[style*="flex"],
.form-wrapper .aligned-form .form-row > div[style*="flex"] {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   SUBMIT / RESET BUTTONS
   ========================================================================== */
.form-wrapper input[type="submit"],
.form-wrapper input[type="reset"] {
  display: block;
  padding: 8px 14px;           /* slightly less than before (was 10px) */
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: auto;
}
.form-wrapper input[type="submit"] { background: var(--navy); color: #fff; }
.form-wrapper input[type="submit"]:hover { background: #00007a; }
.form-wrapper input[type="submit"]:active { transform: scale(0.98); }
.form-wrapper input[type="reset"]  { background: #e0e0ea; color: #333; border: 1px solid var(--border); }
.form-wrapper input[type="reset"]:hover { background: #d0d0e0; }

/* ==========================================================================
   REQUIRED STAR + FOOTER
   ========================================================================== */
.required { color: var(--red); margin-left: 2px; }

.form-footer {
  font-size: 0.75rem;
  color: var(--navy);
  padding: 8px 0 4px;
  border-top: 1px solid var(--border-light);
  text-align: left;
}

/* ==========================================================================
   MOBILE OVERRIDES  (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {

  .form-wrapper { padding: 6px 6px 16px; }

  .two-col-grid {
    grid-template-columns: 1fr !important;
    gap: 6px;                  /* was 8px */
    margin-bottom: 6px;
  }

  /* Section panels tighter on mobile */
  .section-panel {
    padding: 6px;              /* was var(--gap-section) = 8px */
  }
  .section-title {
    margin-bottom: 3px;
    padding-bottom: 2px;
  }

  /* Labels stack above inputs — tighter gap */
  .field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;                  /* was 3px */
    margin-bottom: 3px;        /* override --gap-field for mobile */
  }
  .field-label {
    width: 100%;
    min-width: 0;
    text-align: left;
    padding-right: 0;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
  }
  .field-input { width: 100%; }

  .field-input input[type="text"],
  .field-input input[type="email"],
  .field-input input[type="tel"],
  .field-input select { width: 100%; }

  .svc-selects { flex-direction: column; gap: 3px; }
  .svc-selects select { width: 100%; }

  .city-state-zip { gap: 4px; }
  .dimensions-row { flex-wrap: wrap; gap: 4px; }

  .ready-date-row {
    gap: 4px;
    padding: 4px 0 2px;        /* was 5px 0 2px */
    margin-top: 3px;
  }
  .ready-date-row input[type="date"] { width: 100%; min-width: 0; }

  .lower-notes { padding: 6px; }
  .lower-notes input[type="text"] { margin-bottom: 2px; }

  .lower-submit { flex-direction: column; gap: 6px; }
  .lower-submit input[type="submit"],
  .lower-submit input[type="reset"] { width: 100%; min-width: 0; }

  /* Account details: single-column on mobile */
  #accountDetails .form-row,
  .form-wrapper .aligned-form .form-row {
    grid-template-columns: 1fr;
    gap: 1px;                  /* was 3px */
    margin-bottom: 3px;        /* was 4px */
  }
  #accountDetails .form-row label,
  .form-wrapper .aligned-form .form-row label {
    text-align: left;
    padding-right: 0;
    font-weight: 600;
    color: var(--navy);
  }
  #accountDetails .radio-group,
  .form-wrapper .aligned-form .radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;                  /* was 5px */
  }
  #accountDetails .radio-group label,
  .form-wrapper .aligned-form .radio-group label {
    font-weight: normal;
    color: inherit;
  }
  #accountDetails fieldset,
  .form-wrapper .aligned-form {
    padding: 6px 8px 8px;      /* was var(--gap-section) 10px 10px */
  }

  /* Touch-friendly inputs:
     - font-size 1rem (16px) is the minimum to prevent Android auto-zoom
     - padding and min-height reduced as much as usability allows
     - line-height explicit to prevent browser default inflation          */
  .form-wrapper input[type="text"],
  .form-wrapper input[type="date"],
  .form-wrapper input[type="number"],
  .form-wrapper input[type="email"],
  .form-wrapper input[type="tel"],
  .form-wrapper select {
    font-size: 1rem !important; /* must stay 1rem — lower causes Android zoom */
    line-height: 1.2 !important;
    padding: 3px 6px !important; /* was 5px 8px */
    min-height: 30px;            /* was 34px */
  }

  .form-wrapper input[type="submit"],
  .form-wrapper input[type="reset"] {
    padding: 12px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .noprint { display: none !important; }
  .form-wrapper input[type="submit"],
  .form-wrapper input[type="reset"] { display: none; }
  .form-wrapper  { padding: 0; }
  .section-panel { border: 1px solid #ccc; page-break-inside: avoid; }
  .lower-submit  { display: none; }
}