/* ------------------------------------------------------------------------
   MODERNE ID CARD – FRONTEND STYLES
   Version 1.5.0  (16 Jul 2025)
   • Pflicht‑Foto‑Upload Overlay & Spinner
   • Wasserzeichen‑Overlay
   • Info‑Icon + Tooltip (konfigurierbar im Backend)
   • Disclaimer‑Trigger (Titel & ATC‑Zeile) + zentriertes Modal
   • Disclaimer‑Modal nur über Bestätigungs‑Button schließbar (X entfernt)
------------------------------------------------------------------------ */

/* --------------------- Produkt-Titel --------------------- */
.mic-product-title{
    font-size:28px;font-weight:700;text-align:left;margin:0 0 25px 0;
}
.mic-product-title .price{
    margin-left:12px;
    font-size:22px;
    vertical-align:middle;
    white-space:nowrap;
}
.mic-product-title .price .woocommerce-Price-amount.amount{
    font-size:inherit;
    line-height:1;
}
/* Disclaimer trigger in Title */
.mic-product-title .mic-disclaimer-trigger-title{
    margin-left:8px;
    vertical-align:middle;
}

/* --------------------- Haupt-Wrapper --------------------- */
.mic-frontend-wrapper{
    display:flex;flex-wrap:wrap;gap:30px;padding:20px;
}

/* --------------------- Formulare --------------------- */
.mic-frontend-form{flex:1 1 280px;min-width:280px}
.mic-form-group{margin-bottom:15px}

/* KORREKTUR: Schriftgröße für die Titel der Eingabefelder hier anpassen */
.mic-frontend-form .mic-form-group label {
    display:block;
    font-weight:600; /* Standard: 600 (halbfett). Ändern Sie dies nach Bedarf (z.B. auf 400 für normal). */
    margin-bottom:5px;
    font-size: 20px !important; /* Ändern Sie diesen Wert auf Ihre gewünschte Schriftgröße. !important stellt sicher, dass es funktioniert. */
}

.mic-form-group input[type="text"],
.mic-form-group input[type="file"],
.mic-form-group select{width:100%}

/* --------------------- Vorschau-Bereich ------------------ */
.mic-frontend-preview{flex:2 1 300px;min-width:300px}
.mic-preview-wrapper{position:relative}
.mic-preview-card{
    position:relative;
    background-size:contain;
    background-position:top left;
    background-repeat:no-repeat;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    overflow:hidden;
}
.mic-preview-element{
    position:absolute;box-sizing:border-box;padding:5px;white-space:nowrap;
}

/* Cropped-Bild & QR-Code korrekt anzeigen */
.mic-preview-image,
.mic-preview-qrcode { /* QR-Code hinzugefügt */
    background-size:contain!important;
    background-position:center;
    background-repeat:no-repeat;
    /* NEU: Schärferes Rendering für Pixelgrafiken */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* KORREKTUR: Vertikale Zentrierung für Unterschriften */
.mic-preview-element.mic-preview-signature {
    display: flex;
    align-items: center; /* Zentriert den Text vertikal in der Box */
}


/* --------------------- Wasserzeichen --------------------- */
.mic-watermark{
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:.35;
    pointer-events:none;
    z-index:5;
}

/* --------------------- Info-Icon + Tooltip --------------- */
.mic-info-trigger{
    position:absolute;
    z-index:10;
    width:22px;height:22px;
    line-height:22px;
    padding:0;
    margin:0;
    border:none;
    border-radius:50%;
    background:#fff;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
    box-shadow:0 0 2px rgba(0,0,0,.4);
}
.mic-info-trigger:focus{outline:2px solid #2271b1;outline-offset:1px}

.mic-info-tooltip{
    position:absolute;
    max-width:220px;
    padding:10px 14px;
    font-size:12px;
    line-height:1.35;
    border-radius:4px;
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    z-index:11;
}
.mic-info-tooltip[hidden]{display:none!important}

/* Standard-Fallback-Positionen (werden inline überschrieben) */
.mic-info-trigger[data-pos="tr"]{top:8px;right:8px}
.mic-info-trigger[data-pos="tl"]{top:8px;left:8px}
.mic-info-trigger[data-pos="br"]{bottom:8px;right:8px}
.mic-info-trigger[data-pos="bl"]{bottom:8px;left:8px}

/* Tooltip relative zu Icon wenn JS fallback nötig */
.mic-info-trigger[data-pos="tr"] + .mic-info-tooltip{top:32px;right:8px}
.mic-info-trigger[data-pos="tl"] + .mic-info-tooltip{top:32px;left:8px}
.mic-info-trigger[data-pos="br"] + .mic-info-tooltip{bottom:32px;right:8px}
.mic-info-trigger[data-pos="bl"] + .mic-info-tooltip{bottom:32px;left:8px}

/* --------------------- Upload-Overlay + Spinner ---------- */
.mic-upload-overlay{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.6);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:20;
}
@keyframes mic-spin{to{transform:rotate(360deg)}}
.mic-spinner{
    width:50px;height:50px;
    border:4px solid #ccc;
    border-top-color:#0073aa;
    border-radius:50%;
    animation:mic-spin 1s linear infinite;
}

/* --------------------- Thumbnails ------------------------ */
.mic-side-thumbs{margin-top:12px;text-align:center}
.mic-thumb{
    width:80px;height:auto;margin:0 5px;border:2px solid transparent;
    cursor:pointer;object-fit:contain;transition:border-color .2s;
}
.mic-thumb.is-active{border-color:#0073aa}

/* --------------------- Preisübersicht -------------------- */
.mic-price-summary{
    margin-top:15px;padding:10px;border:1px solid #ddd;background:#f9f9f9;
    border-radius:4px;font-size:14px;
}
.mic-price-summary p{margin:5px 0}
.mic-price-summary .mic-price-total{font-weight:bold}
.mic-price-summary .amount{float:right}

/* ATC row (button + disclaimer trigger) */
.mic-atc-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
}
.mic-atc-row .mic-disclaimer-trigger-atc{
    flex:0 0 auto;
    line-height:1;
}

/* --------------------- Disclaimer Trigger Buttons -------- */
.mic-disclaimer-trigger{
    display:inline-block;
    width:22px;height:22px;
    line-height:22px;
    padding:0;
    margin:0;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#d63638;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
    box-shadow:0 0 2px rgba(0,0,0,.4);
}
.mic-disclaimer-trigger:focus{
    outline:2px solid #2271b1;outline-offset:1px;
}

/* --------------------- Disclaimer Modal ------------------ */
.mic-disclaimer-modal{
    position:fixed;
    inset:0;
    z-index:100001;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:var(--mic-disc-size,14px);
    color:var(--mic-disc-color,#000);
}
.mic-disclaimer-modal[aria-hidden="true"]{
    display:none!important;
}
.mic-disclaimer-modal__overlay{
    position:absolute;
    inset:0;
    background:var(--mic-disc-overlay,rgba(0,0,0,.6));
}
.mic-disclaimer-modal__dialog{
    position:relative;
    max-width:var(--mic-disc-maxw,600px);
    width:90%;
    background:var(--mic-disc-bg,#fff);
    color:inherit;
    padding:var(--mic-disc-pad,20px);
    border-radius:4px;
    box-shadow:0 4px 16px rgba(0,0,0,.45);
    z-index:1;
    text-align:var(--mic-disc-align,left);
    max-height:90vh;
    overflow-y:auto;
}
.mic-disclaimer-modal__content{
    font-size:inherit;
    line-height:1.4;
    color:inherit;
}
.mic-disclaimer-modal__content p:first-child{margin-top:0}
.mic-disclaimer-modal__content p:last-child{margin-bottom:0}

/* Actions row (Ack button) */
.mic-disclaimer-modal__actions{
    margin-top:20px;
    text-align:center;
}
.mic-disclaimer-modal__actions .mic-disclaimer-modal__ack{
    font-size:inherit;
    line-height:1.2;
    padding:6px 16px;
}

/* --------------------- Modal (Cropper) ------------------- */
.mic-modal{
    display:none;position:fixed;z-index:100000;left:0;top:0;width:100%;
    height:100%;overflow:auto;background:rgba(0,0,0,.6);
}
.mic-modal-content{
    background:#fff;margin:3% auto;padding:0;border:1px solid #888;
    width:90%;max-width:1100px;
    box-shadow:0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19);
    position:relative;
}
.mic-editor-header{padding:10px 20px;border-bottom:1px solid #ddd;background:#f7f7f7}
.mic-editor-header h2{margin:0}
.mic-modal-close{
    color:#aaa;position:absolute;top:10px;right:20px;font-size:28px;
    font-weight:bold;cursor:pointer;z-index:10;
}
.mic-modal-close:hover,.mic-modal-close:focus{color:#000}
#mic-cropper-modal .mic-cropper-content{max-width:800px}
.mic-cropper-body{padding:20px}
.mic-cropper-img-container{width:100%;height:400px;background:#f1f1f1}
#mic-cropper-image{display:block;max-width:100%}
.mic-cropper-footer{
    padding:15px 20px;border-top:1px solid #ddd;background:#f7f7f7;
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:10px;
}
.mic-cropper-controls label{display:flex;align-items:center;gap:5px}
#mic-cropper-modal .button .dashicons{line-height:inherit}

/* --------------------- Transition ------------------------ */
.mic-preview-card{transition:opacity .15s}
.mic-frontend-form{transition:opacity .15s}

/* ========================================================================
   MOBILE (≤ 767 px)
======================================================================== */
@media (max-width:767px){

    .mic-frontend-wrapper{flex-direction:column}

    .mic-frontend-preview{order:0;width:100%;min-width:100%}
    .mic-frontend-form   {order:1;width:100%;min-width:100%}

    .mic-preview-wrapper{margin:0 auto;max-width:100%}

    .mic-side-thumbs{order:0;margin:10px 0 20px;text-align:center}
}