/* FileGooi: the old look, a notch more polished. Colours come from the logo.
   Pro branding overrides --bg, --text and --link (see base.html). */
:root {
	--bg: #EEF3F6;
	--text: #1F2A33;
	--link: #0080C0;
	--brand: #0090D0;          /* logo blue */
	--brand-dark: #0070A8;
	--brand-light: #50B0E0;
	--brand-pale: #E3F4FA;     /* logo aqua, softened */
	--box: #FFFFFF;
	--border: #D5E0E7;
	--muted: #6B7A86;
	--accent: var(--brand-pale);
	--danger: #C62828;
	--ok: #2E7D32;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(16, 42, 67, .06), 0 8px 24px rgba(16, 42, 67, .08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	padding: 0 16px;
	min-height: 100vh;
	background: radial-gradient(1200px 500px at 50% -120px, var(--brand-pale), transparent 70%), var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }
h2 { font-size: 1.35rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
sup { color: var(--muted); font-size: .8em; }

/* --- header and footer ----------------------------------------------- */
header, footer { text-align: center; }
header { padding: 28px 0 10px; }
.logo { max-width: 100%; height: auto; }
.tagline { margin: 6px 0 14px; font-size: 1.05rem; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-bottom: 18px; font-size: .95rem; }
nav a, nav button.link, nav b {
	padding: 5px 12px; border-radius: 999px; text-decoration: none;
}
nav a:hover, nav button.link:hover { background: var(--box); box-shadow: var(--shadow); }
nav > :not(form) { white-space: nowrap; }
footer { font-size: .8rem; color: var(--muted); padding: 28px 0 32px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--link); }

