@import url("../css/theme.css");

body{
	padding-top:0;
	background-color: var(--color-bg);
	color: var(--color-text-primary);
	min-height:100vh;
}

button,
.btn,
.sidebar-action,
.filter_btn{
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
}

button:hover,
.btn:hover,
.sidebar-action:hover,
.filter_btn:hover{
	filter: brightness(0.97);
	transform: translateY(-1px);
}

button:focus,
.btn:focus,
.sidebar-action:focus,
.filter_btn:focus,
button:active:focus,
.btn:active:focus,
.sidebar-action:active:focus,
.filter_btn:active:focus{
	outline: 0;
	box-shadow: 0 0 0 2px rgba(26, 44, 66, 0.25);
}

button[disabled],
.btn[disabled],
.sidebar-action[disabled],
.filter_btn[disabled],
fieldset[disabled] button,
fieldset[disabled] .btn{
	cursor: not-allowed;
	opacity: 0.6;
	box-shadow: none;
}

.connect-topbar{
	background-color: var(--color-bg);
	padding-top:4px;
	padding-bottom:4px;
	box-shadow:none;
	overflow:visible;
	min-height:100vh;
}

.connect-topbar-error{
	min-height:24px;
	color: var(--color-text-primary);
	margin-bottom:6px;
}

.connect-topbar-upgrade{
	margin-bottom:6px;
	padding:7px 10px;
	border-radius:3px;
	background:rgba(243, 200, 75, 0.18);
	border:1px solid rgba(243, 200, 75, 0.45);
	color: var(--color-accent-gold);
	font-size:12px;
}

.connect-topbar-main{
	padding-top:0;
	padding-bottom:2px;
	overflow:visible;
}

.connect-topbar-row{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:16px;
	overflow:visible;
}

.connect-topbar-row > [class*="col-"]{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
}

.connect-topbar-icon-col{
	justify-content:center;
	overflow:visible;
	flex-direction:column;
}

.connect-topbar-icon-col a{
	display:inline-block;
	overflow:visible;
	position:relative;
	z-index:1;
}

.connect-topbar-icon-col a::before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:240px;
	height:240px;
	transform:translate(-50%, -50%);
	border-radius:50%;
	background:radial-gradient(circle, rgba(201, 169, 106, 0.28) 0%, rgba(201, 169, 106, 0.14) 45%, rgba(201, 169, 106, 0.0) 75%);
	filter:blur(2px);
	z-index:0;
	pointer-events:none;
	animation:solar-aura 4.6s ease-in-out infinite;
}

.connect-topbar-brand-col{
	justify-content:flex-start;
	padding-left:28px;
	flex-direction:column;
	align-items:flex-start;
}

.connect-topbar-menu-col{
	justify-content:center;
	margin-left:0;
}

.connect-topbar-contact-col{
	justify-content:flex-end;
}

.connect-logo-icon{
	max-height:240px;
	width:auto;
	display:block;
	position:relative;
	z-index:2;
	filter: drop-shadow(0 0 10px rgba(201, 169, 106, 0.45)) drop-shadow(0 0 22px rgba(201, 169, 106, 0.22));
	animation:solar-glow 3.8s ease-in-out infinite;
}

@keyframes solar-glow{
	0%{
		filter: drop-shadow(0 0 7px rgba(201, 169, 106, 0.30)) drop-shadow(0 0 14px rgba(201, 169, 106, 0.15));
	}
	35%{
		filter: drop-shadow(0 0 12px rgba(201, 169, 106, 0.55)) drop-shadow(0 0 26px rgba(201, 169, 106, 0.30));
	}
	65%{
		filter: drop-shadow(0 0 9px rgba(201, 169, 106, 0.42)) drop-shadow(0 0 20px rgba(201, 169, 106, 0.22));
	}
	100%{
		filter: drop-shadow(0 0 7px rgba(201, 169, 106, 0.30)) drop-shadow(0 0 14px rgba(201, 169, 106, 0.15));
	}
}

