/*
 * Client Signature Islamic Luxury Emerald & Gold Theme for ISLAMIKA Journal
 * Perfectly matched with the 3rd ISLAMIKA International Conference 2026 Website (ConferenceWeb)
 */

:root {
	/* ConferenceWeb Client Signature Emerald & Gold Palette */
	--primary-deep-emerald: #033627;
	--primary-dark-emerald: #02271c;
	--primary-emerald: #06543d;
	--primary-medium-emerald: #0a7354;
	--primary-light-emerald: #13795b;
	--accent-gold: #d4af37;
	--accent-light-gold: #e5c158;
	--accent-pale-sage: #a3c4b8;
	--bg-off-white: #f4f7f5;
	--bg-white: #ffffff;
	--border-sage-tint: #e1e8e4;
	--text-main: #02271c;
	--text-muted: #3d564e;
	--text-light: #6a857b;

	/* Semantic mappings for ISLAMIKA */
	--islamika-green: #06543d;
	--islamika-green-dark: #02271c;
	--islamika-green-medium: #0a7354;
	--islamika-gold: #d4af37;
	--islamika-gold-light: #e5c158;
	--islamika-link: #06543d;
	--islamika-link-hover: #b89124;
	--islamika-page: #f4f7f5;
	--islamika-border: #e1e8e4;
	--islamika-shadow: 0 4px 18px rgba(2, 39, 28, 0.08);
	--islamika-shadow-gold: 0 4px 16px rgba(212, 175, 55, 0.28);
}

html {
	overflow-x: hidden;
}

body,
body * {
	box-sizing: border-box;
}

body {
	margin: 0 !important;
	background: var(--islamika-page) !important;
	color: #1e3a34;
	font-family: "Plus Jakarta Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

a {
	color: var(--islamika-link);
	text-decoration: none;
	transition: all 0.2s ease;
}

a:hover,
a:focus {
	color: var(--islamika-link-hover);
}

.pkp_structure_page {
	min-height: 100vh;
	overflow: clip;
}

.container-non-responsive {
	width: 100% !important;
	max-width: 1300px !important;
	margin-inline: auto !important;
	padding-inline: 12px !important;
}

/* ===================================================
   TOP HEADER BANNER
   =================================================== */
.header-is-top {
	width: 100% !important;
	background: #ffffff !important;
}

.header-is-top > .bg-theme,
.header-is-top > .header-banner-wrap,
.header-banner-wrap {
	background: #fbfbf9 !important;
	border-bottom: 2px solid var(--accent-gold) !important;
}

.navbar-brand-logo {
	width: 100%;
	margin: 0;
	display: block;
}

.navbar-brand-logo .img-logo {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-height: 180px;
	object-fit: cover;
	margin: 0 auto;
}

.dynamic-header-title {
	display: flex;
	min-height: 150px;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: #02271c;
	font-size: clamp(24px, 4vw, 44px);
	font-weight: 800;
	text-align: center;
}

/* ===================================================
   FIXED NAVIGATION BAR - LUXURY DARK EMERALD & GOLD
   =================================================== */
#is-header-fixed {
	width: 100% !important;
	background: #02271c !important;
	border: 0 !important;
	border-top: 2px solid var(--accent-gold) !important;
	border-bottom: 2px solid rgba(212, 175, 55, 0.4) !important;
	box-shadow: 0 6px 24px rgba(2, 39, 28, 0.28) !important;
}

#is-header-fixed .navbar {
	min-height: 54px;
	margin: 0;
	padding: 6px 0 !important;
	border: 0;
	background: transparent !important;
}

.mantap {
	display: flex !important;
	width: 100%;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
}

#main-navigation {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto !important;
}

#user-navigation {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 6px;
	margin: 0 0 0 10px !important;
	padding: 0;
	list-style: none;
	flex: 0 0 auto !important;
}

#main-navigation > li,
#user-navigation > li {
	float: none !important;
	display: inline-block !important;
}

#main-navigation .nav-link,
#main-navigation .nav-item .nav-link,
#main-navigation .dropdown > .nav-link,
.navbar .nav .nav-link.link-light {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

#main-navigation .nav-link i,
#main-navigation .dropdown > .nav-link i {
	margin-right: 7px !important;
	color: var(--accent-light-gold) !important;
	font-size: 14px !important;
	transition: transform 0.2s ease;
}

