/**
 * udiMagic Django Project - Main Stylesheet
 * ========================================
 * 
 * This file contains the main styles for the udiMagic application.
 * The application is a multi-tenant Django app for license management 
 * and e-commerce built around the udiMagic software product.
 * 
 * Structure:
 * - Global styles and resets
 * - Logo and branding
 * - Navigation and header
 * - Main content areas
 * - Footer
 * - Forms and components
 * - Utility classes
 * - Responsive design
 * 
 * Brand Colors:
 * - Primary Blue: #0b0bab
 * - Secondary Grey: #e3e9de
 * - White: #ffffff
 * - Black: #000000
 */

/* ========================================
   GLOBAL STYLES & RESETS
   ======================================== */

/* Remove default underline from all links */
a {
	text-decoration: none;
}

/* ========================================
   LOGO & BRANDING
   ======================================== */

/* Logo: svg element properties */
svg#logo {
	width: 45px;
	height: 40px;
}

/* Logo: Set properties of logo/star - uses brand primary blue */
#star {
	fill: #0b0bab;           /* Brand primary blue */
	stroke: white;
	stroke-width: 0.4px;
}

/* Logo: Star shadow element - creates depth effect */
#star_shadow {

	width: 22px;
	height: 26px;
	transform: rotate(52deg) translateX(22px) translateY(-16px);
	fill: #e3e9de;          /* Light grey shadow */
}

/* ========================================
   NAVIGATION & HEADER
   ======================================== */

/* navbar: Top navigation bar properties */
#navigation {
	background: #ffffff;
	padding-top: 0px;
	padding-bottom: 5px;
}

.navbar-brand {
	padding-top: 0.6rem;
}

/* Contact information bar at the very top */
.contact-bar {
	height: 2rem;
	background-color: #0b0bab;  /* Brand primary blue */
	color: #ffffff;
}

/* Logo text styling - matches banner SVG design */
#logo-text {
	color: black;
	/* text-shadow: 0.5px 0.75px grey; */  /* Commented out for cleaner look */
	font-family: 'Times New Roman', serif;  /* Matches banner design */
	font-weight: bold;                      /* Bold for prominence */
	font-size: 1.25em;                     /* Slightly larger than base */
}

/* Menu bar spacing from top */
.menu-bar {
	margin-top: 2.10rem;
}

/* ========================================
   MAIN CONTENT & LAYOUT
   ======================================== */

/* Body: Webpage body content properties - accounts for fixed header */
body {
	margin-top: 6rem;       /* Space for fixed navigation */
}

/* Default paragraph styling */
p {
	color: black;
}

/* Page content displayed beneath the header and above the footer */
#content {
	margin-top: 0px;
	padding-top: 0px;
	padding-bottom: 50px;
}

/* Page title styling - used for main headings */
.page-title {
	font-size: 24px;
	font-weight: 600;       /* Semi-bold for prominence */
	text-align: left;
}

.page-title p {
	font-size: 18px;
	font-weight: normal;    /* Regular weight for subtitle */
}

/* Utility class for fixed height containers */
.box-height {
	height: 300px;
}

/* Question text styling - used in FAQ sections */
.question {
	color: darkslateblue;   /* Purple color for questions */
	font-size: 18px;
	font-weight: 500;       /* Medium weight */
}

/* ========================================
   FOOTER
   ======================================== */

/* Footer: Main footer container styling */
#footer {
	text-align: left;
	background-color: #0A1535;  /* Dark navy background */
	color: #cdcbe3;             /* Light grey text */
}

/* Links in footer - maintain consistent grey color */
footer a {
	color: #cdcbe3;             /* Light grey for links */
	text-decoration: None;      /* Remove underlines */
}

/* Footer links container spacing */
#footer_links {
	padding: 25px 0px;
}

/* Footer section headers - styled with underline */
.footer-header {
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
	text-decoration: underline 2px solid;
}

/* Footer call-to-action section with gradient background */
.call-to-action {
	background-image: linear-gradient(To right, #7050C0, #7050C0, #1B4FE0, #36A0F6E0);
	color: white;
	height: 140px;
}

/* ========================================
   FORMS & COMPONENTS
   ======================================== */

/* Base form container spacing */
#base-form {
	padding-top: 35px;
}

/* Checkout confirmation table styling */
.checkout-confirm-detail table tr th {
	width: 14rem;
}

