*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{background:#f4f4f4}

.wrapper{
display:flex;
min-height:100vh
}

.sidebar{
display:none;
width:240px;
background:#fff;
border-right:1px solid #ddd;
padding:20px}

.logo{
font-size:28px;
color:#ef4444;
font-weight:bold;
margin-bottom:20px}

.sidebar a{
display:block;
padding:12px;
text-decoration:none;
color:#555;
border-radius:8px}

.sidebar a.active,.sidebar a:hover{background:#ef4444;color:#fff}

.content{

flex:1;

padding:15px;

padding-bottom:90px;

}

.top{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:1px;
margin-bottom:20px;

}

@media(min-width:992px){

.top{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}

}

.search{

width:100%;

padding:12px 15px;

border:1px solid #ddd;

border-radius:30px;

font-size:15px;

}

@media(min-width:992px){

.search{

width:320px;

}

}

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


.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.08)}

.card img{

width:100%;

height:190px;

object-fit:cover;

}

@media(min-width:992px){

.card img{

height:240px;

}

}
.info{
padding:18px}

.meta{
color:#777;
margin:10px 0 18px}

.actions{display:flex;gap:10px}
.btn{flex:1;background:#efefef;border-radius:25px;padding:13px;text-align:center;text-decoration:none;color:#222;font-weight:bold
}.icon{width:44px;height:44px;border-radius:50%;background:#efefef;display:flex;align-items:center;justify-content:center}

.bottom-nav{

position:fixed;

left:0;

bottom:0;

width:100%;

height:70px;

background:#fff;

display:flex;

justify-content:space-around;

align-items:center;

box-shadow:0 -3px 12px rgba(0,0,0,.08);

border-top:1px solid #eee;

z-index:999;

}

.bottom-nav a{flex:1;text-decoration:none;color:#666;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center}

.bottom-nav .active{
color:#ef4444
}

@media(min-width:992px){.sidebar{display:block}
.grid{grid-template-columns:repeat(2,1fr)}
.bottom-nav{
display:none}
}

.more-menu{

position:relative;

flex:1;

display:flex;

justify-content:center;

}

.dropup-content{

display:none;

position:absolute;

bottom:75px;

right:10px;

width:230px;

background:#fff;

border-radius:16px;

box-shadow:0 10px 35px rgba(0,0,0,.18);

overflow:hidden;

z-index:99999;

animation:slideUp .25s ease;

}

.dropup-content a{

display:flex;

align-items:center;

padding:15px 18px;

text-decoration:none;

color:#444;

font-size:14px;

font-weight:600;

border-bottom:1px solid #f2f2f2;

}

.dropup-content a:last-child{

border-bottom:none;

}

.dropup-content a i{

width:28px;

color:#ef4444;

font-size:18px;

}

.dropup-content a:hover{

background:#fafafa;

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.mobile-header{

position:sticky;
top:0;

height:65px;

background:#fff;

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

padding:0 18px;

box-shadow:0 2px 12px rgba(0,0,0,.08);

z-index:999;

}

.menu-btn{

font-size:24px;
cursor:pointer;
color:#444;

}

.logo{

font-size:22px;
font-weight:bold;
color:#ef4444;

position:absolute;
left:50%;
transform:translateX(-50%);

}

.header-right{

font-size:20px;
color:#666;

}

.header-right{

position:relative;

font-size:22px;

cursor:pointer;

color:#555;

}

/* Dropdown */

.notification-menu{

display:none;

position:absolute;

top:38px;

right:0;

width:300px;

background:#fff;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.15);

overflow:hidden;

z-index:99999;

animation:fadeIn .25s;

}

.notify-title{

padding:15px;

font-weight:bold;

border-bottom:1px solid #eee;

background:#fafafa;

}

.notification-menu a{

display:block;

padding:15px;

text-decoration:none;

color:#333;

border-bottom:1px solid #f3f3f3;

}

.notification-menu a:last-child{

border-bottom:none;

}

.notification-menu a:hover{

background:#f8f8f8;

}

.notification-menu strong{

display:block;

margin-bottom:4px;

}

.notification-menu small{

color:#666;

}

.notification-menu span{

display:block;

margin-top:5px;

font-size:12px;

color:#999;

}

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(-10px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.mobile-menu{

position:fixed;

top:65px;

left:0;

width:260px;

height:calc(100vh - 65px);

background:#fff;

overflow-y:auto;

box-shadow:3px 0 20px rgba(0,0,0,.15);

display:none;

z-index:9999;

}

.mobile-menu a{

display:block;

padding:15px 20px;

text-decoration:none;

color:#444;

font-size:16px;

border-bottom:1px solid #f2f2f2;

}

.mobile-menu a i{

width:25px;

color:#ef4444;

}

.mobile-menu a:hover{

background:#fafafa;

}

@media(min-width:992px){

.mobile-header{

padding:0 35px;

height:72px;

}

.logo{

margin-left:15px;

font-size:24px;

font-weight:bold;

color:#ef4444;

flex:1;

}

.menu-btn{

width:40px;

font-size:24px;

cursor:pointer;

color:#444;

}

.header-right{

width:40px;

display:flex;

justify-content:flex-end;

position:relative;

font-size:22px;

cursor:pointer;

}

}

/* Desktop - ifiche */
@media (min-width:992px){

.mobile-menu{

display:none !important;

}

}



/*==========================
    MY PROGRAM
==========================*/

.program-section{

padding:15px;

}


.program-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}

.program-header h1{

font-size:52px;

}

@media(max-width:768px){

.program-header h1{

font-size:28px;

}

}


.program-header p{

font-size:16px;

}

@media(min-width:992px){

.program-header p{

font-size:22px;

}

}

.program-icons i{

font-size:22px;

}

@media(min-width:992px){

.program-icons i{

font-size:28px;

}

}

.goal-box{

margin-bottom:25px;

}

.goal-top{

display:flex;
justify-content:space-between;
margin-bottom:12px;

}

.goal-top span{

font-weight:bold;
color:#888;

}

.progress-line{

display:flex;
gap:8px;

}

.progress-line span{

flex:1;
height:10px;
background:#ddd;
border-radius:10px;

}

.progress-line span.active{

background:#ff4f5e;

}

/* CARD */




.workout-card{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,.08);

margin-bottom:5px;

}


.video-wrapper{

width:100%;

border-radius:20px;

overflow:hidden;

background:#000;

box-shadow:0 5px 20px rgba(0,0,0,.12);

}

.video-wrapper video{

width:100%;

display:block;

max-height:650px;

object-fit:cover;

}


.overlay-info{

padding:20px;

width:100%;

overflow:hidden;

}

.overlay-info h2{

font-size:34px;

line-height:1.2;

margin-bottom:10px;

color:#222;

word-break:break-word;

overflow-wrap:break-word;

}

@media(max-width:768px){

.overlay-info h2{

font-size:18px;

line-height:26px;

}

}

.overlay-info p{

font-size:16px;

line-height:26px;

color:#666;

margin-bottom:15px;

word-break:break-word;

}

.duration{

margin-bottom:20px;

color:#666;

font-size:15px;

}

.start-btn{

display:block;

width:100%;

padding:16px;

font-size:18px;

border-radius:40px;

text-align:center;

box-sizing:border-box;

}

@media(min-width:992px){

.start-btn{

max-width:350px;

}

}

@media(min-width:992px){

.video-wrapper{

padding-top:10%;

}

.overlay-info{

padding:30px;

}

.overlay-info h2{

font-size:40px;

}

}

.overlay{

position:absolute;
left:0;
right:0;
bottom:0;
background:linear-gradient(transparent,rgba(0,0,0,.75));
color:#fff;
}

.overlay{

padding:20px;

}

@media(min-width:992px){

.overlay{

padding:50px;

}

}

.overlay h2{

font-size:48px;
margin-bottom:10px;

}

.overlay p{

font-size:24px;
margin-bottom:15px;

}



.duration{

font-size:16px;

}

@media(min-width:992px){

.duration{

font-size:22px;

}

}

.start-btn{

display:block;
text-align:center;

padding:18px;

background:#ff4f5e;

color:#fff;

text-decoration:none;

font-size:22px;

font-weight:bold;

border-radius:40px;

}



/* Activity */

.activity-title{

margin:35px 0 20px;

font-size:36px;

}



.activity-card{

display:flex;
align-items:center;

background:#fff;

padding:22px;

border-radius:22px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.activity-icon{

width:70px;
height:70px;

border-radius:50%;

background:#fff5f5;

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

font-size:32px;

color:#ff4f5e;

margin-right:20px;

}

.activity-info{

flex:1;

}

.activity-info h3{

font-size:42px;

}

.activity-info span{

font-size:24px;
font-weight:normal;

}

.activity-info p{

color:#888;
margin-top:5px;

}

.activity-arrow{

font-size:40px;
color:#777;

}

/*==========================
      DESKTOP
==========================*/

@media(min-width:992px){

.program-section{

padding:35px;

}

.workout-card{

height:650px;

}

.workout-card img{

height:100%;

}

.overlay{

padding:50px;

}


.overlay h2{

font-size:34px;

}

@media(min-width:992px){

.overlay h2{

font-size:60px;

}

}

.overlay p{

font-size:18px;

}

@media(min-width:992px){

.overlay p{

font-size:28px;

}

}


.start-btn{

width:320px;

}

.activity-card{

padding:30px;

}

}


/*==========================
      WORKOUT LIST
===========================*/

.workout-section{

padding:15px;

}

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.section-title h2{

font-size:32px;

font-weight:bold;

}

.section-icons i{

font-size:22px;

margin-left:15px;

cursor:pointer;

color:#444;

}

/* Item */

.workout-item{

display:flex;

align-items:center;

padding:15px 0;

text-decoration:none;

border-bottom:1px solid #ececec;

transition:.25s;

}

.workout-item:hover{

background:#fafafa;

}

.workout-item img{

width:75px;

height:75px;

border-radius:15px;

object-fit:cover;

margin-right:18px;

}

.workout-info{

flex:1;

}

.workout-info h3{

font-size:18px;

color:#222;

margin-bottom:6px;

}

.workout-info span{

font-size:14px;

color:#777;

}

.arrow{

font-size:28px;

color:#bbb;

}

/*==========================
        DESKTOP
===========================*/

@media(min-width:992px){

.workout-section{

padding:35px;

}

.section-title h2{

font-size:42px;

}

.workout-item{

padding:18px;

border-radius:18px;

margin-bottom:10px;

background:#fff;

box-shadow:0 3px 12px rgba(0,0,0,.06);

border:none;

}

.workout-item img{

width:110px;

height:110px;

border-radius:18px;

}

.workout-info h3{

font-size:22px;

}

.workout-info span{

font-size:16px;

}

.arrow{

font-size:34px;

}

.workout-item:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

}

/*==================================
        PROGRAM DETAILS
===================================*/

.program-details{

width:100%;

padding:15px;

}



/*============================
        VIDEO
=============================*/

.video-section{

position:relative;

overflow:hidden;

border-radius:25px;

background:#000;

margin-bottom:20px;

}

.video-cover{

width:100%;

display:block;

aspect-ratio:9/16;

object-fit:cover;

}

/* kama unatumia iframe */

/*==================================
      UNIVERSAL VIDEO PLAYER
===================================*/


.video-wrapper{

position:relative;

width:100%;

aspect-ratio:16/9;

background:#000;

border-radius:22px;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.12);

}

/* YouTube + MP4 */

.video-wrapper iframe,
.video-wrapper video{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

border:none;

display:block;

object-fit:contain;

background:#000;

}

/* Desktop */

@media(min-width:992px){

.video-wrapper{

max-width:70%;

}

.video-wrapper video{

max-height:550px;

}

}

.close-btn{

position:absolute;

top:15px;

right:15px;

width:45px;

height:45px;

background:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#333;

font-size:22px;

box-shadow:0 5px 15px rgba(0,0,0,.2);

}

/*============================
        PROGRESS
=============================*/

.exercise-progress{

display:flex;

gap:5px;

margin-bottom:20px;

}

.exercise-progress span{

flex:1;

height:8px;

background:#ddd;

border-radius:20px;

}

.exercise-progress .active{

background:#ff4f5e;

}

/*============================
        TIMER
=============================*/

.timer-row{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.timer-box{

text-align:center;

}

.timer-box h3{

font-size:28px;

margin-bottom:5px;

}

.timer-box h1{

font-size:52px;

font-weight:bold;

}

.timer-box small{

font-size:13px;

color:#888;

}

/*============================
        BUTTONS
=============================*/

.workout-buttons{

display:flex;

gap:15px;

margin-bottom:25px;

}

.btn-prev,
.btn-next{

flex:1;

padding:16px;

border:none;

border-radius:35px;

font-size:17px;

font-weight:bold;

cursor:pointer;

}

.btn-prev{

background:#ececec;

}

.btn-next{

background:#ff4f5e;

color:#fff;

}

/*============================
      EXERCISE CARD
=============================*/

.exercise-card{

display:flex;

align-items:center;

background:#fff;

padding:15px;

border-radius:18px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.exercise-card img{

width:90px;

height:90px;

border-radius:15px;

object-fit:cover;

margin-right:18px;

}

.exercise-info{

flex:1;

}

.exercise-info h3{

font-size:20px;

margin-bottom:8px;

line-height:28px;

}

.exercise-info span{

color:#888;

font-size:16px;

}

/*============================
        DESKTOP
=============================*/

@media(min-width:992px){

.program-details{

padding:35px;

max-width:1200px;

margin:auto;

}

.video-section{

border-radius:30px;

}

.video-cover{

aspect-ratio:16/9;

}

.timer-box h1{

font-size:72px;

}

.timer-box h3{

font-size:36px;

}

.workout-buttons{

max-width:700px;

margin:0 auto 30px;

}

.btn-prev,
.btn-next{

padding:20px;

font-size:20px;

}

.exercise-card{

padding:20px;

}

.exercise-card img{

width:130px;

height:130px;

}

.exercise-info h3{

font-size:28px;

line-height:38px;

}

.exercise-info span{

font-size:20px;

}

}



/*==================================
        PROFILE PAGE
===================================*/

.profile-section{

padding:15px;

}

/*==============================
        PROFILE CARD
===============================*/

.profile-card{

background:#fff;

border-radius:20px;

padding:30px 20px;

text-align:center;

box-shadow:0 4px 15px rgba(0,0,0,.08);

margin-bottom:20px;

}

.profile-photo{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

border:5px solid #f4f4f4;

margin-bottom:15px;

}

.profile-card h2{

font-size:28px;

margin-bottom:5px;

color:#222;

}

.profile-card p{

color:#777;

font-size:15px;

margin-bottom:20px;

}

.edit-profile{

display:inline-block;

padding:12px 30px;

background:#ef4444;

color:#fff;

text-decoration:none;

border-radius:30px;

font-size:15px;

font-weight:bold;

transition:.3s;

}

.edit-profile:hover{

background:#d93d3d;

}

/*==============================
        STATS
===============================*/

.stats-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin-bottom:25px;

}

.stat-box{

background:#fff;

padding:20px;

border-radius:18px;

text-align:center;

box-shadow:0 3px 12px rgba(0,0,0,.06);

}

.stat-box h3{

font-size:28px;

color:#ef4444;

margin-bottom:8px;

}

.stat-box span{

font-size:14px;

color:#777;

}

/*==============================
        PROFILE MENU
===============================*/

.profile-menu{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 3px 12px rgba(0,0,0,.06);

}

.profile-menu a{

display:flex;

align-items:center;

padding:18px 20px;

text-decoration:none;

color:#333;

border-bottom:1px solid #f2f2f2;

transition:.3s;

}

.profile-menu a:last-child{

border-bottom:none;

}

.profile-menu a:hover{

background:#fafafa;

}

.profile-menu a i:first-child{

width:35px;

font-size:20px;

color:#ef4444;

}

.profile-menu a i:last-child{

margin-left:auto;

color:#999;

}

.logout{

color:#e53935 !important;

}

/*==============================
        DESKTOP
===============================*/

@media(min-width:992px){

.profile-section{

max-width:1100px;

margin:auto;

padding:35px;

}

.profile-card{

padding:40px;

}

.profile-photo{

width:150px;

height:150px;

}

.profile-card h2{

font-size:34px;

}

.profile-card p{

font-size:18px;

}

.stats-grid{

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.stat-box{

padding:30px;

}

.stat-box h3{

font-size:36px;

}

.stat-box span{

font-size:16px;

}

.profile-menu{

margin-top:20px;

}

.profile-menu a{

padding:22px 25px;

font-size:18px;

}

}


/*==================================
        NOTIFICATIONS
===================================*/

.notifications-section{

padding:15px;

}

/*==========================
        TITLE
===========================*/

.notifications-title{

margin-bottom:20px;

}

.notifications-title h2{

font-size:34px;

font-weight:700;

color:#222;

}

/*==========================
    NOTIFICATION CARD
===========================*/

.notification-card{

display:flex;

align-items:flex-start;

background:#fff;

padding:18px;

border-radius:18px;

margin-bottom:15px;

box-shadow:0 3px 12px rgba(0,0,0,.06);

transition:.3s;

position:relative;

}

.notification-card:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,.10);

}

/* unread */

.notification-card.unread{

border-left:5px solid #ef4444;

}

/*==========================
        ICON
===========================*/

.notify-icon{

width:55px;

height:55px;

border-radius:50%;

background:#fff2f2;

display:flex;

align-items:center;

justify-content:center;

margin-right:15px;

flex-shrink:0;

}

.notify-icon i{

font-size:22px;

color:#ef4444;

}

/*==========================
        CONTENT
===========================*/

.notify-content{

flex:1;

}

.notify-content h3{

font-size:18px;

margin-bottom:6px;

color:#222;

}

.notify-content p{

font-size:14px;

color:#666;

line-height:22px;

margin-bottom:8px;

}

.notify-content span{

font-size:13px;

color:#999;

}

/*==========================
        BADGE
===========================*/

.notify-status{

margin-left:10px;

}

.badge{

background:#ef4444;

color:#fff;

padding:5px 10px;

border-radius:20px;

font-size:11px;

font-weight:bold;

}

/*==========================
        DESKTOP
===========================*/

@media(min-width:992px){

.notifications-section{

max-width:900px;

margin:auto;

padding:35px;

}

.notifications-title h2{

font-size:42px;

margin-bottom:10px;

}

.notification-card{

padding:22px;

border-radius:22px;

}

.notify-icon{

width:70px;

height:70px;

}

.notify-icon i{

font-size:28px;

}

.notify-content h3{

font-size:22px;

}

.notify-content p{

font-size:16px;

line-height:26px;

}

.notify-content span{

font-size:14px;

}

.badge{

padding:6px 12px;

font-size:12px;

}

}


/*==================================
      SUBSCRIPTION PAGE
===================================*/

.subscription-section{

padding:15px;

}

/*==========================
        HEADER
===========================*/

.subscription-header{

text-align:center;

margin-bottom:25px;

}

.subscription-header h2{

font-size:34px;

color:#222;

margin-bottom:10px;

}

.subscription-header p{

color:#777;

line-height:24px;

}

/*==========================
      CURRENT PLAN
===========================*/

.current-plan{

background:#fff;

padding:25px;

border-radius:20px;

text-align:center;

box-shadow:0 4px 15px rgba(0,0,0,.08);

margin-bottom:25px;

}

.plan-label{

display:inline-block;

padding:6px 14px;

background:#ef4444;

color:#fff;

font-size:12px;

border-radius:20px;

margin-bottom:12px;

font-weight:bold;

}

.current-plan h3{

font-size:28px;

margin-bottom:8px;

}

.current-plan p{

color:#666;

}

/*==========================
        PLANS
===========================*/

.plans-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.plan-card{

position:relative;

background:#fff;

padding:25px;

border-radius:22px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

transition:.3s;

}

.plan-card:hover{

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.plan-badge{

position:absolute;

top:15px;

right:15px;

background:#ef4444;

color:#fff;

padding:6px 12px;

font-size:11px;

border-radius:20px;

font-weight:bold;

}

.plan-card h3{

font-size:28px;

margin-bottom:10px;

}

.plan-card h1{

font-size:52px;

color:#ef4444;

margin-bottom:5px;

}

.plan-card small{

display:block;

color:#777;

margin-bottom:20px;

}

.plan-card ul{

list-style:none;

padding:0;

margin:0 0 25px;

}

.plan-card ul li{

margin-bottom:14px;

font-size:15px;

display:flex;

align-items:center;

}

.plan-card ul li i{

color:#ef4444;

margin-right:10px;

font-size:18px;

}

.subscribe-btn{

display:block;

width:100%;

padding:16px;

text-align:center;

background:#ef4444;

color:#fff;

text-decoration:none;

border-radius:35px;

font-weight:bold;

font-size:16px;

transition:.3s;

}

.subscribe-btn:hover{

background:#d83b3b;

}

.premium{

border:2px solid #ef4444;

}

/*==========================
     PAYMENT METHODS
===========================*/

.payment-methods{

margin-top:30px;

background:#fff;

padding:25px;

border-radius:20px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

text-align:center;

}

.payment-methods h3{

margin-bottom:20px;

font-size:24px;

}

.payment-icons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

.payment-icons i{

font-size:42px;

color:#555;

transition:.3s;

}

.payment-icons i:hover{

color:#ef4444;

}

/*==========================
        DESKTOP
===========================*/

@media(min-width:992px){

.subscription-section{

max-width:1200px;

margin:auto;

padding:35px;

}

.subscription-header h2{

font-size:46px;

}

.subscription-header p{

font-size:18px;

}

.plans-grid{

grid-template-columns:repeat(2,1fr);

gap:30px;

}

.plan-card{

padding:35px;

}

.plan-card h3{

font-size:34px;

}

.plan-card h1{

font-size:64px;

}

.plan-card ul li{

font-size:17px;

}

.subscribe-btn{

font-size:18px;

padding:18px;

}

.payment-methods{

margin-top:40px;

padding:35px;

}

.payment-methods h3{

font-size:30px;

}

.payment-icons i{

font-size:55px;

}

}


/*==================================
        PROGRESS PAGE
===================================*/

.progress-section{

padding:15px;

}

/*==========================
        HEADER
===========================*/

.progress-header{

margin-bottom:25px;

}

.progress-header h2{

font-size:34px;

color:#222;

margin-bottom:8px;

}

.progress-header p{

font-size:15px;

color:#777;

line-height:24px;

}

/*==========================
      SUMMARY CARDS
===========================*/

.progress-summary{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin-bottom:25px;

}

.summary-card{

background:#fff;

padding:20px;

border-radius:18px;

text-align:center;

box-shadow:0 4px 15px rgba(0,0,0,.08);

transition:.3s;

}

.summary-card:hover{

transform:translateY(-3px);

}

.summary-card h3{

font-size:30px;

color:#ef4444;

margin-bottom:8px;

}

.summary-card span{

font-size:14px;

color:#777;

}

/*==========================
      CONTENT CARD
===========================*/

.progress-card{

background:#fff;

padding:20px;

border-radius:20px;

margin-bottom:20px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.progress-card h3{

font-size:22px;

margin-bottom:18px;

color:#222;

}

/*==========================
      CHART PLACEHOLDER
===========================*/

.chart-placeholder{

height:220px;

border:2px dashed #ddd;

border-radius:18px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:#bbb;

}

.chart-placeholder i{

font-size:55px;

margin-bottom:12px;

color:#ef4444;

}

.chart-placeholder p{

font-size:16px;

}

/*==========================
      PROGRESS BAR
===========================*/

.progress-item{

display:flex;

justify-content:space-between;

align-items:center;

margin:15px 0 8px;

}

.progress-item span{

color:#555;

}

.progress-item strong{

color:#222;

}

.progress-bar{

width:100%;

height:10px;

background:#ececec;

border-radius:20px;

overflow:hidden;

margin-bottom:20px;

}

.progress-fill{

height:100%;

background:#ef4444;

border-radius:20px;

}

/*==========================
      ACHIEVEMENTS
===========================*/

.achievement{

display:flex;

align-items:flex-start;

padding:15px 0;

border-bottom:1px solid #f2f2f2;

}

.achievement:last-child{

border-bottom:none;

}

.achievement i{

width:50px;

height:50px;

border-radius:50%;

background:#fff2f2;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#ef4444;

margin-right:15px;

}

.achievement strong{

display:block;

font-size:18px;

margin-bottom:5px;

color:#222;

}

.achievement p{

font-size:14px;

color:#777;

line-height:22px;

}

/*==========================
      DESKTOP
===========================*/

@media(min-width:992px){

.progress-section{

max-width:1200px;

margin:auto;

padding:35px;

}

.progress-header h2{

font-size:44px;

}

.progress-header p{

font-size:18px;

}

.progress-summary{

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.summary-card{

padding:30px;

}

.summary-card h3{

font-size:38px;

}

.summary-card span{

font-size:16px;

}

.progress-card{

padding:30px;

}

.progress-card h3{

font-size:28px;

}

.chart-placeholder{

height:350px;

}

.chart-placeholder i{

font-size:70px;

}

.progress-item{

font-size:18px;

}

.achievement{

padding:20px 0;

}

.achievement i{

width:60px;

height:60px;

font-size:28px;

}

.achievement strong{

font-size:22px;

}

.achievement p{

font-size:16px;

}

}


/*==================================
            MEALS PAGE
===================================*/

.meals-section{

padding:15px;

}

/*==============================
            HEADER
===============================*/

.meals-header{

margin-bottom:25px;

}

.meals-header h2{

font-size:34px;

color:#222;

margin-bottom:8px;

}

.meals-header p{

font-size:15px;

color:#777;

line-height:24px;

}

/*==============================
          CATEGORIES
===============================*/

.meal-categories{

display:flex;

gap:10px;

overflow-x:auto;

padding-bottom:10px;

margin-bottom:25px;

scrollbar-width:none;

}

.meal-categories::-webkit-scrollbar{

display:none;

}

.meal-categories a{

text-decoration:none;

padding:10px 20px;

background:#fff;

border-radius:30px;

color:#555;

font-size:14px;

white-space:nowrap;

box-shadow:0 2px 10px rgba(0,0,0,.06);

transition:.3s;

}

.meal-categories a:hover,
.meal-categories a.active{

background:#ef4444;

color:#fff;

}

/*==============================
          MEAL CARD
===============================*/

.meal-card{

background:#fff;

border-radius:22px;

overflow:hidden;

margin-bottom:25px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

transition:.3s;

}

.meal-card:hover{

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.meal-card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.meal-info{

padding:20px;

}

.meal-tag{

display:inline-block;

padding:6px 15px;

background:#ffe5e5;

color:#ef4444;

border-radius:20px;

font-size:13px;

font-weight:bold;

margin-bottom:12px;

}

.meal-info h3{

font-size:24px;

margin-bottom:10px;

color:#222;

}

.meal-info p{

font-size:15px;

line-height:24px;

color:#777;

margin-bottom:18px;

}

.meal-meta{

display:flex;

justify-content:space-between;

margin-bottom:20px;

}

.meal-meta span{

font-size:14px;

color:#555;

}

.meal-meta i{

color:#ef4444;

margin-right:6px;

}

.meal-btn{

display:block;

text-align:center;

padding:14px;

background:#ef4444;

color:#fff;

text-decoration:none;

font-weight:bold;

border-radius:35px;

transition:.3s;

}

.meal-btn:hover{

background:#d93939;

}

/*==============================
          DESKTOP
===============================*/

@media(min-width:992px){

.meals-section{

max-width:1300px;

margin:auto;

padding:35px;

}

.meals-header h2{

font-size:44px;

}

.meals-header p{

font-size:18px;

}

.meal-categories{

gap:15px;

}

.meal-categories a{

font-size:16px;

padding:12px 24px;

}

.meal-card{

display:flex;

align-items:center;

}

.meal-card img{

width:320px;

height:250px;

flex-shrink:0;

}

.meal-info{

flex:1;

padding:30px;

}

.meal-info h3{

font-size:30px;

}

.meal-info p{

font-size:17px;

line-height:28px;

}

.meal-meta{

font-size:16px;

}

.meal-btn{

width:220px;

padding:16px;

}

}

/*=============================
      DESKTOP HEADER
=============================*/

.header-left{

display:flex;

align-items:center;

gap:18px;

}

.desktop-search{

display:none;

position:relative;

flex:1;

max-width:420px;

margin:0 30px;

}

.desktop-search input{

width:100%;

height:48px;

padding:0 50px 0 20px;

border:1px solid #ececec;

border-radius:15px;

font-size:15px;

outline:none;

background:#fafafa;

}

.desktop-search i{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

color:#888;

font-size:18px;

}

.profile-box{

display:none;

align-items:center;

gap:12px;

margin-left:20px;

}

.profile-box img{

width:42px;

height:42px;

border-radius:50%;

object-fit:cover;

}

.profile-box small{

display:block;

color:#888;

font-size:12px;

}

.profile-box strong{

font-size:16px;

color:#222;

}

/*=============================
      DESKTOP
=============================*/

@media(min-width:992px){

.mobile-header{

height:82px;

padding:0 35px;

background:#fff;

display:flex;

align-items:center;

justify-content:space-between;

box-shadow:0 2px 15px rgba(0,0,0,.06);

}

.logo{

position:static;

transform:none;

font-size:22px;

margin:0;

}

.desktop-search{

display:block;

}

.profile-box{

display:flex;

}

.header-right{

display:flex;

align-items:center;

gap:18px;

width:auto;

}

.header-right .fa-bell{

font-size:22px;

}

.menu-btn{

font-size:28px;

}

}

@media(max-width:768px){

.profile-text small{

display:none;

}

.profile-text strong{

font-size:13px;

}

.profile-box img{

width:34px;

height:34px;

}

}


.login-alert{

padding:15px 20px;

margin-bottom:20px;

background:#ffe5e5;

border-left:5px solid #ef4444;

color:#b91c1c;

border-radius:10px;

font-size:15px;

font-weight:600;

}

.login-alert i{

margin-right:8px;

}


.notify-message{

display:none;

margin-top:12px;

line-height:25px;

color:#555;

font-size:15px;

}

.notify-message.show{

display:block;

}

.read-btn{

margin-top:12px;

padding:8px 18px;

background:#ef4444;

color:#fff;

border:none;

border-radius:25px;

cursor:pointer;

font-size:14px;

font-weight:bold;

}

.read-btn:hover{

background:#d93636;

}

.notify-date{

display:block;

margin-top:6px;

color:#999;

font-size:13px;

}


.edit-grid{

display:grid;

grid-template-columns:1fr;

gap:18px;

margin-top:25px;

}

.input-group{

display:flex;

flex-direction:column;

}

.input-group label{

margin-bottom:8px;

font-weight:bold;

color:#444;

}

.input-group input{

height:50px;

padding:0 15px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

outline:none;

}

.input-group input:focus{

border-color:#ef4444;

}

.profile-photo-box{

position:relative;

display:inline-block;

}

.camera-btn{

position:absolute;

bottom:0;

right:0;

width:42px;

height:42px;

background:#ef4444;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

}

.save-btn{

margin-top:30px;

width:100%;

height:55px;

border:none;

background:#ef4444;

color:#fff;

font-size:18px;

font-weight:bold;

border-radius:35px;

cursor:pointer;

transition:.3s;

}

.save-btn:hover{

background:#d83b3b;

}

@media(min-width:992px){

.edit-grid{

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.save-btn{

max-width:320px;

margin:35px auto 0;

display:block;

}

}

/* Mobile Fix */

*{
    box-sizing:border-box;
}

html,body{
    overflow-x:hidden;
}

.profile-section,
.profile-card,
.edit-grid,
.input-group,
.stats-grid,
.profile-menu{
    width:100%;
    max-width:100%;
}

.profile-photo{
    max-width:100%;
    height:auto;
}

.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    max-width:100%;

}

.save-btn{

    width:100%;

    max-width:100%;

}

@media(max-width:768px){

.profile-section{

padding:15px;

}

.profile-card{

padding:20px 15px;

}

.edit-grid{

grid-template-columns:1fr;

gap:15px;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

gap:12px;

}

.profile-menu a{

padding:16px;

font-size:15px;

}

}


.billing-section{

max-width:700px;

margin:30px auto;

padding:15px;

}

.billing-card{

background:#fff;

border-radius:20px;

padding:25px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.billing-header{

text-align:center;

margin-bottom:25px;

}

.billing-header h2{

font-size:30px;

margin-bottom:8px;

}

.billing-header p{

color:#777;

}

.plan-summary{

display:flex;

align-items:center;

gap:15px;

padding:15px;

background:#fafafa;

border-radius:15px;

margin-bottom:25px;

}

.plan-summary img{

width:90px;

height:90px;

border-radius:15px;

object-fit:cover;

}

.plan-summary h3{

margin:0;

font-size:18px;

}

.plan-summary span{

color:#888;

font-size:14px;

}

.amount{

margin-left:auto;

font-size:22px;

font-weight:bold;

color:#ef4444;

}

.form-group{

margin-bottom:20px;

}

.form-group label{

display:block;

margin-bottom:10px;

font-weight:bold;

}

.payment-option{

display:flex;

align-items:center;

gap:10px;

padding:12px;

border:1px solid #eee;

border-radius:12px;

margin-bottom:10px;

cursor:pointer;

}

.payment-option:hover{

border-color:#ef4444;

background:#fff5f5;

}

.form-group input[type=text]{

width:100%;

height:50px;

border:1px solid #ddd;

border-radius:12px;

padding:0 15px;

font-size:15px;

}

.pay-btn{

width:100%;

height:55px;

border:none;

border-radius:35px;

background:#ef4444;

color:#fff;

font-size:18px;

font-weight:bold;

cursor:pointer;

}

.pay-btn:hover{

background:#d63b3b;

}

@media(max-width:768px){

.plan-summary{

flex-direction:column;

text-align:center;

}

.amount{

margin:0;

}

}


.payment-section{

max-width:650px;

margin:40px auto;

padding:15px;

}

.payment-card{

background:#fff;

border-radius:22px;

padding:35px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.payment-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#ef4444;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

color:#fff;

margin-bottom:20px;

}

.payment-summary{

margin:30px 0;

text-align:left;

border-top:1px solid #eee;

border-bottom:1px solid #eee;

}

.payment-summary div{

display:flex;

justify-content:space-between;

padding:15px 0;

border-bottom:1px solid #f3f3f3;

}

.payment-summary div:last-child{

border:none;

}

.payment-summary span{

color:#777;

}

.payment-summary strong{

color:#222;

}

.progress-box{

margin-top:25px;

}

#loadingBarContainer{

height:10px;

background:#eee;

border-radius:30px;

overflow:hidden;

}

#loadingBar{

height:100%;

width:0;

background:#ef4444;

transition:.4s;

}

.payment-status{

margin-top:20px;

font-weight:bold;

color:#ef4444;

font-size:18px;

}

@media(max-width:768px){

.payment-card{

padding:25px 18px;

}

.payment-summary div{

font-size:14px;

}

}


.plan-alert{

padding:15px 20px;

margin-bottom:20px;

background:#fff3cd;

border-left:5px solid #ff9800;

color:#856404;

border-radius:10px;

font-size:15px;

font-weight:600;

}

.plan-alert i{

margin-right:8px;

color:#ff9800;

}

.mobilesearch{
    display:block;
}

/* Ficha kwenye Desktop */
@media (min-width:992px){

    .mobilesearch{
        display:none !important;
    }

}