/* ACC Certificate - Amar layout (non-scale) */
.acc-cert-amar{
    width: 100%;
    max-width: 1120px;
    aspect-ratio: 1060 / 768;
    position: relative;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    margin: 20px auto;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    border-radius: 2px;
}
.acc-cert-num{
	display: flex;
	align-items:center;
	justify-content:center;
	width: 100%;
	font-weight:700;
}
.acc-cert-inner{
    position:absolute; inset: 60px 36px 36px 36px;
    display:flex; flex-direction:column;
    font-family: 'DejaVu Sans', Arial, sans-serif;
    color:#111827;
}
.acc-cert-top{ display:grid; grid-template-columns: 120px 1fr 120px; align-items:center; gap:16px;}
.acc-cert-logo img{ width:86px; height:auto; }
.acc-cert-headlines{ text-align:center; }
.acc-cert-headlines .iso{ font-weight:700; font-size:14px; margin-bottom:4px; }
.acc-cert-headlines .brand{ font-size:30px; font-weight:900; letter-spacing:2px; color:#1f3b93; }
.acc-cert-headlines .reg{ font-size:12px; opacity:.9; }
.acc-cert-title{ text-align:center; font-size:46px; color:#b11116; font-weight:800; text-shadow:0 1px 0 #fff; margin:16px 0 6px; }
.acc-cert-rows{ margin-top:8px; }
.acc-cert-rows .row{ display:flex; gap:10px; align-items:flex-end; margin:14px 0; }
.acc-cert-rows .row.duo{ display:flex; gap:20px; }
.acc-cert-rows .row .half{ flex:1; display:flex; gap:10px; align-items:flex-end; }
.acc-cert-rows .row .half.right{ justify-content:flex-end; }
.acc-cert-rows .lbl{ font-size:20px; white-space:nowrap; }
.acc-cert-rows .val{ font-size:22px; font-weight:600; min-width:240px; }
.acc-cert-rows .underline{ border-bottom: 2px solid #4b5563; flex:1; padding:0 6px 2px; min-width:120px;}
.acc-cert-bottomnote{ position:absolute; bottom:0px; left:36px; right:36px; text-align:right; font-size:12px; color:#111827; opacity:.95; }
.signblock{ display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.signline{ width:280px; border-bottom:1px solid #444; height:1px; }
.signtxt{ font-size:14px; text-align:right; }

/* Tablet */
@media (max-width: 900px){
  .acc-cert-inner{ inset: 22px; }
  .acc-cert-top{ grid-template-columns: 84px 1fr 84px; gap: 12px; }
  .acc-cert-logo img{ width:70px; }
  .acc-cert-headlines .brand{ font-size:32px; }
  .acc-cert-headlines .iso{ font-size:12px; }
  .acc-cert-headlines .reg{ font-size:11px; }
  .acc-cert-title{ font-size:36px; margin:12px 0 4px; }
  .acc-cert-rows .lbl{ font-size:16px; }
  .acc-cert-rows .val{ font-size:18px; }
  .acc-cert-rows .row{ margin:10px 0; gap:8px; }
  .acc-cert-rows .underline{ border-bottom-width: 1.6px; padding-bottom:1px; }
  .signline{ width:220px; }
  .signtxt{ font-size:12px; }
  .acc-cert-bottomnote{ font-size:10px; left:22px; right:22px;}
}


/* Mobile: make filled text smaller so it fits the lines */
@media (max-width: 520px){
  .acc-cert-inner{ inset: 14px; }
  .acc-cert-top{ grid-template-columns: 58px 1fr 58px; gap: 8px; }
  .acc-cert-logo img{ width:54px; }
  .acc-cert-headlines .brand{ font-size:24px; letter-spacing:1.2px; }
  .acc-cert-headlines .iso{ font-size:10px; }
  .acc-cert-headlines .reg{ font-size:9px; }
  .acc-cert-title{ font-size:26px; margin:8px 0 2px; }
  .acc-cert-rows .lbl{ font-size:12px; }
  .acc-cert-rows .val{ font-size:12.5px; font-weight:600; }
  .acc-cert-rows .row{ margin:8px 0; gap:6px; }
  .acc-cert-rows .underline{ border-bottom-width: 1px; padding:0 4px 1px; }
  .signline{ width:160px; }
  .signtxt{ font-size:11px; }
  .acc-cert-bottomnote{ font-size:9px; }
}

@media print{
  .acc-cert-amar{ box-shadow:none; margin:0; }
}


/* Mobile replacement card for [acc_my_certificates] */

.acc-mobile-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; margin:10px 0; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.acc-mobile-msg{ font-size:14px; color:#111827; margin-bottom:10px; }
.acc-mobile-cta{ display:flex; gap:10px; }
.acc-btn{ display:inline-block; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid transparent; }
.acc-btn-primary{ background:#3d3f95; color:#fff; }
.acc-btn-primary:hover{ opacity:.92; }
.acc-btn-ghost{ background:#fff; color:#3d3f95; border-color:#c7c9ff; }
.acc-btn-ghost:hover{ background:#f5f6ff; }

/* Under 500px: hide canvas for compact list, show card */
@media (max-width: 500px){
  .acc-cert-item{ margin-bottom:12px; }
  .acc-cert-item .acc-certificate-wrap{ display:block; }
  .acc-cert-item.compact .acc-certificate-wrap{ display:none; }
  .acc-cert-item.compact .acc-mobile-card{ display:block; }
}


/* Mobile card default visible */
.acc-mobile-card{ display:block; }

/* Hide the mobile card on wider screens */
@media (min-width: 501px){
  .acc-mobile-card{ display:none; }
  .acc-cert-item .acc-certificate-wrap{ display:block; }
}

/* On small screens hide the big canvas when we have a mobile card */
@media (max-width: 500px){
  .acc-cert-item.compact .acc-certificate-wrap{ display:none; }
}

/* Styled action buttons */
.acc-cert-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.acc-cert-actions a.button{ display:inline-block; padding:10px 14px; border-radius:999px; background:#3d3f95; color:#fff !important; text-decoration:none; font-weight:600; border:0; }
.acc-cert-actions a.button:hover{ opacity:.9; }
.acc-cert-actions a.button + a.button{ background:#fff; color:#3d3f95 !important; border:1px solid #c7c9ff; }


/* Verification UI */
.acc-verify-wrap{ max-width:820px; margin:12px auto; padding:10px; }
.acc-verify-title{ font-size:22px; margin:0 0 10px; color:#111827; }
.acc-cert-verify-form label{ display:block; margin:6px 0 4px; font-weight:600; }
.acc-cert-verify-form input[type="text"]{ width:100%; max-width:420px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; }
.acc-cert-verify-form .acc-btn{ margin-top:8px; }
.acc-verify-card{ margin-top:12px; border-radius:14px; padding:16px; border:1px solid #e5e7eb; box-shadow:0 8px 22px rgba(0,0,0,.05); background:#fff; }
.acc-verify-ok .acc-v-status{ color:#0b7a34; font-weight:800; margin-bottom:8px; }
.acc-verify-bad .acc-v-status{ color:#b11116; font-weight:800; }
.acc-v-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; font-size:14px; }
.acc-verify-actions{ margin-top:10px; display:flex; gap:10px; }
@media (max-width:600px){ .acc-v-grid{ grid-template-columns:1fr; } }

/* ----------------------------
   Certificate Verification Form
----------------------------- */
.acc-cert-verify-form {
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 30px auto;
    text-align: center;
}

.acc-cert-verify-form label {
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
    color: #333;
}

.acc-cert-verify-form input[type="text"] {
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    font-size: 16px;
    margin-bottom: 16px;
}

.acc-cert-verify-form button {
    background: #3d3f95;
    color: #fff;
    border: none;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.acc-cert-verify-form button:hover {
    background: #2c2d70;
}

.signblock{
	align-content: center;
	text-align: center;
}

/* Certificate number at the bottom */
.acc-cert-certno{
  position: absolute;          /* works if your outer certificate wrapper is position:relative */
  right: 32px;                 /* nudge as needed */
  bottom: 24px;                /* nudge as needed */
  font-weight: 700;
  color: #111827;
  font-size: 14px;
  letter-spacing: .4px;
}

/* If your template isn’t using a positioned wrapper, fall back to a static layout */
.acc-certificate-wrap .acc-cert-certno{
  position: static;
  text-align: right;           /* aligns to the right without absolute positioning */
  margin: 8px 32px 0 0;
}