Error with 'Update the UI'

@admin Hi Hasan yes the actual Hook Generator wp code snippet works fine, there was on problem with that.  The standard 'Hook Generator' UI also works fine. The problem is with the 'Advanced UI hook generator' which is not connecting to the wp code snippet and is showing like below:

Did you add the html tags? 

around CSS, you should use <style> </style>

around js, you should use <script> </script>

@admin ok it appears I spelt 'style' incorrectly, so now that issue is fixed we come back to the original problem that I posted about (before the style issue happened). When you try and use the Advanced UI Hook generator, its not connecting to the php snippet called 'hook generator'

@paddy Please send your website URL and name of the function that should generate the hooks (if you can attach it it would be better) so that i test if the backend is working. If it's working perfectly we then move on to see the problem with UI.

@husein i've given this to Hasan and Ernie multiple ties now

@paddy, I guess you sent it to them by email? I couldn't find it in the thread to try and test it from my side. 
Anyway, I fixed a code, so I just want your website URL to be added to it so that I can give you the full working code, as I did with Enrico in this thread.

@husein Ok no problem, the URL is https://aiworkflowpro.io/

Hasan already said that the php snippet is working. but he hasnt advised why the advanced UI hook generator page is not connecting to the php snippet. here is both.

hook generator php snippet:

#tested, and worked
function openai_generate_text_basic() {    
	
	// Add CORS headers
     header('Access-Control-Allow-Origin: *'); // Allows all origins
     header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); // Specifies the allowed methods
     header('Access-Control-Allow-Headers: Content-Type, Authorization'); // Specifies the allowed headers 

////check if logged in
	//if (!is_user_logged_in()) {
       //wp_send_json("LOGIN_FIRST");
    //}
	
	//check for balance
	//$user_id = get_current_user_id();
    //$balance = mycred_get_users_balance($user_id);
    //if ($balance < 5) {
        //wp_send_json("NO_BALANCE");
    //}
	
    // Get the topic from the AJAX request
    $topic = $_POST['topic'];
    $usage = $_POST['usage'];
    $prompt = "As an expert copywriter specialized in hook generation, your task is to analyze the [Provided_Hook_Examples] 
and use the templates that fit most to generate 3 new Hooks for the following topic: {" . $topic . "} and Usage in: {" . $usage . "}. The output should be ONLY valid JSON as follows:
[
  {{
    \"hook_type\": \"The chosen hook type\",
    \"hook\": \"the generated hook\"
  }},
  {{
    \"hook_type\": \"The chosen hook type\",
    \"hook\": \"the generated hook\"
  }},
  {{
    \"hook_type\": \"The chosen hook type\",
    \"hook\": \"the generated hook\"
  }}
]

[Provided_Hook_Examples]:
\"Hook Type,Template,Use In
Strong sentence,\"[Topic] won’t prepare you for [specific aspect].\",Social posts, email headlines, short content
The Intriguing Question,\"What’s the [adjective describing difference] difference between [Subject 1] and [Subject 2]?\",Video intros, email headlines, social posts
Fact,\"Did you know that [Interesting Fact about a Topic]?\",Video intros, email headlines, social posts, short content
Metaphor,\"[Subject] is like [Metaphor]; [Explanation of Metaphor].\",Video intros, email headlines, short content
Story,\"[Time Frame], [I/We/Subject] was/were [Situation]. Now, [Current Situation].\",Video intros, short content
Statistical,\"Nearly 70% of [Population] experience [Phenomenon] at least once in their lives.\",Blog posts, reports, presentations
Quotation,\"[Famous Person] once said, '[Quotation related to Topic]'.\",Speeches, essays, social posts
Challenge,\"Most people believe [Common Belief], but [Contradictory Statement].\",Debates, persuasive content, op-eds
Visual Imagery,\"Imagine [Vivid Description of a Scenario].\",Creative writing, advertising, storytelling
Call-to-Action,\"If you’ve ever [Experience/Desire], then [Action to take].\",Marketing content, motivational speeches, campaigns
Historical Reference,\"Back in [Year/Period], [Historical Event] changed the way we think about [Topic].\",Educational content, documentaries, historical analyses
Anecdotal,\"Once, [Short Anecdote related to Topic].\",Personal blogs, speeches, narrative content
Humorous,\"Why did [Topic] cross the road? To [Punchline].\",Social media, entertaining content, ice-breakers
Controversial Statement,\"[Controversial Statement about a Topic].\",Debates, opinion pieces, discussion forums
Rhetorical Question,\"Have you ever stopped to think about [Thought-Provoking Question]? \",Speeches, persuasive essays, social posts
\"
The JSON object:\n\n";

    // OpenAI API URL and key
    $api_url = 'https://api.openai.com/v1/chat/completions';
    $api_key = 'my_key_normally_here';  // Replace with your actual OpenAI API key

    // Headers for the OpenAI API
    $headers = [
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . $api_key
    ];

    // Body for the OpenAI API
    $body = [
        'model' => 'gpt-4o',
        'messages' => [['role' => 'user', 'content' => $prompt]],
        'temperature' => 0.7
    ];

    // Args for the WordPress HTTP API
    $args = [
        'method' => 'POST',
        'headers' => $headers,
        'body' => json_encode($body),
        'timeout' => 120
    ];

    // Send the request
    $response = wp_remote_request($api_url, $args);

    // Handle the response
    if (is_wp_error($response)) {
        $error_message = $response->get_error_message();
        wp_send_json_error("Something went wrong: $error_message");
    } else {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        
        if (json_last_error() !== JSON_ERROR_NONE) {
            wp_send_json_error('Invalid JSON in API response');
        } elseif (!isset($data['choices']) || !isset($data['choices'][0]['message']['content'])) {
            wp_send_json_error('API request failed. Response: ' . $body);
        } else {
            $content = $data['choices'][0]['message']['content'];
            mycred_subtract("Hook Generator", $user_id, 5, 'Point deduction for using hook Generation', time());
            wp_send_json($content);
        }
    }

    // Always die in functions echoing AJAX content
   wp_die();
}

add_action('wp_ajax_openai_generate_text_basic', 'openai_generate_text_basic');
add_action('wp_ajax_nopriv_openai_generate_text_basic', 'openai_generate_text_basic');

AND the advanced UI hook generator html code:

<style>
    /* Importing the Google Fonts stylesheet for the Poppins font family */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/* Defining CSS variables */
:root {
  --lws-blue: #0d2451;
  --lws-black: #262626;
  --lws-gray: #757575;
  --lws-light-blue: #258dc7;
  --lws-green: #2cd82c;
  --lws-orange: #ffa944;
  --lws-red: hsl(0, 100%, 41%);
  --lws-brand-color: #ff516b;
  --lws-font-large: 32px;
  --lws-font-medium: 24px;
  --lws-font-normal: 18px;
  --lws-font-small: 14px;
  --lws-border-color: #d9d9d9;
  --lws-border-radius: 8px;
}

/* Css reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins";
  overflow-x: hidden !important;
}

/* Styles that can be reused */
.lws-tool {
  color: var(--lws-black);
}

.tool-container {
  box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: var(--lws-border-radius);
  max-width: 1200px;
  margin: 2rem auto auto auto;
}

