/* The components the public pages and the app share, after shell.css: the
   remaining button variants, the white card, form fields and their panels,
   messages, dialogs, the book-cover object, the FAQ accordion and the lean
   footer. One definition for both: the site links this file and so does the
   app's index.html. Tokens come from theme.css. */

:root {
  /* The cream page edge drawn as a book's spine strip. */
  --mk-rugrand: linear-gradient(to right, #d1c9c1 0%, #e9e1d7 4%, #f4ebe1 9.2%, #f8efe4 18.4%, #f5ece2 36.2%, #ece3d9 41.5%,
    #dbd3ca 46.8%, #ddd5cc 52.1%, #e7ded5 60%, #efe6dd 68.2%, #f9f0e6 76%, #f6ede3 80.6%, #f3eae0 86.8%, #f3eae0 100%);
}

/* ── buttons (.button and .button2 are in shell.css) ── */
.button.button3 { background: transparent; color: var(--danger-color); border: 2px dashed var(--danger-color); opacity: 0.8; box-shadow: none; }
.button.button3:hover, .button.button3:focus-visible { color: var(--danger-color); border-style: solid; opacity: 1; background: transparent; box-shadow: none; }
.button.button4 {
  color: #555; border: 2px solid #cfcfcf; background-color: #fff; background-image: linear-gradient(-180deg, #fff, #d5d5d526);
}
.button.button4:hover, .button.button4:focus-visible { color: var(--primary-color); border-color: var(--primary-color); }
.button:disabled, .button.disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.button .material-symbols-outlined { font-size: 22px; margin: -3px 6px 0 -6px; }
.button.small { font-size: 16px; padding: 7px 35px; }
button.button { font-family: inherit; }
/* Focus rings for the keyboard only (data-input is set by the page script). */
[data-input="pointer"] .button:focus { outline: none; }
.button:focus-visible { box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.35); }

/* ── page frame ── */
h1 { font-size: 38px; font-weight: 800; margin-bottom: 25px; }
.top-title { display: block; color: var(--primary-color); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.wrapper { background: #fff; border-radius: 48px; padding: 50px; margin-bottom: 50px; }
.wrapper.wrapper3 { background: #f8f0e2; }
@media (max-width: 767px) {
  h1 { font-size: 28px; margin-bottom: 15px; }
  .top-title { font-size: 16px; margin-bottom: 5px; }
  .wrapper { border-radius: 28px; padding: 25px 15px; margin-bottom: 25px; }
}

/* ── form fields ── */
.form-control, .form-select {
  height: 50px; border-radius: 20px; border: 2px solid var(--primary-tint); margin: 5px 0 15px; box-shadow: none;
}
.form-control { padding: 6px 15px; line-height: 36px; }
textarea.form-control { height: auto; line-height: 1.6; padding: 12px 15px; }
.form-control:focus, .form-select:focus { border-color: var(--soft-primary-color); box-shadow: none; }
.form-control::placeholder { color: #ccc; }
.form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset; }
.form-label { font-weight: 600; margin-bottom: 0; }
/* A peach panel that groups fields under a heading. */
.inputwrapper { background: #fcf7f1; border: 2px solid var(--soft-primary-color); border-radius: 20px; padding: 25px; margin-bottom: 25px; }
.inputwrapper h3 { font-size: 20px; font-weight: 700; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px dashed var(--primary-rule); }
.inputwrapper h4 { font-size: 18px; font-weight: 700; }
@media (max-width: 767px) { .inputwrapper { padding: 18px 15px; } }

/* ── messages ── */
.error, .success { color: #fff; padding: 20px; border-radius: 20px; font-weight: 600; }
.error { background: var(--danger-color); }
.success { background: var(--success-color); }
.error p, .success p { color: #fff; margin: 0; }
.warning { background: var(--soft-primary-color); color: var(--text-color); padding: 15px; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 15px; }
/* The small blue state pill (a book in the making). */
.info-pill { display: inline-flex; align-items: center; gap: 4px; background: #e7f1ff; color: #0b5ed7; border-radius: 100px; padding: 2px 12px; font-size: 14px; font-weight: 600; }
.error-pill { display: inline-flex; align-items: center; gap: 4px; background: #fdecea; color: var(--danger-color); border-radius: 100px; padding: 2px 12px; font-size: 14px; font-weight: 600; }

/* ── dialogs (Bootstrap's .modal markup) ── */
.modal-content { border-radius: 30px; border: 0; }
.modal-header { border-bottom: 0; padding: 25px 30px 10px; }
.modal-header .modal-title { font-weight: 700; }
.modal-body { padding: 10px 30px 20px; }
.modal-body .form-label { font-weight: 600; margin-bottom: 0; }
.modal-footer { justify-content: center; border-top: 0; padding: 0 30px 25px; gap: 10px; }
.modal-footer .button { font-size: 16px; padding: 7px 35px; margin: 0; }
@media (max-width: 767px) {
  .modal-header .modal-title { font-weight: 600; font-size: 16px; line-height: 120%; }
  .modal-header, .modal-body, .modal-footer { padding-left: 20px; padding-right: 20px; }
  .modal-footer .button { width: 100%; margin-bottom: 10px; }
}

/* ── the book-cover object: a flat cover drawn as a book with a spine strip,
   a hinge shade and a page block; tilted, flat on hover and on narrower screens ── */
.cover {
  display: block; position: relative; border-radius: 0 5px 5px 0; box-shadow: -9px 6px 10px rgb(40 25 10 / 30%);
  transform: perspective(1000px) rotateY(-5deg); transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s; opacity: 0.88; left: -3px;
}
.cover:hover, a:hover > .cover, a:focus-visible > .cover { transform: none; opacity: 1; box-shadow: -9px 6px 10px rgb(40 25 10 / 42%); }
.cover::before {
  content: ""; position: absolute; top: 0; left: calc(-1 * max(4px, 3.06%)); width: max(4px, 3.06%); height: 100%;
  background: var(--mk-rugrand);
}
.cover::after {
  content: ""; position: absolute; top: 0; left: 0; width: clamp(6px, 7%, 18px); height: 100%; pointer-events: none;
  background: linear-gradient(to right, rgb(40 25 10 / 18%), rgb(40 25 10 / 5%) 40%, rgb(40 25 10 / 0%) 60%, rgb(255 255 255 / 8%) 76%, rgb(255 255 255 / 0%));
}
.cover img { display: block; width: 100%; height: auto; border-radius: 0 5px 5px 0; }
.cover .border-right {
  position: absolute; top: 1%; bottom: 1%; right: calc(-1 * clamp(3px, 2.1%, 8px)); width: clamp(3px, 2.1%, 8px); border-radius: 0 2px 2px 0;
  background: linear-gradient(to right, rgb(60 40 20 / 0%), rgb(60 40 20 / 6%)), repeating-linear-gradient(to right, #fff 0, #fff 1px, #f2eee8 1px, #f2eee8 2px);
  box-shadow: inset -1px 0 0 rgb(60 40 20 / 26%);
}
/* A cover whose picture is not made yet: a sand page with a book glyph. */
.cover-blank { aspect-ratio: 216 / 303; background: #ede8df; display: flex; align-items: center; justify-content: center; border-radius: 0 5px 5px 0; }
.cover-blank .material-symbols-outlined { font-size: 44px; opacity: 0.45; }
/* A title laid over a cover's art, in the calm top third the art keeps clear. */
.cover-title { position: absolute; left: 0; right: 0; top: 9%; padding: 0 10%; text-align: center; pointer-events: none; }
.cover-title > span { display: block; color: #fff; font-size: 1.9rem; font-weight: 700; line-height: 1.1; text-shadow: 0 2px 6px rgb(0 0 0 / 45%); overflow-wrap: anywhere; }
/* The generic book's front, flat: the 3D model paints the same (book3d.ts paintGeneric). */
.cover-generic {
  aspect-ratio: 216 / 303; border-radius: 0 5px 5px 0; padding: 10% 9% 0; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 5% 80%, #fbd3ba 0 42%, transparent 42.2%), radial-gradient(circle at 95% 12%, #fff1e6 0 30%, transparent 30.2%), #fde3d2;
}
.cover-generic span { display: block; font-family: "Alegreya", Georgia, serif; font-weight: 700; font-size: clamp(18px, 2.3vw, 30px); line-height: 1.2; color: #4a3324; text-wrap: balance; }
@media (max-width: 1199px) { .cover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cover { transition: none; } }

/* ── FAQ accordion ── */
.homepage-faq .wrapper { min-height: 400px; }
.homepage-faq h2 { font-size: 34px; font-weight: 800; color: var(--primary-color); margin-bottom: 30px; }
.homepage-faq .accordion { --bs-accordion-border-width: 0; --bs-accordion-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-btn-focus-box-shadow: none; }
.custom-accordion-button {
  background: transparent; border: 0; padding: 10px 0 20px; margin-bottom: 10px; border-bottom: 1px dashed #ddd !important;
  font-size: 18px; font-weight: 500; text-align: left; width: 100%; color: var(--text-color); box-shadow: none !important;
}
.custom-accordion-button:not(.collapsed) { color: var(--primary-color); background: transparent; }
.custom-accordion-button:hover { color: var(--primary-color); }
.homepage-faq .accordion-header { font-size: 1rem; margin-bottom: 0; }
.homepage-faq .accordion-body { padding: 0 0 25px; font-size: 17px; color: var(--text-color); }
@media (max-width: 767px) {
  .homepage-faq h2 { font-size: 26px; margin-bottom: 15px; }
  .custom-accordion-button { padding: 8px 0 16px; font-size: 16px; }
}

/* ── the lean footer: a hairline and the legal links (book, editor, cart, payment) ── */
.site-footer.site-footer-lean { background: none; padding: 0 0 25px; }
.sf-lean-rule { border: 0; border-top: 1px solid rgba(51, 41, 20, 0.08); margin: 0 0 18px; opacity: 1; }
.sf-lean-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.sf-lean-links a { font-size: 15px; color: #6b6257; }
.sf-lean-links a:hover { color: var(--primary-color); }