/* Hochzeit Schlicht: guest portal presentation, independent of access and storage. */
.wedding-portal-page {
  --wgp-ivory: #fffdf8;
  --wgp-sky: #dceef8;
  --wgp-blue: #263f4c;
  --wgp-gold: #a56d08;
  --wgp-gold-dark: #815814;
  --wgp-line: rgba(38, 63, 76, .12);
  --wgp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at 95% 5%, #dceef8 0, transparent 38%), #fffdf8;
  color: var(--wgp-blue);
  font-family: var(--wgp-sans);
  -webkit-tap-highlight-color: transparent;
}
.wgp-shell { width: min(100% - 48px, 1000px); padding: max(28px, env(safe-area-inset-top)) 0 max(44px, env(safe-area-inset-bottom)); }
.wgp-dashboard { gap: 32px; }
.wgp-portal-nav { border-bottom: 1px solid var(--wgp-line); padding-bottom: 22px; }
.wgp-couple { font: 25px/1.2 var(--cc-serif); letter-spacing: -.7px; color: var(--wgp-blue); }
.wgp-couple span { margin-top: 6px; font: 10px/1.4 var(--wgp-sans); letter-spacing: 1.8px; text-transform: uppercase; color: #65757b; }
.wgp-gallery-link { font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; min-height: 44px; }
.wgp-gallery-link span { font-size: 21px; color: var(--wgp-gold); }
.wgp-dashboard-head { position: relative; padding: 28px 0 10px; align-items: flex-start; }
.wgp-kicker { font-size: 10px; font-weight: 650; letter-spacing: 1.7px; color: var(--wgp-gold-dark); }
.wgp-dashboard h1, .wgp-panel h1 { margin: 16px 0 20px; font: 400 clamp(34px, 5vw, 60px)/1.09 var(--cc-serif); letter-spacing: -1.9px; color: var(--wgp-blue); }
.wgp-dashboard h1 em { font-weight: 400; color: #557d8d; }
.wgp-dashboard-head p { max-width: 540px; margin: 0; font-size: 15px; line-height: 1.65; color: #67767b; }
.wgp-avatar-large { width: 54px; height: 54px; margin-top: 22px; border: 3px solid white; box-shadow: 0 4px 18px #263f4c12; color: #557d8d; font-size: 24px; }
.wgp-panel, .wgp-upload, .wgp-section { border-radius: 24px; border: 1px solid var(--wgp-line); background: #fff; padding: clamp(22px, 4vw, 40px); }
.wgp-upload { box-shadow: 0 14px 50px #263f4c08; }
.wgp-upload h2 { font: 400 clamp(26px, 3.5vw, 36px)/1.15 var(--cc-serif); color: var(--wgp-blue); letter-spacing: -.7px; margin: 10px 0 0; max-width: 450px; }
.wgp-private-badge { border-radius: 100px; background: #f4f6ef; color: #4e6656; padding: 9px 12px; font-size: 11px; white-space: nowrap; }
.wgp-upload-form { margin-top: 25px; gap: 19px; }
.wgp-pickers { gap: 14px; }
.wgp-upload-form .wgp-picker { gap: 9px; border: 1px solid #d3e3e9; border-radius: 18px; min-height: 167px; padding: 24px 14px; transition: background .18s, border-color .18s; color: var(--wgp-blue); }
.wgp-picker-camera { background: #e8f3f8; }
.wgp-picker-library { background: #fcfaf4; border-color: #e8e2d3 !important; }
.wgp-picker svg { width: 30px; height: 30px; margin-bottom: 4px; stroke-width: 1.35; }
.wgp-picker strong { font-size: 16px; font-weight: 650; letter-spacing: -.3px; }
.wgp-picker span { font-size: 12px; line-height: 1.5; color: #617882; }
.wgp-dashboard .wgp-upload-hint, .wgp-dashboard .wgp-upload-footnote { margin: -5px 0 0; font-size: 12px; line-height: 1.6; color: #6d797c; }
.wgp-dashboard .wgp-upload-footnote { text-align: center; margin: -7px 0 0; font-size: 11px; }
.wgp-caption > span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.wgp-caption small { color: #6d797c; font-size: 11px; font-weight: 400; }
.wgp-form input:not([type="checkbox"]), .wgp-upload-form input:not([type="file"]) { border: 1px solid #dce2e2; border-radius: 12px; padding: 15px; background: #fafcfb; color: var(--wgp-blue); font-size: 16px; box-shadow: none; }
.wgp-caption input::placeholder { color: #6f7d81; font-size: 14px; }
.wgp-button { border: 0; min-height: 52px; border-radius: 14px; background: var(--wgp-blue); font: 600 14px/1.4 var(--wgp-sans); text-transform: none; letter-spacing: 0; padding: 14px 20px; touch-action: manipulation; }
.wgp-share { flex: 1; font-size: 15px; }
.wgp-button-soft { background: #edf3f5; color: var(--wgp-blue); min-height: 44px; }
.wgp-button:disabled { background: #e9eff1; color: #66777d; opacity: 1; }
.wgp-shell :is(button,a,input,summary):focus-visible { outline: 3px solid #a56d08; outline-offset: 3px; }
.wgp-preview { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.wgp-preview-item { background: #eff4f6; }
.wgp-preview-item img { border-radius: 0; }
.wgp-preview-item > span { font-size: 11px; line-height: 1.5; padding: 10px 12px; }
.wgp-preview-item[data-state="error"] > span { color: #9b3434; background: #fff1ef; }
.wgp-preview-item > button { background: #ffffffed; color: #263f4c; width: 44px; height: 44px; }
.wgp-selection-head { font-size: 12px; }
.wgp-selection-head span { color: #6d797c; }
.wgp-dashboard .wgp-status { margin: 0; font-size: 13px; line-height: 1.6; padding: 12px 15px; border-radius: 12px; background: #f1f6f8; color: #365563; }
.wgp-dashboard .wgp-status[data-kind="error"] { background: #fff1ef; color: #92382e; }
.wgp-dashboard .wgp-status[data-kind="success"] { background: #edf5ef; color: #316447; }
.wgp-section { background: transparent; border: 0; padding: 15px 0; }
.wgp-section h2 { margin: 0; font: 400 clamp(25px, 3vw, 34px)/1.15 var(--cc-serif); letter-spacing: -.7px; color: var(--wgp-blue); }
.wgp-section-title { margin-bottom: 22px; gap: 15px; }
.wgp-section-title .wgp-button { white-space: nowrap; font-size: 12px; }
.wgp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wgp-gallery > p { grid-column: 1 / -1; margin: 0; padding: 24px; border: 1px dashed #cfdce0; border-radius: 16px; font-size: 14px; line-height: 1.6; color: #617882; }
.wgp-photo { border-radius: 17px; border-color: #e2e8e8; }
.wgp-photo-button { display: block; }
.wgp-photo footer { align-items: center; padding: 12px; gap: 9px; }
.wgp-photo footer strong { font-size: 12px; }
.wgp-photo footer p { font-size: 12px; line-height: 1.4; }
.wgp-photo .wgp-avatar { width: 32px; height: 32px; }
.wgp-section details > summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 44px; }
.wgp-section details .wgp-panel { margin-bottom: 20px; }
.wgp-section details h1 { font-size: 30px; letter-spacing: -.8px; }
.wgp-logout { margin-top: 16px; font-size: 13px; }
.wgp-lightbox { background: #172b36; }
.wgp-lightbox-controls button { border-color: #91b9cc80; background: #91b9cc20; }
@media (hover: hover) { .wgp-picker:hover { border-color: #6b8e9e; background: #dceef8; } .wgp-button:not(:disabled):hover { filter: brightness(1.1); } }
@media (max-width: 640px) {
  .wgp-shell { width: min(100% - 32px, 520px); padding-top: max(22px, env(safe-area-inset-top)); }
  .wgp-dashboard { gap: 24px; }
  .wgp-dashboard-head { flex-direction: row; padding-top: 10px; }
  .wgp-dashboard-head .wgp-avatar-large { display: none; }
  .wgp-dashboard h1 { font-size: clamp(31px, 8.1vw, 43px); letter-spacing: -1.1px; }
  .wgp-dashboard-head p { font-size: 14px; }
  .wgp-upload { padding: 23px 18px; border-radius: 22px; }
  .wgp-upload-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .wgp-private-badge { padding: 6px 10px; }
  .wgp-upload h2 { font-size: 29px; }
  .wgp-upload-form .wgp-picker { min-height: 157px; padding: 20px 10px; }
  .wgp-picker strong { font-size: 14px; }
  .wgp-picker span { font-size: 11px; }
  .wgp-pickers { gap: 10px; }
  .wgp-section-title { flex-direction: row; align-items: center; }
  .wgp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wgp-photo footer { align-items: flex-start; }
  .wgp-photo-author .wgp-avatar { display: grid; }
  .wgp-section-title h2 { max-width: 220px; }
  .wgp-couple { font-size: 22px; }
  .wgp-gallery-link { font-size: 12px; }
}
@media (max-width: 350px) { .wgp-shell { width: calc(100% - 24px); } .wgp-upload { padding: 21px 13px; } .wgp-picker strong { font-size: 13px; } }