/* =========================
   🍣 Food Memories
   Liquid Glass UI
========================= */

:root{
  --glass:rgba(255,255,255,.55);
  --glass2:rgba(255,255,255,.35);
  --border:rgba(255,255,255,.7);
  --accent:#ff7448;
  --text:#222;
}


*{
  box-sizing:border-box;
}


body{
  margin:0;
  min-height:100vh;

  font-family:
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;

  background:
  radial-gradient(circle at top left,#ffe4d2,transparent 35%),
  radial-gradient(circle at bottom right,#dff5ff,transparent 35%),
  linear-gradient(135deg,#fff7ef,#f5f1ff);

  background-attachment:fixed;

  color:var(--text);

  padding:
  20px
  20px
  110px;
}



/* HEADER */

header{

  min-height:170px;

  display:flex;
  flex-direction:column;
  justify-content:center;

}



/* GLASS CARD */


.card,
header{


background:
var(--glass);


backdrop-filter:
blur(25px);


-webkit-backdrop-filter:
blur(25px);


border:

1px solid

var(--border);


border-radius:
34px;


padding:
28px;


margin-bottom:
24px;


box-shadow:

0 20px 60px

rgba(0,0,0,.08);


}




h1{
font-size:34px;
}


h2{
font-size:25px;
}




/* FORM */


input,
select{


width:100%;


border:none;


outline:none;


padding:17px;


border-radius:22px;


background:

rgba(255,255,255,.45);



backdrop-filter:
blur(15px);



font-size:16px;


margin:

8px 0 18px;


}



/* BUTTON */


button{


width:100%;


border:none;


padding:17px;


border-radius:24px;


font-size:16px;


font-weight:700;


background:

linear-gradient(
135deg,
#ff7448,
#ffb36b
);



color:white;


cursor:pointer;


transition:.2s;


}



button:hover{


transform:

translateY(-3px);


box-shadow:

0 10px 25px #0002;


}



button:active{


transform:

scale(.95);


}






/* LIST CARD */


.birthday-row,
.popup-item,
.mini-card{


background:

rgba(255,255,255,.45);


border-radius:28px;


padding:22px;


margin:15px 0;


box-shadow:

0 10px 25px

rgba(0,0,0,.05);


transition:.2s;


}



.birthday-row:hover,
.popup-item:hover{


transform:

translateY(-4px);


cursor:pointer;


}








/* IMAGE */


img{


max-width:100%;


border-radius:28px;


}



.photo-detail{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(150px,1fr)
);



gap:15px;


margin-top:15px;


}




.photo-detail img{


width:100%;


height:220px;


object-fit:cover;


}








/* CALENDAR */


#calendarGrid{


display:grid;


grid-template-columns:

repeat(7,1fr);


gap:12px;


}




.day{


min-height:80px;


background:

rgba(255,255,255,.45);


border-radius:24px;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


cursor:pointer;


transition:.2s;


}



.day:hover{


transform:

translateY(-5px);


box-shadow:

0 15px 35px #0002;


}



.day:active{


transform:

scale(.93);


}




.today-day{


background:

linear-gradient(

135deg,

#ff7448,

#ffb36b

)

!important;



color:white;


}




.week-head{


text-align:center;


font-weight:bold;


}







/* NAV */


nav{


position:fixed;


bottom:18px;


left:50%;


transform:

translateX(-50%);



width:

calc(100% - 30px);



max-width:650px;



height:70px;


display:flex;


align-items:center;


justify-content:space-around;



background:

rgba(255,255,255,.65);



backdrop-filter:

blur(30px);



-webkit-backdrop-filter:

blur(30px);



border-radius:40px;



box-shadow:

0 20px 50px

rgba(0,0,0,.15);



z-index:999;


}




nav a{


text-decoration:none;


color:#333;


font-size:17px;


transition:.2s;


}



nav a:hover{


transform:

translateY(-3px);


}







/* MOBILE */


@media(max-width:600px){


body{

padding:

14px

14px

100px;

}



.card,
header{


border-radius:28px;


padding:22px;


}



#calendarGrid{


gap:8px;


}



.day{


min-height:60px;


border-radius:18px;


}



h1{

font-size:30px;

}


}
/* Calendar Controls Fix */

.calendar-control,
.calendar-controls{

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

}


.calendar-control button,
.calendar-controls button,
#prevMonth,
#nextMonth{

width:55px;

height:55px;

border-radius:50%;

padding:0;

font-size:22px;

}


#todayBtn{

width:auto;

padding:

12px 35px;

margin:

15px auto;

display:block;

}
/* Admin Tile Menu */

.admin-grid{

display:grid;

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

gap:18px;

margin-top:20px;

}



.admin-grid button{

height:120px;

width:100%;


border-radius:28px;


font-size:18px;


line-height:1.6;


background:

rgba(255,255,255,.45);


color:#222;


backdrop-filter:
blur(25px);


-webkit-backdrop-filter:
blur(25px);


border:

1px solid rgba(255,255,255,.7);



box-shadow:

0 15px 35px rgba(0,0,0,.08);


}



.admin-grid button:hover{

transform:

translateY(-5px);

}



.admin-grid button:active{

transform:

scale(.95);

}
.birthday-row button{

width:48%;

display:inline-block;

margin:5px 1%;

}
.admin-grid button{

font-size:18px;

}


.admin-grid button::first-line{

font-size:32px;

}
/* Event Action Tile */

.action-grid{

display:grid;

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

gap:15px;

margin-top:20px;

}



.action-grid button{

height:85px;

width:100%;


border-radius:25px;


background:

rgba(255,255,255,.45);


color:#222;


box-shadow:

0 10px 25px rgba(0,0,0,.08);


}



.action-grid button:hover{

transform:
translateY(-4px);

}
/* Calendar Header */

.calendar-top{

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

margin-bottom:15px;

}



.calendar-top h2{

flex:1;

text-align:center;

margin:0;

}



#prevMonth,
#nextMonth{


width:55px;

height:55px;


border-radius:50%;


padding:0;


font-size:26px;


}



#todayBtn{

max-width:180px;


margin:

10px auto 20px;


display:block;


}
/* iOS PIN */

#pin{

opacity:0;

height:1px;

padding:0;

margin:0;

}


.pin-display{

display:flex;

justify-content:center;

gap:18px;

margin:

25px 0;

}


.pin-display span{

width:16px;

height:16px;

border-radius:50%;


border:

2px solid #222;


display:block;

}


.pin-display span.active{

background:#222;

}
/* Monkey Login */

.monkey{

font-size:70px;

text-align:center;

margin:25px 0;


transition:

0.3s;


}


.monkey.shake{

animation:

shake .25s;

}



@keyframes shake{


0%{

transform:translateX(0);

}


25%{

transform:translateX(-8px);

}


50%{

transform:translateX(8px);

}


100%{

transform:translateX(0);

}


}