/* Search box */
.srp-search-wrap{max-width:520px;margin:20px auto}
.srp-search-form{display:flex;gap:10px}
/* The colour declarations carry !important because themes routinely style bare
   input elements, and -webkit-text-fill-color is set alongside colour because
   that is the property Chrome and Safari actually paint the glyphs with once a
   field has been autofilled. Without it the typed text renders invisible. */
.srp-search-input{
    flex:1;padding:14px 16px;border:1px solid #d9d9d9;border-radius:8px;font-size:15px;
    color:#1a1a2e !important;
    -webkit-text-fill-color:#1a1a2e;
    background-color:#fff;
    -webkit-appearance:none;appearance:none;
}
.srp-search-input::placeholder{color:#9a9aa8;opacity:1}
.srp-search-input::-webkit-input-placeholder{color:#9a9aa8;opacity:1}
.srp-search-input::-moz-placeholder{color:#9a9aa8;opacity:1}
.srp-search-input:focus{outline:none;border-color:#e0a911;box-shadow:0 0 0 3px rgba(224,169,17,.15)}
/* Chrome paints its own background and text colour over an autofilled field */
.srp-search-input:-webkit-autofill,
.srp-search-input:-webkit-autofill:hover,
.srp-search-input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color:#1a1a2e !important;
    transition:background-color 9999s ease-in-out 0s;
}
.srp-search-btn{padding:14px 26px;background:#e0a911;color:#1a1a2e;border:none;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;transition:.2s}
.srp-search-btn:hover{background:#c9970d}

/* Photo + QR helpers (work alongside your Elementor design) */
.srp-photo{max-width:100%;height:auto;border-radius:8px}
.srp-qr{width:150px;height:150px;object-fit:contain}

/* Not found message (fallback template) */
.srp-notfound{max-width:520px;margin:40px auto;padding:24px;text-align:center;background:#fff3f3;border:1px solid #f5c2c2;border-radius:10px;color:#a12626}

@media(max-width:520px){
    .srp-search-form{flex-direction:column}
}

/* ---------- Elementor widget baseline (do the real styling in Elementor) ---------- */
.srp-field{display:block}
/* The inner block is inline-flex so the Alignment control can keep using plain
   text-align on the parent while flex-direction decides where the icon sits. */
.srp-field-inner{display:inline-flex;align-items:center;flex-direction:column;gap:10px}
.srp-field-text{min-width:0}
.srp-field-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
.srp-field-icon svg{width:24px;height:24px;display:block}
.srp-field-icon i{font-size:24px;font-style:normal;line-height:1}
.srp-field-label{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:#8a8a99}
.srp-field-value{font-weight:600;color:#1a1a2e}

.srp-photo-wrap img{display:inline-block}
.srp-qr-wrap img{display:inline-block}

/* Result Card */
.srp-card{max-width:640px;margin:0 auto}
.srp-card-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.srp-card-photo{width:110px;height:135px;object-fit:cover;border-radius:8px;flex:0 0 auto;display:block}
.srp-card-title{margin:0 0 4px;font-size:22px}
.srp-card-reg{color:#8a8a99;font-size:14px}
.srp-card-rows{margin-top:6px}
.srp-card-row{display:flex;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:1px solid #f0f0f2}
.srp-card-row:last-child{border-bottom:none}
.srp-card-row .lbl{color:#8a8a99;font-size:13px}
.srp-card-row .val{font-weight:600;color:#1a1a2e;text-align:right}
.srp-card-qr{text-align:center;margin-top:20px}
.srp-card-qr img{width:130px;height:130px}

/* The header direction is a responsive Elementor control now, so it is not
   forced here: doing so would override whatever is chosen for mobile. */
@media(max-width:480px){
    .srp-card-row{flex-direction:column;gap:2px}
    .srp-card-row .val{text-align:left}
}

/* JS-QR container (browser-side generate) */
.srp-qr-js{display:inline-block;line-height:0}
.srp-qr-js img,.srp-qr-js canvas{display:block}
.srp-qr-js table{border-collapse:collapse}
.srp-card-qr .srp-qr-js{margin:0 auto}

/* ---------- Action buttons (Print / Download / Back) ----------
 * The display and flex properties carry !important on purpose: many themes
 * style bare <button> elements with a higher-specificity rule, and if that
 * rule wins the button stops being a flex container. When that happens the
 * Icon Position and Gap controls silently do nothing, because flex-direction
 * and gap only apply to a flex container.
 */
.srp-print-buttons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.srp-print-buttons .srp-btn,
button.srp-btn,
a.srp-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center;
    flex-direction:row;      /* Elementor's Icon Position control overrides this */
    gap:8px;
    padding:12px 22px;
    border:none;
    border-radius:6px;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    text-decoration:none;
    width:auto;
    transition:background .2s,color .2s,box-shadow .2s;
}
.srp-print-buttons .srp-btn-icon{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    line-height:0;
    flex:0 0 auto;
    margin:0;
}
.srp-print-buttons .srp-btn-icon svg{width:18px;height:18px;display:block;fill:currentColor}
.srp-print-buttons .srp-btn-icon i{font-size:18px;font-style:normal;line-height:1}
.srp-print-buttons .srp-btn-text{display:inline-block;line-height:inherit}
.srp-print-buttons .srp-btn:hover{opacity:.92}

/* License notice */
.srp-license-blocked{padding:14px 18px;background:#fff6e5;border:1px solid #f0d9a8;border-radius:8px;color:#7a5a00;font-size:14px}

/* ---------- Result notice (empty / not found states) ----------
 * Baseline only: the Elementor widget controls override all of this.
 */
.srp-notice{
    max-width:560px;margin:0 auto;padding:44px 28px;text-align:center;
    background:#f7f7fb;border-radius:12px;
}
.srp-notice-icon{line-height:0;margin-bottom:14px}
.srp-notice-icon svg{width:44px;height:44px;fill:#b4b4c4;display:inline-block}
.srp-notice-icon i{font-size:44px;color:#b4b4c4;font-style:normal}
.srp-notice-title{font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:8px}
.srp-notice-text{font-size:15px;color:#7a7a8c;line-height:1.7}
.srp-notice-searched{margin-top:10px;font-size:14px;color:#7a7a8c}
.srp-notice-searched code{background:#fff;padding:2px 8px;border-radius:4px;color:#1a1a2e}
.srp-notice-search{margin-top:22px}
.srp-notice-search .srp-search-wrap{margin:0 auto;max-width:420px}
.srp-notice--notfound .srp-notice-icon svg{fill:#d98a8a}
.srp-notice-editor-hint{
    margin-top:18px;font-size:12px;color:#9a9aa8;font-style:italic;
    border-top:1px dashed #dcdce4;padding-top:12px;
}

/* Nothing to print on an empty result page */
@media print{ .srp-notice{display:none !important} }

/* Button while the transcript PDF is being built in the background */
.srp-btn--busy{cursor:progress;opacity:.75}
.srp-btn--busy .srp-btn-icon{animation:srp-pulse 1s ease-in-out infinite}
@keyframes srp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){
    .srp-btn--busy .srp-btn-icon{animation:none}
}