/* ---------------------------------------------------------------------------
   /translations/edit — the landing an ad visitor meets first
   (resources/views/uploadlayout.blade.php, a standalone document).

   The page is the upload dialog over a picture of the dashboard. The picture is
   the new dashboard now (public/images/landing/dashboard-*.webp, light and dark,
   desk and phone, blurred and dimmed by the scrim), and the dialog is drawn in
   this design: panel, line, 20 px corners, the wizard's drop zone, the solid
   button. The old sheets (app.css, media.css, theme.min.css) stay linked for the
   markup they still style, so every rule here is scoped under
   body.dt-landing-page and carries enough weight to win over them.

   Nothing here changes what the page does: the ids, classes and texts the page
   script, GTM and ConveyThis rely on are the same, the file input still lies
   over the whole zone (that is the drop target), and the A/B mechanics are the
   server's and the inline script's.
   --------------------------------------------------------------------------- */

body.dt-landing-page {
    margin: 0;
    font-family: var(--dt-font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--dt-ink-body);
    background: var(--dt-paper);
    -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------- background */
.dt-landing-page .backgroundDoc.dt-landing-bg {
    background: var(--dt-paper) url("/images/landing/dashboard-light.webp") center top / cover no-repeat;
}
body.dark-only.dt-landing-page .backgroundDoc.dt-landing-bg {
    background-image: url("/images/landing/dashboard-dark.webp");
}
.dt-landing-page .modalOverlay.dt-landing-scrim {
    background: var(--dt-scrim);
    align-items: flex-start;
    padding: 32px 16px;
}

/* --------------------------------------------------------------- dialog */
.dt-landing-page .wrapper.dt-landing-wrap {
    flex: none;
    width: 100%;
    max-width: 620px;
    margin: auto;
    text-align: left;
}
.dt-landing-page .container.dt-landing-card {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 28px 36px 26px;
    border-radius: var(--dt-r-xl);
    border: 1px solid var(--dt-line);
    background: var(--dt-panel);
    box-shadow: var(--dt-shadow-lg);
    color: var(--dt-ink-body);
    letter-spacing: 0;
    animation: dt-landing-in 320ms var(--dt-ease-enter) both;
}
@keyframes dt-landing-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

.dt-landing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.dt-landing-logo { display: block; height: 32px; width: auto; }
body.dark-only .dt-landing-logo { filter: brightness(0) invert(1); opacity: 0.92; }

.dt-landing-page .upload-header {
    position: static;
    display: flex;
    margin: 0;
    padding: 0;
}
.dt-landing-page a.dt-landing-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--dt-line);
    background: var(--dt-panel);
    color: var(--dt-ink-muted);
    transition: color var(--dt-dur-enter) var(--dt-ease-enter), border-color var(--dt-dur-enter) var(--dt-ease-enter);
}
.dt-landing-page a.dt-landing-close:hover { color: var(--dt-ink); border-color: var(--dt-primary); }

.dt-landing-page h1.dt-landing-title {
    margin: 0 0 18px;
    font-family: var(--dt-font-heading);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--dt-ink);
    text-align: left;
}
/* the page script empties the title once a file is chosen */
.dt-landing-page h1.dt-landing-title:empty { display: none; }

/* ----------------------------------------------------------- drop zone */
.dt-landing-page .upload-container {
    position: relative;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
}
.dt-landing-page .upload-container .border-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 38px 24px 34px;
    border: 2px dashed rgba(2, 132, 199, 0.32);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--dt-zone-tint), var(--dt-panel));
    color: var(--dt-ink-body);
    text-align: center;
    transition: border-color var(--dt-dur-enter) var(--dt-ease-enter),
                background-color var(--dt-dur-enter) var(--dt-ease-enter),
                transform var(--dt-dur-move) var(--dt-ease-enter);
}
body.dark-only.dt-landing-page .upload-container .border-container { border-color: rgba(56, 189, 248, 0.34); }
.dt-landing-page .upload-container:hover .border-container,
.dt-landing-page .upload-container.image-dropping-upload .border-container,
.dt-landing-page .border-container.image-dropping-border {
    border-style: solid;
    border-color: var(--dt-primary);
    background: var(--dt-primary-soft);
}
.dt-landing-page .upload-container.image-dropping-upload .border-container { transform: scale(1.01); }
.dt-landing-page .upload-container:hover,
.dt-landing-page .upload-container.image-dropping-upload { background: transparent; }

