/* =========================================================
   DJ AMSAL - SHARED RETRIEVE / PLAYER PAGES
   Wedding + Events + Remix
   ========================================================= */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #090a0b !important;
    color: #f4f4f2 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* HEADER */
.amsal-header-new {
    height: 78px;
    min-height: 78px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 5%;
    background: #08090a !important;
    border-bottom: 1px solid #292b2e;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    isolation: isolate !important;
}

.amsal-brand-new,
.amsal-brand-new:link,
.amsal-brand-new:visited,
.amsal-brand-new:hover,
.amsal-brand-new:active {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff !important;
    text-decoration: none !important;
}

.amsal-brand-new img { width: 34px; height: 34px; object-fit: contain; }
.amsal-brand-new strong { font-size: 20px !important; letter-spacing: 3px !important; white-space: nowrap !important; color: #fff !important; opacity: 1 !important; }

.amsal-nav-new { display: flex; align-items: center; gap: 34px; }
.amsal-nav-new a { color: #d7d7d7 !important; text-decoration: none !important; font-size: 13px; }
.amsal-nav-new a:hover { color: #fff !important; }
.amsal-nav-new a.active { color: #fff !important; position: relative; }
.amsal-nav-new a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 1px; background: #fff; }

.amsal-inquire-new { justify-self: end; border: 1px solid #666; padding: 13px 25px; color: #fff !important; text-decoration: none !important; font-size: 12px; }
.amsal-inquire-new:hover { background: #fff; color: #090a0b !important; }

/* PAGE */
#event-detail-page,
#remix-detail-page,
#wedding-detail-page {
    width: 100%;
    min-height: 70vh !important;
    padding: 72px 6% 95px !important;
    background: #090a0b !important;
}

.event-detail-wrapper,
.remix-detail-wrapper,
.wedding-detail-wrapper { max-width: 1450px !important; width: 100% !important; margin: auto !important; }

/* BACK */
.back-events,
.back-remixes,
.back-weddings {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #aeb1b5 !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-bottom: 38px !important;
}
.back-events:hover,.back-remixes:hover,.back-weddings:hover { color: #fff !important; }

/* TITLE */
.event-detail-heading,
.remix-detail-heading,
.wedding-detail-heading { border-top: 1px solid #34373a; padding-top: 24px; margin-bottom: 42px !important; }

.event-detail-heading .small-heading,
.remix-detail-heading .small-heading,
.wedding-detail-heading .small-heading { color: #b8bcc1 !important; font-size: 10px !important; letter-spacing: 2.6px !important; font-weight: 600 !important; text-transform: uppercase; margin-bottom: 18px !important; }

.event-detail-heading h1,
.remix-detail-heading h1,
.wedding-detail-heading h1 { color: #fff !important; font-size: clamp(38px,4.6vw,72px) !important; line-height: 1.02 !important; letter-spacing: -1.5px !important; font-weight: 500 !important; text-transform: none !important; max-width: 1050px !important; margin: 0; }
.title-gold-line { display: none !important; }

/* MAIN PLAYER + DESCRIPTION */
.main-event-layout,
.main-remix-layout,
.main-wedding-layout { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(280px,1fr) !important; gap: 5% !important; align-items: start; margin-bottom: 95px !important; }

.event-video-card,
.video-card { width: 100%; background: #000 !important; border: 1px solid #303337 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
.event-cell { position: relative; width: 100%; overflow: hidden; background: #000; border-radius: 0 !important; }
#eventVideo { display: block; width: 100% !important; height: auto !important; max-height: 620px; background: #000; border-radius: 0 !important; }

#videoOverlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: rgba(0,0,0,.96) !important; color: #fff; font-size: 22px; font-weight: 800; opacity: 0; transition: opacity .7s ease; z-index: 2; pointer-events: none; border-radius: 0 !important; }
#videoOverlay img { max-width: 150px; height: auto; margin-bottom: 8px; }
#videoOverlay a { color: #fff !important; text-decoration: underline !important; }

.event-description,
.remix-description,
.wedding-description { background: transparent !important; border: 0 !important; border-top: 1px solid #34373a !important; border-radius: 0 !important; padding: 24px 0 !important; box-shadow: none !important; }

.event-description h2,
.remix-description h2,
.wedding-description h2 { color: #fff !important; font-size: 20px !important; line-height: 1.4; font-weight: 500 !important; letter-spacing: 0 !important; margin: 0 0 18px; text-transform: none !important; }

.event-description-text,.event-description-text p,
.remix-description-text,.remix-description-text p,
.wedding-description-text,.wedding-description-text p { color: #aeb1b5 !important; font-size: 14px !important; line-height: 1.8 !important; }
.event-description-text strong,.event-description-text b,
.remix-description-text strong,.remix-description-text b,
.wedding-description-text strong,.wedding-description-text b { color: #fff !important; }
.event-description-text a,.remix-description-text a,.wedding-description-text a { color: #fff !important; text-decoration: underline; }

/* RELATED */
.related-events-header,
.related-header { text-align: left !important; border-top: 1px solid #34373a !important; padding-top: 25px !important; margin-bottom: 35px !important; }
.related-events-header .small-heading,.related-header .small-heading { color: #aeb1b5 !important; font-size: 10px !important; letter-spacing: 2.5px !important; font-weight: 600 !important; text-transform: uppercase; margin-bottom: 8px; }
.related-events-header h2,.related-header h2 { color: #fff !important; font-size: clamp(30px,3vw,48px) !important; font-weight: 500 !important; letter-spacing: -.5px !important; text-transform: none !important; margin: 0; }
.related-events-line,.related-line { display: none !important; }

/* Smaller, cleaner desktop thumbnails */
.related-videos-container { width: 100% !important; display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 28px 22px !important; margin: 0 !important; padding: 0 !important; }
.related-videos-container .related-video,.related-video { display: block !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #0d0f11 !important; border: 1px solid #303337 !important; border-radius: 5px !important; box-shadow: none !important; transition: border-color .25s ease, transform .25s ease !important; }
.related-videos-container .related-video:hover,.related-video:hover { transform: translateY(-2px) !important; border-color: #666b70 !important; box-shadow: none !important; }
.related-videos-container .related-video a,.related-video a { display: block !important; width: 100% !important; color: #fff !important; text-decoration: none !important; }
.related-video-image,.related-videos-container .related-video-image { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; overflow: hidden !important; background: #000 !important; }
.related-video-image img,.related-videos-container .related-video-image img { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; object-fit: cover !important; border: 0 !important; border-radius: 0 !important; transition: transform .3s ease, opacity .3s ease !important; }
.related-video:hover img,.related-videos-container .related-video:hover img { transform: scale(1.025) !important; opacity: .92; }
.related-video-title,.related-videos-container .related-video-title { display: flex !important; width: 100% !important; min-height: 50px !important; justify-content: flex-start !important; align-items: center !important; text-align: left !important; padding: 11px 13px !important; border-top: 1px solid #292d31 !important; border-bottom: 0 !important; background: #101214 !important; }
.related-video-title h5,.related-videos-container .related-video-title h5 { width: 100% !important; margin: 0 !important; padding: 0 !important; color: #f3f3f3 !important; text-align: left !important; text-transform: none !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: 0 !important; overflow-wrap: break-word; }

/* CONTACT */
.event-bottom-contact,.remix-bottom-contact,.wedding-bottom-contact { text-align: left !important; margin-top: 70px !important; }
.event-contact-button,.remix-contact-button,.wedding-contact-button { display: inline-block; background: transparent !important; color: #fff !important; border: 1px solid #777 !important; border-radius: 0 !important; padding: 15px 25px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase; text-decoration: none !important; box-shadow: none !important; }
.event-contact-button:hover,.remix-contact-button:hover,.wedding-contact-button:hover { background: #fff !important; color: #090a0b !important; transform: none !important; }

/* INVALID */
.no-product { max-width: 700px; margin: 80px auto; padding: 40px; text-align: center; background: #14181c; border: 1px solid #30353b; border-radius: 8px; }
.no-product h1 { color: #fff !important; }
.no-product p { color: #c9cdd2 !important; }

/* FOOTER */
.amsal-footer-new { border-top: 1px solid #292b2e; background: #070809; padding: 42px 5%; display: flex; justify-content: space-between; gap: 30px; color: #8f9398; font-size: 11px; letter-spacing: .4px; }
.amsal-footer-new > div { display: flex; align-items: center; gap: 22px; }
.amsal-footer-new strong { color: #fff; letter-spacing: 2px; }
.amsal-footer-new a { color: #c9c9c9 !important; text-decoration: none !important; }

@media (max-width: 950px) {
    .main-event-layout,.main-remix-layout,.main-wedding-layout { grid-template-columns: 1fr !important; }
    .related-videos-container { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
    .amsal-header-new { height: 154px; min-height: 154px; grid-template-columns: 1fr auto; grid-template-rows: 88px 66px; padding: 0 6%; }
    .amsal-brand-new img { width: 42px; height: 42px; }
    .amsal-brand-new strong { font-size: 20px !important; }
    .amsal-inquire-new { min-width: 92px; min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 14px; }
    .amsal-nav-new { grid-column: 1/-1; grid-row: 2; width: calc(100% + 12vw); margin-left: -6vw; height: 66px; border-top: 1px solid #292b2e; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
    .amsal-nav-new a { text-align: center; font-size: 14px; padding: 24px 2px; }
    #event-detail-page,#remix-detail-page,#wedding-detail-page { padding: 48px 6% 70px !important; }
    .event-detail-heading h1,.remix-detail-heading h1,.wedding-detail-heading h1 { font-size: 38px !important; }
    .related-videos-container { grid-template-columns: 1fr !important; }
    .related-video { max-width: 520px !important; }
    .amsal-footer-new { flex-direction: column; }
    .amsal-footer-new > div { flex-wrap: wrap; }
}

@media (max-width: 500px) {
    #videoOverlay { font-size: 18px; }
    #videoOverlay img { max-width: 110px; }
}

/* ============================================================
   FOOTER
============================================================ */

.amsal-footer {
    padding: 55px 5% 35px;
    background: #090a0b;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-name {
    margin: 0;

    color: #fff;

    font-size: 58px;
    line-height: 1;
    letter-spacing: 3px;
    font-weight: 700;
}

.footer-worldwide {
    margin-top: 18px;

    color: #aaa;
    font-size: 10px;
}

.footer-social {
    display: flex;
    gap: 25px;
}

.footer-social a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 11px;
}

.footer-bottom {
    margin-top: 35px;
    padding-top: 20px;

    border-top: 1px solid #303235;

    display: flex;
    justify-content: space-between;

    color: #999;
    font-size: 9px;
}


@media (max-width:1000px) { .amsal-wrap { width:90%; } }
@media (max-width:720px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-left h2 {
        font-size: 65px;
        letter-spacing: -3px;
    }

    .footer-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 35px;
    }

    .footer-name {
        font-size: 44px;
    }

    .footer-social {
        flex-wrap: wrap;
    }

}

@media (max-width:760px) {
.amsal-header{
 position:sticky;top:0;z-index:9999;
 width:100%;height:154px;min-height:154px;
 padding:0 6%;display:grid;
 grid-template-columns:1fr auto;grid-template-rows:88px 66px;
 align-items:center;background:#090a0b;
 border-bottom:1px solid #303236;
}
.amsal-brand{
 grid-column:1;grid-row:1;min-width:0;
 display:flex;align-items:center;gap:14px;white-space:nowrap;
}
.amsal-brand img{width:42px;height:42px;flex:0 0 42px;object-fit:contain}
.amsal-brand strong{
 display:block;margin:0;font-family:"Barlow Condensed",Arial,sans-serif;
 font-size:25px;line-height:1;font-weight:600;
 letter-spacing:.10em;white-space:nowrap;
}
.amsal-inquire{
 grid-column:2;grid-row:1;justify-self:end;position:static;
 width:auto;min-width:92px;min-height:52px;margin:0;
 padding:0 17px;display:flex;align-items:center;justify-content:center;
 font-size:15px;line-height:1;
}
.amsal-nav{
 grid-column:1/-1;grid-row:2;position:static;
 width:calc(100% + 12vw);height:66px;margin-left:-6vw;
 padding:0 4%;display:grid;grid-template-columns:repeat(4,1fr);
 gap:0;align-items:center;background:#090a0b;border:0;
}
.amsal-nav a{
 position:relative;display:flex;height:66px;padding:0;
 align-items:center;justify-content:center;color:#bfc1c6;
 font-family:"DM Sans",Arial,sans-serif;font-size:15px;line-height:1;
 white-space:nowrap;text-align:center;
}
.amsal-nav a::after{bottom:10px}

}
.scroll-top-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 99999;

    width: 52px;
    height: 52px;

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

    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;

    background: #fff;
    color: #090a0b;

    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        background .2s ease,
        color .2s ease;
}

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: #090a0b;
    color: #fff;
}

@media (max-width: 760px) {
    .scroll-top-btn {
        width: 46px;
        height: 46px;

        right: 18px;
        bottom: 20px;

        font-size: 24px;
    }
}
/* =========================================================
   PLAYER HEADER — MATCH PAGE11
   ========================================================= */

.amsal-header-new {
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 5% !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;

    background: #08090a !important;
    border-bottom: 1px solid #292b2e !important;
}

/* LOGO + DJ AMSAL */

.amsal-brand-new {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
}

.amsal-brand-new img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.amsal-brand-new strong {
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 3px !important;
    color: #fff !important;
    white-space: nowrap !important;
}

/* CENTER NAVIGATION */

.amsal-nav-new {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 34px !important;
}

.amsal-nav-new a {
    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
}

/* INQUIRE */

.amsal-inquire-new {
    justify-self: end !important;

    min-width: 92px !important;
    height: 48px !important;
    padding: 0 20px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    color: #fff !important;
    border: 1px solid #62666b !important;
    text-decoration: none !important;
}