/* =============================================================================
   ApexMart Auth – Front-End Stylesheet
   Version: 1.0.0
   ============================================================================= */

/* ── Custom Properties ─────────────────────────────────────────────────────── */
:root {
	--apex-primary:        #6C3DFF;
	--apex-primary-dark:   #5429DA;
	--apex-primary-light:  #EDE8FF;
	--apex-accent:         #FF6B35;
	--apex-success:        #198754;
	--apex-success-bg:     #d1e7dd;
	--apex-danger:         #dc3545;
	--apex-danger-bg:      #f8d7da;
	--apex-warning:        #fd7e14;
	--apex-text:           #212529;
	--apex-muted:          #6c757d;
	--apex-border:         #dee2e6;
	--apex-bg:             #f8f9fa;
	--apex-white:          #ffffff;
	--apex-card-shadow:    0 16px 48px rgba(108, 61, 255, 0.14);
	--apex-radius:         14px;
	--apex-radius-sm:      8px;
	--apex-transition:     all 0.28s ease;
	--apex-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Wrapper (full-page centered layout) ───────────────────────────────────── */
.apexmart-auth-wrapper {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	min-height:       100vh;
	padding:          24px 16px;
	background:       linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	font-family:      var(--apex-font);
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.apexmart-auth-card {
	background:     var(--apex-white);
	border-radius:  var(--apex-radius);
	box-shadow:     var(--apex-card-shadow);
	padding:        40px 44px;
	width:          100%;
	max-width:      700px;
	animation:      apexSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes apexSlideIn {
	from { opacity: 0; transform: translateY(-24px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.apexmart-auth-header {
	text-align:     center;
	margin-bottom:  28px;
}

/* Logo mark bubble */
.apexmart-logo-mark {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            58px;
	height:           58px;
	border-radius:    50%;
	background:       linear-gradient(135deg, var(--apex-primary), var(--apex-primary-dark));
	color:            var(--apex-white);
	font-size:        18px;
	font-weight:      800;
	letter-spacing:   .5px;
	margin-bottom:    14px;
	box-shadow:       0 6px 18px rgba(108, 61, 255, 0.35);
}

.apexmart-auth-header h2,
.apexmart-auth-header h3 {
	color:        var(--apex-primary);
	font-weight:  700;
	font-size:    24px;
	margin:       0 0 6px;
}

.apexmart-auth-header p {
	color:  var(--apex-muted);
	margin: 0;
	font-size: 14px;
}

/* ── Form Controls ─────────────────────────────────────────────────────────── */
.apexmart-form .form-label {
	font-weight:   600;
	font-size:     14px;
	color:         var(--apex-text);
	margin-bottom: 5px;
}

.apexmart-form .form-control {
	border:          2px solid var(--apex-border);
	border-radius:   var(--apex-radius-sm);
	padding:         10px 14px;
	font-size:       15px;
	transition:      var(--apex-transition);
	background:      var(--apex-white);
	color:           var(--apex-text);
}

.apexmart-form .form-control:focus {
	border-color: var(--apex-primary);
	box-shadow:   0 0 0 3px rgba(108, 61, 255, 0.12);
	outline:      none;
}

.apexmart-form .form-control.is-valid {
	border-color: var(--apex-success);
}

.apexmart-form .form-control.is-invalid {
	border-color: var(--apex-danger);
}

/* Checkbox */
.apexmart-form .form-check-input:checked {
	background-color: var(--apex-primary);
	border-color:     var(--apex-primary);
}

.apexmart-form .form-check-input:focus {
	box-shadow: 0 0 0 3px rgba(108, 61, 255, 0.2);
}

/* ── Input Group (flag prefix + eye toggle) ────────────────────────────────── */
.apexmart-flag {
	background:  var(--apex-primary-light);
	border:      2px solid var(--apex-border);
	border-right: none;
	color:       var(--apex-primary);
	font-size:   13px;
	font-weight: 600;
	border-radius: var(--apex-radius-sm) 0 0 var(--apex-radius-sm) !important;
	padding:      10px 12px;
}

.input-group .form-control {
	border-radius: 0 var(--apex-radius-sm) var(--apex-radius-sm) 0 !important;
}

/* Single input (no prefix) inside input-group still rounded on left */
.input-group > .form-control:first-child {
	border-radius: var(--apex-radius-sm) 0 0 var(--apex-radius-sm) !important;
}

.apexmart-eye {
	border:         2px solid var(--apex-border);
	border-left:    none;
	border-radius:  0 var(--apex-radius-sm) var(--apex-radius-sm) 0 !important;
	background:     var(--apex-white);
	color:          var(--apex-muted);
	padding:        10px 12px;
	transition:     var(--apex-transition);
	cursor:         pointer;
}

.apexmart-eye:hover {
	background: var(--apex-primary-light);
	color:      var(--apex-primary);
}

/* ── Password Strength Bar ─────────────────────────────────────────────────── */
.apex-strength-wrap {
	margin-top: 6px;
}

.apex-strength-bar {
	height:        4px;
	border-radius: 4px;
	background:    var(--apex-border);
	overflow:      hidden;
	margin-bottom: 3px;
}

.apex-strength-fill {
	height:     100%;
	border-radius: 4px;
	transition: width 0.3s ease, background 0.3s ease;
}

.apex-strength-label {
	font-size:   12px;
	font-weight: 600;
}

/* ── Required / Optional Labels ────────────────────────────────────────────── */
.req {
	color:      var(--apex-danger);
	margin-left: 2px;
}

.apex-optional {
	color:      var(--apex-muted);
	font-size:  12px;
	font-weight: 400;
	margin-left: 4px;
}

/* ── Primary Button ────────────────────────────────────────────────────────── */
.apexmart-btn-primary {
	background:     linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-primary-dark) 100%);
	border:         none;
	color:          var(--apex-white);
	font-weight:    700;
	letter-spacing: 0.4px;
	border-radius:  var(--apex-radius-sm);
	padding:        13px;
	font-size:      16px;
	transition:     var(--apex-transition);
	position:       relative;
}

.apexmart-btn-primary:hover,
.apexmart-btn-primary:focus-visible {
	background:  linear-gradient(135deg, var(--apex-primary-dark) 0%, #4019b8 100%);
	color:       var(--apex-white);
	transform:   translateY(-2px);
	box-shadow:  0 8px 24px rgba(108, 61, 255, 0.38);
}

.apexmart-btn-primary:active {
	transform: translateY(0);
}

.apexmart-btn-primary:disabled {
	opacity:   0.65;
	transform: none;
	cursor:    not-allowed;
}

/* ── Alert / Message Boxes ──────────────────────────────────────────────────── */
.apexmart-message {
	border-radius:  var(--apex-radius-sm);
	padding:        13px 16px;
	font-size:      14px;
	line-height:    1.5;
	border-left:    4px solid transparent;
}

.apexmart-success {
	background:   var(--apex-success-bg);
	border-color: var(--apex-success);
	color:        #0a3622;
}

.apexmart-error {
	background:   var(--apex-danger-bg);
	border-color: var(--apex-danger);
	color:        #58151c;
}

/* ── Footer Links ──────────────────────────────────────────────────────────── */
.apex-foot {
	color:     var(--apex-muted);
	font-size: 14px;
	margin:    0;
}

.apex-link {
	color:           var(--apex-primary);
	font-weight:     600;
	text-decoration: none;
	transition:      var(--apex-transition);
}

.apex-link:hover {
	color:           var(--apex-primary-dark);
	text-decoration: underline;
}

.apex-sm {
	font-size: 13px;
}

/* ── Already Logged In Notice ──────────────────────────────────────────────── */
.apexmart-notice {
	text-align:    center;
	padding:       20px;
	color:         var(--apex-muted);
	background:    var(--apex-bg);
	border-radius: var(--apex-radius);
	font-size:     15px;
}

/* ── Divider ────────────────────────────────────────────────────────────────── */
.apex-divider {
	display:         flex;
	align-items:     center;
	gap:             12px;
	margin:          18px 0;
	color:           var(--apex-muted);
	font-size:       13px;
}

.apex-divider::before,
.apex-divider::after {
	content:     '';
	flex:        1;
	height:      1px;
	background:  var(--apex-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 768px) {
	.apexmart-auth-card {
		padding: 28px 24px;
	}

	.apexmart-auth-header h2 {
		font-size: 21px;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.apexmart-auth-wrapper {
		padding:    0;
		background: var(--apex-white);
		min-height: unset;
	}

	.apexmart-auth-card {
		border-radius: 0;
		box-shadow:    none;
		padding:       24px 18px;
		min-height:    100vh;
	}

	/* Prevent iOS auto-zoom on focus */
	.apexmart-form .form-control {
		font-size: 16px;
	}
}