:root {
    --color-primary: #542791;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray: #6F7070;
    --color-dark-gray: #515151;
    --color-yellow: #FFD700;
    --light-yellow: #c8ab54;
    --color-red: #FA0201;
    --primary-extrabold: "Proximus-ExtraBold";
    --primary-bold: "Proximus-Bold";
    --primary-regular: "Proximus-Regular";
    --primary-light: "Proximus-Light";
}

/* Font Family */
@font-face {
    font-family: "Proximus-ExtraBold";
    src: url("../fonts/Proximus-ExtraBold.ttf");
}

@font-face {
    font-family: "Proximus-Bold";
    src: url("../fonts/Proximus-Bold.ttf");
}

@font-face {
    font-family: "Proximus-Regular";
    src: url("../fonts/Proximus-Regular.ttf");
}

@font-face {
    font-family: "Proximus-light";
    src: url("../fonts/Proximus-Light.ttf");
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--primary-regular);
}

/* Text Formatting */
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--primary-bold);
}

a:hover {
    color: unset;
    text-decoration: none;
}

/* Common Classes */
.hide {
    display: none;
}

.selected .hide {
    display: block;
}

.black-font {
    color: #552791;
}

.light {
    font-family: var(--primary-light);
}

.height-auto {
    height: auto;
}

.h-100vh{
    height: 100dvh !important;
    display: flex;
    align-items: center;
}


/* ================================
   MOBILE & TABLET PORTRAIT (max-width: 1024px)
   ================================ */