/* --- layout and cards -------------------------------------------------- */
main { max-width: 680px; margin: 0 auto; }
main:has(.wide) { max-width: 1160px; }
.box {
	background: var(--box);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 28px;
	margin: 0 0 20px;
	text-align: center;
}
@media (max-width: 640px) { .box { padding: 20px 16px; } }
.box.text { text-align: left; }
.box.text h2 { text-align: center; }
.box.text ul, .box.text ol { padding-left: 22px; }
.box.text li { margin-bottom: 6px; }
.problem { border-color: #F2C4C4; background: #FFF6F6; color: var(--danger); }
.saved { color: var(--ok); font-weight: 600; }

/* --- forms and buttons -------------------------------------------------- */
input, button, select, textarea { font: inherit; max-width: 100%; }
input:not([type=checkbox]):not([type=color]):not([type=file]), textarea, select {
	border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #FBFDFE; color: var(--text);
	transition: border-color .15s, box-shadow .15s;
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
	outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 144, 208, .22);
}
button, a.button, label.button {
	display: inline-block; padding: 10px 22px; border: 0; border-radius: 10px; cursor: pointer;
	background: linear-gradient(180deg, var(--brand-light) -60%, var(--brand) 70%); color: #fff;
	font-weight: 600; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 112, 168, .25);
	transition: transform .12s, box-shadow .12s, filter .12s;
}
button:hover, a.button:hover, label.button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 112, 168, .28); filter: brightness(1.04); color: #fff; }
button:active, a.button:active { transform: translateY(0); }
button.link {
	background: none; border: none; box-shadow: none; padding: 0; color: var(--link); font-weight: inherit;
	text-decoration: underline; cursor: pointer;
}
button.link:hover { transform: none; filter: none; box-shadow: none; color: var(--brand-dark); }
#cancel { background: #EEF2F5; color: var(--text); box-shadow: none; }
form.inline { display: inline; }
form.stacked { max-width: 380px; margin: 0 auto; text-align: left; }
form.stacked label { display: block; margin: 0 0 14px; font-weight: 500; }
form.stacked input:not([type=checkbox]), form.stacked textarea { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
form.stacked label.check { display: flex; gap: 8px; align-items: baseline; font-weight: 400; }
form.stacked button { width: 100%; margin-top: 4px; }
form.bay label { display: block; max-width: 380px; margin: 0 auto 14px; text-align: left; font-weight: 500; }
form.bay label input { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
.colours { display: flex; gap: 16px; flex-wrap: wrap; }
.colours input[type=color] { width: 64px !important; height: 36px; padding: 2px !important; border: 1px solid var(--border); border-radius: 8px; background: none; }
/* Honeypot: off-screen for people, still there for bots. */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- the upload drop zone ---------------------------------------------- */
.dropzone {
	position: relative; display: block; margin: 4px auto 18px; padding: 36px 20px;
	border: 2px dashed #B9D7E6; border-radius: var(--radius); background: #F7FBFD;
	cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-pale); }
.dropzone.over { transform: scale(1.01); }
.dropzone .icon { display: block; width: 46px; height: 46px; margin: 0 auto 10px; color: var(--brand); }
.dropzone strong { display: block; font-size: 1.1rem; }
.dropzone .hint { color: var(--muted); font-size: .9rem; }
.dropzone .chosen { display: block; margin-top: 10px; font-weight: 600; color: var(--brand-dark); overflow-wrap: anywhere; }
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#gooibutton { min-width: 180px; font-size: 1.05rem; padding: 12px 28px; }

/* --- progress ------------------------------------------------------------ */
.bar { width: 100%; height: 14px; margin: 6px auto 16px; border-radius: 999px; background: #E4EEF3; overflow: hidden; }
.bar > div {
	width: 0; height: 100%; border-radius: 999px; transition: width .3s ease;
	background: linear-gradient(90deg, var(--brand-light), var(--brand)),
	            repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 10px, transparent 10px 20px);
	background-blend-mode: overlay; background-size: auto, 28px 28px; animation: stripes 1s linear infinite;
}
@keyframes stripes { to { background-position: 0 0, 28px 0; } }
@media (prefers-reduced-motion: reduce) { .bar > div { animation: none; } * { transition: none !important; } }
table.stats { margin: 0 auto 8px; border-collapse: separate; border-spacing: 8px 4px; text-align: left; }
table.stats td:first-child { color: var(--muted); font-size: .9rem; }
table.stats td:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
#pct { font-size: 1.4rem; color: var(--brand-dark); }

/* --- links to copy ------------------------------------------------------ */
p.link input { width: 100%; max-width: 520px; text-align: center; font-weight: 600; color: var(--brand-dark); background: var(--brand-pale); border-color: #BFE3F2; }

/* --- tables ------------------------------------------------------------- */
table.files { width: 100%; border-collapse: collapse; text-align: left; font-size: .95rem; }
table.files th, table.files td { padding: 10px 10px; border-bottom: 1px solid #EDF2F5; vertical-align: top; }
table.files th { background: transparent; color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--border); }
table.files tbody tr:hover { background: #F7FBFD; }
table.files tr.gone { color: #9AA6AF; }
table.files td.actions, table.files td[data-label="Size"], table.files td[data-label="Uploaded"], table.files td[data-label="Expires"] { white-space: nowrap; }
/* Phones: each file becomes a little card. */
@media (max-width: 640px) {
	table.files thead { display: none; }
	table.files tr { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
	table.files td { display: block; border: none; padding: 2px 0; }
	table.files td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
}
table.compare { margin: 0 auto 18px; max-width: 560px; }
table.compare td:first-child { font-weight: 600; }
table.compare th:last-child, table.compare td:last-child { background: var(--brand-pale); }
@media (max-width: 640px) {
	table.compare thead { display: table-header-group; }
	table.compare tr { display: table-row; border: 0; padding: 0; }
	table.compare td { display: table-cell; padding: 8px 6px; }
	table.compare td[data-label]::before { content: none; }
}
.plans { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }

/* --- the tiny poll ------------------------------------------------------- */
.poll { font-size: .75rem; color: #8A97A1; margin-bottom: 10px; }
.poll button.link { text-decoration: none; font-size: .85rem; padding: 0 2px; }
.poll button.link:hover { transform: scale(1.15); }
nav button.link { text-decoration: none; font-size: inherit; }
nav b { padding-left: 0; }
ul.devices { list-style: none; padding: 0; margin: 0 0 16px; }
ul.devices li { padding: 6px 0; border-bottom: 1px solid #EDF2F5; }
/* Terms: really fine print, with a zoom button for those who must (no JavaScript needed). */
.fineprint { font-size: .45rem; line-height: 1.35; color: var(--muted); transition: font-size .25s; }
.fineprint h3 { font-size: .5rem; margin: .8rem 0 .2rem; }
.zoom-toggle { position: absolute; opacity: 0; pointer-events: none; }
.zoom-button { display: inline-block; font-size: .9rem; padding: 6px 16px; cursor: pointer; }
.zoom-button .out { display: none; }
.zoom-toggle:checked ~ p .zoom-button .in { display: none; }
.zoom-toggle:checked ~ p .zoom-button .out { display: inline; }
.zoom-toggle:checked ~ .fineprint { font-size: 1rem; line-height: 1.55; color: var(--text); }
.zoom-toggle:checked ~ .fineprint h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.zoom-toggle:focus-visible ~ p .zoom-button { box-shadow: 0 0 0 3px rgba(0, 144, 208, .22); }

/* --- My files: search, sorting, icons, virus check ---------------------------- */
form.search { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
form.search input[type=search] { width: 280px; max-width: 100%; }
form.search button { padding: 9px 18px; }
table.files th a { color: inherit; text-decoration: none; }
table.files th a:hover, table.files th a.sorted { color: var(--brand-dark); }
table.files td.name { min-width: 240px; }
table.files td.name > div { display: flex; gap: 10px; align-items: flex-start; }
table.files td.name span { min-width: 0; overflow-wrap: break-word; word-break: normal; padding-top: 3px; }
table.files th { white-space: nowrap; }
table.files td[data-label="Last download"], table.files td[data-label="Virus check"] { white-space: nowrap; }
.ficon { flex: none; }
.ficon .page { fill: var(--k, #8A97A1); }
.ficon .fold { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
.ficon text { fill: #fff; font: 700 7px system-ui, sans-serif; letter-spacing: .02em; }
.ficon.archive { --k: #B7791F; } .ficon.image { --k: #2F9E5B; } .ficon.video { --k: #7B4FC9; }
.ficon.audio { --k: #D6457A; } .ficon.pdf { --k: #D93B30; } .ficon.doc { --k: #2B6CC4; }
.ficon.sheet { --k: #1E8A4C; } .ficon.slides { --k: #E0702A; } .ficon.code { --k: #4A5866; }
.scan { font-size: .85rem; }
.scan.clean { color: var(--ok); font-weight: 600; }
.scan.pending { color: var(--brand-dark); }
.scan.infected { color: var(--danger); font-weight: 600; }
.scan.skipped { color: var(--muted); }
footer .tz { margin: 0 0 8px; }
@media (max-width: 640px) { table.files td.name { min-width: 0; } table.files td.name::before { content: none; } }
p.after-form { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; align-items: baseline; margin: 18px 0 0; font-size: .95rem; }
p.after-form a { white-space: nowrap; }

/* --- bundles: several files under one link ---------------------------------- */
ul.bundle-files { list-style: none; padding: 0; margin: 0 auto 18px; max-width: 560px; text-align: left; }
ul.bundle-files li { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #EDF2F5; }
ul.bundle-files li.folder { font-weight: 600; color: var(--muted); border-bottom: none; padding-top: 12px; }
ul.bundle-files li.in-folder { padding-left: 26px; }
ul.bundle-files li.gone { color: #9AA6AF; }
ul.bundle-files .fname { flex: 1; min-width: 0; overflow-wrap: break-word; }
ul.bundle-files .fsize { white-space: nowrap; color: var(--muted); font-size: .9rem; }
.folder-pick { margin: -10px 0 14px; font-size: .9rem; }
.bundle-head { background: var(--brand-pale); border-radius: 12px; padding: 14px 16px 4px; margin: 0 0 18px; }
.bundle-tag { font-size: .8rem; }
.muted { color: var(--muted); }
button.danger { background: linear-gradient(180deg, #E35D5D -60%, var(--danger) 70%); box-shadow: 0 2px 6px rgba(198, 40, 40, .25); }