/* FileGB theme — override layer for XFileSharing Pro 4.3.
   Flat 4-colour palette, no gradients or extra shades:
     white  #FFFFFF  cards, header, inputs
     grey   #E4E7EE  page background, borders, table heads
     ink    #334155  all text, footer, dashboard sidebar
     brand  #2563EB  buttons, links, icons, active states
   Loaded last from Templates/main.html so SibSoft upgrades don't wipe it.
   Older dark theme kept in filegb-dark.css. */

:root {
  --fgb-white: #FFFFFF;
  --fgb-grey: #E4E7EE;
  --fgb-ink: #334155;
  --fgb-brand: #2563EB;

  --bs-primary: #2563EB;          --bs-primary-rgb: 37, 99, 235;
  --bs-secondary: #334155;        --bs-secondary-rgb: 51, 65, 85;
  --bs-success: #2563EB;          --bs-success-rgb: 37, 99, 235;
  --bs-info: #2563EB;             --bs-info-rgb: 37, 99, 235;
  --bs-warning: #2563EB;          --bs-warning-rgb: 37, 99, 235;
  --bs-danger: #334155;           --bs-danger-rgb: 51, 65, 85;
  --bs-light: #E4E7EE;            --bs-light-rgb: 228, 231, 238;
  --bs-dark: #334155;             --bs-dark-rgb: 51, 65, 85;
  --bs-primary-text-emphasis: #2563EB;   --bs-primary-bg-subtle: #FFFFFF;   --bs-primary-border-subtle: #2563EB;
  --bs-success-text-emphasis: #2563EB;   --bs-success-bg-subtle: #FFFFFF;   --bs-success-border-subtle: #2563EB;
  --bs-info-text-emphasis: #2563EB;      --bs-info-bg-subtle: #FFFFFF;      --bs-info-border-subtle: #2563EB;
  --bs-warning-text-emphasis: #334155;   --bs-warning-bg-subtle: #FFFFFF;   --bs-warning-border-subtle: #2563EB;
  --bs-secondary-text-emphasis: #334155; --bs-secondary-bg-subtle: #E4E7EE; --bs-secondary-border-subtle: #E4E7EE;
  --bs-light-text-emphasis: #334155;     --bs-light-bg-subtle: #FFFFFF;     --bs-light-border-subtle: #E4E7EE;
  --bs-dark-text-emphasis: #334155;      --bs-dark-bg-subtle: #E4E7EE;      --bs-dark-border-subtle: #334155;

  --bs-body-color: #334155;       --bs-body-color-rgb: 51, 65, 85;
  --bs-body-bg: #FFFFFF;          --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #334155;   --bs-emphasis-color-rgb: 51, 65, 85;
  --bs-secondary-color: #334155;  --bs-secondary-color-rgb: 51, 65, 85;
  --bs-secondary-bg: #E4E7EE;     --bs-secondary-bg-rgb: 228, 231, 238;
  --bs-tertiary-color: #334155;   --bs-tertiary-color-rgb: 51, 65, 85;
  --bs-tertiary-bg: #E4E7EE;      --bs-tertiary-bg-rgb: 228, 231, 238;
  --bs-heading-color: #334155;
  --bs-link-color: #2563EB;       --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #334155; --bs-link-hover-color-rgb: 51, 65, 85;
  --bs-code-color: #2563EB;
  --bs-highlight-color: #334155;  --bs-highlight-bg: #E4E7EE;
  --bs-border-color: #E4E7EE;     --bs-border-color-translucent: #E4E7EE;
  --bs-form-valid-color: #2563EB; --bs-form-valid-border-color: #2563EB;
  --bs-border-radius: .5rem;      --bs-border-radius-sm: .375rem;   --bs-border-radius-lg: .75rem;
}

/* ---------- Base ---------- */
html, body { background-color: var(--fgb-grey) !important; color: var(--fgb-ink); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .text-dark, .text-black, .text-body-emphasis,
.text-secondary, .text-muted, .link-secondary, .link-body-emphasis, .download-title, .counters .number { color: var(--fgb-ink) !important; }
.text-success, .text-info, .text-primary, .link-primary { color: var(--fgb-brand) !important; }
.bg-white, .bg-light, .bg-body, .bg-body-tertiary { background-color: var(--fgb-white) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end, hr { border-color: var(--fgb-grey) !important; opacity: 1; }
::selection { background: var(--fgb-brand); color: var(--fgb-white); }
* { box-shadow: none !important; text-shadow: none !important; }
:focus-visible { outline: 2px solid var(--fgb-brand) !important; outline-offset: 2px; }
/* No separate red: destructive buttons are ink, errors use the brand-bordered alert */
.btn-danger, .btn-outline-danger {
  --bs-btn-color: #FFFFFF; --bs-btn-bg: #334155; --bs-btn-border-color: #334155;
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #2563EB; --bs-btn-hover-border-color: #2563EB;
}
.text-danger, .link-danger { color: var(--fgb-ink) !important; }

/* Template icons hard-code other colours — force them to the brand colour */
svg [fill="#3586FF" i], svg[fill="#3586FF" i], svg [fill="#1E9754" i], svg [fill="#1C63BB" i] { fill: var(--fgb-brand); }
svg [stroke="#3586FF" i] { stroke: var(--fgb-brand); }
svg [fill="#D12222" i], svg[fill="#D12222" i] { fill: var(--fgb-ink) !important; }
.fgb-hero { max-width: 560px; width: 100%; }
.text-list li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath fill='%232563EB' d='M9 0C4 0 0 4 0 9s4 9 9 9 9-4 9-9-4-9-9-9ZM7.6 13.2 3.5 9l1.6-1.6L7.6 10 13 4.6l1.6 1.6-7 7Z'/%3E%3C/svg%3E"); }

/* ---------- Buttons: solid brand, no gradients ---------- */
.btn-primary, .btn-success, .btn-info, .submit-btn, .download-btn, .reg-btn, .slide-button {
  --bs-btn-color: #FFFFFF;  --bs-btn-bg: #2563EB;  --bs-btn-border-color: #2563EB;
  --bs-btn-hover-color: #FFFFFF;  --bs-btn-hover-bg: #334155;  --bs-btn-hover-border-color: #334155;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #334155; --bs-btn-active-border-color: #334155;
  --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #2563EB; --bs-btn-disabled-border-color: #2563EB;
  background-image: none !important;
}
.slide-button { background-color: var(--fgb-brand); color: var(--fgb-white); }
.slide-button:hover, .slide-button:focus, .slide-button:active { background-color: var(--fgb-ink); color: var(--fgb-white); }
.download-btn[disabled] { background-color: var(--fgb-grey) !important; color: var(--fgb-ink) !important; }
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-light, .btn-light, .btn-secondary, .login-btn {
  --bs-btn-color: #334155;  --bs-btn-bg: #FFFFFF;  --bs-btn-border-color: #E4E7EE;
  --bs-btn-hover-color: #FFFFFF;  --bs-btn-hover-bg: #2563EB;  --bs-btn-hover-border-color: #2563EB;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #2563EB; --bs-btn-active-border-color: #2563EB;
  color: var(--fgb-ink); background-color: var(--fgb-white); border: 1px solid var(--fgb-grey);
}
.login-btn:hover, .login-btn:focus, .login-btn:active,
.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active, .btn-outline-light.active {
  color: var(--fgb-white) !important; background-color: var(--fgb-brand); border-color: var(--fgb-brand);
}
.btn-dark { --bs-btn-bg: #334155; --bs-btn-border-color: #334155; --bs-btn-color: #FFFFFF; --bs-btn-hover-bg: #2563EB; --bs-btn-hover-border-color: #2563EB; }

/* ---------- Forms ---------- */
.form-control, .form-select { background-color: var(--fgb-white); border-color: var(--fgb-grey); color: var(--fgb-ink); }
.form-control:focus, .form-select:focus { border-color: var(--fgb-brand); }
.form-control::placeholder { color: var(--fgb-ink); opacity: .45; }
.form-control:disabled, .form-control[readonly], .codes-textarea .form-control, .uploadItem .codes-input .form-control { background-color: var(--fgb-grey); }
.input-group-text { background-color: var(--fgb-grey); border-color: var(--fgb-grey); color: var(--fgb-ink); }
.form-check-input { border-color: var(--fgb-ink); }
.form-check-input:checked { background-color: var(--fgb-brand); border-color: var(--fgb-brand); }
.check-radio input[type="radio"], .check-radio input[type="checkbox"] { background-color: var(--fgb-white); border-color: var(--fgb-grey); }
.check-radio input[type="radio"]:checked, .check-radio input[type="checkbox"]:checked { background-color: var(--fgb-brand); border-color: var(--fgb-brand); }
.form-switcher input { background-color: var(--fgb-grey); }
.form-switcher input:checked { background-color: var(--fgb-brand); }
.earn-mode input, .earn-mode input ~ label { border-color: var(--fgb-grey); }
.earn-mode input:checked { background-color: var(--fgb-white); border-color: var(--fgb-brand); }
.earn-mode input:disabled ~ label { background-color: var(--fgb-grey); }
.earn-mode input:checked ~ label { background-color: var(--fgb-white); border-color: var(--fgb-brand); color: var(--fgb-brand); }

/* ---------- Header ---------- */
/* Dashboard (has the sidebar): solid white bar, pinned like before */
.header, .top-bar {
  background: var(--fgb-white) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: 1px solid var(--fgb-grey) !important;
}
body:has(.navpanel) .header { position: sticky; top: 0; z-index: 1020; }
/* Public pages: header is part of the page — same background, no divider, scrolls away */
body:not(:has(.navpanel)) .header {
  position: static !important;
  background: transparent !important;
  border-bottom: 0 !important;
}
body:not(:has(.navpanel)) .header .header-row { padding-top: .75rem; padding-bottom: .75rem; }
.header .nav-link { color: var(--fgb-ink) !important; font-weight: 600; }
.header .nav-link:hover { color: var(--fgb-brand) !important; }
/* Right-side menu (Premium / Earn money / Check link) before the language + login buttons */
.header .fgb-nav-right { display: flex; align-items: center; gap: .25rem; }
.header .fgb-nav-right .nav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .75rem; white-space: nowrap; font-weight: 700; }
/* Language switcher: short codes instead of flags (button + dropdown) */
.header .fgb-lang-btn { font-weight: 700; color: var(--fgb-ink); padding: .5rem .75rem; display: inline-flex; align-items: center; gap: .3rem; border: 0; }
.header .fgb-lang-btn:hover, .header .fgb-lang-btn.show { color: var(--fgb-brand); }
.header-lang .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.header-lang .dropdown-item .fgb-lang-code { min-width: 2.4em; font-weight: 700; color: var(--fgb-ink); }
.fgb-lang-code[data-lang="english"]::before   { content: "EN"; }
.fgb-lang-code[data-lang="spanish"]::before   { content: "ES"; }
.fgb-lang-code[data-lang="japan"]::before     { content: "JP"; }
.fgb-lang-code[data-lang="russian"]::before   { content: "RU"; }
.fgb-lang-code[data-lang="german"]::before    { content: "DE"; }
.fgb-lang-code[data-lang="french"]::before    { content: "FR"; }
.fgb-lang-code[data-lang="arabic"]::before    { content: "AR"; }
.fgb-lang-code[data-lang="turkish"]::before   { content: "TR"; }
.fgb-lang-code[data-lang="polish"]::before    { content: "PL"; }
.fgb-lang-code[data-lang="thai"]::before      { content: "TH"; }
.fgb-lang-code[data-lang="hungary"]::before   { content: "HU"; }
.fgb-lang-code[data-lang="indonesia"]::before { content: "ID"; }
.fgb-lang-code[data-lang="dutch"]::before     { content: "NL"; }
.fgb-lang-code[data-lang="hebrew"]::before    { content: "HE"; }
/* Language names in the dropdown (XFS only offers ucfirst of the file name, e.g. "Japan") */
.fgb-lang-name[data-lang="english"]::before   { content: "English"; }
.fgb-lang-name[data-lang="spanish"]::before   { content: "Spanish"; }
.fgb-lang-name[data-lang="japan"]::before     { content: "Japanese"; }
.fgb-lang-name[data-lang="russian"]::before   { content: "Russian"; }
.fgb-lang-name[data-lang="german"]::before    { content: "German"; }
.fgb-lang-name[data-lang="french"]::before    { content: "French"; }
.fgb-lang-name[data-lang="arabic"]::before    { content: "Arabic"; }
.fgb-lang-name[data-lang="turkish"]::before   { content: "Turkish"; }
.fgb-lang-name[data-lang="polish"]::before    { content: "Polish"; }
.fgb-lang-name[data-lang="thai"]::before      { content: "Thai"; }
.fgb-lang-name[data-lang="hungary"]::before   { content: "Hungarian"; }
.fgb-lang-name[data-lang="indonesia"]::before { content: "Indonesian"; }
.fgb-lang-name[data-lang="dutch"]::before     { content: "Dutch"; }
.fgb-lang-name[data-lang="hebrew"]::before    { content: "Hebrew"; }
.header .fgb-nav-right svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header .icon-btn svg, .top-bar .icon-btn svg { fill: currentColor; }

/* ---------- Dropdowns / modals ---------- */
.dropdown-menu {
  --bs-dropdown-bg: #FFFFFF; --bs-dropdown-border-color: #E4E7EE; --bs-dropdown-link-color: #334155;
  --bs-dropdown-link-hover-bg: #E4E7EE; --bs-dropdown-link-hover-color: #334155;
  --bs-dropdown-link-active-bg: #2563EB; --bs-dropdown-link-active-color: #FFFFFF; --bs-dropdown-divider-bg: #E4E7EE;
}
.modal { --bs-modal-border-color: #E4E7EE; --bs-modal-header-border-color: #E4E7EE; --bs-modal-footer-border-color: #E4E7EE; }

/* ---------- Cards, blocks ---------- */
.block, .login, .premiumTable, .premiumPlan, .advantages-item, .fileItem, .preview-image, .card, .control-buttons {
  background-color: var(--fgb-white) !important;
  border: 1px solid var(--fgb-grey) !important;
  border-radius: 12px;
}
.fileItem:hover, .advantages-item:hover { border-color: var(--fgb-brand) !important; }
.accordion { --bs-accordion-bg: #FFFFFF; --bs-accordion-border-color: #E4E7EE; --bs-accordion-active-bg: #FFFFFF; --bs-accordion-active-color: #2563EB; }
.accordion-item { border-color: var(--fgb-grey) !important; }
.list-group { --bs-list-group-border-color: #E4E7EE; --bs-list-group-active-bg: #2563EB; --bs-list-group-active-border-color: #2563EB; }
.divider-text { border-top-color: var(--fgb-grey); }
.divider-text span { background-color: var(--fgb-white); }
.alert { background-color: var(--fgb-white) !important; border: 1px solid var(--fgb-grey) !important; border-left: 4px solid var(--fgb-brand) !important; color: var(--fgb-ink) !important; border-radius: 10px; }

/* ---------- Tables ---------- */
.table { --bs-table-color: #334155; --bs-table-border-color: #E4E7EE; --bs-table-striped-bg: #FFFFFF; --bs-table-hover-bg: #E4E7EE; --bs-table-active-bg: #E4E7EE; }
.table thead th { background-color: var(--fgb-grey) !important; color: var(--fgb-ink); border-color: var(--fgb-grey); }
.table-rounded, .table-rounded th + th, .table-rounded td + td, .settings-table tr { border-color: var(--fgb-grey) !important; }
.user-limits .nav, .user-limits .table thead th { background-color: var(--fgb-brand) !important; border-color: var(--fgb-brand) !important; color: var(--fgb-white); }
.user-limits .nav .nav-link { color: var(--fgb-white); }
.user-limits .nav .nav-link.active { background-color: var(--fgb-ink); }

/* ---------- Tabs & paging ---------- */
.block-tabs { box-shadow: inset 0 -1px 0 var(--fgb-grey) !important; }
.block-tabs .nav-link { color: var(--fgb-ink); }
.block-tabs .nav-link:hover, .block-tabs .nav-link.active { color: var(--fgb-brand); border-color: var(--fgb-brand); }
.tabs { background-color: var(--fgb-grey); }
.tabs .nav-link { background: var(--fgb-grey); border-bottom-color: var(--fgb-grey); color: var(--fgb-ink); }
.tabs .nav-link.active { background-color: var(--fgb-white); color: var(--fgb-brand); border-color: var(--fgb-grey); border-bottom-color: var(--fgb-white); }
.tab-buttons { border-color: var(--fgb-grey); background: var(--fgb-white); }
.tab-buttons .nav-link { color: var(--fgb-ink); }
.tab-buttons .nav-link.active { background-color: var(--fgb-brand); color: var(--fgb-white); }
.nav-pills { --bs-nav-pills-link-active-bg: #2563EB; --bs-nav-pills-link-active-color: #FFFFFF; }
.nav-tabs { --bs-nav-tabs-border-color: #E4E7EE; --bs-nav-tabs-link-active-color: #2563EB; --bs-nav-tabs-link-active-border-color: #E4E7EE #E4E7EE #FFFFFF; --bs-nav-tabs-link-hover-border-color: #E4E7EE; }
.paging a, .paging span { background-color: var(--fgb-white); color: var(--fgb-ink); border: 1px solid var(--fgb-grey); }
.paging a:hover { border-color: var(--fgb-brand); color: var(--fgb-brand); }
.paging span { background-color: var(--fgb-brand); border-color: var(--fgb-brand); color: var(--fgb-white); }
.pagination { --bs-pagination-color: #334155; --bs-pagination-border-color: #E4E7EE; --bs-pagination-hover-color: #2563EB; --bs-pagination-hover-bg: #FFFFFF; --bs-pagination-hover-border-color: #2563EB; --bs-pagination-active-bg: #2563EB; --bs-pagination-active-border-color: #2563EB; --bs-pagination-disabled-bg: #E4E7EE; --bs-pagination-disabled-border-color: #E4E7EE; }
.badge.bg-success, .badge.bg-primary, .badge.bg-info, .badge.bg-warning { background-color: var(--fgb-brand) !important; color: var(--fgb-white) !important; }
.progress { --bs-progress-bg: #E4E7EE; --bs-progress-bar-bg: #2563EB; }

/* ---------- Homepage ---------- */
.slide { background: var(--fgb-white) !important; color: var(--fgb-ink); border-bottom: 1px solid var(--fgb-grey); }
.slide-h1 { color: var(--fgb-ink) !important; }
.advantages, .section { background: var(--fgb-grey) !important; }
.advantages-icon { background-color: var(--fgb-grey); color: var(--fgb-brand); }
.advantages-item:hover .advantages-icon { background-color: var(--fgb-brand); color: var(--fgb-white); }
.counters .number { color: var(--fgb-brand) !important; }

/* Homepage = upload form, 4shared-style: minimal header, headline, big drop zone */
.fgb-home-hero { padding: 3rem 1rem 1.75rem; }
.fgb-home-hero h1 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 800; }
/* Guests on the homepage: no menu links in the header, no upload-type tabs, no card frame */
body:has(.fgb-home-hero) .header nav.nav { display: none; }
body:has(.fgb-home-hero) .upload-form .block-tabs { display: none; }
body:has(.fgb-home-hero) .upload-form > .block { background: transparent !important; border: 0 !important; }
body:has(.fgb-home-hero) .upload-form > .block > .p-3 { padding: 0 !important; }
body:has(.fgb-home-hero) .upload-form { max-width: 760px; }
/* Reserve the drop box height: AngularJS (ng-cloak/ng-if) draws it after first paint, which pushed
   the category tiles down (Lighthouse CLS 0.28). Heights measured per breakpoint. */
body:has(.fgb-home-hero) .upload-form .tab-content { min-height: 336px; }
@media (min-width: 576px) { body:has(.fgb-home-hero) .upload-form .tab-content { min-height: 314px; } }
@media (min-width: 992px) { body:has(.fgb-home-hero) .upload-form .tab-content { min-height: 334px; } }
.upload-form .dropbox { border: 2px dashed var(--fgb-brand) !important; background-color: var(--fgb-white); border-radius: 16px; transition: background-color .15s; }
.upload-form .dropbox:hover, .upload-form .dropbox.active { background-color: var(--fgb-grey); }
.fgb-dropbox { padding: 2rem 1rem 2.25rem !important; }
.fgb-cloud { display: block; width: 190px; max-width: 70%; height: auto; margin: 0 auto .75rem; }
.fgb-drop-text { font-weight: 600; color: var(--fgb-brand); margin-bottom: 1rem; }
.fgb-limits { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin-top: 1rem; font-size: .9rem; color: var(--fgb-ink); }
.fgb-limits strong { color: var(--fgb-brand); font-weight: 700; }

/* Outline icons in the "Why FileGB?" cards (same style as the category tiles) */
.advantages-icon .fgb-line-icon { width: 34px; height: 34px; fill: none; stroke: var(--fgb-brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.advantages-item:hover .advantages-icon .fgb-line-icon { stroke: var(--fgb-white); }

/* Download page file card */
.fgb-file-card { max-width: 760px; margin-left: auto; margin-right: auto; }
.fgb-file-card .download-title { font-size: 1.35rem; }
.fgb-file-icon { width: 44px; height: 44px; fill: none; stroke: var(--fgb-brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Category tiles under the upload box */
.fgb-cats { padding: 2.5rem 0 1rem; }
.fgb-cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  height: 100%; min-height: 150px; padding: 1.5rem .75rem;
  background: var(--fgb-white); border: 2px solid var(--fgb-grey); border-radius: 20px;
  color: var(--fgb-ink); font-weight: 600; text-decoration: none; transition: border-color .15s, transform .15s;
}
.fgb-cat:hover, .fgb-cat:focus-visible { border-color: var(--fgb-brand); color: var(--fgb-brand); transform: translateY(-2px); }
.fgb-cat-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--fgb-grey); transition: background-color .15s; }
.fgb-cat-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--fgb-brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fgb-cat:hover .fgb-cat-icon { background: var(--fgb-brand); }
.fgb-cat:hover .fgb-cat-icon svg { stroke: var(--fgb-white); }
@media (max-width: 575px) { .fgb-cat { min-height: 120px; } .fgb-cat-icon { width: 54px; height: 54px; } }
.fgb-upload-btn { min-width: min(320px, 100%); height: 52px; border-radius: 26px; font-size: 1.125rem; font-weight: 700; pointer-events: none; }

/* ---------- Premium ---------- */
.premiumTable .col, .premiumTable .col:first-child { background-color: var(--fgb-white); border-left-color: var(--fgb-grey); color: var(--fgb-ink); }
.premiumTable .col.premium { background-color: var(--fgb-grey); }

/* ---------- Dashboard: ink sidebar ---------- */
.navpanel, .admin-menu, .navpanel-tabs { background-color: var(--fgb-ink); }
.navpanel-menu .nav-link, .navpanel-submenu .nav-link, .navpanel-tabs .nav-link, .admin-menu .nav-link { color: var(--fgb-white); }
.navpanel-menu .nav-link:hover, .navpanel-menu .nav-link.active { background-color: var(--fgb-brand); color: var(--fgb-white); }
.navpanel-menu .nav-link.active svg path { fill: var(--fgb-white); }
.navpanel-submenu { background-color: var(--fgb-ink); }
.navpanel-submenu .nav-link:hover, .navpanel-submenu .nav-link.active { color: var(--fgb-brand); }
.navpanel-tabs .nav-link.active { background-color: var(--fgb-brand); }
.navpanel-backdrop { background-color: var(--fgb-ink); opacity: .5; }

/* ---------- Footer ---------- */
.footer { background-color: var(--fgb-ink) !important; color: var(--fgb-white); }
.footer .nav-link, .footer .text-white, .footer a { color: var(--fgb-white) !important; }
.footer .nav-link:hover { color: var(--fgb-brand) !important; }
.footer-bottom { border-top: 1px solid var(--fgb-white) !important; border-top-color: rgba(255, 255, 255, .15) !important; }
.footer .login-btn { background-color: transparent; color: var(--fgb-white) !important; border-color: var(--fgb-white); }

/* ---------- jQuery UI widgets on a few admin pages ---------- */
.ui-widget-header { background: var(--fgb-grey); color: var(--fgb-ink); border-color: var(--fgb-grey); }
.ui-state-active, .ui-widget-content .ui-state-active { background: var(--fgb-brand); border-color: var(--fgb-brand); color: var(--fgb-white); }

/* ---------- Homepage content sections (how it works, comparison) ---------- */

.fgb-step { background: var(--fgb-white); border-radius: 16px; padding: 1.5rem; height: 100%; }
.fgb-step p { margin: 0; color: var(--fgb-ink); }
.fgb-step-no { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: .75rem;
  border-radius: 50%; background: var(--fgb-brand); color: var(--fgb-white); font-weight: 800; }
.fgb-compare-table { background: var(--fgb-white); border-radius: 16px; overflow: hidden; color: var(--fgb-ink); }
.fgb-compare-table > :not(caption) > * > * { padding: .85rem 1rem; border-color: var(--fgb-grey); background: var(--fgb-white); color: var(--fgb-ink); vertical-align: middle; text-align: center; }
.fgb-compare-table tbody th { text-align: left; font-weight: 600; }
.fgb-compare-table thead th { font-weight: 800; }
.fgb-compare-table thead th:last-child { color: var(--fgb-brand); }
.fgb-compare-table tbody tr:last-child > * { border-bottom: 0; }
.fgb-compare-table { table-layout: fixed; }
.fgb-compare-table thead th:first-child { width: 28%; }
@media (max-width: 575px) {
  .fgb-compare-table { font-size: .8rem; }
  .fgb-compare-table > :not(caption) > * > * { padding: .6rem .3rem; }
  .fgb-compare-table tbody th { padding-left: .6rem !important; }
  .fgb-compare-table thead th:first-child { width: 31%; }
}
/* One body text size (16px) across the homepage sections; the theme shrinks .advantages p to .9em */
.advantages p { font-size: 1rem; }
/* Logo lockup (2026-10-25: bigger box centred on the "e" makes the SVG 12.7% taller) — heights scaled so "File" keeps its size */
.logo img { height: 41px; width: auto; }
@media (max-width: 575px) { .header .logo img { height: 38px; } }
body:has(.navpanel) .logo img { height: 38px; }
/* Premium page: plan boxes in their own row under the Premium column (comparison.html .fgb-plan-row) */
body:has(.fgb-plan-row) .fgb-packages { display: none; }
.fgb-plan-row > .col { padding-top: 1rem; padding-bottom: 1rem; }
.fgb-plan-row .premiumPlan { margin: 0 auto 1rem; max-width: 240px; }
.fgb-plan-row .premiumPlan:last-child { margin-bottom: 0; }
/* the plans grid reuses .premiumTable column widths but is transparent: comparison box ends at the last feature row */
.premiumTable.fgb-plan-table { background: transparent !important; border: 0 !important; margin-top: 1rem; }
.fgb-plan-table .col, .fgb-plan-table .col.premium { background: transparent !important; border-left-color: transparent !important; }
.premiumTable:has(+ .fgb-plan-table) { margin-bottom: 0 !important; }
@media (max-width: 575px) {
  .fgb-plan-row > .col:not(.premium) { display: none; }
  .fgb-plan-row > .col.premium { flex: 1 1 100%; display: flex; gap: .75rem; padding: 0; }
  .fgb-plan-row .premiumPlan { flex: 1; max-width: none; margin: 0; }
  .fgb-plan-row .premiumPlan .btn { white-space: nowrap; padding-left: .9rem; padding-right: .9rem; }
}
/* Free-account box under the Registered column (Premium page) */
@media (max-width: 575px) {
  .fgb-plan-row { flex-wrap: wrap; row-gap: .75rem; }
  .fgb-plan-row > .col.fgb-plan-reg { display: block; flex: 1 1 100%; padding: 0; }
  .fgb-plan-row > .col.fgb-plan-reg:empty, .fgb-plan-row > .col.fgb-plan-reg:not(:has(.premiumPlan)) { display: none; }
}
.fgb-plan-reg .premiumPlan .btn { white-space: nowrap; padding-left: 1rem; padding-right: 1rem; }