@media only screen and (max-width: 1024px) {
    /* Layout */
    .proximus-section {
        height: 100dvh;
        position: relative;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .proximus-section.bg-overlay {
        background-blend-mode: overlay;
    }

    .proximus-section .category-section,
    .camera-page .category-section {
        max-height: 69vh;
        overflow-y: auto;
    }

    .proximus-section .heading-div {
        padding-bottom: 10px;
    }

    /* Logo */
    .logo {
        height: 80px;
        width: auto;
    }

    .logo-div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 110px;
    }

    /* Live View */
    .live-view-page {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Typography */
    .heading {
        font-size: 30px;
        color: var(--color-white);
        letter-spacing: 1.5px;
        position: relative;
        padding: 15px 0;
        font-family: var(--primary-extrabold);
    }

    .choose-section .heading {
        font-size: 30px;
    }

    .heading.head-color {
        color: var(--color-primary);
    }

    .after-line::after {
        content: "";
        border-bottom: 1px solid var(--color-white);
        position: absolute;
        width: 64px;
        left: calc(50% - 32px);
        bottom: 0;
    }

    /* Buttons */
    .main-btn {
        font-size: 20px;
        color: var(--color-white);
        background-color: var(--color-primary);
        border-radius: 2px 2px 23px 2px;
        padding: 6px 15px;
        text-align: center;
        font-family: var(--primary-light);
        border: 1px solid var(--color-primary);
        min-width: 200px;
        z-index: 99;
    }

    .secondary-btn {
        color: var(--color-black);
        font-family: var(--primary-regular);
        background-color: var(--color-white);
        border-color: var(--color-white);
    }

    .photo-tool-btn-wrapper .upload-btn.secondary-btn {
        color: var(--color-primary);
        font-family: var(--primary-regular);
        background-color: var(--color-white);
        border-color: var(--color-primary);
    }

    .width-btn {
        width: 87%;
    }

    .up-btn {
        font-size: 16px;
        padding: 5px 0;
        text-align: center;
    }

    /* Button Sections */
    .proximus-btn-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 8vh;
    }

    .fixed-bottom-container {
        width: 100%;
        position: fixed;
        bottom: 0;
        padding: 10px;
        background-color: #FFFFFF;
    }


    /* Content */
    .content-div {
        padding: 25px 0;
        margin: 10px 0;
    }

    .content {
        font-family: var(--primary-light);
        font-size: 20px;
    }

    .language-page .content-div {
        overflow-y: auto;
    }

    /* Categories */
    .category-img,
    .image-loader {
        border-radius: 50%;
        width: 160px;
        height: 160px;
        object-fit: cover;
        margin-bottom: -10px;
    }

    .cate-div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin: 4vh 0;
    }

    .cate-img {
        color: var(--color-white);
    }

    .cate-img:hover {
        color: var(--color-white);
    }

    .choose-div {
        display: flex;
        flex-direction: column;
        margin: 30px 0;
    }

    /* Forms */
    .form-main-div {
        padding: 10px;
    }

    .form-group {
        margin: 15px 0;
    }

    .input-box {
        background: #E4E6E5;
        border-color: #E4E6E5;
        border-radius: 5px;
        font-family: var(--primary-bold);
        color: var(--color-gray);
        height: 45px;
    }

    .input-box:focus,
    .input-box:focus-visible {
        color: var(--color-gray);
        border-color: var(--color-primary);
        box-shadow: none;
        outline: 0;
        background: var(--color-white);
    }

    .form-select {
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .form-check-input:checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .form-check-input:focus {
        box-shadow: none;
        border-color: var(--color-primary);
    }

    .proximus-form-section {
        height: 100dvh;
    }

    .checkbox-link {
        text-decoration: underline;
        color: var(--color-primary);
    }

    .input-content {
        font-size: 15px;
    }

    /* Players Section */
    .players-section-wrapper {
        overflow: auto;
    }

    .players-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0px 25px;
        overflow-x: hidden;

    }

    .player-img {
        border-radius: 50%;
        width: 145px;
        height: 145px;
        object-fit: cover;
    }

    .head-div {
        margin-top: 10px;
    }

    .players-div {
        margin-bottom: 10px;
        position: relative;
    }

    .players-div.disabled:not(.selected) {
        opacity: 0.2;
        display: none;
    }

    .check {
        width: 33px;
        height: auto;
    }

    .check-player {
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        position: absolute;
        bottom: 13%;
        left: 17%;
        display: none;
    }

    .selected .check-player {
        display: block;
    }

    .check-player #Ellipse_56 {
        stroke: var(--color-primary);
    }

    .check-player #Icon_akar-check {
        stroke: var(--color-primary);
    }

    /* Questions */
    .question-section {
        text-align: center;
        padding-bottom: 15px;
    }

    .question {
        color: var(--color-primary);
        font-size: 25px;
        font-family: var(--primary-extrabold);
    }

    .player-btn .main-btn {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .player-btn {
        padding-bottom: 5px;
    }

    /* T-shirt */
    .player-tshirt {
        display: flex;
        width: 100%;
        padding: 0 20px;
        justify-content: center;
    }

    .tshirt svg {
        width: 100%;
    }

    .tshirt img {
        width: 120%;
        height: auto;
    }

    .tshirt {
        width: 11vh;
        height: 13vh;
    }

    /* Photo Section */
    .proximus-photo-section {
        height: 100dvh;
        background-color: var(--color-black);
    }

    .white-arrow path {
        fill: var(--color-white);
    }

    .photos {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 4px solid var(--color-white);
    }

    /* Photo Tools */
    .photo-tool-section {
        height: 90px;
        padding: 0 40px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        background-color: var(--color-black);
    }

    .photo-tool-btn-wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding-bottom: 20px;
    }

    .photo-tool-section .title {
        color: var(--color-white);
    }

    .photo-tool-btn-wrapper .main-btn.primary-btn {
        border-radius: 2px 2px 2px 2px;
        color: var(--color-white) !important;
        background-color: var(--color-primary) !important;
    }

    .photo-tool-btn-wrapper .main-btn {
        width: 100px;
        font-size: 12px;
        min-width: unset;
        padding: 4px;
        border-radius: 2px 2px 18px 2px;
    }

    /* Controls */
    .controle-item .fill path {
        fill: var(--color-dark-gray);
    }

    .controle-item.active .fill path {
        fill: var(--color-white);
    }

    .controle-item .stroke path {
        stroke: var(--color-dark-gray);
    }

    .controle-item.active .stroke path {
        stroke: var(--color-white);
    }

    .controle-item svg {
        width: 30px;
        height: 30px;
    }

    .controle-item .to-name {
        color: var(--color-dark-gray);
        margin: 5px 0;
    }

    .controle-item.active .to-name {
        color: var(--color-white);
    }

    /* Photo Content */
    .photo-content-div {
        position: absolute;
        top: 38%;
        right: 23%;
        left: 23%;
        text-align: center;
    }

    .yellow-content {
        color: var(--color-yellow);
        font-size: 65px;
        margin-bottom: -35px;
    }

    .red-content {
        color: var(--color-red);
        font-size: 40px;
    }

    /* Shutter */
    .sutter-svg {
        position: absolute;
        bottom: 20px;
        left: 37%;
        right: 37%;
        text-align: center;
        flex-direction: column;
        display: flex;
    }

    .content-sutter {
        color: var(--light-yellow);
        font-size: 20px;
    }

    .cs-fixed {
        position: fixed;
        bottom: 0;
        left: 27%;
        right: 27%;
        margin: 10px 0;
    }

    .sutter-img {
        width: 6vh;
    }

    .sutter-content {
        color: var(--color-yellow);
        font-size: 2vh;
    }

    /* Upload Section */
    .upload-content {
        font-size: 30px;
        color: var(--color-white);
    }

    .folder-div {
        text-align: center;
        margin: 20px 0;
    }

    .folder-div img {
        max-height: 100px;
    }

    .upload-section {
        height: 63vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .upload-category {
        display: flex;
        justify-content: space-around;
        position: absolute;
        width: 100%;
        bottom: 0;
        padding: 0 20px;
    }

    .upload-category .category-img {
        width: 110px;
        height: 110px;
    }

    .upload-category .cate-div {
        margin: 25px 0;
    }

    /* Background Image */
    .bg-img {
        background: url(../img/Image\ 36@3x.png), linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
        border: 4px solid var(--color-white);
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .rotate-image {
        width: 65%;
        height: 65%;
        transform: rotate(-14deg);
    }

    .cmp-logo {
        position: absolute;
        bottom: 22%;
        left: 46%;
    }

    .ph-vd-div {
        width: 100%;
        text-align: center;
    }
   

    /* Arrows */
    .select-arrow svg {
        width: 35px;
        height: 35px;
    }

    .select-arrow svg path {
        stroke: var(--color-primary);
    }

    .select-arrow {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .filter-btn {
        left: 27%;
        right: 27%;
    }

    /* Draai (Rotate) Section */
    .draai-proximus-section {
        height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(../img/Image\ 36@3x.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgb(255 255 255 / 90%) 0%, rgb(253 253 253 / 90%) 87%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-blend-mode: overlay;
    }

    /* Filters Page Specific */
    .filters-page .players-section {
        padding-bottom: 90px;
    }

    .filters-page .fixed-bottom-container {
        bottom: 30px;
    }

    .filters-page .check-player {
        bottom: 22% !important;
    }

    /* Artist Screen Specific */
    .artist-screen .players-div.selected .check-player {
        bottom: 20% !important;
        left: 21% !important;
    }

    .thankyou-page .main-btn{
        display: flex !important;
        gap: 15px !important;
        justify-content: center !important;
    }
    .thankyou-page{
        display: unset !important;
    }
    .thankyou-page .qr-code{
        width: 30%;
        /* width: 256px; */
        max-width: 100%;
         /* padding: 8px;
          image-rendering: pixelated; */
    }
    /* .bottom-actions{
        height: 100vh;
    } */
      .players-section .image-loader {
        width: 230px;
        height: 230px;
    }
    .players-section .image-loader-wrapper{
        align-items: unset;
        margin-top: -5px;
    }

    /* promt model css  */
    .prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}
 @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes slideUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

.prompt-modal {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
    padding: 40px;
    border-radius: 20px;
    min-width: 400px;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    animation: slideUp 0.3s ease-out;
}

.close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F5F5F5;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #666;
    transition: all 0.2s ease;
    padding: 0;
}

.close-btn:hover {
    background: #E0E0E0;
    color: #333;
}

.prompt-title {
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 600;
    color: #1A1A1A;
    letter-spacing: -0.5px;
    padding-right: 40px;
}

.prompt-input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 24px;
    border-radius: 12px;
    border: 2px solid #E0E0E0;
    font-size: 15px;
    transition: all 0.2s ease;
    outline: none;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.prompt-input:focus {
    border-color: #007BFF;
}

.prompt-btn-wrapper {
    display: flex;
    justify-content: center;
}

.confirm-btn {
    color: #FFFFFF;
    background-color: #542791;
    border: none;
    font-size: 15px;
}

/* model css end  */

}

/* ================================
   SMALL MOBILE (max-width: 380px)
   ================================ */
@media only screen and (max-width: 380px) {
    .players-section {
        padding: 0px 1.5vw;
    }
    .players-section .image-loader {
        width: 135px !important;
        height: 135px !important;
        margin-top: 5px !important;
    }

    .players-section .player-img {
        width: 35vw;
        height: 35vw;
    }

}

/* ================================
   MOBILE LANDSCAPE (max-width: 1024px, landscape)
   ================================ */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    /* Adjust heights for landscape mode */
    .logo-div {
        height: 70px;
    }

    .logo {
        height: 50px;
    }

    .heading {
        font-size: 24px;
        padding: 8px 0;
    }

    .proximus-section .category-section,
    .camera-page .category-section {
        max-height: 55vh;
    }

    /* Players grid in landscape - more columns */
    .players-section {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-height: 45vh;
        padding: 0 15px;
    }

    .player-img {
        width: 18vw;
        height: 18vw;
        min-width: 80px;
        min-height: 80px;
    }

    .check-player {
        width: 28px;
        height: 28px;
        bottom: 10%;
        left: 15%;
    }

    .check {
        width: 26px;
    }

    /* Buttons in landscape */
    .proximus-btn-section {
        margin-top: 3vh;
        gap: 12px;
    }

    .main-btn {
        font-size: 18px;
        padding: 5px 12px;
        min-width: 180px;
    }

    /* Content adjustments */
    .content-div {
        padding: 15px 0;
        margin: 5px 0;
    }

    .content {
        font-size: 18px;
    }

    .question {
        font-size: 22px;
    }

    /* Category images */
    .category-img,
    .image-loader {
        width: 120px;
        height: 120px;
    }

    .upload-category .category-img {
        width: 90px;
        height: 90px;
    }

    /* Upload section */
    .upload-section {
        height: 50vh;
        gap: 15px;
    }

    .folder-div img {
        max-height: 80px;
    }

    .upload-content {
        font-size: 24px;
    }

    /* Photo content */
    .yellow-content {
        font-size: 50px;
        margin-bottom: -25px;
    }

    .red-content {
        font-size: 32px;
    }

    /* Photo tools */
    .photo-tool-section {
        height: 70px;
        padding: 0 30px;
    }

    .photo-tool-btn-wrapper .main-btn {
        width: 90px;
        font-size: 11px;
    }

    /* T-shirt */
    .tshirt {
        width: 9vh;
        height: 11vh;
    }

    /* Form adjustments */
    .input-box {
        height: 40px;
    }

    .input-content {
        font-size: 14px;
    }
}

/* ================================
   TABLET LANDSCAPE (min-width: 768px, max-width: 1024px, landscape)
   ================================ */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Increase grid columns for larger tablets */
    .players-section {
        grid-template-columns: repeat(5, 1fr);
    }

    .player-img {
        width: 15vw;
        height: 15vw;
        min-width: 100px;
        min-height: 100px;
    }

    .heading {
        font-size: 28px;
    }

    .question {
        font-size: 24px;
    }

    .main-btn {
        font-size: 20px;
        min-width: 200px;
    }
}

/* ================================
   HEIGHT-BASED ADJUSTMENTS FOR TALL SCREENS
   ================================ */

/* Tall Portrait Screens (height > 900px) */
@media only screen and (max-width: 1024px) and (min-height: 900px) and (orientation: portrait) {
    .logo-div {
        height: 130px;
    }

    .logo {
        height: 100px;
    }

    .heading {
        font-size: 36px;
        padding: 20px 0;
    }

    .proximus-btn-section {
        margin-top: 12vh;
        gap: 30px;
    }

    .main-btn {
        font-size: 24px;
        padding: 10px 20px;
        min-width: 240px;
    }

    .content {
        font-size: 24px;
    }

    .content-div {
        padding: 35px 0;
        margin: 15px 0;
    }

    .category-img,
    .image-loader{
        width: 200px;
        height: 200px;
    }

    .player-img {
        width: 160px;
        height: 160px;
    }

    .players-section {
        gap: 25px;
        padding: 0px 30px;
    }

    .question {
        font-size: 32px;
    }

    .cate-div {
        margin: 6vh 0;
    }

    .input-box {
        height: 55px;
        font-size: 18px;
    }

    .input-content {
        font-size: 18px;
    }

    .form-group {
        margin: 25px 0;
    }

    .yellow-content {
        font-size: 80px;
        margin-bottom: -40px;
    }

    .red-content {
        font-size: 50px;
    }

    .photo-tool-section {
        height: 110px;
        margin: 0px 0px 0px 0px;
    }

    .tshirt {
        width: 13vh;
        height: 15vh;
    }
}

