/* DBR Greeting Cards — frontend (produktside). Neutral, falder ind i temaet.
   Accentfarven sættes inline pr. produkt (--dbrgc-accent) fra indstillingerne. */

/* Håndskrift-font (tilvalg) — bundtet lokalt, hentes kun når reglen bruges. */
@font-face {
	font-family: "DBRGC Handwriting";
	src: url("../fonts/caveat-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.dbrgc {
	--dbrgc-accent: #327039;
	--dbrgc-border: rgba(0, 0, 0, 0.14);
	--dbrgc-card-radius: 12px;
	margin: 18px 0;
}
.dbrgc-shape-square { --dbrgc-card-radius: 0px; }

.dbrgc-head { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

.dbrgc-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.dbrgc-toggle input { width: 18px; height: 18px; accent-color: var(--dbrgc-accent); flex: none; }

/* Popup-trigger */
.dbrgc-open-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px; border: 1.5px solid var(--dbrgc-accent);
	background: #fff; color: var(--dbrgc-accent);
	border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.dbrgc-open-btn:hover { background: var(--dbrgc-accent); color: #fff; }
/* × som en del af trigger-knappen — fjerner det valgte kort uden at åbne popup'en. */
.dbrgc-open-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; font-size: 16px; line-height: 1; opacity: 0.75; }
.dbrgc-open-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); }
.dbrgc-open-btn:hover .dbrgc-open-x:hover { background: rgba(255, 255, 255, 0.25); }
.dbrgc-open-x[hidden] { display: none; }

.dbrgc-panel { margin-top: 16px; position: relative; }
.dbrgc-panel[hidden] { display: none; }

