/* Main CSS */
            @font-face {
            font-family: 'Title';
            src: url('../fonts/Title.woff') format('woff');
            src: url('../fonts/Title.woff2') format('woff2');
            font-style: normal;
            font-weight: normal;
            }
        
            @font-face {
            font-family: 'Body';
            src: url('../fonts/Body.woff') format('woff');
            src: url('../fonts/Body.woff2') format('woff2');
            font-style: normal;
            font-weight: normal;
            }

            @font-face {
            font-family: 'Header';
            src: url('../fonts/Header.woff') format('woff');
            src: url('../fonts/Header.woff2') format('woff2');
            font-style: normal;
            font-weight: normal;
            }

            .overlay {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            backdrop-filter: blur(10px);
            overflow-x: auto;
            transition: 0.5s;
            font-family: 'Header';
            }

            .overlay-content {
            position: relative;
            top: 10%;
            width: 100%;
            text-align: center;
            margin-top: 30px;
            line-height: 2;
            font-family: 'Header';
            }

            .overlay a {
            text-align: center;
            text-decoration: none;
            font-size: 36px;
            color: #B89F8B;
            display: block;
            transition: 0.3s;
            font-family: 'Header';
            }

            .overlay a:hover, .overlay a:focus {
            color: #B89F8B;
            text-decoration: underline;
            font-family: 'Header';
            }

            .overlay .closebtn {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 60px;
            font-family: 'Header';
            }

            .menubutton {
            right: 0;
            font-size:46px;
            cursor:pointer; 
            position: fixed;   
            z-index: 1;
            }

            @media screen and (max-height: 450px) {
            .overlay a {font-size: 20px}
            .overlay,
            .closebtn {
            font-size: 40px;
            top: 10px;
            right: 10px;
            }
            }

            .content {
            margin-left:auto;
            margin-right:auto;
            max-width:1080px;
            text-align: left;
            }
            .cover-content-center {
            margin-left:auto;
            margin-right:auto;
            max-width:1080px;
            text-align: center;
            letter-spacing: 5px;
            }

            .content-center {
            margin-left:auto;
            margin-right:auto;
            max-width:980px;
            text-align: center;
            }
            
            .content-right {
            margin-left:auto;
            margin-right:auto;
            max-width:980px;
            text-align: right;
            }

            .display-container {
            position:relative;
            text-align: center;
            height: auto;
            }
            
            .padding-16 {
            padding-top:16px;
            padding-bottom:16px;
            }

            .padding-32 {
            padding-top:32px;
            padding-bottom:32px;
            }

            .center, .placeholder {
            text-align:center;
            }

            .table {
            width: 100%;
            font-size: 4vmin;
            font-weight: 200;
            color: #000000;
            text-align: left;
            display: inline-block;
            padding: 0px 0px 0px 0px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 2px;
            font-family: 'Body';
            }
            
            a {
            color: black;
            }

            h1 {
            font-size: 13vmin;
            font-weight: 200;
            color: #000000;
            text-align: center;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Title';
            }

            h2 {
            font-size: 5vmin;
            font-weight: 200;
            color: #000000;
            text-align: center;
            display: block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 10px;
            font-family: 'Body';
            }
            
            h3 {
            font-size: 7vmin;
            font-weight: 200;
            color: #B89F8B;
            text-align: left;
            display: block;
            padding: 0px 0px 0px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Header';
            }

            .h3c {
            font-size: 12vmin;
            font-weight: 200;
            color: #000000;
            text-align: center;
            display: inline-block;
            padding: 0px 0px 0px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Header';
            }
            
            .h3csmall {
            font-size: 7vmin;
            font-weight: 200;
            color: #B89F8B;
            text-align: center;
            display: inline-block;
            padding: 0px 0px 0px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Header';
            }

            h4 {
            font-size: 4vmin;
            font-weight: 300;
            color: #000000;
            text-align: left;
            display: block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Body';
            }

            .h4a {
            font-size: 4vmin;
            font-weight: 200;
            color: #000000;
            text-align: center;
            display: block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Body';
            }
            
            .h4c {
            font-size: 6vmin;
            font-weight: 300;
            color: #000000;
            text-align: center;
            display: inline-block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Body';
            }
            
             .h4cb {
            font-size: 6vmin;
            font-weight: 600;
            color: #000000;
            text-align: center;
            display: inline-block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0.2px;
            font-family: 'Body';
            }    
            
            p {
            font-size: 3vmin;
            font-weight: 100;
            color: #000000;
            text-align: left;
            display: inline-block;
            padding: 0px 10px 0px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 2px;
            font-family: 'Body';
            }
            
            .plarge {
            font-size: 3vmin;
            font-weight: 200;
            color: #000000;
            text-align: center;
            display: inline-block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 10px;
            font-family: 'Body';
            }

            .psmall {
            font-size: 2.4vmin;
            font-weight: 200;
            color: #000000;
            text-align: center;
            display: inline-block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0px;
            font-family: 'Body';
            }

            .psmallright {
            font-size: 2vmin;
            font-weight: 200;
            color: #000000;
            text-align: right;
            display: inline-block;
            padding: 5px 10px 5px 10px;
            margin: 0px;
            margin-bottom: 1px;
            letter-spacing: 0px;
            font-family: 'Body';
            line-height: 1;
            }
            
            body,
            html {
                height: 100%;
                font-family: 'Body'
            }

            p {
                line-height: 2;
            }
            
            
            /* ----------------------------
   General body styling
---------------------------- */