.dt-landing-page .icons.dt-landing-zone-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--dt-solid);
    color: var(--dt-on-solid);
    box-shadow: 0 10px 22px rgba(2, 132, 199, 0.26);
    font-size: inherit;
    margin: 0;
    opacity: 1;
}
.dt-landing-zone-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dt-ink-body);
}
.dt-landing-page a#file-browser {
    color: var(--dt-secondary);
    font-weight: 700;
    text-decoration: none;
    border: 0;
}
.dt-landing-page .upload-container:hover a#file-browser { text-decoration: underline; text-underline-offset: 3px; }
/* The input lies over the whole zone, "browse" included (app.css), and must stay
   on top: it is the drop target, and a file dropped on anything above it would be
   opened by the browser instead. A click anywhere in the zone opens the picker. */
.dt-landing-page .file-upload-input { z-index: 1; cursor: pointer; }

/* ------------------------------------------------------- chosen file */
.dt-landing-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 12px 0 4px;
}
.dt-landing-ready-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dt-good-soft);
    color: var(--dt-good);
    animation: dt-landing-pop 360ms var(--dt-ease-enter) both;
}
@keyframes dt-landing-pop { from { opacity: 0; transform: scale(0.8); } }
.dt-landing-file {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--dt-font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--dt-ink);
}
.dt-landing-file:empty { display: none; }

/* ------------------------------------------------------------ progress */
.dt-landing-page #new_progress_block.row {
    margin: 20px 0 0;
    color: var(--dt-ink-muted);
}
.dt-landing-page #new_progress_block .col-md-12 { padding: 0; }
.dt-landing-page #new_progress_wrapper {
    width: 100%;
    height: 8px;
    border-radius: var(--dt-r-pill);
    background: var(--dt-tint);
    overflow: hidden;
}
.dt-landing-page #new_progress {
    width: 1%;
    height: 100%;
    border-radius: var(--dt-r-pill);
    background: linear-gradient(90deg, var(--dt-primary), var(--dt-secondary));
    transition: width 100ms linear;
}

/* -------------------------------------------------------------- button */
.dt-landing-page .upload-btn-block.row { margin: 18px 0 0; }
.dt-landing-page .upload-btn-block .col-md-12 { padding: 0; }
.dt-landing-page .upload-btn-block .btn.btn-success {
    width: 100%;
    min-height: 52px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--dt-solid);
    color: var(--dt-on-solid);
    font-family: var(--dt-font-heading);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 22px rgba(3, 105, 161, 0.22);
    transition: filter var(--dt-dur-enter) var(--dt-ease-enter), transform var(--dt-dur-press) var(--dt-ease-enter);
}
.dt-landing-page .upload-btn-block .btn.btn-success:hover { filter: brightness(1.07); color: var(--dt-on-solid); }
.dt-landing-page .upload-btn-block .btn.btn-success:active { transform: scale(0.99); }
.dt-landing-page .upload-btn-block .btn.btn-success:focus { box-shadow: 0 10px 22px rgba(3, 105, 161, 0.22); }

.dt-landing-page a:focus-visible,
.dt-landing-page button:focus-visible {
    outline: var(--dt-ring-width) solid var(--dt-ring);
    outline-offset: var(--dt-ring-offset);
}

/* --------------------------------------------------------------- terms */
.dt-landing-page .dt-landing-terms-row.row { margin: 0; justify-content: center; }
.dt-landing-page p.dt-landing-terms {
    margin: 18px 0 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--dt-ink-muted);
    text-align: center;
}
.dt-landing-page p.dt-landing-terms a {
    color: var(--dt-secondary);
    font-weight: 600;
    text-decoration: none;
}
.dt-landing-page p.dt-landing-terms a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------- phone */
@media (max-width: 580px) {
    .dt-landing-page .backgroundDoc.dt-landing-bg { background-image: url("/images/landing/dashboard-light-mobile.webp"); }
    body.dark-only.dt-landing-page .backgroundDoc.dt-landing-bg { background-image: url("/images/landing/dashboard-dark-mobile.webp"); }
    /* the ConveyThis switcher is fixed at the top right; the dialog starts below it */
    .dt-landing-page .modalOverlay.dt-landing-scrim { padding: 64px 12px 24px; }
    .dt-landing-page .container.dt-landing-card { padding: 20px 18px 20px; border-radius: 18px; }
    .dt-landing-head { margin-bottom: 18px; }
    .dt-landing-logo { height: 28px; }
    .dt-landing-page h1.dt-landing-title { font-size: 23px; margin-bottom: 14px; }
    .dt-landing-page .upload-container .border-container { padding: 28px 16px 26px; }
    .dt-landing-zone-text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .dt-landing-page .container.dt-landing-card,
    .dt-landing-ready-icon { animation: none; }
    .dt-landing-page #new_progress { transition: none; }
}