/* Extra Tall Portrait Screens (height > 1100px) - iPads, large tablets */
@media only screen and (max-width: 1024px) and (min-height: 1024px) and (orientation: portrait) {
    .logo-div {
        height: 150px;
    }

    .logo {
        height: 120px;
    }

    .heading {
        font-size: 42px;
        padding: 25px 0;
    }

    .proximus-btn-section {
        margin-top: 15vh;
        gap: 40px;
    }

    .main-btn {
        font-size: 28px;
        padding: 12px 25px;
        min-width: 280px;
    }

    .category-img,
    .image-loader {
        width: 240px;
        height: 240px;
    }

    .player-img {
        width: 220px;
        height: 220px;
    }

    .players-section {
        gap: 30px;
        padding: 0px 40px;
    }

    .question {
        font-size: 38px;
    }

    .content {
        font-size: 28px;
    }

    .content-div {
        padding: 45px 0;
        margin: 20px 0;
    }

    .proximus-section .category-section,
    .camera-page .category-section {
        max-height: 72vh;
    }
}

/* Tall Landscape Screens (height > 700px, landscape) */
@media only screen and (max-width: 1024px) and (min-height: 700px) and (orientation: landscape) {
    .logo-div {
        height: 90px;
    }

    .logo {
        height: 70px;
    }

    .heading {
        font-size: 28px;
        padding: 12px 0;
    }

    .proximus-section .category-section,
    .camera-page .category-section {
        max-height: 60vh;
    }

    .players-section {
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
        max-height: 52vh;
        padding: 0 20px;
    }

    .player-img {
        width: 16vw;
        height: 16vw;
        min-width: 110px;
        min-height: 110px;
    }

    .proximus-btn-section {
        margin-top: 5vh;
        gap: 18px;
    }

    .main-btn {
        font-size: 20px;
        padding: 8px 16px;
        min-width: 220px;
    }

    .category-img,
    .image-loader {
        width: 140px;
        height: 140px;
    }

    .content {
        font-size: 20px;
    }

    .question {
        font-size: 26px;
    }
}

