/* =====================================================
   FIND PHOTO PAGE — assets/css/pages/find-photo.css
   ===================================================== */

/* Search */
.fp-search-wrap { max-width: 520px; margin: 0 auto; }
.fp-search-box { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1.5px solid var(--glass-border); border-radius: var(--radius-full); padding: .55rem 1rem; transition: border-color .2s; box-shadow: var(--shadow-sm); }
.fp-search-box:focus-within { border-color: var(--primary); }
.fp-search-icon { color: var(--text-muted); flex-shrink: 0; }
.fp-search-input { flex: 1; border: none; background: none; outline: none; font-family: var(--font-body); font-size: .9rem; color: var(--secondary); }
.fp-search-clear { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: .85rem; padding: 0 2px; }
.fp-search-clear:hover { color: var(--rose); }

/* Loader */
.fp-loader-ring { width: 52px; height: 52px; border: 3px solid var(--accent-light); border-top-color: var(--primary); border-radius: 50%; animation: fp-spin .8s linear infinite; margin: 0 auto; }
@keyframes fp-spin { to { transform: rotate(360deg) } }

/* Album grid */
.albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.album-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid rgba(52,130,201,.25); cursor: pointer; transition: all var(--transition); box-shadow: var(--shadow-sm); opacity: 1 !important; transform: none !important; }
.album-card:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 40px rgba(52,130,201,.14); border-color: rgba(52,130,201,.5); }
.album-card.animate-in { opacity: 0 !important; transform: translateY(14px) !important; transition: opacity .35s ease, transform .35s ease !important; }
.album-card.animate-in.visible { opacity: 1 !important; transform: translateY(0) !important; }
.album-card__cover { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--accent-light); }
.album-card__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform .5s ease; image-rendering: auto; }
.album-card:hover .album-card__cover img { transform: scale(1.06); }
.album-card__cover-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; inset: 0; }
.album-card__overlay { position: absolute; inset: 0; background: rgba(30,60,100,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; display: flex; align-items: center; justify-content: center; }
.album-card:hover .album-card__overlay { opacity: 1; }
.album-card__view-btn { display: flex; align-items: center; gap: .5rem; background: white; color: var(--secondary); padding: .6rem 1.4rem; border-radius: var(--radius-full); font-size: .84rem; font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,.2); transform: translateY(8px); transition: transform .3s; }
.album-card:hover .album-card__view-btn { transform: translateY(0); }
.album-card__count-wrap { position: absolute; top: .75rem; right: .75rem; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.album-card__count { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); color: white; font-size: .7rem; font-weight: 600; padding: .28rem .6rem; border-radius: var(--radius-full); }
.album-card__count--cloud { background: rgba(52,130,201,.65); font-size: .62rem; }
.album-card__info { padding: 1.25rem 1.25rem 1rem; }
.album-card__name { font-size: .95rem; font-weight: 600; color: var(--secondary); line-height: 1.3; margin-bottom: 4px; }
.fp-source-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.65); backdrop-filter: blur(12px); border: 1px solid rgba(52,130,201,.3); border-radius: var(--radius-full); padding: .35rem 1rem; font-size: .75rem; color: var(--text-soft); }
.fp-mini-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 20px; font-size: .68rem; font-weight: 600; }
.fp-mini-badge--cloud { background: rgba(52,130,201,.1); color: #1a6cb0; border: 1px solid rgba(52,130,201,.22); }
.fp-mini-badge--photo { background: rgba(232,166,166,.15); color: var(--rose); border: 1px solid rgba(232,166,166,.3); }

/* Modal */
.album-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; pointer-events: none; opacity: 0; transition: opacity .3s; }
.album-modal.open { pointer-events: all; opacity: 1; }
.album-modal__backdrop { position: absolute; inset: 0; background: rgba(20,10,10,.65); backdrop-filter: blur(6px); cursor: pointer; }
.album-modal__panel { position: relative; z-index: 1; width: 100%; max-height: 92vh; background: var(--bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -24px 80px rgba(0,0,0,.3); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .4s cubic-bezier(.34,1.3,.64,1); overflow: hidden; }
.album-modal.open .album-modal__panel { transform: translateY(0); }
.album-modal__handle { width: 44px; height: 4px; background: var(--glass-border); border-radius: 2px; margin: .875rem auto 0; flex-shrink: 0; }
.album-modal__header { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.25rem; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; gap: .75rem; }
.album-modal__header-info { flex: 1; min-width: 0; }
.album-modal__header-code { font-family: var(--font-heading); font-size: 1.2rem; color: var(--secondary); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-modal__header-meta { display: none; }
.album-modal__close { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-light); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--secondary); cursor: pointer; flex-shrink: 0; transition: all var(--transition); }
.album-modal__close:hover { background: var(--primary); color: white; }
.album-modal__dl-bar { display: flex; align-items: center; padding: .625rem 1.25rem; border-bottom: 1px solid var(--glass-border); background: var(--bg); flex-shrink: 0; }
.album-modal__dl-all { display: inline-flex; align-items: center; gap: 6px; padding: .55rem 1.25rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; border-radius: var(--radius-full); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all var(--transition); box-shadow: 0 2px 10px rgba(232,166,166,.4); font-family: var(--font-body); }
.album-modal__dl-all:disabled { opacity: .6; cursor: not-allowed; }
.album-modal__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1.25rem; -webkit-overflow-scrolling: touch; }
.album-modal__footer { padding: .875rem 1.5rem 1.25rem; border-top: 1px solid var(--glass-border); text-align: center; flex-shrink: 0; }
.dl-progress-bar { height: 3px; background: var(--accent-light); flex-shrink: 0; }
.dl-progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); width: 0%; transition: width .3s; }
.dl-progress-label { padding: 5px 1.5rem; font-size: .72rem; color: var(--rose); text-align: center; background: rgba(232,166,166,.05); flex-shrink: 0; }

