@font-face {
    font-family: Windlass;
    src: url(../fonts/Windlass.ttf) format("truetype");
}

@font-face {
    font-family: Windlass-Thin;
    src: url(../fonts/windlass.woff) format("woff");
}

@font-face {
    font-family: BrushTipTexe;
    src: url(../fonts/BrushTipTexe.otf) format("opentype");
}

@font-face {
    font-family: Manuskript;
    src: url(../fonts/manuskript-regular.woff) format("woff");
}

@font-face {
    font-family: Burlesk;
    src: url(../fonts/Burlesk-Regular.woff) format("woff");
}

/* Variables */
:root{
    --sr-brand-color: #fdf5ed;
    --sr-hover-color: #449aff;
    --sr-header-color: #ffb444;
}

body{
    font-family: 'Windlass-Thin', serif;
    background: url(../img/sea-of-thieves-bg.png) center center / cover;
    user-select: none;
    color: #e5dcca;
    height: 100vh;
 }

/* Utility */
.f-windlass{
    font-family: 'Windlass', serif;
}

.f-burlesk{
    font-family: 'Burlesk', serif;
}

.f-manuskirpt{
    font-family: 'Manuskript', serif;
}

.bg-sot {
    background: url(../img/sea-of-thieves-bg.png) center center / cover;
}

.text-white {
    color: #e5dcca!important;
}

.parchment{
    /*background: #ffefc3 url(../img/paper-fibers.png);*/
    background: #d1b977 url(../img/paper-fibers.png);
    color: #3b2f1e!important;
    border: 2px solid #c1a54e;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    border-radius: 0;
    padding: 1rem;
}

.btm-border{
    border-bottom: 1px solid#3b2f1e;
}

.clip-path, .toast{
    clip-path: polygon(
            56.56% 3.64%, 2.37% 0%, 0.96% 18.42%, 3.27% 19.55%, 0.03% 26.20%, 1.98% 70.01%, 0.63% 81.06%,
            3.49% 85.94%, 1.03% 91.70%, 0% 99.10%, 6.75% 99.85%, 11.96% 99.97%, 22.88% 97.84%,
            36.57% 98.36%, 89.71% 99.20%, 93.28% 99.20%,
            99.61% 98.36%, 99.02% 94.25%, 97.42% 80.29%, 96.05% 78.28%, 97.02% 75.80%,
            98.97% 32.60%, 97.29% 25.20%, 100% 22.18%, 99.45% 1.13%, 85.41% 1.38%, 56.56% 3.64%
    );
}

.overlay-box{
    background: url(../img/overlay-box.svg) no-repeat 100% 100% / 100% 100%,
    url(../img/overlay-box-bg.svg) no-repeat 100% 100% / 100% 100%;
}

/* Toastr Re-Style */
.toast-container{
    background-image: url(../img/paper-fibers.png);
}

#toast-container>div {
    padding: 10px 15px 10px 15px;
}

.toast-error{
    text-align: center;
    background-color: #a74138;
    color: #e5dcca;
    border: 2px solid #d92d2d;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    background-image: none!important;
}

.toast-success{
    text-align: center;
    background-color: #33cd84;
    color: #212121!important;
    border: 2px solid #2ffd9d;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);

}
#toast-container>.toast-success, #toast-container>.toast-error{
    background-image: none!important;
}

/* Crew Container */
.crew-container{
    background: #ffefc3 url(../img/paper-fibers.png);
    color: rgba(59, 47, 30, 0.42) !important;
    border: 2px solid #c2b280;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 1rem;
    min-height: 68px;
    border-radius: 2px;
}

/* Member List */
.member-list {
    max-height: 300px;
    overflow-y: auto;
    flex-wrap: wrap;
}

.crew-member, .queued-user, .member-item{
    cursor: move;
}

/* Text Input */
input[type="text"], input[type="number"], select, select:focus{
    text-align: center;
    color: #c2b280!important;
}
input[type="text"]::placeholder, input[type="number"]::placeholder, select::placeholder{
    text-align: center;
    color: #c2b280;
}

.form-control:focus {
    border-color: #33cd84;
    box-shadow: 0 0 0 2rem rgb(51, 205, 132);
}

/* Hide default checkbox */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

/* Custom checkbox styling */
.custom-checkbox .checkmark {
    display: inline-block;
    width: 32px;           /* make it visible */
    height: 32px;          /* adjust to your image size */
    background-image: url('../img/times.webp'); /* default unchecked */
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Checked state */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
    background-image: url('../img/check.webp'); /* checked */
}

/* Remove Modal Borders */
.modal-footer, .modal-header {
    border: none;
}

