/* ===========================
	MailChimp Widget
===========================*/

.ekl-mailchimp-wrapper {
  i,
  svg {
    @apply h-[1em] w-[1em] fill-current;
  }

  label {
    @apply inline-block mb-1.5 text-sm font-medium;
  }

  .input {
    @apply relative flex items-stretch w-full;

    .icon {
      @apply inline-flex justify-center items-center px-4 min-h-12 bg-[#f8f9fa] border border-solid border-[#ced4da] text-[#495057] box-border shrink-0 transition-[border-color] duration-200 ease-in-out;
    }

    input {
      @apply w-full min-h-12 px-4 py-3 text-sm leading-normal text-[#333333] bg-white border border-solid border-[#ced4da] rounded outline-none shadow-none box-border transition-[border-color,box-shadow] duration-200 ease-in-out;
    }

    &.before {
      .icon {
        @apply -mr-px rounded-tr-none rounded-br-none rounded-tl rounded-bl;
      }
      input {
        @apply rounded-tl-none rounded-bl-none;
      }
    }

    &.after {
      .icon {
        @apply order-2 -ml-px rounded-tl-none rounded-bl-none rounded-tr rounded-br;
      }
      input {
        @apply rounded-tr-none rounded-br-none;
      }
    }

    &:focus-within .icon,
    input:focus {
      @apply border-[#0073aa] z-[2];
    }
  }

  .ekl-mailchimp-submit {
    button,
    .wcf-mc-button {
      @apply inline-flex items-center justify-center gap-2 min-h-12 px-6 py-0 text-sm font-medium leading-none text-white whitespace-nowrap bg-[#0073aa] border border-solid border-[#0073aa] rounded cursor-pointer box-border transition-all duration-200 ease-in-out;

      &:hover {
        @apply bg-[#005a87] border-[#005a87] text-white;
      }
    }
  }

  .ekl-mailchimp-btn-icon {
    @apply inline-flex items-center justify-center;

    svg,
    i {
      @apply h-[1em] w-[1em];
    }

    &-before {
      @apply mr-1;
    }

    &-after {
      @apply ml-1;
    }
  }

  .mailchimp-response-message {
    @apply mb-3 px-4 py-2.5 text-sm rounded border border-solid border-transparent;

    &.error {
      @apply block text-[#842029] bg-[#f8d7da] border-[#f5c2c7];
    }

    &.success {
      @apply block text-[#0f5132] bg-[#d1e7dd] border-[#badbcc];
    }

    &.warning {
      @apply block text-[#664d03] bg-[#fff3cd] border-[#ffecb5];
    }
  }
}

/* Inline Layout (Side by Side / পাশাপাশি) */
.ekl-mailchimp-layout-inline.ekl-mailchimp-form,
.ekl-mailchimp-layout-inline .ekl-mailchimp-form {
  @apply flex flex-wrap items-end gap-3;
}

.ekl-mailchimp-layout-inline .ekl-mailchimp-field {
  @apply flex-[0_1_350px] max-w-full;
}

.ekl-mailchimp-layout-inline .ekl-mailchimp-submit {
  @apply flex-none;
}

/* Stacked Layout (Top & Bottom / উপর নিচে) */
.ekl-mailchimp-layout-stacked.ekl-mailchimp-form,
.ekl-mailchimp-layout-stacked .ekl-mailchimp-form {
  @apply flex flex-col gap-3.5;
}

.ekl-mailchimp-layout-stacked .ekl-mailchimp-field {
  @apply w-full flex-[0_0_100%];
}

.ekl-mailchimp-layout-stacked .ekl-mailchimp-submit {
  @apply flex w-full;

  button,
  .wcf-mc-button {
    @apply w-auto;
  }
}