@font-face {
  font-family: 'inter-bold';
  src: url(font/Inter_24pt-Bold.ttf);
}
@font-face {
  font-family: 'inter-light';
  src: url(font/Inter_24pt-Light.ttf);
}
@font-face {
  font-family: 'inter-medium';
  src: url(font/Inter_24pt-Medium.ttf);
}
@font-face {
  font-family: 'inter-regular';
  src: url(font/Inter_24pt-Regular.ttf);
}
@font-face {
  font-family: 'inter-semibold';
  src: url(font/Inter_24pt-SemiBold.ttf);
}

*{ 
    font-family: 'inter-medium';
}
.screen-block{
    border: 1px solid #D0D5DD;
    padding: 4px 16px 16px 16px;
    margin-bottom: 20px; 
    flex-direction:column;
    border-radius:8px;
}

.mobile-screen{
    max-width:650px;
    width:100%;
    min-height:560px;
    background:#fff;
    border-radius:4px;
    margin:0 auto;
}

.logo{
    text-align:center;
}

.rev-logo{
    font-size:34px;
    color:#6D28D9;
}

.rev-text{
    font-size:18px;
    font-weight:700;
}

.banner{
    width:100%;
    border-radius:4px;
    background:#f3f3f3;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.title{
    font-size:24px;
    font-family: 'inter-semibold';
    color:#222;
    margin-top:10px;
    line-height:1.4;
}

.subtitle{
    color:#999;
    font-size:16px;
    margin-top:6px;
    line-height:1.5;
    font-family: 'inter-medium';
    margin-bottom: 12px;
}

.highlight{
    color:#680eda;
    font-family:'inter-semibold';
}

.google-btn{ 
    display: flex;
    height: 56px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Neutrals-Grey-200, #F5F5F5);

    /* Shadow/xs */
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Gray-700, #344054);

    /* Text md/Semibold */
    font-family: 'inter-semibold';
    font-size: 16px;
    width:100%; margin-top: 16px;
}

.field{
    margin-top:10px;
}

.field label{
    display:block;
    margin-bottom:5px;
    font-size:14px;
    color:#3d3d3d;
    font-family:'inter-semibold';
}
.back-btn { 
    color: #1F1F1F;
    font-family: 'inter-semibold';
    font-size: 16px;
}
.select{
    width:100%;
    height:56px;
    border:1px solid #ddd;
    border-radius:6px;
    padding:0 10px;
    font-size:15px;
}

.info-box{
    margin-top:10px;
    background:#f7f7f7;
    border-radius:6px;
    padding:10px;
    font-size:16px;
    color:#7a7a7a;
     font-family: 'inter-regular';
}
.info-box > span{
    background:#f7f7f7;
    font-size:16px;
    color:#3d3d3d;
    font-family: 'inter-bold';
}

.checkbox-wrap{
    display:flex;
    gap:8px;
    margin-top:12px;
    font-size:14px;
    color:#666;
}

.checkbox-wrap input{
    margin-top: initial;
    accent-color:#6D28D9;
}

.primary-btn{
    width:100%;
    height:56px;
    border:none;
    border-radius:8px;
    margin-top:15px;
    background:#680eda;
    color:#FAF9F8;
    font-family:'inter-medium';
    cursor:pointer;
    font-size:15px;
    display: flex;
    align-items:center;
    justify-content: center;
    gap:4px;
}

.footer-note{
    margin-top:8px;
    color:#999;
    font-size:13px;
    text-align: center;
}

/* Loading Card */

.loading-card{
    width:140px;
    height:70px;
    background:#fff;
    border-radius:4px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-top:185px;
}

.loading-card i{
    color:#888;
    font-size:18px;
    margin-bottom:8px;
}

.loading-card span{
    font-size:11px;
    color:#444;
}




/* =========================
   SCREEN 4
========================= */

