html {
    height: 100%;
}
body {
    height: 100%;
    min-height: 100%;
    padding-bottom: 60px;
    background-color: #000;
    color: #CCC;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
}
td,th {
    color: #CCC;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
}
body {
    background-image: url("/images/canon_eos_r3.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
}




.hidden {
    display: none;
}

.form-control[readonly] {
    background-color: #e9ecef; /* Bootstrap’s default for readonly */
    color: #6c757d; /* Muted text */
    opacity: 1;     /* Prevent it from appearing disabled (which reduces contrast) */
    cursor: not-allowed;
}

.ui-dialog .ui-dialog-buttonpane {
    padding: 0.5em 1em;
    border-top: 1px solid #dddddd;
}

.ui-dialog .ui-dialog-titlebar {
    background: #f8f9fa;
    color: #333;
    border: none;
}

.ui-dialog .ui-dialog-titlebar-close {
    float: right;
    margin: -0.5em -0.5em;
}

.green {
    color: #00cc00;
}
.red {
    color: #cc0000;
}

.square-block {
    width: 100%;
    padding-top: 100%;
    position: relative;
}

.square-block img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* To preserve the ratio and ensure complete coverage */
}

.caption {
    height: 59px;
    overflow: hidden;
}

.number {
    text-align: right;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cart-pulse {
    animation: pulse 0.5s ease;
}

/* --- Mobile layout (below Bootstrap lg / 992px) ---
   Desktop keeps the original fixed-width sliced-image layout untouched.
   On small screens the .mobile-nav navbar (in header.php) replaces the
   sliced-image navigation and the page content flows full-width. */
@media (max-width: 991.98px) {
    /* Hide the sliced-image navigation rows. The last table row holds the
       actual page content (alerts + Bootstrap .container) and stays visible. */
    #Tabel_01 > tbody > tr:not(:last-child) {
        display: none !important;
    }

    /* Collapse the fixed-width table so the content cell fills the screen */
    #Tabel_01,
    #Tabel_01 > tbody,
    #Tabel_01 > tbody > tr,
    #Tabel_01 > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Drop the leftover decorative spacer image beside the content */
    #Tabel_01 > tbody > tr:last-child > td:first-child {
        display: none !important;
    }

    /* Keep the decorative camera background from covering content */
    body {
        background-image: none;
    }

    /* Pagination: with many pages the row is too wide for a phone.
       Let it wrap onto multiple lines and shrink the buttons a little. */
    .pagination {
        flex-wrap: wrap;
    }
    .pagination .page-link {
        padding: 0.35rem 0.6rem;
        font-size: 13px;
    }

    /* Photo preview: the "Downloaden Hi-Res" group is absolutely centred on
       desktop, which overlaps the Vorige/Volgende buttons on a phone.
       Keep Vorige/Volgende on the first line and drop the download/cart
       actions onto their own line below them. */
    .preview-nav {
        flex-wrap: wrap;
    }
    .preview-prev { order: 1; }
    .preview-next { order: 2; }
    .preview-actions {
        order: 3;
        position: static !important;
        transform: none !important;
        width: 100%;
        margin-top: 0.75rem;
    }
}