/*==================================================
COACHING TIMELINE
Premium Design System
==================================================*/

:root{

--coach-primary:#2563eb;
--coach-primary-dark:#1d4ed8;

--coach-success:#16a34a;
--coach-warning:#f59e0b;
--coach-danger:#dc2626;

--coach-bg:#f5f7fb;
--coach-card:#ffffff;

--coach-text:#1f2937;
--coach-muted:#6b7280;

--coach-border:#e5e7eb;

--coach-radius:18px;

--coach-shadow:
0 10px 30px rgba(15,23,42,.06);

--coach-transition:.25s ease;

}

*{

margin:0;
padding:0;

box-sizing:border-box;

}

body{

background:

var(--coach-bg) !important;

font-family:

"Inter",
system-ui,
sans-serif;

color:

var(--coach-text);

}

.coaching-page{

padding:

1.2rem
0
2rem;

}

.coaching-page
.container{

max-width:820px;

}

/*==================================================
Hero
==================================================*/

.coach-hero{

display:flex;

align-items:center;

justify-content:space-between;

gap:1rem;

background:

linear-gradient(

135deg,

#2563eb,

#1d4ed8

);

border-radius:

18px;

padding:

1.2rem
1.4rem;

color:#fff;

box-shadow:

var(--coach-shadow);

margin-bottom:

1rem;

animation:

fadeUp .45s ease;

}

.coach-hero-left{

display:flex;

align-items:center;

gap:1rem;

}

.coach-hero-icon{

width:58px;
height:58px;

display:flex;

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

border-radius:16px;

font-size:1.8rem;

background:

rgba(255,255,255,.15);

backdrop-filter:

blur(8px);

}

.coach-hero h1{

margin:0;

font-size:1.5rem;

font-weight:800;

}

.coach-hero p{

margin-top:.25rem;

font-size:.9rem;

opacity:.92;

max-width:560px;

line-height:1.55;

}

.coach-create-btn{

background:#fff !important;

color:

var(--coach-primary);

border:none;

font-weight:700;

padding:

11px
20px;

border-radius:14px;

transition:

var(--coach-transition);

}

.coach-create-btn:hover{

transform:

translateY(-3px);

color:

var(--coach-primary) !important;

}

/*==================================================
Toolbar
==================================================*/

.coach-toolbar{

background:#fff;

border-radius:18px;

padding:1rem;

box-shadow:

var(--coach-shadow);

margin-bottom:1rem;

}

.coach-search-form{

display:flex;

gap:.8rem;

margin-bottom:1rem;

}

.coach-search{

flex:1;

display:flex;

align-items:center;

gap:.75rem;

border:

1px solid
var(--coach-border);

border-radius:14px;

padding:

0
1rem;

background:#fff;

transition:

var(--coach-transition);

}

.coach-search:hover{

border-color:

#c7d2fe;

}

.coach-search:focus-within{

border-color:

var(--coach-primary);

box-shadow:

0 0 0 4px rgba(37,99,235,.12);

}

.coach-search i{

color:

var(--coach-muted);

}

.coach-search input{

flex:1;

border:none;

background:none;

outline:none;

height:48px;

font-size:.92rem;

}

.coach-search-btn{

padding:

0
20px;

border:none;

border-radius:14px;

background:

var(--coach-primary);

color:#fff;

font-weight:700;

transition:

var(--coach-transition);

}

.coach-search-btn:hover{

background:

var(--coach-primary-dark);

}

.coach-filters{

display:flex;

gap:.55rem;

flex-wrap:wrap;

}

.coach-filter{

padding:

8px
16px;

border-radius:999px;

background:#eef2ff;

color:

var(--coach-primary);

text-decoration:none;

font-size:.82rem;

font-weight:700;

transition:

var(--coach-transition);

}

.coach-filter:hover{

background:

var(--coach-primary);

color:#fff;

}

.coach-filter.active{

background:

var(--coach-primary);

color:#fff;

}

/*==================================================
Shortcuts
==================================================*/

.coach-shortcuts{

display:flex;

gap:.8rem;

flex-wrap:wrap;

margin-bottom:1rem;

}

.coach-shortcut{

display:flex;

align-items:center;

gap:.55rem;

padding:

10px
16px;

background:#fff;

border-radius:14px;

box-shadow:

var(--coach-shadow);

text-decoration:none;

font-size:.85rem;

font-weight:700;

color:

var(--coach-text);

transition:

var(--coach-transition);

}