#main-navigation .nav-link:hover,
#main-navigation .nav-item .nav-link:hover,
#main-navigation .nav-link:focus,
#main-navigation .dropdown > .nav-link:hover,
#main-navigation .dropdown.open > .nav-link {
	background: rgba(212, 175, 55, 0.16) !important;
	color: #f8e398 !important;
	text-decoration: none !important;
}

#main-navigation .nav-link:hover i,
#main-navigation .dropdown > .nav-link:hover i {
	transform: scale(1.18);
	color: #ffffff !important;
}

#main-navigation .dropdown-menu {
	margin-top: 4px;
	background: #033627 !important;
	border: 1px solid var(--accent-gold) !important;
	border-top: 3px solid var(--accent-gold) !important;
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
	padding: 6px 0 !important;
	min-width: 220px;
}

#main-navigation .dropdown-menu .dropdown-item,
#main-navigation .dropdown-menu a {
	display: block !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	padding: 8px 18px !important;
	text-decoration: none !important;
	transition: all 0.18s ease !important;
	background: transparent !important;
}

#main-navigation .dropdown-menu .dropdown-item:hover,
#main-navigation .dropdown-menu a:hover {
	background: rgba(212, 175, 55, 0.22) !important;
	color: #f8e398 !important;
	padding-left: 22px !important;
}

/* Search input & buttons */
.header-search {
	flex: 0 0 210px !important;
	width: 210px !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
}

.header-search .pull-md-right {
	width: 100% !important;
}

.header-search .input-group {
	width: 100% !important;
	display: flex !important;
	align-items: stretch !important;
}

.header-search .form-control {
	height: 34px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid var(--accent-gold) !important;
	border-right: 0 !important;
	border-radius: 6px 0 0 6px !important;
	font-size: 13px !important;
	box-shadow: none !important;
	padding: 4px 10px !important;
	flex: 1 1 auto !important;
	color: #02271c !important;
}

.header-search .form-control:focus {
	background: #ffffff !important;
	border-color: #f3d778 !important;
	box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3) !important;
	outline: none !important;
}

.header-search .input-group-btn {
	display: block !important;
	width: auto !important;
	white-space: nowrap !important;
}

.header-search .btn {
	height: 34px !important;
	padding: 4px 12px !important;
	border: 1px solid var(--accent-gold) !important;
	border-left: 0 !important;
	border-radius: 0 6px 6px 0 !important;
	background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%) !important;
	color: #02271c !important;
	font-weight: bold;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
}

.header-search .btn:hover {
	background: linear-gradient(135deg, #f3d778 0%, #e5c158 100%) !important;
	color: #000000 !important;
}

/* User buttons in navbar */
#user-navigation .nav-link,
#user-navigation .nav-item .nav-link,
.navbar .nav #user-navigation .nav-link.link-dark {
	display: inline-block !important;
	margin: 0 !important;
	padding: 6px 14px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

#user-navigation a[href*="register"] {
	border: 1.5px solid var(--accent-gold) !important;
	background: transparent !important;
	color: var(--accent-light-gold) !important;
}

#user-navigation a[href*="register"]:hover {
	background: rgba(212, 175, 55, 0.2) !important;
	color: #ffffff !important;
	border-color: #f3d778 !important;
}

#user-navigation a[href*="login"]:not([href*="signOut"]) {
	background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%) !important;
	color: #02271c !important;
	font-weight: 700 !important;
	border: 1px solid var(--accent-gold) !important;
	box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35) !important;
}

#user-navigation a[href*="login"]:not([href*="signOut"]):hover {
	background: linear-gradient(135deg, #f3d778 0%, #e5c158 100%) !important;
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.55) !important;
	transform: translateY(-1px);
}

#user-navigation a[href*="submissions"],
#user-navigation a[href*="signOut"] {
	color: #ffffff !important;
}

#user-navigation a[href*="submissions"]:hover,
#user-navigation a[href*="signOut"]:hover {
	background: rgba(212, 175, 55, 0.16) !important;
	color: var(--accent-light-gold) !important;
}

/* ===================================================
   MAIN CONTENT & SIDEBAR LAYOUT
   =================================================== */
.pkp_structure_content {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
}

.margin-top-floating {
	margin-top: 24px !important;
}

.akwjeh {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 265px;
	align-items: start;
	gap: 16px;
	width: 100%;
	padding: 0 !important;
	overflow: visible !important;
}

