/* =============================================
   TABLE CARD
============================================= */
.ccp-box{width:100%!important;border:1px solid #e5e7eb!important;border-radius:18px!important;overflow:hidden!important;background:#fff!important;position:relative!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;box-shadow:0 2px 16px rgba(0,0,0,.06)!important;}
.ccp-header{display:grid!important;background:linear-gradient(145deg,#111,#222)!important;color:#fff!important;font-weight:700!important;font-size:12px!important;padding:13px 0!important;letter-spacing:.06em!important;text-transform:uppercase!important;}
.ccp-body{max-height:240px!important;overflow-y:auto!important;background:#fff!important;scrollbar-width:thin!important;scrollbar-color:#222 #f0f0f0!important;}
.ccp-body::-webkit-scrollbar{width:5px!important;}
.ccp-body::-webkit-scrollbar-track{background:#f0f0f0!important;border-radius:10px!important;}
.ccp-body::-webkit-scrollbar-thumb{background:#222!important;border-radius:10px!important;}
.ccp-header,.ccp-row{display:grid!important;width:100%!important;align-items:center!important;}
/* All header and row cells: centered by default */
.ccp-header>div,.ccp-row>div{display:flex!important;justify-content:center!important;align-items:center!important;text-align:center!important;padding:0 10px!important;min-width:0!important;}

/* First column: header and data both left-aligned with same indent variable */
.ccp-header>div:first-child{justify-content:flex-start!important;text-align:left!important;padding-left:var(--ccp-first-indent,14px)!important;padding-right:0!important;}
.ccp-row>div:first-child{justify-content:flex-start!important;text-align:left!important;padding-left:var(--ccp-first-indent,14px)!important;padding-right:0!important;}

/* Last column: centered like middle cols, but padding controllable via indent variable */
.ccp-header>div:last-child{justify-content:center!important;text-align:center!important;padding-left:var(--ccp-last-indent,10px)!important;padding-right:var(--ccp-last-indent,10px)!important;}
.ccp-row>div:last-child{justify-content:center!important;text-align:center!important;padding-left:var(--ccp-last-indent,10px)!important;padding-right:var(--ccp-last-indent,10px)!important;}
.ccp-row{padding:12px 0!important;font-size:13px!important;border-bottom:1px solid rgba(0,0,0,.04)!important;transition:background .15s!important;}
.ccp-row:last-child{border-bottom:none!important;}
.ccp-row:nth-child(even){background:#fafafa!important;}
.ccp-cell-click{cursor:pointer!important;}
.ccp-cell-size{cursor:default!important;}
.ccp-row.ccp-row-hovered{background:#fff3e8!important;}
.ccp-row.ccp-popular{background:#fffbf0!important;}
.ccp-row.ccp-popular:nth-child(even){background:#fffbf0!important;}
.ccp-price{font-weight:700!important;color:#111!important;}
.ccp-size-wrapper{position:relative!important;display:inline-block!important;}
.ccp-star{position:absolute!important;right:-10px!important;top:0!important;font-size:11px!important;font-weight:600!important;color:#c99a00!important;cursor:help!important;}
.ccp-star::after{content:attr(data-note)!important;position:absolute!important;top:-14px!important;left:50%!important;transform:translateX(-50%)!important;font-size:10px!important;white-space:nowrap!important;background:#333!important;color:#fff!important;padding:2px 6px!important;border-radius:4px!important;pointer-events:none!important;opacity:0!important;transition:opacity .2s!important;}
.ccp-star:hover::after{opacity:1!important;}
.ccp-scroll-btn{position:absolute!important;bottom:10px!important;right:10px!important;width:30px!important;height:30px!important;border-radius:50%!important;background:#e5e7eb!important;color:#111!important;border:none!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;font-weight:900!important;cursor:pointer!important;z-index:2!important;padding:0!important;box-shadow:0 1px 6px rgba(0,0,0,.12)!important;}
.ccp-scroll-btn:hover{background:#d1d5db!important;}

/* =============================================
   MODAL BACKDROP
============================================= */
#ccp-modal-wrap{
    position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:100%!important;
    background:rgba(0,0,0,.55)!important;
    z-index:999999!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:16px!important;box-sizing:border-box!important;
}
#ccp-modal-wrap.ccp-hidden{display:none!important;}

/* =============================================
   MODAL BOX
============================================= */
#ccp-modal-box{
    background:#fff!important;
    width:100%!important;max-width:520px!important;
    border-radius:20px!important;
    overflow:hidden!important;
    box-shadow:0 24px 64px rgba(0,0,0,.22)!important;
    max-height:92vh!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
    scrollbar-width:thin!important;
    scrollbar-color:#ccc #f5f5f5!important;
}
#ccp-modal-box::-webkit-scrollbar{width:4px!important;}
#ccp-modal-box::-webkit-scrollbar-thumb{background:#ccc!important;border-radius:4px!important;}

/* =============================================
   MODAL INNER PADDING WRAPPER
============================================= */
#ccp-modal-inner{padding:22px 24px 26px!important;box-sizing:border-box!important;}

/* HEAD */
#ccp-modal-head{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important;margin-bottom:14px!important;}
#ccp-modal-title{margin:0!important;font-size:18px!important;font-weight:800!important;color:#111!important;line-height:1.25!important;font-family:inherit!important;background:none!important;padding:0!important;border:none!important;}
#ccp-modal-sub{margin:4px 0 0!important;font-size:12px!important;color:#9ca3af!important;line-height:1.4!important;font-family:inherit!important;padding:0!important;border:none!important;background:none!important;}

/* CLOSE BUTTON */
#ccp-btn-close{
    width:32px!important;height:32px!important;min-width:32px!important;flex-shrink:0!important;
    border-radius:50%!important;background:#f0f2f5!important;border:none!important;
    color:#555!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:15px!important;font-weight:800!important;
    padding:0!important;line-height:1!important;box-shadow:none!important;outline:none!important;
}
#ccp-btn-close:hover{background:#e0e2e6!important;color:#111!important;}

/* =============================================
   PRODUCT INFO STRIP (below image)
============================================= */
#ccp-product-strip{
    background:#fff8f2!important;
    border:1.5px solid #ffe0bf!important;
    border-radius:12px!important;
    padding:12px 14px!important;
    margin-bottom:14px!important;
}
#ccp-product-strip.ccp-hidden{display:none!important;}
#ccp-product-label{font-size:9px!important;font-weight:800!important;color:#FF7601!important;letter-spacing:.1em!important;text-transform:uppercase!important;margin:0 0 3px!important;font-family:inherit!important;}
#ccp-prod-name{font-size:14px!important;font-weight:800!important;color:#111!important;margin:0 0 8px!important;font-family:inherit!important;line-height:1.3!important;}

/* PILLS */
#ccp-pills{display:flex!important;flex-wrap:wrap!important;gap:5px!important;}
#ccp-pills.ccp-hidden{display:none!important;}
#ccp-pills span{
    font-size:11px!important;font-weight:600!important;color:#92400e!important;
    background:#fff!important;border:1px solid #ffd0a0!important;border-radius:20px!important;
    padding:3px 9px!important;white-space:nowrap!important;
    font-family:inherit!important;display:inline-block!important;line-height:1.5!important;
}

/* DIVIDER */
#ccp-divider{height:1px!important;background:#f0f0f0!important;border:none!important;margin:0 0 16px!important;display:block!important;}

/* =============================================
   FORM — 2 columns always
============================================= */
#ccp-row-1,#ccp-row-2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-bottom:10px!important;}
#ccp-row-3{margin-bottom:0!important;}
#ccp-row-1>div,#ccp-row-2>div,#ccp-row-3>div{display:flex!important;flex-direction:column!important;gap:5px!important;}

#ccp-row-1 label,#ccp-row-2 label,#ccp-row-3 label{
    font-size:10px!important;font-weight:700!important;color:#374151!important;
    letter-spacing:.08em!important;text-transform:uppercase!important;
    font-family:inherit!important;background:none!important;padding:0!important;border:none!important;
}

/* INPUTS */
#ccp-name,#ccp-email,#ccp-phone,#ccp-zip{
    width:100%!important;padding:11px 13px!important;
    border-radius:10px!important;border:1.5px solid #e5e7eb!important;
    font-size:14px!important;font-family:inherit!important;color:#111!important;
    background:#f9fafb!important;box-sizing:border-box!important;
    outline:none!important;display:block!important;line-height:1.4!important;
    -webkit-appearance:none!important;appearance:none!important;box-shadow:none!important;
}
#ccp-msg{
    width:100%!important;padding:11px 13px!important;
    border-radius:10px!important;border:1.5px solid #e5e7eb!important;
    font-size:14px!important;font-family:inherit!important;color:#111!important;
    background:#f9fafb!important;box-sizing:border-box!important;
    outline:none!important;display:block!important;
    resize:none!important;min-height:78px!important;line-height:1.55!important;
    -webkit-appearance:none!important;appearance:none!important;box-shadow:none!important;
}
/* Placeholder styling */
#ccp-name::placeholder,#ccp-email::placeholder,#ccp-phone::placeholder,#ccp-zip::placeholder,#ccp-msg::placeholder{
    color:#aab0bb!important;font-size:13px!important;font-style:normal!important;font-weight:400!important;
}
/* Focus ring */
#ccp-name:focus,#ccp-email:focus,#ccp-phone:focus,#ccp-zip:focus,#ccp-msg:focus{
    border-color:#FF7601!important;
    box-shadow:0 0 0 3px rgba(255,118,1,.13)!important;
    background:#fff!important;outline:none!important;
}

/* ERROR */
.ccp-err{font-size:10px!important;font-weight:600!important;color:#ef4444!important;font-family:inherit!important;}
.ccp-err.ccp-hidden{display:none!important;}

/* =============================================
   ACTIONS
============================================= */
#ccp-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:18px!important;}

/* CANCEL */
#ccp-btn-cancel{
    width:100%!important;padding:13px 16px!important;border-radius:50px!important;
    border:1.5px solid #d1d5db!important;background:#f5f5f5!important;
    color:#555!important;font-weight:600!important;font-size:14px!important;
    cursor:pointer!important;text-align:center!important;font-family:inherit!important;
    line-height:1.4!important;box-shadow:none!important;outline:none!important;
    display:block!important;box-sizing:border-box!important;
    -webkit-appearance:none!important;appearance:none!important;text-decoration:none!important;
}
#ccp-btn-cancel:hover{background:#ebebeb!important;color:#222!important;border-color:#bbb!important;}

/* SEND — orange gradient */
#ccp-btn-send{
    width:100%!important;padding:13px 16px!important;border-radius:50px!important;
    border:none!important;
    background:linear-gradient(135deg,#FF8C1A 0%,#e65c00 100%)!important;
    color:#fff!important;font-weight:800!important;font-size:14px!important;
    cursor:pointer!important;text-align:center!important;font-family:inherit!important;
    line-height:1.4!important;
    box-shadow:0 4px 18px rgba(255,118,1,.42)!important;
    outline:none!important;display:block!important;box-sizing:border-box!important;
    -webkit-appearance:none!important;appearance:none!important;text-decoration:none!important;
}
#ccp-btn-send:hover{background:linear-gradient(135deg,#e57000 0%,#c94400 100%)!important;box-shadow:0 6px 22px rgba(255,118,1,.55)!important;color:#fff!important;}
#ccp-btn-send:disabled{opacity:.65!important;cursor:not-allowed!important;}

/* =============================================
   TOASTS
============================================= */
#ccp-toast-ok,#ccp-toast-err{
    position:fixed!important;bottom:24px!important;left:50%!important;
    transform:translateX(-50%) translateY(80px)!important;
    padding:11px 24px!important;border-radius:50px!important;z-index:1000000!important;
    color:#fff!important;font-weight:700!important;font-size:13px!important;
    font-family:-apple-system,sans-serif!important;
    opacity:0!important;transition:opacity .3s,transform .3s!important;
    pointer-events:none!important;white-space:nowrap!important;
    box-shadow:0 6px 24px rgba(0,0,0,.18)!important;
}
#ccp-toast-ok{background:linear-gradient(135deg,#22c55e,#16a34a)!important;}
#ccp-toast-err{background:linear-gradient(135deg,#ef4444,#dc2626)!important;}
#ccp-toast-ok.ccp-show,#ccp-toast-err.ccp-show{opacity:1!important;transform:translateX(-50%) translateY(0)!important;}

/* =============================================
   MOBILE — slide up sheet
============================================= */
@media(max-width:600px){
    #ccp-modal-wrap{align-items:flex-end!important;padding:0!important;}
    #ccp-modal-box{
        border-radius:20px 20px 0 0!important;
        max-width:100%!important;
        max-height:94vh!important;
    }
    #ccp-modal-inner{padding:18px 16px 30px!important;}
    #ccp-img-banner{height:130px!important;}
    /* Keep 2-col on mobile — just tighter */
    #ccp-row-1,#ccp-row-2{gap:8px!important;}
    /* Prevent iOS zoom on input focus */
    #ccp-name,#ccp-email,#ccp-phone,#ccp-zip,#ccp-msg{font-size:16px!important;}
    #ccp-btn-cancel,#ccp-btn-send{font-size:13px!important;padding:12px 10px!important;}
}