/* =========================================================
   UNLOCKED ARTWORK WORKSPACE
========================================================= */
.artwork-workspace,
.artwork-workspace *,

.brief-workspace,
.brief-workspace *{

    font-family:
    'Montserrat',
    sans-serif;
}
.artwork-workspace {

    --main-color: #8B5CF6;
    --main-hover: #7C3AED;

    --light-bg: #FAF5FF;

    --border-color: #EEE7FF;

    --text-main: #1F2937;
    --text-soft: #94A3B8;

    --success-bg: #DCFCE7;
    --success-text: #15803D;

    --danger-bg: #FFF1F2;
    --danger-text: #EF4444;

    max-width: 1400px;

    margin: 0 auto;

    padding: 34px 20px 80px;

    min-height: 100vh;


}

/* =========================================================
   RESET
========================================================= */

.artwork-workspace * {

    box-sizing: border-box;
}

.artwork-workspace a {

    text-decoration: none !important;
}

.artwork-workspace button {

    border: none;
}

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

.artwork-workspace .workspace-header {

    margin-bottom: 40px;
    margin-left: 20px;
}


.artwork-workspace .workspace-header h1 {
    

    font-size: 35px;

    line-height: 1;

    font-weight: 700;

    color: #1F2937;

    margin-bottom: 10px;
}

.artwork-workspace .workspace-header p {

    font-size: 16px;

    color: #000000;

    margin: 0;
}

/* =========================================================
   LAYOUT
========================================================= */

.artwork-workspace .workspace-layout {

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 26px;

    align-items: start;
}

/* =========================================================
   SIDEBAR
========================================================= */

.artwork-workspace .workspace-sidebar {

    position: sticky;

    top: 30px;
}

.artwork-workspace .workspace-card {

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

    backdrop-filter: blur(12px);

    border-radius: 28px;

    padding: 28px;

    border: 1px solid rgba(139,92,246,.08);

    box-shadow:
    0 4px 20px rgba(124,58,237,.04);
}

.artwork-workspace .workspace-card h3 {

    font-size: 28px;

    font-weight: 700;

    color: var(--main-color);

    margin-bottom: 28px;
}

.artwork-workspace .meta-group {

    padding-bottom:28px;

    margin-bottom:28px;

    border-bottom:1px solid #F1F5F9;
}

.artwork-workspace .meta-group:last-child {

    padding-bottom:0;

    margin-bottom:0;

    border-bottom:none;
}

.artwork-workspace .meta-group label {

    display: block;

    font-size: 14px;

    color: #9CA3AF;

    margin-bottom: 10px;
}

.artwork-workspace .meta-group span {

    display: block;

    font-size: 16px;

    font-weight: 500;

    color: var(--text-main);

    line-height: 1.5;
}

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

.artwork-workspace .artwork-grid {

    display: flex;

    flex-direction: column;

    gap: 22px;
}

/* =========================================================
   CARD
========================================================= */

.artwork-workspace .artwork-card {

    background: rgba(255,255,255,.92);
    margin-bottom: 15px;

    border-radius: 28px;

    padding: 26px;

    border: 1px solid rgba(139,92,246,.08);

    box-shadow:
    0 4px 18px rgba(124,58,237,.04);

    transition: all .25s ease;
}

.artwork-workspace .artwork-card:hover {

    transform: translateY(-1px);

    box-shadow:
    0 10px 24px rgba(124,58,237,.08);
}

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

.artwork-workspace .artwork-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 22px;
}

.artwork-workspace .artwork-card-header h3 {

    margin: 0;

    font-size:28px;

    font-weight: 700;

    color: var(--main-color);
}

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

.artwork-workspace .status-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 12px 15px !important;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 500;

    line-height: 1;

    box-sizing: border-box;
    
    background: #F0FDF4;

    color: #15803D;
}

