@tailwind base;
@tailwind components;
@tailwind utilities;

/* Alert компоненты */
@layer components {
  .alert {
    @apply p-4 mb-4 rounded-lg border;
  }
  
  .alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
  }
  
  .alert-danger {
    @apply bg-red-50 border-red-200 text-red-800;
  }
  
  .alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
  }
  
  .alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
  }
  
  .alert-primary {
    @apply bg-primary/10 border-primary/20 text-primary;
  }
  
  .alert-secondary {
    @apply bg-secondary/10 border-secondary/20 text-secondary;
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }
}

/* Кастомные компоненты и утилиты */
@layer components {
  .btn-circle {
    @apply w-8 h-8 p-1.5 rounded-full text-center text-xs leading-tight;
  }
  
  .btn-circle.btn-xl {
    @apply w-[70px] h-[70px] p-2.5 rounded-[35px] text-2xl leading-[1.33];
  }
  
  .rounded-circle-img {
    @apply w-40 h-40 rounded-[60px] bg-cover bg-center;
  }
  
  .page-sidebar {
    @apply w-[400px];
  }
  
  .page-content {
    @apply flex-1 min-h-screen flex flex-col;
  }
  
  .bg-add {
    @apply bg-gray-200;
  }
  
  .bg-highlight {
    @apply bg-[#ffffc0];
  }
  
  .bg-gradient-highlight {
    @apply bg-gradient-to-b from-[#ffffc0] to-white;
  }
  
  .bg-gradient-add {
    @apply bg-gradient-to-b from-gray-200 to-white;
  }
  
  .bg-gradient-nav {
    @apply bg-secondary;
  }
  
  .border-gradient {
    @apply bg-gradient-to-b from-gray-400 to-white bg-clip-padding p-px border border-transparent;
  }
  
  .offer-container {
    @apply min-h-[100px] overflow-hidden relative;
  }
  
  .offer-content {
    @apply pt-5 pl-[60px];
  }
  
  .offer-triangle {
    @apply bg-red-500 inline-block transform -translate-x-1/2 rotate-45 translate-x-1/2 -rotate-90 origin-top shadow-[0px_-50px_0px_50px_rgb(239,68,68)] text-white absolute;
  }
  
  .bg-white-trans {
    @apply bg-white/70;
  }
  
  .circles {
    @apply -mb-2.5;
  }
  
  .circle {
    @apply w-[100px] my-1.5 mx-1.5 mb-5 inline-block relative text-center leading-tight;
  }
  
  .circle canvas {
    @apply align-top;
  }
  
  .circle strong {
    @apply absolute top-[30px] left-0 w-full text-center leading-10 text-[30px];
  }
  
  .circle strong i {
    @apply not-italic text-[0.6em] font-normal;
  }
  
  .circle span {
    @apply block text-gray-400 mt-3;
  }
  
  .icon-circle {
    @apply w-[100px] h-[100px] rounded-full bg-white flex items-center justify-center;
  }
  
  .spacer {
    @apply h-1 bg-primary mb-4;
  }
  
  .rating {
    @apply border-none flex flex-row-reverse justify-start;
  }
  
  .rating > input {
    @apply hidden;
  }
  
  .rating > label:before {
    @apply my-1.5 mx-1.5 text-xl font-[IcoFont] inline-block content-["\f000"];
  }
  
  .rating > .half:before {
    @apply content-["\f000"] absolute;
  }
  
  .rating > label {
    @apply text-[#b2b2b2];
  }
  
  .icofont-ui-user {
    @apply text-[60px];
  }
  
  .rating > input:checked ~ label,
  .rating:not(:checked) > label:hover,
  .rating:not(:checked) > label:hover ~ label {
    @apply text-[#FFD700];
  }
  
  .rating > input:checked + label:hover,
  .rating > input:checked ~ label:hover,
  .rating > label:hover ~ input:checked ~ label,
  .rating > input:checked ~ label:hover ~ label {
    @apply text-[#FFED85];
  }
  
  .address-link:hover {
    @apply bg-[#01365b];
  }
  
  .footer-link:hover {
    @apply underline;
  }
  
  .svg {
    @apply h-5;
  }

  /* Flash Message Component */
  .flash-message {
    --flash-bg: #222222;
    --flash-accent: #111111;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem 1rem 4.375rem;
    margin: 1rem auto;
    max-width: 600px;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #ffffff;
    background: var(--flash-bg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-out;
    transition: all 0.3s ease;
    z-index: 10000;
    overflow: visible;
  }

  .flash-message__svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-bottom-left-radius: 10px;
  }

  .flash-message__svg * {
    fill: var(--flash-accent);
  }

  .flash-message__icon {
    position: absolute;
    top: -20px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--flash-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
  }

  .flash-message__text {
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: 480px;
  }

  .flash-message .headline {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 2px;
  }

  .flash-message .subtext {
    font-size: 0.85rem;
    color: #e2e2e2;
  }

  .flash-message__close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    transition: opacity 0.2s ease;
    line-height: 1;
  }

  .flash-message__close:hover {
    opacity: 0.7;
  }

  .flash-message.is-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .flash-message--success {
    --flash-bg: #0070e0;
    --flash-accent: #05478a;
  }

  .flash-message--error {
    --flash-bg: #c72c41;
    --flash-accent: #801336;
  }

  .flash-message--warning {
    --flash-bg: #fc8621;
    --flash-accent: #c24914;
  }

  .flash-message--info {
    --flash-bg: #0070e0;
    --flash-accent: #05478a;
  }

  .flash-message--primary {
    --flash-bg: #6f3ff5;
    --flash-accent: #4923a6;
  }

  .flash-message--default {
    --flash-bg: #222222;
    --flash-accent: #111111;
  }

  .flash-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    pointer-events: none;
    width: 100%;
    max-width: 600px;
    padding: 0 1rem;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@layer utilities {
  .size-12 {
    @apply text-xs;
  }
  
  .size-13 {
    @apply text-[13px];
  }
  
  .size-14 {
    @apply text-sm;
  }
  
  .size-16 {
    @apply text-base;
  }
  
  .size-18 {
    @apply text-lg;
  }
}