/* =========================
   Promo Modal (Bigger + Darker backdrop + Frame + CTA)
   ========================= */

/* 1) Make the backdrop MUCH darker (Bootstrap creates .modal-backdrop dynamically) */
.modal-backdrop.in {
    opacity: 0.6; /* default is ~0.5 */
}

/* Optional: make the dim layer slightly more "black" than gray */
.modal-backdrop {
    background-color: #000;
}

/* 2) Make modal larger and centered */
.cozzi-promo-modal .modal-dialog {
    width: 720px;        /* bigger on desktop */
    max-width: 94vw;     /* safe on smaller screens */
    margin: 0 auto;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Keep modal content transparent so the frame is the visible box */
.cozzi-promo-modal .modal-content {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* 3) Frame container */
.cozzi-promo-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;

    /* "Frame" effect */
    padding: 14px;
    background: rgba(15, 15, 15, 0.92); /* inner frame background */
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
}

/* Close button stays above everything */
/* Close button (X) - bigger, gold, catchy */
.cozzi-promo-modal .cozzi-promo-close {
    position: absolute;
    top: 18px;                 /* ✅ better margin from top */
    right: 18px;               /* ✅ better margin from right */
    z-index: 25;

    width: 54px;               /* ✅ bigger clickable area */
    height: 54px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.55); /* ✅ badge background */
    border: 1px solid rgba(202, 162, 76, 0.55);

    opacity: 1;
    cursor: pointer;
    outline: none;

    box-shadow:
      0 14px 40px rgba(0,0,0,0.45),
      0 0 0 6px rgba(202,162,76,0.14); /* subtle glow ring */

    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

/* Make the actual "X" triple-size + gold */
.cozzi-promo-modal .cozzi-promo-close span {
    font-size: 44px;           /* ✅ roughly 3x default */
    line-height: 1;
    font-weight: 900;
    color: var(--cozzicotton-gold);            /* ✅ gold */
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    transform: translateY(-1px); /* visually centered */
}

.cozzi-promo-modal .cozzi-promo-close:hover,
.cozzi-promo-modal .cozzi-promo-close:focus {
    transform: scale(1.06);
    filter: brightness(1.05);
    box-shadow:
      0 18px 55px rgba(0,0,0,0.55),
      0 0 0 7px rgba(202,162,76,0.22);
}

.cozzi-promo-modal .cozzi-promo-close:active {
    transform: scale(0.98);
    filter: brightness(0.98);
}


/* GIF wrapper */
.cozzi-promo-media-wrap {
    border-radius: 16px;
    overflow: hidden;
    background: #111;
}

/* Make GIF bigger while keeping full image visible (no cropping) */
.cozzi-promo-media {
    display: block;
    width: 100%;
    height: auto;
    max-height: 82vh;    /* allow big display */
    object-fit: contain;
    background: #111;
}

/* CTA overlay button */
.cozzi-promo-cta {
    position: absolute;
    left: 50%;
    bottom: 54px;              /* ✅ more bottom margin */
    transform: translateX(-50%);

    padding: 16px 34px;        /* ✅ bigger button */
    border-radius: 999px;

    font-weight: 900;
    font-size: 18px;           /* ✅ bigger text */
    letter-spacing: 0.6px;

    background: var(--cozzicotton-gold);
    color: #111;

    border: 0;
    outline: none;
    cursor: pointer;

    box-shadow:
      0 18px 45px rgba(0,0,0,0.45),   /* stronger depth */
      0 0 0 6px rgba(202,162,76,0.18);/* subtle glow ring */
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.cozzi-promo-cta:hover,
.cozzi-promo-cta:focus {
    transform: translateX(-50%) translateY(-2px); /* ✅ lift on hover */
    filter: brightness(1.04);
    box-shadow:
      0 22px 55px rgba(0,0,0,0.55),
      0 0 0 7px rgba(202,162,76,0.24);
}

.cozzi-promo-cta:active {
    transform: translateX(-50%) translateY(0px);  /* press down */
    filter: brightness(0.98);
}


/* Mobile / small screens */
@media (max-width: 480px) {
    .cozzi-promo-modal .modal-dialog {
        width: 94vw;
    }
    .cozzi-promo-frame {
        padding: 10px;
        border-radius: 18px;
    }
    .cozzi-promo-cta {
        bottom: 14px;
        padding: 11px 22px;
        bottom: 20px;
    }
}