.top-feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.top-feature-card{
    background:#F5F3FF;
    border-radius:8px;
    padding:12px;
    text-align:center;
    min-height:80px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
}

.top-feature-card i{
    color:#7C3AED;
    font-size:30px;
}

.top-feature-card span{
    font-size:13px;
    color:#555;
    line-height:1.4;
}

.top-feature-single{
    margin-top:10px;
    background:#F5F3FF;
    border-radius:8px;
    padding:14px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.top-feature-single i{
    color:#7C3AED;
    font-size:22px;
}

.top-feature-single span{
    font-size:13px;
    color:#555;
}

.pricing-card{
    margin-top:15px;
    border:1.5px solid #5F0DC6;
    border-radius:17px;
    /* padding:14px; */
}

.save-badge{
    display:inline-block;
    background:#F5F0FB;
    color:#680eda;
    font-size:14px;
    padding:6px 10px;
    border-radius:20px;
    margin-bottom:12px;
    font-weight:500;
}

.price{
    font-size:32px;
    font-family: 'inter-bold';
    color:#680eda;
}

.price span{
    font-size:16px;
    color:#680eda;
    font-family: 'inter-medium';
}

.old-price{
    color:#D6D6D6;
    text-decoration:line-through;
    font-size:16px;
   
    font-family: 'inter-regular';
}

.yearly-note{
    margin-top:8px;
    color:#3D3D3D;
    font-size:16px; 
    font-family: 'inter-semibold';
}

.feature-list{
    list-style:none;
    margin-top:14px;
    padding-left: 8px;
}

.feature-list li{
    color:#5c5c5c;
    display:flex;
    gap:10px;
    align-items:center;
    font-size:16px;
    margin-bottom:12px;
}

.feature-list i{
    color:#680eda;
}

.claim-btn{
    width:100%;
    height:42px;
    border:none;
    border-radius:8px;
    background:#6D28D9;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    margin-top:10px;
}

.cancel-note{
    text-align:center;
    color:#999;
    font-size:10px;
    margin-top:10px;
}


/* screen 2 */

.service-alert{
    font-family:'inter-medium';
    border:0.5px solid #D93E39;
    background:#FDECEC;
    color:#D93E39;
    padding:12px;
    border-radius:8px;
    margin:20px 0;
    font-size:16px;
}

.service-card{
    background: white; 
    border-radius:8px;
    padding:1px  16px;
    margin-bottom:16px;
}

.service-card h3{
    color:#680eda;
    font-size:16px;
    font-family: 'inter-semibold';
    margin-bottom:15px;
    margin-top: 12px;
}

.sub-category{
    margin-bottom:18px;
}

.sub-category h4{
    font-size:14px;
    font-family: 'inter-semibold';
    color:#3d3d3d;
    margin-bottom:10px;
}

.service-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.service-box{
    height:42px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    padding:0 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}

.service-box.active{
    border:1px solid #8b5cf6;
    background:#f5f0ff;
}

.service-box span{
    font-size:15px;
    color:#1f1f1f; 
    font-family: 'inter-medium';
    line-height: 1.2;
}

.service-box input{
    width:14px;
    height:14px;
    accent-color:#7c3aed;
}

.audit-btn{
    width:100%;
    border:none;
    height:54px;
    border-radius:16px;
    background:#6d28d9;
    color:#fff;
    font-size:20px;
    font-weight:600;
    margin-top:10px;
    cursor:pointer;
}

.audit-btn i{
    margin-left:8px;
}

/* Screen 3 */
.profile-card{
    background:#fff;
    border-radius:14px;
    margin-top:8px;
    overflow:hidden;
}
.save-badge1 {
    display: flex;
    padding: 4px 12px;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, #680EDA 0%, #B072FE 100%);
    color: white;
    width:max-content;
    font-size:14px;
    font-family: 'inter-regular';
}
.business-info{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px;
}

.business-logo{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:8px;
    background:#eef2ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#4285F4;
    flex-shrink:0;
    overflow:hidden;
}

.business-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:8px;
}