.coach-shortcut:hover{

transform:

translateY(-3px);

color:

var(--coach-primary);

}

/*==================================================
Timeline
==================================================*/

.coach-feed{

display:flex;

flex-direction:column;

gap:1rem;

max-width: 640px;

margin: 0 auto;

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

}

/*==================================================
Card
==================================================*/

.coach-card{

background:#fff;

border-radius:18px;

box-shadow:

var(--coach-shadow);

overflow:hidden;

transition:

var(--coach-transition);

animation:

fadeUp .45s ease;

}

.coach-card:hover{

transform:

translateY(-4px);

box-shadow:

0 20px 42px rgba(15,23,42,.08);

}

/*==================================================
Header
==================================================*/

.coach-card-header{

display:flex;

align-items:center;

justify-content:space-between;

gap:1rem;

padding:.8rem 1rem .7rem;

}

/*==================================================
AUTHOR
==================================================*/

.coach-author{

display:flex;

align-items:center;

gap:12px;

text-decoration:none;

color:inherit;

min-width:0;

transition:.25s ease;

}

.coach-author:hover{

text-decoration:none;

}

.coach-avatar{

width:42px;

height:42px;

border-radius:50%;

object-fit:cover;

border:2px solid #eef2ff;

flex-shrink:0;

transition:.25s ease;

}

.coach-author:hover .coach-avatar{

transform:scale(1.05);

border-color:#bfdbfe;

}

.coach-author-info{

display:flex;

flex-direction:column;

min-width:0;

}

.coach-author-name{

display:flex;

align-items:center;

gap:6px;

font-size:.88rem;

font-weight:700;

color: #3573c9;

line-height:1.2;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

transition:.25s ease;

}

.coach-author:hover .coach-author-name{

color:red;

}

.coach-author-name .country-flag{

width:16px;

height:12px;

border-radius:2px;

flex-shrink:0;

}

.coach-meta{

font-size:.74rem;

color:var(--coach-muted);

margin-top:2px;

}

/*==================================================
Category
==================================================*/

.coach-category{

display:inline-flex;

align-items:center;

justify-content:center;

padding:

7px
13px;

border-radius:999px;

background:

rgba(37,99,235,.08);

color:

var(--coach-primary);

font-size:.74rem;

font-weight:700;

white-space:nowrap;

}

/*==================================================
Cover
==================================================*/

.coach-cover-link{

display:block;

overflow:hidden;

}

.coach-cover{

width:100%;

height:245px;

object-fit:cover;

transition:

transform .45s ease;

}

.coach-card:hover
.coach-cover{

transform:

scale(1.04);

}

/*==================================================
Body
==================================================*/

.coach-card-body{

padding:.85rem 1rem;

}

.coach-title{

margin:0;

font-size:1.22rem;

font-weight:800;

line-height:1.35;

}

.coach-title a{

text-decoration:none;

color:

var(--coach-text);

transition:

var(--coach-transition);

}

.coach-title a:hover{

color:

var(--coach-primary);

}

.coach-excerpt{

margin-top:.8rem;

font-size:.9rem;

line-height:1.75;

color:

var(--coach-muted);

display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

overflow:hidden;

}

/*==================================================
Footer
==================================================*/

.coach-card-footer{

display:flex;

align-items:center;

justify-content:space-between;

gap:1rem;

padding:0 .95rem .95rem;

flex-wrap:wrap;

}

.coach-stats{

display:flex;

align-items:center;

gap:1rem;

flex-wrap:wrap;

}

.coach-stats span{

display:flex;

align-items:center;

gap:.35rem;

font-size:.8rem;

font-weight:600;

color:

var(--coach-muted);

}


/*==================================================
POST STATS
Premium Compact
==================================================*/

.coach-stats{

display:flex;

align-items:center;

gap:8px;

flex-wrap:wrap;

}

.coach-stat-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:6px;

padding:6px 11px;

background:#fff;

border:1px solid var(--coach-border);

border-radius:999px;

font-size:.78rem;

font-weight:600;

line-height:1;

color:var(--coach-muted);

text-decoration:none;

white-space:nowrap;

transition:all .2s ease;

}

.coach-stat-btn i{

font-size:.88rem;

color:var(--coach-primary);

line-height:1;

flex-shrink:0;

}

.coach-stat-btn span{

display:inline-flex;

align-items:center;

line-height:1;

margin:0;

padding:0;

color:inherit;

}

.coach-stat-btn:hover{

background:#f8fafc;

border-color:#dbeafe;

color:var(--coach-primary);

transform:translateY(-1px);

text-decoration:none;

}

.coach-stat-btn:hover i{

color:var(--coach-primary);

}

/*==================================================
Read Button
==================================================*/

.coach-read-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:.45rem;

padding:

10px
18px;

border-radius:12px;

background:

linear-gradient(

135deg,

var(--coach-primary),

var(--coach-primary-dark)

);

color:#fff;

font-size:.84rem;

font-weight:700;

text-decoration:none;

transition:

var(--coach-transition);

box-shadow:

0 10px 24px rgba(37,99,235,.20);

}

.coach-read-btn:hover{

transform:

translateY(-2px);

color:#fff;

box-shadow:

0 16px 32px rgba(37,99,235,.28);

}

/*==================================================
Empty State
==================================================*/

.coach-empty{

background:#fff;

border-radius:18px;

padding:

3rem
2rem;

text-align:center;

box-shadow:

var(--coach-shadow);

}

.coach-empty-icon{

font-size:3rem;

margin-bottom:1rem;

}

.coach-empty h3{

font-size:1.3rem;

font-weight:800;

margin-bottom:.6rem;

}

.coach-empty p{

max-width:520px;

margin:auto;

font-size:.9rem;

line-height:1.7;

color:

var(--coach-muted);

}

/*==================================================
Pagination
==================================================*/

.coach-pagination{

margin-top:1.6rem;

}

.coach-pagination
.pagination{

gap:.45rem;

}

.coach-pagination
.page-link{

min-width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border:none;

border-radius:12px;

background:#fff;

color:

var(--coach-text);

font-weight:700;

box-shadow:

0 4px 12px rgba(15,23,42,.05);

transition:

var(--coach-transition);

}

.coach-pagination
.page-link:hover{

background:

var(--coach-primary);

color:#fff;

}

.coach-pagination
.page-item.active
.page-link{

background:

var(--coach-primary);

color:#fff;

}

/*==================================================
Animations
==================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(20px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

.coach-card{

animation:

fadeUp .45s ease both;

}

.coach-card:nth-child(2){

animation-delay:.05s;

}

.coach-card:nth-child(3){

animation-delay:.1s;

}

.coach-card:nth-child(4){

animation-delay:.15s;

}

.coach-card:nth-child(5){

animation-delay:.2s;

}

/*==================================================
Hover Effects
==================================================*/

.coach-card{

position:relative;

}

.coach-card::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

var(--coach-primary),

#60a5fa

);

opacity:0;

transition:

var(--coach-transition);

}

.coach-card:hover::after{

opacity:1;

}

.coach-avatar{

transition:

var(--coach-transition);

}

.coach-card:hover
.coach-avatar{

transform:

scale(1.06);

border-color:

#bfdbfe;

}

.coach-category{

transition:

var(--coach-transition);

}

.coach-card:hover
.coach-category{

background:

var(--coach-primary);

color:#fff;

}

.coach-stats span{

transition:

var(--coach-transition);

cursor:default;

}

.coach-stats span:hover{

color:

var(--coach-primary);

transform:

translateY(-2px);

}

.coach-shortcut{

position:relative;

overflow:hidden;

}

.coach-shortcut::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transition:

.7s;

}

.coach-shortcut:hover::before{

left:100%;

}

.coach-create-btn:hover{

animation:

pulse .45s ease;

}

/*==================================================
Focus
==================================================*/

.coach-search input:focus{

outline:none;

}

.coach-search-btn:focus,

.coach-create-btn:focus,

.coach-read-btn:focus,

.page-link:focus{

outline:none;

box-shadow:

0 0 0 4px

rgba(37,99,235,.18);

}

/*==================================================
Scrollbar
==================================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:

#edf2f7;

border-radius:999px;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

var(--coach-primary),

var(--coach-primary-dark)

);

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:

#1d4ed8;

}

/*==================================================
Tablet
==================================================*/

