/* ===== Scroll-Lock (wird per JS-Klasse gesetzt) ===== */
/* body.bhd-modal-open { display: flex; grid-auto-rows: auto; overflow: auto !important; } */

/* ===== Modal-Container / Backdrop / Box ===== */
#bhd-modal { display: none; z-index: 100000; position: fixed; }
#bhd-modal.is-open { display: block; }
#bhd-modal .bhd-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100000; }

#bhd-modal .bhd-modal-box{
  position: fixed; top:50%; left:50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.97); color:#000;
  width: 96vw; max-height: calc(100vh - 6vh);
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3); padding: 16px 20px 20px; z-index: 100001;
  overflow: auto;
  display: grid;
  grid-template-rows: auto auto auto;
}

/* falls die Content-Zeile schrumpfen muss (sonst wird nichts gescrollt) */
#bhd-modal .bhd-modal-content { min-height: 0; }

/* Close Button */
#bhd-modal .bhd-modal-close{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:#000; }

/* ===== Titel (rechts Order-ID) ===== */
#bhd-modal #bhd-modal-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:1.2rem; font-weight:600; color:#003366; margin:0 50px 8px 0;
}
#bhd-modal .bhd-title-orderid{ font-size:.95rem; color:#6b7280; white-space:nowrap; }

/* ===== Headbar ===== */
#bhd-modal .bhd-headbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #e5e7eb; padding-bottom:8px; margin-bottom:14px; }
#bhd-modal .bhd-headbar-left{ display:flex; gap:10px; align-items:center; }
#bhd-modal .bhd-headbar-right{ display:flex; gap:16px; align-items:center; color:#333; margin-right: 50px; }
#bhd-modal .bhd-headbar .label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.02em; color:#6b7280; }

/* ===== Inhalt: 3 Spalten (50% / 25% / 25%), Artikel darunter ===== */
#bhd-modal .bhd-modal-content{
  display:grid;
  grid-template-columns: 50% 20% 30%;
  grid-template-areas:
    "contact lodging diving"
    "contact notes   diving"
    "items   items   items";
  grid-template-rows: auto auto;         /* Erste Reihe: Sections, zweite: Notes */
  grid-auto-rows: auto;
  gap: 2px;                              /* Abstand zwischen den Bereichen */
  align-items: stretch;                  /* Gleiche Höhe der drei oberen Sections */
  overflow: auto;
  grid-template-columns: minmax(0,50%) minmax(0,20%) minmax(0,30%); /* Spalten dürfen schrumpfen */
  /* Nur HIER wird gescrollt */
}

/* Robust: ID-basierte Zuordnung statt nth-of-type */
#bhd-section-contact{ grid-area: contact; }
#bhd-section-lodging{ grid-area: lodging; }
#bhd-section-diving { grid-area: diving; }
#bhd-section-notes  { grid-area: notes;   }
#bhd-section-items  { grid-area: items; }


#bhd-modal .bhd-modal-content #bhd-section-contact,
#bhd-modal .bhd-modal-content #bhd-section-lodging,
#bhd-modal .bhd-modal-content #bhd-section-diving{ display: flex; align-items: stretch; gap: 1rem; flex-direction: column; overflow: visible; }

/* Karten füllen die Zellen */
#bhd-modal .bhd-section > .bhd-card{ height:100%; display:flex; flex-direction:column; }

/* ===== Labels ÜBER Feldern – in Kontakt, Lodging, Diving ===== */
#bhd-modal #bhd-grid-contact > div,
#bhd-modal #bhd-grid-lodging > div,
#bhd-modal #bhd-grid-diving  > div{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
#bhd-modal #bhd-grid-contact label,
#bhd-modal #bhd-grid-lodging label,
#bhd-modal #bhd-grid-diving  label{ font-size:.78rem; letter-spacing:.02em; color:#6b7280; text-transform:uppercase; }
#bhd-modal #bhd-grid-contact input, #bhd-modal #bhd-grid-contact select, #bhd-modal #bhd-grid-contact textarea,
#bhd-modal #bhd-grid-lodging input, #bhd-modal #bhd-grid-lodging select, #bhd-modal #bhd-grid-lodging textarea,
#bhd-modal #bhd-grid-diving  input, #bhd-modal #bhd-grid-diving  select, #bhd-modal #bhd-grid-diving  textarea{ border-radius:8px; padding:8px 10px; }

/* Kontakt zweispaltig, Lodging/Diving einspaltig */
#bhd-modal .bhd-contact-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px 16px; }
#bhd-modal #bhd-grid-contact > div{ grid-column: span 6; }
#bhd-modal #bhd-grid-lodging{ display:grid; grid-template-columns:1fr; gap:12px 16px; }
#bhd-modal #bhd-grid-diving { display:grid; grid-template-columns:1fr; gap:12px 16px; }
#bhd-modal #bhd-grid-lodging > div, #bhd-modal #bhd-grid-diving > div{ grid-column:1 / -1; }

/* Notizen rechte Spalte */
#bhd-modal #bhd-grid-notes{ display:grid; grid-template-columns:1fr; }
#bhd-modal #bhd-grid-notes > div{ grid-column:1 / -1; }
#bhd-modal #bhd-grid-notes textarea{ width:100%; min-height:100px; resize:vertical; }

/* Tabelle: Summen rechtsbündig */
#bhd-modal .bhd-table{ width:100%; border-collapse:collapse; }
#bhd-modal .bhd-table-wrap{ overflow:auto; }
#bhd-modal .bhd-table tfoot td, #bhd-modal .bhd-table .bhd-right, #bhd-modal tfoot td:last-child{ text-align:right !important; }

/* Artikel */
#bhd-modal .bhd-modal-content > #bhd-section-items { grid-area: items !important; display: block; }

/* ===== Footer: 3 Buttons ===== */
#bhd-modal .bhd-modal-footer{ display:flex; justify-content:flex-end; gap:12px; padding:12px 18px 0 18px; border-top:1px solid #ddd; position:sticky; bottom:0; background:#fff; }
#bhd-modal .bhd-btn{ min-width:132px; padding:8px 14px; border-radius:6px; font-weight:600; cursor:pointer; }
#bhd-modal .bhd-btn-primary{ background:#1aa39b; color:#fff; border:1px solid #168c85; }
#bhd-modal .bhd-btn-secondary{ background:#1aa39b; color:#fff; border:1px solid #168c85; }
#bhd-modal .bhd-btn:hover{ color: #000; border-color: #1aa39b; background-color: #fff; }

/* View vs Edit – Edit nutzt Buttonfarbe als Hintergrund */
#bhd-modal .bhd-editable{ background:#f3f4f6; color:#111827; border-color:#e5e7eb; }
#bhd-modal.is-editing .bhd-editable{ background:#1aa39b; color:#fff; border-color:#168c85; }
#bhd-modal.is-editing .bhd-editable::placeholder{ color:rgba(255,255,255,.85); }

/* Responsiv */
@media (max-width:1100px){
  #bhd-modal .bhd-modal-content{
    grid-template-columns:1fr;
    grid-template-areas: "contact" "lodging" "notes" "diving" "items";
  }
  #bhd-modal .bhd-section > .bhd-card{ height:auto; }
}

/*** Innenabstand Sektionen ******/
.bhd-section .bhd-card { padding: 1rem 1rem;}


/* Reihen-Wrapper, die das JS anlegt */
#bhd-modal .bhd-row {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* „Kiste“ fett & groß, zentriert – und ans Spaltenende gedrückt */
#bhd-grid-diving { display: flex; flex-direction: column; }
#bhd-grid-diving .bhd-row:last-child { margin-top: auto; }
#bhd-grid-diving [name="billing_kiste"] {
  font-weight: 800;
  font-size: 42px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
  padding: 14px 12px;
}

/* Zahlfelder rechtsbündig */
#bhd-grid-diving [name="billing_blei"],
#bhd-grid-diving [name="billing_tauchgaenge"] { text-align: right; }

/* Datum max-Breite */
#bhd-grid-contact [name="billing_birthdate"] { max-width: 120px; }
#bhd-grid-contact [name="billing_date_arrival"] { max-width: 120px; }
#bhd-grid-contact [name="billing_date_leave"] { max-width: 120px; }

/* Toggle-Button (Nitrox/Decocard/Attest) – Basis-Style */
#bhd-modal .bhd-toggle {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
#bhd-modal .bhd-form-field[data-toggle="ja"]  .bhd-toggle { background: #e6ffe6; border-color: #2ecc71; }
#bhd-modal .bhd-form-field[data-toggle="nein"] .bhd-toggle { background: #ffeaea; border-color: #e74c3c; }



/*****************************************************/
/* ARTIKEL Tabellen-Layout & Summen */
#bhd-grid-items .bhd-table,
#bhd-section-items .bhd-table {
  width: 100%;
  border-collapse: collapse;
}

#bhd-grid-items .bhd-table-wrap,
#bhd-section-items .bhd-table-wrap {
  overflow: auto;
  padding-bottom: 10px; /* etwas Luft vor dem sticky Footer */
}

#bhd-grid-items thead,
#bhd-section-items thead { 
  display: table-header-group;
}
#bhd-grid-items tfoot,
#bhd-section-items tfoot {
  display: table-footer-group; /* Bestellsumme bleibt am Tabellenende sichtbar */
}

#bhd-grid-items th, #bhd-grid-items td,
#bhd-section-items th, #bhd-section-items td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

#bhd-grid-items th,
#bhd-section-items th {
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .02em;
  color: #6b7280;
}

#bhd-grid-items td:last-child,
#bhd-section-items td:last-child,
#bhd-grid-items .product-total,
#bhd-section-items .product-total {
  text-align: right; /* Bestellsumme/Spalten rechtsbündig */
  white-space: nowrap;
}

/* optionale Spaltenhilfen (greifen, wenn vorhanden) */
#bhd-grid-items .qty, #bhd-section-items .qty,
#bhd-grid-items .quantity, #bhd-section-items .quantity { text-align: right; width: 80px; }
#bhd-grid-items .product-name, #bhd-section-items .product-name { width: auto; }

/* etwas Abstand nach oben, falls benötigt */
#bhd-section-items { margin-top: 4px; }

/* === BHD: Artikel-Spaltenbreiten === */
#bhd-section-items .bhd-table {
  table-layout: fixed;
  width: 100%;
}

/* Spalte 1 (Position) nimmt 2/3 der Breite ein */
#bhd-section-items th:nth-child(1),
#bhd-section-items td:nth-child(1) {
  width: 60;
  white-space: normal; /* Text darf umbrechen */
}

/* Spalten 2–4 teilen sich das restliche Drittel gleichmäßig */
#bhd-section-items th:nth-child(2),
#bhd-section-items td:nth-child(2),
#bhd-section-items th:nth-child(3),
#bhd-section-items td:nth-child(3),
#bhd-section-items th:nth-child(4),
#bhd-section-items td:nth-child(4) {
  width: 13.33%;
  text-align: right;
  white-space: nowrap;
}

/* Währungsdropdown: „immer wie Edit“ stylen, auch wenn Modal nicht is-editing ist */
/*#bhd-woocs-inline-items select.bhd-editable { background:#1aa39b; color:#fff; border-color:#168c85; }*/

#bhd-section-items {
  position: relative;
}

#bhd-woocs-inline-items {
  position: absolute;
  top: 14px;
  right: 20px;
  background-color:#1aa39b !important;
  color:#fff !important;
/*  border-color:#168c85 !important; */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  font-size: 0.9rem;
  font-family: inherit;
  text-align: right;
  width: auto; /* passt sich dem Inhalt an */
  min-width: fit-content;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}




/* Entlang der Kette: Section → Card → inneres Grid darf schrumpfen (keine Überläufe) */
#bhd-modal .bhd-modal-content > .bhd-section,
#bhd-modal .bhd-section > .bhd-card,
#bhd-grid-contact,
#bhd-grid-lodging,
#bhd-grid-diving{
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Grid-Kinder & Inputs strikt auf Zellbreite */
#bhd-grid-contact > div,
#bhd-grid-lodging > div,
#bhd-grid-diving  > div{ min-width: 0; }

#bhd-modal input,
#bhd-modal select,
#bhd-modal textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* =========================================================
   Kontakt – Mehrspalten Grid + Sonderreihen
   ========================================================= */

#bhd-modal #bhd-grid-contact{
  /* wir belassen dein Grid, machen es aber 24-spaltig für die Felder */
  grid-template-columns: repeat(24, minmax(0,1fr));
}

/* Anrede / Vorname / Nachname / Geb.Datum / Member nebeneinander */
#bhd-modal #bhd-grid-contact > div:has([name="billing_anrede"])     	{ grid-column: span 3; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_first_name"])     { grid-column: span 9; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_last_name"])      { grid-column: span 6; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_birthdate"])   	{ grid-column: span 4; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_member"])     	{ grid-column: span 2; }

/* Strasse / PLZ / Ort */
#bhd-modal #bhd-grid-contact > div:has([name="billing_address_1"])   	{ grid-column: span 8; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_postcode"])       { grid-column: span 4; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_city"])   	    { grid-column: span 12; }

/* Adresszusatz / Land / Bundesland / Nationalitaet nebeneinander */
#bhd-modal #bhd-grid-contact > div:has([name="billing_address_2"])   	{ grid-column: span 8; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_state"])     		{ grid-column: span 4; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_country"])   		{ grid-column: span 4; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_nation"])  		{ grid-column: span 8; }

/* Telefon / E-Mail */
#bhd-modal #bhd-grid-contact > div:has([name="billing_phone"])    		{ grid-column: span 12; }
#bhd-modal #bhd-grid-contact > div:has([name="billing_email"])      	{ grid-column: span 12; }


input[name="billing_anrede"] {
  text-transform: capitalize;
}
/* =========================================================
   Reise – Mehrspalten Grid + Sonderreihen
   ========================================================= */


/* === REISE: Hotelname voll breit, Datumspaare nebeneinander === */
#bhd-modal #bhd-grid-lodging{
  /* wir belassen dein Grid, machen es aber 12-spaltig für die Dates */
  grid-template-columns: repeat(12, minmax(0,1fr));
}

/* Hotelname über volle Breite */
#bhd-modal #bhd-grid-lodging > div:has([name="billing_hotelname"])			{ grid-column: span 8; }
#bhd-modal #bhd-grid-lodging > div:has([name="billing_room"])				{ grid-column: span 4; }

/* Ankunft / Abreise: je 6/12 = nebeneinander */
#bhd-modal #bhd-grid-lodging > div:has([name="billing_date_arrival"]),
#bhd-modal #bhd-grid-lodging > div:has([name="billing_date_leave"]){
  grid-column: span 6;
}



/* =========================================================
   Tauchen – Mehrspalten Grid + Sonderreihen + Kiste
   ========================================================= */

#bhd-modal #bhd-grid-diving{
  /* wir belassen dein Grid, machen es aber 12-spaltig für die Felder */
  grid-template-columns: repeat(12, minmax(0,1fr));      
}

/* Notfallkontakt über volle Breite */
#bhd-modal #bhd-grid-diving > div:has([name="billing_notfallkontakt"])			{ grid-column: span 6; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_notfallkontakt_mobile"])   { grid-column: span 6; }

/* Brevet / Tauchverband / Nitrox: nebeneinander */
#bhd-modal #bhd-grid-diving > div:has([name="billing_brevet"])    				{ grid-column: span 3; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_tauchverband"])   			{ grid-column: span 6; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_logbook"])		   			{ grid-column: span 3; }

/* Gruppe Decocard / Attest / Blei */
#bhd-modal #bhd-grid-diving > div:has([name="billing_ausweis"])    				{ grid-column: span 3; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_attest"])    				{ grid-column: span 3; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_decocard"])  				{ grid-column: span 3; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_nitrox"])    				{ grid-column: span 3; }

/* Gruppe Letzter Tauchgang  / Anzahl Tauchgaenge / Blei */
#bhd-modal #bhd-grid-diving > div:has([name="billing_letzter_tauchgang"])  		{ grid-column: span 4; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_tauchgaenge"])  	   		{ grid-column: span 4; }
#bhd-modal #bhd-grid-diving > div:has([name="billing_blei"])     		   		{ grid-column: span 4; }

/* Tauchkiste über volle Breite */
#bhd-modal #bhd-grid-diving > div:has([name="billing_kiste"]){
  grid-column: 1 / -1;
}


/* „Kiste“ ans Ende drücken (ohne Flex-Hack) */
#bhd-grid-diving > .bhd-form-field:has([name="billing_kiste"]) {
  grid-row: 0; /* steht am Ende der Area */
}

/* Stil für „Kiste“ */
#bhd-grid-diving [name="billing_kiste"] {
  font-weight: 800;
  font-size: 42px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
  padding: 14px 12px;
}


/***** UMRANDUNG *********/
#bhd-section-contact,
#bhd-section-lodging,
#bhd-section-diving,
#bhd-section-notes,
#bhd-section-items{ outline:2px solid #000; background-clip:padding-box; margin:8px; box-sizing:border-box; border-radius:8px; padding:5px; }

/***** ARTIKEL PREISTABELLE *********/
.bhd-items-table thead th { background-color: #ddd; color: #000 !important; font-weight: bold; }
.bhd-items-table tr:nth-child(even) { background-color: #f2f2f2; }
#bhd-items-sumline { font-size: +1em; font-weight: bold; text-decoration: underline double; }

/* Zahlenfelder schön zentriert */
#bhd-grid-contact [name="billing_birthdate"],
#bhd-grid-contact [name="billing_member"],
#bhd-grid-contact [name="billing_postcode"],
#bhd-grid-contact [name="billing_state"],
#bhd-grid-contact [name="billing_country"],
#bhd-grid-lodging [name="billing_date_arrival"],
#bhd-grid-lodging [name="billing_date_leave"],
#bhd-grid-diving [name="billing_blei"],
#bhd-grid-diving [name="billing_tauchgaenge"]{ text-align: center; }

#bhd-grid-lodging [name="billing_hotelname"]{ font-size: 20px; text-align: center; }

/* Auto-align: if hotelname overflows, switch to left alignment */
#bhd-grid-lodging [name="billing_hotelname"].bhd-too-long { text-align: left !important; }


/* Sicherheitsgurte: Inputs nie breiter als die Zelle */
#bhd-grid-diving input,
#bhd-grid-diving select,
#bhd-grid-diving textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* Beide Felder nebeneinander */
#billing_date_arrival_field,
#billing_date_leave_field {
    display: inline-block;  /* inline-block, damit sie nebeneinander stehen */
    width: 47%;             /* Breite anpassen, damit Platz zwischen bleibt */
    vertical-align: top;    /* Gleiche Ausrichtung */
}
/* Abstand zwischen den Feldern */
#billing_date_arrival_field {
    margin-right: 6%;
}

/************************* MOBILE VIEW ***********************************************/

/* mobil: sauber untereinander */
@media (max-width: 700px){
  #bhd-modal #bhd-grid-lodging > div:has([name="billing_date_arrival"]),
  #bhd-modal #bhd-grid-lodging > div:has([name="billing_date_leave"]){
    grid-column: 1 / -1;
  }
  #billing_date_arrival_field,
  #billing_date_leave_field {
      width: 100%;
      margin-right: 0;
      margin-bottom: 10px; /* Abstand unten */
  }
}


/* === Fokus-Invertierung im Bearbeitenmodus ================== */
#bhd-modal.is-editing input:focus,
#bhd-modal.is-editing select:focus,
#bhd-modal.is-editing textarea:focus {
  background: #fff !important;       /* invertiert: weiß statt türkis */
  color: #000 !important;         /* Textfarbe umgekehrt */
  border-color: #1aa39b !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(26,163,155,0.25); /* sanfter Glow */
  transition: all 0.15s ease-in-out;
}