.c-header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center
}

.c-header > div {
  padding-right: 3px;
}

/**
 * @since 2.0.62
 */
.f12-captcha {
  display: block;
  width: 100%;
}

$template_1_font_size: 1.05rem;
$template_1_border_color: #ccc;

.f12-captcha {
  &.template-1 {
    background-color: #fff;
    border: 1px solid $template_1_border_color;
    padding: 10px 15px 15px 15px;
    position: relative;
    border-radius: 3px;


    .c-label {
      left: 10px;
      font-size: 12px;
      color: #777;
    }

    .c-data {
      font-size: $template_1_font_size;
    }

    .c-input {
      display: flex;
      flex-flow: row nowrap;
    }

    .c-header {
      border: 1px solid $template_1_border_color;
      padding: 5px 5px 5px 10px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;

      width: 100%;
      background-color: #fff;
      border-radius: 3px;
    }

    .c-hint {
      font-size: 12px;
      margin-left: -10px;
      color: #777;
      line-height: 100%;
    }

    .c-reload {
      padding: 0;

      a img {
        border: 0;
      }
    }

    input.f12c {
      display: block;
      border: 0px solid $template_1_border_color;
      margin-left: -10px;
      background-color: #fff;
      font-size: $template_1_font_size;
      padding: 3px;
      max-width: 100px;
      height:24px;

      &:focus {
        border: 0;
        outline: 0;
      }
    }

  }
}

.f12-captcha-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.f12-captcha-overlay::after {
  content: "";
  width: 24px; height: 24px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: f12-spin 0.8s linear infinite;
}

@keyframes f12-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/**
 * Dark template overlay fix
 * @since 2.1.0
 */
.f12-captcha.template-3 .f12-captcha-overlay,
.f12-captcha.template-4 .f12-captcha-overlay,
.f12-captcha.template-8 .f12-captcha-overlay,
.f12-captcha.template-9 .f12-captcha-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.f12-captcha.template-3 .f12-captcha-overlay::after,
.f12-captcha.template-4 .f12-captcha-overlay::after,
.f12-captcha.template-8 .f12-captcha-overlay::after,
.f12-captcha.template-9 .f12-captcha-overlay::after {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
}

/**
 * Template 3 – Dark Card (legacy)
 * @since 2.1.0
 */
$template_3_bg: #2b3a42;
$template_3_data_bg: #f0f0f0;
$template_3_text: #c8d6de;
$template_3_input_bg: #fff;
$template_3_border: rgba(255, 255, 255, 0.1);

.f12-captcha {
  &.template-3 {
    background-color: $template_3_bg;
    border-radius: 12px;
    padding: 20px;
    position: relative;

    .c-header {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .c-data {
      background-color: $template_3_data_bg;
      border-radius: 8px;
      padding: 8px 14px;
      display: inline-flex;
      align-items: center;
      min-height: 40px;

      .captcha-calculation {
        font-family: 'Courier New', monospace;
        font-size: 1.15rem;
        font-weight: 600;
        color: #1a1a1a;
        letter-spacing: 2px;
      }
    }

    .c-label {
      label {
        color: $template_3_text;
        font-size: 0.9rem;
        font-weight: 400;
      }
    }

    .c-reload {
      padding: 0;

      a, button {
        color: $template_3_text;
        opacity: 0.7;
        transition: opacity 0.2s;

        &:hover {
          opacity: 1;
        }
      }
    }

    .c-audio .captcha-audio-btn {
      color: $template_3_text;
      opacity: 0.7;
      background: transparent;

      &:hover {
        opacity: 1;
      }
    }

    input.f12c {
      display: block;
      width: 100%;
      background-color: $template_3_input_bg;
      border: 1px solid $template_3_border;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 0.95rem;
      color: #333;
      box-sizing: border-box;
      letter-spacing: 3px;
      text-transform: uppercase;

      &::placeholder {
        color: #999;
        text-transform: none;
        letter-spacing: normal;
      }

      &:focus {
        outline: 2px solid rgba(100, 180, 220, 0.6);
        outline-offset: 1px;
        border-color: transparent;
      }
    }
  }
}

/**
 * Template 4 – Gradient Dark (legacy)
 * @since 2.1.0
 */
$template_4_bg_start: #1e2d3a;
$template_4_bg_end: #16232e;
$template_4_text: #8a9baa;
$template_4_data_border: rgba(255, 255, 255, 0.15);
$template_4_input_bg: rgba(255, 255, 255, 0.06);
$template_4_input_border: rgba(255, 255, 255, 0.12);

.f12-captcha {
  &.template-4 {
    background: linear-gradient(145deg, $template_4_bg_start, $template_4_bg_end);
    border-radius: 12px;
    padding: 20px;
    position: relative;

    .c-header {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .c-data {
      border: 1px solid $template_4_data_border;
      border-radius: 8px;
      padding: 8px 14px;
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.04);
      min-height: 40px;

      .captcha-calculation {
        font-family: 'Courier New', monospace;
        font-size: 1.15rem;
        font-weight: 600;
        color: #e0e8ef;
        letter-spacing: 2px;
      }

      .captcha-image img {
        border-radius: 4px;
      }
    }

    .c-label {
      label {
        color: $template_4_text;
        font-size: 0.9rem;
        font-weight: 400;
      }
    }

    .c-reload {
      padding: 0;

      a, button {
        color: $template_4_text;
        opacity: 0.7;
        transition: opacity 0.2s;

        &:hover {
          opacity: 1;
        }
      }
    }

    .c-audio .captcha-audio-btn {
      color: $template_4_text;
      background: transparent;
      opacity: 0.7;

      &:hover {
        opacity: 1;
      }
    }

    input.f12c {
      display: block;
      width: 100%;
      background-color: $template_4_input_bg;
      border: 1px solid $template_4_input_border;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 0.95rem;
      color: #d0dbe4;
      box-sizing: border-box;

      &::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }

      &:focus {
        outline: 2px solid rgba(100, 180, 220, 0.5);
        outline-offset: 1px;
        border-color: rgba(100, 180, 220, 0.3);
      }
    }
  }
}


