/* ── Book flip animation ─────────────────────────────────── */
.book {
    width: 80vw;
    max-width: 1300px;
    height: 40vw;
    max-height: 650px;
    position: relative;
    -webkit-perspective: 1500px;
    perspective: 1500px;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.25);
}
.book .page {
    position: absolute;
    top: 0;
    width: 50%;
    padding: min(4vw, 65px);
    height: 100%;
    color: #3b3b3b;
    font-size: min(2vw, 32.5px);
    -webkit-transition: -webkit-transform .8s ease;
    transition: transform .8s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    text-align: center;
    overflow: hidden;
}
.book .page.left  { left: 0; -webkit-transform-origin: right; transform-origin: right; overflow-wrap: break-word; }
.book .page.right { right: 0; -webkit-transform-origin: left; transform-origin: left; box-shadow: -8px 2px 20px 0px rgba(0,0,0,.25), inset 11px -5px 20px -15px rgba(0,0,0,.25); }
.book .page.current { z-index: 2; }
.book .current.right.page.turn  { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.book .current.left.page.turn   { -webkit-transform: rotateY(180deg);  transform: rotateY(180deg); }
.book .next.left.page           { -webkit-transform: rotateY(180deg);  transform: rotateY(180deg); }
.book .next.left.page.turn      { -webkit-transform: rotateY(0deg);    transform: rotateY(0deg); }
.book .prev.right.page          { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.book .prev.right.page.turn     { -webkit-transform: rotateY(0deg);    transform: rotateY(0deg); }

.btns        { text-align: center; width: 600px; margin: 20px 0; }
.btns button { width: 10rem; }

#canvas {
    height: 600px;
    width: 600px;
    background-color: #ffffff;
    cursor: default;
    border: 1px solid black;
}
img { max-width: 100%; }

.book-image-selector { cursor: pointer; }

#page_grid {
    height: 30rem;
    width: 30rem;
    position: relative;
    background: #c1c1c1;
    margin: 0 auto;
    overflow: hidden;
}
.page-item {
    display: inline-block;
    position: absolute;
    margin: 0;
    cursor: pointer;
}
.page-item .ui-resizable-handle,
.page-item .ui-rotatable-handle  { display: none !important; }
.page-item:hover .ui-resizable-handle { display: block !important; }
.page-item:hover .ui-rotatable-handle { display: block !important; background-color: #2d2d2d; }
.page-item:hover { border: 2px lightgrey dashed; }

.list-group-item        { cursor: grab; }
.list-group-item:active { cursor: grabbing; }

.asColorPicker-dropdown { max-width: 260px !important; }
.flipped-img { transform: scale(-1, 1) !important; }
.apply-font  { overflow-wrap: break-word; }

/* ── Editor layout ───────────────────────────────────────── */
.editor-section { height: calc(80vw - 4rem); margin-top: 4rem; overflow: hidden; }
.book-area      { padding: 1rem 1.5rem 0; }
.book-controls  { width: 80vw; margin: 1.6vw auto .75rem; text-align: center; }
.cover-switch-btn { width: fit-content; }
.settings-card  { width: 80vw; max-width: 1300px; margin: .75rem auto 0; border-radius: .75rem !important; }

/* Settings toolbar helpers */
.settings-label { display: block; font-size: .72rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.format-label   { display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; padding: .5rem .75rem; line-height: 1.3; overflow: hidden; white-space: normal; }
.format-label-text { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
.product-img    { max-height: 3.5rem; max-width: 100%; width: auto; height: auto; }

/* ── Book text ───────────────────────────────────────────── */
.book-text-center {
    font-family: 'Kalam', cursive;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#hint_click_text {
    display: none;
    font-size: min(1.2vw, 19.5px);
    position: absolute;
    bottom: 1rem;
    margin: auto;
    left: 0;
    right: 0;
}
#book_text_save_button { display: none; margin-top: min(8.8vw, 143px); }

.placeholder-inner { height: 100%; cursor: pointer; }
.book-image-hint   { font-size: min(1.6vw, 26px) !important; top: 70%; }

/* ── Cover ───────────────────────────────────────────────── */
.cover {
    margin: auto;
    background-color: white;
    width: 80vw;
    max-width: 1300px;
    height: 40vw;
    max-height: 650px;
    position: relative;
    perspective: 1500px;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.25);
    display: none;
}
.cover-col          { height: min(40vw, 650px); width: min(39.2vw, 637px); padding-right: 0; }
.cover-front-col    { height: min(40vw, 650px); width: min(39.2vw, 637px); padding-left: 0; }
.cover-spine        { height: min(40vw, 650px); max-width: min(1.6vw, 26px) !important; padding: 0; }
.cover-image-wrapper { height: 100%; width: 100%; margin: auto; }
.cover-image-hint   { font-size: 1rem !important; top: 80%; cursor: pointer; }
.cover-logo         { width: min(6.4vw, 104px); height: min(6.4vw, 104px); }

#book_title_placeholder { writing-mode: vertical-rl; font-size: min(1.04vw, 17px); margin: min(1.6vw, 26px) 0 0 0; }
#back_cover_credits {
    position: absolute;
    width: min(6.4vw, 104px);
    height: min(6.4vw, 104px);
    text-align: center;
    cursor: pointer;
    bottom: min(0.8vw, 13px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    left: min(16vw, 260px);
}

/* ── Book format ─────────────────────────────────────────── */
.product-img { height: 5rem; }

/* ── Image modal ─────────────────────────────────────────── */
.upload-sidebar { border-right: 1px solid lightgrey; padding: 0 2rem 1rem 1rem; }
.upload-label   { color: #6b6b6b; }
.upload-divider { width: 100%; height: 20px; border-bottom: 1px solid lightgrey; text-align: center; margin: 5rem 0; }
.divider-text   { font-size: 20px; background-color: white; padding: 0 10px; color: grey; }
.gallery-col    { padding: 0 0 1rem 2rem; }
.gallery-img    { background-color: whitesmoke; }
.quality-badge  { position: absolute; bottom: 10px; left: 10px; display: none; }

/* ── Illustration editor ─────────────────────────────────── */
.illus-sidebar    { border-right: 1px solid lightgrey; }
.illus-main-col   { border-right: 1px solid lightgrey; }
.layers-col       { border-right: 1px solid lightgrey; padding: 0 1rem 1rem 2rem; }
.clear-all-btn    { float: right; padding: 0.3rem 2rem; }
.layers-hint      { color: lightgrey; }
.sticker-search-group { padding: 3px; }
.sticker-themes-col   { height: 5rem; }
.sticker-theme-row    { overflow-y: scroll; height: calc(80vw - 500px); text-align: center; }
.sticker-row          { display: none; }
.sticker-hint         { float: right; color: lightgrey; }
.sticker-by-theme     { overflow-y: scroll; height: calc(80vw - 500px); }

#background_color { width: 5rem; }
#PPI_text         { color: grey; display: none; }
#page_layers      { overflow-y: scroll; height: 40vw; }

/* ── Toast ───────────────────────────────────────────────── */
.editor-toast { position: fixed; top: 6rem; right: 6rem; z-index: 1100; }

/* ── book_check.html specific ───────────────────────────── */
/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/* Email / phone icon padding */
.input-icon-lg  { padding-left: 2.5rem; }
.input-icon-sm  { padding-left: 1.8rem; }
.input-uppercase { text-transform: uppercase; }

/* Booking card */
.check-card { margin: 3rem; padding: 1rem 2rem; }

/* Book controls bar */
.check-btns { margin: auto; margin-top: 2rem; }

/* Price row */
.price-tax  { font-size: small !important; }