/* public_html/css/style.css */
/* Minimal styles to match the screenshots (yellow CTAs, clean layout) */

:root{
  /* Warm Natural palette for furniture site */
  --bg: #F6F1EA; /* page background (soft cream) */
  --card-bg: #FFFFFF; /* card background (white) */
  --wood: #8B5E3C; /* wood tone (primary accent) */
  --wood-light: #B88552; /* lighter wood (secondary accent) */
  --gold: #D4AF37; /* gold highlight */
  --yellow: linear-gradient(90deg,#D4AF37,#f0b120); /* CTA gradient using gold */
  --black: #222222; /* primary text (slightly softer than #111) */
  --text: #222222; /* alias */
  --subtext: #6B5A4A; /* secondary text / muted */
  --muted-bg: #EAE6E0; /* muted greys used for icons / placeholders */
  --border: #E9E2D8; /* subtle border tone */
  --light-bg: #F8F6F2; /* light panel bg */
  --error-text: #7a1b1b;
  --error-bg: #FFECEC;

  /* keep social colors (if you use them) */
  --green: #25D366;
  --fb: #1877f2;
  --ig-start: #f09433;
  --ig-end: #bc2a8d;

  --max-width: 980px;
  --card-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

/* Reset / basics */
*{box-sizing:border-box}
body{
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.4;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
}
.logo{height:52px;}
.header-center{text-align:center; flex:1}
.brand{margin:0;font-size:20px;letter-spacing:0.5px}
.tagline{margin:2px 0 0;color:var(--subtext);font-size:13px}
.header-left, .header-right{width:140px;display:flex;align-items:center;justify-content:center}
.profile-icon{
  width:40px;height:40px;border-radius:50%;background:var(--muted-bg);display:flex;align-items:center;justify-content:center;font-weight:700;
}

/* ===== NEW: Classic rounded search bar (replaces old search-row styles) ===== */
/* container */
.search-row {
  background: transparent;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex;
  justify-content: center;
}

/* pill-style search form */
.search-row form,
.search-bar-inline.classic {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 12px 16px;
  border-radius: 999px;
  /* thick border to match the image */
  border: 3px solid var(--wood); /* default dark border; change to wood-tone below if desired */
  background: var(--card-bg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  box-sizing: border-box;
  align-items: center;
}

/* Optional: use wood border instead of black
   Uncomment the following to enable wood tone border */
/*
.search-row form,
.search-bar-inline.classic {
  border-color: var(--wood);
  box-shadow: 0 10px 30px rgba(139,94,60,0.08);
}
*/

/* left icon container (magnifier) */
.search-row .search-icon,
.search-bar-inline.classic .search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 6px;
  margin-right: 6px;
  color: var(--text);
  width: 36px;
  height: 36px;
}

/* actual input */
.search-row input[type="search"],
.search-bar-inline.classic input[type="search"]{
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--text);
  padding: 10px 8px;
  min-width: 0;
}

/* hidden normal submit kept for compatibility (so existing JS can use it) */
#search-btn.visually-hidden, .visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* voice button (right circle) */
#voice-btn, .search-bar-inline.classic .voice-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 180ms ease;
}

/* mic svg size */
#voice-btn svg { width: 20px; height: 20px; display:block; }

/* hover/active */
#voice-btn:hover, .search-bar-inline.classic .voice-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* focus visual for accessibility - golden halo */
.search-row input[type="search"]:focus {
  box-shadow: 0 0 0 6px rgba(212,175,55,0.10); /* using gold highlight */
  border-radius: 999px;
}

/* small screens: slightly smaller pill and icons */
@media (max-width:480px){
  .search-row form,
  .search-bar-inline.classic {
    padding: 10px 12px;
    border-width: 2.5px;
  }
  .search-row .search-icon { width:34px; height:34px; margin-right:8px; }
  #voice-btn { width:42px; height:42px; }
  .search-row input[type="search"] { font-size:15px; }
}

/* ======================================================================== */
/* keep rest of original styles below (cards, forms, profile modal, footer) */
/* ======================================================================== */

/* search instruction block (place above search-row) */
.search-instruction{
  margin:16px auto 8px auto;
  padding:14px;
  background:var(--light-bg);
  border:1px solid var(--border);
  border-radius:8px;
  max-width:var(--max-width);
}
.search-instruction h3{ margin:0 0 6px 0; font-size:18px; color:var(--text); }
.search-instruction p{ margin:6px 0; font-size:15px; color:var(--subtext); }

/* legacy fallback inline class kept for compatibility */
.search-bar-inline { display:flex; gap:8px; align-items:center; width:100%; }
.search-bar-inline input[type=search]{ flex:1; padding:10px; border:1px solid var(--border); border-radius:6px; }