.artwork-workspace .status-dot {

    width: 14px;

    height: 14px;

    border-radius: 999px;

    background: #16A34A;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}

.artwork-workspace .status-dot svg {

    width: 11px;

    height: 11px;

    display: block;
}

/* =========================================================
   FILE CARD
========================================================= */

.artwork-workspace .uploaded-file-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 18px;

    border: 1px solid var(--border-color);

    border-radius: 24px;

    padding: 18px 20px;

    background: #fff;
}

.artwork-workspace .file-left {

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;
}

.artwork-workspace .file-side-box {

    width: 78px;

    height: 78px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 18px;

    font-weight: 800;

    color: #fff;
}

.artwork-workspace .file-side-box.front {

    background:
    linear-gradient(
        135deg,
        #8B5CF6,
        #A78BFA
    );
}

.artwork-workspace .file-side-box.back {

    background:
    linear-gradient(
        135deg,
        #A78BFA,
        #C4B5FD
    );
}

.artwork-workspace .file-info {

    min-width: 0;
}

.artwork-workspace .file-name {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 16px;

    font-weight: 600;

    color: var(--text-main);

    margin-bottom: 6px;

    flex-wrap: wrap;
}

.artwork-workspace .file-meta {

    font-size: 14px;

    color: var(--text-soft);

    font-weight: 600;
}

.artwork-workspace .file-ready {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 10px;

    border-radius: 999px;

    background: #DCFCE7;

    color: #15803D;

    font-size: 11px;

    font-weight: 800;
}

/* =========================================================
   ACTIONS
========================================================= */

.artwork-workspace .artwork-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}

/* =========================================================
   BUTTONS
========================================================= */

.artwork-workspace .btn-primary,
.artwork-workspace .btn-secondary,
.artwork-workspace .btn-danger {

    height: 52px;

    min-width: 100px;

    padding: 0 24px !important;

    border-radius: 16px !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    cursor: pointer;

    transition: all .25s ease;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    line-height: 1;

    flex-shrink: 0;
}

.artwork-workspace .btn-primary {

    border: 1px solid transparent;

    background:
    linear-gradient(
        135deg,
        #8B5CF6,
        #7C3AED
    ) !important;

    color: #fff !important;
}

.artwork-workspace .btn-primary:hover {

    transform: translateY(-1px);
}

.artwork-workspace .btn-secondary {

    background: #fff !important;

    color: #111827 !important;

    border: 1px solid #E5E7EB !important;
}

.artwork-workspace .btn-danger {

    border: 1px solid transparent;

    background: #FFF1F2 !important;

    color: #EF4444 !important;
}


/* =========================================================
   DROPZONE
========================================================= */

.artwork-workspace .replace-dropzone {

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px dashed #D8B4FE;

    border-radius: 24px;

    padding: 30px 20px;

    margin-top: 18px;

    background: #FCFAFF;

    transition: all .25s ease;
}

.artwork-workspace .replace-dropzone:hover {

    background: #FAF5FF;

    border-color: #8B5CF6;
}

.artwork-workspace .replace-dropzone-inner {

    text-align: center;
}

.artwork-workspace .replace-icon {

    color: #8B5CF6;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.artwork-workspace .replace-title {

    font-size: 18px;

    font-weight: 700;

    color: #7C3AED;

}

.artwork-workspace .replace-subtitle {

    font-size: 14px;

    color: #9CA3AF;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .artwork-workspace .workspace-layout {

        grid-template-columns: 1fr;
    }

    .artwork-workspace .workspace-sidebar {

        position: relative;

        top: unset;
    }
}

@media (max-width: 768px) {

    .artwork-workspace .workspace-header h1 {

        font-size: 32px;
    }

    .artwork-workspace .artwork-card-header h3 {

        font-size: 28px;
        
    }

    .artwork-workspace .uploaded-file-card {

        flex-direction: column;

        align-items: flex-start;
    }

    .artwork-workspace .artwork-actions {

        width: 100%;
    }

    .artwork-workspace .btn-primary,
    .artwork-workspace .btn-secondary,
    .artwork-workspace .btn-danger {

        width: 100%;
    }
}

