/* === Global Font === */
body, h1, h2, h3, h4, h5, h6, p, blockquote, .button, .navbar, .form-control, .card-title, label, input, textarea, select, button, .other-elements {
    font-family: 'Outfit', sans-serif !important;
}

/* Font Weights & Styles */
.ubuntu-light { font-weight: 300; font-style: normal; }
.ubuntu-regular { font-weight: 400; font-style: normal; }
.ubuntu-medium { font-weight: 500; font-style: normal; }
.ubuntu-bold { font-weight: 700; font-style: normal; }

.ubuntu-light-italic { font-weight: 300; font-style: italic; }
.ubuntu-regular-italic { font-weight: 400; font-style: italic; }
.ubuntu-medium-italic { font-weight: 500; font-style: italic; }
.ubuntu-bold-italic { font-weight: 700; font-style: italic; }

[x-cloak] { display: none !important; }

/* Paragraph & Blockquote */
p, blockquote { font-family: 'Outfit', sans-serif; }

/* Force Outfit font for specific elements */
.button, .navbar, .form-control, .card-title { font-family: 'Outfit', sans-serif; }

/* === Toggle Switch === */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.toggle-checkbox { display: none; }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #0A0A0A; /* Off state: brand.dark */
    transition: 0.4s;
    border-radius: 25px;
}

.toggle-checkbox:checked + .toggle-slider {
    background-color: #0046AD; /* On state: brand.blue */
}

.toggle-checkbox:checked + .toggle-slider:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2.5px;
    bottom: 2.5px;
    background-color: white;
    border-radius: 50%;
    transform: translateX(25px);
    transition: 0.4s;
}

/* === Custom Box === */
.custom-box {
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background-color: #0046AD; /* brand.blue */
    border-radius: 5px;
    color: white;
    padding: 5px;
    position: relative;
    border-bottom: 2px solid #F5B800; /* brand.gold line */
}

.custom-box .arrow-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    transition: transform 0.2s;
}

.custom-box.collapsed .arrow-icon { transform: rotate(180deg); }
.custom-box.collapsed .content { display: none; }
.content { display: block; }

/* === Buttons === */
.btn-brand {
    background-color: #0046AD; /* brand.blue */
    color: white;
}

.btn-brand:hover {
    background-color: #F5B800; /* brand.gold */
    color: #0A0A0A; /* text: brand.dark for contrast */
}