: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) !important;
}

/* 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 !important;
    align-items: center !important;
    justify-content: center !important;
}
.h-100vh .photo-tool-section{
      width: 100%;
    }

.players-section{
    padding-top: 5px;
}
.portrait-video video {
    left: 0px !important;
  }
  .pb-170 {
    padding-bottom: 250px !important;
    min-height: unset !important;
  }

  .pb-15{
    padding-bottom: 15px !important;
  }
    .webcam-recorder .bottom-actions .position-absolute{
        display: none;
    }
    .bg-pb-170{
        padding-bottom: 150px !important;
    }
    .selfie-page .right .record-icon{
        right: 10px !important;
        left: unset !important;
    }
     /* 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) !important;
        border: 1px solid var(--color-primary);
        min-width: 200px;
        z-index: 99;
    }

    .secondary-btn {
        color: var(--color-black);
        font-family: var(--primary-regular) !important;
        background-color: var(--color-white);
        border-color: var(--color-white);
    }
/* ================================
   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-evenly;
        gap: 5px;
    }
    .click-btn-update-class .v-container{
        margin-bottom: 0px !important;
        height: 105px !important;
    }
    /* 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;
    }

   

    .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: 5px;
        background-color: #FFFFFF;
        z-index: 5;
    }


    /* 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;
        -webkit-overflow-scrolling: touch;
    }

    .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 !important;
        height: 145px !important;
        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: 30px;
        height: 30px;
        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);
    }
    .artist-screen-ques .question{
        padding: 10px 40px;
    }
    .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) !important;
    }

    .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);
        z-index: 0;
    }
    .video-page-height .photo-tool-section{
        z-index: 4 !important;
        position: relative;
    }

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

    .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: 150px !important;
        font-size: 15px !important;
        min-width: unset !important;
        padding: 10px 10px !important;
        border-radius: 2px 2px 18px 2px !important;
    }

    /* 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: 70%;
        margin-bottom: 5px;
    }

    .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;
    }
    .video-real-page .photo-video-section{
        display: flex;
        justify-content: 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 .check-player {
        bottom: 22% !important;
    }

    /* Artist Screen Specific */
    .artist-screen .players-div.selected .check-player {
        bottom: 0% !important;
        left: 15% !important;
        z-index: 2;
    }

    .thankyou-page .main-btn{
        display: flex !important;
        gap: 15px !important;
        justify-content: center !important;
    }
   
    .thankyou-page .qr-code{
        width: 30%;
        /* width: 256px; */
        max-width: 100%;
         /* padding: 8px;
          image-rendering: pixelated; */
    }
    /* .bottom-actions{
        height: 100vh;
    } */
    

    /* 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;
    margin : 0 10px;
}

.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-overlay .text-note{
  font-size: 12px;
}

.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  */
/* modal css start chooseArtists */

.modal-overlay-artist-page {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  font-family: var(--primary-font) !important;
  animation: 'fadeIn 0.3s ease-out'
}