.workspace-header-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.back-cart-btn{

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

    padding:12px 18px;

    border-radius:14px;

    background:#ffffff;

    color:#7c3aed;

    font-weight:600;

    text-decoration:none;

    border:1px solid #e9d5ff;

    transition:0.2s ease;
}

.back-cart-btn:hover{

    background:#7c3aed;

    color:#fff;

    border-color:#7c3aed;
}

/* =========================================================
   BRIEF WORKSPACE
========================================================= */

.brief-workspace{

    --main-color:#8B5CF6;
    --main-hover:#7C3AED;

    --light-bg:#FAF5FF;

    --border-color:#EEE7FF;

    --text-main:#1F2937;
    --text-soft:#94A3B8;

    max-width:1380px;

    margin:0 auto;

    padding:34px 20px 80px;

    min-height:100vh;
}

/* =========================================================
   RESET
========================================================= */

.brief-workspace *{

    box-sizing:border-box;
}

.brief-workspace a{

    text-decoration:none !important;
}

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

.brief-header{

    margin-bottom:40px;

    margin-left:20px;
}

.brief-header-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;
}

.brief-header h1{
    
    font-size:32px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1px;

    color:#111827;

    margin:0 0 14px;
}

.brief-header p{

    font-size:16px;

    color:#94A3B8;

    margin:0;
}

.brief-back-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:64px;

    padding:0 28px;

    border-radius:20px;

    border:1px solid #E9D5FF;

    background:#fff;

    color:#7C3AED;

    font-size:16px;

    font-weight:700;

    transition:.2s ease;
}

.brief-back-btn:hover{

    background:#7C3AED;

    color:#fff;
}

/* =========================================================
   LAYOUT
========================================================= */

.brief-layout{

    display:grid;

      grid-template-columns:280px 1fr;

    gap:26px;

    align-items:start;
}

/* =========================================================
   SIDEBAR
========================================================= */

.brief-sidebar{

    position:sticky;

    top:30px;
}

.brief-sidebar-card{

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

    border-radius:28px;

    padding:28px;

    border:1px solid rgba(139,92,246,.08);

    box-shadow:
    0 4px 20px rgba(124,58,237,.04);
}

.brief-sidebar-card h3{

    margin:0 0 30px;
    
    line-height:1.1;

    font-size:28px;

    font-weight:800;

    letter-spacing:-1px;

    color:#8B5CF6;
}

.brief-meta-group{

    padding-bottom:28px;

    margin-bottom:28px;

    border-bottom:1px solid #F1F5F9;
}

.brief-meta-group:last-child{

    padding-bottom:0;

    margin-bottom:0;

    border-bottom:none;
}

.brief-meta-group label{

    display:block;

    font-size:14px;

    color:#9CA3AF;

    margin-bottom:10px;
}

.brief-meta-group span{

    display:block;

    font-size:16px;

    font-weight:700;

    color:#111827;

    line-height:1.5;
}

/* =========================================================
   MAIN CARD
========================================================= */

.brief-main-card{

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

     border-radius:28px;

    padding:36px;

    border:1px solid rgba(139,92,246,.08);

    box-shadow:
    0 4px 20px rgba(124,58,237,.04);
}

.brief-main-title{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:34px;
}

.brief-main-title h2{

    margin:0;

    font-size:28px;

    font-weight:800;

    letter-spacing:-1px;

  color:#8B5CF6;
}

/* =========================================================
   FORM
========================================================= */

.brief-form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

}

.brief-group{

    margin-bottom:28px;
}

.brief-group.full{

    grid-column:1 / -1;
}

.brief-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    font-weight:600;

    color:#111827;

    margin-bottom:12px;
}

.brief-input,
.brief-textarea{

    width:100%;

    border:1px solid #E5E7EB !important;

    border-radius:14px !important;

    -webkit-border-radius:14px !important;

    appearance:none;

    -webkit-appearance:none;

    background:#FFFFFF !important;

    background-color:#FFFFFF !important;

    box-shadow:none !important;

    padding:14px 16px;
}



.brief-textarea{

    min-height:180px;

    resize:vertical;
}