/* ================================================================== */
/*  V2 TEMPLATES (5-9) — new design with SVG icons                    */
/* ================================================================== */

/**
 * Shared v2 base styles — SVG reload & audio buttons
 */
$v2_icon_color_light: #9ca3af;
$v2_icon_hover_light: #6b7280;

.f12-captcha.template-5,
.f12-captcha.template-6,
.f12-captcha.template-7 {
  .c-header {
    gap: 6px;
  }

  .c-header > div {
    padding-right: 0;
  }

  .c-reload {
    padding: 0;

    a {
      color: $v2_icon_color_light;
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: $v2_icon_hover_light;
      }

      svg {
        display: block;
      }
    }
  }

  .c-audio {
    .captcha-audio-btn {
      color: $v2_icon_color_light;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: color 0.2s;

      &:hover {
        color: $v2_icon_hover_light;
      }
    }

    .captcha-audio-tooltip {
      display: none;
    }
  }
}

/* ------------------------------------------------------------------ */
/*  Template 5 – Standard (v2)                                         */
/* ------------------------------------------------------------------ */
.f12-captcha {
  &.template-5 {
    .c-header {
      margin-bottom: 6px;
    }

    .c-data {
      background-color: #f3f4f6;
      border-radius: 4px;
      padding: 4px 8px;
    }

    .c-label {
      font-size: 0.75rem;
      color: #6b7280;
    }
  }
}

/* ------------------------------------------------------------------ */
/*  Template 6 – Compact (v2)                                          */
/* ------------------------------------------------------------------ */
$v2_template_6_border: #e5e7eb;

.f12-captcha {
  &.template-6 {
    background-color: #fff;
    border: 1px solid $v2_template_6_border;
    padding: 10px 15px 15px 15px;
    position: relative;
    border-radius: 6px;

    .c-label {
      font-size: 12px;
      color: #9ca3af;
    }

    .c-data {
      font-size: 1.05rem;
    }

    .c-input {
      display: flex;
      flex-flow: row nowrap;
    }

    .c-header {
      border: 1px solid $v2_template_6_border;
      padding: 5px 10px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background-color: #fff;
      border-radius: 6px;
    }

    .c-hint {
      font-size: 12px;
      color: #9ca3af;
      line-height: 100%;
    }

    .c-reload {
      padding: 0;
    }

    input.f12c {
      display: block;
      border: 0;
      background-color: #fff;
      font-size: 1.05rem;
      padding: 3px;
      max-width: 100px;
      height: 24px;

      &:focus {
        border: 0;
        outline: 0;
      }
    }
  }
}

/* ------------------------------------------------------------------ */
/*  Template 7 – Clean (v2)                                            */
/* ------------------------------------------------------------------ */
.f12-captcha {
  &.template-7 {
    .c-header {
      margin-bottom: 6px;
    }

    .c-data {
      background-color: #f9fafb;
      border-radius: 4px;
      padding: 4px 8px;
    }

    .c-label {
      font-size: 0.75rem;
      color: #6b7280;

      label {
        font-size: 0.75rem;
        color: #6b7280;
      }
    }
  }
}

