@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Regular-s1J2CXS.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-RegularItalic-na0AW7h.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Light-Avfsu36.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-LightItalic-DIHLlrJ.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Bold-kEqG18l.woff2") format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-BoldItalic-OhhVU-e.woff2") format('woff2');
}

/* <pidb> is a data carrier (brand/state, read by app.js), not something to render. Left
 * unstyled it is an unknown = inline element, so it generated a line box of its own directly
 * above the full-height app shell - roughly 13px of body content that pushed the shell, and
 * with it the footer, past the bottom of the viewport. */
pidb {
    display: none;
}

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #f4f4ee;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    display: none;
}

input[type=text] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    box-shadow: none;
}

input:focus {
    outline: none;
}

button:focus {
    outline: none;
}

h1 {
    color: var(--main-color);
}

h2 {
    color: var(--main-color);
}

.border-custom {
    border: 1px solid var(--main-color);
}

/* Set full page height */
.full-height {
    height: 100vh;
}

/* Set full page width */
.full-width {
    width: 100vw;
}

.navigationHeaderLogo {
    padding-top: 5px;
    width: 100%;
}

.outer {
    display: flex;
    flex-flow: column;
    height: 100vh;
    /* fallback for browsers without dvh */
    height: 100dvh;
}

/* Mobile shell: size against the viewport box itself rather than a viewport unit.
 *
 * An installed app launches without browser chrome, and both engines resolve vh/dvh once
 * before that window has settled; nothing resizes afterwards, so the stale (taller) value
 * stuck and the footer - the last child of this column - ended up below the fold until an
 * orientation change forced a relayout. A fixed box with inset:0 is laid out against the
 * viewport continuously, so there is no value to go stale.
 *
 * height:auto is what makes it work: .outer above sets an explicit height, and a fixed
 * element with a non-auto height ignores `bottom`, which would reinstate the same 100dvh.
 * Scoped to #mobileMain because the desktop shell reuses .outer for its left column, where
 * the flex row must keep sizing it. */
#mobileMain .outer {
    position: fixed;
    inset: 0;
    height: auto;
}

.inner-fixed {
    border: 0px solid var(--main-color);
}

.inner-remaining {
    cursor: pointer;
    flex-grow: 1;
    overflow: hidden;
    overflow-y: scroll;
}

.inner-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 6px 0;
    border-top: 1px solid #e2e6ec;
    flex-shrink: 0;
}

.inner-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    text-decoration: none;
    color: var(--main-color);
    font-size: 12px;
    font-weight: 500;
}

.footer-icon {
    flex: none;
    font-size: 18px;
    line-height: 1;
}

.footer-icon-svg {
    width: 20px;
    height: 20px;
}

.not-user-selectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.searchCounterText {
    padding: 8px;
    margin: 0 0 10px 0;
    border-radius: 10px;
    background-color: var(--table-row-color);
    border: 1px solid #e2e6ec;
    color: var(--main-color);
    font-weight: 600;
    font-size: 13px;
}

.searchMessage {
    margin-top: 2vh;
}

.dropdown-button {
    background-color: white;
}

.dropdown-flag {
    height: 20px;
    margin-right: 5px;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Generic */
.navbar {
    display: flex;
}

.navbar-left {
    flex: 0 0 auto;
}

.navbar-left img {
    border: 1px solid var(--main-color);
    height: 20px;
}

.navbar-right {
    flex: 1;
}

/* Desktop */
.left-column,
.right-column {
    width: 27vw;
}

.center-column {
    border-left: 1px solid #e2e6ec;
    border-right: 1px solid #e2e6ec;
    width: 46vw;
}

.menuFrame {
    width: 100%;
    height: 95%;
}

.menuFooter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    padding: 8px 0;
}

.menuFooter .inner-footer {
    width: 100%;
}

/* Direct child = the brand footer logo link (the nav links live in .inner-footer) */
.menuFooter>a {
    text-align: center;
    text-decoration: none;
}

.menuFooterLogo {
    height: 30px;
    /* Adjust the logo size as needed */
}


.contentFrame {
    width: 100%;
    height: 99.5%;
}