section {
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

input[type="checkbox"] {
  border: none;
  padding: 0;
  position: relative;
  appearance: none;
  width: 50px !important;
  height: 25px;
  background: #ccc;
  border-radius: 50px !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.4s;
}

input:checked[type="checkbox"] {
  background: #7da6ff;
}

input[type="checkbox"]::after {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  top: 3px;
  left: 0;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
  transition: 0.4s;
}

input:checked[type="checkbox"]::after {
  left: 50%;
}

.flex {
  display: flex;
  gap: 1rem;
}

.flex-justify {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.flex-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.flex-1 {
  flex: 1;
}

.flex-3 {
  flex: 3;
}

.text-sm {
  font-size: var(--lws-font-small);
}

.text-medium {
  font-size: var(--lws-font-medium);
  font-weight: 500;
}

.text-center {
  text-align: center;
}

.text-small {
  font-size: var(--lws-font-normal);
  font-weight: 500;
}

.text-light {
  font-size: var(--lws-font-normal);
  font-weight: 300;
}
.fs14{
  font-size: 14px;
}
.fs16 {
  font-size: 16px;
  margin-top: 4px;
}
.fs20{
  font-size: 20px;
}
.lws-tool .fs24 {
  font-size: 24px;
}

.lws-tool .border {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.border-bottom {
  border-bottom: 1px solid var(--lws-border-color);
}

.lws-tool .border-right {
  border-right: 1px solid var(--lws-border-color);
}

.lws-tool .border-none {
  border: none !important;
}
.lws-tool .wrap{
  flex-wrap: wrap;
}
.lws-tool .opacity0 {
  opacity: 0;
}
.lws-tool .opacity-7{
  opacity: 0.7;
}
.lws-tool .pointer{
  cursor: pointer;
}
.lws-tool .mt-8{
  margin-top: 8px;
}
.lws-tool .mt-16 {
  margin-top: 1rem;
}

.lws-tool .mt-32 {
  margin-top: 2rem;
}

.lws-tool .ml-8 {
  margin-left: 0.5rem;
}
.lws-tool .pb-16{
  padding-bottom: 1rem;
}
.lws-tool .pd-16 {
  padding: 1rem;
}
.lws-tool .pd-0{
  padding: 0 !important;
}
.lws-tool .pd-lr16{
  padding: 0 1rem;
}
.lws-tool .pd-lf-rg-32 {
  padding: 0 2rem;
}

.lws-tool p {
  margin-bottom: 0;
}
.lws-tool .ft-sb{
  font-weight: 600;
}
.lws-tool .ft-md{
  font-weight: 500;
}
.lws-tool .high-score {
  background-color: rgb(249, 197, 197);
  border-radius: var(--lws-border-radius);
  color: rgb(193, 28, 28);
  font-size: 12px !important;
  font-weight: 600;
  width: max-content;
  padding: 4px 6px;
}

.lws-tool .high-score span {
  background-color: rgb(193, 28, 28);
  color: white;
  border-radius: var(--lws-border-radius);
  padding: 2px 6px;
  font-size: 10px;
  margin-left: 6px;
}

.lws-tool .medium-score {
  background-color: rgb(255, 234, 196);
  border-radius: var(--lws-border-radius);
  color: rgb(226, 151, 14);
  font-size: 12px;
  font-weight: 600;
  width: max-content;
  padding: 4px 6px;
}

.lws-tool .medium-score span {
  background-color: rgb(226, 151, 14);
  color: white;
  border-radius: var(--lws-border-radius);
  padding: 2px 6px;
  font-size: 10px;
  margin-left: 6px;
}

.lws-tool .low-score {
  background-color: rgb(203, 255, 207);
  border-radius: var(--lws-border-radius);
  color: rgb(36, 156, 46);
  font-size: 12px;
  font-weight: 600;
  width: max-content;
  padding: 4px 6px;
}

.lws-tool .low-score span {
  background-color: rgb(36, 156, 46);
  color: white;
  border-radius: var(--lws-border-radius);
  padding: 2px 6px;
  font-size: 10px;
  margin-left: 6px;
}


.lws-tool .m-0 {
  margin: 0 !important;
}

.lws-tool .mb-16 {
  margin-bottom: 16px;
}
.lws-tool .mb-8 {
  margin-bottom: 8px;
}
.lws-tool .mt-48{
  margin-top: 3rem;
}

.lws-tool .mtb-8 {
  margin: 8px 0;
}
.lws-tool .mtb-16 {
  margin: 16px 0;
}
.lws-tool .mtb-18 {
  margin: 18px 0;
}
.lws-tool .gap6{
  gap: 6px;
}

.lws-tool .p-32 {
  padding: 0 32px;
}

.lws-tool .p-0 {
  padding: 0 !important;
}

.lws-tool .tx-c {
  text-align: center;
}

.lws-tool .scroll {
  overflow: scroll;
  max-height: 600px;
  margin: 0.5rem 0;
}

.lws-tool .bx-sh-n {
  box-shadow: none !important;
}

.lws-tool li {
  list-style: none;
}

.lws-tool .relative {
  position: relative;
}

.lws-tool .report-heading {
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--lws-border-color);
  font-weight: 500;
  align-items: center !important;
}

.lws-tool .report-heading p {
  margin-bottom: 0;
}

.lws-tool .report-heading img {
  max-width: 40px;
}

.lws-tool .container-section {
  padding: 1rem 2rem;
}

.lws-tool .pagination {
  margin: 1rem 0 0 0;
}

.lws-tool .popup {
  background: rgb(0, 0, 0, 0.05);
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.lws-tool .popup .close {
  position: absolute;
  cursor: pointer;
  right: 15px;
  top: 15px;
}

.lws-tool .popup-container {
  box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: var(--lws-border-radius);
  max-width: 400px;
  max-height: 340px;
  width: 80vw;
  height: 55vh;
  margin: auto;
  position: relative;
  padding: 1rem 0 0 0;
}

.lws-tool .popup a {
  padding: 12px 2rem;
  width: max-content;
  border-radius: 100px;
  font-size: 14px;
  background-color: var(--lws-blue);
  color: white !important;
  display: inline;
}

.lws-tool .popup a:hover {
  background: var(--lws-light-blue);
}

.lws-tool .popup img {
  max-width: 200px;
}

.lws-tool .popup p {
  margin-bottom: 1rem;
}

.lws-tool a {
  color: inherit;
  text-decoration: none;
}

@keyframes lwstoolslideIn {
  0% {
    right: -100%;
    /* Off-screen to the right */
  }

  100% {
    right: 1rem;
    /* Fully visible */
  }
}

.lws-tool .active {
  display: block !important;
}

.lws-tool .active-flex {
  display: flex;
}
.lws-tool .tool-box>p{
  font-size: 20px;
  font-weight: 500;
  padding: 0.8rem 1rem;
}
.lws-tool .output {
  margin-top: 5%;
}

.lws-tool .decorated-word {
  background-color: rgb(76, 173, 41);
  width: fit-content;
  font-size: 14px;
  text-align: center;
  color: white;
  font-weight: 500;
  padding: 4px 1.5rem;
  border-radius: var(--lws-border-radius);
}

.lws-tool label {
  display: block;
  font-size: var(--lws-font-medium);
  margin-bottom: 8px;
}

.lws-tool input {
  width: 100%;
  border: 1px solid var(--lws-border-color);
  padding: 16px;
  font-size: var(--lws-font-normal);
  width: 100%;
  border-radius: var(--lws-border-radius);
  cursor: pointer;
}

.lws-tool-select {
  border-radius: var(--lws-border-radius);
  border: 1px solid var(--lws-border-color);
}

.lws-tool textarea:focus {
  box-shadow: none;
}

.lws-tool select {
  border-radius: var(--lws-border-radius) !important;
  width: 100%;
  border: none;
  background: none;
  font-size: var(--lws-font-normal);
  width: 100%;

  cursor: pointer;
}

.lws-tool input::placeholder {
  color: var(--lws-gray);
  font-weight: 300;
}

.lws-tool input:focus,
.lws-tool select:focus {
  border: 1px solid var(--lws-border-color) !important;
  outline: none !important;
  box-shadow: none;
}

.lws-tool button {
  background: var(--lws-blue);
  color: white;
  padding: 1rem 2rem;
  font-size: 20px;
  font-weight: 500;
  border: none;
  width: 250px;
  border-radius: var(--lws-border-radius);
  cursor: pointer;
}

.lws-tool button:disabled {
  background-color: #cccccc;
  color: #888888;
  cursor: not-allowed;
}

.lws-tool button:disabled:hover {
  background: #cccccc !important;
  color: #888888;
  cursor: not-allowed;
}

.lws-tool button:hover:not(.ql-snow.ql-toolbar button, .youtube-channel-generator button, .youtube-keyword-tool button) {
  background: #1a4db2;
}


.lws-tool .form-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.lws-tool .loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
  font-size: var(--lws-font-large);
  text-align: center;
  display: none;
}
.lws-tool .loading>div{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  
}
.lws-tool .loading img {
  max-width: 200px;
}

.lws-tool .loading .error-msg {
  font-size: 18px;
}

.lws-tool-result-section {
  margin: 5% auto;
}

.lws-tool-result {
  display: none;
}
.lws-tool .result-title{
  font-size: 22px;
  margin: 18px auto;
}

.lws-tool .counter {
  font-size: 14px;
  font-weight: 500;
  color: rgb(48, 238, 48);
  margin: 1rem 0;
  display: none;
}

.lws-tool .table-container {
  background-color: #f4f7fc;
  padding: 1.5rem;
}

.lws-tool table {
  border: 1px solid var(--lws-border-color);
  width: 100%;
  background-color: #f4f7fc;
  border-collapse: collapse;
  font-size: var(--lws-font-small);
  margin-top: 2rem;
  border-radius: var(--lws-border-radius) !important;
  word-break: break-all;
}
.lws-tool .table{
  border-radius: 0 !important;
  background-color: white;
  margin-top: 0.5rem;

}
.table th{
  background: #EEF1F4 !important;
}
.table, .table td {
  border: 2px solid #EEF1F4 !important;

  
}
.lws-tool .table-features{
  display: flex;
  gap: 1rem;
  align-items: center;
}
.lws-tool .table-features .export,
.lws-tool .table-features .copy{
  padding: 0.6rem 0.8rem;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  border: 1.5px solid #cbcbcb !important;
  cursor: pointer;

}
.table-features input{
  padding: 0.6rem;
  border: 0 !important;
  
}

.table-features .search{
  gap: 0;
  padding: 0 0 0 0.8rem ;
  border: 1.5px solid #cbcbcb !important;
  border-radius: 4px;
  overflow: hidden;
 
}
.table-features .dropdown{
  position: absolute;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  font-weight: 400;
  width: 120px;
  left: 0;
  bottom: -4.5rem;
  font-size: 12px;
  display: none;
  cursor: pointer;
}
.table-features .dropdown>p{
  border-bottom: 1px solid var(--lws-border-color);
  padding: 0.5rem;
}
.table-features .export-selected,
.table-features .copy-selected{
  color: rgba(0, 0, 0, 0.45);
}
.lws-tool th {
  background-color: #f4f7fc;
  cursor: pointer;
}

.lws-tool th,
td {
  padding: 1rem;
  text-align: left;
  border-bottom: none !important;
}

.lws-tool tr:nth-of-type(2n) {
  background-color: rgb(253, 253, 253);
}

.lws-tool table .sort-icon {
  font-size: 10px;
  margin-left: 0.5rem;
}

.lws-tool .search-table {
  background-color: white;
  border: 1px solid var(--lws-border-color);
  border-radius: var(--lws-border-radius);
  padding-left: 1rem;
  gap: 0;
}

.lws-tool .search-table input {
  border: none;
  padding: 8px;
  border-radius: var(--lws-border-radius);
}

.lws-tool .search-table input:focus {
  border: none !important;
  outline: none !important;
  padding: 8px !important;
  box-shadow: none !important;
}

.lws-tool .addInput {
  background-color: var(--lws-border-color);
  padding: 8px;
}

.csv-icon {
  margin-right: 8px;
  cursor: pointer;
}

.copy-icon {
  cursor: pointer;
}
.lws-tool .copy-all{
  margin: 1.5rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  padding: 0.6rem 0;
  font-weight: 500;
}
.csv-icon:hover,
.search-icon:hover,
.pagination i:hover {
  color: var(--lws-light-blue);
  cursor: pointer;
}

.copy-icon:hover {
  color: var(--lws-light-blue) !important;
}

.pagination {
  display: flex;
  gap: 1rem;
  font-size: 12px;
  margin-top: 1rem;
}

.sleeping-ai-container,
.placeholder-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
  text-align: center;
}

.sleeping-ai-container img {
  max-width: 300px;
}

.placeholder-container img {
  max-width: 180px;
  margin-top: 1rem;
}

.lws-tool-copy-icon {
  position: relative;
}

.lws-tool .copy-alert {
  position: absolute;
  font-size: 14px;
  top: -20px;
  font-weight: 400;
  display: none;
  font-weight: 600;
  font-size: 12px;
  background: white;
  padding: 0.5rem 1rem;
  box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.1);
  color: #353535 !important;
}

.lws-tool .ai-container {
  padding: 0 !important;
}

.lws-tool .paraphrasing-tool-style {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-left: 1.5rem;
}
.paraphrase-tool #custom-responsive{
  display: none;
  cursor: text;
}
.paraphrase-tool #custom-responsive, .paraphrase-tool #custom-responsive:focus{
  padding: 12px;
  font-size: 13px;
  border-radius: 0;
  border: 1.5px solid var(--lws-border-color) !important;
}
.paraphrasing-tool-input-output button {

  top: 1.5rem;
  right: 1.5rem;
  width: auto;
  padding: 0.55rem 3rem;
  border-radius: 100px;
  font-size: 18px;
}

.paraphrase-tool .paraphrase-output .flex-justify {
  position: relative;
}

.paraphrase-tool .copy-alert {
  right: 0;
}

.paraphrase-tool .custom-style {
  display: none;
  margin-bottom: 1.5rem;
  position: relative;
}

.paraphrase-tool .custom-counter {
  bottom: -2rem !important;
  left: 8px;
  font-size: 10px;
}

.paraphrase-tool .custom-style input {
  padding: 14px;
}

.paraphrasing-tool-input-output {
  display: flex;
}

.paraphrase-tool textarea {
  padding: 0;
}

.paraphrase-tool img {
  max-width: 180px;
}

.paraphrase-tool .loading,
.translate-tool .loading {
  height: 300px;
}

.paraphrase-tool .counter {
  position: absolute;
  bottom: 0rem;
}

.translate-tool .counter {
  position: absolute;
  bottom: 1rem;
}

.paraphrase-output,
.translate-output {
  display: none;
  min-height: 300px;
}

.translate-output {
  padding-top: 1rem;
}

.paraphrasing-tool-input-output form,
.paraphrasing-tool-input-output .flex-1 {
  padding: 1.5rem;
}

.paraphrasing-tool-input-output .flex-1,
.translate-output-section {
  min-height: 300px;
  position: relative;
}

.translate-output-section .copy-alert {
  right: 0;
  top: 0px;
}

.paraphrasing-tool-input-output form {
  border-right: 3px solid var(--lws-border-color);
  position: relative;
}

.paraphrasing-tool-input-output textarea {
  display: block;
  width: 100%;
  outline: none;
  border: none;
  font-family: "Poppins";
  font-size: 16px;
  resize: none;
  padding-top: 1rem;
}


.translate-tool button,
.img-generator button,
.keyword-checker button,
.q-p-a-tool button {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: auto;
  padding: 0.8rem 3rem;
  border-radius: 100px;
}

.keyword-checker .table-container {
  box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.1);
  ;
  border-radius: var(--lws-border-radius);
}

.paraphrasing-tool-style p {
  font-size: 14px;
}

.paraphrasing-tool-style p:not(:first-child) {
  padding: 1.2rem 0.5rem;
  cursor: pointer;

}

.paraphrasing-tool-style p:not(:first-child):hover {
  color: var(--lws-brand-color);
}

.paraphrasing-tool-style-active {
  font-weight: 500;
  border-bottom: 2px solid var(--lws-brand-color);
  color: var(--lws-brand-color);
  margin-top: 2px;
}

.paraphrasing-tool-style-responsive {
  display: none;
}
.paraphrasing-tool-style-responsive .flex-center,
.paraphrase-tool-responsive-menu>p{
  cursor: pointer;
}