/* Gallery thumbnails - all same size */
#gallery img {
    margin: 5px;
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 150px;       /* fixed width */
    height: 150px;      /* fixed height */
    object-fit: cover;  /* maintain aspect ratio, crop if needed */
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}
#gallery img:hover {
    transform: scale(1.05);
    border-color: #00ccff;
}

/* ----------------------------
   Upload preview thumbnails
---------------------------- */
#preview {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.preview-item {
    position: relative;
    margin: 5px;
}
.preview-item img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 5px;
    border: 2px solid #ccc;
}
.remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255,0,0,0.8);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 22px;
    height: 22px;
    font-size: 16px;
    line-height: 18px;
}

/* ----------------------------
   Lightbox modal
---------------------------- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    padding-top: 40px;
    overflow: auto;
    text-align: center;
}
.lightbox-content {
    max-width: 90%;
    max-height: 80vh;
    border: 3px solid white;
    border-radius: 5px;
    margin: auto;
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.lightbox .close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    color: white;
    cursor: pointer;
}
.lightbox .prev, .lightbox .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 35px;
    color: white;
    padding: 10px;
    user-select: none;
}
.lightbox .prev { left: 5px; }
.lightbox .next { right: 5px; }
.lightbox-thumb-highlight {
    border: 3px solid #00ffcc !important;
    opacity: 0.8;
}

/* ----------------------------
   Responsive adjustments
---------------------------- */
@media only screen and (max-width: 600px) {
    #gallery img { max-width: 45%; }
    .preview-item img { max-width: 45vw; max-height: 45vw; }
    .lightbox .prev, .lightbox .next { font-size: 25px; padding: 8px; }
    .lightbox .close { font-size: 30px; top: 10px; right: 15px; }
}
    #imageInput {
      display: none;
    }

    /* Label acts as the button */
    .choose-btn {
      background: url('https://www.italy.zoeandjohnwedding.co.uk/images/Select_Photo_Button.png') no-repeat center center;
      background-size: contain;
      width: 300px;
      height: 100px;
      cursor: pointer;
      display: inline-block;
    }

    /* Responsive scaling */
    @media (max-width: 768px) {
      .choose-btn {
        width: 220px;
        height: 75px;
      }
    }

    @media (max-width: 480px) {
      .choose-btn {
        width: 160px;
        height: 55px;
      }
    }

/* Button image as submit */
    .upload-btn {
      background: url('https://www.italy.zoeandjohnwedding.co.uk/images/Upload_Button.png') no-repeat center center;
      background-size: contain; /* makes it scale without stretching */
      width: 200px;   /* base width */
      height: 50px;  /* base height */
      border: none;
      cursor: pointer;
    }

    /* Make it scale down on smaller screens */
    @media (max-width: 768px) {
      .upload-btn {
        width: 1100px;
        height: 32.5px;
      }
    }

    @media (max-width: 480px) {
      .upload-btn {
        width: 80px;
        height: 27.5px;
      }
    }
    
    
    /* Modal overlay */
    .modal {
      display: none; /* Hidden by default */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      justify-content: center;
      align-items: center;
      padding: 10px; /* small padding for mobile */
      box-sizing: border-box;
    }

    /* Modal content */
    .modal-content {
      position: relative;
      width: 90%;
      max-width: 800px; /* optional maximum width for large screens */
      height: 90%;
      background: #fff;
      padding: 5px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    /* Close button */
    .close {
      align-self: flex-end;
      font-size: 28px;
      cursor: pointer;
      color: white;
      margin-bottom: 5px;
    }

    /* PDF iframe fills modal */
    .modal-content iframe {
      width: 100%;
      flex-grow: 1; /* fill remaining space */
      border: none;
    }

    /* Smaller screens adjustments */
    @media (max-width: 600px) {
      .modal-content {
        width: 100%;
        height: 100%;
        padding: 5px;
      }
      .close {
        font-size: 24px;
      }
    }
    
    .imgcenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-top:0px;
        padding-bottom:0px;
    }
    
    .imgcentera {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-top:16px;
        padding-bottom:16px;
    }