.btn-sq-primary {
    color: #fff; /* Dark text for contrast */
    padding: 6px 16px; /* Adjust padding for a balanced square look */
    border-radius: 4px; /* Slight rounding */
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    border: none;
}

.btn-sq-primary:hover,
.btn-sq-primary.active {
    color: #212529; /* Dark text for contrast */
    background-color: #bdab73;
    box-shadow: 0 0 16px #00000040;
}

.btn-sq-secondary {
    color: black !important; /* Dark text for contrast */
    padding: 10px 16px; /* Adjust padding for a balanced square look */
    border-radius: 4px; /* Slight rounding */
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    border: 1px solid #174a75 !important;
}

.btn-sq-secondary.active {
    background-color: #174a75 !important;
}

.btn-sq-secondary.active {
    color: white !important;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

.btn-sq-secondary:hover
 {
    border-radius: var(--border-radius-full, 100px) !important;
    border: 1px solid var(--border-brand, #bdab73) !important;
    background: var(--surface-secondary, #ebe8e3) !important;

    /* elevation/4 */
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

.btn-sq-ghost {
    border-radius: var(--border-radius-full, 100px);
    border: 1px solid var(--border-secondary, #B2AEA8);
    color: black; /* Dark text for contrast */
    padding: 5px 16px; /* Adjust padding for a balanced square look */
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.btn-sq-ghost:hover,
.btn-sq-ghost.active {
    border-color: #bdab73;
    background-color: #00000010;
    box-shadow: 0 0 16px #00000010;
}

.btn-sq-tertiary {
    padding: var(--spacing-4, 12px) var(--spacing-5, 16px);
    border: 1px solid var(--border-secondary, #b2aea8);
}

.btn-sq-tertiary:hover {
    border: 1px solid var(--border-brand, #bdab73);
    background: var(--surface-secondary, #ebe8e3);
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

.btn-sq-tertiary:focus {
    border: 1px solid var(--border-brand, #bdab73);
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

.btn-sq-tertiary:active {
    border: 1px solid var(--border-secondary, #b2aea8);
}

.btn-sq-tertiary:disabled {
    border: 1px solid var(--border-secondary, #b2aea8);
}

.btn-outline-sq-primary {
    --bs-btn-color: #174a75;
    --bs-btn-border-color: #174a75;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #174a75;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #174a75;
    --bs-btn-active-border-color: #174a75;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #174a75;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #174a75;
    --bs-gradient: none;
}

.btn-outline-sq-primary:hover,
.btn-outline-sq-primary:focus {
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

.form-control-sq {
    border-radius: 8px;
    border: 2px solid #b2aea8;
    background: #fff;
    padding: 10px;
}

.form-select-sq {
    border-radius: 8px;
    border: 2px solid #b2aea8;
    padding: 10px;
}

.form-control-sq::placeholder {
    color: #000000;
}

.form-control-sq:focus,
.form-select-sq:focus {
    border: 2px solid #bdab73;
    box-shadow: none;
}

.btn-sq-primary-fill {
    color: #212529;
    background-color: #bdab73;
    padding: 10px 16px;
    transition: all 0.2s ease-in-out;
    border: none;
}

.btn-sq-primary-fill:hover,
.btn-sq-primary-fill.active {
    color: #212529;
    background-color: #bdab73;
    box-shadow: 0 0 16px #00000040;
}

.form-check-input:checked {
    background-color: #bdab73;
    border-color: #bdab73;
}

.btn-outline-sq-gold {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #BDAB73;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #BDAB73;
    --bs-btn-hover-border-color: #d1b768;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #174a75;
    --bs-btn-active-border-color: #BDAB73;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #BDAB73;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #BDAB73;
    --bs-gradient: none;
    --bs-btn-bg: #BDAB73;
}

.btn-outline-sq-gold:hover,
.btn-outline-sq-gold:focus {
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}
