@tailwind base;
@tailwind components;
@tailwind utilities;
@import "components/spinner";

@layer components {
  .regular-text {
    @apply text-xs font-medium text-slate-500 leading-normal;
  }
  #post-content h2, #tip-content h2, #editorjs h2 {
    @apply text-2xl font-bold mt-8 mb-3 leading-tight;
  }
  #post-content h3, #tip-content h3, #editorjs h3 {
    @apply text-xl font-semibold mt-6 mb-2 leading-snug;
  }
  #post-content ul, #tip-content ul, #editorjs ul {
    @apply list-disc list-inside space-y-1 ml-4;
  }
  #post-content ol, #tip-content ol, #editorjs ol {
    @apply list-decimal list-inside space-y-1 ml-4;
  }
  #post-content a,
  #tip-content a,
  #editorjs a {
    @apply underline;
  }
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: none !important;
}

html, body {
  touch-action: pan-x pan-y; /* отключает pinch-to-zoom */
  overscroll-behavior: contain;
}

/* Убрать стрелки в Chrome, Safari, Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Убрать стрелки в Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Предотвращение масштабирования на айфоне */
/* минимум для iOS */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  textarea,
  input,
  select {
    font-size: 16px;
  }
}

.editorjs-quote-block {
  @apply border-l-4 border-black pl-4 my-4 text-base;
}
.editorjs-quote-text {
  @apply italic;
}
.editorjs-quote-caption {
  @apply mt-1 text-sm text-zinc-400;
}
.mm-spinner-container {
  --uib-size: 45px;
  --uib-color: black;
  --uib-speed: 1.75s;
  --uib-bg-opacity: .1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--uib-size);
  width: var(--uib-size);
  transform: rotate(45deg);
  animation: mm-spinner-rotate calc(var(--uib-speed) * 2) ease-in-out infinite;
}

.mm-spinner-half {
  --uib-half-size: calc(var(--uib-size) * 0.435);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-half-size);
  height: var(--uib-half-size);
  overflow: hidden;
  isolation: isolate;
}

.mm-spinner-half:first-child {
  top: 8.25%;
  left: 8.25%;
  border-radius: 50% 50% calc(var(--uib-size) / 15);
}

.mm-spinner-half:last-child {
  bottom: 8.25%;
  right: 8.25%;
  transform: rotate(180deg);
  align-self: flex-end;
  border-radius: 50% 50% calc(var(--uib-size) / 15);
}

.mm-spinner-half:last-child::after {
  animation-delay: calc(var(--uib-speed) * -1);
}

.mm-spinner-half::before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--uib-color);
  opacity: var(--uib-bg-opacity);
  transition: background-color 0.3s ease;
}

.mm-spinner-half::after {
  content: '';
  position: relative;
  z-index: 1;
  display: block;
  background-color: var(--uib-color);
  height: 100%;
  width: 100%;
  transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2);
  transform-origin: bottom right;
  border-radius: 0 0 calc(var(--uib-size) / 20) 0;
  animation: mm-spinner-flow calc(var(--uib-speed) * 2) linear infinite both;
  transition: background-color 0.3s ease;
}

@keyframes mm-spinner-flow {
  0% {
    transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2);
  }
  30% {
    transform: rotate(45deg) translate(115%, 50%) scaleX(1.2);
  }
  30.001%, 50% {
    transform: rotate(0deg) translate(-85%, -85%) scaleX(1);
  }
  80%, 100% {
    transform: rotate(0deg) translate(0%, 0%) scaleX(1);
  }
}

@keyframes mm-spinner-rotate {
  0%, 30% {
    transform: rotate(45deg);
  }
  50%, 80% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(405deg);
  }
}
.pagy.nav {
  display: inline-flex;
  position: relative;
  z-index: 0;
  border-radius: 0.75rem; /* rounded-2xl */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* мягкая тень как в UI */
  overflow: hidden;
}

.pagy.nav a {
  background-color: #FCFBFC; /* bg-ice-200 */
  color: #475569; /* text-zinc-600 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  border: 1px solid #E7E7E7; /* border-ice-300 */
  text-decoration: none;
  cursor: pointer;
  margin-left: -1px;
  transition: background 0.15s ease;
}

.pagy.nav a:not(.current):hover {
  background-color: #F1F5F9; /* bg-slate-100 hover */
}

.pagy.nav [aria-disabled="true"]:not(.current) {
  background-color: #F1F5F9; /* bg-slate-100 */
  color: #94a3b8; /* text-slate-400 */
  cursor: not-allowed;
}

.pagy.nav .current {
  z-index: 10;
  border-color: #22c55e;        /* border-grass-500 (Tailwind: green-500) */
  background-color: #dcfce7;    /* bg-grass-100 (Tailwind: green-100) */
  color: #16a34a;               /* text-grass-600 (Tailwind: green-600) */
}

.pagy.nav a:first-child {
  border-radius: 0.75rem 0 0 0.75rem; /* rounded-l-2xl */
  margin-left: 0;
}

.pagy.nav a:last-child {
  border-radius: 0 0.75rem 0.75rem 0; /* rounded-r-2xl */
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */