/* ===================================================================
   Legacy tool shell

   The older tool pages (percentage, GST, BMI, downloaders, device tests,
   text tools...) are built on WebsiteTemplate/assets/css/style.css:
   a .card1 panel painted #d3d3d4 with !important, grey .col-back /
   .col-back-per inner panels, #e9e9ea inputs with a 2px cyan border,
   and a teal .btn-gene. This file gives those exact classes the current
   A2Z look - white card, warm hairlines, the page's A-Z accent, compact
   spacing - without rewriting ~60 pages of working markup.

   SCOPE. Every selector starts at main and names a legacy class, so the
   homepage, the new ts-* tool pages, admin, portal and blog are untouched.
   !important is used only where style.css itself uses it and a rule
   could not otherwise win.

   --tool-accent is set on <body> by _Layout from AzColorPalette (the
   page title's first letter). The accent never carries text on white.
   =================================================================== */

main {
    --lt-accent: var(--tool-accent, var(--az-a-1, #5b8def));
    --lt-ink: var(--az-ink, #10162b);
    --lt-ink-2: var(--az-ink-2, #454d63);
    --lt-ink-3: var(--az-ink-3, #5f677d);
    --lt-line: var(--az-line, #e8e6e3);
    --lt-line-2: var(--az-line-2, #f0eeeb);
    --lt-tint: color-mix(in srgb, var(--lt-accent) 7%, #fff);
    --lt-ring: color-mix(in srgb, var(--lt-accent) 24%, transparent);
}

/* ---- The heading the legacy pages put above the card ---- */
main .text-center > h1.display-5,
main .container > .text-center h1.display-5,
main h1.display-5 {
    margin: 20px auto 14px;
    max-width: 900px;
    font-size: clamp(1.45rem, 3.2vw, 2rem);
    line-height: 1.22;
    font-weight: 800;
    color: var(--lt-ink);
    letter-spacing: -.01em;
}

/* ---- The card itself: grey block -> white card with an accent rule ---- */
main .card1 {
    position: relative;
    background-color: var(--az-surface, #fff) !important;
    border: 1px solid var(--lt-line) !important;
    border-top: 3px solid var(--lt-accent) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 32px -20px rgba(16, 22, 43, .3) !important;
    transition: none !important;
    padding: 18px !important;
    margin: 6px auto 18px !important;
    color: var(--lt-ink-2);
}

@media only screen and (max-width: 667px) {
    main .card1 {
        background-color: var(--az-surface, #fff) !important;
        border: 1px solid var(--lt-line) !important;
        border-top: 3px solid var(--lt-accent) !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

/* Inner grey panels -> a faint tint of the accent. */
main .card1 .col-back,
main .card1 .col-back-per {
    background: var(--lt-tint);
    border: 1px solid var(--lt-line-2);
    border-radius: 14px;
    padding: 18px;
}

main .card1 .col-back-per { padding: 18px 20px; }
main .card1 .col-back-per + .col-back-per,
main .card1 .col-md-12 + .col-md-12 > .col-back-per { margin-top: 12px; }

main .card1 h4,
main .card1 h5 {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--lt-ink);
    margin-bottom: 12px;
}

main .card1 .fw900 {
    font-weight: 700;
    font-size: .95rem;
    padding-bottom: 10px;
    color: var(--lt-ink);
}

main .card1 label,
main .card1 .control-label {
    font-weight: 700;
    font-size: .88rem;
    color: var(--lt-ink);
    margin-bottom: 5px;
}

/* ---- Inputs ---- */
main .card1 .form-control,
main .card1 .bb,
main .card1 select,
main .card1 textarea {
    min-height: 44px;
    border: 1.5px solid var(--lt-line);
    border-radius: 10px;
    background: var(--az-surface, #fff);
    color: var(--lt-ink);
    font-size: 1rem;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

main .card1 textarea { min-height: 120px; }

/* !important: style.css and the page stylesheets strip the focus ring
   (box-shadow: none) - keyboard users must be able to see where they are. */
main .card1 .form-control:focus,
main .card1 .bb:focus,
main .card1 .link-inp:focus,
main .card1 select:focus,
main .card1 textarea:focus {
    border-color: var(--lt-accent) !important;
    box-shadow: 0 0 0 4px var(--lt-ring) !important;
    outline: none;
}

/* Several pages centre the card with an empty col-md-2 spacer beside a
   col-md-8 card, which leaves it visibly off-centre. */
main .row > .col-md-2:empty { display: none; }
main .row > .col-md-8.card1 { margin-left: auto !important; margin-right: auto !important; }

main .card1 .link-inp { height: 48px; border-radius: 12px 0 0 12px; border-width: 1.5px; border-color: var(--lt-line); }
main .card1 .link-inp:focus { border-color: var(--lt-accent); }

@media screen and (max-width: 767px) {
    main .card1 .link-inp { border-radius: 12px !important; }
}

/* ---- Buttons: one clear primary action ---- */
main .card1 .btn-gene,
main .card1 .btn-primary,
main .card1 .btn-info,
main .card1 .btn-success {
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid var(--lt-ink) !important;
    border-radius: 11px;
    background: var(--lt-ink) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 8px 18px -10px rgba(16, 22, 43, .55);
    transition: transform .15s, box-shadow .15s;
}

main .card1 .btn-gene:hover,
main .card1 .btn-primary:hover,
main .card1 .btn-info:hover,
main .card1 .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(16, 22, 43, .6);
}

main .card1 .btn-gene:focus-visible,
main .card1 .btn:focus-visible {
    outline: 3px solid var(--lt-accent);
    outline-offset: 2px;
}

main .card1 .btn-secondary,
main .card1 .btn-outline-info,
main .card1 .btn-light {
    min-height: 42px;
    border-radius: 11px;
    border: 1px solid var(--lt-line) !important;
    background: var(--az-surface, #fff) !important;
    color: var(--lt-ink-2) !important;
    font-weight: 700;
}

/* ---- Results, tables, helper lists ---- */
main .card1 table { font-variant-numeric: tabular-nums; }
main .card1 .table > :not(caption) > * > * { padding: .55rem .7rem; }
main .card1 thead th { background: var(--lt-line-2); color: var(--lt-ink-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 0; }

main .card1 #resultdata,
main .card1 .result,
main .card1 [id^="result"] {
    color: var(--lt-ink);
}

main .card1 #a2zotherlsit,
main .card1 #a2zcontent {
    border-radius: 12px;
}

main .card1 .formula-img img { max-width: 100%; height: auto; }

/* The site stylesheet draws hr at 0px height; legacy cards used negative margins with it. */
main .card1 hr { margin: 8px 0 12px !important; opacity: .15; }

/* ---- Inline validation/error line (A2zCalc.message) ---- */
main .a2z-calc-msg {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fdeeee;
    border: 1px solid rgba(198, 47, 47, .25);
    color: var(--az-error, #c62f2f);
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
}
main .a2z-calc-msg[hidden] { display: none; }
main .card1 [aria-invalid="true"],
main .card1 .is-invalid { border-color: var(--az-error, #c62f2f) !important; }

/* ---- Ad slot card that sits below the tool on these pages ---- */
main .card.adcard {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---- Fixed-width widgets that pushed the page sideways on tablet/phone ----
   #map carries an inline width:500px (IP and address tools), the barcode
   canvas is drawn at a fixed pixel width, and the visually hidden
   input.file (site.css: visibility hidden + absolute) kept its full width
   past the right edge. */
main #map.map-sty { max-width: 100%; }
main #canvasTarget { max-width: 100%; height: auto; }
main input.file[type="file"] { width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    main .card1 .btn-gene,
    main .card1 .btn-primary,
    main .card1 .btn-info,
    main .card1 .btn-success { transition: none; }
}