/* Minimalist responsive styles for pershopai */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#0f766e;
  --card:#f8fafc;
  --max-width:1100px;
  --radius:10px;
  --gap:16px;
  --container-padding:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:98%;
  margin:4px 1%; /*. top/bottom 4px, and left and right 1% */
  padding:0 var(--container-padding);
}

.site-header{
  border-bottom:1px solid #e6e7ea;
  background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  backdrop-filter: blur(4px);
}
.nav-container{
  display:flex;align-items:center;gap:12px;justify-content:space-between;padding:6px 0;
}
.brand{font-size:1.5rem; font-family: "Saira Condensed", sans-serif; font-weight:700;text-decoration:none;color:var(--text);}

.nav{display:flex}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.nav-list a{text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:8px}
.nav-list a:hover{background:#f1f5f9;color:var(--text);font-weight:500;font-size:1.1rem;transition:1s ease-out;}
.nav-list .focus_tab{font-weight:600;color:#000000;background-color:#DFF4F5;pointer-events:none;}

.nav-toggle{display:none;background:transparent;border:0;padding:8px}
.hamburger{display:block;width:20px;height:2px;background:var(--text);position:relative}
.hamburger::before,.hamburger::after{content:'';display:block;width:20px;height:2px;background:var(--text);position:absolute;left:0}
.hamburger::before{transform:translateY(-6px)}
.hamburger::after{transform:translateY(6px)}

.main{padding:12px 0}
.hero{padding:16px 0;text-align:center}
.hero-title{font-size:clamp(1.4rem, 2.6vw, 2rem);margin:0 0 8px}
.hero-sub{color:var(--muted);margin:0 0 18px}

.search-form{display:flex;gap:10px;justify-content:center;max-width:750px;margin:0 auto}
.search-input{flex:1;padding:12px 14px;border:1px solid #e6e7ea;border-radius:999px;outline:none}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--accent);border:1px solid var(--accent);background:transparent}
.btn.primary{background:var(--accent);color:white;border-color:var(--accent)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:24px}
.card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:0 6px 12px rgba(15,23,42,0.03);min-height:110px}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px;color:var(--muted)}

.profile-panel{padding:18px;border-radius:var(--radius);background:#fffefc;border:1px solid #f3f4f6}
.muted{color:var(--muted)}

.site-footer{border-top:1px solid #e6e7ea;padding:4px 0;margin-top:10px;text-align:center}

tr.topbottomline {border-top: 1pt solid black; border-bottom: 1pt solid black;}
td.hardwrap {font-size: 0.8em; word-wrap:break-word; word-break:break-all; padding-left:10px;}
td.wrap {word-wrap: normal; white-space: normal; padding-left:10px;}
td.smallwrap {word-wrap: normal; white-space: normal; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; padding-left:10px;}

/* Auth Forms Styling */
.auth-container {
  max-width: calc(400px + 10vw);
  margin: 40px auto;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px rgba(15,23,42,0.08);
}

.auth-tabs {
  display: flex;
  gap: 1px;
  margin-bottom: 24px;
  background: #e6e7ea;
  border-radius: var(--radius);
  padding: 4px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab.active {
  background: white;
  color: var(--text);
  font-weight: 500;
}

.auth-form-container {
  transition: opacity 0.3s ease;
}

.auth-form-container.hidden {
  display: none;
}

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

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #e6e7ea;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-group input:focus {
  border-color: var(--accent);
}

.remember-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.forgot-link {
  color: var(--accent);
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}

.terms {
  font-size: 0.9rem;
  color: var(--muted);
}

.terms a {
  color: var(--accent);
  text-decoration: none;
}

.terms a:hover {
  text-decoration: underline;
}

.full-width {
  width: 100%;
}

.product_row {
  display: flex;
  gap: 10px;
  margin-top:20px; 
  margin-left:auto; 
  margin-right:auto; 
  text-align:left;
  width:98%
}
.product_desc {
  max-width: 70%;
  display: block;
  float: left;
}
.product_img {
  object-fit: contain;
  width: 100%;
  min-width: 180px;
}

.async_result {
  margin: auto;
  width:85%;
  border-radius: 10px;
  background: #000000;
  font-size: 0.95rem;
  color: #4DF04D;
}

.blink_text {
  animation: blinker_t 2s linear infinite;
}

@keyframes blinker_t {
  0%  { opacity: 1;  }
  10% {  opacity: 0;  }
  30% {  opacity: 1;  }
  100% { opacity: 1; }
}

.blink_dot {
  animation: blinker_d 2s linear infinite;
}

@keyframes blinker_d {
  0% {  opacity: 1; }
  20% {  opacity: 0;  }
  90% {  opacity: 1;  }
  100% { opacity: 1; }
}

/* Responsive tweaks */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav{display:none}
  .nav.open{display:block}
  .nav-toggle{display:block}
  .cards{grid-template-columns:1fr}
  .search-form{flex-direction:column;padding:0 12px}
  .search-input{width:100%}
  .auth-container {
    margin: 20px auto;
    padding: 16px;
  }
}