/* =============== Base =============== */
* { box-sizing: border-box; }
body { 
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f7f4ef;
  color: #3b2f2f;
}
main { text-align: center; padding: 0 16px; }

/* =============== Header =============== */
.top-bar {
  background-color: #a38b68;
  color: #fff;
  text-align: center;
  padding: 20px 16px;
}
.logo-wrapper {
  display: flex;
  flex-direction: column; /* stack nicely by default */
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.logo-img { width: 200px; height: auto; display: block; }
.site-title { font-size: 2em; margin: 0; color: #fff; position: relative; z-index: 0; }

/* Optional slim strip above the header, if used */
.header-top  { width: 100%; background-color: #f8f8f8; padding: 10px 0; }

/* =============== Navigation =============== */
.nav-bar {
  background-color: #6e573c;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 15px 0;
  flex-wrap: wrap;
  position: sticky;      /* keep it visible when scrolling */
  top: 0;
  z-index: 1000;         /* above content, below overlays */
}
.nav-bar a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  display: inline-block;
  padding: 10px 12px;
  border-radius: 6px;
}
.nav-bar a:hover,
.nav-bar a.active { text-decoration: underline; }

/* =============== Intro / Sections =============== */
.intro { padding: 20px; text-align: center; }
.product-highlight {
  background-color: #fdf8f1;
  padding: 20px;
  margin: 30px 10px;
  border-left: 5px solid #a38b68;
  border-radius: 6px;
}
.product-highlight ul {
  text-align: left;
  margin: 0 auto 10px auto;
  padding-left: 20px;
  max-width: 600px;
}

/* =============== Buttons =============== */
.button {
  background-color: #6e573c;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}
.button:hover { background-color: #5c4933; }
.back-button { display: inline-block; margin-top: 30px; }

/* =============== WhatsApp / Chat Float =============== */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  padding: 10px 15px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 1100;
}

/* =============== Public Gallery (Gallery page) =============== */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}
.gallery img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 15px;
  border: 4px solid #4e392a; /* Dark brown from nav */
}

/* Lightbox */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1200;
}
#lightbox-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  margin-bottom: 20px;
}
#lightbox-close {
  background-color: #4e392a;
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
}
#lightbox-close:hover { background-color: #3b2d20; }

/* =============== Home page strips (horizontal scrollers) =============== */
.home-gallery-section {
  padding: 30px 20px;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.home-gallery-section h2 { color: #4e392a; margin-bottom: 10px; }
.scroll-gallery {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.scroll-gallery img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 15px;
  border: 4px solid #4e392a;
  flex-shrink: 0;
}

/* =============== Recent Work grid (neat squares) =============== */
.recent-work {
  background: #e9e1d3;
  padding: 20px;
  text-align: center;
}
/* Center Recent Work thumbs on desktop */
.recent-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px);
  gap: 12px;
  justify-content: center; /* centers the grid items */
}
.recent-work-grid .item {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  border: 4px solid #4e392a;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.08);
}
.recent-work-grid .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============== Forms / Contact =============== */
.contact-form {
  max-width: 500px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.contact-form input,
.contact-form textarea {
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
}
.contact-form button {
  background-color: #6e573c;
  color: #fff;
  border: none;
  padding: 12px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
}
.contact-form button:hover { background-color: #5a4531; }

/* =============== Admin (dashboard & cards) =============== */
.login-container {
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
  background-color: #f7f4ef;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.login-container input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  font-size: 16px;
}
.login-container button {
  padding: 12px 20px;
  font-size: 16px;
  background-color: #6e573c;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.login-container button:hover { background-color: #5a4531; }

.dashboard { max-width: 900px; margin: 40px auto; padding: 20px; text-align: center; }

/* Admin gallery cards used in tabs */
.dashboard .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.dashboard .gallery-item{
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;   /* keep delete button inside rounded corners */
  padding: 0;         /* ensures delete button hugs the image corner */
}
.dashboard .gallery-item img{
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}
/* reset any global anchor styles and make a small pill */
.dashboard .gallery-item .delete-btn{
  all: unset;
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  background: #c0392b;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}
.dashboard .gallery-item .delete-btn:hover{ background:#a93226; }

/* =============== Mobile tweaks =============== */
@media (max-width: 640px){
  .top-bar { padding: 12px; }
  .logo-img { max-width: 240px; width: 100%; }
  .site-title{
    font-size: 28px; 
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
  }
  .nav-bar{
    gap: 8px;
    padding: 8px 10px;
  }
  .nav-bar a{ font-size: 13px; padding: 9px 10px; }
  main{ padding-top: 14px; }
  .gallery img { width: 160px; height: 160px; }   /* public gallery squares on small screens */
  .scroll-gallery img { width: 120px; height: 120px; }
  .recent-work-grid .item { width: 130px; height: 130px; }
  .whatsapp-float { bottom: 12px; right: 12px; transform: scale(.95); }
}