.business-info h3{
    color: #1f1f1f;
    margin:0;
    font-size:16px;
    font-family: 'inter-semibold';
}

.business-info p{
    margin:0;
    color:#7a7a7a;
    font-size:14px; 
    font-family:'inter-regular';
}

.stats-row{
    display:flex;
    border-top:1px solid #eee;
}

.stat-box{
    flex:1;
    text-align:center;
    padding:2px 8px 8px 8px;
}

.stat-box:first-child{
    border-right:1px solid #eee;
}

.stat-box span{
    color:#7a7a7a;
    font-size:12px;
    font-family:'inter-regular';
}

.stat-box h4{
    margin-top:5px;
    font-size:20px;
    font-family:'inter-bold';
    margin-bottom: 1px; 
}

.issue-section{
    background:#fff;
    margin-top:15px;
    border-radius:14px;
    padding:15px;
}

.issue-section h4{
    margin-top:0px; 
    margin-bottom:12px;
    font-family:'inter-semibold';
    color: #3d3d3d;
    font-size: 16px; 
}
.issue-section-h4{
    margin-top:16px; 
    margin-bottom:12px;
    font-family:'inter-semibold';
    color: #3d3d3d;
    font-size: 16px; 
}
.issue{
    padding:12px;
    border:1px solid #ff9c9c;
    background:#fff5f5;
    color:#D93E39;
    border-radius:8px;
    margin-bottom:10px;
    font-size:14px;
    font-family: 'inter-regular';
}
.issue > span {
    font-family:'inter-semibold';
    }

.issue.success{
    background:#f0fff4;
    border-color:#9ae6b4;
    color:#16a34a;
}

.audit-box{
    margin-top:14px;
    background:#fff;
    border:1px solid #ff9c9c;
    border-radius:12px;
    padding:15px;
    color: #3d3d3d;
}

.audit-box h5{
    color:#D93E39;
    margin-bottom:10px;
    font-family:'inter-semibold';
    margin-top:0px; 
    font-size: 14px; 
    padding-bottom: 9px; 
    border-bottom: 0.5px solid #D6D6D6; 
}

.audit-box p{
    font-size:16px;
    color: #3d3d3d;
    margin:0;
    font-family: 'inter-regular';
}
.audit-box p > b{ 
font-family: 'inter-semibold';
}

.audit-box small{
    display:block;
    margin-top:8px;
    color:#3d3d3d;
    font-size:14px; 
    font-family: 'inter-semibold';
}

.keywords{
    margin-top:10px;
    color:#3d3d3d;
    font-size: 14px;
    font-family: 'inter-regular';
}

.rank-card{
    margin-top:15px;
    background:#fff;
    border-radius:12px;
    padding:15px;
}

.rank-title{
    font-size:16px;
    margin-bottom:10px;
    color: #3D3D3D
}
.rank-title > span{
    font-family: 'inter-bold';
}

.rankSp{
    font-size:28px !important;
    color:#D93E39 !important;
    font-family: 'inter-bold' !important;
    margin-bottom:15px !important;
}

.rank-number span{
    font-size:16px;
    color:#7a7a7a;
   font-family: 'inter-medium';
}

.rank-table{
    width:100%;
    border-collapse:collapse;
}

.rank-table th{
    background:#f5f5f5;
    text-align:left;
    padding:8px;
    color: #3d3d3d;
    font-size:14px;
    font-family: 'inter-regular';
}

.rank-table td{
    padding:10px;
    border-bottom:1px solid #eee;
    color: #7a7a7a;
}
.you-row > td {
    color: #D93E39; 
    font-family:'inter-semibold';
}

.you-row{
    border: 1px solid #D93E39;
    background:#fff4f4;
    color:#D93E39;
    
}

.you-row span{
    float:right; font-family:'inter-semibold';
}

