:root{
--page-back-color:#f5f4f1;
--container-back-color:#ffffff;
--panel:#ffffff;
--panel2:#fafafa;
--text:#2b2b2b;
--orange:#ef6b2e;
--orange-dark:#b94d1c;
--orange-light:#ff9a63;
--shadow:rgba(0,0,0,.12);
}

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color:#f5f4f1;
    overflow-y: auto;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family:'Montserrat',Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    background:#f5f4f1;
    overflow-y: auto;
}


.container {
    width:100%;
    max-width:800px;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
    text-align:center;
    overflow:hidden;
    background:transparent;
}



.banner {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    margin-bottom:0;
    box-sizing:border-box;
}


img {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}



.header {
    margin-top:6px;
    width:100%;
    overflow:hidden;
    background:#ffffff;
    border:2px solid #d85b2a;
    box-sizing:border-box;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}




#ScrollingBanner {
    margin:0;
    padding:10px 0;
    overflow:hidden;
    white-space:nowrap;
    text-align:left;
    line-height:40px;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:28px;
    font-weight:800;
    letter-spacing:.5px;
    color:#d85b2a;
    background:transparent;
    border:none;
    text-shadow:0 2px 5px rgba(110,110,110,.28);
    user-select:none;
}


.main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 18px 20px 22px 20px;
    box-sizing: border-box;
    background:#f5f4f1;
}

.styled-button {
    width: 100%;
    margin-top: 18px;
    background:#ffffff;
    color:#333;
    border:2px solid var(--orange);
    padding: 12px 0;
    box-sizing: border-box;
    font-family:'Montserrat',Arial,sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.8px;
    cursor: default;
    border-radius: 10px;
    text-align: center;
    text-transform: none;
    box-shadow:0 10px 28px rgba(0,0,0,.10);
    text-shadow:none;
}

.custom {
    background:#ffffff;
    color: var(--hot-button-fore-color);
    border: 2px solid var(--hot-button-border-color);
    cursor: pointer;
    transition: all 0.22s ease-in-out;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    text-shadow:none;
}

    .custom:hover {
        background:#fff7f3;
        color:#222;
        border-color: var(--command-gold-light);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 225, 160, 0.30), 0 0 20px rgba(102, 216, 255, 0.38);
        transform: translateY(-2px);
    }

    .custom:active {
        transform: translateY(1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.58), inset 0 2px 5px rgba(0, 0, 0, 0.40);
    }

.button-container {
    margin-bottom: 20px;
}

.scroll {
    padding-left: 50px;
    padding-right: 50px;
}

/* Browser scrollbar styling */
::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    background: #f5f4f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ef6b2e 0%, #ef6b2e 46%, #8f5b16 100%);
    border: 3px solid #f5f4f1;
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #ffffff 0%, #ef6b2e 38%, #ef6b2e 100%);
    }

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #ef6b2e #f5f4f1;
}

@media (max-width: 600px) {
    .main {
        padding-left: 14px;
        padding-right: 14px;
    }

    
#ScrollingBanner {
    margin:0;
    padding:10px 0;
    overflow:hidden;
    white-space:nowrap;
    text-align:left;
    line-height:40px;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:28px;
    font-weight:800;
    letter-spacing:.5px;
    color:#d85b2a;
    background:transparent;
    border:none;
    text-shadow:0 2px 5px rgba(110,110,110,.28);
    user-select:none;
}


    .styled-button {
        font-size: 22px;
        letter-spacing: 0.6px;
        padding: 11px 0;
    }
}



/* ---------- Custom Modal ---------- */

.custom-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    padding:20px;
    background:rgba(0,0,0,.55);
    align-items:center;
    justify-content:center;
    overflow-y:auto;
}

.custom-modal.show{
    display:flex;
}

.custom-modal-dialog{
    width:min(760px,100%);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    background:#ffffff;
    color:#333333;
    border:2px solid #d85b2a;
    border-radius:12px;
    padding:28px;
    box-sizing:border-box;
    position:relative;
    box-shadow:0 15px 50px rgba(0,0,0,.30);
    font-family:'Montserrat',Arial,sans-serif;
    animation:modalPop .20s ease-out;
}

.custom-modal-close{
    position:sticky;
    top:0;
    float:right;
    width:40px;
    height:40px;
    border:none;
    background:#ffffff;
    color:#d85b2a;
    font-size:34px;
    font-weight:700;
    cursor:pointer;
    z-index:5;
}

.custom-modal-dialog::-webkit-scrollbar{
    width:12px;
}
.custom-modal-dialog::-webkit-scrollbar-track{
    background:#f5f4f1;
}
.custom-modal-dialog::-webkit-scrollbar-thumb{
    background:#d85b2a;
    border-radius:999px;
}
.custom-modal-dialog::-webkit-scrollbar-thumb:hover{
    background:#ef6b2e;
}

@keyframes modalPop{
    from{opacity:0;transform:scale(.97);}
    to{opacity:1;transform:scale(1);}
}

to{opacity:1;transform:scale(1);}
}



.styled-button,
.custom{
    border:2px solid #d85b2a !important;
    border-radius:16px;
    background:#ffffff !important;
    color:#d85b2a !important;
    font-family:'Montserrat',Arial,sans-serif;
    font-weight:700;
}


.styled-button:hover,
.custom:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0,0,0,.14);
    border-top-color:#ef6b2e !important;
}

body,.main{
    background:#f5f4f1 !important;
}

.custom-modal-dialog{
    background:#fff;
    color:#333;
    border:2px solid #d85b2a;
    font-family:'Montserrat',Arial,sans-serif;
}


/* ===== Budjitsu Button Theme Overrides ===== */

.styled-button{
    background:#ffffff !important;
    color:#d85b2a !important;
    border:2px solid #d85b2a !important;
}

.custom{
    background:#d85b2a !important;
    color:#ffffff !important;
    border:2px solid #d85b2a !important;
}

.custom:hover{
    background:#ef6b2e !important;
    color:#ffffff !important;
    border-color:#ef6b2e !important;
}

.styled-button:hover{
    background:#fff7f2 !important;
    color:#b94d1c !important;
    border-color:#ef6b2e !important;
}



.header {
    margin-top:6px;
    width:100%;
    overflow:hidden;
    background:#ffffff;
    border:2px solid #d85b2a;
    box-sizing:border-box;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}