/* ===== WALL MOCKUP - FINAL FONT PANEL FIX ===== */

/* Entire right panel must NOT scroll */
.wall-mockup-page .wall-controls-side {
    position: sticky;
    top: 20px;
    max-height: none !important;
    overflow: visible !important;
}

/* Only the font grid scrolls */


.wall-mockup-page .font-options::-webkit-scrollbar {
    width: 7px;
}

.wall-mockup-page .font-options::-webkit-scrollbar-thumb {
    background: #c8c8c8;
    border-radius: 10px;
}

/* Font cards */
.wall-mockup-page .font-option {
    position: relative;
    height: auto !important;
    min-height: 72px;
    padding: 12px 9px;
    overflow: visible !important;
    box-sizing: border-box;
    transform: none !important;
}

.wall-mockup-page .font-option.selected {
    transform: none !important;
    border-color: #f1641e !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* FONT 1 / FONT 2 labels */
.wall-mockup-page .font-number,
.wall-mockup-page .font-option.selected .font-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 0;
    font-size: 22px !important;
    line-height: 1.05;
    font-weight: 600;
    text-align: center;
    color: #111111 !important;
}

/* Keep the old preview element available to existing JS, but invisible */
.wall-mockup-page .font-option .preview {
    position: absolute !important;
    left: -10000px !important;
    top: 0 !important;
    visibility: hidden !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Hide all old result/button systems on WallMockup */
.wall-mockup-page .font-dimension-info,
.wall-mockup-page .font-etsy-button,
.wall-mockup-page .mini-etsy-button,
.wall-mockup-page .wall-card-result {
    display: none !important;
}

/* Our ONE result row */
.wall-mockup-page .wall-width-result {
    display: none;
    width: 100%;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #eeeeee;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.wall-mockup-page .font-option.selected .wall-width-result {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wall-mockup-page .wall-width-value {
    font-size: 10px;
    line-height: 1.25;
    font-weight: 600;
    color: #555555;
    white-space: nowrap;
}

.wall-mockup-page .wall-width-etsy {
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 4px;
    background: #f1641e;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
}

.wall-mockup-page .wall-width-etsy:hover {
    background: #d95616;
}

@media (max-width: 900px) {
    .wall-mockup-page .wall-controls-side {
        position: static;
    }

    .wall-mockup-page .font-options {
        max-height: 520px;
    }
}

/* =========================================
   FORCE SCROLL ONLY ON FONT AREA
========================================= */

.wall-mockup-page .wall-controls-side {
    max-height: none !important;
    height: auto !important;

    overflow: visible !important;
    overflow-y: visible !important;
}


/* copied Font Preview section itself must NOT scroll */

.wall-mockup-page #fonts {
    max-height: none !important;
    height: auto !important;

    overflow: visible !important;
    overflow-y: visible !important;
}


/* THIS IS THE ONLY SCROLL AREA */

.wall-mockup-page .wall-font-scroll {
    display: grid;

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

    gap: 14px;

    max-height: 570px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 6px 10px 12px 2px;

    align-content: start;
}


/* scrollbar */

.wall-mockup-page .wall-font-scroll::-webkit-scrollbar {
    width: 7px;
}

.wall-mockup-page .wall-font-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.wall-mockup-page .wall-font-scroll::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 10px;
}

/* =========================================
   FONT CARDS SMALLER + CLEANER
========================================= */

.wall-mockup-page .font-option {
    min-height: 118px !important;
    padding: 14px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
}

.wall-mockup-page .font-option .font-number {
    font-size: 15px !important;
    line-height: 1.1 !important;
    color: #111 !important;
    text-align: center !important;
    margin: 0 !important;
}

.wall-mockup-page .font-option .preview {
    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    margin: 0 !important;
}


/* =========================================
   RESULT SHOULD NOT SHOW BEFORE CLICK
========================================= */

.wall-mockup-page .wall-font-result {
    display: none !important;
}

.wall-mockup-page .font-option.selected .wall-font-result {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;

    width: 100% !important;

    margin-top: 4px !important;
    padding: 8px 10px !important;

    background: #fff4eb !important;
    border: 1px solid #f27a2b !important;
    border-radius: 8px !important;
}


