/* ======================================================
   Daily Multilingual Posters – Frontend Styles
   GRID SAFE (Divi 5 Compatible)
====================================================== */

/* ===============================
   Shortcode Wrapper
================================ */
.dmp-shortcode-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

/* 🔥 BREAK DIVI FLEX CONTEXT (CRITICAL) */
.dmp-flex-break {
    display: block !important;
    width: 100%;
}

/* ===============================
   Day Group Title
================================ */
.dmp-day-title {
    margin: 24px 0 12px;
    padding-left: 6px;
    font-size: 18px;
    font-weight: 600;
    border-left: 4px solid #0073aa;
}

/* ===============================
   GRID LAYOUT (FORCE GRID)
================================ */
.dmp-day-grid {
    display: grid !important; /* 🔥 FORCE GRID */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 32px;
}

/* ===============================
   Grid Item
================================ */
.dmp-poster-item {
    display: block; /* ❌ DO NOT USE FLEX HERE */
    width: 100%;
    box-sizing: border-box;
}

/* ===============================
   Image Box
================================ */
.dmp-image-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.dmp-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ===============================
   Hover Overlay
================================ */
.dmp-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dmp-image-box:hover .dmp-hover,
.dmp-image-box.active .dmp-hover {
    opacity: 1;
}

.dmp-hover a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

/* ===============================
   Caption (ALWAYS BELOW IMAGE)
================================ */
.dmp-caption {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.dmp-date { color: #666; }
.dmp-language { text-transform: capitalize; }

/* ===============================
   Lightbox (PORTAL STYLE)
================================ */
.dmp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 20px;
}

.dmp-lightbox-content {
    text-align: center;
}

.dmp-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    object-fit: contain;
}

.dmp-lightbox-caption {
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
}

/* ===============================
   Lightbox Controls
================================ */
.dmp-lightbox-close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}

.dmp-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.dmp-prev { left: 20px; }
.dmp-next { right: 20px; }

/* ===============================
   No Poster Message
================================ */
.dmp-no-poster {
    font-family: inherit;
    font-size: 24px;
    font-weight: 600;
    color: #666;
    text-align: center;
    margin: 40px 0;
}

/* =========================================
   SOCIAL ICON BRAND COLORS (FINAL)
========================================= */

/* Base icon appearance */
.dmp-hover a {
    color: #ffffff;
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

/* WhatsApp */
.dmp-hover a.dmp-whatsapp {
    background-color: #25D366;
}
.dmp-hover a.dmp-whatsapp:hover {
    background-color: #1ebe5d;
}

/* Facebook */
.dmp-hover a.dmp-facebook {
    background-color: #1877F2;
}
.dmp-hover a.dmp-facebook:hover {
    background-color: #166fe5;
}

/* X (Twitter) */
.dmp-hover a.dmp-x {
    background-color: #000000;
}
.dmp-hover a.dmp-x:hover {
    background-color: #222222;
}

/* Instagram (official gradient) */
.dmp-hover a.dmp-instagram {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285AEB 90%
    );
}

/* Download */
.dmp-hover a.dmp-download {
    background-color: #ff9800;
}
.dmp-hover a.dmp-download:hover {
    background-color: #fb8c00;
}

/* Hover animation */
.dmp-hover a:hover {
    transform: scale(1.12);
}

/* =========================================
   SVG DOWNLOAD ICON (PROFESSIONAL)
========================================= */

/* Hide existing emoji/text */
.dmp-hover a.dmp-download {
    font-size: 0;                 /* hide ⬇ */
    background-color: #ff9800;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    position: relative;
}

