/*
 * Printo_CartPanel - slide-in cart panel (staging).
 *
 * Replaces the #header-cart dropdown. The panel is fixed to the viewport and
 * lives at before_body_end, so no header ancestor can clip it.
 */

.cp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 22, 28, .42);
    opacity: 0;
    transition: opacity 240ms ease;
    z-index: 100000;
}

.cp-overlay.cp-on {
    opacity: 1;
}

.cp-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -6px 0 28px rgba(17, 22, 28, .18);
    transform: translate3d(100%, 0, 0);
    transition: transform 300ms cubic-bezier(.32, .72, 0, 1);
    z-index: 100001;
}

.cp-panel.cp-on {
    transform: translate3d(0, 0, 0);
}

/* [hidden] must win over any theme rule that sets display on these. */
.cp-overlay[hidden],
.cp-panel[hidden] {
    display: none !important;
}

/* --- head --- */
.cp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 10px;
    flex: 0 0 auto;
}

.cp-panel .cp-title {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: #1b2027;
    text-transform: none;
}

.cp-panel .cp-close {
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #8b939c;
    cursor: pointer;
    padding: 0 4px;
}

.cp-panel .cp-close:hover {
    color: #1b2027;
}

/* --- scrolling body --- */
.cp-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 18px 18px;
}

/* --- items --- */
.cp-panel ul.cp-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-panel li.cp-item {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #eef0f2;
}

.cp-item-img {
    flex: 0 0 72px;
}

.cp-item-img img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border: 1px solid #eef0f2;
    border-radius: 4px;
    background: #fff;
    display: block;
}

.cp-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-panel .cp-item-name {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 18px;
    color: #1b2027;
    text-transform: none;
}

.cp-panel .cp-item-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 13px;
    color: #5b636c;
}

.cp-panel .cp-item-price {
    font-weight: 600;
    color: #1b2027;
    font-variant-numeric: tabular-nums;
}

.cp-panel .cp-item-actions {
    margin: 0;
    font-size: 12px;
}

.cp-panel .cp-item-actions a {
    color: #00a2ba;
    margin-right: 14px;
    text-transform: none;
}

.cp-panel .cp-item-actions a.cp-remove {
    color: #a0a7ae;
}

.cp-panel .cp-item-actions a:hover {
    text-decoration: underline;
}

/* --- blocks --- */
.cp-block {
    padding: 16px 0;
    border-bottom: 1px solid #eef0f2;
}

.cp-panel .cp-block-title {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #99a1a9;
}

.cp-panel .cp-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 13px;
    color: #3c444d;
}

.cp-panel .cp-row-value {
    font-weight: 600;
    color: #1b2027;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cp-panel .cp-row-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef0f2;
    font-size: 15px;
}

.cp-panel .cp-row-total .cp-row-value {
    font-size: 17px;
}

.cp-panel .cp-note {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 16px;
    color: #8b939c;
    text-transform: none;
}

/* --- actions --- */
.cp-actions {
    padding: 18px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-panel a.cp-btn {
    display: block;
    text-align: center;
    padding: 14px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    text-transform: none;
}

.cp-panel a.cp-btn-primary {
    background: #00a2ba;
    color: #fff;
}

.cp-panel a.cp-btn-primary:hover {
    background: #018ea3;
    color: #fff;
}

.cp-panel a.cp-btn-ghost {
    border: 1px solid #d3d8dd;
    color: #3c444d;
    background: #fff;
}

.cp-panel a.cp-btn-ghost:hover {
    border-color: #a8b0b8;
    color: #1b2027;
}

/* --- empty --- */
.cp-empty {
    padding: 48px 4px;
    text-align: center;
}

.cp-panel .cp-empty-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #1b2027;
    text-transform: none;
}

.cp-panel .cp-empty-text {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    color: #8b939c;
    text-transform: none;
}

/* Stop the page behind from scrolling while the panel is open. */
body.cp-locked {
    overflow: hidden;
}

