body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    margin: 0;
    /* overflow: hidden; Убирает прокрутку */
    background-image: url('background.jpg');
    /* Устанавливает изображение фона */
    background-size: cover;
    /* Масштабирует изображение, чтобы оно покрывало весь экран */
    background-position: center;
}

.container {
    display: flex; /* Enable flexbox for the container */
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* was: center */
    padding-top: 12px;           /* small breathing room at the top */
    height: 100vh;  /* Full viewport height */
    position: relative; /* Allow absolute positioning of child elements */
    gap: 5px; /* Add spacing between child elements */
}

input[type="radio"] {
    margin-right: 0px; /* Add spacing between the radio button and its label */
    accent-color: #007bff; /* Set the color of the radio button */
}

input[type="text"]:enabled {
    border: 2px solid #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

#contentInput {
    max-width: 50ch; 
    width: 90%; 
    /*width: 200px;  Set a consistent width */
    padding: 10px; /* Add padding for better usability */
    font-size: 18px !important; /* Set a readable font size */
    border: 2px solid #ccc; /* Add a border for styling */
    border-radius: 5px; /* Add rounded corners */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
    text-align: center; /* Center the placeholder and input text */
    background-color: #f9f9f9; /* Light background for better contrast */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for focus effects */
    position: relative; /* Ensure it is positioned relative to its container */
    z-index: 10; /* Bring it to the front if overlapping occurs */
}

.input-style {
  font-family: inherit; /* Match font style */
  font-size: inherit; /* Match font size */
  color: inherit; /* Match text color */
  margin-top: 10px; /* Add spacing above */
}

#contentInput:hover {
    border-color: #0056b3;
    /* Darker blue border on hover */
    box-shadow: 0 0 10px rgba(0, 86, 179, 0.5);
    /* Stronger shadow on hover */
}

#contentInput:focus {
    border-color: #0056b3;
    /* Darker blue border on focus */
    box-shadow: 0 0 10px rgba(0, 86, 179, 0.5);
    /* Stronger shadow on focus */
    outline: none;
    /* Removes the default focus outline */
}

#scanLabel {
  font-family: inherit;
  font-size: 18px !important; /* match #contentInput */
  color: #000 !important;                   /* black text */
  margin: 10px auto 0;                      /* center the pill */
  padding: 4px 10px;                        /* breathing room */
  background: rgba(255, 255, 255, 0.85);    /* very light, slightly transparent */
  border-radius: 10px;                      /* soft edges */
  display: inline-block;                    /* background hugs text */
  text-align: center;         /* match #contentInput text alignment */
}

#scanLabel a,
#scanLabel a:visited,
#scanLabel a:hover,
#scanLabel a:focus {
  color: revert !important;                 /* browser default link colors */
  text-decoration: revert;                  /* default underline behavior */
  text-shadow: none !important;             /* remove previous glow */
}

button {
    width: 150px;
    /* Set a consistent width for all buttons */
    /*padding: 15px 30px;*/
    padding: 10px;
    font-size: 18px !important;
    /* Set a readable font size */
    margin: 5px 5px 0; /* reduce bottom space under the button */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

button:hover {
    background-color: #007bff;
    color: white;
}

button:active {
    background-color: #0056b3;
}

button:enabled {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

button:disabled {
    background-color: #ccc;
    /* Set a grey background */
    color: #666;
    /* Set a lighter text color */
    cursor: not-allowed;
    /* Show a "not-allowed" cursor */
    border: 1px solid #aaa;
    /* Optional: Adjust border color */
}

button:last-child {
    margin-bottom: 0; /* ensure no extra space if it’s the last element */
}

.viewer-wrap {
  position: relative;
  height: 75vh;                 /* tall-first sizing */
  width: min(100vw, 75vh);      /* width never exceeds height */
  margin: 0 auto;               /* center horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;
}

model-viewer {
  width: 100%;                  
  height: 100%;                 
  display: block;
  filter: brightness(1.5) contrast(0.9);
}

/* Clickable QR badge in the lower-right corner of the viewer */
#qrBadge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column-reverse;  /* put text above QR */
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  text-decoration: none; /* keep the whole badge clean; label shows underline */
  z-index: 30; /* above the viewer */
}

#qrBadge img {
  width: 100px;   /* doubled */
  height: 100px;  /* doubled */
  display: block;
}

#qrBadge .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

#qrBadge .caption {
  font-size: 20px;
  font-weight: 500;
  color: #111;              /* normal text */
  text-decoration: none;    /* no underline */
}

#qrBadge .label {
  font-size: 20px;
  font-weight: 600;
  color: #0d6efd;           /* link-like blue */
  text-decoration: underline;
}

#qrBadge:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.viewer-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 25; /* above the viewer, below QR (30) */
  color: #fff;
  background: rgba(0, 0, 0, 0.35); /* transparent overlay */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none; /* do not block model interactions */
}

.overlay-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 16px;
  line-height: 1.25;
  text-align: left; /* align list entries to the left */
}

.overlay-list li {
  display: grid;
  grid-template-columns: auto 1fr; /* check on the left, text on the right */
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}

.overlay-list li::before {
  content: "✅";
  font-size: 18px;
}

.overlay-list .overlay-caption {
  display: block;            /* span full width, no grid columns */
  font-size: 20px;           /* larger than list items (16px) */
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;           /* small space below caption */
}

.overlay-list .overlay-caption::before {
  content: none;             /* no check icon for caption */
}

/* Compact styles for the read-more line */
.read-more {
  margin: 2px 0 0;       /* minimal space below the button */
  font-size: 14px;       /* slightly smaller text */
  text-align: center;    /* center under inputs/buttons */
  color: #ffffff;
}
.read-more a {
  color: #98c1ff;        /* keep link readable on light bg */
  text-decoration: underline;
}

/* Compact styles for the new CTA line */
.cta-bottom {
  margin: 2px 0 0;      /* minimal space under the read-more line */
  font-size: 14px;      /* consistent with read-more */
  text-align: center;   /* center under inputs/buttons */
  color: #ffffff;
}
.cta-bottom a {
  color: #98c1ff;
  text-decoration: underline;
}

/* Semi-transparent info panel styles */
.info-panel {
  max-width: 50ch; 
  width: 90%; 
  background: rgba(0, 0, 0, 0.35);  /*  very light, semi-transparent */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-flex;                     /* shrink to content */
  flex-direction: column;
  align-items: center;
  gap: 2px;                                 /* tight spacing between lines */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Loading overlay styles */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-overlay.hidden {
  display: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Optional: small screens */
@media (max-width: 480px) {
  .viewer-overlay {
    padding: 6px 10px;
  }
  .overlay-list {
    font-size: 14px;
  }
  .overlay-list .overlay-caption {
    font-size: 18px;
  }
}