/* stylelint-disable at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* stylelint-enable at-rule-no-unknown */

.section-wrap {
  @apply max-w-[720px] p-2.5;
}

.section-accordion {
  @apply block bg-white text-[#333] cursor-pointer w-full text-left transition-[background-color] duration-[0.2s] ease-[ease-in-out];
  @apply text-base font-semibold shadow-lg max-w-none mx-0 my-5 p-4 border-[none] after:content-['\25BC'] after:text-xs after:text-[#777] after:float-right after:ml-[5px] after:mt-0.5;
  @apply mt-16 sm:mt-10;
  outline: none;
  font-family: "Montserrat", sans-serif;
}

.section-active,
.section-accordion:hover {
  @apply bg-zinc-100 text-[#333];
}

.section-panel {
  @apply bg-[white] hidden overflow-hidden shadow-lg max-w-none -mt-5 p-5;
}

.section-panel tr:not(:last-child) {
  @apply border-b-[#f3f3f3] border-b border-solid;
}

.section-active:after {
  @apply content-["\25B2"];
}

.mountdev_turnstile-settings .form-table th {
  @apply text-[15px] font-semibold;
}

.mountdev_turnstile-settings .section-panel .form-table th {
  @apply w-60;
}

.mountdev_turnstile-settings input[type="checkbox"] {
  @apply scale-110;
}

.mountdev_turnstile-settings .button.button-primary {
  @apply text-sm font-semibold shadow-lg px-6 py-2 rounded-md border-[none];
  font-family: "Montserrat", sans-serif;
}

.section-wrap input[type="text"] {
  @apply min-w-[240px] max-w-[400px] px-2.5 py-[5px] focus:border-[#cbdded];
}

.section-wrap input[type="checkbox"] {
  @apply appearance-none border w-[18px] h-[18px] cursor-pointer transition-[background-color] duration-[0.2s] ease-[ease-out] border-solid border-[#aaa];
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

.section-wrap select {
  @apply appearance-none bg-white border min-w-[240px] w-full cursor-pointer transition-all duration-[0.2s] ease-[ease-out] px-2.5 py-1 border-solid border-[#aaa] focus:shadow-lg;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

.section-wrap .section-panel input[type="checkbox"],
.section-wrap .section-panel select {
  @apply float-right;
}

.section-wrap .section-panel input[type="text"],
.section-wrap .section-panel select {
  @apply min-w-[150px] px-2 py-0.5;
}

.mountdev_turnstile-settings span.dashicons.dashicons-yes-alt {
  @apply h-7 w-7 text-[28px] inline-block ml-[-5px] -mt-0.5;
}

.wp-core-ui select,
.wp-core-ui textarea {
  @apply !max-w-none;
}

/* Advertisement Sidebar Styles */
.mountdev-turnstile-ads-sidebar {
  @apply xl:space-y-5;
}

.mountdev-turnstile-ad-item {
  @apply bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 relative;
}

.mountdev-turnstile-ad-item img {
  @apply w-full h-auto object-cover;
  @apply max-w-lg;
  @apply transition-all duration-300 ease-in-out;
}

.mountdev-turnstile-ad-item:hover {
  @apply shadow-lg;
}

.mountdev-turnstile-ad-item:hover img {
  @apply scale-[1.06] blur-[2px];
}

/* Overlay for View Details button */
.mountdev-turnstile-ad-overlay {
  @apply absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out;
}

.mountdev-turnstile-ad-item:hover .mountdev-turnstile-ad-overlay {
  @apply opacity-100;
}

.mountdev-turnstile-view-details-btn {
  @apply bg-white text-gray-800 font-semibold py-2 px-4 rounded-lg shadow-lg hover:bg-gray-100 transition-colors duration-200 ease-in-out;
  @apply transform scale-95 transition-transform duration-200 ease-in-out;
}

.mountdev-turnstile-ad-item:hover .mountdev-turnstile-view-details-btn {
  @apply scale-100;
}

/* Responsive Design for Admin Settings */
@media (max-width: 1200px) {
  .mountdev-turnstile-admin-layout {
    @apply flex-col;
  }

  .mountdev-turnstile-sidebar {
    @apply w-full;
  }

  .mountdev-turnstile-ads-sidebar {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
  }
}

@media (max-width: 768px) {
  .mountdev-turnstile-ads-sidebar {
    @apply grid-cols-1;
  }

  .mountdev-turnstile-ad-item img {
    @apply max-w-lg;
  }
}

/* WordPress Login Form Adjustments for Turnstile */
/* Expand the login container to accommodate Turnstile widget */
body.login #login {
  width: 350px !important;
  max-width: 350px !important;
}

/* Style the Turnstile widget to fit nicely */
body.login .cf-turnstile,
body.login div[id^="cf-turnstile"] {
  width: 300px !important;
  max-width: 300px !important;
  margin: 0 auto 16px auto !important;
  box-sizing: border-box !important;
}

body.login .cf-turnstile iframe,
body.login div[id^="cf-turnstile"] iframe {
  width: 300px !important;
  max-width: 300px !important;
  box-sizing: border-box !important;
}