@keyframes solar-aura{
	0%{
		opacity:0.55;
		transform:translate(-50%, -50%) scale(0.94);
	}
	50%{
		opacity:0.9;
		transform:translate(-50%, -50%) scale(1.07);
	}
	100%{
		opacity:0.55;
		transform:translate(-50%, -50%) scale(0.94);
	}
}

.connect-logo-title{
	margin-top:8px;
	font-size:42px;
	font-weight:800;
	letter-spacing:3px;
	line-height:1;
	color: var(--color-text-primary);
	text-align:center;
}

.connect-brand-text-link{
	text-decoration:none;
	color: var(--color-text-primary);
	display:block;
	line-height:1.2;
}

.connect-brand-title{
	display:block;
	font-size:20px;
	font-weight:700;
	letter-spacing:0.5px;
	color: var(--color-text-primary);
}

.connect-brand-subtitle{
	display:block;
	margin-top:2px;
	font-size:12px;
	color: var(--color-text-secondary);
}

.connect-contact-text{
	color: var(--color-text-secondary);
	text-align:right;
	font-size:13px;
	line-height:1.35;
}

.connect-contact-text strong{
	font-weight:700;
}

.user_msg{
	display:inline-block;
	padding:6px 12px;
	border-radius:2px;
	font-size:12px;
	font-weight:600;
	border:1px solid;
	line-height:1.35;
}

.user_msg .glyphicon{
	font-size:12px;
	margin-right:6px;
	top:1px;
}

.user_msg-info{
	color: var(--color-text-secondary);
	background: var(--color-bg-elevated);
	border-color: var(--color-border-subtle);
}

.user_msg-connect{
	color: var(--color-accent-red);
	background: var(--color-error-bg);
	border-color: var(--color-error-border);
	font-size:11px;
	padding:4px 10px;
}

.connect-auth-note{
	margin-top:6px;
	text-align:center;
	font-size:11px;
	line-height:1.25;
	color: var(--color-accent-red);
}

#register_form{
	background-color: var(--color-bg-surface);
	padding:16px;
	border-radius:8px;
}

#register_form label{
	color: var(--color-text-primary);
}

.user_msg-error{
	color: var(--color-error-text);
	background: var(--color-error-bg);
	border-color: var(--color-error-border);
}

.user_msg-success{
	color: var(--color-success);
	background: rgba(34,197,94,0.1);
	border-color: rgba(34,197,94,0.3);
}

.featured_items{
	text-align: center;
	border:0px solid #cecece;
	transition: transform .35s ease;
	transform-origin:center center;
	position:relative;
}

.featured_items:hover{
	transform: scale(1.2);
	z-index:10;
}

.featured_items img{
	height:128px;
	width:100%;
}

.featured_product_img_div{
	padding:10px 10px 0px 10px;
}

.featured_product_title_div{
	height:80px;
	font-family:"arial";
	font-size:11px;
	color: var(--color-text-secondary);
	padding-top:20px;
}

.navbar-btn{
	margin-left:10px;
}

.navbar{
	margin-top:15px;
	box-shadow: -1px 2px 10px 1px rgba(0, 0, 0, 0.3); 
}

.connect-login-nav{
	margin-top:0;
	margin-bottom:0;
	box-shadow:none;
	border-radius:0;
	width:100%;
	min-height:0;
}

.connect-login-collapse{
	padding-left:0;
	padding-right:0;
	display:flex !important;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
	gap:10px;
}

.connect-login-collapse .navbar-btn,
.connect-login-collapse .navbar-form{
	margin-top:0;
	margin-bottom:0;
}

.connect-auth-actions{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:0;
}

.connect-auth-field{
	margin-bottom:0;
}

.connect-auth-field .form-control{
	min-width:280px;
	height:34px;
	background-color: var(--color-bg-surface);
	border:1px solid var(--color-border-input);
	color: var(--color-text-primary);
	box-shadow:none;
}

.connect-auth-field .form-control::placeholder{
	color: var(--color-text-placeholder);
}

.connect-auth-field .form-control:focus{
	border-color: var(--color-accent-gold);
	box-shadow:0 0 0 2px rgba(201,169,106,0.2);
}