/* Anledninger-filter (chips) */
.dbrgc-occ-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dbrgc-chip { border: 1.5px solid var(--dbrgc-border); background: #fff; color: #333; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dbrgc-chip:hover { border-color: var(--dbrgc-accent); }
.dbrgc-chip.is-active { background: var(--dbrgc-accent); border-color: var(--dbrgc-accent); color: #fff; }

/* Kort-valg — én vandret række man kan swipe/bladre i (pile i stedet for scrollbar). */
.dbrgc-carousel { position: relative; margin-bottom: 16px; }
.dbrgc-cards { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 10px 2px 8px; scrollbar-width: none; scroll-padding-inline: 44px; }
.dbrgc-cards::-webkit-scrollbar { display: none; }
.dbrgc-card { position: relative; cursor: pointer; display: flex; flex: 0 0 auto; width: 150px; scroll-snap-align: start; }
/* Bladre-pile (erstatter scrollbar) — vises kun når rækken kan scrolles. */
.dbrgc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--dbrgc-border); border-radius: 50%; background: #fff; color: #333; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.dbrgc-arrow:hover { border-color: var(--dbrgc-accent); color: var(--dbrgc-accent); }
.dbrgc-arrow[hidden] { display: none; }
.dbrgc-arrow-prev { left: -6px; }
.dbrgc-arrow-next { right: -6px; }
.dbrgc-card input { position: absolute; opacity: 0; pointer-events: none; }
.dbrgc-card-inner { flex: 1; display: flex; flex-direction: column; border: 2px solid var(--dbrgc-border); border-radius: var(--dbrgc-card-radius); overflow: hidden; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.dbrgc-card input:checked + .dbrgc-card-inner { border-color: var(--dbrgc-accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.dbrgc-card-thumb { flex: 0 0 auto; display: block; aspect-ratio: 16 / 10; background: #f3f3f1; }
.dbrgc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dbrgc-card-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 13px; color: #777; padding: 6px; text-align: center; }
.dbrgc-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; }
.dbrgc-card-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.dbrgc-card-price { font-size: 12px; font-weight: 700; color: var(--dbrgc-accent); white-space: nowrap; }
.dbrgc-card-price.is-free { color: #2e7d32; }
/* "Nej tak"-mulighed — fylder hele kort-højden, tekst centreret. */
.dbrgc-card-none .dbrgc-card-thumb { flex: 1 1 auto; aspect-ratio: auto; background: #f7f7f5; }
.dbrgc-card-none .dbrgc-card-noimg { font-weight: 600; color: #555; }

/* Popup: × til at fjerne det valgte kort (kun modal-visning; "Nej tak"-flisen er væk). */
.dbrgc-card-remove { display: none; position: absolute; top: 6px; right: 6px; z-index: 3; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 18px; line-height: 26px; text-align: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.dbrgc-card-remove:hover { background: var(--dbrgc-accent); }
.dbrgc-view-modal .dbrgc-card input:checked ~ .dbrgc-card-remove { display: block; }

/* "Eget billede"-flise. */
.dbrgc-card-custom .dbrgc-card-thumb { background: #f5f8f5; }
.dbrgc-card-uploadic { flex-direction: column; gap: 4px; color: var(--dbrgc-accent); font-weight: 600; }
.dbrgc-card-uploadic svg { opacity: .9; }

/* Upload-felt (vises kun når "Eget billede" er valgt). */
.dbrgc-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.dbrgc-upload[hidden] { display: none; }
.dbrgc-upload-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.dbrgc-upload-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--dbrgc-accent); background: #fff; color: var(--dbrgc-accent); border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.dbrgc-upload-btn:hover { background: var(--dbrgc-accent); color: #fff; }
.dbrgc-upload-btn.is-busy { opacity: .6; pointer-events: none; }
.dbrgc-upload-status { font-size: 13px; color: #5a6b5c; font-weight: 600; }
.dbrgc-upload-status.is-error { color: #c0392b; }

/* Editor + preview — et rigtigt kort med forside (billede) og bagside (hilsen). */
.dbrgc-preview { max-width: 360px; margin-bottom: 12px; }
/* I popup'en fylder kortet hele boksens bredde. */
.dbrgc-view-modal .dbrgc-preview { max-width: 100%; }
.dbrgc-flip { perspective: 1400px; }
.dbrgc-flip-inner { position: relative; aspect-ratio: 3 / 2; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dbrgc-flip.is-flipped .dbrgc-flip-inner { transform: rotateY(180deg); }
.dbrgc-flip-face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.dbrgc-flip-front { background: #eceae6 center / cover no-repeat; }
.dbrgc-flip-front.is-empty { display: flex; align-items: center; justify-content: center; color: #9aa0a6; font-size: 13px; }
.dbrgc-flip-front.is-empty::after { content: "Vælg et kort"; }
.dbrgc-flip-back { transform: rotateY(180deg); background: #fdfdfb; display: flex; align-items: center; justify-content: center; padding: 24px 22px; border: 1px solid rgba(0, 0, 0, 0.06); }
.dbrgc-flip-tag { position: absolute; top: 10px; left: 12px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.45); padding: 3px 8px; border-radius: 999px; }
.dbrgc-flip-back .dbrgc-flip-tag { color: #9aa0a6; background: rgba(0, 0, 0, 0.05); }
.dbrgc-preview-text { display: block; text-align: center; white-space: pre-wrap; word-break: break-word; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.6; color: #2a2a2a; }
.dbrgc-preview-text:empty::before { content: attr(data-ph); color: #9aa0a6; font-style: italic; font-family: inherit; }
/* Håndskrift til hilsenen (tilvalg) — større, da håndskrift læses mindre. */
.dbrgc-handwriting .dbrgc-preview-text { font-family: "DBRGC Handwriting", "Segoe Script", cursive; font-size: 24px; line-height: 1.4; color: #1f2a44; }
.dbrgc-flip-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 6px 12px; border: 1.5px solid var(--dbrgc-border); background: #fff; color: #555; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.dbrgc-flip-toggle:hover { border-color: var(--dbrgc-accent); color: var(--dbrgc-accent); }
.dbrgc-preview { text-align: center; }
.dbrgc-msg-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dbrgc-msg { width: 100%; border: 1.5px solid var(--dbrgc-accent); border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 120px; box-sizing: border-box; }
.dbrgc-counter { margin-top: 6px; font-size: 12px; color: #777; }
.dbrgc-counter.is-max span[data-dbrgc-count] { color: var(--dbrgc-accent); font-weight: 700; }

/* Editoren skjules, når "Nej tak" er valgt (styret af JS-klassen). */
.dbrgc-editor.is-hidden { display: none; }

/* Popup-visning: panelet bliver et centreret modal med mørk baggrund. */
.dbrgc-modal-close, .dbrgc-modal-actions { display: none; }
.dbrgc-view-modal .dbrgc-panel:not([hidden]) {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 100000; width: min(460px, 92vw); max-height: 88vh; overflow-y: auto;
	margin: 0; padding: 22px; background: #fff; border-radius: 16px;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 20px 60px rgba(0, 0, 0, 0.3);
}
.dbrgc-view-modal .dbrgc-panel:not([hidden]) .dbrgc-modal-close {
	display: block; position: absolute; top: 12px; right: 14px;
	border: none; background: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer;
}
.dbrgc-view-modal .dbrgc-panel:not([hidden]) .dbrgc-modal-actions { display: block; margin-top: 8px; }
.dbrgc-done-btn { width: 100%; padding: 12px; border: none; border-radius: 10px; background: var(--dbrgc-accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }