/* ==========================================================
   Indian Galleries - Global Watermark System
   File: watermark.css
   Purpose:
   Adds a reusable watermark overlay on all website images.
   This file is completely independent and does not modify
   any existing styles.
   ========================================================== */

/* ---------- Load Brand Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

/* ---------- Watermark Variables ---------- */
:root{
    --wm-image: none;
    --wm-size: 260px 180px;
    --wm-opacity: .18;
    --wm-zindex: 20;
}
/* ==========================================================
   Gallery Containers
   ========================================================== */

.gallery-image,
.gallery-card {
    position: relative;
    overflow: hidden;
}

/* ==========================================================
   Popup Container + Watermark ON TOP of image
   ========================================================== */

.image-popup {
    display: none;
    position: fixed;
    z-index: 1050;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Watermark overlay for popup - ON TOP of image */
.image-popup::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--wm-image);
    background-repeat: repeat;
    background-size: var(--wm-size);
    background-position: center;
    pointer-events: none;
    z-index: 30;
    opacity: 0.75;
  }
/* Popup Image - Behind watermark */
#popupImage {
    position: relative;
    z-index: 25;           
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    border-radius: 8px;
    cursor: zoom-out;
}

/* wm-ignore support */
.image-popup.wm-ignore::after {
    display: none !important;
}

/* ==========================================================
   Pagination Modal Support (imageModal)
   ========================================================== */

.image-modal {
    position: fixed; 
    overflow: hidden;
}

/* Watermark overlay for pagination modal - ON TOP */
.image-modal::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--wm-image);
    background-repeat: repeat;
    background-size: var(--wm-size);
    background-position: center;
    pointer-events: none;
    z-index: 30;
    opacity: 0.75;
}

/* Modal Image - Behind watermark */
#modalImage {
    position: relative;
    z-index: 25;
    max-width: 90%;
    max-height: 70%;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    cursor: zoom-out;
}

/* wm-ignore support for modal */
.image-modal.wm-ignore::after {
    display: none !important;
}
/* ==========================================================
   Watermark Overlay
   (Gallery Only)
   ========================================================== */

.gallery-image::after,
.gallery-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--wm-image);
    background-repeat: repeat;
    background-size: var(--wm-size);
    background-position: center;
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
}
/* ==========================================================
   Ignore Watermark
   ========================================================== */
.wm-ignore::after,
.no-watermark::after {
    display: none !important;
}
.no-watermark::after,
.wm-ignore::after{
    display:none !important;
}
/* ==========================================================
   Mobile
   ========================================================== */
@media(max-width:768px){
    :root{
        --wm-size:180px 130px;
    }
}
@media(max-width:480px){
    :root{
        --wm-size:140px 100px;
    }
}