.brief-input::placeholder,
.brief-textarea::placeholder{
     font-size:14px;
    color:#9CA3AF;
}

/* =========================================================
   HELPER
========================================================= */

.brief-helper{

    margin-top:10px;

    font-size:14px;

    line-height:1.6;

    color:#94A3B8;
}

.brief-group .replace-dropzone{

    margin-top:0;
}

/* =========================================================
   ACTIONS
========================================================= */

.brief-actions{

    grid-column:1 / -1;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    margin-top:10px;
}

.brief-btn-secondary,
.brief-btn-primary{

    height:60px;

    padding:0 34px;

    border-radius:18px;

    border:none;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    transition:.2s ease;
}

.brief-btn-secondary{

    background:#fff;

    border:1px solid #E5E7EB;

    color:#111827;
}

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

.brief-btn-primary{

    min-width:240px;

    height:56px;

    padding:0 30px;

    border:none !important;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #8B5CF6,
        #7C3AED
    ) !important;

    color:#FFFFFF !important;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:all .25s ease;


}

.brief-btn-primary:hover{

    transform:translateY(-2px);

    background:linear-gradient(
        135deg,
        #7C3AED,
        #6D28D9
    ) !important;



    color:#FFFFFF !important;
}

.brief-btn-primary:active{

    transform:translateY(0);

}

.brief-btn-primary:focus{

    outline:none;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

    .brief-layout{

        grid-template-columns:1fr;
    }

    .brief-sidebar{

        position:relative;

        top:unset;
    }
}

@media(max-width:768px){

  .brief-header h1{
    font-size:32px;
    }

    .brief-form-grid{

        grid-template-columns:1fr;
    }

    .brief-upload-zone{

        flex-direction:column;

        align-items:flex-start;
    }

    .brief-actions{

        flex-direction:column;
    }

    .brief-btn-primary,
    .brief-btn-secondary{

        width:100%;
    }

    .brief-btn-primary{

        min-width:unset;
    }
}



.upload-loading-text{

    color: white;
    font-size: 25px;
    font-weight: 700;
}

/* =========================================
STYLE GRID
========================================= */

.brief-style-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.brief-style-card{

    position:relative;

    border:2px solid #E5E7EB;

    border-radius:18px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    cursor:pointer;

    transition:0.2s;

    background:#FFFFFF;

    padding:0 20px;
}

.brief-style-card:hover{
    border-color:#7C3AED;
}

.brief-style-card input{
    display:none;
}
.brief-style-card span{

    font-size:16px;

    font-weight:600;

    color:#111827;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    text-align:center;
}

.brief-style-card input:checked + span{
    color:#7C3AED;
}

.brief-style-card:has(input:checked){
    border-color:#7C3AED;
    background:#F5F3FF;
}
/* =========================================
COLORS
========================================= */

#brief-color-list{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:14px;
}

.brief-color-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:9px 15px;

    border:1px solid #E5E7EB;

    border-radius:15px;

    background:#FFFFFF;
}

.brief-color-circle{

    position:relative;

    width:34px;

    height:34px;

    min-width:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    margin:0;

    flex-shrink:0;
}
.brief-color-picker{

    position:absolute;

    inset:0;

    opacity:0;

    cursor:pointer;

    margin:0;

    padding:0;

    display:block;
}

.brief-color-preview{

    width:34px;

    height:34px;

    border-radius:999px;

    display:block;

    border:2px solid #FFFFFF;

    box-shadow:0 0 0 1px #E5E7EB;

    transform:translateY(2px);
}

.brief-color-hex{

    font-size:14px;

    font-weight:600;

    color:#111827;

    text-transform:uppercase;
}

.brief-remove-color{

    border:none;

    background:none !important;

    box-shadow:none !important;

    color:#9CA3AF !important;

    font-size:20px;

    cursor:pointer;

    padding:0;

    margin:0;

    line-height:1;

    opacity:1 !important;

    transition:none !important;

    transform:none !important;
}