/* voice button & mic active (legacy) */
.voice-btn{
  padding:10px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card-bg);
  cursor:pointer;
  font-size:16px;
}
.voice-btn.mic-active{ background:#ffeaa7; box-shadow:0 2px 6px rgba(0,0,0,0.08); }

/* invalid message & loader */
.invalid-msg{
  color:var(--error-text);
  background:var(--error-bg);
  padding:10px;
  border-radius:6px;
  margin-top:12px;
  display:none;
  max-width:var(--max-width);
}
#search-loader{
  display:none;
  margin-top:10px;
  font-size:14px;
  color:var(--subtext);
}

/* container */
.container{max-width:var(--max-width);margin:20px auto;padding:0 12px}

/* card */
.card{background:var(--card-bg);padding:18px;border-radius:8px;box-shadow:var(--card-shadow);margin-bottom:18px}
.card h2{margin-top:0}
.lead{color:var(--subtext)}

/* form styles */
label{display:block;margin-bottom:10px;font-size:14px}
input[type="text"], input[type="tel"], textarea, input[type="file"]{
  width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;margin-top:6px;
}
.required{color:#c33;margin-left:4px}
.form-actions{margin-top:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:6px;text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:var(--wood);color:var(--card-bg)}
.btn-yellow{
  background:var(--yellow);
  color:var(--text);
  background-clip: padding-box;
  border:0;
  padding:10px 16px;
  border-radius:8px;
  box-shadow: 0 4px 14px rgba(240,177,32,0.18);
}
.btn-green{background:var(--green);color:var(--card-bg)}
.btn-email{background:#ffd966;color:#0066cc}

/* contact CTA grid */
.contact-ctas{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.contact-ctas .btn{min-width:200px;text-align:center}

/* footer */
.site-footer{background:var(--card-bg);padding:18px;border-top:1px solid var(--border)}
.site-footer .footer-col{display:inline-block;vertical-align:top;width:30%;padding:10px}
.footer-col img.founder-photo{width:80px;height:80px;border-radius:50%;object-fit:cover}
.footer-bottom{padding:12px 10px;border-top:1px solid var(--border);margin-top:12px;text-align:center;font-size:13px;color:var(--subtext)}
.social-ctas .btn{display:inline-block;margin-right:8px}

/* >>> Profile modal & avatar styles (append below) <<< */

/* Profile icon clickable look */
.profile-icon {
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--muted-bg);
  font-weight:700;
  cursor:pointer;
  user-select:none;
  overflow:hidden;
}

/* Modal styles */
.profile-modal { position:fixed; inset:0; z-index:9999; display:none; }
.profile-modal__backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.45);
}
.profile-modal__dialog {
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:var(--card-bg);
  width:360px;
  max-width:90%;
  border-radius:10px;
  padding:18px;
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
  z-index:10000;
  font-family: inherit;
}
.profile-modal__close {
  position:absolute; right:10px; top:6px;
  background:transparent; border:0; font-size:22px; cursor:pointer;
}
.profile-modal .helper { font-size:13px; color:var(--subtext); margin-bottom:8px; }

/* avatar preview */
#pf-avatarPreview { width:80px; height:80px; border-radius:50%; overflow:hidden; background:#f0f0f0; display:flex; align-items:center; justify-content:center; }
#pf-avatarPreview img { width:100%; height:100%; object-fit:cover; }

/* small responsive */
@media (max-width:420px){
  .profile-modal__dialog { width:94%; padding:14px; }
}

/* alerts */
.alert{max-width:var(--max-width);margin:10px auto;padding:10px;border-radius:6px}
.alert.success{background:#e6ffed;border:1px solid #b8f0c2;color:#084d21}
.alert.error{background:var(--error-bg);border:1px solid #f0b9b9;color:var(--error-text)}

/* image results grid (if needed) */
#image-results{ margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:var(--max-width); margin-left:auto; margin-right:auto; }
.image-card img{ width:100%; height:160px; object-fit:cover; border-radius:6px; display:block; }

/* responsive */
@media (max-width:800px){
  .site-header{flex-wrap:wrap;gap:8px}
  .header-left, .header-right{width:80px}
  .site-footer .footer-col{width:100%}
  .contact-ctas .btn{min-width:100%;text-align:center}
  #image-results{ grid-template-columns:repeat(2,1fr); }
  .search-row form{flex-direction:row; gap:10px} /* keep row on small devices for pill look */
  .search-row input[type="search"]{ width:100% }
}
/* Products Showcase Section */
.products-showcase {
  margin: 40px auto;
  text-align: center;
}
/* Product Showcase Grid */
.products-showcase {
  margin: 30px auto;
  max-width: var(--max-width);
  padding: 0 12px;
}

.products-showcase h2 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 18px;
  color: #222;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.product-card img {
  width: 100%;
  height: 140px;   /* ফটো ছোট করে শো করার জন্য */
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  background: #fff;
}