/* Auth Dark Theme (Login/Register) */
.auth-body {
   background-color: var(--dark-bg);
   /* #1A1A1A */
   color: #ffffff;
   margin: 0;
   font-family: var(--font-body);
}

.auth-layout {
   display: grid;
   grid-template-columns: 610px minmax(0, 1fr);
   gap: 52px;
   min-height: 100vh;
   width: min(1420px, 100%);
   margin: 0 auto;
   padding: 10px;
   background: #191919;
   align-items: center;
}

/* Left Side Art */
.auth-art {
   width: 100%;
   position: relative;
   height: 720px;
   min-height: 0;
   overflow: hidden;
   border-radius: 0 24px 24px 0;
   background: url('../images/landing/hero-float-card.png') center/cover no-repeat;
   padding: 54px 52px 38px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.auth-layout--register .auth-art {
   height: 720px;
}

.auth-art::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 328px;
   background: linear-gradient(180deg,
         rgba(25, 25, 25, 0) 0%,
         rgba(35, 35, 35, .28) 28%,
         rgba(48, 48, 48, .56) 100%);
   border-radius: 0 0 24px 0;
   z-index: 1;
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
   -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
}

.auth-art__logo,
.auth-art__copy {
   position: relative;
   z-index: 2;
}

.auth-art__logo img {
   width: 137px;
   height: auto;
}

.auth-art__copy {
   max-width: 492px;
}

.auth-art__copy p {
   font-size: 16px;
   line-height: 26px;
   color: rgba(255, 255, 255, 0.96);
   margin-bottom: 22px;
}

.auth-art__quote {
   font-family: var(--font-heading);
   position: relative;
   padding-top: 24px;
   font-size: 36px;
   line-height: 1.2;
   margin-bottom: 24px;
   color: #ffffff;
}

.auth-art__quote::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 168px;
   border-top: 1px solid rgba(255, 255, 255, .42);
}

.auth-author {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.7);
}

.auth-author img {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   object-fit: cover;
}

