/* PrintyStore — contactpagina (premium UI) */

.contact-hero { max-width: 72ch; }
.contact-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin: .15em 0 .3em; }
.divider-dot { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 0; }
.divider-dot::before, .divider-dot::after { content: ""; height: 1px; background: var(--c-line); flex: 1; }
.divider-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 5px rgba(185,111,60,.14); flex: none; }

/* Layout: aside (details/map/benefits) + formulierkaart */
.contact-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); margin-top: clamp(1.6rem, 4vw, 2.6rem); }
@media (min-width: 900px){ .contact-grid { grid-template-columns: 0.92fr 1.08fr; align-items: start; } .contact-aside { order: -1; } }

/* Contactgegevens met ronde iconen */
.contact-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.05rem; }
.contact-list li { display: flex; gap: 1rem; align-items: center; }
.ci-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--c-sand); color: var(--c-accent);
  display: grid; place-items: center; font-size: 1.25rem; flex: none; box-shadow: var(--sh-1); }
.ci-label { font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.ci-value { font-size: 1.02rem; color: var(--c-ink); font-weight: 500; }
.ci-value a { color: var(--c-ink); }
.ci-value a:hover { color: var(--c-accent-ink); }
.reply-note { margin-top: 1.3rem; font-size: .92rem; color: var(--c-ink-soft); }
.hl { color: var(--c-accent-ink); font-weight: 600; }

/* Locatiekaart */
.map-card { margin-top: 1.5rem; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; }
.map-preview { position: relative; min-height: 170px;
  background:
    radial-gradient(circle at 50% 42%, rgba(185,111,60,.10), rgba(185,111,60,0) 60%),
    repeating-linear-gradient(0deg, var(--c-line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 34px),
    var(--c-bg); }
.map-preview .pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-72%); font-size: 2rem; filter: drop-shadow(0 4px 6px rgba(83,55,35,.3)); }
.map-preview .pin-base { position: absolute; top: 50%; left: 50%; width: 14px; height: 5px; transform: translate(-50%,2px); background: rgba(83,55,35,.22); border-radius: 50%; filter: blur(1px); }
.map-info { padding: 1.3rem; display: flex; flex-direction: column; justify-content: center; gap: .25rem; }
.map-info strong { font-family: var(--f-display); font-size: 1.1rem; }
.map-info p { margin: 0; font-size: .92rem; color: var(--c-ink-soft); }
.map-link { margin-top: .6rem; font-weight: 600; color: var(--c-accent-ink); }
.map-link:hover { text-decoration: underline; }
@media (max-width: 560px){ .map-card { grid-template-columns: 1fr; } .map-preview { min-height: 150px; } }

/* Mini benefit-cards */
.benefit-mini { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin-top: 1.4rem; }
.bm { background: var(--c-sand); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 1rem; box-shadow: var(--sh-1); }
.bm .ico { font-size: 1.3rem; color: var(--c-accent); }
.bm strong { display: block; font-size: .92rem; margin-top: .35rem; }
@media (max-width: 700px){ .benefit-mini { grid-template-columns: 1fr; } }

/* Formulierkaart */
.form-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  box-shadow: var(--sh-2); padding: clamp(1.5rem, 3.2vw, 2.5rem); }
.form-card h2 { margin: 0 0 .2rem; }
.form-card .sub { color: var(--c-ink-soft); margin: 0 0 1.4rem; }
.form-card .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.form-card .field input, .form-card .field textarea { width: 100%; padding: .9rem 1.1rem; border: 1px solid var(--c-line);
  border-radius: var(--radius-md); font: inherit; background: var(--c-bg); transition: var(--t); }
.form-card .field input:focus, .form-card .field textarea:focus { outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(185,111,60,.16); background: #fff; }
.form-card .field { margin-bottom: 1.1rem; }
.form-submit { width: 100%; justify-content: center; }
.form-note { margin: .9rem 0 0; font-size: .88rem; color: var(--c-ink-soft); text-align: center; }
.form-success { background: #eef6ec; border: 1px solid #cfe6c9; color: #2f5d2a; border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem; }
.form-success strong { display: block; font-family: var(--f-display); font-size: 1.15rem; margin-bottom: .3rem; }

/* Trust-bar onderaan */
.trust-bar { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; padding: clamp(1.8rem,4vw,2.6rem) 0; }
.trust-item { display: flex; gap: .85rem; align-items: flex-start; }
.trust-item .ico { font-size: 1.5rem; color: var(--c-accent); flex: none; line-height: 1; }
.trust-item strong { display: block; font-size: .98rem; }
.trust-item span { font-size: .84rem; color: var(--c-ink-soft); }
@media (max-width: 820px){ .trust-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .trust-grid { grid-template-columns: 1fr; } }