@layer components {
 

  .modal-container {
    position: relative;
    width: min(92vw, 360px);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(33, 28, 82, 0.2);
    padding: 20px 20px 14px;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 12px;
    animation: modalIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .modal-overlay-artist-page .modal-container .dismiss {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f4f4f8;
    color: #61636e;
    font-size: 16px;
    line-height: 1;
    cursor: default;
  }

  .modal-overlay-artist-page .modal-container .model-header{
    width: 100%;
    background: #80808014;
    padding: 20px 0px 15px !important;
    border-bottom: 1px solid #80808012;
    margin-bottom: 30px !important;
  }

  .modal-overlay-artist-page .modal-container .footer{
    width: 100%;
    background: #80808014;
    padding: 15px !important;
    border-top: 1px solid #80808012;
    font-family: var(--primary-extrabold) !important;
  }

  .modal-overlay-artist-page .modal-container .title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--color-primary) !important;
    margin-top: 6px !important;
    justify-content: center !important;
    font-family: var(--primary-extrabold) !important;
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .modal-overlay-artist-page .modal-container .subtitle {
    margin: 10px 0px 0px !important;
    font-size: 14px;
    color: var(--bs-body-color);
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .modal-overlay-artist-page .modal-container .spinner {
    width: 145px;
    height: 145px;
    position: relative;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 2px 0 8px;
    background:
      radial-gradient(closest-side, rgba(128, 98, 255, 0.08), transparent 70%),
      radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7) 32%, transparent 60%);
    overflow: hidden;
  }

  .modal-overlay-artist-page .modal-container .spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -90deg, transparent 0deg, #aa9dbd 90deg, #542791 180deg, rgb(179, 158, 247) 270deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 0);
    animation: spin 4800ms linear infinite;
  }

  .modal-overlay-artist-page .modal-container .spinner.fast::before {
    animation-duration: 1400ms;
  }

  .modal-overlay-artist-page .modal-container .spinner::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(111, 74, 216, 0.18), rgba(111, 74, 216, 0.06), transparent 70%);
    filter: blur(0.5px);
    animation: pulse 33000ms ease-in-out infinite;
  }

  .modal-overlay-artist-page .modal-container .sparkles {
    position: absolute;
    inset: 0;
  }

  .modal-overlay-artist-page .modal-container .sparkles span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform-origin: -50% -50%;
    transform: rotate(var(--a)) translateX(var(--r));
    filter: drop-shadow(0 2px 6px rgba(255, 212, 112, 0.6));
    animation: twinkle 10000ms ease-in-out infinite alternate;
  }

  .modal-overlay-artist-page .modal-container .sparkles span::before,
  .modal-overlay-artist-page .modal-container .sparkles span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(0deg);
    background: linear-gradient(to right, transparent, #ffd470 60%, transparent);
    border-radius: 2px;
  }

  .modal-overlay-artist-page .modal-container .sparkles span::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .modal-overlay-artist-page .modal-container .side-stars {
    position: absolute !important;
    left: 50% !important;
    top: 37% !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: twinkle 1.8s ease-in-out infinite;
}

    @keyframes twinkle {
        0% {
            opacity: 0.3;
            transform: scale(0.8);
        }
        50% {
            opacity: 1;
            transform: scale(1.2);
        }
        100% {
            opacity: 0.3;
            transform: scale(0.8);
        }
    }

  .modal-overlay-artist-page .modal-container .side-stars span {
    position: absolute !important;
    transform: translate(var(--x), var(--y)) scale(var(--s)) !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: radial-gradient(closest-side, #ffd470, rgba(255, 212, 112, 0.55) 60%, transparent 65%) !important;
    filter: drop-shadow(0 2px 6px rgba(255, 212, 112, 0.6));
    animation: starTwinkle 2200ms ease-in-out infinite !important;
    animation-delay: var(--d, 0ms) !important;
  }

  .modal-overlay-artist-page .modal-container .side-stars span::before,
  .modal-overlay-artist-page .modal-container .side-stars span::after {
    content: "";
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 14px !important;
    height: 2px !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    background: linear-gradient(to right, transparent, #ffd470 60%, transparent) !important;
    border-radius: 2px !important;
  }

  .modal-overlay-artist-page .modal-container .side-stars span::after {
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }

  .modal-overlay-artist-page .modal-container .expected {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--bs-body-color);;
    margin-top: 10px !important;

  }

  .modal-overlay-artist-page .modal-container .expected strong {
    color:  var(--bs-body-color);
    font-family: var(--primary-extrabold) !important;
  }
  .modal-overlay-artist-page .primary{
    margin-bottom: 20px !important;
  }

  .modal-overlay-artist-page .modal-container .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    height: 44px;
    border-radius: 10px !important;
    border: 0;
    background: #f0ecff;
    color: var(--color-primary);
    /* font-family: var(--primary-extrabold) !important; */
    font-weight: 600 !important;
    font-size: 15px;
    transition: background-color 220ms ease, color 220ms ease, transform 180ms ease;
  }

  .modal-overlay-artist-page .modal-container .helper {
    margin: 8px 18px 4px;
    padding: 5px 35px 20px !important;
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
    transition: opacity 220ms ease, transform 220ms ease;
  }
}