/* Select Dropdown */
.form-select {
    padding: 0.375rem 2.25rem .375rem 2.25rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #806641 !important;

}

::-webkit-scrollbar-thumb:hover {
    background-color: #806641 !important;
}

/* Loading Spinner */
#overlaySpinner {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;               /* keep flex for centering */
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease;
}

#overlaySpinner.active {
    opacity: 1;
    visibility: visible;
}

.helm-spinner {
    width: 160px;
    height: 160px;
    animation: spinHelm 2s linear infinite;
}

@keyframes spinHelm {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Buttons */
.btn{
    border-radius: 0;
    font-family: 'Windlass', serif;
}

.btn::before::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../img/paper-fibers.png') center/cover no-repeat;
    opacity: 0.2; /* desired opacity */
    z-index: -1;  /* behind content */
}

.btn-red{
    background-color: #a74138;
    color: #e5dcca;
    transition: background-color ease-in-out 250ms;
}

.btn-red:hover{
    background-color: #933a32;
    color: #c6bcb0;
}

.btn-red:disabled {
    background-color: #b84b45;
    color: #dbc0b0;
    cursor: not-allowed;
}

.btn-green{
    background-color: #33cd84;
    color: #212121;
    transition: background-color ease-in-out 250ms;
}

.btn-green:hover{
    background-color: #30a86e;
    color: #363636;
}

.btn-green:disabled {
    background-color: #55bb8a;
    color: #575656;
    cursor: not-allowed;
}

.btn-blue{
    background-color: #33a1cd;
    color: #212121;
    transition: background-color ease-in-out 250ms;
}

.btn-blue:hover{
    background-color: #2980a0;
    color: #363636;
}

.btn-blue:disabled {
    background-color: #3f9ac6;
    color: #575656;
    cursor: not-allowed;
}

.text-yellow{
    color: #cd9533;
}

.btn-yellow{
    background-color: #cd9533;
    color: #212121;
    transition: background-color ease-in-out 250ms;
}

.btn-yellow:hover{
    background-color: #ad832d;
    color: #363636;
}

.btn-yellow:disabled {
    background-color: #c19135;
    color: #575656;
    cursor: not-allowed;
}

.btn-purple{
    background-color: #6633cd;
    color: #d5d5d5;
    transition: background-color ease-in-out 250ms;
}

.btn-purple:hover{
    background-color: #6031bd;
    color: #bab9b9;
}

.btn-purple:disabled {
    background-color: #5227a6;
    color: #8a8a8a;
    cursor: not-allowed;
}

.btn-red:disabled:hover,
.btn-green:disabled:hover,
.btn-blue:disabled:hover,
.btn-yellow:disabled:hover {
    background-color: inherit;
    color: inherit;
}

footer {
    padding: 1rem 0;
    text-align: center;
    color: #fdf5ed;
}

.gold-text {
    background: linear-gradient(90deg, #FFB444FF, #FF6818FF, #FFB444FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-shadow: 0 0 1px #FFB444FF, 0 0 5px #FF6818FF;
}

.gold-shadow{
    text-shadow: 0 0 1px #FFB444FF, 0 0 5px #FF6818FF;
}

.text-gradient {
    background: linear-gradient(to right, #FFB444FF, #FF6818FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for non-WebKit browsers */
    color: transparent;
}

.accordion-button {
    color: #e5dcca;
}

.accordion-button:not(.collapsed), .text-yellow {
    color: #FFB444FF;
}


.accordion-button:focus {
    box-shadow: 0 0 1px #FFB444FF, 0 0 5px #FF6818FF;
}

.accordion-button::after {
    filter: invert(42%) sepia(87%) saturate(100%) hue-rotate(0deg);
}

.accordion-button:not(.collapsed)::after {
    filter: invert(42%) sepia(87%) saturate(746%) hue-rotate(0deg);
}

.bg-red{
    background-color: #a74138;
    color: #e5dcca;
}

.bg-yellow {
    background-color: #cd9533;
    color: #212121;
}

.bg-green {
    background-color: #33cd84;
    color: #212121;
}

.bg-gradient {
    background: linear-gradient(90deg, #FFB444, #FF6818, #FFB444);
    color: #111111;
}

.text-muted {
    color: #a5a197!important;
}

.btn-gradient{
    background: linear-gradient(90deg, #FFB444FF, #FF6818FF, #FFB444FF);
    color: #111111;
    transition: background-color ease-in-out 250ms;
}

.btn-gradient:hover{
    background: linear-gradient(90deg, #d9993a, #d05818, #e3a13e);
    color: #000000;
}