.brief-remove-color:hover{

    background:none !important;

    box-shadow:none !important;

    color:#9CA3AF !important;

    transform:none !important;

    opacity:1 !important;
}

.brief-add-color{

    width:100%;

    height:58px;

    border:2px dashed #E5E7EB;

    border-radius:15px;

    background:#f4f4f4;

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-top:18px;

    cursor:pointer;

    transition:.2s ease;
}

.brief-add-color:hover{

    border-color:#8B5CF6;

    color:#7C3AED;

    background:#FAF5FF;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .brief-style-grid{
        grid-template-columns:repeat(2,1fr);
    }

    #brief-color-list{
        grid-template-columns:1fr;
    }

}
/* =========================================================
   BRIEF SCALE DOWN 20%
========================================================= */

.brief-workspace{

    max-width:1300px;

    padding:26px 16px 64px;
}

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

.brief-header{

    margin-bottom:30px;

    margin-left:12px;
}

.brief-header h1{

    font-size:32px;

    margin-bottom:10px;
}
/* =========================================
DESIGN TYPE
========================================= */

.design-type-option{

    display:flex !important;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    cursor:pointer;
}

.design-type-option span{

    display:inline-block;

    font-size:14px;

    font-weight:700;

    color:#111827;

    line-height:1;
}
.design-type-option input[type="radio"]{

    appearance:none;
    -webkit-appearance:none;

    width:18px;
    height:18px;

    border:2px solid #D1D5DB;

    border-radius:999px;

    background:#FFFFFF;

    position:relative;

    margin:0;

    transition:.2s;
}

.design-type-option input[type="radio"]:checked{

    border-color:#111827;
}

.design-type-option input[type="radio"]:checked::after{

    content:'';

    width:8px;
    height:8px;

    border-radius:999px;

    background:#111827;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);
}
.brief-header p{

    font-size:13px;
}

.brief-back-btn{

    height:52px;

    padding:0 22px;

    border-radius:16px;

    font-size:14px;
}

/* =========================================
LAYOUT
========================================= */

.brief-layout{

    grid-template-columns:240px 1fr;

    gap:20px;
}

/* =========================================
SIDEBAR
========================================= */

.brief-sidebar-card{

    border-radius:22px;

    padding:22px;
}

.brief-sidebar-card h3{

    font-size:22px;

    margin-bottom:22px;
}

.brief-meta-group{

    padding-bottom:22px;

    margin-bottom:22px;
}

.brief-meta-group label{

    font-size:12px;

    margin-bottom:8px;
}

.brief-meta-group span{

    font-size:14px;
}

/* =========================================
MAIN CARD
========================================= */

.brief-main-card{

    border-radius:22px;

    padding:28px;
}

.brief-main-title{

    margin-bottom:28px;
}

.brief-main-title h2{

    font-size:22px;
}

/* =========================================
FORM
========================================= */


.brief-group{

    margin-bottom:22px;
}

.brief-group label{

    font-size:14px;

}

.brief-input{

    height:58px !important;

    padding:0 16px !important;

    line-height:52px !important;
}

.brief-textarea{

    min-height:150px;

    padding:16px !important;
}

.brief-textarea{

    min-height:150px;
}

/* =========================================
STYLE GRID
========================================= */

.brief-style-grid{

    gap:10px;
}

.brief-style-card{

    border-radius:14px;

    height:58px;

    padding:0 14px;
}

.brief-style-card span{

    font-size:14px;
}


/* =========================================
UPLOAD ZONE
========================================= */

.brief-upload-zone{

    position:relative;

    width:100%;

    min-height:240px;

    border:2px dashed #D8B4FE;

    border-radius:28px;

    background:#FCFAFF;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s ease;

    padding:40px;
}

.brief-upload-zone:hover{

    border-color:#8B5CF6;

    background:#FAF5FF;
}

.brief-upload-center{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;
}

.brief-upload-icon{

    width:72px;

    height:72px;

    border-radius:999px;

    background:#F3E8FF;

    color:#7C3AED;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:20px;
}

