/* =====================================================================
   M.Z DESIGN – mzd.css
   Wird vom mu-plugin "mzd-blocks" automatisch auf allen Seiten geladen.
   Ersetzt das bisherige "Zusätzliche CSS" im Customizer.
   Teile: 1) Fahrzeugbeschreibungen  2) VikRentCar-Farben/Buttons
          3) Hello-Elementor-Anpassungen  4) Contact Form 7
   ===================================================================== */

/* ===== 1) VikRentCar – Fahrzeugbeschreibung (.mzd-car) ===== */
.mzd-car{font-family:"Saira",Arial,Helvetica,sans-serif;color:#000;margin:10px 0 30px}
.mzd-car *{box-sizing:border-box}
.mzd-car-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#d5d8dc;border:2px solid #d5d8dc;margin-bottom:26px}
.mzd-car-facts div{background:#fff;padding:18px 16px}
.mzd-car-facts b{display:block;font-size:1.35rem;font-style:italic;font-stretch:118%;font-weight:800;line-height:1.1}
.mzd-car-facts span,.mzd-car-facts small{display:block;margin-top:4px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#6b7076}
.mzd-car details{border-top:2px solid #000}
.mzd-car details:last-of-type{border-bottom:2px solid #000}
.mzd-car summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;
  font-size:1.2rem;font-style:italic;font-stretch:118%;font-weight:800}
.mzd-car summary::-webkit-details-marker{display:none}
.mzd-car summary::after{content:"+";color:#FF000D;font-size:1.6rem;font-style:normal;line-height:1;transition:transform .25s}
.mzd-car details[open] summary::after{transform:rotate(45deg)}
.mzd-car summary:hover{color:#FF000D}
.mzd-car details>*:last-child{margin-bottom:22px}
.mzd-car table{width:100%;border-collapse:collapse;margin:0 0 16px;border:0}
.mzd-car th,.mzd-car td{text-align:left;padding:11px 12px;border:0;border-bottom:1px solid #e1e4e8;background:none;font-size:.98rem;vertical-align:top}
.mzd-car thead th{background:#000;color:#fff;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.mzd-car tbody th{width:45%;font-weight:600;color:#3d4249}
.mzd-car tbody td:last-child{font-weight:700}
.mzd-car ul{list-style:none;margin:0 0 12px;padding:0}
.mzd-car li{position:relative;padding:4px 0 4px 26px;margin:0}
.mzd-car li::before{content:"";position:absolute;left:0;top:.85em;width:14px;height:4px;background:#FF000D;transform:skewX(-12deg)}
.mzd-car-small{font-size:.85rem;color:#6b7076;margin:0}
@media (max-width:600px){
  .mzd-car-facts{grid-template-columns:1fr 1fr}
  .mzd-car th,.mzd-car td{padding:10px 8px;font-size:.92rem}
  .mzd-car tbody th{width:52%}
}

/* ===== 2) VikRentCar – Farben & Buttons im CI (ersetzt YellowPencil) =====
   Greift im Container mit CSS-Klasse "mzd-plugin" sowie in allen VikRentCar-Bereichen (Klassen mit "vrc"). */

/* Hauptbuttons: rot, Hover schwarz (Buchen, Suchen, Weiter, Anfrage senden …) */
:is(.mzd-plugin,[class*="vrc"]) :is(button,input[type="submit"],input[type="button"],.btn,.button,[class*="vrc-pref-color-btn"]):not([class*="secondary"]):not([class*="close"]){
  background:#FF000D!important;border:0!important;color:#fff!important;border-radius:0!important;
  font-family:"Saira",Arial,sans-serif!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.03em;
  padding:12px 26px!important;cursor:pointer;box-shadow:none!important;text-shadow:none!important;transition:background .2s,color .2s}
:is(.mzd-plugin,[class*="vrc"]) :is(button,input[type="submit"],input[type="button"],.btn,.button,[class*="vrc-pref-color-btn"]):not([class*="secondary"]):not([class*="close"]):hover{
  background:#000!important;color:#fff!important}

/* Sekundäre Buttons & «Haben Sie Fragen?» (Link mit javascript:): schwarz, Hover rot */
:is(.mzd-plugin,[class*="vrc"]) :is([class*="vrc-pref-color-btn-secondary"],a[href^="javascript" i]:not(:empty)){
  display:inline-block;background:#000!important;color:#fff!important;border:0!important;border-radius:0!important;
  font-family:"Saira",Arial,sans-serif!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.03em;
  padding:12px 26px!important;text-decoration:none!important;opacity:1!important;transition:background .2s}
:is(.mzd-plugin,[class*="vrc"]) :is([class*="vrc-pref-color-btn-secondary"],a[href^="javascript" i]:not(:empty)):hover{background:#FF000D!important;color:#fff!important}

/* «Zurück»-Links und normale Links */
:is(.mzd-plugin,[class*="vrc"]) a:not([class*="btn"]):not([href^="javascript" i]){color:#000;text-decoration-color:#FF000D}
:is(.mzd-plugin,[class*="vrc"]) a:not([class*="btn"]):not([href^="javascript" i]):hover{color:#FF000D}

/* Farb-Hervorhebungen des Plugins */
:is(.mzd-plugin,[class*="vrc"]) [class*="vrc-pref-color-text"]{color:#FF000D!important}
:is(.mzd-plugin,[class*="vrc"]) [class*="vrc-pref-color-element"]{background:#FF000D!important;border-color:#FF000D!important;color:#fff!important}

/* Preise */
:is(.mzd-plugin,[class*="vrc"]) :is([class*="price"],[class*="cost"]) :is(strong,b,span[class*="amount"],[class*="val"]){
  color:#FF000D!important;font-family:"Saira",Arial,sans-serif;font-style:italic;font-weight:800}

/* Formularfelder */
:is(.mzd-plugin,[class*="vrc"]) :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea){
  border-radius:0!important;border:1px solid #c9cdd2!important;box-shadow:none!important}
:is(.mzd-plugin,[class*="vrc"]) :is(input,select,textarea):focus{border-color:#FF000D!important;outline:none;box-shadow:0 0 0 3px rgba(255,0,13,.15)!important}
:is(.mzd-plugin,[class*="vrc"]) input[type="checkbox"],:is(.mzd-plugin,[class*="vrc"]) input[type="radio"]{accent-color:#FF000D}

/* Schrittanzeige (Datum → Fahrzeuge → Optionen → Buchen) */
:is(.mzd-plugin,[class*="vrc"]) [class*="step"] :is(li,a){font-family:"Saira",Arial,sans-serif;font-weight:700}
:is(.mzd-plugin,[class*="vrc"]) [class*="step"] :is(li[class*="current"],li[class*="active"],li[class*="selected"]){color:#FF000D!important;border-color:#FF000D!important}

/* Kalender-Datumsauswahl (jQuery UI) */
.ui-datepicker .ui-state-active,.ui-datepicker .ui-state-hover{background:#FF000D!important;border-color:#FF000D!important;color:#fff!important}
.ui-datepicker .ui-state-highlight{border-color:#000!important}

/* ===== 3) Hello Elementor – Theme-Standards neutralisieren ===== */
:is(#mzd,#mzd2,#mzdh,#mzdf,#mzdv) :is(button,[type="button"],[type="submit"]){border-radius:0}
:is(#mzd,#mzd2,#mzdh,#mzdf,#mzdv) :is(button,[type="button"],[type="submit"]):focus:not(:focus-visible){outline:none}

/* ===== 4) Contact Form 7 – Kontaktformular im CI (Formularvorlage mit Klassen "mzd-cf") ===== */
.wpcf7{font-family:"Saira",Arial,Helvetica,sans-serif;max-width:900px;margin-left:auto!important;margin-right:auto!important;width:100%;color:#000}
.elementor-widget-shortcode:has(.wpcf7),.elementor-shortcode:has(.wpcf7){width:100%}
.wpcf7 *{box-sizing:border-box}
.wpcf7 .mzd-cf br{display:none}
.wpcf7 .mzd-cf p{margin:0!important;padding:0}
.wpcf7 .mzd-cf > p{display:contents}
.wpcf7 .mzd-cf{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.wpcf7 .mzd-cf-full{grid-column:1/-1}
.wpcf7 .mzd-cf-field{display:block;margin:0}
.wpcf7 .mzd-cf-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d4249;margin-bottom:8px}
.wpcf7 .mzd-cf-label em{color:#FF000D;font-style:normal}
.wpcf7 .wpcf7-form-control-wrap{display:block;position:relative}
.wpcf7 :is(input[type="text"],input[type="email"],input[type="tel"],input[type="date"],select,textarea){
  width:100%!important;background-color:#fff!important;border:0!important;border-bottom:2px solid #c9cdd2!important;border-radius:0!important;
  padding:12px 2px!important;font:inherit!important;font-size:1.05rem!important;color:#000!important;box-shadow:none!important;
  transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.wpcf7 .mzd-cf-field textarea{min-height:160px;resize:vertical;border:2px solid #c9cdd2!important;padding:12px 14px!important}
.wpcf7 .mzd-cf-field textarea:focus{border-color:#FF000D!important}
.wpcf7 :is(input,select,textarea):hover{border-color:#8c9197!important}
.wpcf7 :is(input,select,textarea):focus{outline:none!important;border-color:#FF000D!important;background-color:#fff7f7!important;box-shadow:none!important}
.wpcf7 ::placeholder{color:#9aa0a7}
.wpcf7 select{cursor:pointer;padding-right:34px!important;
  background-image:linear-gradient(45deg,transparent 50%,#FF000D 50%),linear-gradient(135deg,#FF000D 50%,transparent 50%)!important;
  background-position:calc(100% - 16px) 55%,calc(100% - 10px) 55%!important;background-size:6px 6px!important;background-repeat:no-repeat!important}
/* Datei-Upload */
.wpcf7 input[type="file"]{width:100%;font:inherit;font-size:.95rem;color:#3d4249;border:2px dashed #c9cdd2;padding:14px;background:#f6f7f8;cursor:pointer}
.wpcf7 input[type="file"]:hover{border-color:#FF000D}
.wpcf7 input[type="file"]::file-selector-button{font:inherit;font-weight:700;background:#000;color:#fff;border:0;padding:9px 16px;margin-right:14px;cursor:pointer}
.wpcf7 .mzd-cf-hint{display:block;font-size:.8rem;color:#6b7076;margin-top:6px}
/* Checkbox Datenschutz */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-acceptance label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem;line-height:1.5;color:#3d4249}
.wpcf7 input[type="checkbox"]{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:#FF000D}
.wpcf7 .wpcf7-acceptance a{color:#FF000D;text-decoration:underline}
/* Senden */
.wpcf7 .mzd-cf-submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.wpcf7 .wpcf7-form .mzd-cf input[type="submit"].wpcf7-submit{background:#FF000D!important;color:#fff!important;border:0!important;border-radius:0!important;
  font:inherit!important;font-weight:800!important;font-size:1.05rem!important;letter-spacing:.02em;text-transform:none!important;
  padding:16px 38px!important;cursor:pointer;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);transition:background .2s}
.wpcf7 .wpcf7-form .mzd-cf input[type="submit"].wpcf7-submit:hover{background:#000!important}
.wpcf7 .wpcf7-form .mzd-cf input[type="submit"].wpcf7-submit:disabled{opacity:.5;cursor:not-allowed}
.wpcf7 .wpcf7-spinner{margin:0;background:#FF000D}
.wpcf7 .mzd-cf-req{font-size:.82rem;color:#6b7076}
/* Meldungen */
.wpcf7 .wpcf7-not-valid-tip{color:#FF000D;font-size:.85rem;font-weight:600;margin-top:6px}
.wpcf7 .wpcf7-not-valid{border-color:#FF000D!important}
.wpcf7 form .wpcf7-response-output{margin:26px 0 0!important;padding:16px 20px!important;border:0!important;border-left:6px solid #000!important;background:#eef0f2;font-weight:600}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{border-left-color:#FF000D!important;background:#fff1f1}
.wpcf7 form.sent .wpcf7-response-output{border-left-color:#1e8e3e!important;background:#eef8f1}
@media (max-width:700px){.wpcf7 .mzd-cf{grid-template-columns:1fr;gap:18px}.wpcf7 .wpcf7-form .mzd-cf input[type="submit"].wpcf7-submit{width:100%}}


/* ===== 5) Hinweis-Banner (Einstellungen → M.Z Design → Hinweis-Banner) ===== */
.mzd-notice{position:fixed;left:20px;bottom:20px;z-index:90;max-width:min(420px,calc(100vw - 40px));display:flex;gap:14px;align-items:flex-start;
  background:#000;color:#fff;border-left:6px solid #FF000D;padding:16px 16px 16px 20px;box-shadow:0 14px 40px rgba(0,0,0,.35);
  font-family:"Saira",Arial,Helvetica,sans-serif;line-height:1.45;animation:mzdNoticeIn .5s cubic-bezier(.2,.7,.2,1) both}
.mzd-notice[hidden]{display:none}
.mzd-notice-in{flex:1;min-width:0}
.mzd-notice strong{display:block;font-style:italic;font-weight:800;font-stretch:118%;font-size:1.05rem;margin-bottom:4px;color:#fff}
.mzd-notice p{margin:0;font-size:.95rem;color:#e6e8eb}
.mzd-notice a{display:inline-block;margin-top:8px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:#FF000D;text-underline-offset:3px}
.mzd-notice a:hover{color:#FF000D}
.mzd-notice-x{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:0;background:#FF000D;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0}
.mzd-notice-x:hover{background:#fff;color:#000}
@keyframes mzdNoticeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (max-width:700px){.mzd-notice{left:12px;right:12px;max-width:none;bottom:calc(84px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.mzd-notice{animation:none}}