.connect-auth-submit{
	display:flex;
	align-items:center;
	width:280px;
	gap:8px;
}

.connect-auth-actions .btn{
	width:100%;
	padding:6px 12px;
	font-size:12px;
	line-height:1.5;
}

.connect-auth-actions .navbar-btn{
	margin-left:0;
	margin-right:0;
}

.connect-login-collapse .btn,
#connectLoginModal .btn,
#connectRetrieveModal .btn,
#connectRegisterModal .btn,
#connect_container .btn{
	border-radius:8px;
	padding:8px 14px;
	font-weight:600;
	letter-spacing:0.2px;
	border-width:1px;
	box-shadow:0 2px 6px rgba(0,0,0,0.16);
}

.connect-login-collapse .btn:hover,
#connectLoginModal .btn:hover,
#connectRetrieveModal .btn:hover,
#connectRegisterModal .btn:hover,
#connect_container .btn:hover{
	transform: translateY(-1px);
	box-shadow:0 6px 12px rgba(0,0,0,0.2);
}

.connect-login-collapse .btn i,
#connectLoginModal .btn i,
#connectRetrieveModal .btn i,
#connectRegisterModal .btn i,
#connect_container .btn i{
	margin-right:6px;
}

/* Default modal size — tighter than Bootstrap's 600px default. Covers the
   login / register / retrieve forms which only need ~500px on desktop.
   Mobile still caps at 94vw via the media query below. */
#connectLoginModal .modal-dialog,
#connectRetrieveModal .modal-dialog,
#connectRegisterModal .modal-dialog{
	max-width:500px;
	margin:60px auto;
}

@media (max-width: 560px){
	#connectLoginModal .modal-dialog,
	#connectRetrieveModal .modal-dialog,
	#connectRegisterModal .modal-dialog{
		max-width:94vw;
		margin:20px auto;
	}
}

#connectLoginModal .modal-content,
#connectRetrieveModal .modal-content,
#connectRegisterModal .modal-content{
	border:1px solid var(--color-border);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 10px 28px rgba(0,0,0,0.32);
}

#connectLoginModal .modal-header,
#connectRetrieveModal .modal-header,
#connectRegisterModal .modal-header{
	background-color: var(--color-bg-surface);
	border-bottom:1px solid var(--color-border-subtle);
	color: var(--color-text-primary);
}

#connectLoginModal .modal-title,
#connectRetrieveModal .modal-title,
#connectRegisterModal .modal-title{
	color: var(--color-text-primary);
	font-weight:700;
}

#connectLoginModal .modal-header .close,
#connectRetrieveModal .modal-header .close,
#connectRegisterModal .modal-header .close{
	color: var(--color-text-muted);
	opacity:0.9;
	text-shadow:none;
}

#connectLoginModal .modal-body,
#connectRetrieveModal .modal-body,
#connectRegisterModal .modal-body{
	background-color: var(--color-bg-elevated);
}

.connect-auth-primary{
	background-color:#c9a96a;
	border-color:#c9a96a;
	color:#1f1a12;
}

.connect-auth-primary:hover,
.connect-auth-primary:focus,
.connect-auth-primary:active,
.connect-auth-primary:active:focus{
	background-color:#b99657;
	border-color:#b99657;
	color:#1f1a12;
}

.connect-auth-secondary{
	background-color:transparent;
	border-color: var(--color-accent-gold);
	color: var(--color-accent-gold);
}

.connect-auth-secondary:hover,
.connect-auth-secondary:focus,
.connect-auth-secondary:active,
.connect-auth-secondary:active:focus{
	background-color:rgba(243,200,75,0.16);
	border-color: var(--color-accent-gold);
	color: var(--color-accent-gold-light);
}

.connect-login-form{
	display:flex;
	align-items:center;
	gap:8px;
}

.connect-login-form .form-group{
	margin-bottom:0;
}

.connect-login-form .form-control{
	min-width:130px;
}

