/* ------------------------------
   ROOT VARIABLES
------------------------------ */
:root {
  --blue-dark: #03045e;
  --blue-mid: #0077b6;
  --blue-light: #ff4f40;
  --blue-bg: #eff3f8;
  --white: #ffffff;
  --text: #161616;
  --accent: #0077b6;
  --card-bg: #ffffff;
  --footer-bg: #FFFFFF;
}


/* ------------------------------
   LOGO LOTTIE
------------------------------ */
.logo #logoAnimation {
  min-width: 32px;
  height: 32px;
}

/* ------------------------------
   AI STYLING
------------------------------ */
#aiHeadlines ul {
  padding-left: 1.2em;
  margin-top: 0.5em;
}


/* ------------------------------
   TWEMOJI
------------------------------ */

.twemoji--sparkles {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23ffac33' d='m34.347 16.893l-8.899-3.294l-3.323-10.891a1 1 0 0 0-1.912 0l-3.322 10.891l-8.9 3.294a1 1 0 0 0 0 1.876l8.895 3.293l3.324 11.223a1 1 0 0 0 1.918-.001l3.324-11.223l8.896-3.293a.998.998 0 0 0-.001-1.875'/%3E%3Cpath fill='%23ffcc4d' d='m14.347 27.894l-2.314-.856l-.9-3.3a.998.998 0 0 0-1.929-.001l-.9 3.3l-2.313.856a1 1 0 0 0 0 1.876l2.301.853l.907 3.622a1 1 0 0 0 1.94-.001l.907-3.622l2.301-.853a.997.997 0 0 0 0-1.874M10.009 6.231l-2.364-.875l-.876-2.365a.999.999 0 0 0-1.876 0l-.875 2.365l-2.365.875a1 1 0 0 0 0 1.876l2.365.875l.875 2.365a1 1 0 0 0 1.876 0l.875-2.365l2.365-.875a1 1 0 0 0 0-1.876'/%3E%3C/svg%3E");
}

.twemoji--free-button {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%233b88c3' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z'/%3E%3Cpath fill='%23fff' d='M1.836 12.585c0-.738.504-1.404 1.405-1.404H7.85c.792 0 1.206.612 1.206 1.242c0 .612-.396 1.243-1.206 1.243H4.538v2.629h2.791c.864 0 1.296.612 1.296 1.224c0 .631-.432 1.261-1.296 1.261H4.538v3.925c0 .9-.576 1.405-1.351 1.405c-.774 0-1.351-.505-1.351-1.405zm7.992 0c0-.864.486-1.404 1.387-1.404h3.169c2.773 0 4.483 1.242 4.483 4.069c0 1.981-1.495 3.115-3.331 3.403l3.061 3.277c.252.269.36.54.36.792c0 .702-.558 1.387-1.351 1.387c-.324 0-.756-.126-1.044-.469l-3.998-4.843h-.036v3.906c0 .9-.576 1.405-1.351 1.405c-.774 0-1.351-.505-1.351-1.405V12.585zm2.701 4.267h1.854c.99 0 1.674-.594 1.674-1.603c0-1.026-.684-1.584-1.674-1.584h-1.854zm6.948-4.105c0-.9.449-1.566 1.404-1.566h4.465c.865 0 1.279.612 1.279 1.242c0 .612-.434 1.243-1.279 1.243h-3.168v2.629h2.952c.882 0 1.313.612 1.313 1.242c0 .612-.449 1.242-1.313 1.242h-2.952v2.737h3.33c.865 0 1.279.611 1.279 1.242c0 .612-.434 1.242-1.279 1.242h-4.644c-.793 0-1.387-.54-1.387-1.351zm7.974 0c0-.9.449-1.566 1.404-1.566h4.465c.863 0 1.277.612 1.277 1.242c0 .612-.432 1.243-1.277 1.243h-3.17v2.629h2.953c.883 0 1.314.612 1.314 1.242c0 .612-.449 1.242-1.314 1.242H30.15v2.737h3.332c.863 0 1.277.611 1.277 1.242c0 .612-.432 1.242-1.277 1.242h-4.646c-.791 0-1.385-.54-1.385-1.351z'/%3E%3C/svg%3E");
}

