/* whatsapp-link-generator.html */
.blog-post-template .header-wrapper {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
    }

    .blog-post-template .tra-menu .wsmainfull {
      background-color: #fff!important;
      box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1);
      padding: 18px 0;
    }

    .blog-post-template .wsmobileheader {
      position: relative;
      top: auto;
      right: auto;
    }

    .link-tool-hero {
      padding: 86px 0 76px;
      background:
        linear-gradient(135deg, rgba(255, 245, 249, 0.95), rgba(239, 255, 244, 0.9)),
        #fff;
      overflow: hidden;
    }

    .tool-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 8px 15px;
      border: 1px solid rgba(37, 211, 102, 0.28);
      border-radius: 999px;
      background: rgba(37, 211, 102, 0.1);
      color: #128c4a;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .tool-kicker img {
      width: 18px;
      height: 18px;
    }

    .blog-template-kicker {
      display: inline-block;
      margin-bottom: 18px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(234, 76, 137, 0.1);
      color: #ea4c89;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hero-visual-shell {
      position: relative;
      max-width: 620px;
      margin-left: auto;
      filter: drop-shadow(0 24px 54px rgba(31, 35, 44, 0.12));
    }

    .hero-visual-shell img {
      width: 100%;
      border-radius: 22px;
    }

    .generator-section {
      padding: 100px 0;
      background: #f8f9fb;
    }

    .generator-card,
    .preview-card,
    .steps-panel {
      border: 1px solid #e8ecf2;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 45px rgba(31, 35, 44, 0.06);
    }

    .generator-card {
      padding: 34px;
    }

    .generator-label {
      display: block;
      margin-bottom: 10px;
      color: #2f353e;
      font-weight: 700;
    }

    .link-tool-form .iti {
      width: 100%;
    }

    .link-tool-form input,
    .link-tool-form textarea {
      width: 100%;
      border: 2px solid #e2e6ef;
      border-radius: 10px;
      color: #2f353e;
      font-size: 1rem;
      line-height: 1.5;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .link-tool-form input {
      height: 58px;
      padding: 0 16px;
    }

    .link-tool-form textarea {
      min-height: 150px;
      padding: 16px;
      resize: vertical;
    }

    .link-tool-form input:focus,
    .link-tool-form textarea:focus,
    .output-link:focus {
      border-color: #ea4c89;
      box-shadow: 0 0 0 4px rgba(234, 76, 137, 0.12);
      outline: none;
    }

    .form-meta {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 8px;
      color: #6c757d;
      font-size: 0.9rem;
    }

    .generator-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .output-wrap {
      display: none;
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid #e8ecf2;
    }

    .output-wrap.is-visible {
      display: block;
    }

    .output-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }

    .output-link {
      height: 54px;
      padding: 0 14px;
      border: 2px solid #e2e6ef;
      border-radius: 10px;
      color: #353f4f;
      font-size: 0.95rem;
    }

    .tool-alert {
      display: none;
      margin-top: 16px;
      padding: 12px 14px;
      border-radius: 10px;
      background: rgba(218, 15, 41, 0.08);
      color: #a61122;
      font-weight: 600;
    }

    .tool-alert.is-visible {
      display: block;
    }

    .preview-card {
      padding: 28px;
    }

    .phone-preview {
      max-width: 336px;
      margin: 0 auto;
      border: 9px solid #111827;
      border-radius: 34px;
      background: #111827;
      box-shadow: 0 24px 60px rgba(31, 35, 44, 0.2);
      overflow: hidden;
    }

    .phone-status {
      display: flex;
      justify-content: space-between;
      padding: 11px 16px 9px;
      background: #f7f8fb;
      color: #1d222f;
      font-size: 0.82rem;
      font-weight: 700;
    }

    .whatsapp-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: #075e54;
      color: #fff;
    }

    .whatsapp-avatar {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 50%;
      background: #25d366;
    }

    .whatsapp-avatar img {
      width: 22px;
      height: 22px;
    }

    .whatsapp-title {
      margin: 0;
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .whatsapp-subtitle {
      margin: 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 0.78rem;
      line-height: 1.2;
    }

    .chat-screen {
      min-height: 380px;
      padding: 18px 14px 20px;
      background-color: #efe7dc;
      background-image: url("../images/whatsapp-chat-background.webp");
      background-position: center;
      background-repeat: repeat;
      background-size: 330px auto;
    }

    .chat-day {
      width: fit-content;
      margin: 0 auto 22px;
      padding: 5px 12px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.9);
      color: #5a7184;
      font-size: 0.78rem;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(31, 35, 44, 0.06);
    }

    .chat-bubble {
      position: relative;
      max-width: 88%;
      margin-left: auto;
      padding: 12px 14px 20px;
      border-radius: 12px 12px 4px 12px;
      background: #dcf8c6;
      color: #1d222f;
      font-size: 0.95rem;
      line-height: 1.45;
      box-shadow: 0 2px 7px rgba(31, 35, 44, 0.08);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .chat-bubble span {
      position: absolute;
      right: 10px;
      bottom: 5px;
      color: #6c757d;
      font-size: 0.68rem;
    }

    .preview-empty {
      position: relative;
      max-width: 86%;
      margin: 0 0 0 auto;
      padding: 13px 14px 32px;
      border-radius: 12px 12px 4px 12px;
      background: #dcf8c6;
      color: #1d222f;
      font-size: 0.95rem;
      line-height: 1.45;
      box-shadow: 0 2px 7px rgba(31, 35, 44, 0.08);
      text-align: left;
    }

    .preview-empty:after {
      content: "4:20";
      position: absolute;
      right: 12px;
      bottom: 7px;
      color: #6c757d;
      font-size: 0.68rem;
    }

    .steps-panel {
      margin-top: 24px;
      padding: 28px;
    }

    .steps-panel .cbox-2 {
      margin-bottom: 22px;
    }

    .steps-panel .cbox-2:last-child {
      margin-bottom: 0;
    }

    .steps-panel .cbox-2-txt h5 {
      margin-bottom: 6px;
    }

    .steps-panel .cbox-2-txt p {
      margin-bottom: 0;
      color: #6c757d;
    }

    .faq-tool-section {
      padding: 100px 0 0;
      background: #fff;
    }

    .use-cases-section {
      padding: 100px 0;
      background: #fff;
    }

    .use-case-card {
      height: 100%;
      padding: 28px;
      border: 1px solid #e8ecf2;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 12px 32px rgba(31, 35, 44, 0.05);
    }

    .use-case-icon,
    .benefit-icon {
      display: grid;
      width: 48px;
      height: 48px;
      margin-bottom: 22px;
      place-items: center;
      border-radius: 50%;
      background: rgba(37, 211, 102, 0.12);
      color: #128c4a;
      font-weight: 800;
    }

    .use-case-card h5 {
      margin-bottom: 14px;
    }

    .use-case-card p,
    .benefit-item p {
      color: #6c757d;
    }

    .story-steps {
      margin: 16px 0 0;
      padding-left: 20px;
      color: #6c757d;
    }

    .story-steps li {
      margin-bottom: 8px;
      line-height: 1.6;
    }

    .benefits-section {
      padding: 100px 0;
      background: #f8f9fb;
    }

    .benefits-wrapper {
      padding: 46px;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 45px rgba(31, 35, 44, 0.06);
    }

    .benefit-item {
      display: flex;
      gap: 18px;
      margin-top: 28px;
    }

    .benefit-icon {
      flex: 0 0 48px;
      margin-bottom: 0;
    }

    .tool-faq {
      margin-bottom: 18px;
      border: 1px solid #e8ecf2;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(31, 35, 44, 0.04);
    }

    .tool-faq summary {
      cursor: pointer;
      padding: 20px 22px;
      color: #2f353e;
      font-size: 1.08rem;
      font-weight: 700;
      list-style: none;
    }

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

    .tool-faq summary:after {
      content: "+";
      float: right;
      color: #ea4c89;
      font-size: 1.35rem;
      line-height: 1;
    }

    .tool-faq[open] summary:after {
      content: "-";
    }

    .tool-faq p {
      margin: -4px 22px 20px;
      color: #6c757d;
    }

    @media (max-width: 991px) {
      .hero-visual-shell {
        margin: 48px auto 0;
      }

      .preview-card {
        margin-top: 30px;
      }

      .blog-post-template #header .header-wrapper > div:first-child {
        display: none;
      }

      .blog-post-template .wsmobileheader {
        z-index: 1002;
      }

      .blog-post-template.wsactive .wsmobileheader {
        margin-right: 0;
      }

      .blog-post-template .wsmenu {
        left: 0;
        right: auto;
        width: 100%;
      }

      .blog-post-template .wsmenu > .wsmenu-list {
        width: 100%;
        margin-right: -100%;
        padding-top: 104px;
      }

      .blog-post-template.wsactive .wsmenu > .wsmenu-list {
        margin-right: 0;
      }

      .blog-post-template .overlapblackbg {
        display: none;
      }
    }

    @media (max-width: 767px) {
      .link-tool-hero,
      .generator-section,
      .faq-tool-section {
        padding-top: 64px;
        padding-bottom: 64px;
      }

      .generator-card,
      .preview-card,
      .steps-panel {
        padding: 22px;
      }

      .benefits-wrapper,
      .use-case-card {
        padding: 24px;
      }

      .output-row {
        grid-template-columns: 1fr;
      }

      .generator-actions .btn {
        width: 100%;
      }
    }

