/***************************************
  Defult Font
***************************************/

/* h1 and h2: Permanent Marker */
h1, h2 {
  font-family: 'Permanent Marker', cursive !important;
}

/* h3 to h6: Ubuntu, Oswald, Archivo */
h3, h4, h5, h6 {
  font-family: 'Ubuntu', 'Oswald', 'Archivo', sans-serif !important;
}

/* p, div, a: Roboto Mono */
p, div, a {
  font-family: 'Roboto Mono', monospace !important;
}
/***************************************
  Container & General
***************************************/
.mcc-multi-registration-container {
  max-width: 500px;
  margin: 50px auto;
  text-align: center;
  font-family: Aleo, sans-serif;
}

.mcc-page-title {
  font-size: 2rem;
  color: #502F0F; /* Dark brown */
  margin-bottom: 20px;
}

/***************************************
  Tabs
***************************************/
.mcc-tabs {
  font-family: Aleo, sans-serif;
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 40px; /* Increased to make room for the arrow */
  /* Make sure there's no overflow: hidden here! */
}

.mcc-tab-button {
  background: #FBFBFB;
  border: 2px solid #502F0F;
  color: #502F0F;
  padding: 15px 25px;
  cursor: pointer;
  font-size: 1.7rem;
  margin: 0 5px;
  border-radius: 4px;
  position: relative;
  transition: background-color 0.3s;
}

.mcc-tab-button:hover {
  background-color: #f3e7d9; /* slight highlight on hover */
}

/* Active tab with gold background, dark text, and arrow */
.mcc-tab-button.active {
  background-color: #E9C45D; /* Gold */
  border-color: #E9C45D;
  color: #502F0F;
  position: relative; /* For arrow positioning */
  z-index: 10;        /* Ensure arrow is above other elements */
  margin-bottom: 0;   /* We can leave this at 0 if .mcc-tabs has enough space */
}

/* Downward arrow on the active tab */
.mcc-tab-button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px;               /* Positions arrow below the button */
  transform: translateX(-50%);
  border-width: 20px;
  border-style: solid;
  border-color: #E9C45D transparent transparent transparent;
  z-index: 999;                /* Make sure arrow is on top of the subtitle */
}

/***************************************
  Subtitle
***************************************/
#mcc-form-subtitle {
  font-size: 1.9rem;
  color: #333;
  margin-bottom: 20px;
}

/***************************************
  Forms
***************************************/
.mcc-reg-form {
  display: block; /* toggled by JS to none/block */
  text-align: left;
  margin: 0 auto 10px auto;
  width: 100%;
  max-width: 600px;
}

.mcc-reg-form label {
    font-weight: 400;
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
  color: #502F0F; /* Dark brown labels */
}

body .mcc-reg-form input[type="text"],
body .mcc-reg-form input[type="email"],
body .mcc-reg-form input[type="tel"],
body .mcc-reg-form input[type="password"] {
  width: 100%;
  padding: 8px!important;        /* smaller height */
  border-radius: 4px;
  font-size: 0.95rem;
  background-color: #f3e7d9!important;
  border: none !important; 
    /* Optional: remove shadow or outline if needed */
    box-shadow: none !important;
    outline: none !important;
	color:#996633;

}

/* Required Field Marker */
.mcc-required {
  color: red;
}

/***************************************
  Submit Button
***************************************/
.mcc-submit-button {
  font-family: Aleo, sans-serif;    
  background-color: #502F0F; /* Dark brown */
  color: #fff;
  padding: 12px 0;
  border: none;
  border-radius: 4px;
  width: 100%;
  margin-top: 15px;
  font-size: 1rem;
  cursor: pointer;
  text-transform: none;
  font-weight: 500;
}

.mcc-submit-button:hover {
  background-color: #E9C45D!important;
  color: #502F0F!important;
}

/***************************************
  Privacy Container
***************************************/
.mcc-privacy-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.mcc-privacy-container input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

.mcc-privacy-label {
  font-size: 0.9rem;
  color: #333;
}

.mcc-privacy-label a {
  color: #E9C45D; /* gold text for links or keep dark brown if desired */
  text-decoration: underline;
}

/***************************************
  Already have an account? Link
***************************************/
.mcc-login-link {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 20px;
}

.mcc-login-link a {
  color: #E9C45D;
  text-decoration: underline;
}

/***************************************
 * = LOGIN PAGE CONTAINER
 ***************************************/
.mcc-login-page-container {
    /* The background is likely your global site background color. 
       If you need a gold background, add it here or in the body. */
    max-width: 400px;
    margin: 60px auto;
    text-align: center;
    font-family: Arial, sans-serif;
}