@media screen and (max-width: 480px) {
    .cp-panel {
        width: 100%;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-panel,
    .cp-overlay {
        transition: none;
    }
}

/* --- delivery date, directly under the title --- */
.cp-panel .cp-subhead {
    margin: 0 0 4px;
    padding: 0 0 14px;
    border-bottom: 1px solid #e6e8eb;
    font-size: 13px;
    line-height: 19px;
    text-transform: none;
}

.cp-panel .cp-subhead-label {
    color: #8b939c;
}

.cp-panel .cp-subhead-value {
    color: #1b2027;
    font-weight: 600;
}

/* --- secondary actions --- */
.cp-sep {
    height: 1px;
    background: #e6e8eb;
    margin: 4px 0 2px;
}

/* --- title row: name, share icon, close --- */
.cp-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cp-panel button.cp-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid #d3d8dd;
    color: #5b636c;
    background: #fff;
    flex: 0 0 auto;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.cp-panel button.cp-share:hover {
    border-color: #00a2ba;
    color: #00a2ba;
}

.cp-panel button.cp-share svg {
    display: block;
}

.cp-panel .cp-share-icon {
    display: inline-flex;
}

.cp-panel .cp-share-done {
    display: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cp-panel button.cp-share.cp-copied {
    width: auto;
    padding: 0 12px;
    border-color: #2c8a5a;
    color: #2c8a5a;
}

.cp-panel button.cp-share.cp-copied .cp-share-icon {
    display: none;
}

.cp-panel button.cp-share.cp-copied .cp-share-done {
    display: inline;
}

/* Shown only when the browser refuses to write to the clipboard. */
.cp-share-fallback {
    flex: 0 0 auto;
    padding: 0 18px 12px;
}

.cp-panel .cp-share-fallback label {
    display: block;
    font-size: 11px;
    color: #8b939c;
    margin-bottom: 4px;
    text-transform: none;
}

.cp-panel .cp-share-fallback input {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    color: #1b2027;
    border: 1px solid #d3d8dd;
    border-radius: 4px;
    background: #fff;
}

.cp-share-fallback[hidden] {
    display: none !important;
}

/* --- add-to-cart loader, in the spirit of the admin's "please wait" --- */
.cp-loading {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 22, 28, .42);
}

.cp-loading[hidden] {
    display: none !important;
}

.cp-loading-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(17, 22, 28, .22);
    font-size: 14px;
    font-weight: 600;
    color: #1b2027;
    text-transform: none;
}

.cp-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #d9dee3;
    border-top-color: #00a2ba;
    border-radius: 999px;
    animation: cp-spin .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes cp-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cp-spinner {
        animation-duration: 2.4s;
    }
}

/* --- messages Magento raised on the last cart request --- */
.cp-alert {
    flex: 0 0 auto;
    padding: 0 18px 12px;
}

.cp-alert[hidden] {
    display: none !important;
}

.cp-panel .cp-alert-line {
    margin: 0 0 6px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 18px;
    text-transform: none;
}

.cp-panel .cp-alert-error {
    background: #fdecec;
    border: 1px solid #f3c2c2;
    color: #8f2020;
}

.cp-panel .cp-alert-success {
    background: #edf7f0;
    border: 1px solid #bfe0cb;
    color: #1f6b3c;
}

.cp-panel .cp-alert-notice {
    background: #fdf6e3;
    border: 1px solid #ecd9a6;
    color: #7a5c14;
}

/* ------------------------------------------------------------------ *
 * Inline "Download quote" form (v8)
 *
 * Replaces the old flow, which navigated to the cart page and opened a
 * modal. The fields now drop straight into the panel under the button.
 * ------------------------------------------------------------------ */

#cp-quote-toggle.cp-open {
    border-color: #02bbd3;
    color: #02bbd3;
}

.cp-quote-form {
    margin: 10px 0 4px;
    padding: 12px;
    border: 1px solid #e3e7ea;
    border-radius: 8px;
    background: #fafbfc;
}

.cp-quote-form[hidden] {
    display: none;
}

.cp-q-row {
    margin-bottom: 10px;
}

.cp-q-row:last-of-type {
    margin-bottom: 12px;
}

.cp-q-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #55606a;
}

.cp-q-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.3;
    background: #fff;
    color: #2f3a44;
}

.cp-q-input:focus {
    outline: none;
    border-color: #02bbd3;
    box-shadow: 0 0 0 2px rgba(2, 187, 211, .18);
}

/* Radio pairs sit on one line; they wrap on a narrow panel. */
.cp-q-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cp-q-inline label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 13px;
    color: #2f3a44;
    cursor: pointer;
}

.cp-q-inline input[type="radio"] {
    margin: 0;
}

.cp-q-submit {
    width: 100%;
    margin: 0;
}

.cp-q-submit[disabled] {
    opacity: .65;
    cursor: default;
}

/* The PDF posts into this; it must never take up space. */
.cp-quote-sink {
    display: none;
    width: 0;
    height: 0;
    border: 0;
}