/**
 * TDP Certificate Verification — Front-end styles.
 * Matches the existing Teach-Demy brand colors (#062b2b primary, #16a673 accent).
 *
 * @package Teach_Demy_Plus
 * @since 2.0.0
 */

/* ===== Verification page wrapper ===== */
.tdp-verification-page {
        background: linear-gradient(135deg, #f4f6f9 0%, #e9fbf4 100%);
        min-height: 70vh;
        padding: 60px 20px;
}

.tdp-verification-container {
        max-width: 700px;
        margin: 0 auto;
        background: #fff;
        padding: 50px;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(6, 43, 43, 0.1);
        text-align: center;
}

.tdp-verification-container h1 {
        color: #062b2b;
        margin: 0 0 12px;
        font-size: 32px;
        font-weight: 700;
}

.tdp-verification-intro {
        color: #6b7280;
        font-size: 16px;
        margin: 0 0 40px;
        line-height: 1.6;
}

/* ===== Verification form ===== */
/* Round 41 (item 65): the inner "Certificate Verification" box used to sit
   on the same background as the outer card — it now gets its own soft mint
   tint + distinct border so the two read as separate surfaces. */
.tdp-verify-wrap {
        margin-top: 32px;
        background: #f2faf6;
        border: 1px solid #cfe8dd;
        border-radius: 14px;
        padding: 30px 28px;
}

.tdp-verify-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #062b2b;
        margin-bottom: 8px;
        letter-spacing: 0.5px;
}

.tdp-verify-input-group {
        display: flex;
        gap: 8px;
        max-width: 500px;
        margin: 0 auto;
}

/* Round 41 (item 51): the LMS Number input was invisible in LIGHT mode on
   the client's site (theme-wide input resets stripped its border/background).
   Explicit background + clearly visible border + focus ring, with the
   selector bumped to .tdp-verify-wrap input.tdp-verify-input so a theme's
   generic input rules can't win the cascade. Dark mode keeps its own block
   below with the same selector. */
.tdp-verify-wrap input.tdp-verify-input {
        flex: 1;
        padding: 14px 18px;
        background: #ffffff;
        border: 2px solid #94a8a0;
        border-radius: 8px;
        font-size: 16px;
        font-family: 'Courier New', monospace;
        letter-spacing: 1px;
        text-align: center;
        color: #1d2327;
        transition: all 0.2s;
}

.tdp-verify-wrap input.tdp-verify-input::placeholder {
        color: #9ca3af;
}

.tdp-verify-wrap input.tdp-verify-input:focus {
        outline: none;
        border-color: #16a673;
        box-shadow: 0 0 0 4px rgba(22, 166, 115, 0.18);
}

.tdp-verify-btn {
        padding: 14px 28px;
        background: #062b2b;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
}

.tdp-verify-btn:hover:not(:disabled) {
        background: #07504b;
        transform: translateY(-1px);
}

.tdp-verify-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
}

.tdp-verify-hint {
        margin-top: 16px;
        font-size: 13px;
        color: #9ca3af;
}

/* ===== Verification result ===== */
.tdp-verify-result {
        margin-top: 32px;
        animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
}

.tdp-verify-valid {
        background: #f0fdf4;
        border: 2px solid #46b450;
        border-radius: 12px;
        padding: 32px;
}

.tdp-verify-icon {
        font-size: 56px;
        line-height: 1;
        margin-bottom: 12px;
}

.tdp-verify-valid .tdp-verify-icon {
        color: #46b450;
}

.tdp-verify-status {
        font-size: 22px;
        font-weight: 700;
        color: #062b2b;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
}

.tdp-verify-valid .tdp-verify-status {
        color: #46b450;
}

.tdp-verify-info {
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
        text-align: left;
}

.tdp-verify-info th {
        background: #f8f9fb;
        color: #062b2b;
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #e5e7eb;
        width: 40%;
}

.tdp-verify-info td {
        padding: 10px 14px;
        color: #1d2327;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
}

.tdp-verify-info code {
        background: #e9fbf4;
        color: #062b2b;
        padding: 4px 10px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 13px;
}

.tdp-verify-invalid {
        background: #fef2f2;
        border: 2px solid #dc3232;
        border-radius: 12px;
        padding: 32px;
        text-align: center;
}

.tdp-verify-invalid .tdp-verify-icon {
        color: #dc3232;
}

.tdp-verify-invalid .tdp-verify-status {
        color: #dc3232;
}

.tdp-verify-message {
        color: #6b7280;
        font-size: 14px;
        margin-top: 8px;
}

.tdp-verify-revoked {
        background: #fff8e6;
        border-color: #ffb900;
}

.tdp-verify-revoked .tdp-verify-icon {
        color: #ffb900;
}

.tdp-verify-revoked .tdp-verify-status {
        color: #ffb900;
}

/* ===== Instructor signature upload panel ===== */
.tdp-instructor-signature-panel {
        background: #fff;
        padding: 32px;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        max-width: 600px;
        margin: 24px auto;
}

.tdp-instructor-signature-panel h3 {
        color: #062b2b;
        margin-top: 0;
        margin-bottom: 24px;
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: 12px;
}

.tdp-current-signature {
        margin-bottom: 24px;
}

.tdp-current-signature label {
        display: block;
        font-weight: 600;
        color: #062b2b;
        margin-bottom: 8px;
}

.tdp-signature-preview {
        background: #f8f9fb;
        border: 2px dashed #e5e7eb;
        border-radius: 8px;
        padding: 24px;
        text-align: center;
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
}

.tdp-no-signature {
        color: #9ca3af;
        font-style: italic;
        margin: 0;
}

#tdp-signature-upload-form label {
        display: block;
        margin-bottom: 16px;
        font-weight: 600;
        color: #062b2b;
}

#tdp-signature-upload-form input[type="file"],
#tdp-signature-upload-form select {
        display: block;
        margin-top: 6px;
        padding: 8px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 14px;
}

.tdp-signature-status {
        margin-top: 16px;
        font-size: 14px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
        .tdp-verification-container {
                padding: 32px 20px;
        }
        /* Round 41 (item 65): slimmer inner panel on phones. */
        .tdp-verify-wrap {
                padding: 22px 16px;
        }
        .tdp-verify-input-group {
                flex-direction: column;
        }
        .tdp-verify-info th {
                width: 100%;
        }
}

/* ===== Round 9 — dark mode (auto, screen only; print stays light) ===== */
@media (prefers-color-scheme: dark) {
        .tdp-verification-page {
                background: linear-gradient(135deg, #071f1f 0%, #043a33 100%);
        }
        .tdp-verification-container {
                background: #0b2b28;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
        }
        .tdp-verification-container h1 {
                color: #e9fbf4;
        }
        .tdp-verification-intro {
                color: #9adbc2;
        }
        .tdp-verify-label {
                color: #c9f0e0;
        }
        /* Round 41 (items 63/65): dark variant of the inner verification panel —
           a deeper tint than the #0b2b28 card so the two boxes stay distinct. */
        .tdp-verify-wrap {
                background: #07231f;
                border-color: #1f5347;
        }
        .tdp-verify-wrap input.tdp-verify-input {
                background: #06231f;
                border-color: #1d4a42;
                color: #e9fbf4;
        }
        .tdp-verify-wrap input.tdp-verify-input::placeholder {
                color: #5f8f81;
        }
        .tdp-verify-wrap input.tdp-verify-input:focus {
                border-color: #16a673;
                box-shadow: 0 0 0 4px rgba(22, 166, 115, 0.25);
        }
        .tdp-verify-btn {
                background: #16a673;
        }
        .tdp-verify-btn:hover:not(:disabled) {
                background: #128a5e;
        }
        .tdp-verify-hint {
                color: #5f8f81;
        }
        .tdp-verify-valid {
                background: #0c3524;
                border-color: #1f9d63;
        }
        .tdp-verify-valid .tdp-verify-status {
                color: #27c58b;
        }
        .tdp-verify-info th {
                background: #0a2a26;
                color: #c9f0e0;
                border-bottom-color: #1d4a42;
        }
        .tdp-verify-info td {
                color: #d9efe6;
                border-bottom-color: #1d4a42;
        }
        .tdp-verify-info code {
                background: #0a2a26;
                color: #27c58b;
        }
        .tdp-verify-invalid {
                background: #3a1214;
                border-color: #c0392b;
        }
        .tdp-verify-message {
                color: #b7a6a6;
        }
        .tdp-verify-revoked {
                background: #33290d;
                border-color: #c9a227;
        }
        .tdp-instructor-signature-panel {
                background: #0b2b28;
                box-shadow: none;
        }
        .tdp-instructor-signature-panel h3 {
                color: #e9fbf4;
                border-bottom-color: #1d4a42;
        }
        .tdp-current-signature label,
        #tdp-signature-upload-form label {
                color: #c9f0e0;
        }
        .tdp-signature-preview {
                background: #06231f;
                border-color: #1d4a42;
        }
        .tdp-no-signature {
                color: #5f8f81;
        }
        #tdp-signature-upload-form input[type="file"],
        #tdp-signature-upload-form select {
                background: #06231f;
                border-color: #1d4a42;
                color: #d9efe6;
        }
        .tdp-signature-preview img {
                /* keep the scanned signature itself visible on dark cards. */
                background: #ffffff;
                border-radius: 6px;
                padding: 6px;
        }
}

@media print {
        /* Printing always uses the light palette — the dark block above is
           screen-only thanks to print re-evaluation of prefers-color-scheme. */
        .tdp-verification-page {
                background: #fff;
        }
        .tdp-verification-container {
                background: #fff;
                box-shadow: none;
        }
}

/* =========================================================
   Round 17 — MOBILE PASS (phones)
   Certificates on a phone: meta rows wrap, QR + signatures stack,
   share buttons go full width, everything stays inside the viewport.
   ========================================================= */
@media (max-width:768px){
  .tdp-certificate{
    min-width:0;
    padding:10px;
  }
  .tdp-cert-header{
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    text-align:center;
  }
  .tdp-cert-meta{
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
  }
  .tdp-cert-meta-item{min-width:46%}
  .tdp-cert-title{font-size:clamp(17px,5.2vw,24px)}
  .tdp-cert-student-name{font-size:clamp(15px,4.8vw,22px)}
  .tdp-cert-qr-img{width:92px;height:92px}
  .tdp-cert-signatures{
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
  }
  .tdp-cert-signature-block{min-width:46%}
  .tdp-cert-share{
    flex-wrap:wrap;
    gap:8px;
  }
  .tdp-cert-share a,
  .tdp-cert-share button{
    flex:1 1 auto;
    min-height:42px;
    justify-content:center;
    text-align:center;
  }
  .tdp-cert-verify-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
}
@media (max-width:480px){
  .tdp-cert-meta-item{min-width:100%}
  .tdp-cert-signature-block{min-width:100%}
  .tdp-cert-org-name{font-size:12.5px}
  .tdp-cert-org-tagline{font-size:10px}
}

/* =========================================================
   ROUND 42 — instructor signature panel
   The employer's requested signature-upload section, redesigned and
   finally VISIBLE: rendered at the bottom of the instructor's
   "Manage Assessments" My-Account tab (and still available via the
   [tdp_instructor_signature] shortcode). The new tdp-isp-* classes
   below intentionally re-declare the panel container so the legacy
   "Instructor signature upload panel" rules above (max-width 600px,
   centered margin, h3 underline) are fully overridden.
   ========================================================= */
.tdp-instructor-signature-panel {
        background: #fff;
        border: 1px solid #dce7e4;
        border-radius: 14px;
        padding: 22px 24px;
        margin: 26px 0 0;
        max-width: none;
        width: 100%;
        box-shadow: 0 2px 10px rgba(6, 43, 43, 0.07);
}

.tdp-instructor-signature-panel .tdp-isp-title {
        margin: 0 0 8px;
        padding: 0;
        border: none;
        font-size: 18px;
        font-weight: 700;
        color: #06342e;
}

.tdp-instructor-signature-panel .tdp-isp-desc {
        margin: 0 0 16px;
        font-size: 13.5px;
        line-height: 1.7;
        color: #5b6b66;
}

.tdp-instructor-signature-panel .tdp-isp-preview {
        background: #fff;
        border: 2px dashed #b9cec7;
        border-radius: 10px;
        min-height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        margin: 0 0 16px;
}

.tdp-instructor-signature-panel .tdp-isp-preview img {
        max-height: 100px;
        width: auto;
}

.tdp-instructor-signature-panel .tdp-isp-empty {
        margin: 0;
        color: #9ca3af;
        font-style: italic;
}

.tdp-instructor-signature-panel .tdp-isp-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
}

/* Scoped button styles — mirror the plugin's .tdp-btn conventions
   (tdp-exam.css) so the panel stays presentable even where that
   stylesheet is not loaded. */
.tdp-instructor-signature-panel .tdp-btn {
        display: inline-block;
        padding: 10px 24px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 6px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
}

.tdp-instructor-signature-panel .tdp-btn-primary {
        background: #062b2b;
        color: #fff;
        border-color: #16a673;
}

.tdp-instructor-signature-panel .tdp-btn-primary:hover {
        background: #07504b;
}

.tdp-instructor-signature-panel .tdp-isp-remove-btn {
        background: #fff;
        color: #c62828;
        border-color: #c62828;
}

.tdp-instructor-signature-panel .tdp-isp-remove-btn:hover {
        background: #fdf3f3;
}

/* The file input (same selector shape as the legacy rules above so the
   later position in the file wins the cascade). */
#tdp-signature-upload-form input[type="file"] {
        display: inline-block;
        margin-top: 0;
        padding: 8px 10px;
        border: 1px solid #dce7e4;
        border-radius: 8px;
        background: #f8faf9;
        font-size: 13.5px;
        max-width: 100%;
}

.tdp-instructor-signature-panel .tdp-isp-status {
        margin-top: 14px;
        font-size: 14px;
}

.tdp-isp-ok { color: #2e7d32; }
.tdp-isp-err { color: #c62828; }

@media (max-width: 640px) {
        .tdp-instructor-signature-panel { padding: 18px 16px; }
        .tdp-instructor-signature-panel .tdp-isp-row {
                flex-direction: column;
                align-items: stretch;
        }
        .tdp-instructor-signature-panel .tdp-isp-row input[type="file"] {
                width: 100%;
        }
        .tdp-instructor-signature-panel .tdp-isp-row .tdp-btn {
                width: 100%;
                text-align: center;
        }
}

/* Round 42 — dark mode (same auto pattern the rest of this file uses;
   print stays light). */
@media (prefers-color-scheme: dark) {
        .tdp-instructor-signature-panel {
                background: #0b2b28;
                border-color: #1d4a42;
                box-shadow: none;
        }
        .tdp-instructor-signature-panel .tdp-isp-title {
                color: #e9fbf4;
        }
        .tdp-instructor-signature-panel .tdp-isp-desc {
                color: #9adbc2;
        }
        .tdp-instructor-signature-panel .tdp-isp-preview {
                background: #06231f;
                border-color: #1d4a42;
        }
        .tdp-instructor-signature-panel .tdp-isp-empty {
                color: #5f8f81;
        }
        .tdp-instructor-signature-panel .tdp-isp-preview img {
                /* keep the scanned signature itself visible on dark cards. */
                background: #ffffff;
                border-radius: 6px;
                padding: 6px;
        }
        .tdp-instructor-signature-panel .tdp-btn-primary {
                background: #16a673;
                border-color: #16a673;
        }
        .tdp-instructor-signature-panel .tdp-btn-primary:hover {
                background: #128a5e;
        }
        .tdp-instructor-signature-panel .tdp-isp-remove-btn {
                background: transparent;
                color: #ef9a9a;
                border-color: #7a3b3b;
        }
        .tdp-instructor-signature-panel .tdp-isp-remove-btn:hover {
                background: #25100f;
        }
        #tdp-signature-upload-form input[type="file"] {
                background: #06231f;
                border-color: #1d4a42;
                color: #d9efe6;
        }
        .tdp-isp-ok { color: #27c58b; }
        .tdp-isp-err { color: #ef9a9a; }
}


/* Round 58 — Edits #337 («در حالت دارک باکس‌ها و متن‌ها دیده نمی‌شوند»): auto-generated dark counterparts for every
 * light-background / dark-text rule above that had no dark rule. 35 rules. */
html[data-theme="dark"] .tdp-verification-container{background:#0d2222 !important}
html[data-theme="dark"] .tdp-verification-container h1{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verification-intro{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-wrap{background:#0d2222 !important}
html[data-theme="dark"] .tdp-verify-label{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-wrap input.tdp-verify-input{background:#0d2222 !important;color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-valid{background:#0d2222 !important}
html[data-theme="dark"] .tdp-verify-status{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-info th{background:#0d2222 !important;color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-info td{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-info code{background:#0d2222 !important;color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-invalid{background:#0d2222 !important;border-color:rgba(255,255,255,.16) !important}
html[data-theme="dark"] .tdp-verify-invalid .tdp-verify-icon{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-invalid .tdp-verify-status{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-message{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-verify-revoked{background:#0d2222 !important;border-color:rgba(255,255,255,.16) !important}
html[data-theme="dark"] .tdp-instructor-signature-panel{background:#0d2222 !important}
html[data-theme="dark"] .tdp-instructor-signature-panel h3{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-current-signature label{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-signature-preview{background:#0d2222 !important;border-color:rgba(255,255,255,.16) !important}
html[data-theme="dark"] #tdp-signature-upload-form label{color:#e6f4ef !important}
html[data-theme="dark"] #tdp-signature-upload-form input[type="file"]{border-color:rgba(255,255,255,.16) !important}
html[data-theme="dark"] #tdp-signature-upload-form select{border-color:rgba(255,255,255,.16) !important}
html[data-theme="dark"] .tdp-signature-preview img{background:#0d2222 !important}
html[data-theme="dark"] .tdp-verification-page{background:#0d2222 !important}
html[data-theme="dark"] .tdp-instructor-signature-panel{background:#0d2222 !important;border-color:rgba(255,255,255,.16) !important}
html[data-theme="dark"] .tdp-instructor-signature-panel .tdp-isp-title{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-instructor-signature-panel .tdp-isp-desc{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-instructor-signature-panel .tdp-isp-preview{background:#0d2222 !important}
html[data-theme="dark"] .tdp-instructor-signature-panel .tdp-isp-remove-btn{background:#0d2222 !important;color:#e6f4ef !important}
html[data-theme="dark"] .tdp-instructor-signature-panel .tdp-isp-remove-btn:hover{background:#0d2222 !important}
html[data-theme="dark"] #tdp-signature-upload-form input[type="file"]{background:#0d2222 !important;border-color:rgba(255,255,255,.16) !important}
html[data-theme="dark"] .tdp-isp-ok{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-isp-err{color:#e6f4ef !important}
html[data-theme="dark"] .tdp-instructor-signature-panel .tdp-isp-preview img{background:#0d2222 !important}

/* Round 58 — Edits #329 («بک‌گراند بخش certification verification عوض بشه که با بک خود باکس اصلی تفاوت داشته باشه»).
 * The form card now sits on its OWN tinted surface with a visible border, clearly different from the page /
 * outer box behind it, in light and dark mode. */
.tdp-verify-wrap .tdp-verify-form,
.tdp-verify-form {
        background: #eaf6f1 !important;
        border: 1px solid #bfe0d2 !important;
        border-radius: 18px;
        padding: 26px 28px;
        box-shadow: 0 14px 34px -22px rgba(6, 43, 43, .45);
}
.tdp-verify-form .tdp-verify-label { color: #062b2b !important; }
.tdp-verify-form .tdp-verify-hint { color: #355a4c !important; }
html[data-theme="dark"] .tdp-verify-form {
        background: #123636 !important;
        border: 1px solid rgba(110, 231, 183, .28) !important;
        box-shadow: 0 16px 38px -20px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .tdp-verify-form .tdp-verify-label { color: #eaf7f2 !important; }
html[data-theme="dark"] .tdp-verify-form .tdp-verify-hint { color: #a9c9bd !important; }