.twemoji--light-bulb {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23ffd983' d='M29 11.06c0 6.439-5 7.439-5 13.44c0 3.098-3.123 3.359-5.5 3.359c-2.053 0-6.586-.779-6.586-3.361C11.914 18.5 7 17.5 7 11.06C7 5.029 12.285.14 18.083.14C23.883.14 29 5.029 29 11.06'/%3E%3Cpath fill='%23ccd6dd' d='M22.167 32.5c0 .828-2.234 2.5-4.167 2.5s-4.167-1.672-4.167-2.5S16.066 32 18 32s4.167-.328 4.167.5'/%3E%3Cpath fill='%23ffcc4d' d='M22.707 10.293a1 1 0 0 0-1.414 0L18 13.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414L17 15.414V26a1 1 0 1 0 2 0V15.414l3.707-3.707a1 1 0 0 0 0-1.414'/%3E%3Cpath fill='%2399aab5' d='M24 31a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-6h12z'/%3E%3Cpath fill='%23ccd6dd' d='M11.999 32a1 1 0 0 1-.163-1.986l12-2a.994.994 0 0 1 1.15.822a1 1 0 0 1-.822 1.15l-12 2a1 1 0 0 1-.165.014m0-4a1 1 0 0 1-.163-1.986l12-2a.995.995 0 0 1 1.15.822a1 1 0 0 1-.822 1.15l-12 2a1 1 0 0 1-.165.014'/%3E%3C/svg%3E");
}

.twemoji--love-letter {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23ccd6dd' d='M36 27a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z'/%3E%3Cpath fill='%2399aab5' d='M11.949 17.636L.637 28.948c-.027.029-.037.064-.06.092c.34.57.814 1.043 1.384 1.384c.029-.023.063-.033.09-.06L13.365 19.05a1 1 0 0 0-1.416-1.414M35.423 29.04c-.021-.028-.033-.063-.06-.09L24.051 17.636a1 1 0 1 0-1.415 1.414l11.313 11.314c.026.026.062.037.09.06a4 4 0 0 0 1.384-1.384'/%3E%3Cpath fill='%2399aab5' d='M32 5H4a4 4 0 0 0-4 4v1.03l14.527 14.496a4.883 4.883 0 0 0 6.885 0L36 10.009V9a4 4 0 0 0-4-4'/%3E%3Cpath fill='%23e1e8ed' d='M32 5H4A3.99 3.99 0 0 0 .405 7.275l14.766 14.767a4 4 0 0 0 5.657 0L35.595 7.275A3.99 3.99 0 0 0 32 5'/%3E%3Cpath fill='%23dd2e44' d='M27 16.78a4.986 4.986 0 0 0-4.986-4.987a4.98 4.98 0 0 0-4.053 2.087a4.98 4.98 0 0 0-4.051-2.087a4.987 4.987 0 0 0-4.987 4.987c0 .391.05.769.134 1.133c.693 4.302 5.476 8.841 8.904 10.087c3.428-1.246 8.212-5.785 8.904-10.086c.085-.365.135-.744.135-1.134'/%3E%3C/svg%3E");
}

.twemoji--information {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%233b88c3' d='M0 4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z'/%3E%3Cpath fill='%23fff' d='M20.512 8.071c0 1.395-1.115 2.573-2.511 2.573c-1.333 0-2.511-1.209-2.511-2.573c0-1.271 1.178-2.45 2.511-2.45c1.333.001 2.511 1.148 2.511 2.45m-4.744 6.728c0-1.488.931-2.481 2.232-2.481s2.232.992 2.232 2.481v11.906c0 1.488-.93 2.48-2.232 2.48s-2.232-.992-2.232-2.48z'/%3E%3C/svg%3E");
}

