/* ============================================
   farCROWD — MOBILE FIRST UI
   file: assets/css/app.css
   Purpose: Layout & system styles only
============================================ */


/* ============================================
   BASE LAYOUT
============================================ */

body{
margin:0;
background:#f6f6f6;
padding-bottom:60px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.container{
padding-bottom:0;
}

.fc-content a{
text-decoration:none;
color:inherit;
}

/* Desktop tetap tampil seperti mobile */

@media (min-width:768px){

.container{
max-width:450px !important;
margin:auto;
}

}


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

.fc-topbar{
height:56px;
background:#ffffff;

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

padding:0 16px;

position:sticky;
top:0;
z-index:100;

border-bottom:1px solid #eee;
}

.fc-topbar-title{
font-size:20px;
font-weight:700;
}

.fc-topbar-icon{
font-size:22px;
text-decoration:none;
color:#333;
}


/* ============================================
   BOTTOM NAVIGATION
============================================ */

.fc-bottom-nav{

position:fixed;
bottom:0;
left:0;

width:100%;
height:62px;

background:#ffffff;
border-top:1px solid #ddd;

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

z-index:1000;

}

.fc-nav-item{

text-align:center;
text-decoration:none;

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

}

.fc-nav-item .icon{
font-size:18px;
}

.fc-nav-item.active{
color:#005698;
font-weight:600;
}




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

/* mobile: sembunyikan scrollbar */

@media (max-width:767px){

.fc-slider::-webkit-scrollbar{
display:none;
}

.fc-slider{
scrollbar-width:none;
}

}


/* desktop: tampilkan scrollbar */

@media (min-width:768px){

.fc-slider::-webkit-scrollbar{
height:8px;
}

.fc-slider::-webkit-scrollbar-track{
background:#eee;
border-radius:10px;
}

.fc-slider::-webkit-scrollbar-thumb{
background:#bbb;
border-radius:10px;
}

.fc-slider::-webkit-scrollbar-thumb:hover{
background:#999;
}

.fc-card-slider-link{
display:block;
width:100%;
}

}


/* ============================================
   GENERIC CARD WRAPPER
   (tanpa padding agar cover full)
============================================ */

.fc-card-base{
background:#ffffff;
border-radius:14px;
border:1px solid #eee;
overflow:hidden;
}


/* ============================================
   DONATION PAGE SYSTEM
============================================ */

.fc-donation-box{

background:#ffffff;
border-radius:14px;

border:1px solid #eee;

padding:16px;
margin-bottom:14px;

}

.fc-donation-title{
font-weight:600;
margin-bottom:8px;
}


/* preset donation */

.fc-amount-btn{
border:1px solid #ddd;
border-radius:10px;
background:#fff;
padding:10px;

transition:all .2s ease;
}

.fc-amount-btn:hover{
border-color:#0dc0e6;
color:#0dc0e6;
}

.fc-amount-btn.active{
border-color:#0dc0e6;
background:#e7f9fd;
color:#0dc0e6;
}


/* ============================================
   BUTTON SYSTEM
============================================ */
.fc-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;

padding:10px 12px;
font-size:14px;
font-weight:600;

line-height:1.2;

border-radius:12px;
border:none;

cursor:pointer;
transition:all .2s ease;
}

.fc-btn{
letter-spacing:.2px;
}