/***************************************
 * = HEADINGS & SUBHEADINGS
 ***************************************/
.mcc-login-title {
    color: #e9c45c!important; /* Dark brown */
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.mcc-login-subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

/***************************************
 * = ERROR MESSAGES
 ***************************************/
.mcc-login-errors {
    background: #f8d7da; /* Light red background for errors */
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: left;
}

/***************************************
 * = LOGIN FORM
 ***************************************/
.mcc-login-form {
    text-align: left; /* Align labels and inputs to the left */
    margin: 0 auto;
    max-width: 100%;
}

.mcc-login-form label {
    display: block;
    font-weight: bold;
    color: #502F0F; /* Dark brown labels */
    margin-bottom: 5px;
}

body .mcc-login-form input[type="text"],
body .mcc-login-form input[type="password"] {
	color:#996533!important;
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
     background-color: #f3e7d9!important;
  border: none !important; 
    /* Optional: remove shadow or outline if needed */
    box-shadow: none !important;
    outline: none !important;
    margin-bottom: 15px;
}

.mcc-required {
    color: red;
}

/***************************************
 * = PASSWORD WRAPPER (EYE ICON)
 ***************************************/
.mcc-password-wrapper {
    position: relative;
}

.mcc-eye-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/***************************************
 * = FORGOT PASSWORD LINK
 ***************************************/
.mcc-forgot-link {
    text-align: right;
    margin-bottom: 20px;
}

.mcc-forgot-link a {
    color: #996533; /* or #502F0F if you prefer */
}
.mcc-forgot-link a:hover {
    color: #996533; /* or #502F0F if you prefer */
}
/****************************************************
 * = Header Menu Container
 ****************************************************/
.mcc-header-menu {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/****************************************************
 * = Logged-in Welcome Dropdown
 ****************************************************/
.mcc-welcome-dropdown {
    position: relative;
    display: inline-block;
}

.mcc-welcome-dropdown .mcc-welcome-text {
    font-size: 1.2rem;
	font-weight:bold;
    color: #996533; /* dark brown */
    cursor: pointer;
}
.mcc-welcome-dropdown .mcc-welcome-text:hover {
    color: #e9c45c; /* dark brown */
}


/* Dropdown menu hidden by default */
.mcc-dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;    /* Position it just below the welcome text */
    right: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid #996633;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 180px;
}

.mcc-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #996633;
    border-bottom: 1px solid #D9D9D9; /* Light gray divider */
    transition: background-color 0.3s, color 0.3s;
    text-align: left;
}
.mcc-dropdown-menu a:last-child {
    border-bottom: none;
}
.mcc-dropdown-menu a:hover {
    background-color: #E9C45D; /* Gold on hover */
    color: #333;
}

/* Show dropdown on hover */
.mcc-welcome-dropdown:hover .mcc-dropdown-menu {
    display: block;
}

/****************************************************
 * = Generic Menu Links (if needed)
 ****************************************************/