@media (max-width:991px){

.coaching-page{

padding:

1rem
0
1.5rem;

}

.coaching-page
.container{

max-width:100%;

padding:

0
16px;

}

.coach-hero{

flex-direction:column;

align-items:flex-start;

padding:

1.1rem;

}

.coach-hero-right{

width:100%;

}

.coach-create-btn{

width:100%;

justify-content:center;

}

.coach-search-form{

flex-direction:column;

}

.coach-search-btn{

height:48px;

}

.coach-card-header{

flex-direction:column;

align-items:flex-start;

}

.coach-card-footer{

flex-direction:column;

align-items:flex-start;

}

.coach-read-btn{

width:100%;

justify-content:center;

}

}

/*==================================================
Mobile
==================================================*/

@media (max-width:576px){

.coaching-page{

padding:

.8rem
0
1.2rem;

}

.coach-hero{

border-radius:16px;

padding:1rem;

}

.coach-hero-left{

align-items:flex-start;

}

.coach-hero-icon{

width:48px;

height:48px;

font-size:1.45rem;

}

.coach-hero h1{

font-size:1.18rem;

}

.coach-hero p{

font-size:.84rem;

}

.coach-toolbar{

padding:.9rem;

border-radius:16px;

}

.coach-search input{

font-size:.88rem;

}

.coach-filter{

font-size:.76rem;

padding:

7px
13px;

}

.coach-shortcuts{

gap:.55rem;

}

.coach-shortcut{

padding:

9px
13px;

font-size:.78rem;

}

.coach-card{

border-radius:16px;

}

.coach-card-header{

padding:

.9rem;

}

.coach-avatar{

width:40px;

height:40px;

}

.coach-author-name{

font-size:.84rem;

}

.coach-meta{

font-size:.72rem;

}

.coach-category{

font-size:.68rem;

padding:

6px
10px;

}

.coach-cover{

height:190px;

}

.coach-card-body{

padding:

.9rem;

}

.coach-title{

font-size:1.02rem;

}

.coach-excerpt{

font-size:.84rem;

line-height:1.6;

-webkit-line-clamp:2;

}

.coach-card-footer{

padding:

0
.9rem
1rem;

}

.coach-stats{

gap:.75rem;

}

.coach-stats span{

font-size:.74rem;

}

.coach-read-btn{

width:100%;

padding:

11px
16px;

font-size:.82rem;

}

.coach-pagination
.page-link{

min-width:38px;

height:38px;

font-size:.82rem;

}

.coach-empty{

padding:

2.2rem
1.2rem;

}

.coach-empty-icon{

font-size:2.4rem;

}

.coach-empty h3{

font-size:1.1rem;

}

.coach-empty p{

font-size:.84rem;

}

}

/*==================================================
Large Screens
==================================================*/

@media (min-width:1400px){

.coaching-page
.container{

max-width:1040px;

}

.coach-cover{

height:270px;

}

}

.country-flag{

width:18px;

height:13px;

border-radius:2px;

object-fit:cover;

vertical-align:middle;

margin-left:4px;

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

}


/*==================================================
PREMIUM SEARCH BAR
==================================================*/

.coach-search-form{

margin:0;

}

.coach-search-bar{

display:flex;

align-items:center;

gap:14px;

padding:14px;

background:#fff;

border:1px solid #e7edf6;

border-radius:18px;

box-shadow:0 6px 20px rgba(15,23,42,.05);

}

/*==================================================
SEARCH INPUT
==================================================*/

.coach-search-input{

flex:1;

display:flex;

align-items:center;

gap:12px;

height:50px;

padding:0 16px;

background:#f8fafc;

border:1px solid #e7edf6;

border-radius:14px;

transition:.25s;

}

.coach-search-input:hover{

border-color:#c7d2fe;

}