/* Very Tall Landscape (height > 850px, landscape) - Large tablets landscape */
@media only screen and (max-width: 1024px) and (min-height: 850px) and (orientation: landscape) {
    .logo-div {
        height: 110px;
    }

    .logo {
        height: 90px;
    }

    .heading {
        font-size: 32px;
        padding: 18px 0;
    }

    .players-section {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        max-height: 58vh;
    }

    .player-img {
        width: 16vw;
        height: 16vw;
        min-width: 130px;
        min-height: 130px;
    }

    .proximus-btn-section {
        margin-top: 7vh;
        gap: 25px;
    }

    .main-btn {
        font-size: 24px;
        padding: 10px 20px;
        min-width: 250px;
    }

    .category-img,
    .image-loader {
        width: 160px;
        height: 160px;
    }

    .content {
        font-size: 24px;
    }

    .question {
        font-size: 30px;
    }

    .proximus-section .category-section,
    .camera-page .category-section {
        max-height: 65vh;
    }
}

/* Photo/Video Mirroring */
.photo-video-section.right .rotate-screen-wrapper img {
    transform: scaleX(-1);
}


    .staging-body {
        font-family: var(--bs-body-font-family);
        background: #FFFFFF;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .staging-container {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 40px 30px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #E2E8F0;
        width: 100%;
        max-width: 440px;
    }
        .staging-body .staging-container .header {
        text-align: center;
        margin-bottom: 35px;
    }
        .staging-body .staging-container .icon {
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }
        .staging-body .staging-container .icon svg {
        width: 35px;
        height: 35px;
        fill: #542791;
    }
        .staging-body .staging-container h1 {
        color: #542791;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
    }
        .staging-body .staging-container .subtitle {
        color: #718096;
        font-size: 14px;
        line-height: 1.5;
    }
    .staging-body .staging-container form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
        .staging-body .staging-container .input-group {
        position: relative;
    }
        .staging-body .staging-container input[type="text"] {
        width: 100%;
        padding: 16px 20px;
        border: 2px solid #E2E8F0;
        border-radius: 12px;
        font-size: 16px;
        transition: all 0.3s ease;
        background: white;
        color: #2D3748;
    }
        .staging-body .staging-container input[type="text"]:focus {
        outline: none;
        border-color: #542791;
    }
        .staging-body .staging-container input[type="text"]::placeholder {
        color: #A0AEC0;
    }
        .staging-body .staging-container button[type="submit"] {
        width: 100%;
        background-color: #542791;
        color: white;
        border: none;
        border-radius: 2px 2px 23px 2px;
        padding: 15px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        font-family: var(--bs-body-font-family);
    }
        .staging-body .staging-container button[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }
        .staging-body .staging-container button[type="submit"]:active {
        transform: translateY(0);
    }
        .staging-body .staging-container .info-text {
        text-align: center;
        color: #718096;
        font-size: 13px;
        margin-top: 20px;
        padding-top: 30px;
        border-top: 1px solid #E2E8F0;
    }
        .staging-body .passcode-text {
            -webkit-text-security: disc;
            text-security: disc;
            font-family: 'password';
        }

        /* Placeholder ko normal rakhne ke liye */
        .staging-body .passcode-text::placeholder {
            font-family: inherit; /* Ya default font */
            -webkit-text-security: none;
            text-security: none;
        }
    /* Mobile optimization */
    @media (max-width: 480px) {
            .staging-body .staging-container{
            padding: 35px 25px;
            border-radius: 16px;
        }
            .staging-body .staging-container h1 {
            font-size: 22px;
        }
            .staging-body .staging-container .icon {
            width: 60px;
            height: 60px;
        }
            .staging-body .staging-container .icon svg {
            width: 30px;
            height: 30px;
        }
            .staging-body .staging-container input[type="text"],
            .staging-body .staging-container button[type="submit"] {
            padding: 14px 18px;
            font-size: 15px;
        }
        .upload-content {
            font-size: 22px;
        }

    }
    /* iPad and tablet optimization */
    @media (min-width: 481px) and (max-width: 1024px) {
            .staging-body .staging-container {
            max-width: 500px;
            padding: 50px 40px;
        }
            .staging-body .staging-container h1 {
            font-size: 26px;
        }
            .staging-body .staging-container .icon {
            width: 80px;
            height: 80px;
        }
            .staging-body .staging-container .icon svg {
            width: 40px;
            height: 40px;
        }
    }
    
    /* Staging body height adjustments for tall screens */
    @media (min-width: 481px) and (max-width: 1024px) and (min-height: 900px) {
            .staging-body .staging-container {
            max-width: 550px;
            padding: 60px 50px;
        }
            .staging-body .staging-container h1 {
            font-size: 30px;
        }
            .staging-body .staging-container .subtitle {
            font-size: 16px;
        }
            .staging-body .staging-container .icon {
            width: 90px;
            height: 90px;
            margin-bottom: 25px;
        }
        .staging-body .staging-container .icon svg {
            width: 45px;
            height: 45px;
        }

        /* Mobile optimization */
        @media (max-width: 480px) {
             .staging-body .staging-container{
                padding: 35px 25px;
                border-radius: 16px;
            }
             .staging-body .staging-container h1 {
                font-size: 22px;
            }
             .staging-body .staging-container .icon {
                width: 60px;
                height: 60px;
            }
             .staging-body .staging-container .icon svg {
                width: 30px;
                height: 30px;
            }
             .staging-body .staging-container input[type="text"],
             .staging-body .staging-container button[type="submit"] {
                padding: 14px 18px;
                font-size: 15px;
            }
            .upload-content {
                font-size: 22px;
            }


        }
        .staging-body .staging-container input[type="text"],
        .staging-body .staging-container button[type="submit"] {
            padding: 18px 24px;
            font-size: 18px;
        }
        .staging-body .staging-container form {
            gap: 25px;
            }
    }
    @media (min-width: 1025px) {
    .proximus-form-section {
        display: none !important;
    }
    #landscape-screen {
        display: flex;
    }
    }