.rank-note{
    margin-top:15px;
    font-size:16px;
    color:#999;
    font-family:'inter-regular';
}
.rank-note > span{
    color:#3d3d3d;
    font-family:'inter-semibold';
}

.fix-btn{
    width:100%;
    height:56px;
    border:none;
    border-radius:16px;
    background:#6d28d9;
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-top:18px;
}


/* Screen 4 */

.ai-fixed-box{
    border:1px solid #A855F7;
    background:#F5F3FF;
    border-radius:10px;
    padding:12px;
    display:flex;
    gap:10px;
    margin:15px 0;
    align-items: center;
}

.ai-icon{
    display: flex; 
    
    gap:20px;
    font-size:24px;
    color:#7C3AED;
}

.ai-title{
    font-size:16px;
    font-family: 'inter-semibold';
    color:#6D28D9;
}

.ai-sub{
    margin-top: 4px; 
    font-size:12px;
    color:#7a7a7a;
    font-family:'inter-regular';
}

.review-section{
    background:#fff;
    border-radius:12px;
    padding:14px;
    margin-top:15px;
}

.review-section h3{
    font-size:16px;
    font-family: 'inter-semibold';
    padding-bottom:8px;
    color: #3d3d3d;  
    margin-top: 1px;
    border-bottom: 0.5px solid  #D6D6D6;
}
.review-section h4{
    font-size:20px;
    font-family: 'inter-semibold';
    padding-bottom:4px;
    color: #3d3d3d;  
    margin-top:0; margin-bottom: 0px;
}
.review-section p{
color: #7a7a7a; font-size:14px; font-family: 'inter-regular';
}
.review-card{
    border:1px solid #eee;
    border-radius:10px;
    margin-bottom:12px;
    overflow:hidden;
    background: #f5f5f5;
}

.review-header{
    display:flex;
    align-items:center;
    padding:10px;
    gap:10px;
}

.review-header img{
    width:48px;
    height:48px;
    border-radius:50%;
}

.review-user{
    flex:1;
}
.review-user > strong {
 color: #1f1f1f; font-family: 'inter-regular';
}

.review-user small{
    display:block;
    color:#7a7a7a;
    margin-top: 4px;
    font-size:14px;
    font-family: 'inter-regular';
}

.rating{
    font-family: 'inter-bold';
}

.review-card p{
    padding:0 10px 10px;
    margin:0; 
    font-size: 16px; 
    color: #3d3d3d;
}
.post-reply-Btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    margin:4px 12px 12px 0px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid  #680EDA;
    background: #680EDA ;
    color: #FFF;
    font-size: 14px;
    font-family: 'inter-regular';
}
.ai-badge.ai-blink {
    animation: aiBadgeBlink 1.8s ease-in-out infinite;
}

@keyframes aiBadgeBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}
.ai-badge{
    background:#680eda;
    color:#fff;
    font-size:12px;
    padding:6px 14px;
    display:inline-block;
    border-radius:0 0 8px 0;
    font-family: 'inter-regular';
}

.reply-box{
    color: #1f1f1f;
    padding:12px;
   font-family: 'inter-medium';
    font-size:16px;
}

.unlock-box{
    margin-top:10px;
    background:#F5F3FF;
    color:#680eda;
    padding:12px;
    border-radius:8px;
    font-size:14px;
    display:flex;
    justify-content:space-between;
    align-items:center; gap: 12px;
}