/* approx width text */

.wall-mockup-page .wall-font-width {
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: #222 !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: nowrap !important;
}


/* SINGLE ETSY BUTTON */

.wall-mockup-page .wall-font-etsy {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 6px 10px !important;
    min-width: 54px !important;

    background: #f27a2b !important;
    color: #fff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}


/* remove ugly purple default link look */

.wall-mockup-page .wall-font-etsy:visited,
.wall-mockup-page .wall-font-etsy:hover,
.wall-mockup-page .wall-font-etsy:active {
    color: #fff !important;
    text-decoration: none !important;
}


/* =========================================
   FONT 11 DIGITS -> FONT 9 ITALIC LOOK
========================================= */

.wall-mockup-page .ms09-digit-italic {
    font-family: "MS09", serif !important;
    font-style: italic !important;
}


/* FONT 4 digits helper still needed */

.wall-mockup-page .ms07-digit {
    font-family: "MS07", cursive !important;
}

/* =========================================
   COMPACT FONT CARDS
========================================= */

/* NORMAL CARD = SMALL */
.wall-mockup-page .font-option {
    min-height: 64px !important;
    height: 64px !important;

    padding: 8px 7px !important;

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

    gap: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* FONT NAME */
.wall-mockup-page .font-number {
    min-height: 0 !important;

    margin: 0 !important;

    font-size: 17px !important;
    line-height: 1 !important;

    color: #111 !important;
}


/* =========================================
   SELECTED CARD = EXPANDS
========================================= */

.wall-mockup-page .font-option.selected {
    height: auto !important;
    min-height: 118px !important;

    padding: 9px 8px !important;

    justify-content: flex-start !important;

    overflow: hidden !important;
}


/* selected font name */
.wall-mockup-page .font-option.selected .font-number {
    font-size: 18px !important;

    margin-bottom: 8px !important;
}


/* =========================================
   WIDTH + ETSY
========================================= */

.wall-mockup-page .wall-font-result {
    display: none !important;
}


.wall-mockup-page .font-option.selected
.wall-font-result {

    display: flex !important;

    width: 100% !important;

    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 7px !important;

    box-sizing: border-box !important;

    background: #fff4eb !important;

    border: 1px solid #f1641e !important;
    border-radius: 6px !important;
}


/* WIDTH TEXT */

.wall-mockup-page .wall-font-width {
    width: 100% !important;

    text-align: center !important;

    font-size: 11px !important;
    line-height: 1.2 !important;

    color: #222 !important;

    white-space: nowrap !important;
}


/* ETSY NOW BELOW WIDTH */

.wall-mockup-page .wall-font-etsy {
    display: flex !important;

    width: 100% !important;

    min-width: 0 !important;

    padding: 6px 5px !important;

    box-sizing: border-box !important;

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

    background: #f1641e !important;

    color: #fff !important;

    border-radius: 5px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

/* =========================================
   COMPACT HEIGHT AREA
========================================= */

.wall-mockup-page .wall-controls-side select {
    width: 170px !important;

    height: 42px !important;

    padding: 6px 10px !important;

    font-size: 15px !important;

    margin: 0 !important;
}


/* HEIGHT LABEL */

.wall-mockup-page .wall-controls-side label {
    margin-bottom: 5px !important;

    font-size: 10px !important;
    line-height: 1 !important;
}


/* LESS EMPTY SPACE ABOVE FONTS */

.wall-mockup-page #fonts {
    padding-top: 0 !important;
}


.wall-mockup-page #fonts > div:first-child {
    margin-bottom: 10px !important;
}

/* =========================================
   REMOVE EMPTY SPACE ABOVE HEIGHT
========================================= */

.wall-mockup-page .wall-controls-side {
    padding-top: 19px !important;
}


.wall-mockup-page #fonts {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


.wall-mockup-page #fonts > *:first-child {
    margin-top: 0 !important;
}


/* If the copied Font Preview section
   has its own header, hide it */