/* ===== Spinner for Mobile + Tablet (Portrait & Landscape) ===== */
  .spin .loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .spin .loader-main {
    position: relative;
    width: 90px;
    height: 90px;
  }

  .spin .circle {
    position: absolute;
    border-radius: 50%;
  }

  .spin .circle-1 {
    inset: 0;
    border: 4px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.9);
    border-right-color: rgba(255, 255, 255, 0.9);
    animation: rotate 1.5s linear infinite;
  }

  .spin .circle-2 {
    inset: 12px;
    border: 4px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.7);
    border-left-color: rgba(255, 255, 255, 0.7);
    animation: rotate-reverse 2s linear infinite;
  }

  .spin .circle-3 {
    inset: 24px;
    border: 3px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.5);
    animation: rotate 2.5s linear infinite;
  }

  .spin .center-icon {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .spin .icon-background {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    animation: pulse-soft 2s ease-in-out infinite;
    position: absolute;
  }

  .spin .camera-svg {
    width: 20px;
    height: 20px;
    z-index: 2;
  }

  .spin .dots {
    display: flex;
    gap: 6px;
    display: none;
  }

  .spin .dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: dot-bounce 1.4s ease-in-out infinite;
  }

  .spin .dot:nth-child(2) { animation-delay: 0.2s; }
  .spin .dot:nth-child(3) { animation-delay: 0.4s; }

  .spin .text {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
  }

  .spin .sparkles {
    position: absolute;
    inset: 8px;
  }

  .spin .sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle-float 3s ease-in-out infinite;
  }

  .spin .sparkle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
  .spin .sparkle:nth-child(2) { top: 80%; left: 10%; animation-delay: 1s; }
  .spin .sparkle:nth-child(3) { top: 20%; right: 15%; animation-delay: 1.5s; }
  .spin .sparkle:nth-child(4) { bottom: 15%; right: 20%; animation-delay: 2s; }
  .spin .sparkle:nth-child(5) { top: 50%; left: 5%; animation-delay: 2.5s; }


/* ===== Animations ===== */
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes rotate-reverse { from { transform: rotate(360deg); } to { transform: rotate(0); } }

@keyframes pulse-soft {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes dot-bounce {
  0%,80%,100% { transform: translateY(0); opacity: 0.8; }
  40% { transform: translateY(-10px); opacity: 1; }
}

@keyframes sparkle-float {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  50% { opacity: 1; transform: translateY(-25px) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0); }
}


/* imageloader code */
     .image-loader-wrapper{
         position: absolute;
         inset: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 2;
     }
    .image-loader {
      position: relative;
      display: inline-block;
    }

    .image-loader .player-img-wrapper {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      border: 4px solid transparent;
      transition: all 0.3s ease;
    }

    .image-loader .loader-container {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #e2e8f0;
      position: relative;
      overflow: hidden;
    }

    .image-loader .loader-shimmer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          #e2e8f0 0%,
          #cbd5e0 20%,
          #a0aec0 40%,
          #cbd5e0 60%,
          #e2e8f0 100%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }

    .image-loader .loader-pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }

    @keyframes shimmer {
      0% {
        background-position: -200% 0;
      }

      100% {
        background-position: 200% 0;
      }
    }

    @media (max-width: 768px) {
      /* .image-loader .image-loader {
        width: 100px;
        height: 100px;
      }
      .image-loader .player-img-wrapper {
        border: unset;
      } */
    }
    @media (max-width: 560px) {
    /* .player-img {
        width: 160px;
        height: 160px;
    } */
    /* .players-section .image-loader {
        width: 165px;
        height: 165px;
        margin-top: 3px;
     } */
    }

    @media (max-width: 480px) {
    .image-loader .image-loader {
        width: 90px;
        height: 90px;
      }
    
   
    }

/* Image Animations Loader  */

