/* Import base B2C styles */
@import url('/commander/commande.css');

/* === PRO BADGE === */
.pro-badge {
  display: inline-block;
  background: #e71a65;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
}

/* === RADIO CARDS (frame choice) === */
.frame-choices {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s, background .3s;
}

.radio-card:hover {
  border-color: #48b7ec;
  background: #f5faff;
}

.radio-card.selected {
  border-color: #e71a65;
  background: #fff7fa;
  box-shadow: 0 0 0 3px rgba(231, 26, 101, .15);
}

.radio-card input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.radio-card-body {
  flex: 1;
}

.radio-card-body strong {
  font-size: 1rem;
}

.radio-card-desc {
  margin: 4px 0 0;
  font-size: .85rem;
  color: #666;
}

/* === UPLOAD ZONE === */
.upload-zone {
  border: 2px dashed #d4c5be;
  background: #fff9f6;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  margin-top: 1rem;
  transition: border-color .3s, background .3s;
}

.upload-zone:hover {
  border-color: #48b7ec;
  background: #f5faff;
}

.upload-zone.drag-over {
  border-color: #e71a65;
  background: #fff0f5;
}

.upload-zone p {
  margin: 0 0 .3rem;
  font-size: .9rem;
  color: #555;
}

.upload-preview {
  margin-top: .75rem;
  font-size: .85rem;
  color: #48b7ec;
  font-weight: 600;
}

.upload-preview img {
  max-width: 200px;
  max-height: 120px;
  border-radius: 8px;
  margin-top: .5rem;
  border: 1px solid #e6e6e6;
}

/* === RECAP TABLE (step 6) === */
.recap-section {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e5e5e5;
}

.recap-section h3 {
  margin: 0 0 1rem;
  font-family: 'Cocogoose', sans-serif;
  color: #e71a65;
  font-size: 1.1rem;
}

.recap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.recap-table th,
.recap-table td {
  padding: .6rem .8rem;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.recap-table th {
  font-weight: 700;
  color: #3d3d3d;
  background: #faf8f7;
}

.recap-table td:last-child {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.recap-table tfoot td {
  border-top: 2px solid #e5e5e5;
  font-weight: 800;
  font-size: 1rem;
}

.recap-company-info {
  background: #f9f9f9;
  border-radius: 8px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  line-height: 1.6;
}

.recap-company-info strong {
  color: #e71a65;
}

/* === DEVIS BUTTON === */
.btn-devis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 8px;
  padding: .8rem 1.2rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid #e71a65;
  background: #fff;
  color: #e71a65;
  transition: background .3s, color .3s;
}

.btn-devis:hover:not(:disabled) {
  background: #fff0f5;
}

.btn-devis:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn-devis::before {
  content: '\1F4C4';
  font-size: 1.1rem;
}

/* === OPTIONS STEP — white background like B2C === */
.accordion-step[data-step="3"] .step-content.active {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
}

/* === EXCLUSIVE GROUP (habillage options) === */
.exclusive-group {
  position: relative;
}

.exclusive-group::before {
  content: 'Habillage (1 seul choix)';
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #e71a65;
  margin-bottom: .5rem;
  padding-left: .2rem;
}

/* === CART COMPANY NAME === */
.cart-company-name {
  font-weight: 700;
  font-size: .9rem;
  color: #e71a65;
  margin-bottom: .5rem;
  padding: .4rem .6rem;
  background: #fff7fa;
  border-radius: 6px;
  border: 1px solid #ffd2e3;
}

/* === SELECT INPUT === */
select.input-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right: 2rem;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
  .frame-choices {
    gap: .5rem;
  }

  .radio-card {
    padding: .8rem 1rem;
  }

  .recap-table th,
  .recap-table td {
    padding: .4rem .5rem;
    font-size: .8rem;
  }
}