/* buttons (reuse your existing .button styles if any) */
.button { cursor: pointer; border: 1px solid transparent; padding: .6rem .95rem; border-radius: .6rem; font-weight: 600; }
.button.medium { background: var(--secondary-color); color:var(--accent-2); }
.button.medium:hover { background: var(--secondary-color); color:var(--accent-2);text-decoration:none}
.button.secondary { background: var(--accent-4); color: var(--accent-2); border-color: #e2e2e2; }
.button.secondary:hover {     background: var(--accent-4);text-decoration: none; }

.auth-cta { display: flex; gap: .5rem; margin-left: auto; }

/* Modal shell */
.auth-modal { position: fixed; inset: 0; display: none; }
.auth-modal.is-open { display: block; z-index: 9999; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

/* Dialog */
.auth-dialog { position: relative; margin: 5vh auto; width: min(92vw, 420px); background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 1rem; z-index: 1; }
.auth-close { position: absolute; top: .5rem; right: .5rem; background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #f6f6f6; border-radius: 12px; padding: .25rem; margin: .25rem 0 1rem; }
.auth-tab { border: 0; background: transparent; padding: .6rem; border-radius: 10px; font-weight: 600; cursor: pointer; color: #444; }
.auth-tab.is-active { background: #fff; color: #111; box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px #eee; }

.auth-form { display: block; }
.auth-form.is-hidden { display: none; }
.auth-title { margin: .25rem 0 1rem; font-size: 1.15rem; }

.auth-field { display: grid; gap: .35rem; margin-bottom: .75rem; }
.auth-field label { font-size: .9rem; color: #444; }
.auth-field input { padding: .65rem .75rem; border-radius: 10px; border: 1px solid #e5e5e5; background: #fafafa; }
.auth-field input:focus { outline: none; border-color: #cfcfcf; background: #fff; }

.auth-actions { margin: .75rem 0; }
.w-100 { width: 100%; }

.auth-meta { font-size: .9rem; text-align: center; }
.auth-meta a { color: #111; text-decoration: none; }

.auth-feedback { margin-top: .5rem; font-size: .9rem; }
.auth-feedback.is-error { color: #b30000; }
.auth-feedback.is-ok { color: #127512; }

/* Mobile: buttons stack nicely */
@media (max-width: 991px) {
  .auth-cta { margin-left: 0; }
}

.header .header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header .desktop-nav { margin-left: 1rem; flex: 1; }
.header .auth-cta { display: flex; gap: .5rem; }  
@media (max-width: 991px){
  
}

.haris-auth-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.haris-auth-modal.is-open { display: block; }
.haris-auth-modal .auth-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.haris-auth-modal .auth-dialog {
  position: relative; max-width: 420px; margin: 8vh auto; z-index: 1;
  background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.auth-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 20px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tab { flex: 1; padding: 10px; border: 1px solid #ddd; background: #f8f8f8; border-radius: 8px; }
.auth-tab.is-active { background: #e9f4ff; border-color: #a3d1ff; }
.auth-panel.is-hidden { display: none; }
.auth-feedback { margin: 10px 0; font-size: 14px; }
.auth-feedback.is-error { color: #b00020; }
.auth-feedback.is-ok { color: #0a7a2f; }