/* Modal photo grid */
.modal-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.modal-photo-item { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; cursor: pointer; transition: all var(--transition); position: relative; background: var(--accent-light); border: 1.5px solid rgba(52,130,201,.2); }
.modal-photo-item:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.modal-photo-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.modal-photo-item__overlay { position: absolute; inset: 0; background: rgba(30,60,100,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; opacity: 0; transition: opacity var(--transition); }
.modal-photo-item:hover .modal-photo-item__overlay { opacity: 1; }
.modal-photo-item__view-btn, .modal-photo-item__dl-btn { display: inline-flex; align-items: center; gap: 4px; padding: .35rem .8rem; border-radius: var(--radius-full); font-size: .68rem; font-weight: 600; cursor: pointer; border: none; font-family: var(--font-body); }
.modal-photo-item__view-btn { background: white; color: var(--secondary); }
.modal-photo-item__dl-btn { background: var(--primary); color: white; }

/* Skeleton */
.modal-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.modal-skeleton__item { border-radius: var(--radius-md); aspect-ratio: 1/1; background: linear-gradient(90deg, var(--accent-light) 25%, var(--blush) 50%, var(--accent-light) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.album-skeleton { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid rgba(52,130,201,.15); }
.album-skeleton__cover { aspect-ratio: 3/2; background: linear-gradient(90deg, var(--accent-light) 25%, rgba(200,220,240,.4) 50%, var(--accent-light) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.album-skeleton__info { padding: 1.25rem; display: flex; flex-direction: column; gap: 8px; }
.album-skeleton__line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--accent-light) 25%, rgba(200,220,240,.4) 50%, var(--accent-light) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* Media tabs */
.modal-media-tabs { display: flex; gap: 2px; padding: 0 1.25rem; border-bottom: 1px solid var(--glass-border); background: var(--bg-2); flex-shrink: 0; }
.modal-media-tab { display: inline-flex; align-items: center; gap: 5px; padding: .6rem .875rem; font-size: .8rem; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all .15s; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-body); }
.modal-media-tab.active { color: var(--secondary); border-bottom-color: var(--primary); font-weight: 600; }
.modal-media-tab__count { display: none; }
.modal-media-tab.active .modal-media-tab__count { display: none; }
.modal-error-box { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.modal-error-box__icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
.modal-error-box p { font-size: .85rem; line-height: 1.6; max-width: 360px; margin: 0 auto .75rem; }
.modal-error-box code { font-size: .72rem; background: var(--accent-light); padding: 2px 6px; border-radius: 4px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(20,10,10,.92); backdrop-filter: blur(8px); z-index: 9500; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; opacity: 0; visibility: hidden; transition: all .4s; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__actions { position: absolute; top: 1.5rem; right: 1.5rem; display: flex; gap: .5rem; z-index: 1; }
.lightbox__action-btn, .lightbox__close { width: 44px; height: 44px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; font-size: 1.2rem; text-decoration: none; transition: all var(--transition); }
.lightbox__action-btn:hover { background: var(--primary); }
.lightbox__close:hover { background: rgba(232,90,90,.3); }
.lightbox__img { max-width: 90vw; max-height: 82vh; border-radius: var(--radius-lg); object-fit: contain; box-shadow: 0 32px 80px rgba(0,0,0,.5); }
.lightbox__caption { font-size: .75rem; color: rgba(255,255,255,.45); letter-spacing: .06em; }

.btn-outline { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 2rem; border: 1.5px solid var(--primary); color: var(--secondary); background: transparent; border-radius: var(--radius-full); font-size: .9rem; font-weight: 500; cursor: pointer; font-family: var(--font-body); transition: all var(--transition); }
.btn-outline:hover { background: var(--primary); color: white; }
.btn-outline:disabled { opacity: .5; cursor: not-allowed; }

/* Responsive */
@media (max-width: 1024px) { .albums-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } }
@media (max-width: 768px) {
  .albums-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .album-card__info { padding: .875rem .875rem .75rem; }
  .album-card__name { font-size: .82rem; }
  .modal-photos-grid, .modal-skeleton { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}
@media (max-width: 400px) { .albums-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }