/* ============================================================
   style/qr-code-decoder.css
   Page-scoped styles for frontend/qr-code-decoder.html.

   Everything here is either prefixed .qrd- or scoped under
   body.qrd-page, so nothing can leak into the other tool pages
   that share main.css. Colours, radii, shadows and button shapes
   follow the QR Code Generator exactly, so the two read as one
   pair of tools rather than two visual dialects.
   ============================================================ */

body.qrd-page .pagebox {
    align-items: flex-start;
}

/* main.css positions .backtohome absolutely, which would land it on top
   of this page's heading. Putting it back into the flow — on this page
   only — keeps the two clear of each other without touching the shared
   rule the other tools rely on. */
body.qrd-page .backtohome {
    position: relative;
    margin: 0 0 18px;
}

body.qrd-page .tool-area {
    padding-top: 12px;
    min-width: 0;
}

/* ── Page header ───────────────────────────────────────── */
.qrd-header {
    margin-bottom: 26px;
}

.qrd-title {
    font-size: 34px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 12px;
}

.qrd-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff7a1a, #ff6600);
}

.qrd-sub {
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    max-width: 70ch;
}

/* ── Layout ────────────────────────────────────────────── */
.qrd-workspace {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.qrd-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

.qrd-panel-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 12px;
}

.qrd-columns {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ── The drop zone ─────────────────────────────────────── */
.qrd-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.qrd-drop:hover,
.qrd-drop.is-over {
    border-color: #ff7a1a;
    background: #fff7ed;
}

/* The input is the label's own control, so clicking anywhere in the
   zone opens the picker. Hidden visually but still focusable, which is
   what keeps the zone reachable from the keyboard. */
.qrd-file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.qrd-drop > i {
    font-size: 34px;
    color: #ff7a1a;
}

.qrd-drop-main {
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}

.qrd-drop-sub {
    font-size: 12.5px;
    color: #64748b;
}

.qrd-file:focus-visible + i,
.qrd-drop:focus-within {
    outline: 2px solid #ff7a1a;
    outline-offset: 3px;
}

.qrd-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #475569;
}

.qrd-privacy i {
    color: #15803d;
    margin-top: 2px;
}

.qrd-error {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
}

/* ── Preview ───────────────────────────────────────────── */
.qrd-preview-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    min-height: 200px;
}

/* Keeps the code readable: never wider than its column, never
   stretched, and never so tall it pushes the result off screen. */
.qrd-preview {
    display: block;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    border-radius: 6px;
}

.qrd-filename {
    margin-top: 10px;
    font-size: 12.5px;
    color: #64748b;
    overflow-wrap: anywhere;
}

.qrd-preview-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ── Status while decoding ─────────────────────────────── */
.qrd-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
    font-size: 14px;
    font-weight: 600;
}

.qrd-spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid #bae6fd;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: qrd-spin 0.7s linear infinite;
}

@keyframes qrd-spin {
    to { transform: rotate(360deg); }
}

/* Someone who has asked for less motion gets a static ring rather than
   a spinning one; the text beside it already says what is happening. */
@media (prefers-reduced-motion: reduce) {
    .qrd-spinner { animation: none; }
}

/* ── The result ────────────────────────────────────────── */
.qrd-found-label,
.qrd-none-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.qrd-found-label { color: #15803d; }
.qrd-none-label  { color: #b91c1c; text-transform: none; letter-spacing: 0; font-size: 15px; }

.qrd-fields {
    margin: 0;
}

.qrd-fields dt {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
}

.qrd-fields dd {
    margin: 0 0 14px;
    font-size: 15px;
    color: #1e293b;
}

/* Decoded text is shown exactly as it came out of the code: line breaks
   preserved for a vCard, long links wrapped rather than clipped, and a
   monospace face so an O and a 0 cannot be confused. */
.qrd-content {
    margin: 0;
    padding: 12px 14px;
    border-radius: 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 13.5px;
    line-height: 1.6;
    color: #0f172a;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 260px;
    overflow-y: auto;
}

/* A parsed breakdown — the fields inside a Wi-Fi or contact code. */
.qrd-detail {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 13px;
    line-height: 1.6;
    color: #78350f;
}

.qrd-detail-row {
    display: flex;
    gap: 8px;
}

.qrd-detail-row + .qrd-detail-row {
    margin-top: 4px;
}

.qrd-detail-key {
    flex: 0 0 92px;
    font-weight: 700;
}

.qrd-detail-val {
    min-width: 0;
    overflow-wrap: anywhere;
}

.qrd-tips {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #475569;
}

/* ── Buttons ───────────────────────────────────────────── */
.qrd-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.qrd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qrd-btn:hover:not(:disabled) {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
}

.qrd-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.qrd-btn-primary {
    color: #fff;
    background: #ff7a1a;
    border-color: #ff7a1a;
}

.qrd-btn-primary:hover:not(:disabled) {
    background: #ea6a0c;
    border-color: #ea6a0c;
    color: #fff;
}

.qrd-btn-open {
    color: #fff;
    background: #0369a1;
    border-color: #0369a1;
}

.qrd-btn-open:hover {
    background: #075985;
    border-color: #075985;
    color: #fff;
}

.qrd-btn:focus-visible {
    outline: 2px solid #ff7a1a;
    outline-offset: 2px;
}

/* ── About ─────────────────────────────────────────────── */
.qrd-about p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 12px;
}

.qrd-about p:last-child { margin-bottom: 0; }

.qrd-about a {
    color: #0369a1;
    font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1200px) {
    body.qrd-page .sidebar-ads {
        display: none;
    }
}

@media (max-width: 860px) {
    /* One column: the preview above the result, so neither is squeezed
       into a strip too narrow to read. */
    .qrd-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .qrd-title { font-size: 27px; }
    .qrd-sub { font-size: 15px; }
    .qrd-panel { padding: 18px; }
}

@media (max-width: 520px) {
    .qrd-drop { padding: 30px 14px; }
    .qrd-drop > i { font-size: 28px; }

    /* Full-width, comfortably tappable controls on a phone. */
    .qrd-actions .qrd-btn,
    .qrd-preview-actions .qrd-btn {
        flex: 1 1 100%;
        min-height: 44px;
    }

    .qrd-detail-row { flex-direction: column; gap: 2px; }
    .qrd-detail-key { flex: none; }
}