/* The digital book's page (pages/carte-personalizata-digitala.html), loaded after site.css and produs.css: the hero is
   the product carousel (components/gallery.html, produs.css), then the six promises in a grid, the printed copy beside
   its cover. */

/* „Începe acum de la …”: the start price above the two options (owner, 7 Oct 2026, Carte Fermecată's buy box) */
.dg-start { margin: 18px 0 10px; font-weight: 700; font-size: 18px; color: var(--navy, #243b79); }

/* what follows the chosen option (produs.js [data-for-plan]): a wrapper that adds no box, so the carousel stays the
   hero's column and the step's title and text keep their spacing; [hidden] (site.css) takes it out */
.dg-for:not([hidden]) { display: contents; }

/* the chosen option's price by the h1 (components/buybox-carte.html), close under the rating */
.dg-price { margin: 0; }

/* three steps, the last carrying the whole offer: three columns wide, one on a phone (site.css .steps below 720px) */
@media (min-width: 1081px) { .steps.steps--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 721px) and (max-width: 1080px) { .steps.steps--3 { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }

/* what is in it: three columns of the product page's items, two on a tablet, one on a phone */
.dg-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin: 0; padding: 0; list-style: none; }

/* the printed copy: words beside the hardcover */
.dg-print { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.dg-print__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dg-print__text .h2, .dg-print__text .sub { margin: 0; }
.dg-print__art { margin: 0; justify-self: center; max-width: 300px; rotate: 3deg; }
.dg-print__art img { width: 100%; height: auto; filter: drop-shadow(0 24px 26px rgba(20, 30, 60, 0.22)); }

@media (max-width: 1080px) {
  .dg-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dg-gets { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dg-print { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dg-print__art { max-width: 220px; }
}

/* the buy box's photo upload (assets/js/photo-start.js): the yellow button with a camera; once a photo is picked, the
   photo round beside „Continuă” (a tap on it picks another); a HEIC outside Safari keeps a child's outline */
.dg-up { display: flex; flex-direction: column; }
/* the photo button: the buy box's main call to action; a photo dragged onto it on a computer works too */
.dg-pick { gap: 12px; }
.dg-pick__ico { width: 24px; height: 24px; flex: none; }
.dg-pick.is-over { outline: 3px dashed var(--navy); outline-offset: 3px; }
.is-going[data-photo-pick] { pointer-events: none; gap: 10px; }
.dg-spin { width: 20px; height: 20px; flex: none; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dg-spin .7s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dg-spin { animation-duration: 2s; } }


/* four short facts under the button (owner, 7 Oct 2026): one row of four on a computer, two by two on a phone; a line
   icon in a soft yellow circle, the fact under it in a few words */
.dg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 6px 0 2px; padding: 16px 0 4px; border-top: 1px solid var(--border); list-style: none; text-align: center; }
.dg-facts li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--navy); text-wrap: balance; }
.dg-facts__ico { box-sizing: content-box; width: 22px; height: 22px; padding: 11px; border-radius: 50%; background: #fbe6a0; stroke-width: 1.6; }
@media (max-width: 520px) {
  .dg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .dg-facts li { flex-direction: row; text-align: left; gap: 10px; }
  .dg-facts__ico { flex: none; width: 20px; height: 20px; padding: 9px; }
}