/* I took this css from another website (PS: modified)*/
:root{
    --accent:#c44;
    --muted:#666;
    --success:rgb(60, 179, 113);
    --danger:rgb(255, 0, 0);
    --max-width:1000px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;color:#222;background:#fafafa}
.container{max-width:var(--max-width);margin:24px auto;padding:0 16px}
.site-header{ background-image: url('coverart.png'); background-repeat: no-repeat;background-size: cover;background-position: center; padding:20px;border-bottom:1px solid #eee}
.site-header h1{margin:0;color:var(--accent)}
.tagline{margin:6px 0;color:var(--muted)}
nav a{color:var(--muted);text-decoration:none;margin-right:8px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none}
.card{background:#fff;padding:12px;border-radius:8px;border:1px solid #ececec;margin-bottom:16px}
.price-table{width:100%;border-collapse:collapse;background:#fff}
.price-table th, .price-table td{padding:12px;border-bottom:1px solid #eee;text-align:left}
.price-table th{background:#f7f7f7}
.price{text-align:right;font-weight:600}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gallery-item img{width:100%;height:140px;object-fit:cover;border-radius:6px;border:1px solid #ddd}
.admin-table{width:100%;border-collapse:collapse;margin-top:12px}
.admin-table th, .admin-table td{padding:8px;border-bottom:1px solid #eee}
.form-actions{margin-top:8px}
.linklike{background:none;border:0;color:var(--accent);cursor:pointer;padding:0}
.btn-muted{background:#eee;padding:6px 10px;border-radius:6px;text-decoration:none;color:#333;margin-left:8px}
.site-footer{
    position: fixed;
    height: 50px;
    text-align:center;
    bottom: 0px;
    color:var(--muted);
    border-top:1px solid #eee;
    margin-bottom: 0px;
    left: 0px;
    right: 0px;
}

/*.site-footer {*/
/*    position: fixed;*/
/*    height: 50px;*/
/*    background-color: red;*/
/*    bottom: 0px;*/
/*    left: 0px;*/
/*    right: 0px;*/
/*    margin-bottom: 0px;*/
/*}*/

/*for admin admin*/

.container.admin{
    display:block; /* single column layout: sections flow vertically */
    max-width: var(--max-width);
    margin: 24px auto;
    padding: 0 16px;
}

/* section is full width and spaced */
.container.admin > section{
    width:100%;
    margin-bottom:20px;
}

/* cards full-width inside admin sections */
.container.admin .card{
    width:100%;
    margin-bottom:16px;
}

/* form controls take full width and stack nicely */
.container.admin form label{ display:block; margin-bottom:12px; }
.container.admin input[type="text"],
.container.admin input[type="number"],
.container.admin input[type="file"],
.container.admin textarea{
    width:100%;
    box-sizing:border-box;
}

/* Previews thumbnails in admin table */
.admin-table img{
    height:60px;
    width:auto;
    border-radius:6px;
    display:block;
    object-fit:cover;
}

/* Compacts table styling for admin actions */
.admin-table td.actions, .admin-table td .linklike{ white-space:nowrap }

/* Flashes messages */
.flash{ padding:10px 14px; border-radius:6px; margin-bottom:12px; font-weight:600 }
.flash--ok{ background:rgba(42,157,143,0.12); color:var(--success); border:1px solid rgba(42,157,143,0.15) }
.flash--err{ background:rgba(230,57,70,0.08); color:var(--danger); border:1px solid rgba(230,57,70,0.12) }

/* Small niceties lol*/
.admin .card form > label{ margin-bottom:10px }
.admin .card .form-actions{ justify-content:flex-start; gap:8px; }

/* Login page helpers */
.login-card{
    max-width:420px;
    margin:36px auto;
    padding:20px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    border:1px solid #eee;
}
.login-card h1{ margin:0 0 12px; font-size:1.25rem; color:var(--accent) }
.login-card label{ display:block; margin-bottom:12px; color:#333; font-size:.95rem; }
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"]{
    width:100%;
    padding:9px 10px;
    border:1px solid #d8d8d8;
    border-radius:6px;
    font-size:1rem;
    box-sizing:border-box;
    background:#fff;
}
.form-actions{ margin-top:12px; }
.btn{ background:var(--accent); color:#fff; border:0; padding:9px 14px; border-radius:6px; cursor:pointer; }
.btn:hover{ filter:brightness(.95); }

/* Prevent fixed footer from covering content */
body { padding-bottom: 70px; }