/* ================== FREIGHT CLIENT FORM — Inspired by Flexform ================== */

/* Panel/Container */
.freight-panel-container,
.panel_s {
  background: #fff;
  max-width: 680px;
  margin: 35px auto 32px auto;
  border-radius: 18px;
  box-shadow: 0 3px 24px rgba(13,100,149,0.13);
  border: none;
  padding: 32px 32px 38px 32px;
  position: relative;
}
@media (max-width: 800px) {
  .freight-panel-container, .panel_s { padding: 13px 3vw 18px 3vw; }
}
@media (max-width: 600px) {
  .freight-panel-container, .panel_s { padding: 7px 0 15px 0; }
}

/* Wizard title */
#freightWizard h3.current {
  display: block;
  text-align: center;
  font-size: 1.32em;
  font-weight: 700;
  margin-bottom: 29px;
  margin-top: 8px;
  color: #1564a1;
  border-bottom: 1px solid #e5ebf2;
  padding-bottom: 14px;
  letter-spacing: 0.02em;
}
#freightWizard h3:not(.current) { display: none; }
.wizard > .steps { display: none !important; }

/* Grid for sections: 2 cols desktop, 1 col mobile (active champ only) */
.row.form-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  margin: 0 -8px;
}
.row.form-section > .form-col {
  flex: 0 0 47%;
  max-width: 47%;
  min-width: 220px;
  margin-bottom: 19px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .row.form-section { flex-direction: column; gap: 0; margin: 0; }
  .row.form-section > .form-col {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin-bottom: 27px;
    display: none; /* Sauf champ actif, voir JS */
  }
  .row.form-section > .form-col.active {
    display: block;
    animation: fadeIn .23s;
  }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none; } }

/* Champ - look Flexform style */
.form-control, textarea.form-control {
  border: 2px solid #dadada;
  border-radius: 10px;
  background: #f9fbfd;
  font-size: 1.15em;
  min-height: 51px;
  box-shadow: none;
  padding: 15px 18px;
  transition: border .21s, box-shadow .23s;
  width: 100%;
}
.form-control:focus {
  border: 2px solid #0b89d1;
  background: #fff;
  box-shadow: 0 2px 12px rgba(25,103,210,0.10);
}
label, .control-label {
  font-weight: 600;
  color: #232b3a;
  font-size: 1.06em;
  margin-bottom: 9px;
  margin-top: 4px;
  display: block;
  letter-spacing: 0.01em;
}
input[readonly], textarea[readonly] {
  background: #eef2f6 !important;
  color: #9ba6b3 !important;
}
.is-invalid, .form-control.is-invalid {
  border-color: #e23b3b !important;
  background: #fff0f0 !important;
}
.is-invalid:focus {
  border-color: #e23b3b !important;
  box-shadow: 0 0 7px #ffb4b4;
}

/* Package (Colis) box style */
.package-item {
  margin-bottom: 20px;
  box-shadow: 0 2px 11px rgba(25,103,210,0.06);
  border-radius: 10px;
  border: 1.5px solid #eaeaea;
  background: #fcfcfd;
}
.panel-default .panel-heading {
  background: #f4f8fa;
  color: #1767d2;
  font-weight: 600;
  border-bottom: 1px solid #eaeaea;
  border-radius: 10px 10px 0 0;
  font-size: 1.11em;
  padding-top: 13px;
  padding-bottom: 12px;
}

/* Buttons : wizard + actions */
.wizard > .actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 34px;
}
.wizard > .actions > ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
.wizard > .actions li {
  list-style: none;
  flex: 1 1 0;
}
.wizard > .actions a,
.wizard > .actions a[role="button"] {
  background: #1767d2;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.15em;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(25,103,210,0.10);
  transition: background .15s, box-shadow .15s, transform .10s;
  padding: 18px 0 14px 0;
  margin: 0 10px;
  width: 98%;
  max-width: 260px;
  display: inline-block;
  text-align: center;
  border: none;
  outline: none;
}
.wizard > .actions a:hover, .wizard > .actions a:focus, .wizard > .actions a:active {
  background: #0c549a;
  box-shadow: 0 6px 25px rgba(25,103,210,0.18);
  transform: translateY(-1px) scale(1.01);
  color: #fff !important;
  text-decoration: none;
}
.wizard > .actions a.disabled, .wizard > .actions a[aria-disabled="true"] {
  background: #c2c9cf !important;
  color: #fff !important;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Totals & details */
.well, .well-sm {
  background: #f5faff;
  border: 1.5px solid #cde2f7;
  border-radius: 8px;
  margin-top: 22px;
  color: #174ea6;
  font-weight: 500;
  font-size: 1.11em;
  letter-spacing: .01em;
}

.alert-success, .alert-danger, .alert-warning {
  border-radius: 9px;
  font-size: 1.08em;
  padding: 15px 22px;
  margin-bottom: 20px;
}
.alert-success { border-left: 6px solid #24c88b; color: #09724b; background: #e8f8f2;}
.alert-danger  { border-left: 6px solid #e23b3b; color: #951c1c; background: #fceeee;}
.alert-warning { border-left: 6px solid #ffc107; color: #896700; background: #fff8e1; }

.checkbox-primary input[type="checkbox"]:checked+label { color: #1767d2 !important; }

/* Scrollbar form (mobile agréable) */
.freight-panel-container, .wizard, .panel_s {
  scrollbar-color: #b9c3d7 #f1f5fa;
  scrollbar-width: thin;
}
.freight-panel-container::-webkit-scrollbar { width: 8px; }
.freight-panel-container::-webkit-scrollbar-thumb { background: #b9c3d7; border-radius: 8px;}
.freight-panel-container::-webkit-scrollbar-track { background: #f1f5fa; }

/* Impression : ne masque pas la barre de navigation */
@media print {
  .btn, .wizard > .actions, .panel-heading, .steps, .btn-bottom-pusher, .alert, h4.mbot20, .mbot20, .mbot10 {
    display: none !important;
  }
  .panel, .panel_s, .freight-panel-container, .panel-default {
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
  }
  .panel-body, .content, .row, [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 700px) {
  .row.form-section {
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .row.form-section > .form-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 18px 0 !important;
    margin: 0 0 18px 0 !important;
    display: none !important;
  }
  .row.form-section > .form-col.active {
    display: block !important;
    animation: fadeIn .21s;
  }
}

/* ------------- END ------------- */