@layer utilities {
  .swap {
    animation: swapIn 240ms ease;
  }

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

  @keyframes pulse {
    0% {
      transform: scale(0.98);
    }
    50% {
      transform: scale(1.02);
    }
    100% {
      transform: scale(0.98);
    }
  }

  @keyframes twinkle {
    from {
      opacity: 0.5;
      transform: translateX(var(--r)) rotate(var(--a)) scale(0.9);
    }
    to {
      opacity: 1;
      transform: translateX(calc(var(--r) + 1px)) rotate(var(--a)) scale(1.1);
    }
  }

  @keyframes buttonPulse {
    50% {
      transform: scale(0.99);
    }
  }

  .primary.pulse {
    animation: buttonPulse 400ms ease;
  }

  @keyframes modalIn {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes swapIn {
    from {
      opacity: 0;
      transform: translateY(2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes starTwinkle {
    0% { opacity: 0.7; transform: translate(var(--x), var(--y)) scale(calc(var(--s) * 0.95)); }
    50% { opacity: 1; transform: translate(calc(var(--x) + 1px), calc(var(--y) - 1px)) scale(calc(var(--s) * 1.05)); }
    100% { opacity: 0.7; transform: translate(var(--x), var(--y)) scale(calc(var(--s) * 0.95)); }
  }
}
/* modal css end chooseArtists */

   .fun {
        position: relative;
        padding: 0 10px;
        font-size: 14px;
        min-height: 60px;
        line-height: 1.5;
        color: var(--bs-body-color);
        font-weight: 500;
        width: 100%;
        max-width: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        -webkit-backface-visibility: hidden;  /* iOS Safari stability */
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    .fun span {
        display: block;
        width: 100%;
        transition: opacity 600ms ease, transform 600ms ease;
        -webkit-transition: opacity 600ms ease, -webkit-transform 600ms ease;
        will-change: opacity, transform;
    }

    .fun span.fade-out {
        opacity: 0;
        transform: translate3d(0, 3px, 0); /* 👈 downwards */
        -webkit-transform: translate3d(0, 3px, 0);
    }

    .swap {
        animation: swapIn 600ms cubic-bezier(0.22, 1, 0.36, 1);
        -webkit-animation: swapIn 600ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes swapIn {
        from {
            opacity: 0;
            transform: translate3d(0, 3px, 0); /* 👈 from bottom */
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0px, 0);
        }
    }
    @-webkit-keyframes swapIn {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 3px, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0px, 0);
        }
    }
    .printer-status-bar{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        background: #ffff;
        color: #000;
        z-index: 9;
        padding: 0px 10px;
        border: 1px solid #80808040;
        border-radius: 0px 0px 23px 0px;
    }
    .printer-status-bar button{
        background-color: unset !important;
    }
    .kiosk-class .live-view-page{
        justify-content: space-evenly !important;
    }
    .kiosk-class .photo-tool-section {
        margin-bottom: 20px !important;
    }
}

/* ================================
   SMALL MOBILE (max-width: 380px)
   ================================ */
@media only screen and (max-width: 580px) {
    .players-section {
        padding: 3px 6.5vw !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: 70px;
    }

    .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{
      gap: 5px !important;  
    }
    .photo-tool-btn-wrapper .main-btn {
        width: 150px !important;
        font-size: 14px !important;
        padding: 5px 10px !important;
    }
    .photo-tool-section .title{
        font-size: 26px !important;
    }

    /* 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;
    }
    .background-page .players-section {
        padding: 0px 30px 70px !important;
    }

    .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: 105px;
    } */
    
    .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: 250px;
        height: 250px;
    }

    .player-img {
        width: 230px;
        height: 230px;
    }
    .head-div .player-head{
        font-size: 18px;
    }
    .players-section {
        gap: 20px;
        padding: 0px 40px;
    }

    .question {
        font-size: 38px;
    }

    .bg-para {
        font-size: 25px;
    }
    .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);
        position: relative;
        cursor: pointer;
    }
        .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;
        }
        /* Loader and button styles for passcode form */
        .staging-body .loader {
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 0.8s linear infinite;
            vertical-align: middle;
            margin-left: 8px;
        }

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

        .staging-body button.loading .btn-text {
            opacity: 0.6;
        }

        .staging-body button.loading .loader {
            display: inline-block !important;
        }
    /* End loader styles */
    /* 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;
        }
        .photo-tool-section .swiper-wrapper{
            font-size: 15px;
        }
        .photo-tool-btn-wrapper .main-btn {
            font-size: 12px !important;
            min-width: unset !important;
            padding: 5px 10px !important;
            border-radius: 2px 2px 18px 2px !important;
        }
        .photo-tool-btn-wrapper{
            gap: 20px;
        }

    }
    /* 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;
    }
     .proximus-form-section:not(.landscape-page) {
        display: block !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: absolute;
      display: inline-block;
      width: 102%;
      height: 102%;
    }

    .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: 820px) {
        .pb-170 {
            padding-bottom: 200px !important;
        }
    }

    @media (max-width: 768px) {
      /* .image-loader .image-loader {
        width: 100px;
        height: 100px;
      }
      .image-loader .player-img-wrapper {
        border: unset;
      } */
    .photo-tool-section .w-25{
        width: 45% !important;
    }
    }
    @media (max-width: 560px) {
    /* .player-img {
        width: 160px;
        height: 160px;
    } */
    /* .players-section .image-loader {
        width: 165px;
        height: 165px;
        margin-top: 3px;
     } */
    .pb-170 {
        padding-bottom: 140px !important;
    }
    }

    @media (max-width: 480px) {
    .image-loader .image-loader {
        width: 90px;
        height: 90px;
      }
    .photo-tool-section .w-25 {
        width: 50% !important;
    }
    .photo-tool-section .swiper-wrapper{
        font-size: 15px !important;
    }
}