.youtube-channel-generator .lws-tool-result {
  padding: 0.2rem 1rem 1rem 1rem;
  word-wrap: break-word;
  white-space: normal;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.youtube-channel-generator .lws-tool-result .tool-container:last-child {
  margin-bottom: 0;
}

.youtube-channel-generator .lws-tool-result .tool-container {
  flex: 1 0 48%;
}

.youtube-channel-generator .output .tool-container {
  padding: 1rem;
  margin: auto auto 2rem auto;
}

.youtube-channel-generator .output .ch-name {
  color: var(--lws-light-blue);
  cursor: pointer;
}

.youtube-channel-generator .output .info>div {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.youtube-channel-generator .output .info>p {
  font-size: 13px;
  color: #494949;
}

.youtube-channel-generator .header {
  text-align: center;
}

.youtube-channel-generator .header .flex {
  justify-content: center;
  color: #353535;
  font-size: 12px;
  gap: 2rem;
  margin: 0.8rem 0;
}

.youtube-channel-generator .header i {
  color: #757575;
  font-size: 12px;
  margin-right: 4px;
}

.youtube-channel-generator .header>p:nth-child(3) {
  color: #757575;
  font-size: 14px;
  font-weight: 300;
}

.youtube-channel-generator .output .header img {
  width: 80px;
  border-radius: 100px;
  border: 2px solid var(--lws-border-color);
}

.youtube-name-generator .loading {
  height: 60vh;
}

.youtube-name-generator input,
.youtube-channel-generator input,
.youtube-keyword-tool input,
.youtube-popular-video input,
.youtube-channel-generator input {
  border-radius: 0;
  outline: none;
  border: none;
  border-style: none !important;
}

.youtube-channel-generator input {
  padding: 16px !important;
}

.youtube-channel-generator button,
.youtube-keyword-tool button,
.youtube-popular-video button {
  background: none;
  color: #757575;
  padding: 0 1rem 0 0;
  width: auto !important;
  cursor: pointer;
}

.youtube-channel-generator button:hover,
.youtube-keyword-tool button:hover,
.youtube-popular-video button:hover {
  background: none !important;
}

.youtube-name-generator .copy-alert {
  right: 0;
}

.youtube-name-generator-output {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.youtube-name-generator-output>div {
  padding: 0.8rem 1rem;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--lws-border-color);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lws-blue);
  opacity: 0.8;
  position: relative;
}

.youtube-name-generator>.flex-center {
  border-bottom: 1px solid var(--lws-border-color);
  padding-right: 1rem;
}

.lws-tool .translate-tool {
  padding: 0 1rem;
  color: var(--lws-black);
}

.translate-tool button:disabled,
.keyword-checker button:disabled,
.q-p-a-tool button:disabled {
  background-color: #cccccc;
  color: #888888;
  cursor: not-allowed;
}

.translate-tool form {
  position: relative;
}

.lws-tool .translate-tool>div:nth-child(1) {
  position: relative;
}

.lws-tool .translate-tool textarea,
.img-generator textarea,
.bulk-keyword textarea,
.keyword-checker textarea,
.q-p-a-tool textarea {
  padding: 1rem 1rem 0 0;
  width: 100%;
  font-family: "Poppins";
  font-size: 1rem;
  outline: none;
  border: none;
  resize: none;
}

.lws-tool .translate-tool form {
  border-right: 1px solid var(--lws-border-color);
}

.lws-tool-wrapper,
.lws-tool-wrapper2 {
  padding: 1rem 0;
}

.lws-tool .content {
  display: none;
  padding: 20px 0px 20px 10px;
  margin-top: 15px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 36px;
  z-index: 2;
  width: 100%;
  right: 0;
}

.lws-tool .search-sourceLang {
  position: relative;
  border: 1px solid var(--lws-border-color);
  border-radius: var(--lws-border-radius);
  padding-right: 0.6rem;
  width: 100%;
}

.lws-tool .search-sourceLang i {
  color: var(--lws-border-color);
  font-size: 1rem;
}

.lws-tool-wrapper.active .content,
.lws-tool-wrapper2.active .content,
.lws-tool-wrapper.active-flex .content,
.lws-tool-wrapper2.active-flex .content {
  display: block;
}


.lws-tool .content .search {
  position: relative;
}

.lws-tool .search-sourceLang input {
  padding: 0.6rem;
  width: 100%;
  outline: none;
  font-size: 14px;
  outline: none;
  border: none;
}

.lws-tool .search-sourceLang:focus {
  outline: none;
  border: none;
}

.lws-tool .search-sourceLang input::placeholder {
  color: #bfbfbf;
}

.lws-tool .content .options {
  margin-top: 10px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 7px;
}

.lws-tool .options::-webkit-scrollbar,
.youtube-channel-generator .lws-tool-result::-webkit-scrollbar {
  width: 7px;
}

.lws-tool .options::-webkit-scrollbar-track,
.youtube-channel-generator .lws-tool-result::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.lws-tool .options::-webkit-scrollbar-thumb,
.youtube-channel-generator .lws-tool-result::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}

.lws-tool .options::-webkit-scrollbar-thumb:hover,
.youtube-channel-generator .lws-tool-result::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}

.lws-tool .options li {
  padding: 10px;
  font-size: 14px;
}

.lws-tool .options li:hover,
.lws-tool .selected {
  border-radius: 5px;
  background: #f2f2f2;
}

.lws-tool .selected-row {
  background: rgb(175, 175, 255) !important;
}

.lws-tool .bulk-keyword {
  padding: 1rem;
}

.lws-tool .bulk-keyword-tags {
  min-height: 150px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;

  align-content: flex-start;
}

.lws-tool .bulk-keyword-tags>p {
  background-color: rgb(222, 222, 222);
  padding: 0.4rem 1rem;
  width: fit-content;
  border-radius: var(--lws-border-radius);
}

.bulk-tool form {
  position: relative;
}

.bulk-tool .counter {
  position: absolute;
  right: 0;
  bottom: 0;
}

.lws-tool .content {
  display: none;
  padding: 20px 0px 20px 10px;
  margin-top: 15px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 36px;
  z-index: 2;
  width: 100%;
  right: 0;
}

.lws-tool .search-country i {
  color: var(--lws-border-color);
  font-size: 1rem;
}

.lws-tool-wrapper.active .content {
  display: block;
}

.lws-tool .search-country input {
  padding: 0.6rem;
  width: 100%;
  outline: none;
  font-size: 14px;
  outline: none;
  border: none;
}

.bulk-keyword .search-country input:focus,
.youtube-name-generator input:focus,
.youtube-keyword-tool input:focus,
.youtube-popular-video input:focus,
.youtube-channel-generator input:focus,
.translate-tool input:focus,
.q-p-a-tool input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none;
}

.lws-tool .search-country {
  border: 1px solid var(--lws-border-color);
  border-radius: var(--lws-border-radius);
  padding-right: 10px;
  position: relative;
  width: 100%;
}

.lws-tool .content .options {
  margin-top: 10px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 7px;
}

.lws-tool .options::-webkit-scrollbar,
.img-generator .img-style-list::-webkit-scrollbar,
.keyword-checker .country-list::-webkit-scrollbar,
.q-p-a-tool .language-list::-webkit-scrollbar {
  width: 7px;
}

.lws-tool .options::-webkit-scrollbar-track,
.img-generator .img-style-list::-webkit-scrollbar-track,
.keyword-checker .country-list::-webkit-scrollbar-track,
.q-p-a-tool .language-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.lws-tool .options::-webkit-scrollbar-thumb,
.img-generator .img-style-list::-webkit-scrollbar-thumb,
.keyword-checker .country-list::-webkit-scrollbar-thumb,
.q-p-a-tool .language-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}

.lws-tool .options::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}

.lws-tool .options li {
  padding: 10px;
  font-size: 14px;
}

.lws-tool .options li:hover,
.lws-tool .selected {
  border-radius: 5px;
  background: #f2f2f2;
}

.img-generator .tool-container,
.keyword-checker .tool-container,
.q-p-a-tool .tool-container {
  /* max-width: 700px; */
  padding: 1rem;
  position: relative;
}

.img-generator .tool-container {
  max-width: 650px;
}

.q-p-a-tool .data {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.q-p-a-tool input {
  padding: 10px 10px 10px 0px !important;
  border: none;
  border-style: hidden !important;
}

.q-p-a-tool .output .tool-container {
  padding: 0;
  margin: 1rem auto;
}

.img-generator .generated-image-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 650px;
  margin: auto;
}

.img-generator .generated-image-container>div {
  position: relative;
}

.img-generator .counter {
  position: absolute;
  bottom: 0;
}

