/* Dynamic Guest Book — structural frontend styles.
   Colors/fonts come from CSS custom properties written by CSS_Generator. */

.dgb-wrap {
  font-family: var(--dgb-font, sans-serif);
  color: var(--dgb-text, #222);
  max-width: 100%;
}

.dgb-frame {
  border: var(--dgb-border, 2px solid #c9a227);
  border-radius: var(--dgb-radius, 6px);
  background: var(--dgb-bg, transparent);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
}

.dgb-heading {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  color: inherit;
}

.dgb-heading--small {
  font-size: 1rem;
}

/* Forms */

.dgb-form .dgb-field {
  margin: 0 0 0.9rem;
}

.dgb-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: inherit;
}

.dgb-field--checkbox label {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: 400;
}

.dgb-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 4px;
  background: #fff;
  color: #222;
  font: inherit;
}

.dgb-required {
  color: #d33;
}

/* Honeypot (Spam_Guard): moved off-screen, never display:none — bots check for that. */
.dgb-hp {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dgb-hint {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0.35rem 0 0;
}

.dgb-form__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* The row spacing comes from the topbar, so heading and chevron share one center line. */
.dgb-form__topbar .dgb-heading {
  margin-bottom: 0;
}

.dgb-form-frame.is-collapsed .dgb-form__topbar {
  margin-bottom: 0;
}

.dgb-loggedin {
  margin: 0;
  font-size: 0.85rem;
}

/* Collapsible entry form (appearance setting "Entry toggle").
   Collapse uses grid-rows + visibility instead of display:none so TinyMCE
   always initializes with real layout (display:none breaks its selection). */

.dgb-form__topbar--clickable {
  cursor: pointer;
}

.dgb-form__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease, visibility 0.25s;
}

.dgb-form__body-inner {
  overflow: hidden;
  min-height: 0;
}

.dgb-form__body.is-collapsed {
  grid-template-rows: 0fr;
  visibility: hidden;
}

/* Chevron button: !important guards against theme button styles (background, border, shadow). */
.dgb-wrap .dgb-form__toggle {
  margin-left: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: inherit !important;
  cursor: pointer;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dgb-form__chevron {
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease;
}

.dgb-form__toggle[aria-expanded="false"] .dgb-form__chevron {
  transform: rotate(-90deg);
}

.dgb-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1rem 0 0;
}

.dgb-btn {
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dgb-btn--primary {
  background: var(--dgb-text, #222);
  color: var(--dgb-bg, #fff);
  border-color: transparent;
  font-weight: 600;
}

.dgb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dgb-linklike {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}

.linklike-actions-separator {
  display: flex;
  gap: 2rem;
}

@media (max-width: 600px) {
  .linklike-actions-separator {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    margin-left: 0;
  }
}

.dgb-actions--stacked {
  gap: 50px;
  margin-bottom: 10px;
}

.dgb-form__msg {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.dgb-form__msg.is-error {
  color: #e05252;
}

.dgb-form__msg.is-ok {
  color: #3fae5a;
}

.dgb-notice {
  padding: 0.6rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.dgb-notice--ok {
  background: rgba(63, 174, 90, 0.15);
  border: 1px solid #3fae5a;
}

.dgb-notice--error {
  background: rgba(224, 82, 82, 0.15);
  border: 1px solid #e05252;
}

/* Toolbar above the list (own framed container) */

.dgb-toolbar-frame {
  padding: 0.85rem 1.5rem;
}

.dgb-toolbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.dgb-toolbar__search {
  flex: 1 1 12rem;
}

.dgb-toolbar__year,
.dgb-toolbar__per-page {
  flex: 0 0 auto;
  width: auto;
}

/* Entries */

.dgb-entry {
  border-bottom: var(--dgb-divider, 1px solid rgba(128, 128, 128, 0.35));
  padding: 0.9rem 0;
}

.dgb-entry:last-child {
  border-bottom: none;
}

.dgb-entry__head {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

.dgb-entry__author {
  font-weight: 700;
  font-size: 1rem;
}

.dgb-entry__email {
  opacity: 0.7;
}

.dgb-entry__date {
  margin-left: auto;
  opacity: 0.7;
}

.dgb-entry__message {
  overflow-wrap: anywhere;
}

.dgb-entry__message img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.dgb-empty {
  opacity: 0.75;
  text-align: center;
  padding: 1.5rem 0;
}

/* Pagination */

.dgb-pagination {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.dgb-pagination button {
  min-width: 2.1rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dgb-pagination button[aria-current="page"] {
  background: var(--dgb-text, #222);
  color: var(--dgb-bg, #fff);
  font-weight: 700;
  border-color: transparent;
}

/* Preview */

.dgb-preview {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(128, 128, 128, 0.5);
}

/* Emoji / GIF picker */

.dgb-picker {
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 6px;
  margin: 0.75rem 0;
  background: rgba(128, 128, 128, 0.08);
  overflow: hidden;
}

.dgb-picker__tabs {
  display: flex;
  border-bottom: 1px solid rgba(128, 128, 128, 0.4);
}

.dgb-picker__tab {
  flex: 1;
  padding: 0.5rem;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: 0.65;
}

.dgb-picker__tab[aria-selected="true"] {
  opacity: 1;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 currentColor;
}

.dgb-picker__search {
  padding: 0.5rem;
}

.dgb-picker__cats {
  display: flex;
  gap: 0.15rem;
  padding: 0 0.5rem;
  overflow-x: auto;
}

.dgb-picker__cat {
  background: none;
  border: none;
  font-size: 1.15rem;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.7;
}

.dgb-picker__cat[aria-selected="true"] {
  opacity: 1;
  background: rgba(128, 128, 128, 0.25);
}

.dgb-picker__body {
  height: 14rem;
  overflow-y: auto;
  padding: 0.5rem;
}

.dgb-picker__emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr));
}

.dgb-picker__emoji {
  background: none;
  border: none;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.3rem;
  cursor: pointer;
  border-radius: 4px;
}

.dgb-picker__emoji:hover {
  background: rgba(128, 128, 128, 0.25);
}

.dgb-picker__gif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.4rem;
}

.dgb-picker__gif {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}

.dgb-picker__gif img {
  width: 100%;
  height: 6.5rem;
  object-fit: cover;
  display: block;
}

.dgb-picker__status {
  text-align: center;
  opacity: 0.7;
  padding: 0.75rem;
  font-size: 0.85rem;
}

.dgb-picker__toggle {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}