.contentText {
    margin: 10px 0px 0px 0px;
    text-align: left;
    font-size: 12px;
}

.contentSection {
    margin: 10px 0px 0px 0px;
    width: 100%;
}

.contentSectionTitle {
    padding: 10px 4px 2px 4px;
    color: var(--main-color);
    font-size: 16px;
    font-weight: 700;
}

.contentSectionText {
    padding: 10px;
    border: 1px solid var(--main-color);
    font-size: 12px;
}

.dropdown-item-lang {
    font-size: 13px;
}

/* Search bar + language selector (mockup styling), shared by mobile & desktop */
#mobileMain .navbar,
#desktopMain .navbar {
    align-items: center;
    gap: 8px;
}

.dropdown-button.flag-select {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 44px;
    padding: 7px 9px;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 8px;
}

.flag-select .dropdown-flag {
    height: 22px;
    margin: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.flag-select-caret {
    flex: none;
    width: 14px;
    height: 14px;
    fill: var(--main-color);
}

.search-group {
    display: flex;
    align-items: stretch;
    height: 44px;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 8px;
    overflow: hidden;
}

.search-icon {
    flex: none;
    align-self: center;
    width: 18px;
    height: 18px;
    margin: 0 6px 0 12px;
    fill: #6c757d;
}

.search-group input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    font-size: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-group input::placeholder {
    font-size: 12px;
}

.search-clear {
    flex: none;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
}

.search-clear.visible {
    display: inline-flex;
}

.search-clear svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.search-clear:hover {
    color: var(--main-color);
}

/* Camera GTIN scanner trigger. Sits inside .search-group next to the clear button, and is
   revealed by app.js only once the browser reports a reachable camera - hence display:none by
   default and the same .visible pattern .search-clear uses. */
.search-scan {
    flex: none;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
    border: 0;
    border-left: 1px solid #e9ecef;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
}

.search-scan.visible {
    display: inline-flex;
}

.search-scan svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.search-scan:hover {
    color: var(--main-color);
}

/* Disabled while the overlay is open, so a second tap cannot start a second camera stream. */
.search-scan:disabled {
    opacity: .5;
    cursor: default;
}

/* Scanner overlay -----------------------------------------------------------------------

   z-index 4 puts it above .rotate-hint (3): the hint is a "turn your phone back" message, and
   with the camera open the phone is often tilted far enough for the orientation media query to
   match, which would otherwise cover the viewfinder with an instruction the user cannot act on. */
body.scanner-open {
    overflow: hidden;
}

.scanner-overlay {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.scanner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Fill rather than letterbox: black bars would shrink the barcode in frame, and the decoder
       only ever sees the full frame anyway - the cropping is purely what the user looks at. */
    object-fit: cover;
}

/* The dimmed surround is drawn with a huge spread shadow on the cut-out rather than four
   separate panels, so the window can be resized in one place. */
.scanner-mask {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scanner-window {
    position: relative;
    width: min(78vw, 420px);
    /* Wide and short: retail barcodes are far wider than they are tall, and a square window
       invites people to frame the whole product instead of the code. */
    height: min(38vw, 200px);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}

.scanner-laser {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 2px;
    background: var(--main-color);
    box-shadow: 0 0 8px var(--main-color);
    animation: scanner-sweep 2s ease-in-out infinite;
}

@keyframes scanner-sweep {
    0%, 100% { transform: translateY(-40px); }
    50%      { transform: translateY(40px); }
}

/* Users who ask for reduced motion get a static aiming line rather than a sweeping one. */
@media (prefers-reduced-motion: reduce) {
    .scanner-laser {
        animation: none;
    }
}

.scanner-close,
.scanner-torch {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
}

.scanner-close {
    right: 12px;
}

/* Hidden unless the camera track actually reports the torch capability (Chromium/Android only). */
.scanner-torch {
    left: 12px;
    display: none;
}

.scanner-torch.visible {
    display: flex;
}

.scanner-torch-on {
    background: var(--main-color);
}

.scanner-close svg,
.scanner-torch svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.scanner-hint,
.scanner-error {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: max(32px, env(safe-area-inset-bottom));
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Only shown when the camera could not be started; until then it must not occupy the hint's
   position or it would overlap it. */
.scanner-error {
    display: none;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.scanner-error.visible {
    display: block;
}

/* Stop the browser autofill/autocomplete highlight from tinting the field light blue */
.search-group input:-webkit-autofill,
.search-group input:-webkit-autofill:hover,
.search-group input:-webkit-autofill:focus,
.search-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s;
}


/* Mobile navigation card (rounded list of rows) */
.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: white;
    border: 1px solid #e2e6ec;
    border-radius: 12px;
    overflow: hidden;
}

/* Mobile navigation rows (icon + label + chevron) */
.nav-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 13px 14px;
    cursor: pointer;
    border-top: 1px solid #eef0f4;
}

.nav-row:first-child {
    border-top: 0;
}

.nav-row-icon {
    flex: none;
    width: 26px;
    color: var(--main-color);
    font-size: 20px;
    line-height: 1;
    text-align: center;
}

.nav-row-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #1a1a1a;
}