.scan-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* Image blur reveal */
    .scan-wrapper .scan-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(0.4px) grayscale(0.4);
        animation: clear-image infinite;
        position: absolute;
        inset: 0;
    }

    @keyframes clear-image {
        0%, 70% { filter: blur(2px) grayscale(0.4); }
        100% { filter: blur(0px) grayscale(0); }
    }

    /* GIF Loader */
    .scan-wrapper .gif {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        animation: gif-fadeout infinite;
        background: url('../img/Untitled-file.gif') no-repeat center;
        background-size: cover;
    }

    .scan-wrapper .gif::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 3px solid rgba(0, 180, 255, 0.6);
        border-radius: 50%;
        border-top-color: transparent;
        border-right-color: transparent;
        animation: spin 1s linear infinite;
    }

    @keyframes spin { 100% { transform: rotate(360deg); } }

    @keyframes gif-fadeout {
        0%, 85% { opacity: 1; }
        100% { opacity: 0; }
    }

    /* Main Diagonal Scanner (repeating) */
    .scan-wrapper .scanner-01 {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 5000px;
        /* height: 8px; */
        /* background: rgba(0,180,255,0.15); */
        box-shadow: 0 0 1200px rgba(0,180,255,1), 0 0 1200px rgba(0,180,255,0.4);
        transform: rotate(130deg);
        animation: scan 1.9s linear infinite;
        z-index: 5;
    }

    .scan-wrapper .scanner-01::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 550px;
        background:rgb(0 200 255 / 21%);;
        filter: blur(5px) grayscale(0.4);
        animation: clear-image 3s forwards;
        transform: translateY(150px);
    }

    @keyframes scan {
        0% { transform: translate(-100%, -100%) rotate(130deg); }
        100% { transform: translate(100%, 100%) rotate(130deg); }
    }

    /* Half Circle Scanner (one-time drop) */
      .scan-wrapper .scan-line-2 {
        position: absolute;
        top: -2000px;
        left: 25%;
        width: 4000px;
        height: 2000px;
        border: 3px solid rgba(0, 179, 255, 0.9);
        border-top: none;
        border-radius: 0 0 2000px 2000px;
        transform: translateX(-50%);
        animation: half-circle-fall 1.5s ease-in-out forwards,
                   hide-border 0.1s linear forwards;
        opacity: 0;
        z-index: 6;
        box-shadow: inset 0 -18px 45px rgba(0,200,255,0.9), inset 0 -10px 25px rgba(0,200,255,0.75);
        mask-image: linear-gradient(to bottom, transparent 0%, black 28%);
    }
    
    .scan-wrapper .scan-line-2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0,200,255,0.5);
        filter: blur(50px);
    }   
 
    @keyframes half-circle-fall {
        0% { top: -2000px; opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { top: 80%; opacity: 0; }
    }

    @keyframes hide-border {
        from { border-color: rgba(0,179,255,0.9); }
        to { border-color: transparent; }
    }
    .scan-line-2{
        display: none;
    }
    .stop-animation .scan-line-2{
        display: block;
    }
    .stop-animation  .scan-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(5px) grayscale(0.4);
        animation: clear-image  1.5s forwards;
        position: absolute;
        inset: 0;
    }

    @keyframes clear-image {
        0%, 70% { filter: blur(5px) grayscale(0.8); }
        100% { filter: blur(0px) grayscale(0); }
    }

    .stop-animation .gif{
        display: none;
    }
    .stop-animation .scanner-01{
        display: none;
    }
    .stop-animation .scanner-01{
        display: none;
    }
    .stop-animation .scan-img{
        animation: none;
        filter: none;
    }



@media (min-width: 980px) and (max-width: 1024px) {
  .portrait-video,
  .portrait-video video,
  .portrait-video .image
  {
    height: 1046px !important;
  }
  .filter-video-h,
  .filter-video-h video,
  .filter-video-h .image{
    height: 1040px !important;
    margin-bottom: 10px !important;
  }
  .upload-category .category-img {
    width: 150px !important;
    height: 150px !important;
    }
    .cate-div .main-btn {
        font-size: 22px !important;
        padding: 10px 25px !important;
    }
}
@media (min-width: 768px) and (max-width: 980px) {
  .portrait-video,
  .portrait-video video,
  .portrait-video .image
  {
    height: 715px !important;
  }
  .upload-category .category-img
   {
    width: 150px !important;
    height: 150px !important;
  }

  .filter-video-h,
  .filter-video-h video,
  .filter-video-h .image{
    height: 705px !important;
    margin-bottom: 10px !important;
  }
  .filter-page .captured-img-wrapper .captured-img {
    width: 50%;
 }

}