/* ============================================================
   Foto sin venta confirmada
   ============================================================
   Estas reglas vivían en event.css, que solo carga la galería. Con el mismo
   markup en el carrito, el checkout y las órdenes, ahí el partial renderizaba
   un contenedor sin trama y sin anti-guardado: HTML correcto, cero pixeles de
   protección y ningún error a la vista. Por eso ahora las carga _Layout para
   todo el sitio — una regla de hoja no se pierde al mover markup.
   ============================================================ */

.photo-watermark-container { position: relative; overflow: hidden; }

/* El envoltorio del partial. Hereda el tamaño de la tarjeta que lo contiene:
   .or-strip__shot mide 72px y dimensiona su imagen con height: 100%, que sin
   esto se resolvería contra un padre de alto automático y dejaría la franja
   de miniaturas descuadrada. */
.ps-shot { display: block; width: 100%; height: 100%; }

.watermark-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
    background-image:
        repeating-linear-gradient( 45deg, transparent 0, transparent 16px, rgba(255,255,255,0.10) 16px, rgba(255,255,255,0.10) 18px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 16px, rgba(255,255,255,0.10) 16px, rgba(255,255,255,0.10) 18px);
}
.watermark-overlay::before, .watermark-overlay::after {
    content: 'PeakShot';
    position: absolute;
    font-size: 2.5rem; font-weight: bold;
    color: rgba(255, 255, 255, 0.35);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    transform: rotate(-45deg);
    white-space: nowrap; letter-spacing: 0.2em;
}
.watermark-overlay::before { top: 30%; left: -10%; width: 120%; text-align: center; }
.watermark-overlay::after  { top: 60%; left: -10%; width: 120%; text-align: center; }

/* En una miniatura de 72px el texto de 2.5rem no entra: se lee un trozo de
   letra gigante y la foto queda tapada sin que se entienda qué dice. La trama
   sí funciona a cualquier tamaño, así que ahí queda sola. */
.ps-shot--tiny .watermark-overlay::before,
.ps-shot--tiny .watermark-overlay::after { content: none; }

.modal-body .watermark-overlay {
    background-image:
        repeating-linear-gradient( 45deg, transparent 0, transparent 22px, rgba(255,255,255,0.09) 22px, rgba(255,255,255,0.09) 24px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 22px, rgba(255,255,255,0.09) 22px, rgba(255,255,255,0.09) 24px);
}
.modal-body .watermark-overlay::before,
.modal-body .watermark-overlay::after { font-size: 5rem; color: rgba(255,255,255,0.45); }
@media (min-width: 768px) {
    .modal-body .watermark-overlay::before { top: 20%; }
    .modal-body .watermark-overlay::after  { top: 55%; }
}

.no-save {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}