/* Right Panel */
.auth-panel {
   width: 100%;
   background: #191919;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 26px 12px 60px 0;
   overflow-y: auto;
   justify-content: center;
   height: 720px;
   min-height: 0;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.auth-panel::-webkit-scrollbar {
   display: none;
}

.auth-panel--long {
   justify-content: flex-start;
}

.auth-panel h2 {
   font-family: var(--font-heading);
   font-size: 40px;
   line-height: 1.15;
   margin-bottom: 31px;
   font-weight: normal;
   color: #ffffff;
   text-align: left;
   width: 100%;
   max-width: 637px;
}

.auth-mobile-logo {
   display: none;
}

.dark-form {
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 100%;
   max-width: 637px;
}

.form-row {
   display: flex;
   gap: 20px;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 10px;
   flex: 1;
}

.form-group label {
   font-size: 16px;
   font-weight: 500;
   color: #ffffff;
}

.form-group label span {
   color: var(--primary-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select {
   background: transparent;
   border: 1px solid #464646;
   border-radius: 8px;
   min-height: 49px;
   padding: 0 16px;
   color: #eeeeee;
   font-family: var(--font-body);
   font-size: 14px;
   outline: none;
   transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus {
   border-color: var(--primary-color);
}

.form-group select {
   appearance: none;
   background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%23999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
   background-repeat: no-repeat;
   background-position: right 16px center;
   padding-right: 40px;
   color: #cfcfcf;
   font-size: 15px;
   font-weight: 400;
   line-height: 49px;
   align-items: center;
   cursor: pointer;
}

.form-group select:hover {
   border-color: #6a6a6a;
   color: #ffffff;
}

.form-group select option {
   background: #242424;
   color: #f5f5f5;
   font-size: 15px;
}

.form-group select option:disabled {
   color: #a9a9a9;
}

.form-group select option:checked {
   background: #343434;
   color: #ffffff;
}

.form-group input::placeholder {
   color: #706d6d;
}

.password-field {
   position: relative;
   width: 100%;
}

.password-field input {
   width: 100%;
   padding-right: 52px !important;
}

.password-toggle {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   width: 28px;
   height: 28px;
   border: 0;
   background: transparent;
   color: #9c9c9c;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--transition);
}

.password-toggle:hover {
   color: #ffffff;
}

.forgot-row {
   display: flex;
   justify-content: flex-end;
   margin-top: -12px;
}

.forgot-link {
   color: var(--primary-color);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: var(--transition);
}

.forgot-link:hover {
   color: #ffffff;
}

/* Profile Photos Upload Box */
.photo-upload-container {
   background: #232323;
   border-radius: 8px;
   padding: 24px 36px 22px 20px;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 32px;
}

.photo-upload-copy {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 14px;
   min-width: 230px;
}

.photo-upload-copy label {
   line-height: 1.2;
   margin: 0;
}

.photo-upload-info {
   display: flex;
   gap: 8px;
   align-items: flex-start;
}

.photo-upload-info i {
   color: #d8d8d8;
   font-size: 15px;
   margin-top: 3px;
   flex: 0 0 auto;
}

.photo-upload-info p {
   font-size: 13px;
   color: #e7e7e7;
   line-height: 1.5;
   margin: 0;
   max-width: 270px;
}

.photo-boxes {
   display: flex;
   gap: 16px;
}

.photo-box {
   width: 145px;
   height: 132px;
   background: #171717;
   border: 1px dashed #4a4a4a;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #ffffff;
   font-size: 20px;
   transition: var(--transition);
   position: relative;
   overflow: hidden;
   margin: 0;
}

.photo-box:hover {
   border-color: var(--primary-color);
   color: #ffffff;
}

.photo-input {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
   z-index: 2;
}

.photo-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #171717;
    z-index: 1;
}

.photo-box.has-image {
   border-style: solid;
   border-color: #555;
}

.photo-box.has-image i {
   display: none;
}

/* Pills */
.pill-group {
   display: flex;
   gap: 16px;
}

.pill-group label {
   flex: 1;
}

.pill-radio input {
   display: none;
}

.pill-radio span {
   display: block;
   text-align: center;
   padding: 16px 0;
   border: 1px solid transparent;
   background: #282828;
   border-radius: var(--radius-pill);
   font-size: 15px;
   font-weight: 500;
   color: #ffffff !important;
   cursor: pointer;
   transition: var(--transition);
}

.form-group .date-select {
   flex: 1 1 0;
   width: 100%;
   min-width: 0;
}

.form-group .pill-radio span,
.form-group .pill-radio input:checked+span {
   color: #ffffff !important;
}

.pill-radio input:checked+span {
   background: #282828;
   color: #ffffff !important;
   border-color: var(--primary-color);
   box-shadow: inset 0 0 0 1px var(--primary-color);
}

/* Checkbox */
.dark-checkbox {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: #999;
   cursor: pointer;
   margin-top: -10px;
}

.dark-checkbox input {
   appearance: none;
   width: 18px;
   height: 18px;
   border: 2px solid #555;
   border-radius: 4px;
   background: transparent;
   cursor: pointer;
   position: relative;
}

.dark-checkbox input:checked {
   background: #ffffff;
   border-color: #ffffff;
}

/* Add Buttons */
.add-btn {
   background: transparent;
   border: 1px solid #444;
   border-radius: var(--radius-pill);
   padding: 16px 24px;
   color: #ffffff;
   font-family: var(--font-body);
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 10px;
   width: max-content;
   transition: var(--transition);
}

.add-btn:hover {
   border-color: var(--primary-color);
}

.add-btn i {
   font-size: 12px;
}

/* Divider */
.optional-divider {
   display: flex;
   align-items: center;
   text-align: center;
   font-size: 13px;
   color: #666;
   margin: 2px 0;
}

.optional-divider::before,
.optional-divider::after {
   content: '';
   flex: 1;
   border-bottom: 1px solid #333;
}

.optional-divider::before {
   margin-right: 20px;
}

.optional-divider::after {
   margin-left: 20px;
}

/* Submit & Links */
.auth-submit {
   margin-top: 14px;
   width: 100%;
   padding: 18px;
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 600;
}

.auth-switch {
   text-align: center;
   margin-top: 16px;
   font-size: 14px;
   color: #999;
}

@media (max-width: 991px) {
   .auth-layout {
      display: block;
      min-height: 100vh;
      padding: 0 17px 54px;
   }

   .auth-art {
      display: none;
   }

   .auth-art::before,
   .auth-art::after,
   .auth-art__copy {
      display: none;
   }

   .auth-art__logo img {
      width: 155px;
   }

   .auth-panel {
      padding: 48px 0 0;
      overflow: visible;
      height: auto;
      min-height: auto;
      justify-content: flex-start;
   }

   .auth-mobile-logo {
      display: inline-flex;
      margin-bottom: 34px;
   }

   .auth-mobile-logo img {
      width: 155px;
      height: auto;
   }

   .auth-panel h2 {
      max-width: none;
      margin-bottom: 32px;
      font-size: 36px;
   }

   .dark-form {
      max-width: none;
      gap: 28px;
   }

   .photo-upload-container {
      display: block;
      padding: 26px 18px 28px;
   }

   .photo-upload-copy {
      min-width: 0;
   }

   .photo-upload-info {
      margin-bottom: 22px;
   }

   .photo-boxes {
      gap: 18px;
   }

   .photo-box {
      flex: 1;
      width: auto;
      height: 133px;
   }

   .form-row {
      flex-direction: column;
      gap: 28px;
   }

   .form-group>.form-row {
      flex-direction: row;
      gap: 9px;
   }

   .pill-group {
      gap: 12px;
   }

   .auth-submit {
      min-height: 49px;
      margin-top: 20px;
   }
}

.auth-switch a {
   color: var(--primary-color);
   font-weight: 500;
   text-decoration: underline;
}

/* Auth page micro animations */
.auth-art {
   animation: authArtIn .65s ease-out both;
}

.auth-art__logo,
.auth-art__copy {
   animation: authCopyIn .58s ease-out both;
}

.auth-art__copy {
   animation-delay: .12s;
}

.auth-panel {
   animation: authPanelIn .6s ease-out both;
}

.dark-form .form-group,
.photo-upload-container,
.optional-divider,
.auth-submit,
.auth-switch {
   animation: authFieldIn .45s ease-out both;
}

.dark-form .form-group:nth-child(2) {
   animation-delay: .04s;
}

.dark-form .form-group:nth-child(3) {
   animation-delay: .08s;
}

.dark-form .form-group:nth-child(4) {
   animation-delay: .12s;
}

.dark-form .form-group:nth-child(5) {
   animation-delay: .16s;
}

.photo-box,
.pill-radio span,
.dark-checkbox input,
.add-btn,
.password-toggle,
.auth-submit {
   transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease, color .24s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
   border-color: rgba(239, 41, 95, .82);
   box-shadow: 0 0 0 4px rgba(239, 41, 95, .12), 0 10px 24px rgba(239, 41, 95, .08);
}

.photo-box:hover,
.pill-radio span:hover,
.add-btn:hover {
   transform: translateY(-2px);
}

.photo-box:hover {
   box-shadow: 0 14px 30px rgba(239, 41, 95, .14);
   animation: authDashedBorder .8s linear infinite;
}

.photo-box.has-image img {
   transition: transform .34s ease;
}

.photo-box.has-image:hover img {
   transform: scale(1.04);
}

.auth-submit:hover,
.auth-submit:focus-visible {
   transform: translateY(-2px);
   box-shadow: 0 16px 32px rgba(239, 41, 95, .3);
}

.dark-checkbox input:checked,
.pill-radio input:checked + span {
   animation: authTinyPop .2s ease-out;
}

@keyframes authArtIn {
   from {
      opacity: 0;
      filter: saturate(.9);
   }

   to {
      opacity: 1;
      filter: saturate(1);
   }
}

@keyframes authCopyIn {
   from {
      opacity: 0;
      transform: translateY(12px);
   }

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

@keyframes authPanelIn {
   from {
      opacity: 0;
      transform: translateX(12px);
   }

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

@keyframes authFieldIn {
   from {
      opacity: 0;
      transform: translateY(8px);
   }

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

@keyframes authTinyPop {
   50% {
      transform: scale(1.04);
   }
}

@keyframes authDashedBorder {
   0% {
      border-color: rgba(239, 41, 95, .35);
   }

   50% {
      border-color: rgba(239, 41, 95, .9);
   }

   100% {
      border-color: rgba(239, 41, 95, .35);
   }
}

@media (prefers-reduced-motion: reduce) {
   .auth-art,
   .auth-art__logo,
   .auth-art__copy,
   .auth-panel,
   .dark-form .form-group,
   .photo-upload-container,
   .optional-divider,
   .auth-submit,
   .auth-switch,
   .dark-checkbox input:checked,
   .pill-radio input:checked + span,
   .photo-box:hover {
      animation: none !important;
   }

   .photo-box:hover,
   .pill-radio span:hover,
   .add-btn:hover,
   .auth-submit:hover,
   .auth-submit:focus-visible {
      transform: none;
   }
}