.twemoji--wrench {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%238899a6' d='M27.989 19.977c-.622 0-1.225.078-1.806.213L15.811 9.818a8 8 0 0 0 .212-1.806A8.01 8.01 0 0 0 8.012 0C7.11 0 5.91.916 6.909 1.915l2.997 2.997s.999 1.998-.999 3.995s-3.996.998-3.996.998L1.915 6.909C.916 5.91 0 7.105 0 8.012a8.01 8.01 0 0 0 8.012 8.012a8 8 0 0 0 1.806-.212l10.371 10.371a8 8 0 0 0-.213 1.806A8.01 8.01 0 0 0 27.988 36c.901 0 2.101-.916 1.102-1.915l-2.997-2.997s-.999-1.998.999-3.995s3.995-.999 3.995-.999l2.997 2.997c1 .999 1.916-.196 1.916-1.102a8.01 8.01 0 0 0-8.011-8.012'/%3E%3C/svg%3E");
}
/* ------------------------------
   BASE STYLES
------------------------------ */
* {
  box-sizing: border-box;
  touch-action: manipulation;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  color: #161616;
  
}

main {
  flex: 1;
  min-height: 60vh; /* Optional safeguard */
}


/* ------------------------------
   SUCCESS RESULT
------------------------------ */
.success-animation {
    font-size: 3em;
    text-align: left;
}


/* ------------------------------
   SEO SECTION
------------------------------ */

.seo-section {
  margin-top: 3rem;
  padding: 2rem;
  background-color: #FFF;
  border-radius: 12px;
  line-height: 1.7;
  font-size: 1rem;
  text-align: left;
}

.seo-section h2 {
  text-align: center;
  text-align: center;
  font-size: 25px;
  letter-spacing: 0;
  line-height: 25px;
  margin-bottom: 1rem;
  color: #191919;
}

.seo-section h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  text-align: left;
}

.seo-section p {
  margin-bottom: 1.25rem;
}

/* ------------------------------
   FAQ SECTION (ACCORDION STYLE)
------------------------------ */

.faq {
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: left;
}

.faq h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #191919;
}

.faq h3 {
    text-align: left;
}

/* Accordion base styles */
.faq details {
  margin-bottom: 1rem;
  border-radius: 8px;
  background-color: #FFF;
  padding: 1rem;
  transition: all 0.3s ease;
}

.faq details[open] {
  background-color: #fff;
}

.faq summary {
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  color: #000;
  outline: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq details p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #333;
}


/* ------------------------------
   CONTAINER & HEADINGS
------------------------------ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

h1 {
    text-align: center;
    font-size: 40px;
    letter-spacing: -0.1rem;
    line-height: 40px;
}

h2, h3, h4 {
    text-align: center;
    font-size: 25px;
    letter-spacing: 0;
    line-height: 25px;
}

.link-heading {
    font-size: 22px;
    font-weight: 600;
}

.link-description {
    color: #000;
    font-weight: 400;
}

/* ------------------------------
   HOMEPAGE
------------------------------ */

.home-h1 {
    text-align: center;
    font-size: 80px;
    line-height: 80px;
    letter-spacing: -.01em;
}

@media (max-width: 768px) {
  .home-h1 {
    font-size: 35px !important;
    line-height: 40px !important;
  }
}

/* ------------------------------
   ABOUT PAGE
------------------------------ */

.about-p {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

/* ------------------------------
   HORIZONTAL SCROLL BAR
------------------------------ */
.scroll-box {
  background-color: #ff4f401a;
  padding: 10px;
  position: relative;
  border-radius: 12px;
  margin-top: 4em;
}

.scroll-box p {
  font-size: 20px;
  font-weight: 800;
  padding-left: 15px;
}

.scroll-container {
  position: relative;
  display: flex;
  align-items: center;
}

.scrollmenu {
  overflow-x: auto;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 5px;
  scroll-behavior: smooth;
  flex: 1;
}

.scrollmenu::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  background-color: #ff4f40;
  margin: 5px;
  border-radius: 4px;
}

.scrollmenu a:hover {
  background-color: #ff4f408c;
}

.scroll-arrow {
  background-color: #000;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border-radius: 4px;
}

.scroll-arrow:hover {
  opacity: 1;
}

.scroll-arrow.left {
  left: 0;
  display: none;
}

.scroll-arrow.right {
  right: 0;
}

