/* SERPsKit public styles - two variants */
/* Theme colors */
:root{
  --serpskit-green:#62C03A;
  --serpskit-bg:#FFFFFF;
  --serpskit-text:#1F2937;
  --serpskit-gray:#6B7280;
}

.serpskit-wrap{
  font-family:'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Base container — shared */
.serpskit-container{
  box-sizing:border-box;
  background:var(--serpskit-bg);
  border:5px dashed var(--serpskit-green);
  padding:30px;
  margin:0 auto 24px auto;
}

/* Typography (px per spec) */
.serpskit-h2{
  margin:0 0 12px 0;
  font-size:34px;
  font-weight:700;
  color:var(--serpskit-text);
  line-height:1.1;
}
.serpskit-desc{
  margin:0 0 18px 0;
  font-size:18px;
  color:var(--serpskit-text);
  line-height:1.3;
}

/* Row */
.serpskit-row{ display:flex; gap:10px; align-items:center; flex-wrap:nowrap; margin-bottom:14px; }
.serpskit-input{
  width:175px; height:40px;
  background:#FFFFFF; border:1px solid var(--serpskit-gray);
  border-radius:0; outline:none; padding:0 12px;
  font-size:15px; color:#939598; line-height:40px; box-sizing:border-box;
}
.serpskit-btn{
  width:175px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:18px; font-weight:600;
  cursor:pointer; user-select:none; line-height:40px; box-sizing:border-box;
}
.serpskit-btn--primary{ background:var(--serpskit-green); color:#FFFFFF; border:none; }
.serpskit-btn--outline{ background:transparent; border:2px solid var(--serpskit-green); color:var(--serpskit-green); }
.serpskit-btn:focus{ outline:3px solid #0036B2; outline-offset:2px; }

.serpskit-agreement{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--serpskit-text); }
.serpskit-agreement a{ color:#1F2937; text-decoration:underline; }

.serpskit-message{ margin-top:6px; font-size:14px; color:#1F2937; }

/* ===== Variant V1 (800×231) — original ===== */
.serpskit--v1 .serpskit-container{ width:950px; min-height:231px; }
.serpskit--v1 .serpskit-input{ width:210px; height:40px; }
.serpskit--v1 .serpskit-btn{ width:210px; height:40px; }

/* ===== Variant V2 (500×340) — compact two-row ===== */
.serpskit--v2 .serpskit-container{ width:500px; min-height:340px; }
.serpskit--v2 .serpskit-row-inputs .serpskit-input{ width:211px; height:40px; }
.serpskit--v2 .serpskit-row-buttons .serpskit-btn{ width:211px; height:40px; }

/* Responsive tweaks */
@media (max-width: 900px){
  .serpskit--v1 .serpskit-container{ width:100%; }
}
@media (max-width: 560px){
  .serpskit--v2 .serpskit-container{ width:100%; min-height:auto; }
  .serpskit--v2 .serpskit-row-inputs, .serpskit--v2 .serpskit-row-buttons{ flex-wrap:wrap; }
  .serpskit--v2 .serpskit-input, .serpskit--v2 .serpskit-btn{ width:100%; }
}


/* === V1 mobile hard fix (viewport-based, works without container queries) === */
@media (max-width: 640px){
  .serpskit--v1 .serpskit-row{ flex-wrap: wrap !important; }
  .serpskit--v1 .serpskit-input,
  .serpskit--v1 .serpskit-btn{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
}

/* === V2 mobile hard fix: full-width inputs + buttons === */
/* Works when container queries are supported */
@container (max-width: 560px){
  .serpskit--v2 .serpskit-row-inputs,
  .serpskit--v2 .serpskit-row-buttons{
    flex-wrap: wrap !important;
  }
  .serpskit--v2 .serpskit-input,
  .serpskit--v2 .serpskit-btn{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
  .serpskit--v2 .serpskit-container{ min-height:auto !important; }
}

/* Fallback for browsers without container queries (viewport-based) */
@media (max-width: 560px){
  .serpskit--v2 .serpskit-row-inputs,
  .serpskit--v2 .serpskit-row-buttons{
    flex-wrap: wrap !important;
  }
  .serpskit--v2 .serpskit-input,
  .serpskit--v2 .serpskit-btn{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
  .serpskit--v2 .serpskit-container{ min-height:auto !important; }
}