/* 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;
    }
    .filter-video-h .captured-img
    {
        height: unset !important;
    }
    .filter-page .photo-video-section{
        height: 78%;
        overflow: hidden;
    }
    .image-left{
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0;
        /* z-index: 2; */
    }
    .image-right{
        position: absolute;
        width: 100%;
        top: 0px;
        right: 0;
        /* z-index: 2; */
    }
    .position-center {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        /* z-index: 2; */
    }
    .position-right{
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        /* z-index: 2; */
    }
    .splash-screen-overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.85);
        z-index: 99999999;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto !important;
    }
    .splash-screen-overlay *{
        pointer-events: none;
    }
    .splash-screen-overlay .splash-image{
        width: 100vw; 
        height: 100vh;
    }
    .video-reel .photo-tool-section{
        padding: 0px !important;
    }
    .video-reel .photo-tool-section .photo-tool-btn-wrapper{
        justify-content: space-between !important;
    }

/* ********************* */

/* portrait-page */
    .portrait-page .logo-div-3 {
        display: none;
    }

    .portrait-page .position-relative{
        margin: auto;
    }

@media only screen and (max-width: 400px) {
    .portrait-page .ph-vd-div {
        /* width: 80%; */
        text-align: center;
        margin: auto;
    }
}

@media only screen and (max-width: 1024px){
    .portrait-page .ph-vd-div {
    width: 90%;
    text-align: center
    }
}
  
/* landscape-page */
   .landscape-page .logo-div-2 {
        display:none;
    }
    .landscape-page .choose-div{
        justify-content: center !important;
    }
    .landscape-page {
        display: flex;
    }
    .landscape-page .left{
        order: 3;
    }
    .landscape-page .right{
        order: 0;
    }
   
    @media (min-width: 768px) and (max-width: 1025px) {
    .landscape-page .portrait-video video .portrait-video {
        height: 390px !important;
        width: 575px !important;
    }
    .video-real-page .ph-vd-div {
        width: 72%;
    }

    .landscape-page{
        align-items: center;
    }

    .landscape-page .main-header .position-absolute{
        top:0;
        left: 15px;
        z-index: 3;
    }
}

    /* Small-Mobile Landscape */
   @media (min-width: 500px) and (max-width: 999px) {
     
    .landscape-page .photo-video-section {
        width: auto;
        height: 75%;
        margin: auto 0;
    }
}
    /* Mobile Landscape */
   @media (min-width: 670px) and (max-width: 999px) {
     
    .landscape-page .photo-video-section {
        width: auto;
        height: 100%;
    }
}

    /* Tablet Landscape */
   @media (min-width: 1000px) and (max-width: 1024px) 
    and (orientation: landscape) {
    
        .landscape-page .photo-video-section {
        width: 75%;
        height: 510px;
    }
}
   
/* ********************** */
    