.wall-mockup-page #fonts .font-preview-header,
.wall-mockup-page #fonts .preview-header,
.wall-mockup-page #fonts .section-header {
    display: none !important;
}


/* HEIGHT group */

.wall-mockup-page #fonts .height-selector,
.wall-mockup-page #fonts .height-control,
.wall-mockup-page #fonts .preview-controls {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================
   DRAGGABLE WALL TEXT
========================================= */

.wall-mockup-page .wall-sign-preview {
    cursor: grab !important;

    user-select: none !important;
    -webkit-user-select: none !important;

    touch-action: none !important;

    z-index: 10 !important;
}


.wall-mockup-page .wall-sign-preview.dragging {
    cursor: grabbing !important;
}

/* =========================================
   YOUR PICTURE
========================================= */

.wall-mockup-page .wall-upload-main-button {
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}


.wall-mockup-page .wall-upload-main-button.active {
    background: #fff4eb !important;
    color: #f1641e !important;

    box-shadow:
        inset 0 0 0 1px #f1641e;
}


.wall-mockup-page .your-picture-settings {
    margin-top: 10px;

    padding: 10px 12px;

    border: 1px solid #e4e4e4;
    border-radius: 7px;

    background: #fafafa;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.wall-mockup-page .your-picture-settings label {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 700;

    color: #333;
}


.wall-mockup-page .your-picture-settings input {
    width: 90px;

    padding: 6px 8px;

    border: 1px solid #cccccc;
    border-radius: 5px;
}

/* =========================================
   COLOR SELECTOR
========================================= */

.wall-mockup-page .wall-color-selector {
    width: 100%;

    margin: 12px 0 14px;

    padding: 0;

    box-sizing: border-box;
}


.wall-mockup-page .wall-color-title {
    margin-bottom: 7px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    line-height: 1;

    font-weight: 700;

    color: #555;

    letter-spacing: 0.6px;
}


.wall-mockup-page .wall-color-grid {
    display: grid;

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

    gap: 6px;
}


.wall-mockup-page .wall-color-button {
    appearance: none;
    -webkit-appearance: none;

    min-width: 0;

    height: 38px;

    padding: 5px 6px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 6px;

    border: 1px solid #d8d8d8;
    border-radius: 6px;

    background: #fff;

    color: #222;

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    text-align: left;
}


.wall-mockup-page
.wall-color-button:hover {
    border-color: #999;
}


.wall-mockup-page
.wall-color-button.active {
    border-color: #f1641e;

    box-shadow:
        inset 0 0 0 1px #f1641e;
}


.wall-mockup-page .wall-color-swatch {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    border-radius: 50%;

    border: 1px solid
        rgba(0, 0, 0, 0.18);

    box-sizing: border-box;
}


.wall-mockup-page .wall-color-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

/* =========================================
   ORDER DETAILS
========================================= */

.wall-mockup-page .wall-order-details {
    width: 100%;

    margin-top: 14px;
    padding: 13px;

    box-sizing: border-box;

    background: #fff;

    border: 1px solid #dddddd;
    border-radius: 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.wall-mockup-page .wall-order-title {
    margin-bottom: 9px;

    font-size: 11px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.7px;

    color: #222;
}


.wall-mockup-page .wall-order-lines {
    display: grid;

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

    gap: 6px 14px;
}


.wall-mockup-page .wall-order-line {
    min-width: 0;

    font-size: 11px;
    line-height: 1.35;

    color: #333;

    overflow-wrap: anywhere;
}


.wall-mockup-page .wall-order-line strong {
    font-weight: 700;
}


/* Text can have several lines */

.wall-mockup-page #wallOrderText {
    white-space: pre-line;
}


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

.wall-mockup-page .wall-order-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 11px;
}


.wall-mockup-page .wall-copy-details,
.wall-mockup-page .wall-continue-etsy {
    min-width: 0;
    min-height: 38px;

    padding: 8px 9px;

    box-sizing: border-box;

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

    border-radius: 6px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    text-align: center;

    cursor: pointer;
}


/* COPY */

.wall-mockup-page .wall-copy-details {
    border: 1px solid #222;

    background: #fff;

    color: #222;
}