/* ------------------------------
   HEADER
------------------------------ */
.site-header {
  background: #F2F5FA;
  color: #161616;
  margin-bottom: 2rem;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-header .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #161616;
  text-decoration: none;
}

.site-header nav a {
  text-decoration: none;
  color: #161616;
  font-weight: 500;
  margin-left: 1rem;
}

.toggle-mode {
  display: none;
}

.dropbtn {
  background-color: #000;
  color: white;
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #000;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000;
  min-width: 200px;
  overflow: auto;
  z-index: 1;
  border-radius: 12px;
  margin-top: 2px;
  right: 0;
}

.dropdown-content a {
  color: #FFF;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  margin: 10px;
  border-radius: 5px;
}

.dropdown a:hover {background-color: #FFF; color: #444;}

.show {display: block;}

@media (max-width: 768px) {
  .dropdown-content {
    min-width: 92.5vw;
    top: 3em;
    box-shadow: #0000003d 1px 1px 10px 2px;
  }
  
  .dropdown-content a {
    color: #FFF;
    padding: 0.2em 1em;
    text-decoration: none;
    display: block;
    margin: 2em 1em;
    border-radius: 5px;
  }
}
/* ------------------------------
   FOOTER
------------------------------ */
.site-footer {
  background: var(--footer-bg);
  text-align: center;
  font-size: 0.9rem;
  margin-top: 4rem;
  color: #161616;
}


/* ------------------------------
   HOMEPAGE SEARCH + TOOL LIST
------------------------------ */
#searchInput {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#toolList {
  list-style: none;
  padding: 0;
  margin: 0;
}

#toolList li {
  background: #FFF;
  margin: 0.8rem 0;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

#toolList li a {
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: #000;
  font-weight: 500;
}

#toolList li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* ------------------------------
   TOOL BOXES & FORMS
------------------------------ */
.tool-box {
  border-radius: 12px;
  margin: 2rem auto;
}

.tool-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-form label {
  font-weight: 600;
  margin-top: 0.5rem;
}

.tool-form input,
.tool-form select,
.tool-form textarea {
  font-size: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: var(--white);
}

.coversionRateCalculatorBtn {
    background-color: #0062e3;
    color: #FFF;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
}

.share-cvr-btn {
    background-color: #ff4f40;
    color: white;
    padding: 0.8rem 1.2rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
    width: fit-content;
}

@media (max-width: 768px) {
  .share-cvr-btn {
    width: auto;
  }
}

/* ------------------------------
   TOOLBAR FOR MARKDOWN-TO-HTML
------------------------------ */
.form-col, .preview-col {
  display: flex;
  flex-direction: column;
}

.form-col textarea,
.preview-col textarea {
  flex: 1;
  resize: vertical;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.toolbar button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 6px 8px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 4px;
}

.toolbar button:hover {
  background-color: #e0e0e0;
}

/* ------------------------------
   TWO-COLUMN LAYOUT
------------------------------ */
.two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.form-col,
.preview-col {
  flex: 1 1 450px;
  display: flex;
  flex-direction: column;
}

.preview-col {
  max-width: 550px;
}


/* ------------------------------
   CHARACTER COUNTS
------------------------------ */
.char-count {
  font-size: 0.95rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  display: inline-block;
  background: #d4f5dd;
  color: #006b21;
}