/* free-whatsapp-chat-button.html */
.blog-post-template .header-wrapper {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
    }

    .blog-post-template .tra-menu .wsmainfull {
      background-color: #fff!important;
      box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1);
      padding: 18px 0;
    }

    .blog-post-template .wsmobileheader {
      position: relative;
      top: auto;
      right: auto;
    }

    .link-tool-hero {
      padding: 86px 0 76px;
      background:
        linear-gradient(135deg, rgba(255, 245, 249, 0.96), rgba(237, 255, 246, 0.92)),
        #fff;
      overflow: hidden;
    }

    .tool-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 8px 15px;
      border: 1px solid rgba(37, 211, 102, 0.28);
      border-radius: 999px;
      background: rgba(37, 211, 102, 0.1);
      color: #128c4a;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .tool-kicker img {
      width: 18px;
      height: 18px;
    }

    .blog-template-kicker {
      display: inline-block;
      margin-bottom: 18px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(234, 76, 137, 0.1);
      color: #ea4c89;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hero-preview-shell {
      position: relative;
      max-width: 620px;
      margin-left: auto;
      filter: drop-shadow(0 24px 54px rgba(31, 35, 44, 0.12));
    }

    .hero-preview-shell img {
      width: 100%;
      height: auto;
      display: block;
    }

    .preview-browser-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 12px 12px 0 0;
      background: #1d222f;
      color: #fff;
      font-size: 0.78rem;
      font-weight: 700;
    }

    .browser-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #ea4c89;
    }

    .browser-dot:nth-child(2) {
      background: #ffcb3d;
    }

    .browser-dot:nth-child(3) {
      background: #25d366;
    }

    .website-preview-frame {
      position: relative;
      min-height: 330px;
      border: 1px solid #e8ecf2;
      border-top: 0;
      border-radius: 0 0 12px 12px;
      background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
      overflow: hidden;
    }

    .preview-whatsapp-button {
      position: absolute;
      right: 22px;
      bottom: 22px;
      display: grid;
      width: 66px;
      height: 66px;
      place-items: center;
      border-radius: 50%;
      background: #25d366;
      box-shadow: 0 14px 32px rgba(18, 140, 74, 0.28);
      z-index: 5;
    }

    .preview-whatsapp-button img {
      width: 60px;
      height: 60px;
    }

    .generator-section {
      padding: 100px 0;
      background: #f8f9fb;
    }

    .generator-card,
    .preview-card,
    .steps-panel {
      border: 1px solid #e8ecf2;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 45px rgba(31, 35, 44, 0.06);
    }

    .generator-card {
      padding: 34px;
    }

    .generator-label {
      display: block;
      margin-bottom: 10px;
      color: #2f353e;
      font-weight: 700;
    }

    .link-tool-form .iti {
      width: 100%;
    }

    .link-tool-form input,
    .link-tool-form textarea,
    .generated-code {
      width: 100%;
      border: 2px solid #e2e6ef;
      border-radius: 10px;
      color: #2f353e;
      font-size: 1rem;
      line-height: 1.5;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .link-tool-form input {
      height: 58px;
      padding: 0 16px;
    }

    .url-input-wrap {
      display: flex;
      align-items: center;
      width: 100%;
      border: 2px solid #e2e6ef;
      border-radius: 10px;
      background: #fff;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      overflow: hidden;
    }

    .url-input-wrap:focus-within {
      border-color: #ea4c89;
      box-shadow: 0 0 0 4px rgba(234, 76, 137, 0.12);
    }

    .url-prefix {
      display: inline-flex;
      align-items: center;
      align-self: stretch;
      padding: 0 14px;
      border-right: 1px solid #e2e6ef;
      background: #f8f9fb;
      color: #526071;
      font-weight: 700;
      white-space: nowrap;
      user-select: none;
    }

    .link-tool-form .url-input-wrap input {
      height: 54px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding-left: 14px;
    }

    .link-tool-form .url-input-wrap input:focus {
      border: 0;
      box-shadow: none;
    }

    .link-tool-form textarea {
      min-height: 135px;
      padding: 16px;
      resize: vertical;
    }

    .generated-code {
      min-height: 250px;
      padding: 16px;
      background: #fff4f6;
      color: #9fb0c9;
      caret-color: #9fb0c9;
      font-family: Consolas, Monaco, "Courier New", monospace;
      font-size: 0.84rem;
      resize: vertical;
    }

    .link-tool-form input:focus,
    .link-tool-form textarea:focus,
    .generated-code:focus {
      border-color: #ea4c89;
      box-shadow: 0 0 0 4px rgba(234, 76, 137, 0.12);
      outline: none;
    }

    .form-meta {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 8px;
      color: #6c757d;
      font-size: 0.9rem;
    }

    .generator-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .output-wrap {
      display: none;
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid #e8ecf2;
    }

    .output-wrap.is-visible {
      display: block;
    }

    .tool-alert {
      display: none;
      margin-top: 16px;
      padding: 12px 14px;
      border-radius: 10px;
      background: rgba(218, 15, 41, 0.08);
      color: #a61122;
      font-weight: 600;
    }

    .tool-alert.is-visible {
      display: block;
    }

    .preview-card {
      padding: 28px;
    }

    .website-preview-frame iframe {
      display: block;
      width: 100%;
      height: 380px;
      border: 0;
      background: #fff;
    }

    .preview-fallback {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 34px;
      background: rgba(248, 249, 251, 0.92);
      text-align: center;
      z-index: 3;
    }

    .preview-fallback.is-visible {
      display: flex;
    }

    .preview-fallback strong {
      display: block;
      margin-bottom: 8px;
      color: #1d222f;
      font-size: 1rem;
    }

    .preview-url-pill {
      margin-left: 8px;
      color: rgba(255, 255, 255, 0.74);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .steps-panel {
      margin-top: 24px;
      padding: 28px;
    }

    .steps-panel .cbox-2 {
      margin-bottom: 22px;
    }

    .steps-panel .cbox-2:last-child {
      margin-bottom: 0;
    }

    .steps-panel .cbox-2-txt h5 {
      margin-bottom: 6px;
    }

    .steps-panel .cbox-2-txt p {
      margin-bottom: 0;
      color: #6c757d;
    }

    .platform-section,
    .use-cases-section {
      padding: 100px 0;
      background: #fff;
    }

    .platform-card,
    .use-case-card {
      height: 100%;
      padding: 28px;
      border: 1px solid #e8ecf2;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 12px 32px rgba(31, 35, 44, 0.05);
    }

    .platform-icon,
    .use-case-icon,
    .benefit-icon {
      display: grid;
      width: 48px;
      height: 48px;
      margin-bottom: 22px;
      place-items: center;
      border-radius: 50%;
      background: rgba(37, 211, 102, 0.12);
      color: #128c4a;
      font-weight: 800;
    }

    .platform-card p,
    .use-case-card p,
    .benefit-item p {
      color: #6c757d;
    }

    .benefits-section {
      padding: 100px 0;
      background: #f8f9fb;
    }

    .benefits-wrapper {
      padding: 46px;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 45px rgba(31, 35, 44, 0.06);
    }

    .benefit-item {
      display: flex;
      gap: 18px;
      margin-top: 28px;
    }

    .benefit-icon {
      flex: 0 0 48px;
      margin-bottom: 0;
    }

    .faq-tool-section {
      padding: 100px 0 0;
      background: #fff;
    }

    .tool-faq {
      margin-bottom: 18px;
      border: 1px solid #e8ecf2;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(31, 35, 44, 0.04);
    }

    .tool-faq summary {
      cursor: pointer;
      padding: 20px 22px;
      color: #2f353e;
      font-size: 1.08rem;
      font-weight: 700;
      list-style: none;
    }

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

    .tool-faq summary:after {
      content: "+";
      float: right;
      color: #ea4c89;
      font-size: 1.35rem;
      line-height: 1;
    }

    .tool-faq[open] summary:after {
      content: "-";
    }

    .tool-faq p {
      margin: -4px 22px 20px;
      color: #6c757d;
    }

    @media (max-width: 991px) {
      .hero-preview-shell {
        margin: 48px auto 0;
      }

      .preview-card {
        margin-top: 30px;
      }

      .blog-post-template #header .header-wrapper > div:first-child {
        display: none;
      }

      .blog-post-template .wsmobileheader {
        z-index: 1002;
      }

      .blog-post-template.wsactive .wsmobileheader {
        margin-right: 0;
      }

      .blog-post-template .wsmenu {
        left: 0;
        right: auto;
        width: 100%;
      }

      .blog-post-template .wsmenu > .wsmenu-list {
        width: 100%;
        margin-right: -100%;
        padding-top: 104px;
      }

      .blog-post-template.wsactive .wsmenu > .wsmenu-list {
        margin-right: 0;
      }

      .blog-post-template .overlapblackbg {
        display: none;
      }
    }

    @media (max-width: 767px) {
      .link-tool-hero,
      .generator-section,
      .platform-section,
      .use-cases-section,
      .benefits-section,
      .faq-tool-section {
        padding-top: 64px;
        padding-bottom: 64px;
      }

      .generator-card,
      .preview-card,
      .steps-panel,
      .benefits-wrapper,
      .platform-card,
      .use-case-card {
        padding: 22px;
      }

      .generator-actions .btn {
        width: 100%;
      }

      .website-preview-frame iframe {
        height: 300px;
      }
    }