/* ========================================
   LEGAL PAGES (EULA, TERMS, ETC.)
   ======================================== */

/* EULA page styling */
.eula {
	margin-left: -2rem;     /* Negative margin for alignment */
}

/* EULA ordered list styling with custom counters */
.eula ol {
	counter-reset: item;    /* Reset counter for nested numbering */
	font-weight: bold;
}

.eula li {
	display: block;
	margin-bottom: 1rem;
}

/* Custom numbering for EULA items (1.1, 1.2, etc.) */
.eula li:before {
	content: counters(item, ".") " ";
	counter-increment: item;
}

/* Nested EULA lists have lighter weight */
.eula ol li ol {
	font-weight: lighter;
}

/* Partner terms page styling */
.partner {
	margin-left: -1rem;     /* Slight negative margin */
}

.partner ol li {
	font-weight: bold;      /* Main items bold */
}

.partner ol ul li {
	font-weight: lighter;   /* Sub-items lighter weight */
}

/* ========================================
   DATA TABLES & LICENSE DETAILS
   ======================================== */

/* License detail table styling */
.license-detail table tr th {
	width: 10rem;
}

/* DataTables filter spacing */
.dataTables_filter {
	margin-bottom: 1.5rem;
}

/* ========================================
   UTILITY WRAPPER CLASSES
   ======================================== */

/* 
 * Wrapper classes for different background styles
 * Used throughout the site for section backgrounds
 */
.wc-nobg,
.wc-bg1,
.wc-bg2,
.wc-bg3,
.wc-gradient1,
.wc-gradient2,
.wc-gradient3 {
	width: 100%;
	padding: 15px 0px;
}

/* Light grey background */
.wc-bg1 {
	background-color: #f8f8f8;
}

/* Slightly darker grey background */
.wc-bg2 {
	background-color: #f2f2f2;
}

