/* ----------------------------------------
   BUTTON — Base
---------------------------------------- */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
}

/* ----------------------------------------
   BUTTON — Size variants
---------------------------------------- */
.btn-sm {
    padding: 10px var(--space-16);
}

.btn-md {
    padding: 10px var(--space-16);
}

.btn-lg {
    padding: 10px 18px;
}

.btn-xl {
    padding: 12px var(--space-24);
}

/* ----------------------------------------
   BUTTON — Variants
---------------------------------------- */
.btn-primary {
    border: 1px solid var(--Background-Brand-Primary-Default) !important;
    background: var(--Background-Brand-Primary-Default) !important;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
    color: var(--Color-Base-White) !important;
}

.btn-primary:hover {
    background: var(--Background-Brand-Primary-Hover) !important;
    border-color: var(--Background-Brand-Primary-Hover) !important;
    color: var(--Color-Base-White) !important;
}

.btn-secondary {
    border: 1px solid var(--Border-Base-White);
    background: var(--Background-Base-White);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.btn-secondary:hover {
    border-color: var(--Border-Brand-Secondary-Hover);
    background: var(--Color-Brand-yellow-300);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    color: var(--Text-Brand-Primary-Default);
}

.btn-ghost-secondary {
    border: 1px solid var(--Border-Base-White);
    background: var(--Background-Base-transparent-1);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.btn-ghost-secondary:hover {
    border-color: var(--Border-Base-white-50);
    background: var(--Background-Base-transparent-1);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    color: var(--Text-Base-white-50) !important;
}

/* ----------------------------------------
   BUTTON — Icon size
---------------------------------------- */
.btn-primary i,
.btn-secondary i,
.btn-ghost-secondary i {
    width: 20px;
    height: 20px;
    font-size: 20px;
}




/* ----------------------------------------
   BUTTON — Nav (Swiper prev/next)
---------------------------------------- */
.btn-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Nav size variants */
.btn-nav-xxl {
    width: 64px;
    height: 64px;
    padding: 14px;
    gap: var(--space-8);
}

/* Nav color variants */
.btn-nav-dark {
    background: var(--Color-Brand-blue-700);
    border: 1px solid var(--Color-Brand-blue-700);
}

.btn-nav-dark:hover {
    background: var(--Background-Brand-Secondary-Hover);
    border-color: var(--Border-Brand-Tri-Hover);
}

.btn-nav-dark:disabled {
    background: var(--Background-Brand-Primary-50);
    border-color: var(--Border-Brand-Primary-50);
}

.btn-nav-white {
    background: var(--Background-Base-White);
    border: 1px solid var(--Border-Base-white-50);
}

.btn-nav-white:hover {
    background: var(--Background-Base-white-50);
    border-color: var(--Border-Base-white-50);
}

.btn-nav-white:disabled {
    background: var(--Background-Base-white-50);
    border-color: var(--Border-Base-white-50);
}