/* =========================================== */
/* VOL.CSS - Design inspiré "Air Canada"       */
/* + conteneur maître + widgets résultats/récap*/
/* =========================================== */

:root{
  --af-blue:#003DA5;
  --af-blue-dark:#002F6C;
  --af-blue-light:#0052CC;
  --af-red:#ED1C24;

  --af-gray-light:#F5F5F5;
  --af-gray:#E5E5E5;
  --af-gray-dark:#666666;

  --af-text:#333333;
  --af-white:#FFFFFF;

  --af-shadow:0 2px 8px rgba(0,0,0,.10);
  --af-border:1px solid #DDDDDD;

  --af-radius:8px;
  --af-radius-lg:12px;
}

/* Evite les dépassements */
.af-container,
.af-container *,
.af-container *::before,
.af-container *::after{ box-sizing:border-box; }

.af-container{
  font-family:'Helvetica Neue',Arial,sans-serif;
  color:var(--af-text);
  line-height:1.5;
}

/* Conteneur maître */
.af-page-container{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
  width:100%;
}

/* =========================================== */
/* Widgets : formulaire / résultats / récap    */
/* =========================================== */

.af-search-widget{
  background:var(--af-white);
  border-radius:var(--af-radius-lg);
  box-shadow:var(--af-shadow);
  padding:24px;
  margin-bottom:24px;
}

/* ✅ NOUVEAU : widget résultats */
.af-results-widget{
  background:var(--af-white);
  border-radius:var(--af-radius-lg);
  box-shadow:var(--af-shadow);
  padding:24px;
  margin-top:24px;
}

/* ✅ NOUVEAU : widget récap */
.af-summary-widget{
  background:var(--af-white);
  border-radius:var(--af-radius-lg);
  box-shadow:var(--af-shadow);
  padding:24px;
  margin-top:24px;
}

.af-search-header{
  display:flex;
  align-items:center;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:var(--af-border);
}

.af-search-header h2{
  font-size:24px;
  font-weight:600;
  color:var(--af-blue-dark);
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.af-search-header h2 i{ color:var(--af-blue); }

/* Form grid */
.af-search-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:20px;
}

.af-search-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.af-search-label{
  font-size:14px;
  font-weight:600;
  color:var(--af-gray-dark);
  text-transform:uppercase;
  letter-spacing:.5px;
}

.af-search-inline-group{
  display:grid;
  grid-template-columns: 1fr 180px;
  gap:20px;
  align-items:start;
}

.af-search-inline-group .af-search-field{
  min-width:0;
}

.af-search-input-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
}

.af-search-input-wrapper--inline{
  gap:12px;
  flex-wrap:nowrap;
}

.af-search-input-wrapper--inline .af-search-input{
  padding-right:16px;
  flex:1 1 auto;
}

.af-search-input-wrapper--inline .af-search-checkbox-wrapper{
  height:48px;
  padding:0 12px;
  border:var(--af-border);
  border-radius:var(--af-radius);
  background:#fff;
  flex:0 0 auto;
  white-space:nowrap;
}

.af-search-inline-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--af-gray-dark);
  flex:0 0 auto;
}

.af-search-checkbox-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 16px;
  border:var(--af-border);
  border-radius:var(--af-radius);
  background:#fff;
}

.af-search-checkbox{
  width:18px;
  height:18px;
}

.af-search-checkbox-label{
  font-size:14px;
  color:var(--af-text);
}

.af-search-icon{
  position:absolute;
  left:12px;
  color:var(--af-blue);
  font-size:16px;
  pointer-events:none;
}

.af-search-input,
.af-search-select{
  width:100%;
  max-width:100%;
  min-width:0;
  height:48px;
  padding:0 16px 0 40px;
  border:var(--af-border);
  border-radius:var(--af-radius);
  font-size:16px;
  color:var(--af-text);
  background:var(--af-white);
  transition:all .2s ease;
}

.af-search-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003DA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}

.af-search-input:focus,
.af-search-select:focus{
  outline:none;
  border-color:var(--af-blue);
  box-shadow:0 0 0 3px rgba(0,61,165,.10);
}

.af-search-actions{
  display:flex;
  justify-content:center;
  margin-top:24px;
}

.af-search-button{
  background:var(--af-blue);
  color:var(--af-white);
  border:none;
  border-radius:var(--af-radius);
  padding:16px 48px;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:12px;
  transition:all .2s ease;
}

.af-search-button:hover{
  background:var(--af-blue-dark);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,61,165,.20);
}

/* =========================================== */
/* Résultats                                   */
/* =========================================== */

.af-results-container{
  width:100%;
  padding:0;
  margin-top:0; /* widget gère la marge */
}

.af-results-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:var(--af-border);
}

.af-results-title{
  font-size:20px;
  font-weight:600;
  color:var(--af-blue-dark);
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.af-results-count{
  background:var(--af-blue-light);
  color:var(--af-white);
  padding:6px 12px;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
}

.af-roundtrip-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:24px;
}

.af-roundtrip-column{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.af-roundtrip-column-header{
  background:var(--af-blue);
  color:var(--af-white);
  padding:16px;
  border-radius:var(--af-radius);
  font-size:18px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================== */
/* Flight card                                 */
/* =========================================== */

.af-flight-card{
  background:var(--af-white);
  border-radius:var(--af-radius);
  border:var(--af-border);
  overflow:hidden;
  transition:all .2s ease;
}

.af-flight-card:hover{
  border-color:var(--af-blue);
  box-shadow:var(--af-shadow);
}

.af-flight-card--selectable{ cursor:pointer; }

.af-flight-card-header{
  display:flex;
  align-items:center;
  padding:20px;
  background:var(--af-gray-light);
  border-bottom:var(--af-border);
  gap:16px;
}

.af-flight-airline{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:200px;
}

.af-flight-airline-logo{
  width:40px;
  height:40px;
  background:var(--af-blue);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--af-white);
  font-size:20px;
}

.af-flight-airline-info{ display:flex; flex-direction:column; }

.af-flight-airline-name{
  font-weight:600;
  color:var(--af-blue-dark);
}

.af-flight-number{
  font-size:14px;
  color:var(--af-gray-dark);
}

.af-flight-route{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
}

.af-flight-segment{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:120px;
}

.af-flight-time{
  font-size:24px;
  font-weight:600;
  color:var(--af-text);
  margin-bottom:4px;
}

.af-flight-city{ font-size:16px; color:var(--af-gray-dark); }

.af-flight-code{
  font-size:14px;
  color:var(--af-blue);
  font-weight:600;
  margin-top:4px;
}

.af-flight-connector{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  padding:0 12px;
}

.af-flight-duration{
  font-size:14px;
  color:var(--af-gray-dark);
  margin-bottom:8px;
}

.af-flight-line{
  width:100px;
  height:2px;
  background:var(--af-gray);
  position:relative;
}

.af-flight-line::before{
  content:'';
  position:absolute;
  right:0;
  top:-3px;
  width:8px;
  height:8px;
  border-right:2px solid var(--af-gray);
  border-top:2px solid var(--af-gray);
  transform:rotate(45deg);
}

.af-flight-type{
  font-size:12px;
  color:var(--af-white);
  background:var(--af-blue);
  padding:2px 8px;
  border-radius:12px;
  margin-top:8px;
}

.af-flight-details{
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.af-flight-date{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--af-gray-dark);
  font-size:14px;
  flex-wrap:wrap;
}

.af-non-refundable{
  color:#d08a2f;
  font-weight:600;
  flex-basis:100%;
}

.vol-retour-card .af-non-refundable{
  display:none;
}

.vol-retour-card .af-flight-date::after{
  content:'Billet non-remboursable';
  display:block;
  color:#d08a2f;
  font-weight:600;
  flex-basis:100%;
}

.af-flight-price{ text-align:right; min-width:160px; }

.af-flight-price-amount{
  font-size:24px;
  font-weight:700;
  color:var(--af-blue-dark);
  display:block;
}

.af-flight-price-label{ font-size:14px; color:var(--af-gray-dark); }

.af-flight-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:nowrap;
}

/* =========================================== */
/* Buttons (utilisés par ton JS)               */
/* =========================================== */

.af-button{
  border:none;
  border-radius:var(--af-radius);
  padding:12px 18px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .2s ease;
  white-space:nowrap;
  text-decoration:none;
}

.af-button.disabled{
  opacity:0.6;
  pointer-events:none;
  cursor:not-allowed;
}

.af-button--primary{
  background:var(--af-blue);
  color:var(--af-white);
}

.af-button--primary:hover{ background:var(--af-blue-dark); }

.af-button--large{
  padding:16px 28px;
  font-size:18px;
}

.af-button--deselect{
  background:transparent;
  color:var(--af-blue);
  border:2px solid var(--af-blue);
  padding:12px 16px;
}

.af-button--deselect:hover{
  background:var(--af-blue);
  color:var(--af-white);
}

/* Selection */
.af-flight-card.selected,
.af-flight-card--selected{
  border:2px solid var(--af-blue);
  background:rgba(0,61,165,.05);
}

/* =========================================== */
/* Récapitulatif                               */
/* =========================================== */

