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

   Everything here is either prefixed .qrg- or scoped under
   body.qrg-page, so nothing can leak into the other tool pages
   that share main.css. Colours, radii and shadows follow the
   existing Utiloot language: orange brand accent, slate text,
   white cards on the site's soft gradient background.
   ============================================================ */

/* The shared .pagebox puts the 300px ad rail beside the tool. That is
   fine on desktop, but this tool's workspace is itself two columns, so
   the rail is dropped early to give the preview room. Scoped to this
   page only. */
body.qrg-page .pagebox {
    align-items: flex-start;
}

/* main.css positions .backtohome absolutely, which takes it out of the flow
   and lands 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 that the other tools rely on. */
body.qrg-page .backtohome {
    position: relative;
    margin: 0 0 18px;
}

body.qrg-page .tool-area {
    padding-top: 12px;
    min-width: 0;          /* lets the flex child shrink instead of overflowing */
}

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

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

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

.qrg-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #64748b;
    max-width: 720px;
}

.qrg-noscript {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 14px;
}

/* ── Workspace ─────────────────────────────────────────── */
.qrg-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px;
    align-items: start;
}

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

.qrg-preview-panel {
    position: sticky;
    top: 92px;              /* clears the sticky navbar */
}

/* ── Blocks ────────────────────────────────────────────── */
.qrg-block {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.qrg-block:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

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

/* Collapsible sections — <details>/<summary> keeps this keyboard
   accessible for free. */
.qrg-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.qrg-details > summary::-webkit-details-marker {
    display: none;
}

.qrg-details > summary::before {
    content: '\f078';                       /* chevron-down */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    font-size: 10px;
    color: #cbd5e1;
    transition: transform 0.2s ease;
}

.qrg-details:not([open]) > summary::before {
    transform: rotate(-90deg);
}

.qrg-details > summary:hover::before {
    color: #ff7a1a;
}

.qrg-details > summary:focus-visible {
    outline: 2px solid #ff7a1a;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Fields ────────────────────────────────────────────── */
.qrg-field {
    margin-bottom: 14px;
}

.qrg-field:last-child {
    margin-bottom: 0;
}

/* Fields switched off by another control (the Location type's coordinates
   versus map-link inputs, the custom-icon upload row). Stated explicitly so
   nothing can override the [hidden] default. */
.qrg-field[hidden],
.qrg-grid-2[hidden] {
    display: none;
}

.qrg-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.qrg-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.qrg-output {
    font-size: 12.5px;
    font-weight: 700;
    color: #ff6600;
    font-variant-numeric: tabular-nums;
}

.qrg-input,
.qrg-select,
.qrg-textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14.5px;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qrg-textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}

.qrg-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
    padding-right: 34px;
    cursor: pointer;
}