.nav-row-chevron {
    flex: none;
    color: var(--main-color);
    font-size: 15px;
    line-height: 1;
}

.nav-row:hover,
.nav-row:active {
    background: var(--main-background-color);
}

/* Breadcrumb (replaces the back button); stays pinned while the results scroll.
   Shares the mobile top-bar look (see .mobile-top-bar / .menu-bar). */
.breadcrumb-mobile {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--table-row-color);
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    padding: 8px;
    margin: 0 0 10px 0;
}

.breadcrumb-mobile-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-crumb {
    display: inline-flex;
    align-items: center;
    color: var(--main-color);
    cursor: pointer;
    font-weight: 500;
}

.breadcrumb-crumb:hover {
    text-decoration: underline;
}

.breadcrumb-current {
    color: #000;
    cursor: default;
    font-weight: 600;
}

.breadcrumb-current:hover {
    text-decoration: none;
}

.breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    color: var(--main-color);
}

.breadcrumb-icon {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.breadcrumb-sep .breadcrumb-icon {
    width: 11px;
    height: 11px;
}

/* Assets */
/* 12px inset standalone (mobile); flush when embedded in the desktop shell iframe. */
.asset-page {
    padding: 0 12px;
}

.pidb-desktop .asset-page {
    padding: 0;
}

.asset-container {
    margin-top: 5px;
}

.asset-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: var(--table-row-color);
    border-radius: 10px;
}

.asset-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.asset {
    box-shadow: inset 0 0 0 1px #e2e6ec;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    height: 0;
    width: 0;
    padding-right: 100%;
    padding-bottom: 100%;
    background-color: white;
    position: relative;
}

.asset-border {
    border: 1px solid #e2e6ec;
    border-radius: 8px;
}

.asset-button {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    background-color: white;
    color: var(--main-color);
    cursor: pointer;
}

.asset-button svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.asset-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    background-color: white;
    color: var(--main-color);
    cursor: pointer;
}

.asset-back svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.asset-button:hover {
    background-color: var(--main-background-color);
}

.asset-select {
    font-size: 13px;
}

label.asset-select {
    background: transparent;
    color: var(--main-color);
    font-weight: 600;
    border: 0;
    padding: 4px 2px;
}

select.asset-select {
    background: white;
    color: var(--main-color);
    font-weight: 600;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    cursor: pointer;
}

select.asset-select:hover {
    background-color: var(--main-background-color);
}