.post-image{
    width:100%;
    margin:8px 0px;
    border-radius:10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.post-image.active-creative {
    border: 3px solid #680EDA;
    box-shadow: 0 4px 12px rgba(104, 14, 218, 0.35);
    transform: scale(1.02);
}

.addon-card{
    border:1px solid #eee;
    border-radius:10px;
    padding:15px;
    margin-bottom:12px;
}

.addon-card i{
    color:#7C3AED;
    font-size:30px;
    margin-bottom:10px;
}

.addon-card h4{
    margin-bottom:2px; color: #1f1f1f; font-family: 'inter-semibold';
}
.addon-card img{
    background: #F5F0FB;
    padding: 6px;
    margin-bottom: 12px;
    border-radius: 8px;
}

.addon-card p{
    color:#777;
    line-height:1.6;
    margin-bottom:0; 
    font-size: 14px;
}

.full-btn{
    width:100%;
    height:56px;
    margin-top:20px;
    border:none;
    border-radius:16px;
    background:#6D28D9;
    color:#fff;
    font-size:18px;
    font-weight:700;
}

.card2{
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Primary-Purple-purple-500, #680EDA);
    background: var(--Primary-Purple-purple-50, #F5F0FB);
}
.card2 > h4{
    font-size: 16px;
    font-family: 'inter-semibold';
    color: #680eda;
    margin-bottom:0;
}
.card2 > span{
    color: var(--Neutrals-Grey-600, #7A7A7A);
    font-size: 16px;
    font-family: 'inter-regular';
}
.card3 {
    margin-top: 16px;
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 16px;
    background: linear-gradient(90deg, #680EDA 0%, #B072FE 100%);
    color: white; 
}
.pcard-tsdpivfcs{
    color: #3d3d3d;
    font-family: 'inter-regular';
    font-size: 14px;
    margin-top:4px;
}
.footer-note1{
    display: flex;
    padding: 4px 12px;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    background: var(--Neutrals-Grey-100, #FFF);
    color: #680eda;
    font-weight:500;
    font-size:14px;
}
.card3 > h2 {
    font-size:32px;
    font-family: 'inter-bold';
    margin-top:16px;
}
.card3 > h2 > span {
    font-size:14px;
    font-family: 'inter-regular';
}
.card3 > h4 {
    color: var(--Neutrals-Grey-100, #FFF);
    font-size: 14px;
    font-family: 'inter-medium';
    margin-top:2px;
    margin-bottom: 14px;
}
.card3 > span {
    font-size: 14px;
    font-family: 'inter-regular';
    margin-top:12px;
}
.btn-white{
    display: flex;
    padding: 12px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--Neutrals-Grey-100, #FFF);

    text-align: center;
    font-size: 16px;
    font-family: 'inter-semibold';
    border:none;
    color:#680EDA;
}
.card4{
    margin-top:16px;
    display: flex;
padding: 8px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
border-radius: 8px;
background: var(--Primary-Purple-purple-50, #F5F0FB);
}
.card4 > .sec1 {
    display: flex;
align-items: center;
gap: 8px;
align-self: stretch;
padding-bottom: 12px;
border-bottom: 0.5px solid #d6d6d6;
}
.card4 > .sec1 > span{
 font-size:14px; 
 color: #680eda;
    font-family: 'inter-regular';
}
.card4 > h4 {
    font-size: 14px; 
    color: #680eda; 
    font-family: 'inter-semibold';
}
.screen7{
    background: white; 
    border-radius: 8px;
    padding:8px;
    margin-top:12px;
}
.screen7 > h4{
    color: #3d3d3d;
    font-size:16px; 
    font-family: 'inter-bold';
    margin-top:4px;
}
.screen7 > p{
    color: #999;
    font-size: 14px;
    margin-bottom: 0;
    font-family:'inter-regular';
}
.screen7 > h3{
    color: #1f1f1f;
    font-size:20px; 
    font-weight:700;
}

.screen7 > h3 > .sTwo{
    color: #3d3d3d;
    font-size:16px; 
    font-weight:500;
}
.screen7 > h3 > .sThree{
    color: #999;
    font-size:14px; 
    font-weight:500;
}
.screen7 > button{
    margin-top: 8px;
}
.screen7 > hr {
    margin-bottom: 0; margin-top: 8px;
}
.tableHeader {
    display: flex;
    height: 44px;
    padding: 12px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px 8px 0 0;
    border-bottom: 0.5px solid var(--Neutrals-Grey-300, #D6D6D6);
    background: var(--Neutrals-Grey-50, #FAF9F8);
}
.tableBody > h4{
    border-bottom: 1px solid #F5F5F5;
    font-family: 'inter-semibold';
    font-size: 14px; color: #3d3d3d; padding: 12px 12px;
    margin-bottom:0;
}
.tableBody > h4 > span{
    color: #680eda;

}
.s7Img {
    background: #F5F0FB; 
    padding: 12px;
    border-radius: 99%;
}
.s7tD > h5 {
    color: var(--Neutrals-Grey-900, #1F1F1F);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0; 
}
.s7tD > span {
    color: var(--Neutrals-Grey-600, #7A7A7A);
    font-size: 14px;
    font-weight: 400;
}
.card { 
    background:  #FAF9F8; padding: 8px 12px; margin-top: 8px;
}
.card-header1{
    color: #3d3d3d; font-size: 14px;  font-family:'inter-bold';  padding-bottom: 8px; 
    border-bottom: 1px solid #d6d6d6; 
}
.card-body{  
    padding: 8px 0px 0px  0px ;  
}
.postedSuccess { 
    margin-top: 16px; 
    display: flex; 
    padding: 8px; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 4px; 
    align-self: stretch; 
    border-radius: 8px; 
    background: #F5F0FB; 
}
.postedSuccess > h4 { 
    color: #3d3d3d; 
    font-size: 16px; 
    font-family: 'inter-bold'; 
}
.postedSuccess > p { 
    color: #999; 
    font-size: 14px;  
    text-align:center;  
    margin-bottom: 4px;
}

.card-col-right {
    padding-right: 8px;
}

.card-col-left {
    padding-left: 8px;
}

.feature-card {
    background: #F5F0FB;
    padding-top: 12px;
    text-align: center;
    border-radius: 8px;
    margin-top: 12px; 
}

.feature-text {
    font-family: 'inter-medium';
    font-size: 14px;
    padding: 8px;
    color: #3d3d3d;
    margin-bottom: 0;
}
.sOne{
    color: #3D3D3D;
    font-family: 'inter-regular';
    font-size: 14px;
}

.screen-block{
    display:none;
}

.screen-block.active-screen{
    display:block;
}
.scrollable-div{
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}
.scrollable-div::-webkit-scrollbar{
    width: 8px;
}

.scrollable-div::-webkit-scrollbar-track{
    background: #f1f1f1;
    border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb{
    background: #888;
    border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb:hover{
    background: #555;
}
body{
    margin:0;
    font-family:Arial,sans-serif;
}

.menu-btn{
     position: absolute;
    left: 15px;
    font-size: 22px;
    cursor: pointer;
    color: #000;
}

.sidebar{
    position:fixed;
    top:0;
    left:-360px;
    width:360px;
    height:100%;
    background:#fff;
    transition:.3s;
    z-index:1002;
    overflow-y:auto;
}

.sidebar.active{
    left:0;
}

.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:1000;
}

.sidebar-overlay.active{
    opacity:1;
    visibility:visible;
}

.sidebar-header{
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:8px 16px;
    font-size:18px;
    font-weight:600;
}



.sidebar-header button{
    border:none;
    background:none;
    font-size:30px;
    cursor:pointer;
}

.menu-card{
    background:#faf9f8;
    margin:15px;
    padding: 4px 16px;
    border-radius:12px;
    overflow:hidden;
}

.menu-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 8px;
    text-decoration:none;
    color:#000;
    font-weight:550;
    border-bottom:1px solid #d6d6d6;
}
.menu-item > span > img{ margin-bottom: -4px;}
.menu-item:last-child{
    border-bottom:none;
}

.upgrade-box{
    margin:12px;
    background:#F5F0FB;
    color:#680eda;
    padding:14px 10px;
    border-radius:12px;
    display:flex;
    justify-content: space-between; 
    gap: 12px;
    align-items:center;
    font-weight:500;
    font-size:14px;
}
.upgrade-box >span { font-family: 500; }
.topBar{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 15px;
}

    .s6t1{
        padding: 16px; display:flex; justify-content:center; align-items:center; gap:12px; margin-top: 12px;
        background:  linear-gradient(90deg, #680EDA 0%, #B072FE 100%); border-radius: 16px; 
    }
    .s6t1>span{ 
        color: white; font-size: 14px; font-family: 'inter-regular';
    }

/* Animated Skeleton Loader for inline numbers and text */
.skeleton-loader {
    display: inline-block;
    height: 0.85em;
    min-width: 40px;
    vertical-align: middle;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s infinite linear;
    border-radius: 4px;
    margin: 0 3px;
}

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

.bonus-free{ margin-top: 22px; background: #F5F0FB; border-radius: 12px; font-size:14px !important; }
.bonus-free > h2{ padding: 12px 8px 8px 8px; margin-bottom: 0; font-size: 14px; font-family: 'inter-semibold'; color: #680eda;}
.bonus-free > p {font-family: 'inter-regular';  padding-bottom: 8px;margin:8px 8px 0px 8px; color: #7a7a7a;}
.bonus-free >div > p {font-family: 'inter-regular'; margin:4px 0px 4px 8px; color: #7a7a7a;}
.bonus-free >div > p > span {font-family: 'inter-regular'; color: #1f1f1f; text-decoration-line: underline; }
.bonus-free > hr { margin-bottom: 0; margin-top: 0; }
.bonus-free > p > b {
    font-weight: normal;
    font-family: 'inter-bold';
}

/* ---- Modal overlay ---- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);align-items:center;justify-content:center;z-index:1000;padding:8px;}
.modal-overlay.active{display:flex;}
/* ---- Bonus card ---- */
.bonus-card{background:#fff;color:var(--text-dark);border-radius:16px;width:100%;max-width:460px;padding:16px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:pop .18s ease-out;}
@keyframes pop{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}
.bonus-close{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;border:1.5px solid #ccc;background:#fff;color:#333;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.bonus-close:hover{background:#f2f2f2;}
.bonus-badge{border-radius: 8px 0;display:inline-block;background: #680eda;color:#fff;font-family:'inter-semibold';font-size:16px;padding: 4px 8px; margin-bottom:16px;}
.bonus-body{display:flex;gap:16px;align-items:flex-start; justify-content: space-between;}
.bonus-title{font-size:16px;line-height:1.25;margin:0 0 14px;max-width:280px;}
.bonus-title .accent{font-size:20px;color:#680eda;font-family:'inter-bold';}
.bonus-title.plain{color:var(--text-dark);font-weight:600;}
.bonus-icon{flex-shrink:0;}
.bonus-icon svg{width:100%;height:auto;}
.bonus-worth{display:flex;align-items:center;gap:10px;padding:2px 0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;margin:8px 0 18px;}
.bonus-worth-label{color:#999 ;font-size:14px;}
.bonus-worth-price{color:#1f1f1f;text-decoration:line-through;font-family:'inter-bold';font-size:20px;}
.bonus-free-tag{background:var(--green);color:#fff;font-family: 'inter-bold';font-size:13px;padding:5px 14px;border-radius:6px;}
.bonus-desc{font-size:14px;color:#5c5c5c;margin-bottom:16px;font-family:'inter-regular';}
.bonus-desc .highlight{color: #680eda;font-family:'inter-bold';}
.bonus-desc-check{display:flex;gap:10px;align-items:center;color: #3d3d3d;}
.bonus-desc-check svg{flex-shrink:0;margin-top:3px;}
.bonus-claim{width:100%;background:var(--purple);color:#fff;border:none;border-radius:10px;padding:16px;font-size:17px;font-family: 'inter-semibold';cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s;}
.bonus-claim:hover{background:var(--purple-dark);}