.navbar-inverse{
	background-color: var(--color-bg);
	border-color: var(--color-bg);
}

.navbar-inverse .navbar-toggle{
	border-color: var(--color-border-subtle);
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus{
	background-color: var(--color-bg-elevated);
}

.navbar-inverse .navbar-toggle .icon-bar{
	background-color: var(--color-text-muted);
}

@media (max-width: 991px){
	.connect-topbar-row{
		display:block;
	}

	.connect-topbar-row > [class*="col-"]{
		display:block;
		text-align:center;
		margin-bottom:8px;
	}

	.connect-topbar-brand-col{
		padding-left:24px;
	}

	.connect-logo-main,
	.connect-logo-icon{
		max-height:180px;
	}

	.connect-logo-title{
		font-size:30px;
	}

	.connect-brand-title{
		font-size:17px;
	}

	.connect-brand-subtitle,
	.connect-contact-text{
		font-size:12px;
	}

	.connect-login-collapse{
		display:flex !important;
		justify-content:center;
		align-items:center;
		flex-wrap:nowrap;
		text-align:center;
	}

	.connect-login-form{
		display:block;
	}

	.connect-login-form .form-group,
	.connect-login-form .btn{
		margin-bottom:6px;
	}

	.connect-login-collapse .btn{
		width:auto;
	}

	.connect-auth-actions{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:stretch;
		flex-wrap:wrap;
	}

	.connect-auth-field .form-control,
	.connect-auth-submit .btn{
		width:100%;
	}
}

#connect_footer{
	color: var(--color-text-secondary);
	background-color: var(--color-bg);
	min-height:240px;
	margin-top:50px;
	padding-bottom:70px;
}

#connect_footer ul{
  list-style: none outside none;
  margin-left: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 16px;
  padding-left:0;
}

#connect_footer li{
	border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border-subtle);
    line-height:24px;
}

#connect_footer h3{
	margin-top:30px;
	margin-bottom:30px;
}

#service_row{
	font-size:11px;
}

.service-feature-item{
	text-align:center;
	transition: transform .35s ease;
	transform-origin: center center;
	position:relative;
	padding-top:4px;
}

.service-feature-item:hover{
	transform: scale(1.2);
	z-index:10;
}

.service-feature-logo{
	display:block;
	margin:0 auto;
}

.service-feature-text{
	padding-top:20px;
}

#carousel_container{
	margin-top:60px;
	margin-bottom:20px;
}

.navbar {
  border-radius: 0px;
}

.carousel-control{
	color: #000000;
}

.carousel-control.left{
	background-image: none;
}

.carousel-control.right{
	background-image: none;
}

.service_num{
	font-size:16px;
	font-weight:bold;
	color: var(--color-success);
}

.connect-featured-title{
	font-size:20px;
	font-weight:600;
	letter-spacing:0.3px;
}

.connect-featured-title-new{
	color: var(--color-accent-red);
}

.connect-featured-title-promo{
	color: var(--color-accent-orange);
}

/* ── Light theme adjustments ─────────────────────────── */
[data-theme="light"] .connect-topbar-icon-col a::before{
	background:radial-gradient(circle, rgba(59,108,240,0.15) 0%, rgba(59,108,240,0.07) 45%, rgba(59,108,240,0.0) 75%);
}

[data-theme="light"] .connect-logo-icon{
	filter: drop-shadow(0 0 8px rgba(59,108,240,0.25)) drop-shadow(0 0 18px rgba(59,108,240,0.12));
}

[data-theme="light"] .connect-auth-primary{
	background-color: var(--color-accent-blue);
	border-color: var(--color-accent-blue);
	color:#fff;
}

[data-theme="light"] .connect-auth-primary:hover,
[data-theme="light"] .connect-auth-primary:focus{
	background-color:#2d5ad0;
	border-color:#2d5ad0;
	color:#fff;
}

[data-theme="light"] .navbar{
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

[data-theme="light"] button:focus,
[data-theme="light"] .btn:focus{
	box-shadow: 0 0 0 2px rgba(59,108,240,0.25);
}