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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Vazirmatn",sans-serif;
-webkit-tap-highlight-color:transparent;
}

html{

scroll-behavior:smooth;

}

body{

background:

linear-gradient(
180deg,
#edf3f7,
#f8fafc
);

display:flex;

justify-content:center;

min-height:100vh;

color:#1e293b;

}

/* ==========================================
APP
========================================== */

.mobile-app{

width:100%;

max-width:530px;

min-height:100vh;

background:#f8fafc;

overflow:hidden;

position:relative;

box-shadow:

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

}

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

.page-header{

height:140px;

background:

linear-gradient(
135deg,
#2563eb,
#0f766e
);

padding:22px;

display:flex;

align-items:center;

gap:16px;

color:#fff;

position:relative;

overflow:hidden;

}

.page-header::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:

rgba(255,255,255,.08);

border-radius:50%;

left:-70px;

top:-90px;

}

.page-header::after{

content:"";

position:absolute;

width:130px;

height:130px;

background:

rgba(255,255,255,.05);

border-radius:50%;

right:-40px;

bottom:-40px;

}

.back-btn{

width:46px;

height:46px;

border:none;

border-radius:16px;

background:

rgba(255,255,255,.18);

backdrop-filter:blur(15px);

font-size:22px;

cursor:pointer;

color:#fff;

transition:.3s;

z-index:2;

}

.back-btn:hover{

transform:scale(1.05);

}

.header-info{

z-index:2;

}

.page-header h1{

font-size:23px;

font-weight:800;

margin-bottom:4px;

}

.page-header p{

font-size:13px;

opacity:.92;

}

/* ==========================================
HERO
========================================== */

.hero-card{

margin:-22px 18px 18px;

background:

rgba(255,255,255,.92);

backdrop-filter:blur(18px);

border-radius:24px;

padding:18px;

box-shadow:

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

position:relative;

z-index:10;

animation:fadeUp .5s;

}

.hero-content{

display:flex;

align-items:center;

gap:16px;

}

.hero-icon{

width:62px;

height:62px;

border-radius:20px;

background:

linear-gradient(
135deg,
#2563eb,
#14b8a6
);

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

box-shadow:

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

}

.hero-card h2{

font-size:20px;

font-weight:800;

margin-bottom:5px;

}

.hero-card p{

font-size:14px;

color:#64748b;

line-height:1.8;

}

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

.search-box{

margin:0 18px 20px;

background:#fff;

height:54px;

border-radius:18px;

display:flex;

align-items:center;

padding:0 18px;

gap:12px;

border:1px solid #edf2f7;

box-shadow:

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

}

.search-box i{

font-size:20px;

color:#0f766e;

}

.search-box input{

flex:1;

border:none;

outline:none;

background:none;

font-size:15px;

color:#1e293b;

}

.search-box input::placeholder{

color:#94a3b8;

}

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

.sports-list{

padding:0 18px 25px;

display:flex;

flex-direction:column;

gap:18px;

}

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

.sport-card{

background:#fff;

border-radius:24px;

overflow:hidden;

border:1px solid #edf2f7;

box-shadow:

0 8px 25px rgba(15,23,42,.05);

transition:.35s;

animation:fadeUp .5s;

}

.sport-card:hover{

transform:translateY(-5px);

box-shadow:

0 18px 40px rgba(37,99,235,.15);

}

.sport-image{

height:210px;

overflow:hidden;

position:relative;

}

.sport-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.sport-card:hover img{

transform:scale(1.08);

}

.price-badge{

position:absolute;

left:15px;

top:15px;

background:

linear-gradient(
135deg,
#f59e0b,
#f97316
);

padding:9px 15px;

border-radius:50px;

color:#fff;

font-size:13px;

font-weight:700;

box-shadow:

0 10px 18px rgba(249,115,22,.35);

}

.sport-content{

padding:18px;

}

.sport-title{

font-size:20px;

font-weight:800;

margin-bottom:12px;

color:#0f172a;

}

.sport-address{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#64748b;

margin-bottom:18px;

}

.sport-address i{

color:#14b8a6;

font-size:17px;

}

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

.detail-btn{

width:100%;

height:50px;

border:none;

border-radius:16px;

background:

linear-gradient(
135deg,
#2563eb,
#06b6d4
);

color:#fff;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.35s;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

box-shadow:

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

}

.detail-btn:hover{

transform:translateY(-2px);

box-shadow:

0 15px 30px rgba(37,99,235,.30);

}

.detail-btn:active{

transform:scale(.97);

}

/* ==========================================
EMPTY
========================================== */

.empty-box{

display:none;

padding:70px 25px;

text-align:center;

}

.empty-box i{

font-size:70px;

color:#cbd5e1;

margin-bottom:18px;

display:block;

}

.empty-box h3{

font-size:20px;

font-weight:800;

margin-bottom:10px;

color:#334155;

}

.empty-box p{

font-size:14px;

color:#64748b;

line-height:1.9;

}

/* ==========================================
LOADING
========================================== */

.loading-box{

padding:0 18px 30px;

display:flex;

flex-direction:column;

gap:18px;

}

.skeleton-card{

height:280px;

border-radius:24px;

background:

linear-gradient(

90deg,

#eceff3 20%,

#f8fafc 50%,

#eceff3 80%

);

background-size:300% 100%;

animation:skeleton 1.2s linear infinite;

}

/* ==========================================
ANIMATION
========================================== */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(35px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes skeleton{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{

width:6px;

}

::-webkit-scrollbar-thumb{

background:#cbd5e1;

border-radius:50px;

}

::-webkit-scrollbar-track{

background:transparent;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:390px){

.page-header{

padding:18px;

}

.hero-card{

margin:-18px 14px 16px;

padding:16px;

}

.search-box{

margin:0 14px 18px;

}

.sports-list{

padding:0 14px 25px;

}

.sport-title{

font-size:18px;

}

.sport-image{

height:190px;

}

}

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

@media(min-width:768px){

body{

padding:35px;

background:

linear-gradient(

135deg,

#dde7ef,

#eef3f8

);

}

.mobile-app{

border-radius:34px;

min-height:900px;

}

}

/* ==========================================
CARD EFFECT
========================================== */

.sport-card::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

border-radius:24px;

background:

linear-gradient(

180deg,

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

transparent

);

opacity:0;

transition:.35s;

}

.sport-card{

position:relative;

}

.sport-card:hover::after{

opacity:1;

}

.sport-phone{

display:flex;

align-items:center;

gap:8px;

margin-bottom:18px;

padding:10px 14px;

background:#f8fafc;

border-radius:14px;

font-size:14px;

color:#334155;

border:1px solid #e2e8f0;

}

.sport-phone i{

color:#10b981;

font-size:17px;

}