@media (min-width: 980px) and (max-width: 1024px) {
  .portrait-video,
  .portrait-video video,
  .portrait-video .image
  { 
    height: 925px !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;
    }
    .sutter-img {
        width: 80% !important;
        margin-bottom: 5px !important;
    }
    .category-img,
    .image-loader {
        margin-bottom: -17px !important;
    }
    .player-img{
        width: 230px !important;
        height: 230px !important;
    }
    .head-div .player-head{
        font-size: 18px;
    }
    .check-player {
        width: 50px;
        height: 50px;
    }
}
@media (min-width: 600px) and (max-width: 980px) {
    .portrait-video,
    .portrait-video video,
    .portrait-video .image
    {
        height: 750px !important;
        width: 470px !important;
    }
    .webcam,
    .portrait-video video,
    .portrait-video .image
    {
        height: 700px !important;
        width: 470px !important;
    }
    .upload-category .category-img
    {
        width: 150px !important;
        height: 150px !important;
    }

    .video-page-height .photo-video-section {
        height: 745px !important;
    }
    .webcam-recorder .photo-video-section {
        height: 690px !important; 
    } 
    .photo-tool-section .swiper-wrapper{
        font-size: 18px;
    }
    .photo-tool-section {
        height: 110px;
    }
    .photo-tool-btn-wrapper .main-btn {
        padding: 5px !important;
    }
}

@media (min-width: 980px) and (max-width: 1024px) {
  .portrait-video,
  .portrait-video video,
  .portrait-video .image
  {
    width: 615px !important;
  }
}
@media (min-width: 831px) and (max-width: 980px) {
    .webcam-recorder .captured-img-wrapper .captured-img {
        max-width: 378px !important;
    }   
}


/* .webcam-recorder .live-view-page{
    justify-content: unset !important; 
} */

/* Loader and button styles for passcode form */
button {
    position: relative;
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
}

.loader {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}

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

button.loading .btn-text {
    opacity: 0.6;
}

button.loading .loader {
    display: inline-block !important;
}
/* End loader styles */
.video-countdown{
    width: 6vh;
    height: 6vh;
    background-color: var(--color-red);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    font-family: var(--primary-bold);
    margin-top: 30px;
}

.bg-para {
    padding: 12px 20px;
    font-family: var( --primary-light);
    font-size: 18px;
}

.bg-para-2{
    padding: 12px 20px;
    color: var( --color-primary);
}

.body:has(.selected) .bg-pb-170 {
    padding-bottom: 140px !important;
    min-height: unset !important;
}

.photo-tool-section .swiper-wrapper{
    color: var(--color-white);
    font-size: 20px;
}
.proximus-photo-section .photo-video-wrapper .item-btn.active {
    color: #c8ab54;
}
.selfie-page-section .swiper {
 overflow: unset !important;
}
.selfie-page-section .w-25{
    width: 80% !important;
}
.selfie-page-section .item-btn{
    font-size: 15px !important;
}
.webcam-recorder .mt-5{
    margin-top: 0px !important;
}

.selfie-page .video-countdown{
    width: 80px !important;
    height: 80px !important;
}
.selfie-page .sutter-img {
    width: 80px !important;
}
.camera-error-msg{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    width: 90%;
    max-width: 420px;
    font-family: var(--primary-regular) !important;
}
.camera-error-msg .msg-modal{
    width:100%;
    background:rgba(40,40,40,0.85);
    border-radius:20px;
    text-align:center;
    padding:20px 25px;
    color:white;
    box-shadow:0 20px 40px rgba(0,0,0,0.6);
}
.camera-error-msg .camera-icon{
    font-size:40px;
    margin-bottom:12px;
}
.camera-error-msg .msg-modal h2{
    font-size:22px;
    margin-bottom:10px;
}
.camera-error-msg .msg-modal p{
    font-size:15px;
    color:#d3d3d3;
    line-height:1.5;
    margin-bottom:20px;
}
.camera-error-msg .divider{
    height:1px;
    background:#555;
    margin-bottom:15px;
}
.camera-error-msg .retry-btn{
    background:none;
    border:none;
    color:#4da3ff;
    font-size:17px;
    cursor:pointer;
}
.camera-error-msg .retry-btn:hover{
    text-decoration:underline;
}

@media (max-width:480px){
    .camera-error-msg{
        width:80%;
    }
    .camera-error-msg .msg-modal{
        padding: 15px 20px;
    }
    .camera-error-msg .camera-icon{
        font-size:34px;
    }
    .camera-error-msg .msg-modal h2{
        font-size:20px;
    }
    .camera-error-msg .msg-modal p{
        font-size:14px;
    }
    .camera-error-msg .retry-btn{
        font-size:16px;
    }
}
.flash-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    opacity: 1;
    z-index: 9999;
    pointer-events: none;
    transition: opacity 0.3s;
}

.print-page {
    min-height: 100vh;
    width: 100%;
    font-family: var(--primary-font) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: var(--color-white);
    position: absolute;
    z-index: 1000;
    overflow: hidden;
}

.not-available {
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.not-available h5 {
    font-size: 22px;
    font-weight: 600;
}
.prompt-btn-wrapper {
    margin-top: 20px;
}
    .mode-select-model{
    position: fixed;
    inset: 0;
    background: #fff;
    /* backdrop-filter: blur(6px); */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: hidden;
}
.mode-select-model .modal-card {
    animation: modalIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
    position: relative;
    background-color: #fff;
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 32px;
    padding: 48px 38px 40px;
    width: 400px;
    max-width: 93vw;
    overflow: hidden;
    box-shadow:
    0 40px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.1) inset;
    animation: modalIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both, borderGlow 4s ease-in-out infinite;
}
.mode-select-model .main-btn:hover{
    color: #fff !important;
}
    .mode-select-model .close-btn {
        position: absolute;
        top: 18px; right: 18px;
        background: rgb(89 46 148 / 20%);
        border: 1px solid rgba(255,255,255,0.1);
        color: var(--color-primary);
        width: 34px; height: 34px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 12px;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.25s ease;
        z-index: 10;
        backdrop-filter: blur(8px);
    }

    .mode-select-model .modal-title {
        color: var(--color-primary);
        font-size: 22px;
        font-weight: 800;
        padding: 0px 25px;
        line-height: 1.3;
        margin: 0 0 8px;
        letter-spacing: -0.5px;
        position: relative; z-index: 1;
        animation: titleGlow 3s ease-in-out infinite;
    }
    .mode-select-model .modal-sub {
        color: var(--color-black);
        font-size: 13px;
        font-weight: 300;
        margin: 0 0 32px;
        padding: 0px 25px;
        line-height: 1.5;
        position: relative; z-index: 1;
    }
    .mode-select-model .divider {
        display: flex; align-items: center; gap: 12px;
        margin: 6px 0;
        position: relative; z-index: 1;
    }
    .mode-select-model .divider-line {
        flex: 1; height: 1px;
        background: white;
    }
    .mode-select-model .divider-text {
        color: white;
        font-size: 11px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .mode-select-model .photo-button {
        background-color: #5b2d92; 
        color: #fff;
        border: none;
    }
    .mode-select-model .video-button {
        background-color: #ccc0da; 
        color: #4B1D8F;
        border: none;
    }

        /* Landscape Mode Optimization */
@media screen and (orientation: landscape) {

  .mode-select-model {
    align-items: center;
    overflow-y: hidden;
    padding: 20px 0;
  }

  .mode-select-model .modal-card{
    width: 400px;
    max-width: 92vw;
    padding: 28px 28px 26px;
  }

  .mode-select-model .modal-title{
    font-size: 18px;
  }

  .mode-select-model .modal-sub{
    font-size: 12px;
    margin-bottom: 20px;
  }

  .mode-select-model .capture-btn{
    padding: 14px 16px;
    gap: 12px;
  }

  .mode-select-model .btn-icon-wrap{
    width: 42px;
    height: 42px;
  }

  .mode-select-model .btn-icon{
    font-size: 24px;
  }

  .mode-select-model .btn-label{
    font-size: 14px;
  }

  .mode-select-model .btn-desc{
    font-size: 11px;
  }

  .mode-select-model .footer-note{
    margin-top: 14px;
    font-size: 10px;
  }
}


@media (min-width: 1024px) {
    .not-available h5 {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .not-available h5 {
        font-size: 18px;
    }
    .live-view-page {
        justify-content: space-evenly !important;
    }
     .video-reel .photo-tool-section{
        padding: 0 40px !important;
    }
    .photo-tool-btn-wrapper .main-btn {
        width: 130px !important;
    }
    .photo-tool-section{
        height: 100px !important;
    }
    .sutter-img{
        width: 60%;
    }

}
@media (max-width: 980px) and (max-height: 480px) and (orientation: landscape) {
  .selfie-page .video-countdown{
      width: 55px !important;
      height: 55px !important;
  }

  .selfie-page .sutter-img {
      width: 55px !important;
  }
}
@media (min-width: 980px) and (max-width: 1024px) and (orientation: portrait){
    .photo-tool-btn-wrapper .main-btn {
        width: 260px !important;
        font-size: 22px !important;
    }
}
@media (min-width: 580px) and (max-width: 960px){
    .webcam-recorder .overlay-image{
        height: 95% !important;
    }
}