/* =====================================================
   TAB PANELS
   Hide every panel by default.
===================================================== */

.tab-panel {

    display: none;

}

/* Show only the active panel */

.tab-panel.active {

    display: block;

}

.tab-panel ul {
    color:#80502B;
}

/* ===========================
   COMMISSION PREVIEW
=========================== */

.commission-preview {

    display:flex;

    justify-content:center;

    padding:70px 40px;

}



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

.commission-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
        );

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



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

.commission-menu::before {

    content:"";

    position:absolute;

    inset:20px;

    background:#FFF8E6;

    border-radius:22px;

    z-index:0;

}



.menu-title,
.menu-subtitle,
.menu-list,
.commission-content,
.tab-panel {

    position:relative;

    z-index:4;

}


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

.menu-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;

}



.menu-title span {

    color:#B96A59;

}



.menu-subtitle {

    text-align:center;

    margin: 3px 0 40px;


    color:#80502B;

    font-size:.95rem;

}



/* ===========================
   MENU LIST
=========================== */

.menu-list {

    display:flex;

    flex-direction:column;

    gap:20px;

}



/* ===========================
   MENU ENTRY
=========================== */

.menu-entry {

    display:grid;

    grid-template-columns:120px 1fr 50px;

    gap:24px;

    align-items:center;

    padding:2px 10px;


    transition:.25s ease;

}


.menu-entry:hover {

    transform:translateX(4px);

}

.menu-entry.active .arrow-wrapper {

    transform:rotate(90deg);

}


/* IMAGE AREA */

.menu-thumbnail {

    position:relative;

}


.menu-image {

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:16px;

    border:4px solid #FFF8E6;

}

.menu-details p {
color: #80502B;
}

/* PRICE TAG */

.menu-price {

    position:absolute;

    top:-8px;

    left:-8px;


    background:#B96A59;

    color:#FFF8E6;


    padding:6px 12px;

    border-radius:999px;


    font-size:.8rem;

    font-weight:700;

    box-shadow:
        0 4px 10px rgba(0,0,0,.15);

}



/* ARROW */

.menu-action {

    display:flex;

    justify-content:center;

}


.arrow-wrapper {

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;

    background:#B96A59;

    transition:.25s ease, transform .3s ease;
        

}


.menu-arrow {

    width:18px;

    height:18px;

    filter:brightness(0) invert(1);

}


.menu-entry:hover .arrow-wrapper {

    transform:translateX(4px);


}

/* ===========================
   SUBMENU
=========================== */

.submenu {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease;

}

.submenu.open {

    max-height: 800px;

    opacity: 1;

}



.submenu-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;

    margin:1px 0 12px;

    padding:18px;

    border-radius:18px;

}


.submenu-card {

    padding:14px;

    border-radius:14px;

    transition:.25s ease;

    cursor:pointer;

    text-align: center;

}

.submenu-card:hover {

    transform:translateY(-3px);

}

/* ===========================
   SUBMENU ITEMS
=========================== */

.submenu-item {

    padding: 14px;

    border-radius: 14px;

    cursor: pointer;

    transition: .25s ease;

}

.submenu-item:hover {

    transform: translateY(-2px);

}

.submenu-card img {

    width:120px;
    height:120px;

    object-fit:cover;

    border-radius:14px;

}


.submenu-card span {

    text-align:center;
    color: #80502B;
}


/* ===========================
   commission-bookmarks
=========================== */

.commission-bookmarks {

    position: absolute;
    right: 560px;
    top: 200px;

    gap: 5px;

    display: flex;
    flex-direction: column;

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

}

.commission-bookmarks {

    transform-origin: left center;

}


/* ===========================
   CLOSE commission-bookmark
=========================== */

.store-close-commission-bookmark{

    position:absolute;

    top:80px;
    right:-70px;

    width:90px;
    height:140px;

    border:none;

    border-radius:
        0 18px 18px 0;

    background:#b45d5d;

    color:#FFF8E6;

    font-size:1.4rem;

    font-weight:700;

    cursor:pointer;

    display:flex;

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

    writing-mode:vertical-rl;

    box-shadow:
        4px 6px 12px rgba(93,53,22,.2);

    transition:.2s ease;

}


.store-close-commission-bookmark:hover{

    transform:translateX(8px);

}

.commission-bookmark{

    width:120px;

    padding:12px;

    border:none;

    border-radius:0 12px 12px 0;

    font:inherit;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    color:#FFF8E6;


}


.commission-bookmark:hover{

    transform:translateX(8px);

}


.commission-bookmark.active{

    transform:translateX(10px);

    color:#FFF8E6;

}


.commission-bookmark:nth-child(1){background:#B96A59;color:#FFF8E6;}
.commission-bookmark:nth-child(2){background:#6B7FA3;}
.commission-bookmark:nth-child(3){background:#C98B55;}
.commission-bookmark:nth-child(4){background:#8A6B9B;}


/* ===========================
   COMMISSION INFO TEXT
=========================== */

.info-content {

    color:#5D3516;

    font-size:.95rem;

    line-height:1.7;

    
}



/* Paragraph */

.info-content p {

    margin-bottom:20px;

    color:#80502B;

}



/* List */

.info-content ul {

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:12px;

}



/* List items */

.info-content li {

    background:#F5E6CC;

    padding:12px 16px;

    border-radius:12px;

    border-left:5px solid #B96A59;

    box-shadow:
        0 3px 8px rgba(93,53,22,.12);

}