/* ===========================
   chibi-artwork PREVIEW
=========================== */

.chibi-artwork-preview {

    display:flex;

    justify-content:center;

    padding:70px 40px;

    animation:
        cardPop .45s cubic-bezier(.34,1.56,.64,1);

}



/* ===========================
   WOOD MENU BACKING
=========================== */

.chibi-artwork-menu {

    width:min(650px, 90%);

    padding:45px;

    background:#7A5031;

    border-radius:28px;

    position:relative;

    overflow:hidden;



    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04) 5px,
            transparent 12px,
            rgba(0,0,0,.06) 20px
        );

}



/* ===========================
   PAPER INSERT
=========================== */

.chibi-artwork-menu::before {

    content:"";

    position:absolute;

    inset:20px;

    background:#FFF8E6;

    border-radius:22px;

    z-index:0;

}


/* ==========================
   CONTENT
========================== */
.chibi-artwork-title,
.chibi-artwork-subtitle,
.panel-content {

    position: relative;
    z-index: 1;

}

.panel-content{

    display:flex;
    flex-direction:column;
    gap:40px;
    z-index: 10;

}

/* ===========================
   TITLE
=========================== */

.chibi-artwork-title {

    text-align:center;

    margin-top:10px;

    font-family:var(--heading-font);

    font-size:1.6rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#5D3516;

}



.chibi-artwork-title span {

    color:#B96A59;

}



.chibi-artwork-subtitle {

    text-align:center;

    margin: 3px 0 0px;


    color:#80502B;

    font-size:.95rem;

}


/* ==========================
   TABLE
========================== */

.commission-table{

    overflow:hidden;

    border-radius:18px;

    border:2px solid var(--checker-dark);


}

/* ==========================
   HEADER
========================== */

.table-header{

    display:grid;

    grid-template-columns:
        60px
        1fr
        100px
        140px
        70px;

    align-items:center;

    background:var(--checker-dark);

    color:var(--cream);
    font-family: "Fredoka", sans-serif;

    font-weight:700;

    padding:18px;

}

.table-header span {
    font-family:var(--heading-font);
}

/* ==========================
   ROWS
========================== */

.table-row{

    display:grid;

    grid-template-columns:
        60px
        1fr
        100px
        140px
        70px;

    align-items:center;

    padding:16px 18px;

    cursor:pointer;

    transition:.2s;


}

.table-row span:first-child{
    opacity: .55;
    font-size: 12px;
}

/* zebra */

.table-row:nth-child(even){

    background:var(--cream);

}

.table-row:nth-child(odd){

    background:(--cream);

}

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

.table-row span{

    color:var(--brown-dark);

}

/* ==========================
   RADIO
========================== */

.table-row input{

    appearance:none;

    width:22px;
    height:22px;

    border:2px solid var(--brown);

    border-radius:50%;

    background:var(--cream);

    cursor:pointer;

    display:grid;
    place-items:center;

    transition:.2s;

}

/* Inner circle */

.table-row input::before{

    content:"";

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--orange-dark);

    transform:scale(0);

    transition:transform .2s ease;

}

/* Checked */

.table-row input:checked{

    border-color:var(--orange-dark);

}

.table-row input:checked::before{

    transform:scale(1);

}

/* ==========================
   SELECTED ROW
========================== */

.table-row:has(input:checked){

    background:#ffecd0;

}


/* ==========================
   SECTIONS
========================== */

.form-section{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.form-section h3{

    display:flex;
    align-items:center;
    gap:16px;

    color:var(--brown-dark);

    font-family:var(--heading-font);

    font-size:1.2rem;

    letter-spacing:.08em;

}

.form-section h3::before,
.form-section h3::after{

    content:"";

    flex:1;

    height:2px;

    background: var(--cream);

}

.form-section h3::after{

    background: var(--cream);

}

.form-section:first-child{

    margin-bottom:0;

}

.form-section h3 {
margin-top: 20px;
}

/* ==========================
   SAMPLE GRID
========================== */

.sample-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;

}

.sample-grid img{

    width:100%;
    aspect-ratio:1;
    object-fit:cover;

    border-radius:14px;

}

/* ==========================
   OPTION CARDS
========================== */

.option-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;

}

.option-card{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px;

    border:2px solid #D4B08B;
    border-radius:16px;

    cursor:pointer;

    transition:.25s;

}

.option-card:hover{

    background:#fae8ce;

}

.option-card input{

    display:none;

}

.option-card span{

    color:#80502B;
    font-weight:600;

}

/* ==========================
   CHECKBOXES
========================== */

.checkbox-grid{

    display:grid;
    gap:12px;

}

.checkbox-grid label{

    display:flex;
    gap:10px;
    align-items:center;

    color:#80502B;

}

/* ==========================
   INPUTS
========================== */

.form-grid{

    display:grid;
    gap:16px;

}

input[type=text],
input[type=email],
input[type=file],
textarea{

    width:100%;

    padding:14px 16px;

    border:none;
    border-radius:12px;

    background:white;

    color:#5D3516;

    font-size:.95rem;

}

textarea{

    resize:vertical;
    min-height:160px;

}


/* ==========================
   UPLOAD BOX
========================== */

.upload-box{

    display:block;

    cursor:pointer;

}

.upload-box input{

    display:none;

}

.upload-content{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:180px;

    padding:30px;

    border:3px dashed var(--checker-light);
    border-radius:20px;

    background:var(--cream);

    transition:.25s;

}

.upload-content:hover{

    border-color:var(--orange-dark);

    background:#FFF4DD;

}

.upload-content h4{

    margin:0;

    color:var(--brown-dark);

    font-family:var(--heading-font);

}

.upload-content p{

    margin:0;

    color:var(--brown);

    text-align:center;

    font-size:.9rem;

}


/* ==========================
   UPLOAD ICON
========================== */

.upload-icon{

    display:flex;
    align-items:center;
    justify-content:center;

}

.upload-icon img{

    width:80px;
    height:80px;

    object-fit:contain;

    transition:.25s ease;

}

.upload-content:hover .upload-icon img{

    animation:nachoBounce .45s ease;

}

@keyframes nachoBounce{

    0%{

        transform:
            translateY(0)
            rotate(0);

    }

    30%{

        transform:
            translateY(-10px);

    }

    60%{

        transform:
            translateY(2px);

    }

    100%{

        transform:
            translateY(0);

    }

}


/* ==========================
   comms-divider
========================== */

.comms-divider{

    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:16px;

}

.comms-divider::before,
.comms-divider::after{

    content:"";

    flex:1;

    height:2px;

    background:var(--orange-light);

}

.comms-divider span{

    color:var(--brown);

    font-weight:600;

    font-size:.9rem;

}

/* ==========================
   TEXTAREA
========================== */

textarea{

    min-height:180px;

    padding:18px;

    border-radius:16px;

    background: white;

    color:var(--brown-dark);

    resize:vertical;

}

textarea:focus{

    outline:none;

}

textarea::placeholder {
    color: #5D3516;
    opacity: 0.45;
}

input::placeholder {
    color: var(--brown-dark);
    opacity: .55;
    font-family: var(--body-font);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {

    -webkit-text-fill-color: var(--brown-dark);

    -webkit-box-shadow: 
        0 0 0px 1000px white inset;

    transition: background-color 5000s ease-in-out 0s;

}


/* ==========================
   BUTTON
========================== */

.submit-button{

    padding:18px;

    border:none;
    border-radius:16px;

    background:#B96A59;

    color:white;

    font-size:1rem;
    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.submit-button:hover{

    transform:translateY(-2px);

    background:#A95B4A;

}