.asset-image {
    max-height: 95%;
    max-width: 95%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.asset-svg {
    max-height: 95%;
    max-width: 95%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.asset-video {
    margin-top: 5px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.asset-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* PiDB */
.title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: var(--main-color);
    margin: 8px 0 0 0;
    padding: 8px 6px 2px 6px;
}

/* 12px inset standalone (mobile); flush when embedded in the desktop shell iframe. */
.menu-page {
    padding: 0 12px;
}

.pidb-desktop .menu-page {
    padding: 0;
}

/* Chrome that only applies to standalone (mobile) pages; hidden inside the desktop shell iframe. */
.pidb-desktop .menu-bar,
.pidb-desktop .mobile-top-bar,
.pidb-desktop .asset-back,
.pidb-desktop .mainImage {
    display: none;
}

/* Field labels are the inverse: only shown inside the desktop shell (see edit_asset selects). */
label.asset-select {
    display: none;
}

.pidb-desktop label.asset-select {
    display: inline-block;
}

.menu-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    background-color: var(--table-row-color);
    border: 1px solid #e2e6ec;
    border-radius: 10px;
}

.menu-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    background-color: white;
    color: var(--main-color);
    cursor: pointer;
}

.menu-back svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.subtitle {
    font-size: 11px;
    text-align: center;
    color: #6c757d;
    margin: 0 0 8px 0;
    padding: 0 6px;
}

.alertTextBox {
    height: 0;
    overflow: hidden;
    margin: 6px 0;
    transition: height 0.6s ease-out;
}

.alertTextBox-inner {
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c2c0;
    border-radius: 8px;
    padding: 8px 12px;
}

/* Style the tab */
/* Tab bar styled like the pdf-viewer download bar */
.tab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    padding: 8px;
    background-color: var(--table-row-color);
    border: 1px solid #e2e6ec;
    border-radius: 10px;
}

/* Tab buttons: off = white, on (active) = filled blue */
.tab button {
    color: var(--main-color);
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    padding: 8px 16px;
    transition: 0.2s;
    font-size: 13px;
    font-weight: 600;
}

.tab button:hover {
    background-color: var(--main-background-color);
}

/* Active/current tab filled blue */
.tab button.active {
    background-color: var(--main-color);
    color: #fff;
}

.tab button.unavailable {
    background-color: #f2f2f2;
    color: #aaaaaa;
    border-color: #ddd;
}

/* Style the tab content */
.tabcontent {
    display: none;
    border-top: none;
}

.sectiontitle {
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    color: var(--main-color);
    margin: 10px 0 0 0;
    padding: 2px 2px;
}

.sectionbody {
    text-align: left;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    background: white;
    padding: 6px;
    margin: 0 0 8px 0;
}

.input-pictogram {
    background: white;
    height: 4vh;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-pictogram:focus {
    border: 1px solid var(--input-border-color-active);
}

.input-flag {
    background: white;
    height: 3.2vh;
    margin: 3px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-flag:focus {
    border: 1px solid var(--input-border-color-active);
}

.input-image {
    background: white;
    height: 7vh;
    border: 1px solid var(--main-color);
    margin-right: 1vw;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    border-radius: 0%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-image:focus {
    border: 1px solid var(--input-border-color-active);
}

.input-drawing {
    background: white;
    height: 7vh;
    border: 1px solid var(--main-color);
    margin-right: 1vw;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    border-radius: 0%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-drawing:focus {
    border: 1px solid var(--input-border-color-active);
}

.input-table_of_contents {
    background: white;
    height: 7vh;
    border: 1px solid var(--main-color);
    margin-right: 1vw;
}

.input-label {
    background: white;
    height: 7vh;
    border: 1px solid var(--main-color);
    margin-right: 1vw;
}

.input-video {
    background: white;
    height: 9vh;
    border: 1px solid var(--main-color);
    margin-right: 1vw;
}

.input-pdf {
    height: 4vh;
}

.mainImage img {
    display: block;
    width: 100%;
    padding: 10px 0 5px 0;
}

/* Portal */
table {
    margin-top: 5px;
    width: 100vw;
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid var(--main-color);
}

th {
    font-weight: bold;
    font-size: 12px;
    background-color: var(--main-color);
    color: white;
    padding: 5px;
    text-align: center;
}

tr {
    vertical-align: top;
    border-bottom: 1px solid var(--main-color);
}

tr:nth-child(even) {
    background-color: var(--table-row-color);
}

td {
    font-size: 10px;
    padding: 0.7vw;
    border: 1px solid var(--main-color);
}

td.metaDataKey {
    width: 30%;
}

td.metaDataVal {
    font-weight: bold;
}

.download-button {
    border: 1px solid var(--main-color);
    text-align: center;
    display: block;
    margin: 0 auto;
}

.download-button img {
    height: 7vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

/* Reusable mobile-only top bar with a back button (about / legal / privacy). */
.mobile-top-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px;
    padding: 8px;
    background-color: var(--table-row-color);
    border: 1px solid #e2e6ec;
    border-radius: 10px;
}

.mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    background-color: white;
    color: var(--main-color);
    cursor: pointer;
}

.mobile-back svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Information Page */
.information-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 24px;
}

.information-page-container p {
    font-size: 1.5em;
}

.information-page-centered-div {
    text-align: center;
    max-width: 480px;
    padding: 32px 24px;
    background: white;
    border: 1px solid #e2e6ec;
    border-radius: 12px;
}

.information-page-centered-div h1 {
    color: var(--main-color);
    font-size: 22px;
    font-weight: 700;
    margin: 18px 0 0 0;
}

.information-page-centered-div h2 {
    color: #6c757d;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

.information-page-logo {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.information-page-icon {
    width: 3em;
    height: auto;
}

/* Markdown-rendered info page (parse-down.html.twig) */
.markdown-page {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #1a1a1a;
}

.markdown-page h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 12px 0;
}

.markdown-page h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--main-color);
    margin: 20px 0 8px 0;
}

.markdown-page h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color);
    margin: 16px 0 6px 0;
}

