.download-modal { display:none !important; position:fixed; inset:0; z-index:1200; }
/*
	download.css is intentionally loaded after the main `styles.css` in pages
	that include the download UI. That means rules here will override the
	base styles when selectors have equal specificity. Keep overrides local
	and specific to avoid accidental global changes.
*/
.download-modal.is-open { display:block !important; }
.download-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.download-modal__dialog { position:absolute; top:var(--download-modal-top,120px); left:50%; transform:translateX(-50%); width:min(800px,95%); max-height:calc(100vh - (var(--download-modal-top,120px) + 40px)); margin:0 auto; background:#fff; border-radius:8px; overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,0.2); }
.download-modal__header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #eee}
.download-modal__body{padding:20px 24px 24px 24px}
.download-modal__info{margin-bottom:20px;line-height:1.6;color:#333}
.download-modal__info strong{color:#111}

/* Smaller title and tighter header so modal fits below nav */
.download-modal__title{font-size:1.05rem;margin:0;padding:0;font-weight:600}

/* Close button styled like primary dark button */
.download-modal__close{background:#111;color:#fff;border:0;padding:6px 10px;border-radius:6px;cursor:pointer}
.download-modal__close:hover{opacity:0.95}

/* Password input wrapper with toggle button */
.download-modal__password-wrapper{position:relative;margin-bottom:16px}
.download-modal__input{display:block;width:100%;padding:10px 45px 10px 12px;border:1px solid #ddd;border-radius:6px;font-size:1rem}
.download-modal__input:focus{outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(0,0,0,0.1)}
.download-modal__password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;padding:6px;cursor:pointer;color:#666;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;width:32px;height:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.download-modal__password-toggle.is-visible{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E")}
.download-modal__password-toggle:hover{background:rgba(0,0,0,0.05);color:#111}
.download-modal__password-toggle:focus{outline:2px solid #111;outline-offset:2px}
.btn--large{width:100%;padding:12px 24px;font-size:1rem;font-weight:600;margin-top:4px}
.download-file{padding:6px 0;border-bottom:1px solid #fafafa}
.btn{padding:8px 12px;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}
.btn--primary{background:#111;color:#fff;border-color:#111}
.download-modal__notice{padding:12px 14px;border-radius:6px;background:#fff9e6;border:1px solid #ffe8a8;margin-bottom:12px;line-height:1.5}
.download-modal__notice--error{background:#ffe6e6;border-color:#ffb3b3;color:#cc0000}
.download-modal__notice--hidden{display:none}
.download-modal__notice-title{font-weight:600;margin-bottom:4px}
.download-modal__notice-details{font-size:0.9rem;margin-top:2px;color:#aa0000}

/* Toolbar & pinned download CTA (compact) - Professional UI/UX Design */
/* Use CSS variable --gallery-columns to control images per row (default: 3) */
.project-gallery-wrapper{position:relative}
.download-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:1rem 0 1.5rem}

/* Select toggle - clean secondary button style */
.download-toggle{background:#fff;border:1.5px solid rgba(0,0,0,0.18);color:#111;padding:8px 16px;border-radius:8px;font-size:0.95rem;font-weight:500;transition:all 0.2s ease;cursor:pointer}
.download-toggle:hover{background:#f8f8f8;border-color:rgba(0,0,0,0.25)}
.download-toggle[aria-pressed="true"]{background:#111;color:#fff;border-color:#111;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.download-toggle[aria-pressed="true"]:hover{background:#222}

/* Primary CTA - Download button */
.download-button{background:#111;color:#fff;border:1.5px solid #111;padding:8px 20px;border-radius:8px;font-size:0.95rem;font-weight:500;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer}
.download-button:hover{background:#222;box-shadow:0 4px 12px rgba(0,0,0,0.2);transform:translateY(-1px)}
.download-button:active{transform:translateY(0)}

/* Selection controls - subtle tertiary style */
.selection-controls{display:none;align-items:center;gap:8px;padding-left:8px;border-left:1px solid rgba(0,0,0,0.1)}
.selected-count{font-size:0.9rem;color:#666;font-weight:500;padding:4px 8px;background:rgba(0,0,0,0.04);border-radius:6px;white-space:nowrap}
.select-all,.clear-selection{padding:6px 12px;border-radius:6px;font-size:0.875rem;background:transparent;border:1px solid rgba(0,0,0,0.12);color:#444;font-weight:500;transition:all 0.15s ease;cursor:pointer}
.select-all:hover,.clear-selection:hover{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.2)}

/* show selection related controls only when selection-mode enabled */
.project-gallery-wrapper.selection-mode .selection-controls{display:inline-flex}
.download-toolbar .download-button{display:inline-flex;align-items:center;gap:0.6rem;padding:8px 12px;border-radius:6px}
.download-toolbar__icon{font-size:1rem;line-height:1;margin-left:4px;opacity:0.9}
.download-toolbar__label{font-size:0.95rem;font-weight:500}

/* Inherits 3-column grid from styles.css, can override per-page with --gallery-columns variable */
.project-gallery-wrapper .project-gallery{grid-template-columns:repeat(var(--gallery-columns, 3),1fr)}

/* On narrow viewports, reduce columns and adjust toolbar */
@media (max-width:900px){
	.project-gallery-wrapper .project-gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
	.download-toolbar{justify-content:center;padding:10px 12px;gap:8px}
	.download-toolbar .download-button,.download-toggle{font-size:0.875rem;padding:7px 14px}
	.selected-count{font-size:0.85rem}
}
@media (max-width:480px){
	.project-gallery-wrapper .project-gallery{grid-template-columns:1fr}
}

/* Removed old shadow - now handled in unified button styles above */



/* Inline image selection overlay */
.gallery-item{position:relative;border-radius:8px;overflow:hidden}
.gallery-item img{display:block;width:100%;height:auto;border-radius:8px}
.gallery-checkbox{position:absolute;top:8px;right:8px;z-index:20;display:none;align-items:center}
.gallery-checkbox input.inline-select{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:4px;border:2px solid rgba(255,255,255,0.95);background:rgba(255,255,255,0.85);box-shadow:0 2px 4px rgba(0,0,0,0.2);cursor:pointer;position:relative}
.gallery-checkbox input.inline-select:checked{background:#fff;border-color:#fff}
.gallery-checkbox input.inline-select:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#111;font-size:16px;font-weight:700;line-height:1}
.gallery-checkbox input.inline-select:focus{outline:2px solid #fff;outline-offset:2px}
.gallery-checkbox .gallery-checkbox__tick{display:none}
.gallery-item .gallery-thumb-overlay{position:absolute;inset:0;border-radius:8px;pointer-events:none}

/* show checkboxes when selection-mode is enabled */
.project-gallery-wrapper.selection-mode .gallery-checkbox{display:flex}