#PBarNextFrameWrapper {
     display: none;
   }
   #backgroundPopup {
     display: none;
     position: fixed;
     _position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     background: rgb(117 117 117 / 24%);
     z-index: 1;
   }
   .sectionPurchase {
     height: 100%;
     position: relative;
     max-width: 1344px;
     background-color: #fff;
     padding: 0;
     overflow: hidden; /* Changed from auto to hidden */
     display: flex;
     flex-direction: column;
   }
   .sectionPurchase.purchaseAddonSpotify {
     max-width: 1070px!important;
     max-height: 765px!important;
   }
   .sectionPurchaseBoard {
     max-width: 872px!important;
     max-height: 821px!important;
   }
   .purchaseAddonSpotify .btn-action {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     display: flex;
     gap: 10px;
   }
   .wrapperPurchase {
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   
   /* New styles for scrollable content and sticky button */
   .purchase-content {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 20px;
   }
   
   .purchase-button-wrapper {
     position: sticky;
     bottom: 0;
     background-color: #fff;
     border-top: 1px solid #e0e0e0;
     padding: 15px 0;
     margin-top: auto;
     z-index: 10;
   }
   
   .purchasePopup {
     display: none;
     position: fixed;
     background: rgb(117 117 117 / 24%);
     z-index: 999;
     padding: 40px;
     font-size: 13px;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
   .popupPurchaseClose{
     font-size:14px;
     line-height:14px;
     right:45px;
     top:45px;
     position:absolute;
     color:#6fa5fd;
     font-weight:700;
     display:block;
     cursor: pointer;
   }
 
   .headerPurchase {
     margin-bottom: 30px;
     display: flex;
     justify-content: space-between;
   }
 
   .headerPurchase h3 {
     font-size: 16px;
     text-transform: uppercase;
   }
 
   .sectionPurchaseBoard .headerPurchase {
     margin-bottom: 15px;
   }
 
   .sectionPurchaseBoard .formAddressPurchase {
     padding-top: 0;
   }
 
   .purchaseArea {
     position: relative;
     height: 100%;
   }
 
   .purchaseArea h4 {
     width: 100%;
     font-size: 12px;
     font-weight: 600;
     margin-bottom: 10px;
     text-transform: uppercase;
   }
 
   .menuPurchase {
     margin-bottom: 30px;
   }
 
   .menuPurchase ul {
     list-style-type: none;
     margin: 0;
   }
 
   .menuPurchase ul li {
     display: inline-block;
     border: 1px solid #ffffff;
     padding: 5px 20px;
     margin-right: 5px;
     margin-bottom: 10px;
     font-size: 12px;
     font-weight: 400;
   }
 
   .menuPurchase ul li:hover, .menuPurchase ul li.selected {
     background-color: #ffffff;
     color: #ffffff;
   }
 
   .contentPurchase h5 {
       font-size: 12px;
       margin-bottom: 10px;
       font-weight: 400;
       overflow: hidden;
   }
 
   /* Card */
 
   #itemCards {
     max-height: 430px;
     overflow: auto;
   }
 
   .item-cards {
       width: 100%;
   }
   .item-card.selected {
       border: 1px solid #ffffff;
   }
   .item-card:hover {
       border: 1px solid #C4C4C4;
   }
   .item-cards .item-card {
     position: relative;
     width: calc(33% - 10px);
     max-width: calc(33% - 10px);
     flex: 0 0 calc(33% - 10px);
     margin-bottom: 20px;
   }
   .item-cards .item-card label,
   .item-addons .item-addon label {
       position: absolute;
       left: 0;
       width: 100%;
       height: 100%;
   }
   .item-cards .item-card .card-image img,
   .item-addons .item-addon .card-image img {
       display: block;
       width: 100%;
   }
   .item-card .card-meta,
   .item-addon .card-meta {
       padding: 10px 5px 5px;
   }
   .item-card.selected .card-meta,
   .item-addon.selected .card-meta,
   .item-card.selected .card-qty {
       background-color: #ffffff;
       color: #fff;
       visibility: visible!important;
   }
   .item-card:hover .card-meta,
   .item-addon:hover .card-meta,
   .item-card:hover .card-qty {
       background-color: #C4C4C4;
       color: #fff;
       visibility: visible!important;
   }
   .item-cards .item-card p,
   .item-addons .item-addon p {
     font-size: 12px !important;
     margin: 0;
     font-weight: 600;
   }
   .item-card .card-meta input,
   .item-addon .card-meta input {
       display: none;
   }
   .item-cards .item-card h5,
   .item-addons .item-addon h5 {
     text-transform: uppercase;
     max-height: 35px;
   }
 
   @media (max-width: 768px) {
     .item-cards .item-card {
         width: calc(50% - 10px);
         max-width: calc(50% - 10px);
         flex: 0 0 calc(50% - 10px);
         margin-bottom: 0;
     }
   }
 
   .card-qty {
     display: flex;
     padding: 5px;
     visibility: hidden;
     background-color: #fff !important;
     z-index: 999;
   }
   .card-qty a {
     border-width: 1px;
     width: 30%;
     cursor: pointer;
     text-align: center;
     align-self: center;
     height: 28px;
     display: block;
     position: relative;
   }
   .card-qty a svg {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
   }
   input.btn-qty {
     border-width: 0px;
     border-radius: 0;
     background-color: #fff;
     -webkit-appearance: none;
     box-shadow: none !important;
     -webkit-box-shadow: none !important;
     -moz-box-shadow: none!important;
     width: 40%;
     border-left: 1px solid #c4c4c4;
     border-right: 1px solid #c4c4c4;
     padding: 0;
   }
 
   .sectionPurchaseBoard #itemAddons .item-card {
     width: calc(20% - 15px);
     max-width: calc(20% - 15px);
     flex: 0 0 calc(20% - 15px);
   }
 
   .purchase-button {
     width: 100%;
     padding: 0; /* Reset padding as it's now handled by wrapper */
     margin: 0;
   }
 
   .sectionPurchaseBoard .purchase-button {
     margin-top: 0 !important; /* Reset margin */
   }
 
   .back-purchase-button, .back-spotify {
       width: 139px;
       border: 1px solid;
       height: 43px;
   }
   .purchase-button .btn {
     width: 297px;
     height: 43px;
     background-color: #ffffff;
     color: #ffffff;
   }
   .purchase-button .btn[disabled] {
     background-color: #EEEEEE;
   }
   .back-purchase-button svg, .back-spotify svg {
     align-self: center;
     vertical-align: middle;
     margin-right: 10px;
   }
 
   #purchaseProduct .row .error {
     font-size: 12px !important;
     color: orange;
     margin-top: 5px;
   }
 
   .reviewCardPurchase {
     max-width: 448px;
     float: right;
   }
 
   .addonsPurchase .addon-item {display: flex;justify-content: space-between;}
   .addon-item * {align-self: center;font-size: 12px;}
   .addon-itm-title {width: 360px;}
   .addon-itm-line-price {color: #757575;width: 80px;justify-content: space-between;display: flex;}
 
   .propsAddonSpotify p {
     margin: 0;
     display: flex;
     font-size: 12px !important;
     margin-bottom: 5px;
   }
   .propsAddonSpotify p span:first-child {
     text-transform: uppercase;
     font-weight: 600;
     -ms-flex: 0 0 150px;
     flex: 0 0 150px;
     max-width: 150px;
   }
 
   .addonsPurchase .addons {
     max-height: 250px;
     overflow: auto;
   }
 
   .btn .loading:after {
     content: "";
     display: inline-block;
     width: 20px;
     height: 20px;
     padding: 3px;
     aspect-ratio: 1;
     border-radius: 50%;
     background: #FFFFFF;
     --_m: conic-gradient(#0000 10%, #ffffff), linear-gradient(#ffffff 0 0) content-box;
     -webkit-mask: var(--_m);
     mask: var(--_m);
     -webkit-mask-composite: source-out;
     mask-composite: subtract;
     animation: l3 1s infinite linear;
     margin: auto;
     vertical-align: middle;
     margin-left: 10px;
   }
 
   #qrcode img, #qrcode canvas {
     width: 50px;
     position: absolute;
     top: 12px;
     left: 16px;
   }
 
   .t-preview {
     position: absolute;
     top: 17px;
     left: 75px;
   }
   .t-preview p {
     margin: 0;
     font-size: 12px !important;
   }
   .t-preview .h3 {
     font-size: 16px !important;
     margin-bottom: 5px;
     font-weight: 600;
   }
   .scanCard {
     width: 100%;
     border: 1px solid;
     height: 76px;
     background-color: #fff;
   }
   .scanCard > div > img {
     position: absolute;
     right: 0;
     width: 55px;
   }
 
   @keyframes l3 {
     100% {
       transform: rotate(1turn);
     }
   }
 
   @media (min-width: 991px) {
     .sectionPurchase {
       height: 100%;
       position: relative;
       max-width: 1344px;
       background-color: #fff;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
     .headerPurchase h3 {
       font-size: 20px;
     }
     .purchaseArea h4 {
       font-size: 16px;
     }
 
     .menuPurchase ul li {
         font-size: 16px;
     }
     
     .contentPurchase {
       margin-bottom: 30px;
     }
     .contentPurchase h5 {
       font-size: 16px;
     }
 
     .item-cards .item-card p,
     .item-addons .item-addon p {
       font-size: 16px !important;
     }
 
     .cards {
       float: right;
       width: 400px;
     }
 
     .item-cards .item-card {
       width: calc(25% - 30px);
       max-width: calc(25% - 30px);
       flex: 0 0 calc(25% - 30px);
     }
 
       #itemAddons .item-card {
         position: relative;
         width: calc(16% - 40px);
         max-width: calc(16% - 40px);
         flex: 0 0 calc(16% - 40px);
       }
       
     .purchase-button-wrapper {
         padding: 10px 20px;
     }
   }
 
   @media (max-width: 1200px) {
     .item-cards .item-card {
       width: calc(33% - 30px);
       max-width: calc(33% - 30px);
       flex: 0 0 calc(33% - 30px);
     }
   }
 
   @media (max-width: 992px) {
     .purchasePopup {
       padding: 0;
     }
     .item-cards .item-card h5,
     .item-addons .item-addon h5 {
       max-height: 30px;
     }
 
     .back-purchase-button, .back-spotify, .next-purchase-button {
         width: 100%;
     }
     .addon-itm-title {
       width: 300px;
     }
     .addon-itm-line-price {
       margin-right: 10px;
     }
     .t-preview {
       top: 10px;
     }
 
     .card-qty a {
       height: 15px;
     }
     
     .purchase-button-wrapper {
       padding: 15px;
     }
   }
 
   @media (max-width: 576px) {
     .purchase-button .btn {
         width: 100%!important;
     }
     .purchase-button > .col-12 {
       padding-left: 0;
       padding-right: 0;
     }
   }