.img-generator .generated-image-container>div i {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: white;
  padding: 4px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.img-generator img {
  max-width: 100%;
  width: 100%;
}

.img-generator .img-style {
  width: 180px !important;
}

.img-generator .img-style,
.keyword-checker .country {
  width: 160px;
  position: relative;
  background-color: var(--lws-blue);
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: var(--lws-border-radius);
}

.keyword-checker .country,
.q-p-a-tool .language {
  width: 200px;
  background: none;
  padding: 0 10px;
  color: var(--lws-black);
  border: 1px solid var(--lws-border-color);
}

.q-p-a-tool .language {
  width: 100%;
  border: none;
  padding: 0;
}

.q-p-a-tool .language>div {
  border: 1px solid var(--lws-border-color);
  padding: 0 10px;
  border-radius: var(--lws-border-radius);
}

.q-p-a-tool .counter {
  position: absolute;
  bottom: 0;
  left: 0;
}

.q-p-a-tool textarea {
  font-size: 14px;
}

.keyword-checker .country i,
.q-p-a-tool .language i {
  color: #888888;
}

.keyword-checker .country input,
.q-p-a-tool .language,
.single-input input {
  padding: 10px 0;
  border: none;
  font-size: 14px;
}

.single-input input {
  padding: 16px 0;
}

.img-generator .img-style span,
.keyword-checker .country span,
.q-p-a-tool .language span {
  font-size: 12px;
}

.img-generator .img-style-list,
.keyword-checker .country-list,
.q-p-a-tool .language-list {
  background-color: white;
  z-index: 1;
  display: none;
  position: absolute;
  width: 100%;
  color: var(--lws-black);
  top: 3rem;
  left: 0;
  border: 1px solid var(--lws-border-color);
  border-radius: var(--lws-border-radius);
  text-align: center;
  padding: 0.5rem;
  max-height: 200px;
  overflow-y: scroll;
}

.img-generator li,
.keyword-checker li,
.q-p-a-tool li {
  padding: 0.2rem;
}

.img-generator li:hover,
.keyword-checker li:hover,
.q-p-a-tool li:hover {
  background-color: #f1f1f1;
}

.img-generator .clear-img-style {
  border: 1px solid var(--lws-border-color);
  background-color: var(--lws-blue);
  color: white;
  padding: 0.2rem;
  border-radius: var(--lws-border-radius);
}

.img-generator .clear-img-style:hover {
  background: #1a4db2;
}

.img-generator .active,
.keyword-checker .active,
.q-p-a-tool .active,
.paraphrase-tool .active {
  display: block;
}

.lws-tool .input-error-msg {
  display: none;
  position: absolute;
  bottom: 0.2rem;
  left: 0;
  font-size: 11px;
  color: var(--lws-brand-color);
  animation: wiggle 0.5s ease-in-out forwards;
}

@keyframes wiggle {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-10px);
  }

  50% {
    transform: translateX(10px);
  }

  75% {
    transform: translateX(-10px);
  }
}

.competitors-research .counter,
.keyword-checker .counter {
  position: absolute;
  bottom: 0;
  left: 0;
}

.competitors-research input:focus,
.keyword-checker input:focus,
.single-input input:focus {
  border: none !important;
}

.youtube-keyword-tool .output .flex {
  justify-content: space-between;
  align-items: center;
}

.youtube-keyword-tool .output .flex div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.youtube-keyword-tool .output .flex div>p:nth-child(2) {
  font-size: 20px;
}

.youtube-keyword-tool .output .flex div>p:nth-child(3) {
  font-size: 14px;
  color: #757575;
}

.youtube-popular-video .output .lws-tool-result {
  padding: 1rem;
  /* display: grid; */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.youtube-popular-video .output .lws-tool-result .popular-video {
  border: 1px solid var(--lws-border-color);
  padding: 0.5rem;
  border-radius: var(--lws-border-radius);
  height: 100%;
  cursor: pointer;
}

.youtube-popular-video .output img {
  width: 100%;
}

.youtube-popular-video .output .lws-tool-result .popular-video>p:nth-child(2) {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.youtube-popular-video .output .lws-tool-result .popular-video>.flex {
  font-size: 12px;
  color: #757575;
}

.single-input .tool-container {
  padding: 1rem;
}

.single-input form>div:nth-child(1) {
  width: 100%;
  border: 1px solid var(--lws-border-color);
  border-radius: var(--lws-border-radius);
  padding: 0 1rem;
}

.backlinks-checker .input-container {
  padding: 0.8rem 1rem !important;
}

.single-input .content {
  margin-top: 25px;
}

.single-input button {
  width: 180px;
}

.single-input .input-container {
  flex-direction: row !important;
}

.single-input .check-box-container {
  margin-top: 1.5rem;
  font-size: 14px;
}

.single-input .check-box-container span {
  font-size: 10px;
  color: grey;
  display: block;
}

.single-input .table-container {
  padding: 2rem;
  max-height: 800px;
  overflow-y: scroll;
  margin-bottom: 1rem;
}

.backlinks-checker table {
  word-break: break-all !important;
}

.backlinks-checker input {
  border-style: none !important;
  padding: initial !important;
}

.backlinks-checker button {
  padding: 12px;
}

.backlinks-checker .lws-tool-result .tool-container {
  padding: 0;
}

.backlinks-checker .container-section {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  row-gap: 3rem;
  margin-top: 1rem;
}

.backlinks-checker .container-section>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  border: 1px solid var(--lws-border-color);
  padding: 2rem 0;
  border-radius: var(--lws-border-radius);
}

.backlinks-checker .container-section>div>p:nth-child(1) {
  color: var(--lws-light-blue);
  font-weight: 500;
  font-size: 32px;
  background-color: #c7daff;
  padding: 5px 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.backlinks-checker table {
  margin-bottom: 2rem;
}

.backlinks-checker table,
.backlinks-checker td {
  padding: 0 !important;
}

.backlinks-checker table strong {
  color: var(--lws-light-blue);
  font-weight: 600;
}

.backlinks-checker table .link {
  background-color: var(--lws-light-blue);
  border-radius: var(--lws-border-radius);
  cursor: pointer;
  width: 150px !important;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  color: white;
}

.backlinks-checker .accordion-content>div {
  border-top: 1px solid var(--lws-border-color);
  border-bottom: 1px solid var(--lws-border-color);
  padding: 8px;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-report .accordion {
  margin-top: 1rem;
}

.accordion-item {
  border: 1px solid var(--lws-border-color);
  position: relative;
  padding: 8px 8px;
  background-color: white;
}

.accordion-header {
  padding: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
}

.accordion button {
  margin-top: 4px;
  background-color: transparent;
  border: none;
  padding: 2px 6px;
}

.accordion button:hover {
  background: none !important;
}

.accordion button {
  color: var(--lws-black);
}

.accordion-toggle.active {
  transform: translateY(-50%) rotate(45deg);
}

.accordion-content {
  display: none;
  background-color: #ffffff;
  padding: 1rem 0;
}

.accordion-content p {
  margin: 0;
}

.accordian-item-after {
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 12px;
  display: none;
  background-color: var(--primary-color);
  position: absolute;
  bottom: -4px;
  right: -4px;
}

.lws-tool .range {
  padding: 1rem 0;
}

.lws-tool .range input {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--lws-border-color) 60%, var(--lws-border-color));
  border-radius: 12px;
}

.lws-tool .range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: white;
  border: 2px solid grey;
  cursor: pointer;
}

.lws-tool .range input::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: white;
  border: 2px solid grey;
  cursor: pointer;
}

.lws-tool .sliderValue {
  position: relative;
  width: 100%;
}

.lws-tool .sliderValue span {
  position: absolute;

  transform: translateX(-70%) scale(0);
  font-weight: 500;
  top: -30px;

  z-index: 2;
  color: var(--lws-blue);
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;
}

.lws-tool .sliderValue span.show {
  transform: translateX(-70%) scale(1);
}

.lws-tool .sliderValue span:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: 50%;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);

}

