/*
 * MAIN SITE — SHARED APPLICATION SHELL
 * --------------------------------------------------------------------------
 * Layout-specific styles used by views/layouts/application.php.
 *
 * Maintenance map:
 *  1. Shared form helpers
 *  2. Login popup
 *  3. Form controls
 *  4. Image fallback
 *  5. Mobile adjustments
 */

/* 1. Shared form helpers
 * ----------------------------------------------------------------------- */
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}

.h-custom {
  height: calc(100% - 73px);
}

/* 2. Login popup
 * ----------------------------------------------------------------------- */
.popup-overlay {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
}

.popup-content {
  animation: appPopupIn .3s ease;
}

#loginPopup {
  position: fixed !important;
  z-index: 10040;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 20px;
  overflow-y: auto;
  background: rgba(5, 10, 18, .74);
  backdrop-filter: blur(10px);
}

#loginPopup .login-popup-card {
  position: relative;
  width: min(94vw, 620px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 34px;
  border: 1px solid rgba(190, 165, 111, .48);
  border-radius: 22px;
  color: #e9eef6;
  background: linear-gradient(145deg, #1e2938, #111925);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
}

#loginPopup .login-popup-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #bda66f, #f0dda9, #bda66f);
}

#loginPopup .login-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: #aeb8c6;
  background: transparent;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

#loginPopup .login-popup-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

#loginPopup .login-popup-title {
  color: #d9c287 !important;
  letter-spacing: .02em;
}

#loginPopup .form-label,
#loginPopup .text-muted {
  color: #cbd4df !important;
}

#loginPopup .form-control {
  color: #edf2f8;
  border-color: #46566b;
  background: #101824;
}

#loginPopup .form-control::placeholder { color: #8290a3; }

#loginPopup .input-group .btn {
  color: #aab5c4;
  border-color: #46566b;
  background: #17212e;
}

#loginPopup #submitBtn {
  border: 0;
  color: #111925;
  background: linear-gradient(135deg, #d9c38f, #bda66f);
  box-shadow: 0 10px 26px rgba(189, 166, 111, .2);
  transition: transform .18s, box-shadow .18s;
}

#loginPopup #submitBtn:hover {
  box-shadow: 0 14px 34px rgba(189, 166, 111, .3);
  transform: translateY(-2px);
}

#loginPopup a { color: #d5bd82 !important; }

@keyframes appPopupIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. Form controls
 * ----------------------------------------------------------------------- */
.form-label {
  color: #333;
  font-weight: 500;
}

.form-control {
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  transition: border-color .3s, box-shadow .3s;
}

.form-control:hover {
  border-color: #e0e419;
  box-shadow: 0 0 5px rgba(0, 123, 255, .3);
}

.form-control:focus {
  border-color: #c58031;
  box-shadow: 0 0 5px rgba(0, 123, 255, .3);
}

/* 4. Image fallback
 * ----------------------------------------------------------------------- */
.img-fallback {
  background-color: #f3f5f7;
  object-fit: contain !important;
}

/* 5. Mobile adjustments
 * ----------------------------------------------------------------------- */
@media (max-width: 450px) {
  .h-custom { height: 100%; }

  #loginPopup {
    align-items: flex-start !important;
    padding: 12px;
  }

  #loginPopup .login-popup-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0;
    padding: 28px 18px 22px;
  }
}