/* Sign in and Create Account pages: same look as the main Pikartz website */
@font-face { font-family: "Value Sans Pro"; src: url(../../assets/fonts/ValueSansPro-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Value Sans Pro"; src: url(../../assets/fonts/ValueSansPro-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Value Sans Pro"; src: url(../../assets/fonts/ValueSansPro-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root { --pk-accent: #E2702A; --pk-navy: #1F2A44; --pk-bg: #F7F5F2; --pk-line: #E6E2DC; --pk-text: #565A63; }

body { font-family: "Value Sans Pro", Arial, Helvetica, sans-serif; background: var(--pk-bg); color: var(--pk-text); }
.container { border-radius: 0; box-shadow: 0 18px 50px rgba(31, 42, 68, .14); height: auto; min-height: 600px; }

/* Left panel */
.left {
  background: linear-gradient(rgba(31, 42, 68, .9), rgba(31, 42, 68, .9)), url('../../assets/img/hero/wedding-color-correction-after-900.webp');
  background-size: cover;
  background-position: center;
  align-items: flex-start;
  padding: 56px;
}
.left::after { width: 4px; background: var(--pk-accent); }
.left h2 { font-size: 34px; font-weight: 500; line-height: 1.15; margin-bottom: 16px; color: #fff; }
.left p { font-size: 17px; line-height: 1.6; text-align: left; margin-bottom: 26px; color: rgba(255, 255, 255, .86); }
.left ul { margin: 0 0 22px; padding-left: 20px; color: rgba(255, 255, 255, .86); line-height: 1.9; }
.left ul li::marker { color: var(--pk-accent); }

/* Right panel */
.right { padding: 56px 60px; }
.right h1 { font-size: 38px; font-weight: 500; color: var(--pk-navy); margin-bottom: 26px; }
.logo { display: block; width: 172px; max-width: 172px; margin-bottom: 34px; color: var(--pk-navy); line-height: 0; }
.logo svg { display: block; width: 100%; height: auto; }
.wizard-step h5 { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pk-accent); margin-bottom: 18px; }
.spacer { height: 0; }

/* Fields */
.form-control { border: 1px solid var(--pk-line); border-radius: 0; background-color: var(--pk-bg); color: var(--pk-navy); }
.form-control::placeholder { color: #80848C; }
.form-control:focus { border-color: var(--pk-accent); background-color: #fff; box-shadow: none; }
.forgot-password a { color: var(--pk-accent); }
.forgot-password a:hover { color: var(--pk-navy); }

/* Buttons */
.btn-primary, .create-btn { background-color: var(--pk-accent); border: 1px solid var(--pk-accent); border-radius: 0; color: #fff; font-weight: 700; padding: 14px 28px; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #C95F1F !important; border-color: #C95F1F !important; }
.create-btn:hover { background-color: #fff; border-color: #fff; color: var(--pk-navy); }
.btn-normal, .btn-secondary { border-radius: 0; padding: 14px 28px; }
.modal-content { border-radius: 0; }

/* Phones: the form comes first */
@media (max-width: 768px) {
  .container { flex-direction: column; min-height: 0; padding: 0; }
  .right { order: -1; padding: 32px 22px; }
  .left { padding: 32px 22px; }
  .left::after { width: 100%; height: 4px; bottom: auto; }
  .left h2 { font-size: 28px; }
  .right h1 { font-size: 32px; }
  .logo { margin-bottom: 26px; }
}