html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.hero-fade { background: linear-gradient(to top, rgba(11,37,69,.85) 0%, rgba(11,37,69,.35) 35%, rgba(11,37,69,0) 70%); }
.glass { backdrop-filter: saturate(180%) blur(12px); background: rgba(255,255,255,.72); }

/* Blazor's default error toast + validation styling */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Photo pins on the cruise map (journal-entry thumbnails as markers) */
.cwf-photo-pin img {
    width: 40px; height: 40px; object-fit: cover;
    border-radius: 50%; border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* Designer: larger draggable photos + user labels on the printable map */
.cwf-designer-photo img {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: 12px; border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    cursor: move;
}
.cwf-map-label > span:first-child {
    display: inline-block; white-space: nowrap;
    background: rgba(255,255,255,.92); border: 1px solid #c7c7e0;
    border-radius: 9999px; padding: 3px 10px;
    font: 600 12px Inter, sans-serif; color: #232335;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: move;
}

/* Hover +/− size controls on designer photos and labels */
.cwf-resize {
    position: absolute; top: -10px; right: -10px;
    display: none; gap: 2px; z-index: 10;
}
.cwf-designer-photo:hover .cwf-resize,
.cwf-map-label:hover .cwf-resize { display: flex; }
.cwf-resize b {
    width: 22px; height: 22px; border-radius: 50%;
    background: #232335; color: #fff;
    display: grid; place-items: center;
    font: 700 14px/1 Inter, sans-serif;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35);
    user-select: none;
}
.cwf-resize b:hover { background: #5c5c99; }

/* Print-friendly pages (#24): hide app chrome, keep colours (map tiles, route line) */
@media print {
    header, nav, .no-print, #blazor-error-ui, .cwf-resize { display: none !important; }
    body { background: white !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-page { max-width: none !important; padding: 0 !important; }
    .print-avoid-break { break-inside: avoid; }
}