/* Grey to yellow gradient */
/* Grey to yellow gradient */
.wc-gradient1 {
	background-image: linear-gradient(To right, #f2f2f2, #fff222);
}

/* Grey to darker grey gradient */
.wc-gradient2 {
	background-image: linear-gradient(To right, #f9f9f9, #d9dfe2);
}

/* Grey to light blue gradient */
.wc-gradient3 {
	background-image: linear-gradient(To right, #f2f2f2, #99d1f4);
}

/* ========================================
   CARD COMPONENTS
   ======================================== */

/* Features section cards */
.features .card {
	min-height: 18rem;      /* Ensure consistent card heights */
}

.features .card-header {
	background-color: #7db0de;  /* Light blue header */
	color: white;
}

.features .card-footer {
	background-color: #f5f5f5;  /* Light grey footer */
}

/* Tutorial section cards */
.tutorials .card {
	min-height: 10rem;      /* Smaller height for tutorials */
}

.tutorials .card-header {
	background-color: #7db0de;  /* Consistent blue header */
}

.tutorials a {
	color: white;           /* White links in tutorials */
}

/* ========================================
   SPECIALTY COMPONENTS
   ======================================== */

/* Software specification lists - clean styling without bullets */
.soft-specification ul {
	list-style: none;
	padding-left: 0;
}

.soft-specification ul li {
	border-bottom: 1px solid lightgray;  /* Subtle separators */
}

/* ========================================
   DROPDOWN MENUS
   ======================================== */

/* Dropdown menu positioning */
.dropdown-menu li {
	position: relative;
}

/* Submenu styling - hidden by default */
.dropdown-menu .dropdown-submenu {
	display: none;
	position: absolute;
	left: 100%;            /* Position to the right */
	top: -7px;
}

/* Left-aligned submenu variant */
.dropdown-menu .dropdown-submenu-left {
	right: 100%;           /* Position to the left */
	left: auto;
}

/* Show submenu on hover */
.dropdown-menu>li:hover>.dropdown-submenu {
	display: block;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile responsive dropdown menus */
@media screen and (max-width: 600px) {
	.dropdown-menu {
		width: 200px;      /* Fixed width on mobile */
	}
}

/* ========================================
   ANIMATIONS & SPECIAL EFFECTS
   ======================================== */

/* Blinking text animation utility */
.blink {
	animation: blinker 1.5s linear infinite;
	color: black;
	font-family: sans-serif;
}

/* Keyframe animation for blinking effect */
@keyframes blinker {
	50% {
		opacity: 0;        /* 50% transparency at midpoint */
	}
}

/* ========================================
   CLIENT TESTIMONIALS & DOWNLOADS
   ======================================== */

/* Client testimonials card - very tall for content */
.clients .card {
	min-height: 141rem;    /* Extra tall for testimonial content */
}

.clients-header .card-header {
	background-color: #7db0de;  /* Consistent blue header */
	color: white;
}

/* Download page title styling - prominent and eye-catching */
.download_title {
	font-size: 3.15em;          /* Large size for prominence */
	color: #900000;             /* Dark red color */
	font-family: Cursive, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;           /* Bold weight */
	text-shadow: 2px 2px silver; /* Silver shadow effect */
}

/* n8n related chat widget styles - START */

/* Chat-window Title background color */
.chat-layout .chat-header {
	background-color: #0b0bab;/* Brand primary blue */
}

/* Chat-window Sub-title text-color */
.chat-layout .chat-header p {
	color: white;
}

/* Toggle button background color */
.chat-window-wrapper .chat-window-toggle {
	background: #0b0bab;
}

/* Toggle button hover color - uses brand blue instead of default pink */
.chat-window-wrapper .chat-window-toggle:hover {
	background: #2a2acc !important; /* A bit more lighter than brand blue for better hover effect */
}

/* User chat message background - matches site branding */
.chat-message-from-user {
	background-color: #d4e7ff !important; /* More saturated blue background for better visibility */
	color: #0b0bab !important; /* Brand blue text color */
	border-left: 3px solid #0b0bab !important; /* Add left border for extra distinction */
}

/* Send button styling - blue icon color only */
.chat-input .chat-input-send-button {
	color: #0b0bab !important; /* Brand blue icon color */
}

.chat-input .chat-input-send-button:hover {
	color: #4169e1 !important; /* Lighter blue icon on hover */
}

/* n8n related chat widget styles - END */

/* ========================================
   DOWNLOADS PAGE REVAMP
   ======================================== */

.wc-hero-gradient {
    width: 100%;
    padding: 20px 0 10px 0;
    background: linear-gradient(135deg, #ffffff 0%, #c5dfff 50%, #ffffff 100%);
}

.dl-hero-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #0A1535;
    letter-spacing: -0.5px;
    line-height: 1.25;
}
@media (max-width: 767.98px) {
    .dl-hero-title { font-size: 1.6rem; }
}

.dl-hero-badge {
    display: inline-block;
    background-color: #dbeafe;
    color: #0b0bab;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.dl-feature-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(11,11,171,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    height: 100%;
}
.dl-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(11,11,171,0.10);
}

.dl-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #dbeafe;
    border-radius: 10px;
    margin-bottom: 1rem;
    color: #0b0bab;
    font-size: 1.3rem;
}

.dl-persona-card {
    border: 0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    height: 100%;
}
.dl-persona-icon {
    font-size: 1.8rem;
    color: #0b0bab;
    margin-bottom: 0.6rem;
    display: block;
}

.dl-checklist {
    list-style: none;
    padding-left: 0;
}
.dl-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0;
    font-size: 1rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}
.dl-checklist li:last-child { border-bottom: none; }
.dl-checklist .bi-check-circle-fill {
    color: #0b0bab;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.wc-cta-section {
    width: 100%;
    padding: 60px 0;
    background: linear-gradient(135deg, #0b0bab 0%, #1a1ae0 60%, #0A1535 100%);
    text-align: center;
}
.wc-cta-section h2 { color: #ffffff; font-weight: 700; font-size: 1.85rem; }
.wc-cta-section p  { color: #c7d2fe; font-size: 1.05rem; max-width: 560px; margin: 0 auto 1.5rem auto; }

/* Fix spec list float fragility on mobile */
.soft-specification ul li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.45rem 0;
}
.soft-specification ul li .spec-value {
    font-weight: 600;
    text-align: right;
    flex: 1 1 auto;
    max-width: 70%;
}
@media (max-width: 575.98px) {
    .soft-specification ul li { flex-direction: column; align-items: flex-start; }
    .soft-specification ul li .spec-value { max-width: 100%; text-align: left; }
}

/* ========================================
   END OF STYLESHEET
   ======================================== */