/* ===================================================
   Buttons.css – Modern dugmad u skladu sa variables.css
   =================================================== */

/* ===== Osnovni stil za sva dugmad ===== */
button,
.btn {
    font-family: var(--font-base);
    font-weight: 500;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1.2;
    user-select: none;
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
}

button:active,
.btn:active {
    transform: translateY(0);
}

button:focus,
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 138, 45, 0.35);
}

/* ===== Primarno dugme (.btn-warning) ===== */
.btn-warning {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: 0 4px 12px rgba(232, 138, 45, 0.3);
}
.btn-warning:hover {
    background: linear-gradient(135deg, #f09640, var(--primary-600));
    box-shadow: 0 6px 18px rgba(232, 138, 45, 0.4);
}
.btn-warning:active {
    box-shadow: 0 2px 8px rgba(232, 138, 45, 0.25);
}

/* ===== Specijalna dugmad ===== */
.btn-viber {
    background: #7360f2;
    color: #fff;
    box-shadow: 0 4px 10px rgba(115, 96, 242, 0.3);
}
.btn-viber:hover { background: #5f49f3; }

.btn-url {
    background: #3e7927;
    color: #fff;
    box-shadow: 0 4px 10px rgba(62, 121, 39, 0.3);
}
.btn-url:hover { background: #2a6114; }

.btn-racun {
    background: #995d0f;
    color: #fff;
    box-shadow: 0 4px 10px rgba(153, 93, 15, 0.3);
}
.btn-racun:hover { background: #7f470b; }

.btn-kupac {
    background: #4aa994;
    color: #fff;
    box-shadow: 0 4px 10px rgba(74, 169, 148, 0.3);
}
.btn-kupac:hover { background: #2e6e60; }

.btn-mobilni {
    background: #f97a4e;
    color: #fff;
    box-shadow: 0 4px 10px rgba(249, 122, 78, 0.3);
}
.btn-mobilni:hover { background: #d3613a; }

/* ===== Outline dugmad – visoki kontrast ===== */

/* Primarno outline dugme (Pretraži) */
.btn-outline-primary {
    color: var(--primary-600, #E88A2D);
    background-color: rgba(232, 138, 45, 0.10);
    border: 1.5px solid var(--primary-500, #E88A2D);
}
.btn-outline-primary:hover {
    background-color: rgba(232, 138, 45, 0.18);
    color: var(--primary-700, #b96a1a);
    border-color: var(--primary-600, #cf7720);
}
.btn-outline-primary:active {
    background-color: rgba(232, 138, 45, 0.24);
    border-color: var(--primary-700, #b96a1a);
}
.btn-outline-primary i { color: inherit; opacity: 1; }

/* Sekundarno outline dugme (Resetuj) */
.btn-outline-secondary {
    color: var(--dark-gray, #4a5568);
    background-color: rgba(0, 0, 0, 0.06);
    border: 1.5px solid var(--border-color, #d0d5dd);
}
.btn-outline-secondary:hover {
    background-color: rgba(0, 0, 0, 0.10);
    border-color: var(--dark-gray, #4a5568);
}
.btn-outline-secondary:active {
    background-color: rgba(0, 0, 0, 0.14);
}

/* Opšti izgled outline dugmadi */
.btn.btn-outline-primary,
.btn.btn-outline-secondary {
    border-radius: 999px; /* rounded-pill */
    padding: 0.48rem 1rem;
    min-height: 36px;
    font-weight: 500;
}

/* ===== Mikro util dugme (kompaktno) ===== */
.c-dugme {
    background: var(--light-gray);
    color: var(--dark-gray);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.c-dugme:hover {
    background: var(--border-color);
    border-color: var(--dark-gray);
}

/* ===================================================
   Add-on polish (ubaci na kraj buttons.css)
   =================================================== */

/* 1) Glatkije tranzicije svuda */
button,
.btn {
    transition:
            background-color .2s ease,
            color .2s ease,
            border-color .2s ease,
            box-shadow .25s ease,
            transform .15s ease;
}

/* 2) Hover glow za outline dugmad */
.btn-outline-primary:hover {
    box-shadow: 0 6px 16px rgba(232,138,45,.28);
}
.btn-outline-secondary:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* 3) Press efekat */
button:active,
.btn:active {
    transform: translateY(1px) scale(.98);
    box-shadow: none;
}

/* 4) Fokus – konzistentan i nenametljiv */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(232,138,45,.35);
}

/* 5) Ikonica reaguje na hover (blago) */
.btn i {
    transition: transform .2s ease, opacity .2s ease;
}
.btn-outline-primary:hover i {
    transform: translateX(2px);
}
.btn-outline-secondary:hover i {
    transform: rotate(20deg);
}

/* 6) Disabled stanje – jasno i bez animacija */
.btn:disabled,
.btn.disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* 7) (Opcionalno) Loading indikator: dodaj klasu .is-loading na dugme */
.btn.is-loading {
    position: relative;
    pointer-events: none;
}
.btn.is-loading::after {
    content: "";
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-left: 8px;
    display: inline-block;
    animation: btn-spin .8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* 8) (Opcionalno) razmak između uzastopnih dugmadi */
.btn + .btn { margin-left: .5rem; }