.mcc-header-menu .mcc-menu-list {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.mcc-header-menu .mcc-menu-list li a {
    text-align: center;
    font-size: 1.3rem;
	line-height:1.2;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s, color 0.3s;
    /* If these are used only for non-button links, you may omit setting a color here */
}

/****************************************************
 * = Logged-out Buttons (Login / Join Now)
 ****************************************************/
.mcc-logged-out-menu {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.mcc-logged-out-menu li {
    margin: 0;
    padding: 0;
}

/* Login Button: Brown background (#996633), white text */
.mcc-login-btn {
    width: 120px;
    height: 35px;
    background-color: #996633;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}
.mcc-login-btn:hover {
    background-color: #E9C45D;
    color: #333;
}

/* Join Now Button: Gold background (#E9C45D), dark text */
.mcc-join-btn {
    width: 120px;
    height: 35px;
    background-color: #E9C45D;
    color: #333 !important;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}
.mcc-join-btn:hover {
    background-color: #996633 !important;
    color: #fff !important;
}

/***************************************************
 * = Customer Dashboard Container
 ***************************************************/
.mcc-customer-dashboard-page {
  max-width: 950px;
  margin: 40px auto;
  background: #fff;
  padding: 20px;
}

/***************************************************
 * = Dashboard Header
 ***************************************************/
.mcc-dashboard-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.mcc-dashboard-title {
  font-size: 2rem;
  color: #996633; /* Dark brown */
  margin: 0;
}

/***************************************************
 * = Search Section
 ***************************************************/
.mcc-search-section {
  margin-bottom: 30px;
}
.mcc-label {
    font-size: 20px;
  display: block;
  font-weight: bold;
  color: #996633;
  margin-bottom: 5px;
}
.mcc-search-input-wrapper {
  width:500px;
  display:inline-block;
  position: relative;
  background-color: transparent; /* Remove border background */
  border: none; /* Remove border */
}
input#mcc-post-code.mcc-search-input {
  width: 100%;
  padding: 12px 50px; /* More width for icons */
  font-size: 1rem;
  border: none!important;
  background-color: #f8edcf;
  border-radius: 100px;
  outline: none;
}
.mcc-search-icon-left,
.mcc-search-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  fill: #996633;
}
.mcc-search-icon-left {
  left: 10px;
  width: 24px;
  height: 24px;
}
.mcc-search-icon-right {
  right: 10px;
  width: 24px;
  height: 24px;
}

/***************************************************
 * = Job Posting Section
 ***************************************************/
.mcc-job-posting-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.mcc-section-title {
  font-size: 1.2rem;
  color: #996633;
  margin-bottom: 10px;
}
.mcc-section-subtext {
  color: #333;
  margin-bottom: 10px;
}

/***************************************************
 * = Message Section
 ***************************************************/
.mcc-message-view-all {
  text-align: right;
}

/***************************************************
 * = Favorites Section
 ***************************************************/
.mcc-favorites-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
}
.mcc-favorites-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}
.mcc-favorites-list li {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  margin-bottom: 5px;
  padding: 8px;
  border-radius: 4px;
}
.mcc-heart-icon {
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.mcc-heart-icon svg {
  width: 24px;
  height: 24px;
}
.mcc-favorite-text {
  flex: 1;
  color: #333;
}
.mcc-delete-favorite-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
  display: flex;
  align-items: center;
  transition: opacity 0.3s;
}
.mcc-delete-favorite-btn:hover {
  opacity: 0.7;
}
.mcc-favorites-view-all {
  text-align: right;
}

/***************************************************
 * = Responsive Adjustments (if needed)
 ***************************************************/
@media (max-width: 600px) {
  .mcc-search-input {
    padding: 12px 40px;
  }
  .mcc-dashboard-title {
    font-size: 1.8rem;
  }
}
/***************************************************
 * GLOBAL STYLES & COLORS
 ***************************************************/
:root {
  --dark-brown: #996633;
  --gold: #E9C45D;
  --light-gray: #D9D9D9;
  --text-dark: #333; /* For general text if needed */
}
body {
  font-family: Arial, sans-serif;
  background-color: var(--light-gray);
  margin: 0;
  padding: 0;
}
/***************************************************
 * = Cook Dashboard Container
 ***************************************************/
.mcc-cook-dashboard-page {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
}

/***************************************************
 * = Dashboard Header
 ***************************************************/
.mcc-dashboard-header {
  margin-bottom: 30px;
}
.mcc-dashboard-title {
  font-size: 2rem;
  color: #e7c45c!important; /* Dark brown */
  margin: 0;
}

/***************************************************
 * = Search for Customer
 ***************************************************/
.mcc-search-section {
  margin-bottom: 30px;
}
.mcc-label {
  display: block;
  font-weight: bold;
  color: #996633;
  margin-bottom: 5px;
  text-align: left;
  margin-left: 10px;
}
.mcc-search-input-wrapper {
  position: relative;
}
.mcc-search-input {
  width: 100%;
  padding: 12px 50px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.mcc-search-icon-left,
.mcc-search-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  fill: #996633;
}
.mcc-search-icon-left {
  left: 20px;
  width: 24px;
  height: 24px;
}
.mcc-search-icon-right {
  right: 20px;
  width: 24px;
  height: 24px;
}

/***************************************************
 * = My Profile Section
 ***************************************************/
.mcc-profile-section {
	background-color: #f8edcf;
    justify-content: space-between;
    display: flex;
    gap: 50px;
    align-items: flex-end;
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 4px;
}
.mcc-section-title {
  font-size: 1.2rem;
  color: #996633;
  margin-bottom: 10px;
}
.mcc-section-subtext {
  color: #333;
  margin-bottom: 10px;
}

/***************************************************
 * = Buttons
 ***************************************************/
.mcc-button {
  display: inline-block;
  background-color: #996633;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
  margin-top: 5px;
}
.mcc-button:hover {
  background-color: #E9C45D; /* Gold */
  color: #333;
}
.mcc-profile-edit-btn-wrapper{
	display:flex;
	justify-content:flex-end;
	margin-bottom:50px;
}
/***************************************************
 * = My Message Section
 ***************************************************/
.mcc-message-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left; /* align message items to the left */
}
.mcc-message-item {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.mcc-message-sender {
  font-size: 1rem;
  color: #996633;
  margin-bottom: 5px;
}
.mcc-message-snippet {
  color: #333;
  margin: 0;
}
.mcc-message-view-all {
  text-align: right;
}
.mcc-no-data {
  color: #666;
  font-style: italic;
}

/***************************************************
 * = My Favorites Section
 ***************************************************/
.mcc-favorites-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
}
.mcc-favorites-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.mcc-favorites-list li {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  margin-bottom: 5px;
  padding: 8px;
  border-radius: 4px;
}
.mcc-heart-icon {
  stroke-width:2;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.mcc-favorite-text {
  flex: 1;
  color: #333;
}
.mcc-delete-favorite-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
  transition: opacity 0.3s;
}
.mcc-delete-favorite-btn:hover {
  opacity: 0.7;
}
.mcc-favorites-view-all {
  text-align: right;
}

/***************************************************
 * = My Reviews Section
 ***************************************************/
.mcc-reviews-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
}
.mcc-review-item {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.mcc-review-title {
  font-size: 1rem;
  color: #996633;
  margin-bottom: 5px;
}
.mcc-review-body {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 5px;
}
.mcc-review-meta {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

/***************************************************
 * = Cook Profile Creation Page Container
 ***************************************************/
.mcc-cook-profile-creation-page {
  max-width: 800px;
  margin: 40px auto;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.mcc-cook-profile-creation-page .mcc-page-title {
  font-size: 2rem;
  color: var(--dark-brown);
  margin-bottom: 15px;
  text-align: center;
}

.mcc-cook-profile-creation-page .mcc-intro-text {
  text-align: center;
  color: var(--text-dark);
  margin-bottom: 25px;
}

/***************************************************
 * = Form Styles for Profile Creation
 ***************************************************/
.mcc-profile-form {
  width: 100%;
}
.mcc-form-group {
  margin-bottom: 20px;
}
.mcc-form-group label {
  display: block;
  font-weight: bold;
  color: var(--dark-brown);
  margin-bottom: 5px;
}
.mcc-form-group input[type="text"],
.mcc-form-group input[type="number"],
.mcc-form-group input[type="email"],
.mcc-form-group input[type="password"],
.mcc-form-group input[type="file"],
.mcc-form-group textarea {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
}
.mcc-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Checkbox & Radio Options Group */
.mcc-checkbox-group,
.mcc-service-options-group,
.mcc-service-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mcc-checkbox-group label,
.mcc-service-options-group label,
.mcc-service-type-options label {
  font-weight: normal;
  font-size: 0.95rem;
  color: var(--dark-brown);
}

/* Availability Options */
.mcc-availability-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mcc-availability-slot {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.mcc-days {
  display: flex;
  justify-content: space-around;
  font-size: 0.9rem;
  color: var(--dark-brown);
  margin-top: 5px;
}

/* Submit Button */
.mcc-submit-button {
  width: 100%;
  background-color: var(--dark-brown);
  color: #fff;
  padding: 12px 0;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.mcc-submit-button:hover {
  background-color: var(--gold);
  color: var(--text-dark);
}

/***************************************************
 * = Cook Profile Page Container
 ***************************************************/
.mcc-cook-profile-page,
.mcc-customer-profile-page {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.mcc-cook-profile-page .mcc-profile-header {
  text-align: center;
  margin-bottom: 30px;
}
.mcc-cook-profile-page .mcc-profile-title {
  font-size: 2rem;
  color: var(--dark-brown);
  margin-bottom: 10px;
}
.mcc-cook-profile-page .mcc-profile-location {
  font-size: 1rem;
  color: var(--text-dark);
}
/***************************************************
 * = Updated Profile Header Section
 ***************************************************/
.mcc-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 2px solid #e7c65f;
  margin-bottom: 20px;
}

.mcc-profile-info {
  text-align: left;
}

.mcc-cook-name {
  font-size: 2.5rem;       /* Large cook name */
  color: #996633;          /* Dark brown */
  margin: 0;
  font-weight: bold;
}

.mcc-location {
  font-size: 1.2rem;
  color: #333;
  margin: 5px 0;
}

.mcc-created-date,
.mcc-updated-time {
  font-size: 1rem;
  color: #666;
  margin: 3px 0;
}

.mcc-profile-image-container {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: 20px;
  border: 3px solid #e7c65f; /* Border around the image */
}

.mcc-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/***************************************************
 * = Profile Sections (About, Availability, etc.)
 ***************************************************/
.mcc-about-section,
.mcc-availability-section,
.mcc-credentials-section,
.mcc-menu-section,
.mcc-reviews-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #e7c65f;
  border-radius: 4px;
  background: #fff;
}

.mcc-section-title {
  font-size: 1.2rem;
  color: var(--dark-brown);
  margin-bottom: 10px;
}
.mcc-about-text,
.mcc-availability-details,
.mcc-credentials-details,
.mcc-menu-details {
  font-size: 1rem;
  color: var(--text-dark);
}
/***************************************************
 * = Location Section: City, State, Pin Code
 ***************************************************/
.mcc-location-group {
  margin-bottom: 20px;
  text-align: left;
}

.mcc-location-group .mcc-section-title {
  font-size: 1.2rem;
  color: #996633; /* Dark brown */
  margin-bottom: 10px;
}

.mcc-location-inputs {
  display: flex;
  gap: 10px;
}

.mcc-location-input {
  flex: 1;
}

.mcc-location-input label {
  display: block;
  font-weight: bold;
  color: #996633;
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.mcc-location-input input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
/***************************************************
 * = Checkbox Group: Two Column Layout
 ***************************************************/
.mcc-checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
  gap: 10px; /* Spacing between items */
}

/* Optional: Style each label for better spacing and alignment */
.mcc-checkbox-group label {
  font-size: 0.95rem;
  color: #996633; /* Use dark brown (if needed) */
  display: flex;
  align-items: center;
}

/* Optional: Add some spacing to the checkbox input */
.mcc-checkbox-group label input[type="checkbox"] {
  margin-right: 5px;
}

/***************************************************
 * = Reviews Section
 ***************************************************/
.mcc-review-item {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.mcc-review-title {
  font-size: 1rem;
  color: var(--dark-brown);
  margin-bottom: 5px;
}
.mcc-review-body {
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 5px;
}
.mcc-review-meta {
  font-size: 0.85rem;
  color: var(--text-dark);
}

/***************************************************
 * = Profile Footer
 ***************************************************/
.mcc-profile-footer {
  text-align: center;
  margin-top: 30px;
}
.mcc-profile-footer .mcc-button {
  margin: 0 10px;
}
.mcc-checkbox-label {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}

.mcc-checkbox-label input {
  margin-right: 0.5em;
}

.mcc-info-icon {
  display: inline-block;
  margin-left: 0.25em;
  cursor: help;
  color: #a17c4c;               /* match your accent color */
  font-style: normal;
  line-height: 1;
}
/***************************************************
 * = Responsive Adjustments
 ***************************************************/
@media (max-width: 600px) {
  .mcc-cook-profile-creation-page, .mcc-cook-profile-page {
    padding: 15px;
  }
  .mcc-page-title {
    font-size: 1.8rem;
  }
}
/***************************************************
 * = Availability Section (Table)
 ***************************************************/
.mcc-availability-group {
  margin-bottom: 20px;
}
.mcc-availability-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.mcc-availability-table th,
.mcc-availability-table td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 0.95rem;
}
.mcc-availability-table th {
  background-color: #f4edf7;  /* Light background for header */
  color: #996633;            /* Dark brown text */
}
.mcc-services-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mcc-services-list li {
  font-size: 0.95rem;
  color: #333;
  margin: 5px 0;
}
/***************************************************
 * = Pay Rates Section (Display in One Row)
 ***************************************************/
.mcc-pay-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-pay-rates {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
}
.mcc-pay-rate-item {
  font-size: 1rem;
  color: #333;
}
.mcc-pay-inputs{
	display:flex;
	gap:20px;
}
/***************************************************
 * = Credentials Section (Image Grid)
 ***************************************************/
.mcc-credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.mcc-credential-box,
.mcc-credential-display {
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  transition: border-color 0.3s;
}
.mcc-credential-box:hover,
.mcc-credential-display:hover {
  border-color: #E9C45D;
}
.mcc-credential-image {
  display:flex;
  height: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 5px;
}
.mcc-credential-display-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 5px;
}
.mcc-credential-text,
.mcc-credential-display-text {
  font-size: 0.9rem;
  color: #996633;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

/***************************************************
 * = Cook Profile Page Container
 ***************************************************/
.mcc-cook-profile-page {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
}

/***************************************************
 * = Profile Header
 ***************************************************/
.mcc-profile-header {
  margin-bottom: 30px;
}
.mcc-profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}
.mcc-profile-title {
  font-size: 2rem;
  color: #996633;
  margin-bottom: 10px;
}
.mcc-profile-location {
  font-size: 1rem;
  color: #333;
  margin-bottom: 15px;
}
.mcc-edit-profile-btn {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #996633;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.mcc-edit-profile-btn:hover {
  background-color: #E9C45D;
  color: #333;
}

/***************************************************
 * = Section Titles & Text
 ***************************************************/
.mcc-section-title {
  font-size: 1.2rem;
  color: #996633;
  margin-bottom: 10px;
  text-align: left;
}
.mcc-section-subtext {
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

/***************************************************
 * = About Section
 ***************************************************/
.mcc-about-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-about-text {
  font-size: 1rem;
  color: #333;
}

/***************************************************
 * = Details Section (Capacity & Service Type)
 ***************************************************/
.mcc-details-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  text-align: left;
}
.mcc-detail-item {
  flex: 1;
  padding: 0 10px;
}
.mcc-detail-title {
  font-size: 1rem;
  color: #996633;
  margin-bottom: 5px;
}
.mcc-detail-text {
  font-size: 1rem;
  color: #333;
}

/***************************************************
 * = Availability Section (Table)
 ***************************************************/
.mcc-availability-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-availability-table {
  background-color:#f8edcf;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.mcc-availability-table th,
.mcc-availability-table td {
  border: 1px solid #e7c65f;
  padding: 8px;
  font-size: 0.95rem;
}
.mcc-availability-table th {
  background-color: #f8edcf;
  color: #996633;
}

/***************************************************
 * = Pay Rates Section
 ***************************************************/
.mcc-pay-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-pay-rates p {
  font-size: 1rem;
  color: #333;
  margin: 5px 0;
}

/***************************************************
 * = Credentials Section (Image Grid)
 ***************************************************/
.mcc-credentials-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-credential-display {
  width: 150px;
  text-align: center;
}
.mcc-credential-display-image {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto 5px;
}
.mcc-credential-display-text {
  font-size: 0.9rem;
  color: #996633;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

/***************************************************
 * = Cook's Menu Section
 ***************************************************/
.mcc-menu-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-menu-details {
  font-size: 1rem;
  color: #333;
}

/***************************************************
 * = My Reviews Section
 ***************************************************/
.mcc-reviews-section {
  margin-bottom: 30px;
  text-align: left;
}
.mcc-review-item {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.mcc-review-title {
  font-size: 1rem;
  color: #996633;
  margin-bottom: 5px;
}
.mcc-review-body {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 5px;
}
.mcc-review-meta {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

/***************************************************
 * = Responsive Adjustments
 ***************************************************/
@media (max-width: 600px) {
  .mcc-cook-profile-page,
.mcc-customer-profile-page {
    padding: 15px;
  }
  .mcc-dashboard-title {
    font-size: 1.8rem;
  }
}

/**
 * ------------------------------------------------------------------------
 *  FIND A COOK SHORTCODE, ASSETS & AJAX
 * ------------------------------------------------------------------------
 */

/* Container */
.mcc-find-cook-page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Page Title & Search */
.mcc-page-title {
  text-align: center;
  font-size: 2.5rem;
  color: #E9C45D!important;
  margin-bottom: 20px;
}
.mcc-search-form {
  text-align: center;
  margin-bottom: 40px;
}
.mcc-search-input-wrapper {
  display: inline-flex;
  position: relative;
}
.mcc-search-input-wrapper input {
  width: 600px;
  border-radius: 50px;
  border: 1px solid #996533;
}
.mcc-search-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Grid of cards */
.mcc-cook-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* Individual card */
.mcc-cook-card {
  position: relative;
  background: #f8edcf;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Left side: avatar + text */
.mcc-card-left {
  min-height: 330px;
  width:80%;
  padding: 16px;
  border-right:2px solid #996633;
  flex: 1;
  text-align: left;
}
.mcc-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
}
.mcc-card-name {
  font-size: 1.3rem;
  color: #996633;
  margin: 0 0 4px;
}
.mcc-card-city {
  font-size: 1rem;
  color: #333;
  margin: 0 0 4px;
}
.mcc-card-updated {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 12px;
}
.mcc-card-excerpt {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.4;
}

/* Right side: vertical credentials */
.mcc-card-creds {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mcc-cred-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Buttons row */
.mcc-card-buttons {
  display: flex;
  gap: 8px;
  padding: 16px;
  background: #fff;
  justify-content: space-between;
}

.mcc-button {
    display: inline-block;
    background-color: #e9c45c!important;
    color: #996536!important;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold!important;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 5px;
}

.mcc-btn:hover {
  background: #e9c45c!important;
  color: #996536!important;
  font-weight:600!important;
}
/* heart */
.mcc-btn.heart {
  flex: 0 0 40px;
  font-size: 1.2rem;
  line-height: 1;
}
.mcc-btn.heart.favorited {
  background: #E94E77;
}

/* No results text */
.mcc-no-results {
  text-align: center;
  color: #666;
  font-style: italic;
}

/* Pagination */
.mcc-pagination {
  text-align: center;
  margin: 30px 0;
}
.mcc-pagination .page-numbers {
  display: inline-block;
  margin: 0 4px;
  padding: 6px 12px;
  background: #f0f0f0;
  color: #333;
  border-radius: 4px;
  text-decoration: none;
}
.mcc-pagination .current {
  background: #996633;
  color: #fff;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .mcc-page-title {
    font-size: 2rem;
  }
  .mcc-search-input-wrapper input {
    width: 200px;
  }
  .mcc-cook-card {
    flex-direction: column;
  }
  .mcc-card-creds {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    padding: 8px 16px 0;
  }
  .mcc-card-buttons {
    flex-direction: column;
  }
  .mcc-btn {
    width: 100%;
  }
}

/********************************************
 * = View Cook Profile Page Styles
 ********************************************/
.mcc-hero-section {
  padding: 30px 0;
  text-align: center;
}

.mcc-hero-text {
  margin: 0;
  color: var(--text-dark);
  font-size: 2rem;
  font-weight: bold;
}

.mcc-join-date {
  font-size: 0.9rem;
  color: #666;
  margin: 5px 0 0;
}

.mcc-profile-action-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* Fine-tune the review stub if you add real cards later */
.mcc-reviews-section p {
  text-align: center;
  font-style: italic;
  color: #666;
}
/* ------------------------------------------------------------------------
   HERO BANNER FOR VIEW COOK PROFILE
------------------------------------------------------------------------ */
.mcc-cook-profile-page .mcc-hero-section {
  padding: 1.5rem 0;
  text-align: center;
  margin-bottom: 2rem;
}
.mcc-cook-profile-page .mcc-hero-text {
  margin: 0;
  font-size: 2.2rem;
  color: #e9c45d!important;
  font-weight: 700;
}
/* -------------------------------------------------------------------
   View-Cook Profile: Contact & Shortlist buttons
   ------------------------------------------------------------------- */
.mcc-profile-action-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* make contact & shortlist same size */
.mcc-profile-action-btns .mcc-btn {
	border:none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 135px;   /* tweak this to taste */
  height: 40px;   /* tweak this to taste */
  box-sizing: border-box;
  padding: 0;     /* we’re controlling height & width explicitly */
}

/* if you still want a little breathing room inside */
.mcc-profile-action-btns .mcc-btn span,
.mcc-profile-action-btns .mcc-btn svg {
  margin: 0 4px;
}

/* Heart‐icon as white outline by default */
.mcc-profile-action-btns .mcc-heart-icon svg {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
}

/* (Optional) When you add a “favorited” class you can fill it */
.mcc-fav-cook.favorited .mcc-heart-icon svg {
  fill: #ffffff;
  stroke: none;
}
/* — Modal overlay — */
.mcc-modal-overlay {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.4); 
  display:flex;
  align-items:center; 
  justify-content:center;
  z-index: 9999;
}
.mcc-modal {
  background: #eac96d; 
  padding: 2rem; 
  border-radius:1rem;
  text-align:center;
}
.mcc-modal-buttons { 
    gap:25px;
    margin-top:1rem; 
    display:flex; 
    justify-content:space-around; 
    
}
.mcc-modal .mcc-btn { 
  height: 100%;
  border: none !important;
  width: 45%;
    
}
.mcc-modal-buttons .mcc-btn:hover{
    border: 1px solid #8c5e29;
    
}
/* — Shortlist heart active state — */
.mcc-fav-cook {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.5rem 1rem; background:#996633; color:#fff; border:none;
  border-radius:4px; cursor:pointer;
}
/* — Common button — */
.mcc-profile-buttons {
  display: flex;
  gap: 12px;
}
.mcc-btn {
	border:none;
    display: inline-block;
    background-color: #e9c45c!important;
    color: #996536!important;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold!important;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 5px;
}
.mcc-btn .mcc-heart-icon {
  stroke-width: 2;
  fill: none;
  stroke: #fff;
  margin-right: 8px;
}

.mcc-fav-cook.favorited .mcc-heart-icon {
  fill: #fff;
  stroke: none;
}

/* ensure Contact and Shortlist share same width */
.mcc-view-profile,
.mcc-contact-cook,
.mcc-fav-cook {
  width: 120px;
}
.mcc-view-profile{
    display: inline-flex;
    color: #333;
    text-decoration: none;
    
}
/* =========================================================================
   Customer Job Post Page
   ========================================================================== */

.mcc-customer-job-post-page {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-family: inherit;
}

/* Section title */
.mcc-customer-job-post-page .mcc-section-title {
  font-size: 1.75rem;
  color: var(--dark-brown);
  margin-bottom: 1rem;
}

/* Label + Group */
.mcc-customer-job-post-page .mcc-form-group {
  margin-bottom: 1.5rem;
}
.mcc-customer-job-post-page .mcc-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--dark-brown);
}

/* Text inputs & textarea */
.mcc-customer-job-post-page input[type="text"],
.mcc-customer-job-post-page input[type="number"],
.mcc-customer-job-post-page textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
  color:#966636;
}

/* Date‐pair row */
.mcc-customer-job-post-page .mcc-date-pair {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.mcc-customer-job-post-page .mcc-date-pair > div {
  flex: 1;
}
.mcc-customer-job-post-page .mcc-date-pair label {
  margin-bottom: 0.5rem;
}
.mcc-customer-job-post-page .mcc-date-pair select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* Outline heart by default */
.mcc-fav-cook .mcc-heart-icon svg path {
  stroke: currentColor;
  fill: none;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* Filled heart when active */
.mcc-fav-cook.mcc-fav--active .mcc-heart-icon svg path {
  fill: currentColor;
  stroke: none;
}
/* Outline heart by default (cook-side) */
.mcc-fav-customer .mcc-heart-icon svg path {
  stroke: currentColor;
  fill: none;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* Filled heart when active (cook-side) */
.mcc-fav-customer.mcc-fav--active .mcc-heart-icon svg path {
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------
   My Messages Page
   assets/css/mcc-messages.css
   -------------------------------------------------- */

.mcc-messages-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: #f8edcf;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: system-ui, sans-serif;
}

/* Section title */
.mcc-messages-page .mcc-section-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #996633;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* When there’s no data */
.mcc-messages-page .mcc-no-data {
  text-align: center;
  color: #777;
  padding: 2rem 0;
  font-style: italic;
}

/* Conversation list */
.mcc-messages-page .mcc-message-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mcc-messages-page .mcc-message-summary {
  background: #fff;
  margin-bottom: 1rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
  transition: box-shadow 0.2s;
}

.mcc-messages-page .mcc-message-summary:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Clickable area */
.mcc-messages-page .mcc-message-link {
  text-align:left;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 0.25rem 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 1rem;
}

/* Name (top-left) */
.mcc-messages-page .mcc-message-name {
  grid-column: 1 / span 1;
  grid-row: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color:#966636;
}

/* Date (top-right) */
.mcc-messages-page .mcc-message-date {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.9rem;
  color: #999;
  text-align: right;
}

/* Snippet (bottom-left) */
.mcc-messages-page .mcc-message-snippet {
  grid-column: 1 / span 2;
  grid-row: 2;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 0.25rem;
}

/* Pagination */
.mcc-messages-page .mcc-inbox-pagination {
  margin-top: 2rem;
  text-align: center;
}

.mcc-messages-page .mcc-inbox-pagination ul {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mcc-messages-page .mcc-inbox-pagination li {
  margin: 0 0.25rem;
}

.mcc-messages-page .mcc-inbox-pagination a,
.mcc-messages-page .mcc-inbox-pagination span {
  display: block;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  font-size: 0.9rem;
}

.mcc-messages-page .mcc-inbox-pagination .current {
  background: #996633;
  border-color: #996633;
  color: #fff;
}

.mcc-messages-page .mcc-inbox-pagination a:hover {
  background: #f0ead3;
  border-color: #f0ead3;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .mcc-messages-page .mcc-message-link {
    display: block;
  }
  .mcc-messages-page .mcc-message-date {
    text-align: left;
    margin-top: 0.25rem;
  }
}
/* hide anything with mcc-hidden */
.mcc-hidden {
  display: none !important;
}

/* modal wrapper: full-screen, centered flex */
.mcc-cancel-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* inner popup box styling (you can keep your inline styles or pull them here) */
.mcc-cancel-modal > .mcc-cancel-inner {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 400px;
  position: relative;
}