/* WhatsApp Green Outline Button for Chat With Us */
.btn-outline-success {
    border: 2px solid var(--color-success);
    color: var(--color-success);
    background: transparent;
    transition: all 0.2s ease;
}
.btn-outline-success:hover {
    background: var(--color-success);
    color: var(--color-white);
}
/* Button Variants */
.btn-light {
    background: var(--color-white);
    color: var(--color-ink);
}

.btn-light:hover {
    background: var(--color-light-bg);
}

.btn-outline {
    border: 2px solid var(--color-white);
    color: var(--color-white);
    background: transparent;
    transition: all 0.2s ease;
}

.btn-outline-dark {
    border: 2px solid var(--color-ink);
    color: var(--color-ink);
    background: transparent;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-ink);
}

.btn-outline-dark:hover {
    background: var(--color-ink);
    color: var(--color-white);
}

/* Extend core button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 100px;
    transition: all 0.2s ease;
    font-size: 1em;
    padding: 0 1.25em;
    white-space: nowrap;
    font-family: var(--font-body);
}

/* RTL: Use Tajawal for buttons in Arabic */
html[dir="rtl"] .btn {
    font-family: var(--font-arabic);
}

.btn i {
    margin-right: 0.5rem;
}

/* Button Sizes */
.btn-sm {
    height: 36px;
    padding: 0 1em;
    font-size: var(--fs-small);
    min-width: 80px;
    white-space: nowrap;
}

.btn-lg {
    height: 56px;
    padding: 0 1.75rem;
    font-size: 1.1rem;
    min-width: 160px;
}

@media (max-width:768px){
  .btn, .btn-sm {
    height: 36px;
    font-size: 0.85em;
    padding: 0 1em;
    white-space: nowrap;
  }
}

.btn-cta {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
}
.btn-cta:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}