/* ===============================
   ROOT VARIABLES
=================================*/
:root {
    --primary: #7671d8;
    --primary-dark: #3730a3;
    --accent: #06b6d4;
    --bg-body: #c48d3a;
    --bg-card: #26243f;
    --text-main: #0f172a;
    --text-muted: #1d6bd9;
    --success: #26b45a;
    --danger: #ef4444;
    --shadow: 0 10px 25px rgba(0,0,0,0.08);
    --radius: 14px;
}

/* ===============================
   GLOBAL
=================================*/



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


    body {
    background-image: url('https://i.pinimg.com/736x/b1/bc/53/b1bc53907fc3a5ee92116644056fe8d6.jpg');
    background-size: cover;
    background-position: center;
    font-family: 'Arial', sans-serif;display:grid;
    grid-template-columns:320px 1fr;
    gap:30px;
    max-width:1200px;
    margin:auto;
    padding:30px;
    display:flex;
    justify-content: center;
    align-items: center;
}

@media(max-width:900px){
    .app-container{
        grid-template-columns:1fr;
    }
}

/* ===============================
   LEFT PANEL
=================================*/

.control-panel{
    background:var(--bg-card);
    padding:25px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    height:fit-content;
    border-top:6px solid var(--primary);
}

h1{
    margin-top:0;
    color:var(--primary);
}

/* ===============================
   FORM
=================================*/

.form-group{
    margin-bottom:18px;
}

label{
    font-size:.75rem;
    font-weight:bold;
    color:var(--text-muted);
    text-transform:uppercase;
}

input,select{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #cbd5e1;
    transition:.25s;
}

input:focus,select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

.btn-add{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:rgb(13, 12, 12);
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
    margin-top:10px;
}

.btn-add:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 20px rgba(79,70,229,.25);
}


#places-display{
    display: block;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}



.place-card{
    border-radius: 20px;
    flex-direction:column;
    background:rgb(132, 132, 202);
    box-shadow: #06b6d4;
    padding:20px;
    box-shadow:var(--shadow);
    transition:.35s;
    position:relative;
    overflow:hidden;
    text-align: center;
    margin: 5%;

}

.place-card:hover{
    transform:translateY(-10px);
}



.place-card::before{

    content:"";
    position:absolute;
    top: 1px;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,var(--primary),var(--accent));

}



.place-title{
    margin:12px 0 6px;
    font-size:1.3rem;
}

.place-meta{
    color:var(--text-muted);
    font-size:.9rem;
    margin-bottom:15px;
}

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

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

/* VISITED BUTTON */

.visit-btn{
    flex:1;
    border:none;
    padding:10px;
    border-radius:8px;
    background:var(--success);
    color:white;
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.visit-btn:hover{
    transform:scale(1.05);
}

/* DELETE BUTTON */

.delete-btn{
    border:none;
    padding:10px;
    border-radius:8px;
    background:#fee2e2;
    color:var(--danger);
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.delete-btn:hover{
    background:var(--danger);
    color:white;
}

/* ===============================
   VISITED STATE
=================================*/

.visited{
    opacity:.75;
}

.visited::before{
    background:var(--success);
}

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

.empty-state{
    padding:60px;
    text-align:center;
    border-radius:var(--radius);
    border:2px dashed #cbd5e1;
    color:var(--text-muted);
    background:white;
}