/* SVG icon using mask (best practice) */
.dmp-hover a.dmp-download::before {
    content: "";
    width: 22px;
    height: 22px;

    background-color: #ffffff;

    /* SVG DOWNLOAD ICON */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 16l4-5h-3V4h-2v7H8l4 5zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 16l4-5h-3V4h-2v7H8l4 5zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hover animation */
.dmp-hover a.dmp-download:hover {
    background-color: #fb8c00;
    transform: scale(1.18);
}

/* =========================================
   SVG ZOOM / OPEN IMAGE ICON
========================================= */

/* Hide emoji/text */
.dmp-hover a.dmp-open-image {
    font-size: 0;                 /* hide 🔍 */
    background-color: #ffffff;    /* neutral zoom color */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

/* SVG magnifier icon */
.dmp-hover a.dmp-open-image::before {
    content: "";
    width: 22px;
    height: 22px;

    background-color: #000000;

    /* SVG ZOOM ICON */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.49 21.49 20l-5.99-6zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.49 21.49 20l-5.99-6zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hover effect */
.dmp-hover a.dmp-open-image:hover {
    background-color: #e0e0e0;
    transform: scale(1.18);
}

/* =========================================
   SVG SOCIAL ICONS – BASE
========================================= */

.dmp-hover a.dmp-share {
    font-size: 0;               /* hide text */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

/* SVG mask base */
.dmp-hover a.dmp-share::before {
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

.dmp-hover a.dmp-whatsapp {
    background-color: #25D366;
}

.dmp-hover a.dmp-whatsapp::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M16 2C8.268 2 2 8.268 2 16c0 2.803.732 5.438 2.012 7.732L2 30l6.42-1.986A13.936 13.936 0 0016 30c7.732 0 14-6.268 14-14S23.732 2 16 2zm0 25.4c-2.235 0-4.333-.655-6.105-1.777l-.438-.272-3.808 1.178 1.247-3.71-.285-.454A11.38 11.38 0 014.6 16C4.6 9.63 9.63 4.6 16 4.6S27.4 9.63 27.4 16 22.37 27.4 16 27.4zm6.176-8.824c-.338-.17-2.003-.987-2.312-1.1-.309-.113-.535-.17-.76.17-.225.338-.873 1.1-1.072 1.324-.197.225-.395.254-.732.085-.338-.17-1.425-.524-2.713-1.67-1.003-.895-1.68-2-1.876-2.338-.197-.338-.021-.521.148-.69.152-.151.338-.395.507-.592.17-.197.225-.338.338-.563.113-.225.057-.423-.028-.592-.085-.17-.76-1.83-1.042-2.51-.274-.658-.553-.57-.76-.58l-.648-.012c-.225 0-.592.085-.902.423-.31.338-1.185 1.158-1.185 2.824 0 1.666 1.214 3.277 1.384 3.503.17.225 2.39 3.65 5.79 5.12.81.35 1.442.56 1.935.717.813.258 1.553.222 2.136.135.651-.097 2.003-.817 2.286-1.606.281-.789.281-1.466.197-1.606-.085-.14-.309-.225-.648-.395z'/%3E%3C/svg%3E");
    mask-image: -webkit-mask-image;
}

.dmp-hover a.dmp-facebook {
    background-color: #1877F2;
}

.dmp-hover a.dmp-facebook::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 12a10 10 0 10-11.5 9.9v-7H8v-3h2.5V9.3c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.7-1.6 1.5V12H16l-.5 3h-2.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
    mask-image: -webkit-mask-image;
}

.dmp-hover a.dmp-x {
    background-color: #000000;
}

.dmp-hover a.dmp-x::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.69l-5.24-6.84-5.99 6.84H1.59l7.73-8.84L1.254 2.25h6.86l4.73 6.23 5.4-6.23z'/%3E%3C/svg%3E");
    mask-image: -webkit-mask-image;
}

.dmp-hover a.dmp-instagram {
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%,
        #fd5949 45%, #d6249f 60%,
        #285AEB 90%);
}

.dmp-hover a.dmp-instagram::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm10 2c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3h10zm-5 3a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm4.5-.9a1.1 1.1 0 11-2.2 0 1.1 1.1 0 012.2 0z'/%3E%3C/svg%3E");
    mask-image: -webkit-mask-image;
}

.dmp-hover a.dmp-share:hover {
    transform: scale(1.15);
}

/* ===============================
   Lightbox Date Badge
================================ */

.dmp-lightbox-date {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999999;

    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;

    padding: 6px 14px;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;

    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* =================================================
   MONTHLY VIDEOS GRID
================================================= */

.dmp-video-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 24px;

    margin: 30px 0;
}

.dmp-video-card {

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.dmp-video-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.08);
}

.dmp-video-card a {

    text-decoration: none;
}

.dmp-video-card img {

    width: 100%;

    display: block;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}

.dmp-video-card p {

    margin: 0;

    padding: 18px;

    font-size: 15px;

    font-weight: 600;

    text-align: center;

    color: #222;

    line-height: 1.6;
}

/* =================================================
   LARGE DESKTOP
================================================= */

@media (min-width: 1600px) {

    .dmp-video-grid {

        grid-template-columns:
            repeat(5, 1fr);
    }
}

/* =================================================
   DESKTOP
================================================= */

@media (min-width: 1200px) and (max-width: 1599px) {

    .dmp-video-grid {

        grid-template-columns:
            repeat(4, 1fr);
    }
}

/* =================================================
   TABLET
================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .dmp-video-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }
}

/* =================================================
   MOBILE
================================================= */

@media (max-width: 767px) {

    .dmp-video-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 16px;
    }

    .dmp-video-card p {

        font-size: 14px;

        padding: 14px;
    }
}

/* =================================================
   VIDEO POPUP FIX
================================================= */

#dmp-video-modal {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    z-index: 2147483647 !important;

    display: none;

    align-items: center;

    justify-content: center;
}

#dmp-video-modal iframe {

    width: 100% !important;

    height: min(80vh, 800px) !important;

    border: none;

    border-radius: 8px;

    background: #000;

    display: block;
}

/* =================================================
   DAILY POSTERS GRID
================================================= */

.dmp-day-grid {

    display:grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:20px;
}

/* =================================================
   LARGE TABLET
================================================= */

@media (max-width:1200px) {

    .dmp-day-grid {

        grid-template-columns:
            repeat(4,1fr);
    }
}

/* =================================================
   TABLET
================================================= */

@media (max-width:900px) {

    .dmp-day-grid {

        grid-template-columns:
            repeat(3,1fr);
    }
}

/* =================================================
   MOBILE
================================================= */

@media only screen and (max-width: 767px) {

    .dmp-day-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2, 1fr) !important;

        gap: 14px !important;
    }

    .dmp-day-grid > .dmp-poster-item {

        width: auto !important;

        max-width: none !important;

        min-width: 0 !important;

        flex: unset !important;

        margin: 0 !important;
    }

    .dmp-image-box,
    .dmp-open-image,
    .dmp-image {

        width: 100% !important;

        display: block !important;
    }
}

/* =================================================
   IMAGE STYLE
================================================= */

.dmp-image {

    width:100%;

    height:auto;

    display:block;

    border-radius:8px;
}

.dmp-open-image {

    display:block;

    text-decoration:none;
}

/* =================================================
   IMAGE POPUP
================================================= */

#dmp-image-modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.94);

    z-index:2147483647;

    align-items:center;

    justify-content:center;

    padding:20px;

    box-sizing:border-box;
}

#dmp-image-popup {

    max-width:95vw;

    max-height:92vh;

    border-radius:8px;

    display:block;
}

#dmp-image-close {

    position:absolute;

    top:20px;

    right:20px;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#000;

    font-size:24px;

    cursor:pointer;

    z-index:10;
}