/* ========================================
   BUTTON COMPONENTS (из примера)
   ======================================== */

/* Стандартная кнопка с рамкой */
.btn-custom {
    border-style: solid;
    background-color: transparent;
    border-image-source: url("data:image/svg+xml;utf8,<svg width='302' height='40' viewBox='0 0 302 40' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 4L4 0H298L302 4V36L298 40H4L0 36V4Z' fill='%23DFD9D9'/><path d='M297.917 0.200195L301.8 4.08301V35.917L297.917 39.7998H4.08301L0.200195 35.917V4.08301L4.08301 0.200195H297.917Z' stroke='black' stroke-width='0.4'/><path d='M3.41211 39.0003H285.375H297.5L301 35.5003L301 3.40039' stroke='black' stroke-width='0.25'/></svg>");
    border-image-slice: 8 fill;
    border-image-width: 8px;
    border-image-repeat: stretch;
    padding: 10px 20px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
}

.btn-custom:hover {
    border-image-source: url("data:image/svg+xml;utf8,<svg width='302' height='40' viewBox='0 0 302 40' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 4L4 0H298L302 4V36L298 40H4L0 36V4Z' fill='%23ABA2A2'/><path d='M297.917 0.200195L301.8 4.08301V35.917L297.917 39.7998H4.08301L0.200195 35.917V4.08301L4.08301 0.200195H297.917Z' stroke='black' stroke-width='0.4'/><path d='M3.41211 39.0003H285.375H297.5L301 35.5003L301 3.40039' stroke='black' stroke-width='0.25'/></svg>");
}

.btn-custom.warning {
    color: var(--color-theme-18);
    border-image-source: url("data:image/svg+xml;utf8,<svg width='302' height='40' viewBox='0 0 302 40' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 4L4 0H298L302 4V36L298 40H4L0 36V4Z' fill='%23DFD9D9'/><path d='M297.917 0.200195L301.8 4.08301V35.917L297.917 39.7998H4.08301L0.200195 35.917V4.08301L4.08301 0.200195H297.917Z' stroke='%23B21840' stroke-width='0.4'/><path d='M3.41211 39.0003H285.375H297.5L301 35.5003L301 3.40039' stroke='%23B21840' stroke-width='0.25'/></svg>");
}

.btn-custom.warning:hover {
    border-image-source: url("data:image/svg+xml;utf8,<svg width='302' height='40' viewBox='0 0 302 40' fill='%23F4D0D0' xmlns='http://www.w3.org/2000/svg'><path d='M0 4L4 0H298L302 4V36L298 40H4L0 36V4Z' fill='%23DFD9D9'/><path d='M297.917 0.200195L301.8 4.08301V35.917L297.917 39.7998H4.08301L0.200195 35.917V4.08301L4.08301 0.200195H297.917Z' stroke='%23B21840' stroke-width='0.4'/><path d='M3.41211 39.0003H285.375H297.5L301 35.5003L301 3.40039' stroke='%23B21840' stroke-width='0.25'/></svg>");
}

.btn-custom:disabled {
    filter: grayscale(100%);
    cursor: not-allowed;
    opacity: 0.4;
}

/* ========================================
   INPUT COMPONENTS (из примера)
   ======================================== */

.input-custom {
    border-style: solid;
    background-color: transparent;
    border-image-source: url("data:image/svg+xml;utf8,<svg width='244' height='48' viewBox='0 0 244 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M239.278 0.200195L243.8 4.09082V43.9082L239.278 47.7998H4.72168L0.200195 43.9082V4.09082L4.72168 0.200195H239.278Z' fill='%23E1DEDE' stroke='black' stroke-width='0.4'/></svg>");
    border-image-slice: 8 fill;
    border-image-width: 8px;
    border-image-repeat: stretch;
    padding: 10px 12px;
    font-family: var(--font-mono);
    width: 100%;
}

.input-custom:focus {
    border-image-source: url("data:image/svg+xml;utf8,<svg width='245' height='48' viewBox='0 0 245 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M239.667 0.5L244 4.22852V43.7705L239.667 47.5H5.33301L1 43.7705V4.22852L5.33301 0.5H239.667Z' fill='%23E1DEDE' stroke='%23058D5E'/></svg>");
}

/* Убираем стрелки для number input */
.input-custom[type="number"] {
    -moz-appearance: textfield;
}

.input-custom[type="number"]::-webkit-outer-spin-button,
.input-custom[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ========================================
   CARD/BOX COMPONENTS (из примера)
   ======================================== */

.card-custom {
    border-style: solid;
    background-color: transparent;
    border-image-source: url("data:image/svg+xml;utf8,<svg width='182' height='132' viewBox='0 0 182 132' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M177.917 0.200195L181.8 4.08301V127.917L177.917 131.8H4.08301L0.200195 127.917V4.08301L4.08301 0.200195H177.917Z' fill='%23EBE8E8' stroke='black' stroke-width='0.4'/></svg>");
    border-image-slice: 8 fill;
    border-image-width: 8px;
    border-image-repeat: stretch;
    padding: 16px;
}

/* ========================================
   CLIP PATH SHAPES (из примера)
   ======================================== */

/* Cut corners button */
.button-cut {
    clip-path: polygon(
        6px 0, 
        calc(100% - 6px) 0, 
        100% 6px, 
        100% calc(100% - 6px), 
        calc(100% - 6px) 100%, 
        6px 100%, 
        0 calc(100% - 6px), 
        0 6px
    );
}

.button-cut-lg {
    clip-path: polygon(
        20px 0, 
        100% 0, 
        120% 100%, 
        0 120%, 
        0 20px, 
        20px 0
    );
}

@media (min-width: 768px) {
    .md\:button-cut-xl {
        clip-path: polygon(
            36px 0, 
            100% 0, 
            120% 100%, 
            0 120%, 
            0 36px, 
            36px 0
        );
    }
}

/* ========================================
   HOVER EFFECTS (из примера)
   ======================================== */

.hover-bg-pink {
    transition: background-color 0.1s cubic-bezier(0.2, 0, 0.2, 1);
}

.hover-bg-pink:hover {
    background-color: var(--color-theme-pink);
}

/* Scale animations */
.scale-hover {
    transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
}

.scale-hover:hover {
    transform: scale(1.025);
}

.scale-hover:active {
    transform: scale(0.95);
}

/* ========================================
   TOOLTIP (из примера - rc-tooltip стили)
   ======================================== */

.rc-tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    visibility: visible;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.9;
}

.rc-tooltip-hidden {
    display: none;
}

.rc-tooltip-inner {
    border-style: solid;
    border-image-source: url("data:image/svg+xml;utf8,<svg width='182' height='132' viewBox='0 0 182 132' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M177.917 0.200195L181.8 4.08301V127.917L177.917 131.8H4.08301L0.200195 127.917V4.08301L4.08301 0.200195H177.917Z' fill='%23EBE8E8' stroke='black' stroke-width='0.4'/></svg>");
    border-image-slice: 8 fill;
    border-image-width: 8px;
    border-image-repeat: stretch;
    max-width: 302px;
    opacity: 1 !important;
    box-shadow: none !important;
    min-height: auto !important;
    color: var(--color-theme-black) !important;
    font-size: 14px !important;
    font-family: var(--font-mono) !important;
    background: #dfd9d9 !important;
    background-color: var(--color-theme-white) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.rc-tooltip-arrow {
    display: none !important;
}

/* ========================================
   BLEND MODES (из примера)
   ======================================== */

.blend-difference {
    mix-blend-mode: difference;
}

/* ========================================
   СПЕЦИАЛЬНЫЕ АНИМАЦИИ (из примера)
   ======================================== */

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

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

/* ========================================
   LIST STYLES (из примера)
   ======================================== */

.common-section ul {
    padding-left: 0 !important;
    list-style-type: none !important;
}

.common-section ul li {
    padding-left: 16px;
    position: relative;
}

.common-section ul li:before {
    content: "";
    background-color: #000;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    position: absolute;
    top: 8px;
    left: 0;
}

/* ========================================
   TOAST NOTIFICATIONS (из примера)
   ======================================== */

:root {
    --toastify-toast-bd-radius: 0 !important;
    --toastify-color-success: #32b288 !important;
    --toastify-color-error: #f85385 !important;
    --toastify-z-index: 10000000 !important;
    --toastify-color-info: #ddd !important;
    --toastify-font-family: var(--font-mono) !important;
}

.toast-message {
    z-index: 100000;
    text-transform: uppercase !important;
    font-size: 14px !important;
}

/* ========================================
   MODAL/DIALOG (из примера - базовые стили)
   ======================================== */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 1000;
    animation: fadeIn 0.15s;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    z-index: 1001;
    animation: slideUp 0.35s cubic-bezier(0.15, 1.15, 0.6, 1);
}

/* ========================================
   RAINBOW LOADER (из примера)
   ======================================== */

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

.rainbow-loader {
    animation: rainbow-spin 3s linear infinite;
    background: conic-gradient(
        from 180deg,
        rgba(72, 146, 254, 0) 0deg,
        currentColor 282.04deg,
        rgba(72, 146, 254, 0) 319.86deg,
        rgba(72, 146, 254, 0) 360deg
    );
    width: 21px;
    height: 21px;
}

/* ========================================
   UTILITY HELPERS
   ======================================== */

/* Hide scrollbar */
.no-scrollbar {
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Text selection */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Pointer events */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-all {
    pointer-events: all;
}

/* Transform GPU acceleration */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Focus styles */
.focus-outline-none:focus {
    outline: none;
}

/* Truncate text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}