.serp-wrapper {
  display:flex;
  gap:25px;
  margin-top:20px;
  font-family:Inter, sans-serif;
}

.serp-left, .serp-right {
  width: 50%;  
  background:#0f172a;
  padding:20px;
  border-radius:14px;
  flex:1;
  color:#fff;
    overflow: hidden;
}

.fetch-box {
  display:flex;
  gap:10px;
}

input, textarea {
  width:100%;
  background:#020617;
  border:1px solid #1e293b;
  color:#fff;
  padding:12px;
  border-radius:8px;
}

button {
  background:#2563eb;
  border:none;
  padding:12px 18px;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
}

.field {
  margin-top:18px;
}

.field label {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  opacity:.8;
}

textarea {
  height:80px;
}

.bar {
  height:4px;
  background:#ef4444;
  margin-top:6px;
  border-radius:4px;
  width:0%;
}

.bar.green {
  background:#22c55e;
}

.preview-header {
  display:flex;
  justify-content:space-between;
}

.toggle button {
  background:#020617;
  border:1px solid #1e293b;
  margin-left:5px;
}

.toggle .active {
  background:#2563eb;
}

.google-preview {
  background:#fff;
  color:#000;
  padding:16px;
  border-radius:12px;
  margin-top:15px;
}

.google-preview .title {
  color:#1a0dab;
  font-size:18px;
}

.google-preview .desc {
  font-size:14px;
  color:#4d5156;
}

.tips {
  background:#020617;
  padding:14px;
  border-radius:12px;
  margin-top:20px;
}

.google-preview b {
    font-weight: 700;
}



.google-preview-frame {
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px 25px;
    font-family: Arial, sans-serif;
    max-width: 720px;
    min-height: 300px;
}
textarea#metaDesc
 {
    height: 125px;
    resize: none;
}
/* Top Bar */
.google-top {
    display: flex;
    align-items: center;
    gap: 15px;
}

.google-logo {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: -1px;
}

.g-blue { color: #4285f4; }
.g-red { color: #ea4335; }
.g-yellow { color: #fbbc05; }
.g-green { color: #34a853; }

.google-search {
    flex: 1;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #555;
}

.google-avatar {
    width: 34px;
    height: 34px;
    background: #7c3aed;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Tabs */
.google-tabs {
    display: flex;
    gap: 22px;
    margin: 18px 0 10px;
    font-size: 14px;
    color: #5f6368;
}

.google-tabs span.active {
    color: #1a73e8;
    border-bottom: 2px solid #1a73e8;
    padding-bottom: 6px;
}

/* Stats */
.google-stats {
    font-size: 14px;
    color: #70757a;
    margin-bottom: 18px;
}

/* Result */
.google-result .url {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #202124;
    margin-bottom: 6px;
}

.favicon {
    width: 22px;
    height: 22px;
    background: #f1f3f4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.google-result .title {
    font-size: 20px;
    color: #1a0dab;
    line-height: 1.3;
    margin-bottom: 6px;
}

.google-result .desc {
    font-size: 14px;
    color: #4d5156;
    line-height: 1.55;
}

.google-result b {
    font-weight: bold;
}
.bar-track {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin-top: 4px;
}

.bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

.bar.green {
    background-color: #4caf50; /* green fill */
}
#previewTitle {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.field label {
    margin-bottom: 8px;
}
.toggle-switch {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    width: 140px; /* adjust as needed */
    font-size: 12px;
}

.toggle-option {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: #f0f0f0;
    color: #555;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.toggle-option.active {
    background: #000;   /* active bg color */
    color: #fff;        /* active text color */
}

.toggle-option:not(.active):hover {
    background: #e0e0e0;
}
.google-result.mobile {
    max-width: 300px;
    margin: 0 auto;
}
.heading-toggle {
    display: flex;
    justify-content: space-between;
}
.toggle-serp {
    place-content: center;
}
button.toggle-option {
    font-size: 11px;
}
.serp-wrapper h3 {
    font-size: 20px;
}

@media only screen and (max-width: 768px){
    .serp-wrapper {
        display: grid;
    }
    .serp-left, .serp-right {
        width: 100%;
    }
    .google-search {
        font-size: 8px;
    }
    textarea#metaDesc {
        font-size: 14px;
    }
}