.markdown-page p {
    margin: 0 0 12px 0;
}

.markdown-page a {
    color: var(--main-color);
    text-decoration: none;
}

.markdown-page a:hover {
    text-decoration: underline;
}

.markdown-page ul,
.markdown-page ol {
    margin: 0 0 12px 20px;
    padding: 0;
}

.markdown-page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 16px 0;
}

.markdown-page tr {
    border: 0;
}

.markdown-page th,
.markdown-page td {
    border: 0;
    border-top: 1px solid #eef0f4;
    padding: 8px 12px;
    text-align: left;
    font-size: 13px;
}

.markdown-page tr:first-child th,
.markdown-page tr:first-child td {
    border-top: 0;
}

.markdown-page th {
    background: #f2f2f2;
    color: var(--main-color);
    font-weight: 700;
}

/* 12px inset standalone (mobile); flush when embedded in the desktop shell iframe. */
.about-page-container {
    margin: 0;
    padding: 0 12px;
}

.pidb-desktop .about-page-container {
    padding: 0;
}

.about-page-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 8px 0;
}

.about-page-container tr {
    border: 0;
}

.about-page-container td {
    border: 0;
    border-top: 1px solid #eef0f4;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
}

.about-page-container tr:first-child td {
    border-top: 0;
}

.about-page-container td:nth-child(odd) {
    text-align: right;
    font-weight: 600;
    width: 50%;
    color: var(--main-color);
}

/* Portrait lock, landscape half.
 *
 * The manifest asks for a portrait orientation (PwaController::manifest) and app.js locks it
 * at runtime where the API allows it, but WebKit implements neither, so an installed app on
 * iPhone can still be turned sideways. This overlay makes that state harmless: it is the only
 * mechanism that works there.
 *
 * The two guards keep it off everything that is not a phone. max-height, because a landscape
 * phone is short (<= 500px) while a landscape tablet or laptop is not, and :not(.pidb-desktop),
 * because the desktop shell's iframes inherit the top-level display mode and would otherwise
 * match inside a narrow installed window. */
.rotate-hint {
    display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
    .pidb-standalone:not(.pidb-desktop) .rotate-hint {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 3;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        background: #f4f4ee;
        text-align: center;
    }
}

.rotate-hint-icon {
    flex: none;
    width: 44px;
    height: 44px;
    fill: var(--main-color);
    animation: rotate-hint-turn 2.4s ease-in-out infinite;
}

.rotate-hint p {
    margin: 0;
    font-size: 16px;
    color: var(--main-color);
}

@keyframes rotate-hint-turn {
    0%, 25% { transform: rotate(90deg); }
    65%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rotate-hint-icon {
        animation: none;
    }
}