.wall-mockup-page
.wall-copy-details:hover {
    background: #f4f4f4;
}


/* ETSY */

.wall-mockup-page .wall-continue-etsy {
    border: 1px solid #f1641e;

    background: #f1641e;

    color: #fff !important;

    text-decoration: none !important;
}


.wall-mockup-page
.wall-continue-etsy:hover {
    background: #d95516;
}


/* =========================================
   COPIED MESSAGE
========================================= */

.wall-mockup-page .wall-copy-message {
    min-height: 14px;

    margin-top: 7px;

    font-size: 10px;
    line-height: 1.3;

    color: #555;
}

/* =========================================
   LEFT STATIC INFO
========================================= */

.wall-mockup-page .wall-left-static-info {
    width: 100%;

    margin-top: 16px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(0, 1.2fr)
        auto;

    gap: 10px;

    align-items: stretch;

    box-sizing: border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* PREVIEW NOTE */

.wall-mockup-page .wall-left-preview-note {
    padding: 11px 14px;

    display: flex;
    align-items: center;

    background: #faf3ee;

    border-left: 3px solid #f1641e;
    border-radius: 4px;

    color: #555;

    font-size: 11px;
    line-height: 1.4;
}


.wall-mockup-page
.wall-left-preview-note strong {
    color: #222;

    margin-right: 4px;

    white-space: nowrap;
}


/* WIDTH NOTE */

.wall-mockup-page .wall-left-width-note {
    padding: 10px 12px;

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

    text-align: center;

    color: #555;

    font-size: 11px;
    line-height: 1.4;
}


/* ETSY BUTTON */

.wall-mockup-page .wall-left-etsy-button {
    min-width: 165px;

    padding: 10px 16px;

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

    box-sizing: border-box;

    background: #f1641e;

    border-radius: 6px;

    color: #fff !important;

    text-decoration: none !important;

    text-align: center;

    font-size: 11px;
    font-weight: 700;
}


.wall-mockup-page
.wall-left-etsy-button:hover {
    background: #d95516;
}


/* MOBILE */

@media (max-width: 700px) {

    .wall-mockup-page
    .wall-left-static-info {

        grid-template-columns: 1fr;

    }


    .wall-mockup-page
    .wall-left-etsy-button {

        width: 100%;
    }

}

/* =========================================
   WALL MOCKUP COLORS
========================================= */

.wall-colors-section {
    width: 100%;
    max-width: 1500px;

    margin: 35px auto 0;

    padding-top: 25px;

    border-top: 1px solid #e5e5e5;

    box-sizing: border-box;
}


.wall-colors-section h2 {
    margin: 0 0 5px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 20px;
    font-weight: 700;

    color: #161616;
}


.wall-colors-section p {
    margin: 0 0 14px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    color: #777;
}


/* SQUARE IMAGE */

.wall-color-chart-button {
    width: 260px;
    height: 260px;

    padding: 0;

    display: block;

    overflow: hidden;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #fff;

    cursor: zoom-in;
}


.wall-color-chart-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   MODAL
========================================= */

.wall-color-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

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

    padding: 30px;

    box-sizing: border-box;

    background:
        rgba(0, 0, 0, 0.82);
}


.wall-color-modal.open {
    display: flex;
}


.wall-color-modal-image {
    display: block;

    max-width: min(900px, 92vw);
    max-height: 88vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    background: #fff;

    box-shadow:
        0 15px 50px
        rgba(0, 0, 0, 0.4);
}


.wall-color-modal-close {
    position: fixed;

    top: 20px;
    right: 25px;

    width: 42px;
    height: 42px;

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

    border: 0;
    border-radius: 50%;

    background: #fff;

    color: #111;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    z-index: 100000;
}


/* MOBILE */

@media (max-width: 700px) {

    .wall-colors-section {
        margin-top: 25px;
        padding-top: 20px;
    }


    .wall-color-chart-button {
        width: 190px;
        height: 190px;
    }


    .wall-color-modal {
        padding: 15px;
    }


    .wall-color-modal-image {
        max-width: 96vw;
        max-height: 84vh;
    }

}