.good { background: #d4f5dd; color: #006b21; }
.warn { background: #fff4cc; color: #b38f00; }
.bad  { background: #ffd6d6; color: #b30000; }


/* ------------------------------
   GOOGLE ADS PREVIEW
------------------------------ */
.serp-preview {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
}

.serp-url {
  color: #006621;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.serp-title {
  color: #1a0dab;
  font-size: 1.1rem;
  margin: 0 0 0.4rem 0;
}

.serp-description {
  color: #545454;
  font-size: 0.95rem;
  line-height: 1.4;
}

.desktop-preview .serp-title { font-size: 1.1rem; }
.mobile-preview .serp-title { font-size: 1rem; }
.mobile-preview .serp-description { font-size: 0.9rem; }
.mobile-preview .serp-url { font-size: 0.85rem; }


/* ------------------------------
   SHARED COMPONENTS
------------------------------ */
.share-btn {
  background-color: #ff4f40;
  color: white;
  padding: 0.8rem 1.2rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 1rem;
  width: fit-content;
}

.share-btn:hover {
  background-color: #ff4f40;
}

@media (max-width: 768px) {
  .share-btn {
    width: auto;
  }
}


/* ------------------------------
   RESPONSIVE
------------------------------ */
@media (max-width: 768px) {
  .site-header .container {
    flex-direction: row;
    align-items: flex-start;
  }

  #searchInput {
    width: 100%;
  }

  .tool-box,
  .serp-preview {
    padding: 1.25rem;
  }

  .two-column {
    flex-direction: column;
  }

  .tool-form input,
  .tool-form textarea,
  .tool-form select {
    font-size: 1rem;
    padding: 0.85rem;
  }
}



/* ------------------------------
   MODERN CONTAINERS
------------------------------ */
.card {
  background-color: #F2F5FA;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.card-character-counter {
  background-color: #FFF;
  border-radius: 12px;
  margin-bottom: 2rem;
  padding: 20px;
}

.card-conversion-rate-calculator {
  background-color: #FFF;
  border-radius: 12px;
  margin-bottom: 2rem;
  padding: 20px;
}
/* ------------------------------
   TOOL BOX CONVERSION RATE CALCULATOR
------------------------------ */
.tool-box-conversion-rate-calculator {
  border-radius: 12px;
  margin: 2rem auto;
}

.tool-box-conversion-rate-calculator .tool-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-box-conversion-rate-calculator .tool-form label {
  font-weight: 600;
  margin-top: 0.5rem;
}

.tool-box-conversion-rate-calculator .tool-form input,
.tool-box-conversion-rate-calculator .tool-form select,
.tool-box-conversion-rate-calculator .tool-form textarea {
  font-size: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: var(--white);
}

.tool-box-conversion-rate-calculator .coversionRateCalculatorBtn {
    background-color: #ff4f4020;
    color: #FFF;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
}

.tool-box-conversion-rate-calculator .share-btn {
    background-color: #ff4f40;
    color: white;
    padding: 0.8rem 1.2rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
    width: fit-content;
}

@media (max-width: 768px) {
  .tool-box-conversion-rate-calculator .share-btn {
    width: auto;
  }
}

/* ------------------------------
   TOOL BOX CHARACTER COUNTER
------------------------------ */

.tool-box-character-counter {
  border-radius: 12px;
  margin: 2rem auto;
}

.tool-box-character-counter .tool-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-box-character-counter .tool-form label {
  font-weight: 600;
  margin-top: 0.5rem;
}

.tool-box-character-counter .tool-form input,
.tool-box-character-counter .tool-form select,
.tool-box-character-counter .tool-form textarea {
  font-size: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: var(--white);
}

.tool-box-character-counter .coversionRateCalculatorBtn {
    background-color: #0062e3;
    color: #FFF;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
}

.tool-box-character-counter .share-cvr-btn {
    background-color: #ff4f40;
    color: white;
    padding: 0.8rem 1.2rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
    width: fit-content;
}

@media (max-width: 768px) {
  .tool-box-character-counter .share-cvr-btn {
    width: auto;
  }
}

/* ------------------------------
   BUTTON STYLES
------------------------------ */
button,
input[type="submit"],
.button {
  background-color: #000000;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  width: auto;
  display: inline-block;
  transition: background-color 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
  background-color: #222222;
}

/* ------------------------------
   FORM ELEMENTS
------------------------------ */
input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

/* ------------------------------
   UTILITY CLASSES
------------------------------ */
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.text-center { text-align: center; }

/* ------------------------------
  EMOJI GRID
------------------------------ */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 1rem;
  justify-items: center;
}

.emoji-cell {
  font-size: 2rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s;
}

.emoji-cell:hover {
  transform: scale(1.2);
}

.emoji-variations {
  display: none;
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-size: 1.5rem;
  z-index: 2;
  white-space: nowrap;
}

.emoji-cell:hover .emoji-variations {
  display: block;
}