.coach-search-input:focus-within{

background:#fff;

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

.coach-search-input i{

font-size:18px;

color:#94a3b8;

flex-shrink:0;

}

.coach-search-input input{

flex:1;

height:100%;

padding:0;

border:none !important;

background:transparent !important;

box-shadow:none !important;

font-size:14px;

}

.coach-search-input input:focus{

outline:none;

}

/*==================================================
CATEGORY
==================================================*/

.coach-search-category{

width:260px;

flex-shrink:0;

}

.coach-search-category .form-select{

height:50px;

border-radius:14px;

border:1px solid #e7edf6;

background:#f8fafc;

font-size:14px;

font-weight:600;

padding-left:16px;

padding-right:40px;

transition:.25s;

box-shadow:none;

cursor:pointer;

}

.coach-search-category .form-select:hover{

border-color:#c7d2fe;

}

.coach-search-category .form-select:focus{

background:#fff;

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

/*==================================================
BUTTON
==================================================*/

.coach-search-btn{

height:50px;

padding:0 26px;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

border:none;

border-radius:14px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

font-size:14px;

font-weight:700;

white-space:nowrap;

transition:.25s;

}

.coach-search-btn:hover{

transform:translateY(-2px);

box-shadow:0 12px 24px rgba(37,99,235,.22);

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.coach-search-bar{

flex-wrap:wrap;

}

.coach-search-input{

width:100%;

}

.coach-search-category{

width:100%;

}

.coach-search-btn{

width:100%;

}

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:576px){

.coach-search-bar{

padding:12px;

gap:10px;

border-radius:16px;

}

.coach-search-input{

height:46px;

padding:0 14px;

}

.coach-search-category .form-select{

height:46px;

font-size:13px;

}

.coach-search-btn{

height:46px;

font-size:13px;

padding:0 18px;

}

}


/*==================================================
RESET BUTTON
==================================================*/

.coach-reset-btn{

height:50px;

padding:0 22px;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

border:1px solid #e2e8f0;

border-radius:14px;

background:#fff;

color:#64748b;

font-size:14px;

font-weight:700;

text-decoration:none;

white-space:nowrap;

transition:.25s;

}

.coach-reset-btn:hover{

background:#f8fafc;

border-color:#cbd5e1;

color:#dc2626;

transform:translateY(-2px);

}

@media(max-width:992px){

.coach-reset-btn{

width:100%;

height:46px;

}

}

.coach-versions{

display:inline-flex;

align-items:center;

gap:6px;

padding:7px 12px;

margin-left:8px;

border-radius:999px;

background:#ecfdf5;

color:#059669;

font-size:.74rem;

font-weight:700;

text-decoration:none;

transition:.25s;

}

.coach-versions:hover{

background:#059669;

color:#fff;

text-decoration:none;

}


/*==============================
POST TAGS
==============================*/

.coach-post-tags{
    display:flex;
    align-items:center;
    gap:.6rem;
    flex-wrap:wrap;
}

.coach-language-switcher{
    display:flex;
    flex-direction:column;
    gap:.25rem;
}

.coach-language-label{
    font-size:.70rem;
    font-weight:700;
    color:#64748b;
    line-height:1;
}

.coach-language-select{
    width:165px;
    height:32px;
    padding:0 .6rem;
    border:1px solid #dbe3ef;
    border-radius:8px;
    font-size:.75rem;
    font-weight:600;
    background:#fff;
}


@media (max-width:768px){

    .coach-post-tags{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
        flex-wrap:nowrap;
        gap:.5rem;
    }

    .coach-language-switcher{
        flex:0 0 auto;
    }



}


/*==================================================
Load More
==================================================*/

.coach-load-more-wrap{
    display:flex;
    justify-content:center;
    align-items:center;

    margin:1.25rem 0 .25rem;
}

.coach-load-more-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    min-width:180px;
    height:44px;

    padding:0 1.15rem;

    border:1px solid var(--coach-border);
    border-radius:12px;

    background:#fff;
    color:var(--coach-primary);

    font-size:.84rem;
    font-weight:700;

    box-shadow:
        0 5px 16px rgba(15,23,42,.06);

    cursor:pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        color .22s ease;
}

.coach-load-more-btn:hover{
    transform:translateY(-2px);

    background:var(--coach-primary);

    color:#fff;

    border-color:var(--coach-primary);

    box-shadow:
        0 9px 22px rgba(37,99,235,.18);
}

.coach-load-more-btn i{
    font-size:1rem;
}

.coach-load-more-btn.loading{
    pointer-events:none;
    opacity:.65;
}

.coach-load-more-btn.loading i{
    animation:coachLoadSpin .8s linear infinite;
}

.coach-load-more-btn.finished{
    display:none;
}

@keyframes coachLoadSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


.coach-caught-up{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    margin:1.25rem 0 .5rem;

    font-size:.82rem;
    font-weight:700;

    color:var(--coach-muted);


}

.coach-caught-up i{
    font-size:1rem;
    color:#22c55e;
}