.brief-upload-center h4{

    font-size:20px;

    font-weight:700;

    color:#7C3AED;

    margin:0 0 10px;
}

.brief-upload-center p{

    font-size:15px;

    color:#9CA3AF;

    margin:0;
}

/* =========================================
BUTTONS
========================================= */

.brief-actions{

    margin-top:28px;

    gap:14px;
}

.brief-btn-secondary,
.brief-btn-primary{

    height:52px;

    padding:0 26px;

    border-radius:14px;

    font-size:14px;
}

.brief-btn-primary{

    min-width:260px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .brief-workspace{

        padding:20px 14px 50px;
    }

    .brief-main-card{

        padding:22px;
    }

    .brief-layout{

        grid-template-columns:1fr;
    }

    .brief-style-grid{

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

    #brief-color-list{

        grid-template-columns:1fr;
    }

}

/* =========================================================
   REPLACE DROPZONE FOR BRIEF
========================================================= */

.brief-workspace .replace-dropzone {

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px dashed #D8B4FE;

    border-radius:24px;

    padding:30px 20px;

    background:#FCFAFF;

    transition:all .25s ease;

    min-height:220px;

    cursor:pointer;
}

.brief-workspace .replace-dropzone:hover {

    background:#FAF5FF;

    border-color:#8B5CF6;
}

.brief-workspace .replace-dropzone-inner {

    text-align:center;
}

.brief-workspace .replace-icon {

    color:#8B5CF6;

    margin-bottom:10px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.brief-workspace .replace-title {

    font-size:18px;

    font-weight:800;

    color:#7C3AED;

    margin-bottom:6px;
}

.brief-workspace .replace-subtitle {

    font-size:14px;
    
     font-weight:500;

    color:#9CA3AF;
}

/* =========================================================
   EDIT ARTWORK SCALE DOWN 20%
========================================================= */

.artwork-workspace{

    max-width:1240px;

    padding:26px 16px 64px;
}

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

.artwork-workspace .workspace-header{

    margin-bottom:30px;

    margin-left:12px;
}

.artwork-workspace .workspace-header h1{

    font-size:32px;

    margin-bottom:8px;
}

.artwork-workspace .workspace-header p{

    font-size:13px;
}

/* =========================================
LAYOUT
========================================= */

.artwork-workspace .workspace-layout{

    grid-template-columns:240px 1fr;

    gap:20px;
}

/* =========================================
SIDEBAR
========================================= */

.artwork-workspace .workspace-card{

    border-radius:22px;

    padding:22px;
}

.artwork-workspace .workspace-card h3{

    font-size:22px;

    margin-bottom:22px;
}

.artwork-workspace .meta-group{

    padding-bottom:22px;

    margin-bottom:22px;
}

.artwork-workspace .meta-group label{

    font-size:12px;

    margin-bottom:8px;
}

.artwork-workspace .meta-group span{

    font-size:14px;
}

/* =========================================
ARTWORK CARD
========================================= */

.artwork-workspace .artwork-card{

    border-radius:22px;

    padding:22px;

    margin-bottom:12px;
}

.artwork-workspace .artwork-card-header{

    margin-bottom:18px;
}

.artwork-workspace .artwork-card-header h3{

    font-size:22px;
}

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

.artwork-workspace .status-badge{

    padding:7px 14px;

    font-size:12px;
}

.artwork-workspace .status-dot{

    width:12px;

    height:12px;
}

/* =========================================
FILE CARD
========================================= */

.artwork-workspace .uploaded-file-card{

    border-radius:20px;

    padding:16px 18px;

    gap:16px;
}

.artwork-workspace .file-side-box{

    width:68px;

    height:68px;

    border-radius:15px;

    font-size:16px;
}

.artwork-workspace .file-name{

    font-size:14px;

    margin-bottom:4px;
}

.artwork-workspace .file-meta{

    font-size:12px;
}

.artwork-workspace .file-ready{

    padding:4px 9px;

    font-size:10px;
}

/* =========================================
BUTTONS
========================================= */

.artwork-workspace .btn-primary,
.artwork-workspace .btn-secondary,
.artwork-workspace .btn-danger{

    height:46px;

    min-width:90px;

    padding:0 30px !important;

    border-radius:30px !important;

    font-size:14px !important;
}

/* =========================================
DROPZONE
========================================= */

.artwork-workspace .replace-dropzone{

    border-radius:20px;

    padding:26px 18px;

    margin-top:16px;

    min-height:190px;
}

.artwork-workspace .replace-title{

    font-size:16px;
}

.artwork-workspace .replace-subtitle{

    font-size:13px;
}

.artwork-workspace .replace-icon svg{

    width:28px;

    height:28px;
}

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

.back-cart-btn{

    padding:10px 16px;

    border-radius:12px;

    font-size:14px;
}

/* =========================================
RESPONSIVE
========================================= */

@media (max-width:1200px){

    .artwork-workspace .workspace-layout{

        grid-template-columns:1fr;
    }

    .artwork-workspace .workspace-sidebar{

        position:relative;

        top:unset;
    }
}

@media (max-width:768px){

    .artwork-workspace{

        padding:20px 14px 50px;
    }

    .artwork-workspace .workspace-header{

        margin-left:0;
    }

    .workspace-header-top{

        flex-direction:column;

        gap:14px;
    }

    .artwork-workspace .workspace-header h1{

        font-size:32px;
    }

    .artwork-workspace .artwork-card-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }

    .artwork-workspace .uploaded-file-card{

        flex-direction:column;

        align-items:flex-start;
    }

    .artwork-workspace .artwork-actions{

        width:100%;
    }

    .artwork-workspace .btn-primary,
    .artwork-workspace .btn-secondary,
    .artwork-workspace .btn-danger{

        width:100%;
    }
}

