/*------------------------------------------------------------------
  Craft Custom Theme Colors
  
  This file contains the custom color scheme for the Craft application
  incorporating the brand colors into the design layout.
-------------------------------------------------------------------*/

:root {
  /* Primary Background */
  --craft-bg-primary: #DCE7E2;
  /* Soft Mint */

  /* Secondary Background */
  --craft-bg-secondary: #F7EEDD;
  /* Warm Beige/Cream */

  /* Accent Color */
  --craft-accent: #F4C8B6;
  /* Soft Peach */

  /* Primary Highlight / Buttons / Links */
  --craft-primary: #3A9ECF;
  /* Craft Blue */

  /* Text Colors */
  --craft-heading: #333333;
  /* Headings */
  --craft-text: #555555;
  /* Body Text */

  /* Additional utility colors for better contrast */
  --craft-white: #FFFFFF;
  --craft-black: #000000;
}

/* Body and Main Background */
body {
  background-color: var(--craft-bg-primary) !important;
  color: var(--craft-text) !important;
}

#wrapper {
  background-color: var(--craft-bg-primary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.mt-heading,
.mt-heading2 {
  color: var(--craft-heading) !important;
}

/* Body Text */
p,
span,
li,
td,
th,
div {
  color: var(--craft-text);
}

/* Links and Buttons */
a {
  color: var(--craft-primary);
  transition: all 0.3s ease-in-out;
}

a:hover,
a:focus,
a:active {
  color: var(--craft-accent);
  text-decoration: none;
}

/* Primary Buttons */
.btn-primary,
.btn-type1,
button[type="submit"],
.submit-btn {
  background-color: var(--craft-primary) !important;
  border-color: var(--craft-primary) !important;
  color: var(--craft-white) !important;
}

.btn-primary:hover,
.btn-type1:hover,
button[type="submit"]:hover {
  background-color: var(--craft-black) !important;
  border-color: var(--craft-black) !important;
  color: var(--craft-white) !important;
  opacity: 1;
}

/* Secondary Buttons */
.btn-secondary,
.btn-type2 {
  background-color: var(--craft-accent) !important;
  border-color: var(--craft-accent) !important;
  color: var(--craft-heading) !important;
}

.btn-secondary:hover,
.btn-type2:hover {
  background-color: darken(var(--craft-accent), 10%) !important;
  opacity: 0.9;
}

/* Header Backgrounds */
#mt-header,
.mt-top-bar {
  background-color: var(--craft-bg-secondary) !important;
}

#mt-header a {
  color: var(--craft-primary);
}

#mt-header a:hover {
  color: var(--craft-accent);
}

/* Navigation */
#nav>ul>li>a {
  color: var(--craft-heading) !important;
}

#nav>ul>li>a:hover,
#nav>ul>li.active>a {
  color: var(--craft-primary) !important;
}

/* Footer */
#mt-footer {
  background-color: var(--craft-bg-secondary) !important;
  color: var(--craft-text) !important;
}

#mt-footer a {
  color: var(--craft-primary);
}

#mt-footer a:hover {
  color: var(--craft-accent);
}

/* Cards and Panels */
.card,
.panel,
.box,
.widget {
  background-color: var(--craft-white);
  border: 1px solid var(--craft-accent);
}

/* Product Cards */
.mt-product1,
.mt-product2,
.product-3,
.mt-product4 {
  background-color: var(--craft-white);
}

.mt-product1:hover,
.mt-product2:hover,
.product-3:hover,
.mt-product4:hover {
  border-color: var(--craft-primary);
}

/* Banners */
.banner-frame,
.mt-banner {
  background-color: var(--craft-bg-secondary);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-control {
  border: 1px solid var(--craft-accent);
  color: var(--craft-text);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--craft-black) !important;
  outline: none;
  box-shadow: none !important;
}

/* Tables */
table thead {
  background-color: var(--craft-bg-secondary);
  color: var(--craft-heading);
}

table tbody tr:nth-child(even) {
  background-color: var(--craft-bg-primary);
}

table tbody tr:hover {
  background-color: var(--craft-accent);
}

/* Sidebar */
#sidebar {
  background-color: var(--craft-bg-secondary);
}

.shop-widget {
  background-color: var(--craft-white);
  border: 1px solid var(--craft-accent);
}

/* Alerts and Notifications */
.alert-info {
  background-color: var(--craft-bg-primary);
  border-color: var(--craft-primary);
  color: var(--craft-heading);
}