.fc-btn-primary{
background:linear-gradient(135deg,#0dc0e6,#0aa4c3);

color:#fff !important;

box-shadow:0 4px 10px rgba(13,192,230,0.25);
}

.fc-btn-primary:hover{
background:linear-gradient(135deg,#0aa4c3,#088aa4);

color:#fff !important;

transform:translateY(-1px);
box-shadow:0 6px 14px rgba(13,192,230,0.35);
}

.fc-btn-success{
background:linear-gradient(135deg,#25D366,#1ebe5d);
color:#fff !important;

box-shadow:0 4px 10px rgba(37,211,102,0.25);
}

.fc-btn-success:hover{
background:linear-gradient(135deg,#1ebe5d,#169c4a);
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(37,211,102,0.35);
}

.fc-btn-outline{
background:#fff;
border:1px solid #ddd;
color:#555;
}

.fc-btn-outline:hover{
background:#f5f5f5;
}

.fc-btn-danger{
background:#dc3545;
color:#fff;
}

.fc-btn-danger:hover{
background:#bb2d3b;
}

.fc-btn-sm{
padding:6px 10px;
font-size:12px;
border-radius:8px;
}

.fc-btn-lg{
padding:12px 14px;
font-size:15px;
border-radius:14px;
}

.fc-btn-block{
width:100%;
}

.fc-btn-hero{
    display:inline-block;
    background:#ffffff;
    color:#0d4c7d;
    padding:12px 22px;
    border-radius:12px;
    font-weight:700;
    text-decoration:none;
    margin-top:12px;
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.fc-btn-hero:hover{
    background:#f1f5f9;
}

.donate-actions{
display:flex;
gap:10px;
}

.donate-actions .fc-btn{
flex:1;
}

.donate-actions .fc-btn-primary{
flex:2;
}

.fc-btn-main{
    display:inline-block;
    background:linear-gradient(135deg,#0d4c7d,#1e88e5);
    color:#fff;
    padding:14px 28px;     
    border-radius:14px;
    text-decoration:none;
    font-weight:700;
    font-size:16px;

    box-shadow:0 10px 25px rgba(13,76,125,0.3);
    transition:0.2s;
}

.fc-btn-main:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(13,76,125,0.4);
}


/* ============================================
   PAYMENT PAGE
============================================ */

.fc-total-payment{

font-size:22px;
font-weight:700;

color:#dc3545;

}


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

.fc-donation-item{

background:#ffffff;

border-radius:12px;

padding:12px;
margin-bottom:10px;

display:flex;
gap:10px;

align-items:flex-start;

}

.fc-donation-avatar{

width:36px;
height:36px;

border-radius:50%;
background:#ddd;

}

.fc-donation-name{
font-weight:600;
}

.fc-donation-amount{
font-weight:600;
}


/* ============================================
   PAGE SPACER
============================================ */

.fc-bottom-space{
height:90px;
}

.fc-safe-bottom{
height:80px;
}

.fc-page{
padding-bottom:120px;
}





/* ============================================
   REMOVE LINK STYLE INSIDE CARD
============================================ */

.fc-card-wrap a,
.fc-card-wrap a:hover,
.fc-card-wrap a:visited,
.fc-card-wrap a:active{

text-decoration:none !important;
color:inherit !important;

}

/* ============================================
ABOUT FORDIKA CARD
============================================ */

.fc-about-card{

display:flex;
background:#fff;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:#222;
box-shadow:0 4px 12px rgba(0,0,0,0.06);

}

.fc-about-image{

width:40%;
min-height:120px;

}

.fc-about-image img{

width:100%;
height:100%;
object-fit:cover;
display:block;

}

.fc-about-content{

padding:14px;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;

}

.fc-about-title{

font-size:16px;
font-weight:600;
margin-bottom:6px;

}

.fc-about-desc{

font-size:13px;
color:#666;
margin-bottom:8px;

}

.fc-about-link{

font-size:13px;
font-weight:600;
color:#0d6efd;

}

/* ============================================
LEMBAGA FORDIKA
============================================ */

.fc-lembaga-card{

display:block;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,0.06);

}

.fc-lembaga-img{

width:100%;
display:block;

}


/* fc-filter */
.fc-filter-bar{
display:flex;
gap:8px;
margin-bottom:14px;
overflow-x:auto;
}

.fc-filter-chip{
flex-shrink:0;

padding:8px 14px;

border-radius:20px;
border:1px solid #ddd;

background:#fff;
color:#555;

font-size:13px;
font-weight:600;

text-decoration:none;

transition:all .2s ease;
}

.fc-filter-chip:hover{
background:#f5f5f5;
}

.fc-filter-chip.active{
background:#0dc0e6;
color:#fff;
border-color:#0dc0e6;

box-shadow:0 3px 8px rgba(13,192,230,0.25);
}



/* other */
.fc-input{
width:100%;

padding:12px;
border-radius:10px;

border:1px solid #ddd;

font-size:14px;
background:#fff;
}

.fc-input:focus{
outline:none;
border-color:#0dc0e6;
box-shadow:0 0 0 2px rgba(13,192,230,0.15);
}

.platform-btn{
opacity:0.85;
}

.platform-btn:hover{
opacity:1;
}


.fc-link-muted{
font-size:13px;
color:#777;
text-decoration:none;
}

.fc-link-muted:hover{
text-decoration:underline;
color:#333;
}



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

.fc-badge-warning{
display:inline-block;
background:#fff3cd;
color:#856404;

padding:6px 10px;
font-size:12px;
font-weight:600;

border-radius:8px;
}


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

.fc-btn-group{
display:flex;
flex-direction:column;
gap:10px;
margin-top:10px;
}

/* FC ALERT */

.fc-alert{
padding:12px;
border-radius:12px;
font-size:14px;
}

/* success */
.fc-alert-success{
background:#d1e7dd;
color:#0f5132;
}

/* warning */
.fc-alert-warning{
background:#fff3cd;
color:#856404;
}

/* danger */
.fc-alert-danger{
background:#f8d7da;
color:#842029;
}

/* info */
.fc-alert-info{
background:#cff4fc;
color:#055160;
}