.af-summary-card{
  background:var(--af-white);
  border-radius:var(--af-radius-lg);
  border:var(--af-border);
  overflow:hidden;
  box-shadow:var(--af-shadow);
}

.af-summary-header{
  background:var(--af-blue);
  color:var(--af-white);
  padding:20px;
}

.af-summary-header h3{
  margin:0;
  font-size:20px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
}

.af-summary-content{ padding:24px; }

.af-summary-flights{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-bottom:24px;
}

.af-summary-flight{
  background:var(--af-gray-light);
  border-radius:var(--af-radius);
  padding:16px;
}

.af-summary-flight h4{
  margin:0 0 12px 0;
  font-size:16px;
  color:var(--af-blue-dark);
}

.af-summary-flight-details{
  background:var(--af-white);
  border-radius:var(--af-radius);
  padding:12px;
  border:var(--af-border);
}

.af-summary-total{
  background:var(--af-gray-light);
  border-radius:var(--af-radius);
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:12px;
}

.af-summary-total-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  gap:4px;
}

.af-summary-total-label{ font-size:18px; color:var(--af-gray-dark); }

.af-summary-total-amount{
  font-size:32px;
  font-weight:700;
  color:var(--af-blue-dark);
}

.af-summary-non-refundable{
  color:#d08a2f;
  font-weight:600;
}

.af-non-refundable-text{
  color:#d08a2f;
  font-weight:600;
}

.af-summary-passengers{
  font-size:14px;
  color:var(--af-gray-dark);
  margin-top:4px;
}

.af-summary-passengers--highlight{
  color:#2f8f4e;
  font-weight:600;
}

.af-summary-breakdown{
  font-size:14px;
  color:var(--af-gray-dark);
  margin-top:4px;
  line-height:1.4;
}

.af-summary-baggage-note{
  font-size:14px;
  color:#2f8f4e;
  font-weight:600;
  margin-top:4px;
}

.af-summary-actions{ text-align:center; }

/* =========================================== */
/* Empty state                                 */
/* =========================================== */

.af-empty-state{
  text-align:center;
  padding:48px 24px;
  background:var(--af-gray-light);
  border-radius:var(--af-radius);
  border:var(--af-border);
}

.af-empty-state-icon{
  font-size:48px;
  color:var(--af-gray);
  margin-bottom:16px;
}

.af-empty-state-title{
  font-size:20px;
  font-weight:600;
  color:var(--af-gray-dark);
  margin-bottom:8px;
}

.af-empty-state-description{
  color:var(--af-gray-dark);
  max-width:400px;
  margin:0 auto;
}

/* =========================================== */
/* Responsive                                  */
/* =========================================== */

@media (max-width:1024px){
  .af-search-grid{ grid-template-columns:repeat(2,1fr); }
  .af-roundtrip-container{ grid-template-columns:1fr; }
  .af-summary-flights{ grid-template-columns:1fr; }
  .af-flight-route{ padding:0 16px; }
}

@media (max-width:768px){
  .af-page-container{ padding:14px; }
  .af-search-grid{ grid-template-columns:1fr; }

  .af-flight-card-header{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .af-flight-route{
    flex-direction:column;
    align-items:flex-start;
    padding:0;
    width:100%;
  }

  .af-flight-segment{
    flex-direction:row;
    justify-content:space-between;
    width:100%;
    margin-bottom:12px;
    min-width:0;
  }

  .af-flight-connector{
    width:100%;
    margin:12px 0;
    align-items:flex-start;
  }

  .af-flight-line{ width:100%; }

  .af-flight-details{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .af-flight-price{ text-align:left; min-width:0; }
  .af-flight-actions{ width:100%; justify-content:space-between; }

  .af-summary-total{
    flex-direction:column;
    align-items:flex-start;
  }

  .af-summary-total-right{
    align-items:flex-start;
    text-align:left;
  }

  .af-summary-flight-details{
    overflow: visible;
    word-break: break-word;
  }

  /* Récap compact sur mobile */
  .af-summary-widget .af-flight-card-header{
    padding:12px;
    gap:10px;
  }

  .af-summary-widget .af-flight-airline{
    min-width:0;
  }

  .af-summary-widget .af-flight-airline-logo{
    display:none;
  }

  .af-summary-widget .af-flight-route{
    padding:0;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .af-summary-widget .af-flight-segment{
    flex-direction:row;
    justify-content:space-between;
    width:100%;
    min-width:0;
    text-align:left;
    gap:8px;
  }

  .af-summary-widget .af-flight-time{
    font-size:18px;
    margin:0;
  }

  .af-summary-widget .af-flight-city{
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .af-summary-widget .af-flight-code,
  .af-summary-widget .af-flight-connector,
  .af-summary-widget .af-flight-type{
    display:none;
  }

  .af-summary-widget .af-flight-details{
    padding:12px;
    flex-direction:column;
    align-items:flex-start;
  }

  .af-summary-widget .af-flight-date{
    font-size:12px;
  }

  .af-summary-widget .af-flight-price{
    text-align:left;
  }

  .af-summary-widget .af-flight-price-amount{
    font-size:20px;
  }

  .af-summary-actions .af-button{
    width:100%;
    justify-content:center;
    padding:14px 18px;
    font-size:16px;
  }
}

/* ✅ Empêche les colonnes du grid de déborder */
.af-roundtrip-container {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ✅ Autorise les enfants du grid à rétrécir (sinon overflow) */
.af-roundtrip-column,
.af-flight-card,
.af-flight-card-header,
.af-flight-route,
.af-flight-airline {
  min-width: 0;
}

/* ✅ Sécurité : si un contenu est trop large, on coupe proprement */
.af-roundtrip-column-header {
  max-width: 100%;
  overflow: hidden;
}

/* ✅ Fallback : si le JS injecte un bouton sans classes af-button */
.af-flight-actions button {
  border: none;
  border-radius: var(--af-radius);
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s ease;
  white-space: nowrap;
}

/* Bouton principal par défaut */
.af-flight-actions button:not(.af-button--deselect):not(.deselect-vol-aller-btn):not(.deselect-vol-simple-btn):not(.deselect-vol-retour-btn) {
  background: var(--af-blue);
  color: var(--af-white);
}

.af-flight-actions button:not(.af-button--deselect):not(.deselect-vol-aller-btn):not(.deselect-vol-simple-btn):not(.deselect-vol-retour-btn):hover {
  background: var(--af-blue-dark);
}

/* Boutons "X" / deselect gardent un look outline */
.af-flight-actions .af-button--deselect,
.af-flight-actions .deselect-vol-aller-btn,
.af-flight-actions .deselect-vol-simple-btn,
.af-flight-actions .deselect-vol-retour-btn {
  background: transparent;
  color: var(--af-blue);
  border: 2px solid var(--af-blue);
}

.af-flight-route { padding: 0 16px; } /* au lieu de 28px */

/* Empêche les cartes du récap de déborder/couper */
.af-summary-flights,
.af-summary-flight,
.af-summary-flight-details {
  min-width: 0;
}

.af-summary-flight-details {
  overflow: hidden;
}

/* ===========================================================
   RÉCAP – layout fiable (sans :has) : single vs double
   =========================================================== */

/* Empêche toute troncature / débordement dans le récap */
.af-summary-flights,
.af-summary-flight,
.af-summary-flight-details {
  min-width: 0;
}

.af-summary-flight-details {
  overflow: hidden;
}

/* ✅ Aller simple : 1 colonne, la carte prend toute la place */
.af-summary-flights--single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ✅ Aller-retour : 2 colonnes robustes (pas de débordement) */
.af-summary-flights--double {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

/* Mode compact UNIQUEMENT en double (aller-retour) */
.af-summary-flights--double .af-flight-card-header {
  padding: 14px;
}

.af-summary-flights--double .af-flight-route {
  padding: 0 10px;
}

.af-summary-flights--double .af-flight-time {
  font-size: 20px;
}

.af-summary-flights--double .af-flight-segment {
  min-width: 90px;
}

.af-summary-flights--double .af-flight-line {
  width: 70px;
}

/* ===========================================================
   RÉCAP A/R : gagner de la place (on cache le bloc compagnie/logo)
   =========================================================== */
/* RÉCAP A/R : on garde le nom, on enlève seulement le logo */
.af-summary-flights--double .af-flight-airline {
  display: flex !important;          /* force visible */
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.af-summary-flights--double .af-flight-airline-logo {
  display: none !important;          /* on enlève juste l’icône */
}

/* Sécurité : si le nom est là, on le voit */
.af-summary-flights--double .af-flight-airline-name {
  display: inline !important;
  visibility: visible !important;
}

/* ===========================================================
   A/R : cartes aller / retour à hauteur égale
   =========================================================== */

/* Le container grid étire ses enfants */
.af-roundtrip-grid,
.af-summary-flights--double {
  align-items: stretch;
}

/* Chaque carte prend toute la hauteur de sa colonne */
.af-roundtrip-grid .af-flight-card,
.af-summary-flights--double .af-summary-flight,
.af-summary-flights--double .af-flight-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Le footer (prix + boutons) reste en bas */
.af-flight-card-footer,
.af-flight-card__footer {
  margin-top: auto;
}