/* ===== AZ Date Finder – ALL-IN-ONE v16 (Homepage Mobile Fix) ===== */

/* Base container and visuals */
#azdf.azdf {
  margin: 1rem auto 1.25rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #ece7db;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  max-width: 1200px;
}
#azdf .azdf-title { font-size: 1.15rem; font-weight: 700; color: #3b3b3b; margin: 0 0 .8rem 0; text-align: center; }

/* Grid */
#azdf .azdf-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .6rem .8rem; align-items: end; }
#azdf .azdf-field { display: flex; flex-direction: column; }

/* Hidden labels */
#azdf .azdf-label--hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Unified selects */
#azdf .azdf-select,
#azdf select.azdf-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%;
  padding: .65rem .9rem;
  border: 1px solid #ddd4c2;
  border-radius: 12px;
  background: #f2f2f2;
  color: #333;
  font-size: .95rem;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#azdf .azdf-select:focus { border-color: #e0d8c8; box-shadow: 0 0 0 3px rgba(224,216,200,0.35); background: #fff; }
#azdf .azdf-select option[value=""]{ color:#888; }

/* Button */
#azdf .azdf-btn { padding: .75rem 1.1rem; border-radius: 12px; border: 1px solid #e0d8c8; background: #f2f2f2; color: #3b3b3b; font-weight: 700; font-size: .95rem; cursor: pointer; transition: transform .06s ease, background .15s ease, box-shadow .15s ease; white-space: nowrap; }
#azdf .azdf-btn:hover { background: #f2eadb; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
#azdf .azdf-btn:active { transform: translateY(1px); }

/* Desktop/Tablet breakpoints */
@media (min-width: 992px){ #azdf .azdf-title { margin-bottom: .9rem; } }
@media (max-width: 991px){ #azdf .azdf-form { grid-template-columns: 1fr 1fr; } }

/* Mobile – compact + full width (generic) */
@media (max-width: 768px){
  #azdf .azdf-form{ grid-template-columns: 1fr; gap: .45rem; }
  #azdf .azdf-field{ width: 100%; }
  #azdf .azdf-field > *{ width: 100%; max-width: 100%; display: block; }
  #azdf select, #azdf .azdf-select, #azdf select.form-control{ width: 100%; max-width: 100%; min-width: 0; display: block; float: none; }
  #azdf .azdf-btn { width: 100%; text-align: center; }
}

/* Visibility fixes for themes that force white text */
#azdf select, #azdf option { color:#222; background:#fff0; }
#azdf select:focus { color:#111; }

/* Kill inline widths if any */
#azdf [style*="width:"]{ width:100% !important; max-width:100% !important; min-width:0 !important; }

/* ===== STRONG HOMEPAGE OVERRIDES (some themes style homepage differently) ===== */
@media (max-width: 768px){
  /* Ensure single column and full width on homepage layouts */
  body#index #azdf .azdf-form,
  .page-home #azdf .azdf-form,
  .index #azdf .azdf-form,
  .home #azdf .azdf-form{
    grid-template-columns: 1fr !important;
    gap: .45rem !important;
  }

  body#index #azdf .azdf-field,
  .page-home #azdf .azdf-field,
  .index #azdf .azdf-field,
  .home #azdf .azdf-field{
    width: 100% !important;
  }

  body#index #azdf .azdf-field > *,
  .page-home #azdf .azdf-field > *,
  .index #azdf .azdf-field > *,
  .home #azdf .azdf-field > *{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  body#index #azdf select,
  body#index #azdf .azdf-select,
  body#index #azdf select.form-control,
  .page-home #azdf select,
  .page-home #azdf .azdf-select,
  .page-home #azdf select.form-control,
  .index #azdf select,
  .index #azdf .azdf-select,
  .index #azdf select.form-control,
  .home #azdf select,
  .home #azdf .azdf-select,
  .home #azdf select.form-control{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    float: none !important;
  }

  /* Kill inline widths on homepage too */
  body#index #azdf [style*="width:"],
  .page-home #azdf [style*="width:"],
  .index #azdf [style*="width:"],
  .home #azdf [style*="width:"]{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ==== AZ Date Finder – Mobile Full-Width (hard override) ==== */
#azdf, #azdf * { box-sizing: border-box; }

@media (max-width: 768px){
  #azdf .azdf-form{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .45rem !important;
    width: 100% !important;
  }
  #azdf .azdf-field{ width:100% !important; display:block !important; }
  #azdf .azdf-field > *{ width:100% !important; max-width:none !important; }

  /* Theme setzt oft .form-control mit max-width – hier neutralisieren */
  #azdf .form-control,
  #azdf select,
  #azdf select.form-control,
  #azdf .azdf-select{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    display:block !important;
    float:none !important;
  }

  #azdf .azdf-btn{ width:100% !important; }
  #azdf .azdf-select{ padding:.6rem .85rem !important; border-radius:12px !important; }
}


/* ==== Mobile Overflow-Fix (verhindert horizontales Wischen) ==== */
@media (max-width: 768px){
  /* 1) Globale Sicherheitsleine */
  html, body, #wrapper, .page, .page-content, #content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 2) Bootstrap-Randkorrektur: .row hat negative margins */
  .container > .row,
  .container-fluid > .row,
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Spalten & generische Blöcke nie breiter als Viewport */
  [class*="col-"],
  .container,
  .container-fluid,
  .columns-container {
    max-width: 100% !important;
  }

  /* 4) Medien nie überlaufen lassen */
  img, video, table {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 5) Unser Datumsfinder-Block zusätzlich „einfangen“ */
  #azdf {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}