/* ======================================
CATEGORY - TOS [START]
====================================== */

.tos-content {

    width:800px;
    max-width:100%;

    margin:0 auto;

    margin-top: 100px;
}

/* ==================================================
TERMS OF SERVICE HEADER
================================================== */


.tos-header {

width:800px;

min-height:180px;

margin:0 0 30px;

display:grid;

grid-template-columns:220px minmax(0,1fr);

align-items:stretch;

border:1px solid rgba(0,0,0,.1);

border-radius:10px;

background:#1c1c1c;

color:white;

font-family:"Poppins",sans-serif;

overflow:hidden;

}



/* ==================================================
IMAGE
================================================== */


.tos-header-image {

position:relative;

width:100%;

min-height:180px;

display:flex;

justify-content:center;

align-items:center;

background:#1c1c1c;

overflow:visible;

}


.tos-header-image img {

width:100%;

height:100%;

display:block;

object-fit:cover;

}



/* ==================================================
INFORMATION
================================================== */


.tos-header-info {

min-width:0;

display:flex;

flex-direction:column;

justify-content:center;

padding:25px 30px;

}



.tos-header-label {

margin-bottom:6px;

font-size:.55rem;

font-weight:600;

letter-spacing:.2em;

opacity:.45;

}



.tos-header-title {

margin:0;

font-size:clamp(1.3rem,2.5vw,2rem);

font-weight:700;

letter-spacing:.12em;

line-height:1.1;

}



/* ==================================================
STATUS LIST
================================================== */


.tos-header-status-list {

width:100%;

margin-top:20px;

display:flex;

flex-direction:column;

gap:8px;

}



.tos-header-status {

width:100%;

display:flex;

align-items:center;

gap:12px;

font-size:.7rem;

}



.tos-header-status-name {

white-space:nowrap;

}





.tos-header-status-value {

white-space:nowrap;

font-size:.6rem;

font-weight:700;

letter-spacing:.12em;

opacity: 0.60;

}


/* ==================================================
TOS DASHBOARD
================================================== */

.tos-dashboard {

    width:100%;

    display:grid;

    grid-template-columns:220px minmax(0,1fr);

    border:1px solid rgba(0,0,0,.1);

    border-radius:10px;

    overflow:hidden;

    background:white;

    font-family:"Poppins",sans-serif;

}


/* =========================
NAVIGATION
========================= */


.tos-nav {

    background:#1c1c1c;

    padding:15px;

    display:flex;

    flex-direction:column;

    gap:8px;

}


.tos-nav-item {

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px;

    border:none;

    background:none;

    color:white;

    font-family:"Poppins",sans-serif;

    font-size:16px;

    text-align:left;

    cursor:pointer;

    border-radius:6px;

    transition:.2s ease;

}


.tos-nav-item span {

    opacity:.45;

    font-size:13px;

    letter-spacing:.15em;

}


.tos-nav-item:hover {

    background:rgba(255,255,255,.08);

}


.tos-nav-item.active {

    background:white;

    color:#111;

}


/* =========================
CONTENT AREA
========================= */


.tos-panel-area {

    padding:40px;

    min-height:500px;

}


.tos-panel {

    display:none;

    animation:tosFade .2s ease;

}


.tos-panel.active {

    display:block;

}


@keyframes tosFade {

from {

    opacity:0;

    transform:translateY(5px);

}

to {

    opacity:1;

    transform:none;

}

}



/* =========================
HEADINGS
========================= */


.tos-panel h2 {

    margin:0 0 15px;
    margin-bottom: 0px;
    font-size:1.3rem;

    font-weight:700;

    letter-spacing:.15em;

}


.tos-panel h3 {

    margin-top:35px;

    margin-bottom:0px;

    font-size:1.1rem;

    letter-spacing:.1em;

    text-transform:uppercase;

}

.section-number {
    margin-right: 12px;
    opacity: 0.5;
}

/* =========================
TEXT
========================= */


.tos-panel p {

    max-width:650px;

    font-size:16px;

    opacity:.65;

    line-height:1.7;

    margin-bottom: 10px;

}



/* =========================
LIST DOCUMENT STYLE
========================= */


.tos-list {

    margin:10px 0 0;

    padding-left:20px;

    max-width:700px;

}


.tos-list li {

    position:relative;

    padding-left:8px;

    margin-bottom:14px;

    font-size:16px;

    line-height:1.8;

    opacity:.75;

}


.tos-list li::marker {

    color:#111;

}


.art-process  {
margin-top: 0px;
}

/* =========================
MOBILE
========================= */


@media(max-width:800px){


.tos-dashboard {

    grid-template-columns:1fr;

}


.tos-nav {

    flex-direction:row;

    overflow-x:auto;

}


.tos-nav-item {

    min-width:max-content;

}


.tos-panel-area {

    padding:25px;

}


}