/* glass.css - shared glass / liquid panel styles */
:root {
  --glass-blur: 22px;
  --glass-sat: 160%;
  --glass-contrast: 108%;
  --glass-radius: 22px;
  --glass-border-light: rgba(255,255,255,0.55);
  --glass-border-dark: rgba(255,255,255,0.08);
  --glass-bg-light-a: rgba(255,255,255,0.78);
  --glass-bg-light-b: rgba(255,255,255,0.48);
  --glass-bg-dark-a: rgba(32,38,44,0.78);
  --glass-bg-dark-b: rgba(28,32,38,0.62);
  --glass-bg-dark-c: rgba(24,28,34,0.58);
  --glass-shadow-light: 0 8px 38px -8px rgba(0,0,0,.25), 0 4px 18px -4px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,0.35);
  --glass-shadow-dark: 0 10px 44px -10px rgba(0,0,0,.85), 0 4px 24px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.glass-modal-dialog { position:relative; }
.glass-modal {
  background:linear-gradient(135deg,var(--glass-bg-light-a),var(--glass-bg-light-b));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast));
  border:1px solid var(--glass-border-light);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow-light);
  overflow:hidden; position:relative;
  transition:transform .35s cubic-bezier(.16,.8,.25,1), opacity .35s;
}
body[data-theme='dark'] .glass-modal {
  background:linear-gradient(155deg,var(--glass-bg-dark-a),var(--glass-bg-dark-b) 55%,var(--glass-bg-dark-c));
  border-color:var(--glass-border-dark);
  box-shadow:var(--glass-shadow-dark);
}

/* Animated entrance (paired with .modal.fade) */
.modal.fade .glass-modal { transform:translateY(16px) scale(.96); opacity:0; }
.modal.fade.show .glass-modal { transform:none; opacity:1; }

/* Headers / footers inherit subtle gradient */
.glass-modal .modal-header { background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,.32)); border-bottom:1px solid rgba(255,255,255,.45); }
.glass-modal .modal-footer { background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.28)); border-top:1px solid rgba(255,255,255,.4); }
body[data-theme='dark'] .glass-modal .modal-header, body[data-theme='dark'] .glass-modal .modal-footer { background:linear-gradient(140deg,rgba(40,46,52,.65),rgba(34,40,46,.45)); border-color:rgba(255,255,255,.06); }

/* Shimmer / highlight */
.glass-modal:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%); pointer-events:none; mix-blend-mode:overlay; }
.glass-modal.shimmer:after { content:''; position:absolute; top:-10%; bottom:-10%; width:55%; left:-60%; transform:rotate(20deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0)); opacity:.55; animation:glassShimmer 6.5s linear infinite; pointer-events:none; }
body[data-theme='dark'] .glass-modal.shimmer:after { opacity:.35; }
@keyframes glassShimmer { 0% { left:-60%; } 100% { left:125%; } }

/* Content refinements */
.glass-modal .modal-title { font-weight:600; letter-spacing:.5px; }
.glass-modal .card-details-modal-content h5 { font-weight:600; }
.glass-modal .card-details-modal-content p strong { color:#111; }
body[data-theme='dark'] .glass-modal .card-details-modal-content p strong { color:#f5f7f9; }
.glass-modal .card-details-modal-content img.submission-img-thumb { background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:4px; border-radius:12px; box-shadow:0 2px 8px -2px rgba(0,0,0,.25); }
body[data-theme='dark'] .glass-modal .card-details-modal-content img.submission-img-thumb { background:rgba(40,46,52,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); box-shadow:0 4px 14px -4px rgba(0,0,0,.8); }

/* Utility: apply glass to any modal via .glassize */
.modal.glassize .modal-content { /* utility: copy glass styles */ background:linear-gradient(135deg,var(--glass-bg-light-a),var(--glass-bg-light-b)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast)); border:1px solid var(--glass-border-light); border-radius:var(--glass-radius); box-shadow:var(--glass-shadow-light); position:relative; overflow:hidden; }
body[data-theme='dark'] .modal.glassize .modal-content { background:linear-gradient(155deg,var(--glass-bg-dark-a),var(--glass-bg-dark-b) 55%,var(--glass-bg-dark-c)); border-color:var(--glass-border-dark); box-shadow:var(--glass-shadow-dark); }

@media (max-width: 768px){ .glass-modal { border-radius:18px; } }

/* --- Lightened Backdrop for Glass Modals --- */
/* Blue focus backdrop to make glass modal pop */
body.glass-backdrop-active .modal-backdrop { 
  background:radial-gradient(circle at 50% 42%, rgba(13,110,253,0.18) 0%, rgba(13,110,253,0.22) 55%, rgba(13,110,253,0.28) 100%);
  -webkit-backdrop-filter:blur(2px) saturate(140%);
  backdrop-filter:blur(2px) saturate(140%);
}
body[data-theme='dark'].glass-backdrop-active .modal-backdrop {
  background:radial-gradient(circle at 50% 42%, rgba(21,98,211,0.20) 0%, rgba(10,55,124,0.30) 60%, rgba(6,32,78,0.42) 100%);
  -webkit-backdrop-filter:blur(2px) saturate(140%);
  backdrop-filter:blur(2px) saturate(140%);
}
/* Option to remove dim entirely (uncomment if desired) */
/* body.glass-backdrop-active .modal-backdrop { background:transparent; } */