html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* Slightly darker white */
    color: black;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: relative;
    top: 0;
    background-color: #f9f9f9; /* Match the page background */
    border-bottom: none;
}

header a img {
    width: 24px;
    height: 24px;
}

header .back-arrow {
    position: absolute;
    top: 10px;
    left: 10px;
}

header .minus-circle {
    position: absolute;
    top: 10px;
    right: 10px;
}

header .center-image {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
}

header .header-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%); /* Adjusted further down */
    font-weight: bold;
    font-size: 14px;

}

main {
    padding: 20px;
    flex: 1;
}

main .center-image {
    display: block;
    margin: 30px auto 0; /* Move upward */
    height: 115px; /* Increased size */
    width: auto; /* Maintain aspect ratio */
}

footer {
    position: sticky;
    bottom: 0;
    background: url('edoklady_footer.png') no-repeat center center;
    background-size: cover;
    height: 70px; /* Reduced size */
    color: transparent; /* Hide text */
    border-top: none;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    header a {
        margin-bottom: 10px;
    }

    main {
        padding: 10px;
    }

    footer {
        padding: 5px;
        font-size: 14px;
    }
}

.update-message {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* Add spacing between the icon and text */
    margin-top: 20px;
    padding: 3px 10px; /* Narrower height */
    background-color: #e8f5e9; /* Lighter green background */
    border: 1px solid #81c784; /* Softer green border */
    color: #388e3c; /* Lighter green text */
    font-weight: bold;
    font-size: 12px; /* Smaller text */
    border-radius: 20px; /* Rounded corners */
    width: fit-content; /* Match the content width */
    max-width: 80%; /* Slightly longer than the image */
    margin: 10px auto 0; /* Move upward */
}

.update-message .checkmark-icon {
    height: 12px; /* Match the text size */
    width: auto; /* Maintain aspect ratio */
}

.id-photo {
    display: block;
    margin: 20px auto 0; /* Centered below the green text */
    max-width: 30%; /* Slightly increase the size */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners */
}

.id-photo-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Ensure the expand icon stays within the photo */
}

.expand-icon {
    position: absolute;
    bottom: 5%; /* Adjusted to be inside the photo */
    right: 5%; /* Adjusted to be inside the photo */
    width: 20px; /* Smaller size */
    height: 20px;
    margin-right: 117px;
    border-radius: 2.5px;
}

.document-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0; /* Remove gap */
    margin: 20px auto 0;
    padding: 10px 20px; /* Adjust padding to bring edges closer */
    background-color: white;
    border: none; /* Remove border */
    border-radius: 10px;
    max-width: 100%; /* Extend closer to page edges */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 14px; /* Make text slightly smaller */
    position: relative;
}

.document-info .doc-label {
    font-weight: normal; /* Remove bold */
    color: #888; /* Set to gray */
}

.document-info .doc-number {
    font-weight: normal; /* Remove bold */
    color: #000; /* Keep black */
    position: relative;
    right: -2px; /* Move text closer to the icon */
    margin-right: -140px; /* Force overlap with the icon */
}

.document-info .copy-icon {
    width: 20px; /* Slightly larger size */
    height: 20px;
    margin-left: -2px; /* Force overlap with the text */
    position: relative;
    left: -2px; /* Move icon closer to the text */
}

.document-details {
    margin-top: 20px;
    padding: 15px; /* Increase padding for more space */
    padding-bottom: 20px; /* Ensure equal spacing at the bottom */
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px; /* Slightly smaller text */
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0; /* Add more space between rows */
    border-bottom: none; /* Remove lines */
    margin-bottom: 15px; /* Slightly reduce spacing between rows */
}

/* ensure we can absolutely position the dash if needed */
.detail-row {
    position: relative;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: normal;
    color: #888;
    /* make inline-block so we can position relative to it if needed */
    display: inline-block;
    position: relative;
}

.detail-value {
    font-weight: normal;
    color: #000;
}

.detail-value-below {
    display: block; /* Move value below the label */
    margin-top: 5px; /* Add spacing below the label */
}

/* ------------------------
   DASH UNDER FIRST LETTER
   ------------------------
   Two supported approaches below:
   1) Recommended (pure CSS, precise): wrap the first letter in your HTML with a span
        <span class="detail-label"><span class="first-letter">Z</span>měna údajů</span>
      Then the CSS below will draw the dash/line exactly under that first letter.

   2) Fallback (no HTML change): keep your existing HTML where dash is a sibling
        <div class="detail-value detail-value-below">-</div>
      The fallback centers the dash under the label block (not pixel-perfect under the glyph).
      If you need perfect centering for varying fonts/sizes, use the JS snippet from the description
      (I can provide it on request).
   ------------------------ */

/* 1) Pure CSS precise approach (recommended)
   - add <span class="first-letter"> around the first letter in your HTML
   - no JS required
*/
.detail-label .first-letter {
    display: inline-block;
    position: relative;
    /* optional tweak to match font weight/size if needed */
}

/* draw a smaller, lower line (pomlčka) directly under the first letter */
.detail-label .first-letter::after {
    content: "";               /* change to "-" if you prefer the actual dash glyph */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);     /* increased vertical distance (posun dolů) */
    width: 0.45em;              /* menší délka pomlčky */
    height: 1px;                /* tenčí pomlčka */
    background: #000;           /* barva pomlčky */
    border-radius: 1px;
    display: block;
}

/* If you prefer using the actual dash glyph (character "-"), uncomment below and comment the rules above
.detail-label .first-letter::after {
    content: "-";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);
    font-size: 14px;
    line-height: 1;
    color: #000;
}
*/

/* 2) Fallback when you keep the dash as separate .detail-value-below element
   - Add class .align-dash to the .detail-row to enable this behavior.
   - This will place the dash under the START (left edge) of the label; if you want it centered
     under the whole label, change `left: 50%` + transform below.
*/
.detail-row.align-dash .detail-value-below {
    position: absolute;
    top: calc(100% + 10px); /* distance below the label, increased to match new spacing */
    left: 0;                /* aligns with label's left edge */
    transform: translateX(0);
    margin: 0;
    /* ensure the dash doesn't take full width */
    width: auto;
    padding: 0;
    /* keep text centered for a single "-" glyph */
    text-align: center;
    background: transparent;
}

/* If you'd rather have the fallback centered under the label block (approx center), use this:
.detail-row.align-dash .detail-value-below {
    left: 50%;
    transform: translateX(-50%);
}
*/

/* small responsive tweak: if text scales down, reduce dash size a bit and keep it slightly lower */
@media (max-width: 400px) {
    .detail-label .first-letter::after {
        width: 0.4em;
        top: calc(100% + 12px);
    }
    .detail-row.align-dash .detail-value-below {
        top: calc(100% + 12px);
    }
}