.qrg-input:focus,
.qrg-select:focus,
.qrg-textarea:focus,
.qrg-file:focus,
.qrg-range:focus-visible,
.qrg-color:focus-visible {
    outline: none;
    border-color: #ff7a1a;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

.qrg-input[aria-invalid="true"],
.qrg-textarea[aria-invalid="true"] {
    border-color: #dc2626;
    background: #fef2f2;
}

.qrg-error {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #dc2626;
}

.qrg-hint {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #94a3b8;
}

.qrg-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.qrg-check input {
    width: 17px;
    height: 17px;
    accent-color: #ff6600;
    cursor: pointer;
}

.qrg-color {
    width: 100%;
    height: 50px;   /* was 42px — 3px padding + 1px border */
    padding: 3px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.qrg-range {
    width: 100%;
    accent-color: #ff6600;
    cursor: pointer;
}

.qrg-file {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: #475569;
    padding: 9px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    background: #f8fafc;
    cursor: pointer;
}

.qrg-file::file-selector-button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-right: 10px;
    padding: 7px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

.qrg-file::file-selector-button:hover {
    background: #fff7ed;
    border-color: #ff7a1a;
    color: #9a3412;
}

/* Uploaded-icon confirmation strip */
.qrg-upload-state {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.qrg-upload-thumb {
    width: 36px;   /* was 34px — 1px border */
    height: 36px;   /* was 34px — 1px border */
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.qrg-upload-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qrg-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #dc2626;
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.qrg-mini-btn:hover {
    background: #fee2e2;
}

/* ── Preview ───────────────────────────────────────────── */
.qrg-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 294px;   /* was 260px — 16px padding + 1px border */
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    /* Chequerboard so a transparent background is visible as transparent
       rather than looking white. */
    background-color: #f8fafc;
    background-image:
        linear-gradient(45deg, #e9eef5 25%, transparent 25%, transparent 75%, #e9eef5 75%),
        linear-gradient(45deg, #e9eef5 25%, transparent 25%, transparent 75%, #e9eef5 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}

.qrg-canvas {
    display: none;
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 6px;
}

.qrg-canvas.is-visible {
    display: block;
}

.qrg-empty {
    font-size: 14px;
    color: #94a3b8;
    text-align: center;
    padding: 0 14px;
}

.qrg-meta {
    margin-top: 12px;
    font-size: 12.5px;
    color: #64748b;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.qrg-warnings:not(:empty) {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qrg-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.5;
    border-radius: 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.qrg-warning i {
    margin-top: 2px;
}

/* Neutral variant: explains what the tool did with the input rather than
   warning about it (e.g. the coordinates read out of a map link). */
.qrg-note {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* ── Actions ───────────────────────────────────────────── */
.qrg-download {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

/* main.css ships .utl-download-btn as display:none (the other tools
   reveal it after processing). Here the button is always present and
   simply disabled until a code exists. */
.qrg-download-btn {
    display: inline-flex !important;
    width: 100%;
    margin-top: 4px;
}

.qrg-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

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

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

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

.qrg-btn-reset:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

/* Shared, visible focus ring for every interactive control. */
.qrg-btn:focus-visible,
.qrg-mini-btn:focus-visible,
.qrg-download-btn:focus-visible {
    outline: 2px solid #ff7a1a;
    outline-offset: 2px;
}

.qrg-status {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    min-height: 19px;
}

.qrg-status.is-error {
    color: #dc2626;
    font-weight: 600;
}

.qrg-status.is-ok {
    color: #15803d;
    font-weight: 600;
}

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

@media (max-width: 900px) {
    /* The preview stays in a column beside the controls rather than
       dropping below them. The form is long on a phone, and a preview
       parked underneath it means scrolling away from whatever you just
       changed in order to see what it did.

       The download controls do not come with it. A select and a button
       reading "Download QR Code" are unusable in a 150px column — the
       label spills straight out of the button — so the panel's children
       are released into the grid and only the code itself stays on the
       right. */
    .qrg-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(140px, 38%);
        gap: 14px;
    }

    .qrg-preview-panel {
        display: contents;
    }

    .qrg-config {
        grid-column: 1;
        grid-row: 1;
    }

    /* Now the card, in the panel's place. Sticky within the row, so it
       follows as the form scrolls past it. */
    .qrg-preview-body {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 14px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
    }

    /* The chequerboard is sized for the desktop column; here it takes
       whatever the column gives it. */
    .qrg-canvas-wrap {
        min-height: 0;
        padding: 8px;
    }

    .qrg-canvas {
        max-width: 100%;
        height: auto;
    }

    .qrg-download,
    .qrg-status {
        grid-column: 1 / -1;
    }

    .qrg-download {
        grid-row: 2;
        margin-top: 0;
        padding: 16px;
        border-top: 0;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
    }

    .qrg-status {
        grid-row: 3;
        margin-top: 0;
    }

    body.qrg-page .pagebox {
        padding: 20px 24px;
    }
}

@media (max-width: 560px) {
    body.qrg-page .pagebox {
        padding: 16px 14px;
    }

    .qrg-title {
        font-size: 27px;
    }

    .qrg-panel {
        padding: 16px;
    }

    .qrg-grid-2 {
        grid-template-columns: 1fr;
    }

    .qrg-btn-row {
        flex-direction: column;
    }

    .ad-horizontal,
    .ad-728 {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------ */
@media (max-width: 900px) {

    .qrg-input,
    .qrg-select,
    .qrg-textarea,
    .qrg-file {
        font-size: 16px;
    }

    .qrg-input,
    .qrg-select {
        min-height: 44px;
    }

    /* A native range is about 16px tall, which is a hard thing to grab
       with a thumb. The extra height is hit area only — the track and
       the knob keep their own size and stay vertically centred in it. */
    .qrg-range {
        height: 44px;
    }
}