/* ── MS Client Portal — Auth Slide Panel ─────────────────────────── */
:root {
  --mscp-orange:  #ED804B;
  --mscp-blue:    #19639A;
  --mscp-dark:    #0F172A;
  --mscp-white:   #FFFFFF;
  --mscp-gray50:  #F8FAFC;
  --mscp-gray100: #F1F5F9;
  --mscp-gray200: #E2E8F0;
  --mscp-gray400: #94A3B8;
  --mscp-gray600: #475569;
  --mscp-gray800: #1E293B;
  --mscp-green:   #22C55E;
  --mscp-red:     #EF4444;
  --mscp-radius:  12px;
  --mscp-shadow:  0 25px 60px rgba(0,0,0,.22);
  --mscp-panel-w: 420px;
  --mscp-transition: .35s cubic-bezier(.4,0,.2,1);
}

/* Overlay */
.mscp-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--mscp-transition);
}
.mscp-overlay.open { opacity: 1; pointer-events: all; }

/* Panel */
.mscp-auth-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 99999;
  width: var(--mscp-panel-w);
  max-width: 100%;
  background: var(--mscp-white);
  box-shadow: var(--mscp-shadow);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--mscp-transition);
  overflow: hidden;
}
.mscp-auth-panel.open { transform: translateX(0); }

/* Header */
.mscp-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  background: var(--mscp-dark);
  flex-shrink: 0;
}
.mscp-panel-logo { height: 32px; width: auto; }
.mscp-panel-brand {
  font-size: 18px; font-weight: 700; color: var(--mscp-white);
  letter-spacing: .5px;
}
.mscp-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: rgba(255,255,255,.1);
  color: var(--mscp-white); cursor: pointer;
  transition: background .2s;
}
.mscp-close-btn:hover { background: rgba(255,255,255,.2); }

/* Tab Nav */
.mscp-tab-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--mscp-gray100);
  flex-shrink: 0;
}
.mscp-tab-btn {
  padding: 14px; border: none; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--mscp-gray600);
  cursor: pointer; position: relative; transition: color .2s;
}
.mscp-tab-btn::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--mscp-orange);
  transform: scaleX(0); transition: transform .25s;
  border-radius: 3px 3px 0 0;
}
.mscp-tab-btn.active { color: var(--mscp-dark); }
.mscp-tab-btn.active::after { transform: scaleX(1); }

/* Panel body */
.mscp-panel-body {
  flex: 1; overflow-y: auto; padding: 28px 24px 20px;
}

/* Tab panes */
.mscp-tab-pane { display: none; }
.mscp-tab-pane.active { display: block; }

.mscp-welcome-text {
  font-size: 14px; color: var(--mscp-gray600); margin: 0 0 20px;
}

/* Messages */
.mscp-msg {
  display: none; padding: 12px 14px; border-radius: 8px;
  font-size: 13px; margin-bottom: 18px;
}
.mscp-msg.error   { display: block; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.mscp-msg.success { display: block; background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }

/* Fields */
.mscp-field { margin-bottom: 16px; }
.mscp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
.mscp-field-row .mscp-field { margin-bottom: 16px; }

.mscp-field label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--mscp-gray800);
  margin-bottom: 6px;
}
.mscp-forgot-link {
  font-size: 12px; font-weight: 500; color: var(--mscp-blue);
  text-decoration: none;
}
.mscp-forgot-link:hover { text-decoration: underline; }

.mscp-field input[type="text"],
.mscp-field input[type="email"],
.mscp-field input[type="password"] {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  border: 1.5px solid var(--mscp-gray200);
  border-radius: 9px;
  font-size: 14px; color: var(--mscp-gray800);
  background: var(--mscp-white);
  outline: none; transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
.mscp-field input:focus {
  border-color: var(--mscp-orange);
  box-shadow: 0 0 0 3px rgba(237,128,75,.15);
}

/* Password wrapper */
.mscp-pass-wrap { position: relative; }
.mscp-pass-wrap input { padding-right: 42px !important; }
.mscp-eye-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer;
  color: var(--mscp-gray400); padding: 2px; line-height: 1;
}
.mscp-eye-btn:hover { color: var(--mscp-gray600); }

/* Password strength */
.mscp-strength-bar {
  height: 4px; border-radius: 4px; background: var(--mscp-gray200);
  margin-top: 8px; overflow: hidden;
}
.mscp-strength-fill {
  height: 100%; width: 0; border-radius: 4px;
  transition: width .3s, background .3s;
}
.mscp-strength-label {
  display: block; font-size: 11px; color: var(--mscp-gray400);
  margin-top: 4px;
}

/* Checkbox */
.mscp-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 20px; cursor: pointer;
}
.mscp-check input[type="checkbox"] {
  width: 16px; height: 16px; border: 1.5px solid var(--mscp-gray200);
  border-radius: 4px; accent-color: var(--mscp-orange);
  margin-top: 1px; flex-shrink: 0;
}
.mscp-check span {
  font-size: 13px; color: var(--mscp-gray600); line-height: 1.5;
}
.mscp-check span a { color: var(--mscp-blue); text-decoration: none; }
.mscp-check span a:hover { text-decoration: underline; }

/* Submit button */
.mscp-submit-btn {
  width: 100%; padding: 13px;
  background: var(--mscp-orange); color: var(--mscp-white);
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(237,128,75,.4);
}
.mscp-submit-btn:hover {
  background: #d96e38;
  box-shadow: 0 6px 20px rgba(237,128,75,.5);
}
.mscp-submit-btn:active { transform: translateY(1px); }
.mscp-submit-btn:disabled { opacity: .65; cursor: not-allowed; pointer-events: none; }

/* Spinner */
.mscp-spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3);
  border-top-color: white; border-radius: 50%;
  animation: mscp-spin .7s linear infinite;
  display: none;
}
.mscp-submit-btn.loading .mscp-spinner { display: block; }
.mscp-submit-btn.loading .mscp-btn-text { opacity: 0; position: absolute; }

@keyframes mscp-spin { to { transform: rotate(360deg); } }

/* Switch text */
.mscp-switch-text {
  text-align: center; margin-top: 20px;
  font-size: 13px; color: var(--mscp-gray600);
}
.mscp-switch-tab {
  border: none; background: none; color: var(--mscp-orange);
  font-weight: 600; cursor: pointer; padding: 0;
  font-size: inherit;
}
.mscp-switch-tab:hover { text-decoration: underline; }

/* Footer */
.mscp-panel-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px; border-top: 1px solid var(--mscp-gray100);
  font-size: 12px; color: var(--mscp-gray400); flex-shrink: 0;
}

/* Mobile */
@media (max-width: 480px) {
  .mscp-auth-panel { width: 100%; }
  .mscp-field-row { grid-template-columns: 1fr; }
}

/* ── Header auth buttons (logged-in state) ───────────────────────────
   The two header buttons are separate Elementor widgets sharing one
   ~209px flex column. "My Account" + "Logout" measure ~215px at the
   theme's default padding, so they wrapped onto two rows and made the
   header taller. Shrink them to FIT the column rather than forcing
   nowrap, which would push content past the viewport edge.
   .mscp-auth-btns is added by mscp-auth.js, so only the swapped auth
   buttons are affected - no other header widget.                      */
.elementor-widget-wrap.mscp-auth-btns {
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
.elementor-widget-wrap.mscp-auth-btns > .elementor-element {
  flex: 0 1 auto !important;   /* may shrink - never overflows the column */
  width: auto !important;
  max-width: 100% !important;
}
.elementor-widget-wrap.mscp-auth-btns .elementor-button {
  white-space: nowrap !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  font-size: 14px !important;
}