/* Certify plugin base frontend CSS. This file is required for WordPress inline styles to work. */

/* Material Icons Font Face */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

/* "Academic Prestige" Theme Variables */
:root {
--certify-primary: #1a365d;       /* Deep Institutional Navy */
--certify-primary-hover: #2a4365;
--certify-accent: #3182ce;        /* Royal Blue for interactive elements */
--certify-bg: #ffffff;            /* Pure white for documents */
--certify-surface: #f7fafc;       /* Very soft cool gray for offset areas */
--certify-border: #e2e8f0;        /* Crisp silver border */
--certify-text-dark: #1a202c;     /* Almost black for high contrast */
--certify-text-muted: #4a5568;    /* Slate gray for labels */
}

body {
-webkit-text-size-adjust: 100%;
tab-size: 4;
box-sizing: border-box;
font-family: Inter, system-ui, -apple-system, sans-serif;
color: var(--certify-text-dark);
}

/* --- Search Box Area (Sleek & Professional) --- */
.cf-search {
box-sizing: border-box;
font-family: Inter, system-ui, -apple-system, sans-serif;
width: 700px;
margin: 40px auto 30px auto !important;
background-color: var(--certify-bg);
border: 1px solid var(--certify-border);
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
padding: 2.5rem;
}

.cf-search form {
display: inline-flex;
width: 100%;
gap: 1rem;
align-items: center;
}

.cf-field {
box-sizing: border-box;
font-family: inherit;
display: inline-block !important;
border: 2px solid var(--certify-border) !important;
margin-bottom: 0px !important;
width: 90%;
padding: 0.75rem 1.25rem;
height: 50px;
border-radius: 6px;
background: var(--certify-surface);
color: var(--certify-text-dark);
font-size: 1rem;
font-weight: 500;
transition: all 0.2s ease;
}

.cf-field:focus {
outline: none;
background: var(--certify-bg);
border-color: var(--certify-accent) !important;
box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.15);
}

.cf-btn {
box-sizing: border-box;
font-family: inherit;
display: inline-block;
border: none;
height: 50px !important;
width: 200px;
background: var(--certify-primary) !important;
color: #fff !important;
min-height: 50px;
border-radius: 6px !important;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.2s ease;
}

.cf-btn:hover {
background: var(--certify-primary-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 54, 93, 0.25);
}

/* --- Official Result Card --- */
.rs-heading {
text-align: center;
font-family: Inter, system-ui, sans-serif;
font-weight: 800;
color: var(--certify-primary);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 1.5rem;
margin-bottom: 1rem;
margin-top: 2rem;
}

.cf-result-card {
box-sizing: border-box;
max-width: 720px;
margin: 20px auto 40px auto;
background: var(--certify-bg);
/* Thick official top border */
border-top: 8px solid var(--certify-primary);
border-right: 1px solid var(--certify-border);
border-bottom: 1px solid var(--certify-border);
border-left: 1px solid var(--certify-border);
border-radius: 8px;
/* Deep, elegant shadow prevents blending with white websites */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 15px rgba(0, 0, 0, 0.03);
padding: 3.5rem;
font-family: Inter, system-ui, -apple-system, sans-serif;
color: var(--certify-text-dark);
position: relative;
overflow: hidden;
}

/* Subtle Security Watermark Graphic */
.cf-result-card::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 250px;
height: 250px;
/* A faint shield/badge SVG */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
opacity: 0.6;
z-index: 0;
pointer-events: none;
transform: rotate(15deg);
}

.cf-result-card .cf-row {
position: relative;
z-index: 1; /* Keep text above watermark */
display: flex;
justify-content: flex-start;
align-items: center;
padding: 1.25rem 0;
border-bottom: 1px solid #edf2f7;
transition: background-color 0.2s ease;
}

.cf-result-card .cf-row:hover {
background-color: #f8fafc; /* Very subtle hover effect for reading rows */
}

.cf-result-card .cf-row:last-child {
border-bottom: none;
}

.cf-result-card .cf-label {
flex: 0 0 200px;
font-weight: 500;
color: var(--certify-text-muted);
text-align: left;
font-size: 1rem;
font-family: inherit;
}

.cf-result-card .cf-value {
flex: 1;
color: var(--certify-text-dark);
text-align: left;
font-weight: 700;
padding-left: 32px;
word-break: break-word;
display: flex;
align-items: center;
font-size: 1rem;
font-family: inherit;
}

.cf-result-card .cf-value a {
color: var(--certify-accent);
text-decoration: none;
}

.cf-result-card .cf-value a:hover {
text-decoration: underline;
color: var(--certify-primary);
}

.cf-tick {
margin-left: 10px;
width: 22px;
height: 22px;
display: inline-flex;
filter: drop-shadow(0 2px 4px rgba(39, 174, 96, 0.2));
}

/* --- QR Code & Action Section --- */
.cf-qr-section {
position: relative;
z-index: 1;
margin-top: 3rem;
padding: 2rem;
background-color: var(--certify-surface);
border: 1px solid var(--certify-border);
border-radius: 8px;
}

.cf-qr-container {
display: flex;
align-items: center;
justify-content: space-around;
gap: 2rem;
flex-wrap: wrap;
}

.cf-qr-code {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.cf-qr-code img {
border-radius: 4px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--certify-border);
background: #fff;
padding: 8px;
}

.cf-qr-label {
margin: 1rem 0 0 0;
font-size: 0.85rem;
color: var(--certify-text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cf-qr-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}

.cf-copy-btn {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--certify-bg);
color: var(--certify-primary);
border: 2px solid var(--certify-border);
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.cf-copy-btn:hover {
background: var(--certify-surface);
border-color: var(--certify-primary);
transform: translateY(-1px);
}

.cf-copy-btn i {
font-size: 18px;
}

.cf-copy-success {
display: flex;
align-items: center;
gap: 0.5rem;
color: #065f46;
font-weight: 600;
font-size: 0.875rem;
background: #d1fae5;
padding: 0.6rem 1.2rem;
border-radius: 6px;
border: 1px solid #a7f3d0;
}

/* --- Alerts --- */
.success, .danger {
box-sizing: border-box;
position: relative;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
border-radius: 6px;
font-weight: 500;
font-family: inherit;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.success {
color: #065f46;
background-color: #d1fae5;
border: 1px solid #a7f3d0;
}
.danger {
color: #991b1b;
background-color: #fee2e2;
border: 1px solid #fecaca;
}

/* --- Admin Tables & Datepicker Defaults --- */
.search-table {
box-sizing: border-box;
border-spacing: 0 !important;
border: none !important;
min-width: 100%;
border-bottom: 1px solid var(--certify-border);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.search-table thead tr th {
background-color: var(--certify-primary) !important;
color: #fff !important;
text-transform: uppercase;
text-align: center;
padding: 1rem 0.5rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.search-table tbody tr td {
border-right: 1px solid var(--certify-border);
padding: 1rem 0.75rem;
text-align: center;
background: var(--certify-bg);
}
.search-table tbody tr:nth-child(even) td {
background: var(--certify-surface);
}

.ui-datepicker {
background: var(--certify-bg) !important;
border: 1px solid var(--certify-border) !important;
border-radius: 8px !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
padding: 0 !important;
}
.ui-datepicker .ui-datepicker-header {
background: var(--certify-primary) !important;
color: #fff !important;
border: none !important;
border-radius: 8px 8px 0 0 !important;
padding: 1rem !important;
}
input[type="text"].hasDatepicker {
background-image: url('data:image/svg+xml;charset=US-ASCII,') !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 20px 20px !important;
padding-right: 48px !important;
border-radius: 6px !important;
}

/* --- Mobile Responsive Rules --- */
@media screen and (max-width: 768px) {
.cf-search {
width: 95%;
padding: 1.5rem;
}
.cf-result-card {
padding: 2rem;
width: 95%;
}
.cf-qr-container {
flex-direction: column;
gap: 1.5rem;
}
}

@media screen and (max-width: 480px) {
.cf-search form {
flex-direction: column;
}
.cf-field, .cf-btn {
width: 100%;
}
.cf-result-card {
padding: 1.5rem;
}
.cf-result-card .cf-row {
flex-direction: column;
align-items: flex-start;
padding: 1rem 0;
}
.cf-result-card .cf-label {
flex: auto;
margin-bottom: 6px;
}
.cf-result-card .cf-value {
padding-left: 0;
}
.cf-qr-section {
padding: 1.25rem;
}
}