/* ------------------------------------------------------------------ */
/*  Template 8 – Dark Card (v2)                                        */
/* ------------------------------------------------------------------ */
$v2_t8_bg: #2b3a42;
$v2_t8_data_bg: #f0f0f0;
$v2_t8_text: #c8d6de;
$v2_t8_border: rgba(255, 255, 255, 0.1);

.f12-captcha {
  &.template-8 {
    background-color: $v2_t8_bg;
    border-radius: 12px;
    padding: 20px;
    position: relative;

    .c-header {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;

      > div {
        padding-right: 0;
      }
    }

    .c-data {
      background-color: $v2_t8_data_bg;
      border-radius: 8px;
      padding: 8px 14px;
      display: inline-flex;
      align-items: center;
      min-height: 40px;

      .captcha-calculation {
        font-family: 'Courier New', monospace;
        font-size: 1.15rem;
        font-weight: 600;
        color: #1a1a1a;
        letter-spacing: 2px;
      }
    }

    .c-label {
      label {
        color: $v2_t8_text;
        font-size: 0.9rem;
        font-weight: 400;
      }
    }

    .c-reload {
      padding: 0;

      a {
        color: $v2_t8_text;
        opacity: 0.7;
        text-decoration: none;
        transition: opacity 0.2s;

        &:hover {
          opacity: 1;
        }

        svg {
          display: block;
        }
      }
    }

    .c-audio {
      .captcha-audio-btn {
        color: $v2_t8_text;
        opacity: 0.7;
        background: transparent;
        border: none;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }

      .captcha-audio-tooltip {
        display: none;
      }
    }

    input.f12c {
      display: block;
      width: 100%;
      background-color: #fff;
      border: 1px solid $v2_t8_border;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 0.95rem;
      color: #333;
      box-sizing: border-box;
      letter-spacing: 3px;
      text-transform: uppercase;

      &::placeholder {
        color: #999;
        text-transform: none;
        letter-spacing: normal;
      }

      &:focus {
        outline: 2px solid rgba(100, 180, 220, 0.6);
        outline-offset: 1px;
        border-color: transparent;
      }
    }
  }
}

/* ------------------------------------------------------------------ */
/*  Template 9 – Gradient Dark (v2)                                    */
/* ------------------------------------------------------------------ */
$v2_t9_bg_start: #1e2d3a;
$v2_t9_bg_end: #16232e;
$v2_t9_text: #8a9baa;
$v2_t9_data_border: rgba(255, 255, 255, 0.15);
$v2_t9_input_bg: rgba(255, 255, 255, 0.06);
$v2_t9_input_border: rgba(255, 255, 255, 0.12);

.f12-captcha {
  &.template-9 {
    background: linear-gradient(145deg, $v2_t9_bg_start, $v2_t9_bg_end);
    border-radius: 12px;
    padding: 20px;
    position: relative;

    .c-header {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;

      > div {
        padding-right: 0;
      }
    }

    .c-data {
      border: 1px solid $v2_t9_data_border;
      border-radius: 8px;
      padding: 8px 14px;
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.04);
      min-height: 40px;

      .captcha-calculation {
        font-family: 'Courier New', monospace;
        font-size: 1.15rem;
        font-weight: 600;
        color: #e0e8ef;
        letter-spacing: 2px;
      }

      .captcha-image img {
        border-radius: 4px;
      }
    }

    .c-label {
      label {
        color: $v2_t9_text;
        font-size: 0.9rem;
        font-weight: 400;
      }
    }

    .c-reload {
      padding: 0;

      a {
        color: $v2_t9_text;
        opacity: 0.7;
        text-decoration: none;
        transition: opacity 0.2s;

        &:hover {
          opacity: 1;
        }

        svg {
          display: block;
        }
      }
    }

    .c-audio {
      .captcha-audio-btn {
        color: $v2_t9_text;
        background: transparent;
        border: none;
        opacity: 0.7;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }

      .captcha-audio-tooltip {
        display: none;
      }
    }

    input.f12c {
      display: block;
      width: 100%;
      background-color: $v2_t9_input_bg;
      border: 1px solid $v2_t9_input_border;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 0.95rem;
      color: #d0dbe4;
      box-sizing: border-box;

      &::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }

      &:focus {
        outline: 2px solid rgba(100, 180, 220, 0.5);
        outline-offset: 1px;
        border-color: rgba(100, 180, 220, 0.3);
      }
    }
  }
}