.lws-tool .field {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.lws-tool .field .value {
  position: absolute;
  font-size: 12px;
  color: grey;
  top: -18px;
}

.lws-tool .field .value.left {
  left: 0;
}

.lws-tool .field .value.right {
  right: 0;
}

.lws-tool .range input::-moz-range-progress {
  background: #664aff;
}

.email-warm-up input,
.ai-writer input,
.hook-generator textarea {
  width: 100%;
}

.email-warm-up .input-container,
.ai-writer .input-container {
  width: 100%;
  border: 1px solid var(--lws-border-color);
  border-radius: var(--lws-border-radius);
  padding: 0 10px;
}
.ai-writer .input-container input{
  padding: 0.6rem 0 !important;
}
.ai-writer .tool-container button{
  padding: 0.5rem 2rem !important;
}

.youtube-channel-generator .lws-tool-result {
  max-height: 1000px;
  overflow-y: scroll;
}

.ai-writer .ql-editor {
  height: 500px;
}

.ai-writer .counter {
  position: absolute;
  bottom: -33px;
  right: 0;
  font-size: 10px;
}

.ai-writer button {
  width: 100%;
}

.ai-writer .lws-tool-result {
  display: block;
}

.ai-writer button {
  padding: 0.85rem 2rem;
}

.ai-writer .generating {
  display: flex;
  gap: 1rem;
  align-items: center;

}

.email-verifier .table-outer-section {
  max-height: 700px;
  overflow-y: scroll;
  margin-top: 2rem;

}
.email-verifier button{
  padding: 0.7rem 1rem;
}
.email-verifier th{
font-size: 12px;
}

.email-verifier .table-outer-section table {
  margin-top: 0;
}

.lws-tool .tip {
  position: relative;
  z-index: 9999;
  display: none;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  background-color: white;
  border-radius: var(--lws-border-radius);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin-top: 0.8rem;
  margin-bottom: -1rem;
  color: rgb(61, 61, 61);


}

.lws-tool .tip>.tip-text {
  padding: 14px 16px;
}

.lws-tool .tip>.report-heading {
  padding: 8px 12px;
}

.sub-line .tool-container, 
.hook-generator .tool-container,
.content-idea .tool-container,
.keyword-difficulty .tool-container,
.web-management .tool-container{
  padding: 1.5rem 1.2rem;
}

.sub-line input, 
.hook-generator .textarea-container,
.content-idea input,
.keyword-difficulty input,
.web-management input  {
  border: 2px solid rgba(0, 0, 0, 0.2);
}

.sub-line input:hover, 
.hook-generator .textarea-container:hover, 
.hook-generator .content-types:hover
.content-idea input:hover,
.keyword-difficulty input:hover,
.web-management input:hover {
  border: 2px solid rgba(0, 0, 0, 0.4);
}

.sub-line input:focus,
.content-idea input:focus,
.keyword-difficulty input:focus,
.web-management input:focus{
  border: 2px solid var(--lws-blue) !important;
}

.sub-line input,
.sub-line button,
.hook-generator input, .hook-generator button,
.content-idea input, .content-idea button,
.keyword-difficulty input, .keyword-difficulty button,
.web-management button{
  border-radius: 0;

}

.sub-line .loading,
.content-idea .loading,
.hook-generator .loading,
.keyword-difficulty .loading,
.web-management .loading {
  box-shadow: none;
  color: rgba(0, 0, 0, 0.7);
  max-height: 300px;
}

.sub-line .lws-tool-result,
.keyword-difficulty .lws-tool-result, 
.content-idea .lws-tool-result{
  margin-top: 4rem;
}

.sub-line .box {
  padding: 2rem 1.5rem;
}

.sub-line .box .flex-center,
.sub-line .box .flex {
  gap: 6%;
}

.sub-line .score,
.sub-line .emojis {
  color: #65B733;
  font-size: 56px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  border-right: 1px solid #d9d9d9;
}

.sub-line .all-caps-words {
  font-size: 18px;
  font-weight: 500;
  width: calc(20% + 56px);
}

.sub-line .emojis {
  border: none;
}

.sub-line .emojis img {
  width: 125px;
}

.sub-line .box-title {
  color: var(--lws-black);
  font-size: 28px;
  font-weight: 500;
}

.sub-line .scorebar-container {
  position: relative;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 10px;
  border-radius: 50px;
  margin-top: 2rem;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.sub-line .scorebar {
  background: #B83830;
  height: 10px;
  border-radius: 50px;
  width: 0%;
  transition: all 3s ease-in-out;
}

.sub-line .score-num {
  justify-content: space-between;
  display: flex;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
}

.sub-line .tone {
  padding: 1rem;
  color: rgb(255, 166, 0);
  background: rgb(255, 235, 197);
  font-size: 32px;
}
.sub-line .p-tone{
  color: #65b733;
  background: rgb(209, 255, 209);
}
.sub-line .n-tone{
  color: #B83830;
  background: #ffbfba;
}

.sub-line ul>li {
  font-weight: 500;
  font-size: 18px;
  display: flex;
  gap: 1rem;
  align-items: center;

}

.sub-line ul div {
  background: #B83830;
  width: 8px;
  height: 8px;
}

.sub-line .impact {
  padding: 4px 20px;
  border-radius: 8px;
  background: #C4D8FF;
  color: rgba(32, 84, 187, 1);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 0.5rem;
  width: fit-content;
}

.sub-line .alt-sub-lines, .sub-lines {
  padding: 0 1.5rem !important;
}

.sub-line .alt-sub-lines>div, .sub-lines>div {
  font-size: 18px;
  font-weight: 500;
  margin-top: 1rem;
}

.sub-line .alt-sub-lines>div div, .sub-lines>div div{
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  margin-top: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d9d9d9;

}
.sub-line .sub-copy-alert, .lws-tool .sub-copy-alert{

    top: -0.4rem;
    left: 78px;
    font-weight: 600;
    font-size: 12px;
    background: white;
    padding: 0.5rem 1rem;
    box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    display: none;
    color: #353535 !important;
}

.hook-generator .btn-container{
margin-top: 1rem;
  display: flex;
justify-content: flex-end;}

.hook-generator textarea{
  border: none;
  outline: none;
  resize: none;
  padding: 0.8rem;
  font-family: 'Poppins';
  font-size: 16px;
  font-weight: 400;
  display: block;
}
.hook-generator .counter{
 margin: 4px  0 -0.5rem 0;
 font-size: 12px;
}

.hook-generator .textarea-container:focus-within {
  border: 2px solid var(--lws-blue);
}
.hook-generator .content-type-container>p{
  color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  font-weight: 500;
}
.hook-generator .content-types{
  position: relative;
  border: 2px solid rgba(0, 0, 0, 0.2);
  margin-top: 6px;
  padding: 6px 10px;
  cursor: pointer;

}
.hook-generator .selected-type{
  font-size: 14px;
  font-weight: 500;

}
.hook-generator .list{
  position: absolute;
  background: white;
  z-index: 1;
  padding: 6px 0;
  width: 200px;
  left: 0;
  top: 2.5rem;
  font-size: 14px;
  font-weight: 500;
  display: none;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

  
}
.hook-generator .list>p{
  padding: 6px 10px;
  cursor: pointer;
}
.hook-generator .list>p:hover{
  background: rgb(240, 240, 240);
}
.hook-generator .generated-hooks{
  padding: 0 1rem;
}
.hook-generator .generated-hooks>div{
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d9d9d9;

}
.hook-generator .hook-type{
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.hook-generator .copy-icon{
  font-size: 14px;
  opacity: 0.9;
  margin-top: 4px;

}

.keyword-difficulty .info-box{
  display: grid;
  flex: 1;
  height: 140px;
  place-items: center;
  text-align: center;
  border-radius: 4px;
  padding: 0 0.5rem;
  min-width: 150px;
}
.keyword-difficulty .info-box>div p:nth-child(1){
  color: var(--lws-light-blue);
  font-size: 22px;
  font-weight: 500;
}
.keyword-difficulty .info-box>div p:nth-child(2){
 margin: 6px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}
.keyword-difficulty .lws-tool-result>div{
  margin-bottom: 1rem;
}
.keyword-difficulty .tool-box img{
  width: 30px;
}

.keyword-difficulty .ai-analysis ul{
  margin: 0.5rem 0;
  display: flex;
 flex-direction: column;
 gap: 0.2rem;
}
.table-features input:hover, .table-features input:focus{
  border: 0 !important;
}
.keyword-difficulty .info-box i{
  font-size: 24px;
 
}

.content-idea .top-idea span{
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background-color: #2054BB;
}
.idea_link{
  color: #2054BB;
  font-weight: 300;
  text-decoration: underline;
}
.content-idea th{
  cursor: text;
}
.content-idea .table-box{
  display: none;
}
.web-management .no-urls{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  gap: 1rem;
  padding: 2rem 1rem;
  color: rgba(0, 0, 0, 0.8);

}
.web-management .btn{
  border: 1px solid rgb(43, 192, 43);
  padding: 0.4rem 1rem;
  font-size: 14px;
  font-weight: 600;
  color: rgb(43, 192, 43);
  cursor: pointer;
  gap: 0.5rem;
  border-radius: 100px;
}
.web-management .btn:hover{
  background-color: rgb(43, 192, 43) !important;
  color: white;
}
.web-management .no-urls img{
  max-width: 250px;
 
}
.web-management input{
  border-radius: 0px;

}
.web-management .lws-tool-result{
  margin-top: 2rem;
}
.web-management th{
  cursor: text;
}
.web-management .no-urls,
.web-management form{
  display: none;
}
.web-management .dlt{
  width: 50px;
  place-content: baseline;
  text-align: center;
  
}
.web-management .dlt>i:hover{
  opacity: 0.7;
  cursor: pointer;
}
.web-management .input-error-msg{
  bottom: -1.4rem;
}
.web-management .error-msg{
  padding: 1rem 0;
}


@media (max-width: 1750px) {
  .paraphrasing-tool-input-output {
    flex-direction: column;
  }


  .paraphrasing-tool-input-output form {
    border-bottom: 3px solid var(--lws-border-color);
    border-right: none !important;
  }

  .paraphrasing-tool-style {
    display: none !important;
  }

  .paraphrasing-tool-style-responsive {
    padding: 0 1rem;
    display: flex;
  }

  .paraphrasing-tool-style-responsive>div:nth-child(2) {
    border-bottom: 2px solid var(--lws-brand-color);
    position: relative;
    padding: 0.8rem 0;
    gap: 2rem;
  }

  .paraphrase-tool-responsive-menu {
    display: none;
    position: absolute;
    top: 3rem;
    left: 0;
    z-index: 1;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
    font-size: 14px;
    width: 100%;
  }

  .paraphrase-tool-responsive-menu>p {
    padding: 0.4rem 1rem;
  }

  .paraphrase-tool-responsive-menu>p:hover {
    color: var(--lws-black);
    background-color: rgb(239, 239, 239);
  }

  .paraphrase-tool .style-name {
    margin-top: 2px;
  }

  .paraphrase-tool .text-normal {
    font-weight: 500;
  }

  .paraphrasing-tool-input-output button {
    position: initial;
  }

  .paraphrasing-tool-input-output form,
  .paraphrasing-tool-input-output .flex-1 {
    padding: 1rem;
  }

  


}
@media (max-width: 1080px){
  .backlinks-checker .container-section {
    grid-template-columns: repeat(3, 1fr);
  }

  .email-verifier th {
    display: none;
  }

  .email-verifier td {
    display: grid;
    grid-template-columns: 20ch auto;
  }

  .email-verifier td::before {
    content: attr(data-cell);
    font-weight: 600;
  }

  .email-verifier .table-container {
    padding: 2rem 1rem;
  }


}

@media (max-width: 920px) {
  .youtube-popular-video .output .lws-tool-result {
    grid-template-columns: 1fr 1fr;
  }

  .backlinks-checker .container-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .q-p-a-tool .data {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 900px) {
  .lws-tool th {
    display: none;
  }

  .lws-tool td {
    display: grid;
    grid-template-columns: 20ch auto;
  }

  .backlinks-checker table {
    overflow-x: hidden;
  }

  .backlinks-checker td,
  .backlinks-checker th {
    display: table-cell !important;
  }

  .lws-tool td::before {
    content: attr(data-cell);
    font-weight: 600;
  }

  .lws-tool .table-container {
    padding: 2rem 1rem;
  }

  .bulk-tool th,
  td {
    padding: 0.7rem;
  }

  section {
    width: 95%;
  }

  .lws-tool .input-container,
  .content-idea form>div,
  .web-management form>div {
    flex-direction: column;
  }

  .lws-tool button, .hook-generator .list,
  .web-management .dlt {
    width: 100%;
  }

  .lws-tool .loading {
    font-size: var(--lws-font-medium);
  }

  .lws-tool .report-heading {
    padding: 0.7rem;
  }

  .lws-tool .container-section {
    padding: 1rem;
  }

  .question-keyword table {
    white-space: nowrap !important;
  }

  .ai-keyword .input-container>div:nth-child(2),
  .question-keyword .input-container>div:nth-child(2),
  .lws-tool .translate-tool,
  .single-input .flex,
  .sub-line form>div,
  .sub-line .box .flex-center,
  .sub-line .all-caps-container,
  .hook-generator .type-btn-container,
  .keyword-difficulty form>div{
    flex-direction: column;
  }

  .paraphrasing-tool-input-output button,
  .translate-tool button,
  .img-generator button,
  .keyword-checker button,
  .q-p-a-tool button {
    position: initial;
  }

  .bulk-tool .counter {
    bottom: 48px;
  }

  .lws-tool .translate-tool form {
    border: none;
    border-bottom: 1px solid var(--lws-border-color);
    border-radius: 100%;
  }

  .translate-tool button {
    right: 0;
  }

  .lws-tool-wrapper,
  .lws-tool-wrapper2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .lws-tool .translate-tool textarea {
    padding: 1rem 0 0 0;
  }

  .youtube-channel-generator .lws-tool-result .tool-container {
    min-height: auto;
  }

  .translate-tool .counter {
    bottom: 2.5rem;
  }

  .youtube-keyword-tool .output .flex {
    flex-direction: column;
    gap: 2rem;
  }

  .youtube-popular-video .output .lws-tool-result .popular-video {
    width: 100%;
  }

  .youtube-popular-video .output .lws-tool-result {
    grid-template-columns: 1fr;
  }

  .img-generator .counter {
    bottom: 3.5rem;
  }

  .single-input .content {
    margin-top: 10px;
  }

  .backlinks-checker .container-section {
    grid-template-columns: repeat(1, 1fr);
  }

  .youtube-video-ideas .reverse {
    display: flex;
    flex-direction: column-reverse;
  }

  .ai-writer .generating {
    display: block;
  }

  .keyword-checker .country {
    width: 100%;
  }

  .sub-line .score {
    border: none;
  }
  .sub-line .tone-container,
  .sub-line .all-caps-container {
    gap: 1.5rem !important;
  }
  .lws-tool .result-title{
    font-size: 20px;
    margin: 16px auto;
  }

}

@media (max-width: 550px) {
  .img-generator .generated-image-container {
    grid-template-columns: 1fr;
  }

  .backlinks-checker .container-section {
    grid-template-columns: repeat(1, 1fr);
  }

  .backlinks-checker .p-32 {
    padding: 0;
  }

  .backlinks-checker .accordion-header {
    flex-direction: column;
  }

  .q-p-a-tool .data {
    grid-template-columns: 1fr;
  }
  .content-idea .total{
    flex-direction: column;
    align-items: flex-start;
  }

  .email-verifier td {
    grid-template-columns: auto;
  }

}

@media (max-width: 450px) {
  .lws-tool td {
    grid-template-columns: auto;
  }

  .lws-tool label {
    font-size: 20px;
  }

  .csv-icon {
    margin-right: 2px;
  }

  .lws-tool .loading {
    font-size: var(--lws-font-normal);
  }

  .lws-tool .table-container {
    padding: 2rem 0.5rem;
  }

  .youtube-channel-generator .header {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .youtube-channel-generator button {
    width: auto;
  }

  .youtube-popular-video .output .lws-tool-result {
    grid-template-columns: 1fr;
  }

  .q-p-a-tool .language>div {
    width: 100%;
  }
}
</style>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="advanced_style.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
    <script defer src="advanced_script.js"></script>
    <title>Hooks Generator</title>
</head>

<body>
    <main class="lws-tool">
        <div class="popup"></div>

        <section class="hook-generator">
            <div class="tool-container">
                <div>

                    <form onsubmit="onFormSubmit(event)">
                        <div>

                            <div class="textarea-container">
                                <textarea required name="hook-topic" rows="2" oninput="handleInputChange(event)"
                                    placeholder='Describe your next idea briefly'></textarea>

                            </div>
                            <p class="counter">1 / 150</p>
                           

                            <div class="flex-justify mt-16 type-btn-container">
                                <div class="content-type-container">
                                    <p>Content Type</p>
                                    <div class="content-types">
                                        <div class="flex-center flex-justify gap6" onclick="handleDropDownClick()">
                                            <p class="selected-type">
                                                Short Video
                                            </p>
                                            <i class="fa-solid fa-chevron-down" style="font-size: 10px;"></i>
                                        </div>
                                        <div class="list">
                                            <p onclick="handleContentTypeSelection(event)">Short Video</p>
                                            <p onclick="handleContentTypeSelection(event)">Email</p>
                                            <p onclick="handleContentTypeSelection(event)">Social Post</p>
                                            <p onclick="handleContentTypeSelection(event)">Blog Posts</p>
                                            <p onclick="handleContentTypeSelection(event)">Video Intro</p>
                                            <p onclick="handleContentTypeSelection(event)">Story</p>
                                            <p onclick="handleContentTypeSelection(event)">Ad</p>
                                            <p onclick="handleContentTypeSelection(event)">Documentary</p>
                                            <p onclick="handleContentTypeSelection(event)">Essay</p>
                                            <p onclick="handleContentTypeSelection(event)">Educational Content</p>
                                            <p onclick="handleContentTypeSelection(event)">Presentation</p>
                                            <p onclick="handleContentTypeSelection(event)">Marketing Content</p>
                                            <p onclick="handleContentTypeSelection(event)">Entertainment</p>
                                            <p onclick="handleContentTypeSelection(event)">Speech</p>
                                            <p onclick="handleContentTypeSelection(event)">Debate</p>
                                            <p onclick="handleContentTypeSelection(event)">Report</p>
                                        </div>

                                    </div>



                                </div>
                                <button disabled type="submit">Generate</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="tool-container loading">

                </div>


                <div class="lws-tool-result" style="display: block;">



                </div>

            </div>


        </section>

    </main>
</body>


</html>




<script>
    const button = document.querySelector(".hook generator").querySelector('button');
const loading = document.querySelector(".loading");
const result = document.querySelector(".lws-tool-result");
const popup = document.querySelector(".popup");
const selectedType = document.querySelector(".selected-type");
const list = document.querySelector(".list");
const counter = document.querySelector(".counter");
let inputVal = ''
let popupClose = "";
let balanceElem = "";
let response = "";
let data = "";
let copyAll = "";
let contentType = "Short Video";
let emoji = []

const API_BASE_URL = "https://aiworkflowpro.io/wp-admin/admin-ajax.php";

const loadingTemplate = `<div>
<p>Generating Hooks...</p>
</div>`;

// Handle Form Submit
function onFormSubmit(event) {
    event.preventDefault();


    button.disabled = true;
    emoji = [];
    copyAll = ""

    response = "";
    loading.innerHTML = loadingTemplate;
    result.innerHTML = "";
    result.style.display = "none";
    loading.style.display = "flex";
    
    var formData = new FormData();
    formData.append("action", "openai_generate_text_basic");
    formData.append("topic", inputVal);
    formData.append("usage", contentType);

    console.log(inputVal, contentType, "to be fetched")

    fetchData(formData);

}

// Data Fetching
async function fetchData(formData) {
    try {
        response = await fetch(`${API_BASE_URL}`, {
            method: "POST",
            body: formData,
        });

        if (response.ok) {

            data = await response.json();

            console.log("Data from Api", data);
            button.disabled = false;
            loading.style.display = "none";
            result.style.display = "block";

            if (data == "LOGIN_FIRST") {

                loginPopup();
                return;
            } else if (data == "NO_BALANCE") {
                
                noBalPopup();
                return;
            }


            data = JSON.parse(data);
            showResultUI(data);

        } else {
            button.disabled = false
            throw new Error("Request failed. Please try again!");
        }
    } catch (error) {
        button.disabled = false
        console.error("Error occurred:", error);
        loading.innerHTML = ` <div class="error-msg">
    <img src="https://tools-backend.learnwithhasan.com/assets/images/error-img.png" alt="Error">
    <p class="text-medium">Uh Oh!</p>
    <p>Something went wrong! Please try again</p>
   </div>`;
        return;
    }

}

// Result UI
function showResultUI(data) {


    data.map((item) => {
        copyAll += item.hook + '\n';

        if (item.hook_type.includes("Strong")) {
            emoji.push('💪');
        } else if (item.hook_type.includes("Intriguing")) {
            emoji.push('🤔');
        } else if (item.hook_type.includes("Fact")) {
            emoji.push('📚');
        } else if (item.hook_type.includes("Metaphor")) {
            emoji.push('🌈');
        } else if (item.hook_type.includes("Story")) {
            emoji.push('📜');
        } else if (item.hook_type.includes("Statistical")) {
            emoji.push('📈');
        } else if (item.hook_type.includes("Quotation")) {
            emoji.push('💬');
        } else if (item.hook_type.includes("Challenge")) {
            emoji.push('🏋️‍♂️');
        } else if (item.hook_type.includes("Visual")) {
            emoji.push('👀');
        } else if (item.hook_type.includes("Action")) {
            emoji.push('🏃‍♂️');
        } else if (item.hook_type.includes("Historical")) {
            emoji.push('✍🏻');
        } else if (item.hook_type.includes("Anecdotal")) {
            emoji.push('😄');
        } else if (item.hook_type.includes("Humorous")) {
            emoji.push('😂');
        } else if (item.hook_type.includes("Controversial")) {
            emoji.push('🤷‍♂️');
        } else if (item.hook_type.includes("Rhetorical")) {
            emoji.push('❓');
        } else {
            emoji.push('');
        }



    })


    result.insertAdjacentHTML("beforeend", `
    <div class="mt-48">
    <p class="result-title mtb-18">Hooks Generated</p>
    <div class="border box generated-hooks">
       
              ${data.map((item, index) => (
        `
                    <div class="relative">
                    <p class="hook-type">${emoji[index]} ${item.hook_type}</p>
                    <p>${item.hook}</p>
                    <div class="copy-icon relative" onclick="copyToClipboard('${index}')">
                        <p class="sub-copy-alert">Copied</p>
                        <i class="fa-regular fa-copy"></i> <span>&nbsp;Copy</span>
                    </div>
                </div>
                    `
    )).join("")
        }
                
               
    
        <p class="copy-all" onclick="copyToClipboard('All')">Copy all</p>
    </div>
</div>
    `);


}


// Handle Input
function handleInputChange(event) {
    inputVal = event.target.value.trim();
    const maxLength = 150;

    if (inputVal.length !== 0) {
        button.disabled = false;
    } else {
        button.disabled = true;
    }

    counter.style.display = "block";

    if (inputVal.length > maxLength) {
        event.target.value = inputVal.substring(0, maxLength);
        inputVal = event.target.value.trim();
    }

    const charCount = inputVal.length;
    counter.textContent = `${charCount} / ${maxLength}`;
}


// Copy 
function copyToClipboard(index) {
    let copy = ""
    const copyAllElem = document.querySelector(".copy-all");
    copy = data[index]?.hook;
    console.log(copy, index)

    if (index == 'All') {
        copy = copyAll;
        copyAllElem.innerHTML = "Copied All";
        setTimeout(() => {
            copyAllElem.innerHTML = "Copy all";
        }, 2000);


    }

    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = copy;
    document.body.appendChild(tempTextarea);

    tempTextarea.select();
    tempTextarea.setSelectionRange(0, 99999);

    document.execCommand("copy");

    document.body.removeChild(tempTextarea);

    const copyAlerts = document.getElementsByClassName("sub-copy-alert");

    if (index != 'All') {
        copyAlerts[index].style.display = "block";
        setTimeout(() => {
            copyAlerts[index].style.display = "none";
        }, 2000);

    }
}

// Handle Content Type DropDown
function handleDropDownClick() {
    console.log("clicked")
    list.classList.toggle("active");
}

// Handle Content Type Selection
function handleContentTypeSelection(event) {
    console.log(event.target.innerText);
    contentType = event.target.innerText;
    selectedType.innerText = contentType;
    list.classList.toggle("active")
}



function loginPopup() {
    popup.innerHTML = `
    <div class='popup-container'>
    <i class="close fa-solid fa-xmark"></i>
    <div><img src="no-access.png" alt="Login Error"></div>
    <p>You need to login first!</p>
    <a target="_blank" href="https://aiworkflowpro.io/user-login">Login</a>
  </div>
    `;
    popup.style.display = "flex";
    popupClose = document.querySelector(".close");
    document
      .querySelector(".popup")
      .addEventListener("click", function (event) {
        if (
          event.target === this ||
          event.target.contains(popupClose)
        ) {
          this.style.display = "none";
        }
      });
  }
  
  function noBalPopup() {
    popup.innerHTML = `
    <div class='popup-container'>
    <i class="close fa-solid fa-xmark"></i>
    <div><img src="no-balance.png" alt="Balance Error"></div>
    <p>Not Enough Power Points!</p>
    <a target="_blank" href="https://learnwithhasan.com/points-system">Recharge Me</a>
  </div>
    `;
    popup.style.display = "flex";
    popupClose = document.querySelector(".close");
    document
      .querySelector(".popup")
      .addEventListener("click", function (event) {
        if (
          event.target === this ||
          event.target.contains(popupClose)
        ) {
          this.style.display = "none";
        }
      });
  }
</script>

@paddy Are you sure your backend code is working correctly? because i just tried to send a request and it gave me 400 bad request error.

Additionally the advanced hook generate function name is hook_generator, why it is openai_generate_basic in your code

@paddy Try updatating your backend code with the PHP attached and the frontend with the HTML code attached. But don't forget to add your API key in the PHP function.

thanks @husein that worked by replacing the frontend code with your one. thanks very much

You're Welcome, @paddy, but please don't attach your codes as you did above next time. As you can see, it took up too much space. It would be better if you attached them using the "Attach Files" button below, as I did when I gave you the new codes.