#font-list{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.brief-font-card{

    border:1px solid #E5E7EB;

    border-radius:15px;

    padding:16px 20px;

    background:#FFFFFF;

    cursor:pointer;

    transition:.2s ease;

    height:80px;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;
}

.brief-font-title{

    font-size:18px;
    
    height:24px;

    overflow:hidden;

    line-height:1.2;

    font-weight:600;

    margin-bottom:10px;

    color:#111827;
}

.brief-font-preview{

    font-size:13px;

    line-height:1;

    color:#6B7280;

    opacity:.75;
}
.brief-font-card:hover{
    border-color:#8B5CF6;
}

.brief-font-card.active{

    border-color:#C4B5FD;

    background:#FAF5FF;
}
.brief-font-dropdown{
    margin-top:10px;
}

.brief-font-trigger{

    height:58px;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:0 20px;

    background:#FFFFFF;

    font-size:15px;

    font-weight:500;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    transition:.2s ease;
}

.brief-font-panel.active{
    display:block;
}

.brief-font-panel{

    display:none;

    margin-top:10px;

    border:1px solid #E5E7EB;

    border-radius:18px;

    background:#FFFFFF;

    padding:16px;

    max-height:520px;

    overflow:auto;

    box-shadow:
    0 10px 30px rgba(15,23,42,.06);
}

.brief-font-panel.active{
    display:block;
}

.brief-main-card{
    zoom:.9;
}

#selected-fonts{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:18px;
}

.selected-font-item{

    height:58px;

    border:1px solid #E5E7EB;

    border-radius:16px;

    background:#FFFFFF;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.selected-font-item span{

    font-size:16px;

    color:#111827;
}