.alert-success {
  background-color: #DCE7E2;
  border-color: var(--craft-primary);
  color: var(--craft-heading);
}

.alert-warning {
  background-color: var(--craft-accent);
  border-color: var(--craft-accent);
  color: var(--craft-heading);
}

/* Badges and Tags */
.badge,
.tag,
.label {
  background-color: var(--craft-primary);
  color: var(--craft-white);
}

.badge-secondary {
  background-color: var(--craft-accent);
  color: var(--craft-heading);
}

/* Pagination */
.pagination .page-link {
  color: var(--craft-primary);
  border-color: var(--craft-accent);
}

.pagination .page-link:hover {
  background-color: var(--craft-accent);
  color: var(--craft-heading);
}

.pagination .page-item.active .page-link {
  background-color: var(--craft-primary);
  border-color: var(--craft-primary);
  color: var(--craft-white);
}

/* Loader */
.loader {
  color: var(--craft-primary) !important;
}

/* Back to Top Button */
#back-top {
  background-color: var(--craft-primary) !important;
  color: var(--craft-white) !important;
}

#back-top:hover {
  background-color: var(--craft-accent) !important;
  color: var(--craft-heading) !important;
}

/* Admin Panel Specific */
.admin-header {
  background-color: var(--craft-bg-secondary);
  border-bottom: 2px solid var(--craft-primary);
}

.admin-sidebar {
  background-color: var(--craft-bg-secondary);
}

.admin-sidebar .nav-link {
  color: var(--craft-text);
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  background-color: var(--craft-primary);
  color: var(--craft-white);
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--craft-bg-secondary);
  border: 1px solid var(--craft-accent);
}

.dropdown-item {
  color: var(--craft-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--craft-accent);
  color: var(--craft-heading);
}

/* Modal */
.modal-header {
  background-color: var(--craft-bg-secondary);
  border-bottom: 2px solid var(--craft-primary);
}

.modal-footer {
  background-color: var(--craft-bg-primary);
  border-top: 1px solid var(--craft-accent);
}

/* Progress Bars */
.progress {
  background-color: var(--craft-bg-primary);
}

.progress-bar {
  background-color: var(--craft-primary);
}

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--craft-bg-secondary);
}

.breadcrumb-item a {
  color: var(--craft-primary);
}

.breadcrumb-item.active {
  color: var(--craft-text);
}

/* Icons */
.icon-primary {
  color: var(--craft-primary);
}

.icon-accent {
  color: var(--craft-accent);
}

/* Border Utilities */
.border-primary {
  border-color: var(--craft-primary) !important;
}

.border-accent {
  border-color: var(--craft-accent) !important;
}

/* Background Utilities */
.bg-primary-custom {
  background-color: var(--craft-bg-primary) !important;
}

.bg-secondary-custom {
  background-color: var(--craft-bg-secondary) !important;
}

.bg-accent {
  background-color: var(--craft-accent) !important;
}

.bg-highlight {
  background-color: var(--craft-primary) !important;
  color: var(--craft-white) !important;
}

/* Text Utilities */
.text-primary-custom {
  color: var(--craft-primary) !important;
}

.text-accent {
  color: var(--craft-accent) !important;
}

.text-heading {
  color: var(--craft-heading) !important;
}

.text-body {
  color: var(--craft-text) !important;
}

/* Contact Info Box */
.contact-info-box {
  background-color: var(--craft-bg-secondary);
  padding: 30px;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  border-left: 5px solid var(--craft-primary);
  transition: all 0.3s ease;
}

.contact-info-box.border-accent {
  border-left-color: var(--craft-accent);
}

.contact-info-box:hover {
  transform: translateY(-5px);
  background: var(--craft-black) !important;
  border: 1px solid var(--craft-black) !important;
}

.contact-info-box:hover i,
.contact-info-box:hover h4,
.contact-info-box:hover p {
  color: var(--craft-white) !important;
}

/* About Card */
.about-card {
  background-color: var(--craft-bg-secondary);
  padding: 50px 40px;
  border-radius: 20px;
  height: 100%;
  border-top: 6px solid var(--craft-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.about-card.border-accent {
  border-top-color: var(--craft-accent);
}

.about-card:hover {
  transform: translateY(-10px);
  background: var(--craft-black) !important;
  border: 1px solid var(--craft-black) !important;
}

.about-card:hover i,
.about-card:hover h3,
.about-card:hover p {
  color: var(--craft-white) !important;
}