/* Image Crop Modal Styles */
.crop-modal .modal-dialog {
    max-width: 480px;
    margin: 1.75rem auto;
}

.crop-modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.crop-modal .modal-body {
    padding: 1rem;
    overflow-y: auto;
    max-height: 85vh; /* never exceeds 85% of screen height */
}

.crop-modal .btn-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1060;
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

    .crop-modal .btn-close:hover {
        opacity: 1;
    }

.crop-help-text {
    color: var(--bs-secondary-color);
    font-size: 14px;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.crop-container {
    width: 100%;
    max-width: 400px; /* image-cropper.js measures the actual rendered width at runtime, so this is just a cap */
    height: var(--crop-h, 400px);
    position: relative;
    margin: 0 auto 1rem;
    background: var(--bs-secondary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
}


    .crop-container img {
        max-width: 100%;
        display: block;
    }

.cropper-view-box {
    outline: 0 !important;
}

.cropper-face {
    background-color: transparent !important;
}

/* Rule-of-thirds grid (shown, brightened for visibility against the dark
   crop background) + corner-only resize handles, redesigned as white
   L-shaped brackets instead of Cropper.js's default small blue squares —
   matching the reference photo picker's crop screen. Edge-midpoint handles
   and the edge hit-line strips stay hidden; only the 4 corners are
   interactive/visible, and they resize the box (aspect ratio stays locked)
   in addition to the existing pinch/scroll-zoom and drag-to-reposition. */
.cropper-dashed {
    border-color: rgba(255, 255, 255, .6) !important;
    opacity: .8 !important;
}

.cropper-line {
    display: none !important;
}

.cropper-point {
    display: none !important;
}

.cropper-point.point-nw,
.cropper-point.point-ne,
.cropper-point.point-sw,
.cropper-point.point-se {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: transparent !important;
    opacity: 1 !important;
    border: 3px solid #fff;
}
.cropper-point.point-nw { top: 6px !important; left: 6px !important; border-right: none; border-bottom: none; }
.cropper-point.point-ne { top: 6px !important; right: 6px !important; border-left: none; border-bottom: none; }
.cropper-point.point-sw { bottom: 6px !important; left: 6px !important; border-right: none; border-top: none; }
.cropper-point.point-se { bottom: 6px !important; right: 6px !important; border-left: none; border-top: none; }

.cropper-crop-box {
    border-radius: 8px;
}

.crop-modal .img-container,
.crop-modal .cropper-container {
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   Story-preview-style crop popup — shared across every image upload
   (profile photo, tournament/club/sponsor logo, sponsor banner, QR
   code, payment screenshot, player registration photo). Add the
   "crop-modal-story" class alongside "crop-modal" and use the header/
   footer markup below; aspect ratio, output size, and crop mechanics
   are configured per-page in each view's own loadCropper() call and
   are untouched by this file.
   ═══════════════════════════════════════════════════════════════ */
/* Class-only on purpose: the #cropModal half this selector used to carry beat
   the crop-modal-lg override below on specificity, and the mobile rule it was
   added to outrank is gone. */
.crop-modal-story .modal-dialog {
    max-width: 380px;
}
.crop-modal-story .modal-content {
    background: #17171a;
    border-radius: 18px;
    overflow: hidden;
}
.crop-modal-story .crop-story-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
}
.crop-modal-story .crop-story-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.crop-modal-story .crop-story-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crop-modal-story .crop-story-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
}
.crop-modal-story .crop-story-icon-btn:hover { background: rgba(255,255,255,.18); }
.crop-modal-story .modal-body {
    padding: 0 16px 14px;
    max-height: none;
}
.crop-modal-story .crop-container {
    max-width: 100%;
    background: #000;
    border: none;
    border-radius: 12px;
}
.crop-modal-story .crop-help-text {
    color: rgba(255,255,255,.65);
    margin: 10px 0 0;
}
.crop-modal-story .crop-story-footer {
    padding: 4px 16px 18px;
}
/* Wide variant, for a crop whose frame is much wider than it is tall — the
   default 380px story popup leaves a sponsor banner (3.5:1) almost no vertical
   room to work with. Add "crop-modal-lg" alongside "crop-modal-story". */
.crop-modal-lg .modal-dialog {
    max-width: 520px;
}

.crop-modal-lg .crop-container {
    max-width: 480px;
}

.crop-modal-story .crop-story-save-btn {
    width: 100%;
    border-radius: 24px;
    padding: 10px;
    font-weight: 600;
    background: var(--bs-primary, #877cf2);
    border: none;
    color: #fff;
}