/*Write your custom css in this file.*/

/* =====================================================================
   1) LANGUAGE DROPDOWN — compact + country flags
   ===================================================================== */
.language-dropdown {
    min-width: 190px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25) !important;
}
.language-dropdown > li {
    list-style: none;
}
.language-dropdown .lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 9px;
    font-size: 14px;
    transition: background .15s ease;
}
.language-dropdown .lang-item:hover {
    background: #f1f5f9;
}
.language-dropdown .lang-item.active {
    background: #e7f8f3;
    color: #0f766e;
    font-weight: 600;
}
.language-dropdown .lang-name {
    flex: 1;
}
.language-dropdown .lang-flag-img {
    width: 24px;
    height: 17px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    flex-shrink: 0;
}
.language-dropdown .lang-check {
    color: #16a34a;
    margin-inline-start: auto;
}

/* =====================================================================
   2) CHEERFUL COLORFUL BUTTONS
   ===================================================================== */
.btn {
    border: none;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.btn:active {
    transform: translateY(0);
}
.btn i {
    vertical-align: -2px;
}

/* --- semantic buttons: vibrant gradients (used in forms, modals, everywhere) --- */
.btn-primary,
.btn-primary:focus {
    background: linear-gradient(135deg, #11998e, #12b39a) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(17, 153, 142, .8);
}
.btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(22, 163, 74, .8);
}
.btn-danger {
    background: linear-gradient(135deg, #e11d48, #fb7185) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(225, 29, 72, .8);
}
.btn-warning {
    background: linear-gradient(135deg, #ea8a0b, #f7b733) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(234, 138, 11, .8);
}
.btn-info {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .8);
}

/* --- neutral default button: clean & friendly (modals, cancel, toggles) --- */
.btn-default {
    background: #fff !important;
    color: #334155 !important;
    border: 1.5px solid #e2e8f0 !important;
}
.btn-default:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

/* --- toolbar action buttons: each one a different cheerful color ---
   (.title-button-group is RISE's standard page action bar) */
.title-button-group .btn,
.title-button-group .btn-default {
    color: #fff !important;
    border: none !important;
}
.title-button-group .btn:nth-of-type(5n+1) {
    background: linear-gradient(135deg, #11998e, #12b39a) !important;
    box-shadow: 0 6px 16px -8px rgba(17, 153, 142, .8) !important;
}
.title-button-group .btn:nth-of-type(5n+2) {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    box-shadow: 0 6px 16px -8px rgba(109, 40, 217, .8) !important;
}
.title-button-group .btn:nth-of-type(5n+3) {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .8) !important;
}
.title-button-group .btn:nth-of-type(5n+4) {
    background: linear-gradient(135deg, #ea8a0b, #f7b733) !important;
    box-shadow: 0 6px 16px -8px rgba(234, 138, 11, .8) !important;
}
.title-button-group .btn:nth-of-type(5n+5) {
    background: linear-gradient(135deg, #db2777, #ec4899) !important;
    box-shadow: 0 6px 16px -8px rgba(219, 39, 119, .8) !important;
}
.title-button-group .btn i {
    color: #fff !important;
}