.remove-font{

    border:none !important;

    background:none !important;

    box-shadow:none !important;

    outline:none !important;

    appearance:none;

    -webkit-appearance:none;

    color:#9CA3AF !important;

    font-size:20px;

    cursor:pointer;

    padding:0;

    margin:0;

    line-height:1;

    opacity:1 !important;

    transition:none !important;

    transform:none !important;

    width:auto;

    height:auto;

    min-width:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.remove-font:hover,
.remove-font:focus,
.remove-font:active{

    background:none !important;

    box-shadow:none !important;

    outline:none !important;

    color:#9CA3AF !important;

    transform:none !important;

    opacity:1 !important;
}

.brief-font-search{

    width:100%;

    height:56px;

    line-height:56px;

    padding:0 20px !important;

    border:none !important;

    border-radius:10px !important;

    background:#F5F5F5 !important;
    
    margin-bottom:18px;

    font-size:18px;

    font-weight:400;

    color:#111827;

    appearance:none;
    -webkit-appearance:none;
}

.brief-font-search:focus{

    border-color:#C4B5FD;

    box-shadow:
    0 0 0 4px rgba(139,92,246,.06);
}

.quote-pricing-table{
    width:100%;
    margin-top:30px;
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
}

.quote-pricing-head,
.quote-pricing-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}

.quote-pricing-head{
    background:#f8f8f8;
    font-weight:600;
}

.quote-pricing-head div,
.quote-pricing-row div{
    padding:14px 18px;
}

.quote-pricing-row{
    border-top:1px solid #eee;
}

.quote-section-title{
    margin:25px 0 15px;
    font-size:18px;
    font-weight:600;
    color:#2C005A;
}

.quote-pricing-table{
    width:100%;
    margin:25px 0;
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
}

.quote-pricing-head,
.quote-pricing-row{

    display:grid;

    grid-template-columns:
        1.2fr
        1.2fr
        1fr
        180px;

    align-items:center;
}

.quote-pricing-head{
    background:#f8f8f8;
    font-weight:600;
}

.quote-pricing-head div,
.quote-pricing-row div{
    padding:16px 20px;
}

.quote-pricing-row{
    border-top:1px solid #eee;
}
.quote-add-cart-btn{

    background:#000 !important;

    color:#fff !important;

    border:none;

    padding:10px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;
}

.quote-add-cart-btn:hover{

    opacity:.85;
}

/* =========================================
TEMPLATE CODE
========================================= */

.template-code-label{

    display:block;

    font-size:14px;

    font-weight:700;

    color:#111827;

    margin-bottom:10px;
}

.template-code-input{

    width:100%;

    height:52px;

    border:1px solid #E5E7EB !important;

    border-radius:14px !important;

    background:#FFFFFF !important;

    background-color:#FFFFFF !important;

    box-shadow:none !important;

    appearance:none;

    -webkit-appearance:none;

    padding:0 16px;

    color:#111827;
}

.template-code-input:focus{

    outline:none;

    border-color:#A78BFA;

    box-shadow:
    0 0 0 4px rgba(139,92,246,.08);
}

/* =========================================
TOOLTIP
========================================= */

.brief-label{

    display:flex;

    align-items:center;

    gap:8px;

    position:relative;
}

.brief-tooltip-trigger{

    width:15px;
    height:15px;

    border-radius:999px;

    background:#2C005A;

    color:#FFF;

    font-size:12px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    flex-shrink:0;
}

.brief-tooltip-content{

    position:absolute;

   bottom:32px;

    left:0;

    width:280px;

    background:#FFFFFF;

    border-radius:10px;

    padding:14px 16px;

    box-shadow:
    0 12px 40px rgba(0,0,0,.12);

    font-size:12px;

    line-height:1.5;

    color:#2C005A;

    opacity:0;

    visibility:hidden;

    transform:translateY(-6px);

    transition:.2s;

    z-index:999;
}

.brief-tooltip-content.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.brief-agreement-wrap{

    margin-top:25px;

    padding:18px 20px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:16px;
}

.brief-agreement{

    display:flex !important;

    align-items:flex-start;

    gap:12px;

    margin:0 !important;

    font-size:14px;

    line-height:1.6;

    color:#334155;
}

.brief-agreement input{

    margin-top:3px;

    flex-shrink:0;
}

.brief-agreement a{

    color:#7C3AED;

    font-weight:600;
}

.brief-agreement-note{

    margin-top:8px;

    font-size:12px;

    color:#64748B;

    padding-left:30px;
}

.artwork-card{

    display:flex;
    flex-direction:column;

}