.pkp_structure_main,
.pkp_structure_main.col-md-9-new {
	grid-column: 1;
	float: none !important;
	width: auto !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sidebar.col-md-3-new {
	grid-column: 2;
	float: none !important;
	width: auto !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.pkp_structure_main > .card,
.pkp_structure_main > .page,
.pkp_structure_main > .page_index_journal {
	width: 100% !important;
	margin: 0 0 16px !important;
	border: 1px solid var(--border-sage-tint) !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	box-shadow: var(--islamika-shadow) !important;
}

.pkp_structure_main > .page {
	padding: 24px 30px !important;
}

.pkp_structure_main > .page_index_journal,
.pkp_structure_main > .card {
	padding: 18px !important;
}

/* ===================================================
   BREADCRUMBS
   =================================================== */
.cmp_breadcrumbs,
.page_login .cmp_breadcrumbs,
.page_register .cmp_breadcrumbs {
	background: transparent !important;
	padding: 0 0 10px 0 !important;
	margin: 0 0 20px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border-sage-tint) !important;
	width: 100% !important;
}

.cmp_breadcrumbs .breadcrumb,
.breadcrumb {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 13.5px !important;
	display: flex !important;
	align-items: center !important;
	list-style: none !important;
}

.breadcrumb > li {
	display: inline-flex !important;
	align-items: center !important;
}

.breadcrumb > li + li:before {
	content: "/ " !important;
	color: var(--accent-pale-sage) !important;
	padding: 0 8px !important;
}

.breadcrumb a {
	color: var(--islamika-green) !important;
	font-weight: 500;
	text-decoration: none !important;
}

.breadcrumb a i.fa-home {
	margin-right: 5px;
	color: var(--primary-medium-emerald) !important;
}

.breadcrumb a:hover {
	color: var(--islamika-gold) !important;
	text-decoration: underline !important;
}

.breadcrumb .active {
	color: var(--text-muted) !important;
	font-weight: 400 !important;
}

/* ===================================================
   SIDEBAR - ROYAL EMERALD & GOLD ACCENTS
   =================================================== */
.pkp_structure_sidebar .pkp_block {
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 1px solid var(--border-sage-tint);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(2, 39, 28, 0.05) !important;
	overflow: hidden;
}

.pkp_structure_sidebar .pkp_block .title,
.sidebar .pkp_block .title,
.sidebar .pkp_block h2 {
	display: block;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-bottom: 2px solid var(--accent-gold) !important;
	border-radius: 0;
	background: linear-gradient(135deg, #033627 0%, #06543d 100%) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.pkp_structure_sidebar .pkp_block .content,
.sidebar .pkp_block .content {
	padding: 8px;
}

/* Quickmenu styling */
#customblock-quickmenu .content a.button,
.sidebar a.button {
	display: block !important;
	padding: 8px 12px !important;
	color: var(--islamika-green) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-bottom: 1px solid #f0f4f2 !important;
	transition: all 0.2s ease !important;
	background-image: none !important;
}

#customblock-quickmenu .content a.button:hover,
.sidebar a.button:hover {
	background: linear-gradient(90deg, #f0f7f4 0%, #ffffff 100%) !important;
	color: var(--primary-dark-emerald) !important;
	border-left: 3px solid var(--accent-gold) !important;
	padding-left: 16px !important;
	text-decoration: none !important;
}

#customblock-indexing .content > div {
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#customblock-indexing .content > div:hover {
	transform: translateY(-2px);
	border-color: var(--accent-gold) !important;
	box-shadow: var(--islamika-shadow-gold) !important;
}

.indexing-badge-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px solid var(--border-sage-tint);
	border-radius: 6px;
	padding: 6px 10px;
	box-shadow: 0 1px 3px rgba(2, 39, 28, 0.04);
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.indexing-badge-link:hover {
	transform: translateY(-2px);
	border-color: var(--accent-gold) !important;
	box-shadow: var(--islamika-shadow-gold) !important;
}

.indexing-badge-link img {
	height: 48px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	display: block;
}

.pkp_structure_sidebar img {
	max-width: 100%;
	height: auto;
}

/* ===================================================
   CONFERENCE HOMEPAGE & IDENTITY PANEL
   =================================================== */
.conference-home {
	padding: 20px !important;
}

.conference-facts {
	width: 100%;
	margin-bottom: 18px;
	border: 1px solid var(--border-sage-tint);
	border-radius: 6px;
	background: #fdfdfd;
	overflow: hidden;
}

.conference-facts th,
.conference-facts td {
	padding: 9px 14px !important;
	border-bottom: 1px solid #edf2ef !important;
	vertical-align: top;
	font-size: 13.5px;
}

.conference-facts th {
	width: 24%;
	color: var(--text-muted);
	font-weight: 600;
	background: #fbfdfc;
}

.conference-facts strong.text-theme,
.text-theme {
	color: var(--islamika-green) !important;
}

.bg-theme {
	background-color: var(--primary-emerald) !important;
}

/* Conference action buttons */
.conference-action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0;
}

.conference-action-buttons .btn-conference-register {
	background: linear-gradient(135deg, #0a7354 0%, #06543d 100%) !important;
	border: 1px solid #06543d !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	padding: 9px 20px !important;
	border-radius: 6px !important;
	box-shadow: 0 4px 12px rgba(6, 84, 61, 0.28) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.conference-action-buttons .btn-conference-register:hover {
	background: linear-gradient(135deg, #0e8562 0%, #08664b 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(6, 84, 61, 0.42) !important;
	transform: translateY(-2px);
}

.conference-action-buttons .btn-conference-submit {
	background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%) !important;
	border: 1px solid #d4af37 !important;
	color: #02271c !important;
	font-weight: 700 !important;
	padding: 9px 20px !important;
	border-radius: 6px !important;
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.conference-action-buttons .btn-conference-submit:hover {
	background: linear-gradient(135deg, #f3d778 0%, #e5c158 100%) !important;
	color: #000000 !important;
	box-shadow: 0 6px 20px rgba(212, 175, 55, 0.55) !important;
	transform: translateY(-2px);
}

.conference-action-buttons .btn-conference-template {
	border: 1.5px solid var(--accent-pale-sage) !important;
	background: #ffffff !important;
	color: var(--primary-deep-emerald) !important;
	font-weight: 600 !important;
	padding: 9px 18px !important;
	border-radius: 6px !important;
	box-shadow: 0 2px 6px rgba(2, 39, 28, 0.04) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.conference-action-buttons .btn-conference-template:hover {
	background: #f4f7f5 !important;
	border-color: var(--primary-emerald) !important;
	color: var(--primary-emerald) !important;
	transform: translateY(-2px);
}

.settings-rich-text h3,
.about-content h3,
.editorial-team-content h3 {
	color: var(--primary-emerald) !important;
	border-bottom: 2px solid var(--border-sage-tint) !important;
	padding-bottom: 8px !important;
	margin-top: 25px !important;
	font-weight: 700 !important;
}

/* Sections & Panels */
.conference-section,
.conference-panel {
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid var(--border-sage-tint);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(2, 39, 28, 0.03);
}

.conference-section > h2,
.conference-panel > h2 {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--border-sage-tint);
	color: var(--primary-deep-emerald);
	font-size: 18px;
	font-weight: 700;
	position: relative;
}

.conference-section > h2::after,
.conference-panel > h2::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 55px;
	height: 2px;
	background: var(--accent-gold);
}

.conference-section > h2 i,
.conference-panel > h2 i {
	color: var(--primary-medium-emerald);
	margin-right: 8px;
}

.conference-section p,
.conference-panel p {
	margin-bottom: 12px;
	text-align: left;
	line-height: 1.65;
	color: #2b3e37;
}

.conference-theme {
	padding: 12px 16px;
	border-left: 4px solid var(--accent-gold);
	background: #f0f7f4;
	color: var(--primary-dark-emerald);
	border-radius: 0 6px 6px 0;
	font-weight: 500;
}

.conference-topic-card {
	padding: 14px;
	border: 1px solid var(--border-sage-tint);
	border-radius: 6px;
	background: #fbfdfc;
}

.conference-topic-card h3,
.conference-payment h3 {
	margin: 0 0 10px;
	color: var(--primary-emerald);
	font-size: 16px;
	font-weight: 700;
}

.conference-badge {
	display: inline-block;
	margin-bottom: 5px;
	padding: 4px 10px;
	border-radius: 4px;
	background: linear-gradient(135deg, #0a7354 0%, #06543d 100%);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.conference-day {
	background: #f0f7f4;
	color: var(--primary-emerald);
	font-weight: 600;
}

/* Generic Action Buttons */
.conference-btn {
	padding: 9px 18px !important;
	border-radius: 6px !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.conference-btn-primary {
	border: 1px solid var(--accent-gold) !important;
	background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%) !important;
	color: #02271c !important;
	box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3) !important;
}

.conference-btn-primary:hover {
	background: linear-gradient(135deg, #f3d778 0%, #e5c158 100%) !important;
	box-shadow: 0 5px 16px rgba(212, 175, 55, 0.5) !important;
	transform: translateY(-1px);
}

.conference-btn-success {
	border: 1px solid var(--primary-emerald) !important;
	background: linear-gradient(135deg, #0a7354 0%, #06543d 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(6, 84, 61, 0.25) !important;
}

.conference-btn-success:hover {
	background: linear-gradient(135deg, #0e8562 0%, #08664b 100%) !important;
	transform: translateY(-1px);
}

.conference-btn-light {
	border: 1.5px solid var(--accent-pale-sage) !important;
	background: #ffffff !important;
	color: var(--primary-deep-emerald) !important;
}

.conference-btn-light:hover {
	background: #f4f7f5 !important;
	border-color: var(--primary-emerald) !important;
	color: var(--primary-emerald) !important;
}

/* ===================================================
   ARTICLE SUMMARY CARDS
   =================================================== */
.article-summary-title:hover {
	color: var(--accent-gold) !important;
	text-decoration: none !important;
}

.current-article-list .card,
.pkp_structure_main .article-summary {
	overflow: hidden;
}

.doi-link,
.doi,
.pkp_structure_main a {
	overflow-wrap: anywhere;
}

/* ===================================================
   AUTH PAGES (LOGIN & REGISTER)
   =================================================== */
.login-form-wrapper {
	max-width: 490px;
	margin: 30px auto 40px;
	width: 100%;
}

.page_login .form-group label,
.page_register .form-group label {
	font-weight: 600 !important;
	color: var(--primary-deep-emerald) !important;
	font-size: 13.5px !important;
	margin-bottom: 6px !important;
	display: block !important;
}

.page_login .form-control,
.page_register .form-control,
.auth-input {
	width: 100% !important;
	border-radius: 6px !important;
	border: 1px solid #ced4da !important;
	box-shadow: none !important;
	padding: 8px 14px !important;
	height: 42px !important;
	font-size: 14px !important;
	color: #212529 !important;
	background: #ffffff !important;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.page_login .form-control:focus,
.page_register .form-control:focus,
.auth-input:focus {
	border-color: var(--primary-emerald) !important;
	box-shadow: 0 0 0 3px rgba(6, 84, 61, 0.15) !important;
	outline: 0 !important;
}

.page_login .login-forgot a,
.auth-forgot-link {
	color: var(--islamika-green) !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

.page_login .login-forgot a:hover,
.auth-forgot-link:hover {
	color: var(--accent-gold) !important;
	text-decoration: underline !important;
}

.page_login .login-buttons,
.register-buttons,
.auth-btn-group {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 24px !important;
	margin-bottom: 16px !important;
}

.btn-login-submit,
.btn-register-submit,
.btn-auth-solid {
	background: linear-gradient(135deg, #0a7354 0%, #06543d 100%) !important;
	border: 1px solid #06543d !important;
	color: #ffffff !important;
	padding: 8px 26px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	border-radius: 6px !important;
	line-height: 1.5 !important;
	cursor: pointer;
	text-decoration: none !important;
	display: inline-block;
	box-shadow: 0 3px 12px rgba(6, 84, 61, 0.25) !important;
	transition: all 0.2s ease !important;
}

.btn-login-submit:hover,
.btn-register-submit:hover,
.btn-auth-solid:hover {
	background: linear-gradient(135deg, #0e8562 0%, #08664b 100%) !important;
	box-shadow: 0 5px 16px rgba(6, 84, 61, 0.38) !important;
	color: #ffffff !important;
}

.btn-login-register,
.btn-register-login,
.btn-auth-outline {
	background: #ffffff !important;
	border: 1.5px solid var(--primary-emerald) !important;
	color: var(--primary-emerald) !important;
	padding: 8px 24px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border-radius: 6px !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	cursor: pointer;
	display: inline-block;
	transition: all 0.2s ease !important;
}

.btn-login-register:hover,
.btn-register-login:hover,
.btn-auth-outline:hover {
	background: #f0f7f4 !important;
	color: var(--primary-dark-emerald) !important;
	border-color: var(--primary-dark-emerald) !important;
	text-decoration: none !important;
}

.page_register .register-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 36px !important;
	margin-bottom: 24px !important;
}

.page_register .register-columns fieldset legend,
.auth-section-title {
	font-family: Georgia, "Times New Roman", Times, serif !important;
	font-size: 26px !important;
	font-weight: 500 !important;
	color: var(--primary-dark-emerald) !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 20px 0 !important;
	display: block !important;
	width: 100% !important;
	text-align: center !important;
}

.page_register .consent a,
.auth-consent-wrapper a {
	color: var(--islamika-green) !important;
	font-weight: 500;
}

.page_register .consent a:hover,
.auth-consent-wrapper a:hover {
	color: var(--accent-gold) !important;
}

/* Hide journalcover on auth pages so quickmenu is clean at top */
body.pkp_page_login #customblock-journalcover,
body.pkp_page_user.pkp_op_register #customblock-journalcover,
body:has(.page_login) #customblock-journalcover,
body:has(.page_register) #customblock-journalcover {
	display: none !important;
}

/* ===================================================
   FOOTER - LUXURY ISLAMIC EMERALD & GOLD
   =================================================== */
footer {
	margin-top: 32px;
	width: 100% !important;
}

.footer-top {
	background-color: #f4f7f5 !important;
	border-top: 3px solid var(--accent-gold) !important;
	border-bottom: 1px solid var(--border-sage-tint) !important;
}

footer > .bg-theme,
footer .bg-theme {
	padding: 16px 0 !important;
	background: #02271c !important;
	border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
	color: var(--accent-pale-sage) !important;
}

footer .bg-theme .container-non-responsive {
	background: transparent !important;
}

footer .text-light,
footer p {
	color: var(--accent-pale-sage) !important;
	line-height: 1.7;
}

footer strong {
	color: #ffffff !important;
}

footer a,
footer a.text-light {
	color: var(--accent-light-gold) !important;
	text-decoration: none !important;
	font-weight: 500;
	transition: color 0.2s ease;
}

footer a:hover,
footer a.text-light:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

/* ===================================================
   RESPONSIVENESS (TABLET & MOBILE)
   =================================================== */
@media (max-width: 1100px) {
	.mantap {
		flex-wrap: wrap;
	}

	#main-navigation {
		order: 1;
		width: 100%;
		flex-basis: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.header-search {
		order: 2;
		margin-left: auto !important;
	}

	#user-navigation {
		order: 3;
		margin-right: auto;
	}

	.akwjeh {
		grid-template-columns: minmax(0, 1fr) 235px;
	}
}

@media (max-width: 767px) {
	.container-non-responsive {
		padding-inline: 10px !important;
	}

	.navbar-brand-logo .img-logo {
		min-height: 80px;
		object-fit: cover;
	}

	#main-navigation {
		justify-content: flex-start;
	}

	#main-navigation .nav-link,
	#main-navigation .dropdown > .nav-link,
	#user-navigation .nav-link {
		padding: 6px 8px !important;
		font-size: 13px !important;
	}

	.header-search {
		flex: 1 1 200px;
	}

	.margin-top-floating {
		margin-top: 16px !important;
	}

	.akwjeh {
		display: block !important;
	}

	.sidebar.col-md-3-new {
		margin-top: 16px !important;
	}

	.pkp_structure_main > .card,
	.pkp_structure_main > .page,
	.pkp_structure_main > .page_index_journal {
		padding: 14px !important;
	}

	.conference-two-columns,
	.conference-topic-grid,
	.conference-registration-grid,
	.page_register .register-columns,
	.official-committee dl {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.conference-actions .conference-btn {
		width: 100%;
		text-align: center;
	}
}

/* ===================================================
   RESPONSIVE CONTENT & RICH TEXT FIXES
   Prevents images from overflowing horizontally
   =================================================== */
.conference-section,
.settings-rich-text,
.journal-about-section,
.journal-description-section,
.page,
.page_content,
.pkp_structure_main {
	max-width: 100% !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}

.settings-rich-text img,
.journal-about-section img,
.conference-section img,
.page img,
.pkp_structure_main img {
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box !important;
}

/* Luxury aesthetic framing for embedded header/banner illustrations */
.journal-about-section img[src*="islamika-header"],
.settings-rich-text img[src*="islamika-header"],
.settings-rich-text img[alt="Banner"],
.about-banner-responsive {
	display: block !important;
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	margin: 10px auto 25px auto !important;
	border-radius: 10px !important;
	border: 1.5px solid var(--accent-gold) !important;
	box-shadow: 0 6px 20px rgba(2, 39, 28, 0.12) !important;
	object-fit: cover !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.journal-about-section img[src*="islamika-header"]:hover,
.settings-rich-text img[src*="islamika-header"]:hover,
.settings-rich-text img[alt="Banner"]:hover,
.about-banner-responsive:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(2, 39, 28, 0.18), 0 0 12px rgba(212, 175, 55, 0.3) !important;
}

/* ===================================================
   LUXURY ISLAMIC ANNOUNCEMENTS REDESIGN
   =================================================== */

/* Page Container */
.islamika-announcements-page,
.islamika-announcement-detail-page,
.page_announcements,
.page_announcement {
	padding: 24px 28px !important;
	background: #ffffff !important;
	border: 1px solid var(--border-sage-tint, #e1e8e4) !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 10px rgba(2, 39, 28, 0.04) !important;
}

/* Hero Header on Index Page */
.announcements-hero-header {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #edf2ef;
}

.announcements-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, rgba(6, 84, 61, 0.1) 0%, rgba(10, 115, 84, 0.15) 100%);
	color: #06543d;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 4px 12px;
	border-radius: 20px;
	border: 1px solid rgba(6, 84, 61, 0.2);
	margin-bottom: 8px;
}

.announcements-main-title {
	color: #02271c !important;
	font-size: clamp(24px, 3vw, 30px) !important;
	font-weight: 800 !important;
	margin: 4px 0 8px 0 !important;
	letter-spacing: -0.3px;
}

.announcements-main-subtitle {
	color: #4b6358 !important;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	margin-bottom: 14px !important;
	max-width: 800px;
}

.announcements-gold-divider {
	width: 56px;
	height: 3px;
	background: linear-gradient(90deg, #d4af37 0%, #e5c158 100%);
	border-radius: 2px;
}

/* Announcements List & Cards */
.islamika-announcements-list,
.announcements {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 10px;
}

.islamika-announcement-card,
.announcements article,
.cmp_announcements article {
	background: #ffffff !important;
	border: 1px solid #e1e8e4 !important;
	border-left: 4px solid #06543d !important;
	border-radius: 10px !important;
	padding: 18px 22px !important;
	box-shadow: 0 2px 8px rgba(2, 39, 28, 0.04) !important;
	transition: all 0.25s ease-in-out !important;
	position: relative;
	margin-bottom: 0 !important;
}

.islamika-announcement-card:hover,
.announcements article:hover,
.cmp_announcements article:hover {
	transform: translateY(-2px);
	border-left-color: #d4af37 !important;
	border-color: #c9d8d0 !important;
	box-shadow: 0 8px 22px rgba(2, 39, 28, 0.08), 0 0 10px rgba(212, 175, 55, 0.15) !important;
}

.announcement-card-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.announcement-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #eef7f3;
	color: #06543d;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	border: 1px solid rgba(6, 84, 61, 0.15);
}

.announcement-date-badge,
.announcements p.date,
.cmp_announcements p.date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #6a857b !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	margin: 0 !important;
}

.announcement-date-badge i,
.announcements p.date i,
.announcements p.date .glyphicon {
	color: #0a7354 !important;
}

.announcement-title,
.islamika-announcement-card h2,
.islamika-announcement-card h3,
.islamika-announcement-card .announcement-title,
.announcements h2,
.announcements h3,
.announcements .media-heading,
.cmp_announcements .media-heading {
	font-size: 17px !important;
	font-weight: 700 !important;
	margin: 8px 0 10px 0 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.announcement-title a,
.announcements .media-heading a,
.cmp_announcements .media-heading a {
	color: #02271c !important;
	text-decoration: none !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	display: inline !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: color 0.2s ease !important;
}

.announcement-title a:hover,
.announcements .media-heading a:hover,
.cmp_announcements .media-heading a:hover {
	color: #0a7354 !important;
	text-decoration: none !important;
}

.announcement-excerpt {
	color: #3d564e !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	margin-bottom: 14px !important;
}

.announcement-card-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 10px;
	border-top: 1px dashed #edf2ef;
}

.announcement-read-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f4f8f6;
	color: #06543d !important;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 6px;
	border: 1px solid #d3e4dc;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.announcement-read-btn:hover {
	background: #06543d;
	color: #ffffff !important;
	border-color: #06543d;
	transform: translateX(2px);
}

.announcement-read-btn i {
	transition: transform 0.2s ease;
}

.announcement-read-btn:hover i {
	transform: translateX(3px);
}

.announcements-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #6a857b;
	background: #f9fbf9;
	border-radius: 8px;
	border: 1px dashed #d1ded7;
}

/* ===================================================
   ANNOUNCEMENT DETAIL PAGE
   =================================================== */
.islamika-announcement-detail-card,
.announcement-full {
	background: #ffffff;
	border-radius: 8px;
	padding: 4px 0;
}

.announcement-detail-header,
.announcement-full .page-header {
	margin: 0 0 20px 0 !important;
	padding: 0 0 16px 0 !important;
	border: 0 !important;
	border-bottom: 2px solid #e1e8e4 !important;
	position: relative;
}

.announcement-detail-meta-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.detail-badge-type {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #0a7354 0%, #06543d 100%);
	color: #ffffff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(6, 84, 61, 0.2);
}

.detail-meta-date,
.detail-meta-org,
.announcement-full .page-header small.date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4b6358 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

.detail-meta-date i,
.announcement-full .page-header small.date .glyphicon {
	color: #d4af37 !important;
}

.detail-meta-org i {
	color: #0a7354 !important;
}

.announcement-detail-title,
.announcement-full .page-header h1 {
	color: #02271c !important;
	font-size: clamp(22px, 3vw, 28px) !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	margin: 10px 0 14px 0 !important;
	letter-spacing: -0.3px;
	text-align: left !important;
}

.announcement-detail-divider {
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, #d4af37 0%, rgba(212, 175, 55, 0.4) 40%, #e1e8e4 100%);
	border-radius: 2px;
	margin-top: 14px;
}

.announcement-detail-body,
.announcement-full .description {
	color: #21352e !important;
	font-size: 15px !important;
	line-height: 1.8 !important;
	margin-bottom: 30px !important;
}

.announcement-detail-body h2,
.announcement-detail-body h3,
.announcement-full .description h2,
.announcement-full .description h3 {
	color: #06543d !important;
	font-weight: 700 !important;
	margin-top: 24px !important;
	margin-bottom: 12px !important;
	padding-bottom: 6px !important;
	border-bottom: 1.5px solid #e1e8e4 !important;
	font-size: 18px !important;
}

.announcement-detail-body table,
.announcement-full .description table {
	width: 100% !important;
	margin: 16px 0 !important;
	border-collapse: collapse !important;
	background: #ffffff !important;
	border: 1px solid #e1e8e4 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}

.announcement-detail-body th,
.announcement-full .description th {
	background: #033627 !important;
	color: #ffffff !important;
	padding: 10px 14px !important;
	font-size: 13.5px !important;
	border: 1px solid #06543d !important;
}

.announcement-detail-body td,
.announcement-full .description td {
	padding: 10px 14px !important;
	border: 1px solid #e8efe9 !important;
	font-size: 14px !important;
}

.announcement-detail-body tr:nth-child(even) td,
.announcement-full .description tr:nth-child(even) td {
	background-color: #f9fbf9 !important;
}

.announcement-detail-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid #e1e8e4;
	margin-top: 24px;
}

.btn-announcement-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #033627 !important;
	border: 1.5px solid #a3c4b8;
	padding: 8px 18px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.btn-announcement-back:hover {
	background: #02271c;
	color: #ffffff !important;
	border-color: #02271c;
	transform: translateX(-3px);
}

.detail-cta-right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.btn-detail-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.btn-detail-register {
	background: linear-gradient(135deg, #0a7354 0%, #06543d 100%);
	border: 1px solid #06543d;
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(6, 84, 61, 0.25);
}

.btn-detail-register:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(6, 84, 61, 0.35);
	color: #ffffff !important;
}

.btn-detail-submit {
	background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%);
	border: 1px solid #d4af37;
	color: #02271c !important;
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.btn-detail-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(212, 175, 55, 0.45);
	color: #02271c !important;
}