/* ============================================================
   Joemarine CMS — Public CSS v1.4.0
   ============================================================ */
:root{
    --blue:#1a3a6b; --gold:#c9a227; --green:#27ae60; --red:#e74c3c;
    --light:#f4f6f9; --border:#dde2ec; --text:#2c3e50; --muted:#7f8c8d;
    --radius:10px; --shadow:0 4px 24px rgba(0,0,0,.12);
}
*,*::before,*::after{box-sizing:border-box;}

/* ── Base elements ─────────────────────────────────────────── */
.jcms-alert{padding:12px 16px;border-radius:8px;margin-bottom:14px;font-size:14px;}
.jcms-alert-success{background:#eafaf1;border:1px solid #a9dfbf;color:#1e8449;}
.jcms-alert-error  {background:#fdedec;border:1px solid #f5b7b1;color:#922b21;}
.jcms-alert-info   {background:#eaf4fb;border:1px solid #aed6f1;color:#1a5276;}
.jcms-input,.jcms-select{
    width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;
    font-size:15px;color:var(--text);background:#fff;transition:border-color .2s,box-shadow .2s;appearance:none;
}
.jcms-input:focus,.jcms-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,58,107,.12);}
.jcms-input-lg{font-size:16px;padding:13px 18px;}
.jcms-btn-primary,.jcms-btn-secondary,.jcms-btn-gold{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 20px;border-radius:8px;font-size:14px;font-weight:700;
    border:none;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;
}
.jcms-btn-primary  {background:var(--blue);color:#fff;}
.jcms-btn-primary:hover{background:#14336b;box-shadow:0 4px 12px rgba(26,58,107,.3);}
.jcms-btn-secondary{background:#fff;color:var(--blue);border:2px solid var(--blue);}
.jcms-btn-secondary:hover{background:var(--light);}
.jcms-btn-gold{background:var(--gold);color:#fff;}
.jcms-btn-gold:hover{background:#a8831c;box-shadow:0 4px 12px rgba(201,162,39,.35);}
.req{color:var(--red);}
.jcms-hint{font-size:12px;color:var(--muted);margin-top:4px;display:block;}

/* ════════════════════════════════════════════════════════════
   REGISTRATION FORM
══════════════════════════════════════════════════════════════ */
.jcms-form-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:820px;margin:0 auto;}
.jcms-form-header{background:linear-gradient(135deg,var(--blue),#2e5899);color:#fff;padding:36px 32px 28px;text-align:center;}
.jcms-form-icon{font-size:48px;margin-bottom:10px;display:block;}
.jcms-form-header h2{margin:0 0 6px;font-size:24px;}
.jcms-form-header p{margin:0;opacity:.8;font-size:14px;}
.jcms-form{padding:32px;}
.jcms-two-up  {display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.jcms-three-up{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:18px;}
.jcms-field-wrap label{display:block;font-weight:600;margin-bottom:6px;font-size:14px;color:var(--text);}
.jcms-form-footer{text-align:center;padding-top:14px;border-top:1px solid var(--border);margin-top:8px;}

/* Passport photo */
.jcms-photo-section{display:flex;justify-content:center;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border);}
.jcms-photo-upload-area{
    width:140px;height:170px;border:2.5px dashed var(--border);border-radius:10px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;transition:all .2s;position:relative;overflow:hidden;background:var(--light);
}
.jcms-photo-upload-area:hover{border-color:var(--blue);background:#eef2f9;}
.jcms-photo-upload-area.jcms-drag-over{border-color:var(--gold);background:#fffdf0;border-style:solid;}
#jcms-photo-placeholder{text-align:center;padding:12px;pointer-events:none;}
.jcms-photo-icon{font-size:34px;display:block;margin-bottom:6px;}
#jcms-photo-placeholder p{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--blue);}
#jcms-photo-placeholder small{font-size:10px;color:var(--muted);display:block;line-height:1.5;}
#jcms-photo-preview-wrap{position:relative;width:100%;height:100%;}
#jcms-photo-preview{width:100%;height:100%;object-fit:cover;display:block;}
.jcms-photo-remove-btn{
    position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;
    border:none;border-radius:50%;width:22px;height:22px;
    cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:5;
}
.jcms-upload-progress{text-align:center;padding:16px;width:100%;}
.jcms-progress-bar{background:#e0e0e0;border-radius:4px;height:6px;margin-bottom:8px;overflow:hidden;}
.jcms-progress-fill{height:100%;background:var(--blue);border-radius:4px;width:0%;transition:width .2s;}
.jcms-upload-progress span{font-size:12px;color:var(--muted);}

/* ════════════════════════════════════════════════════════════
   PRINT PAGE — SEARCH
══════════════════════════════════════════════════════════════ */
.jcms-print-wrap{max-width:100%;margin:0 auto;padding:16px;}
.jcms-search-panel{
    background:linear-gradient(135deg,var(--blue),#2e5899);border-radius:var(--radius);
    padding:24px 28px;margin-bottom:16px;color:#fff;text-align:center;
}
.jcms-search-panel h2{margin:0 0 4px;font-size:20px;}
.jcms-search-panel p{margin:0 0 14px;opacity:.85;font-size:13px;}
.jcms-search-row{display:flex;gap:10px;max-width:560px;margin:0 auto;}
.jcms-search-row .jcms-input{flex:1;}

/* ════════════════════════════════════════════════════════════
   EDITOR TOOLBAR
══════════════════════════════════════════════════════════════ */
.jcms-editor-toolbar{
    background:#fff;border-radius:var(--radius);padding:10px 14px;
    box-shadow:var(--shadow);margin-bottom:14px;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    border-left:4px solid var(--gold);
    position:sticky;top:32px;z-index:100;
}
.jet-left{min-width:120px;}
.jet-right{display:flex;gap:8px;margin-left:auto;align-items:center;}
.jet-id-badge{font-weight:700;color:var(--blue);font-size:12px;display:block;}
.jet-group{display:flex;align-items:center;gap:5px;padding:4px 8px;background:var(--light);border-radius:7px;}
.jet-group-label{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;}
.jet-mini-label{font-size:10px;color:var(--muted);font-weight:600;white-space:nowrap;}
.jet-val{font-size:12px;font-weight:700;background:#fff;border-radius:4px;padding:2px 7px;min-width:40px;text-align:center;border:1px solid var(--border);}
.jet-btn{
    width:26px;height:26px;border:1.5px solid var(--border);border-radius:5px;
    background:#fff;cursor:pointer;font-size:12px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--blue);transition:all .12s;padding:0;
}
.jet-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.jet-reset{width:auto;padding:0 8px;font-size:11px;}
.jet-toggle.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.jet-select{height:30px;padding:0 8px;border:1.5px solid var(--border);border-radius:6px;font-size:12px;font-weight:600;background:#fff;color:var(--text);}
.jet-color{width:32px;height:26px;padding:2px;border:1.5px solid var(--border);border-radius:5px;cursor:pointer;}
.jet-save-msg{font-size:12px;font-weight:700;color:var(--green);white-space:nowrap;}

/* ════════════════════════════════════════════════════════════
   CERTIFICATE CANVAS — Portrait A4
══════════════════════════════════════════════════════════════ */
#jcms-cert-area{
    display:flex;justify-content:center;
    overflow-x:auto;
    padding-bottom:60px; /* room for scaled cert */
}
#jcms-cert-outer{
    transform-origin:top center;
    transition:transform .2s;
    position:relative;
}
/* A4 portrait at 96dpi = 794×1123px */
.jcms-cert{
    position:relative;
    width:794px;height:1123px;
    overflow:hidden;
    box-shadow:0 8px 40px rgba(0,0,0,.28);
    background:#fff;
    /* editing cursor */
    cursor:default;
}
.jcms-cert-bg-img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:fill;display:block;
    z-index:0;user-select:none;pointer-events:none;
}

/* ── Draggable field ──────────────────────────────────────── */
.jcms-field{
    position:absolute;
    z-index:10;
    cursor:grab;
    user-select:none;
    /* subtle selection ring off by default */
    outline:2px dashed transparent;
    outline-offset:3px;
    border-radius:3px;
    transition:outline-color .12s;
    min-width:30px;
    min-height:16px;
    /* resize handle for image fields */
}
.jcms-field:hover{outline-color:rgba(201,162,39,.6);}
.jcms-field.selected{
    outline-color:var(--gold) !important;
    cursor:grab;
    z-index:20;
}
.jcms-field.dragging{
    cursor:grabbing !important;
    opacity:.88;
    z-index:50;
    outline-color:var(--blue) !important;
}
/* Image fields are resizable via a corner handle */
.jcms-field-img{
    resize:both;
    overflow:hidden;
    min-width:60px;min-height:40px;
}

/* The actual text/content inside a field */
.field-inner{
    display:block;
    outline:none;
    white-space:nowrap;
    font-family:'Times New Roman',Times,serif;
}
.field-inner[contenteditable="true"]{
    background:rgba(255,255,255,.7);
    border-bottom:1.5px solid var(--gold);
    padding:0 2px;
    cursor:text;
    white-space:nowrap;
}

/* Drag handle — hidden unless hovered/selected */
.field-handle{
    position:absolute;
    top:-16px;left:50%;transform:translateX(-50%);
    background:var(--gold);color:#fff;
    font-size:11px;padding:1px 6px;border-radius:3px;
    cursor:grab;opacity:0;transition:opacity .15s;
    white-space:nowrap;pointer-events:none;
    user-select:none;
    z-index:30;
}
.jcms-field:hover .field-handle,
.jcms-field.selected .field-handle{opacity:1;}

/* Resize corner (only for image fields) */
.jcms-field-img::after{
    content:'↔';
    position:absolute;bottom:1px;right:3px;
    font-size:11px;color:rgba(201,162,39,.8);
    pointer-events:none;
    user-select:none;
}

.jcms-drag-hint{
    text-align:center;font-size:13px;color:var(--muted);margin-top:12px;
    padding:8px;background:var(--light);border-radius:6px;
}

/* ════════════════════════════════════════════════════════════
   VERIFICATION PAGE
══════════════════════════════════════════════════════════════ */
.jcms-container{max-width:820px;margin:0 auto;padding:20px;}
.jcms-verify-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:700px;margin:0 auto;}
.jcms-verify-header{background:linear-gradient(135deg,var(--blue),#2e5899);color:#fff;text-align:center;padding:32px 28px 24px;}
.jcms-verify-logo{font-size:48px;margin-bottom:10px;display:block;}
.jcms-verify-header h2{margin:0 0 6px;font-size:24px;}
.jcms-verify-header p{margin:0;opacity:.8;font-size:13px;}
.jcms-verify-search{padding:24px 28px;border-bottom:1px solid var(--border);}
.jcms-verify-result{padding:0 28px 24px;}
.jcms-verify-status{display:flex;align-items:center;gap:14px;padding:18px;border-radius:10px;margin:18px 0 0;}
.jcms-verify-valid   .jcms-verify-status{background:#eafaf1;border:2px solid #a9dfbf;}
.jcms-verify-invalid .jcms-verify-status{background:#fdedec;border:2px solid #f5b7b1;}
.jcms-status-icon{font-size:38px;flex-shrink:0;}
.jcms-verify-status h3{margin:0 0 4px;font-size:17px;}
.jcms-status-ok  h3{color:#1e8449;}
.jcms-status-fail h3{color:#922b21;}
.jcms-status-label{margin:0;font-size:13px;}
.jcms-verify-valid   .jcms-status-label{color:#1e8449;}
.jcms-verify-invalid .jcms-status-label{color:#922b21;}
.jcms-verify-details{background:var(--light);border-radius:8px;padding:14px 18px;margin:14px 0 0;}
.jcms-detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.jcms-detail-row:last-child{border-bottom:0;}
.jcms-detail-label{font-size:13px;color:var(--muted);font-weight:600;}
.jcms-detail-value{font-size:14px;font-weight:700;color:var(--text);text-align:right;}
.jcms-verify-footer-note{font-size:11px;color:var(--muted);text-align:center;margin-top:12px;}
.jcms-verify-info{background:var(--light);padding:14px 28px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);text-align:center;}
.jcms-hint-center{font-size:12px;color:rgba(255,255,255,.7);margin-top:8px;display:block;}

/* ════════════════════════════════════════════════════════════
   PRINT MEDIA — A4 Portrait
   Strategy: hide the whole page via visibility:hidden, then
   reveal only the certificate via visibility:visible.
   This works regardless of how deep inside the WordPress theme
   the shortcode output is nested.
══════════════════════════════════════════════════════════════ */
@media print {
    @page { size: A4 portrait; margin: 0; }

    /* Force correct colour output */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Hide the entire page */
    html, body {
        visibility: hidden !important;
    }

    /* Show ONLY the certificate and all its descendants */
    #jcms-cert-area,
    #jcms-cert-area * {
        visibility: visible !important;
    }

    /* Position the certificate area at the very top-left of the page */
    #jcms-cert-area {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 9999 !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    /* Remove zoom transform and centre offset */
    #jcms-cert-outer {
        transform: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Certificate fills the full A4 page */
    .jcms-cert {
        width:  210mm !important;
        height: 297mm !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        page-break-after: avoid !important;
        position: relative !important;
    }

    /* Clean up overlay UI elements */
    .jcms-field        { outline: none !important; }
    .jcms-field.selected { outline: none !important; }
    .field-handle      { display: none !important; }
    .jcms-field-img::after { display: none !important; }
    .field-inner[contenteditable] {
        background: transparent !important;
        border-bottom: none !important;
    }

    /* Ensure background image prints */
    .jcms-cert-bg-img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
    }
}

/* ── Responsive screen ─────────────────────────────────────── */
@media(max-width:860px){
    #jcms-cert-outer{transform:scale(0.52)!important;transform-origin:top center;margin-bottom:-530px;}
    #jcms-cert-area{padding-bottom:0;min-height:600px;}
    .jcms-two-up,.jcms-three-up{grid-template-columns:1fr;}
    .jcms-form{padding:18px;}
    .jcms-search-row{flex-direction:column;}
    .jcms-editor-toolbar{top:0;flex-direction:column;align-items:flex-start;}
    .jet-right{width:100%;justify-content:flex-end;}
}
@media(max-width:480px){
    #jcms-cert-outer{transform:scale(0.38)!important;margin-bottom:-690px;}
}