/* ================================================
   IES ABROAD FLEXCARD MASTER STYLESHEET
   Use this in "Custom Lightning Stylesheet File Name"
   ================================================ */

/* ALL HEX COLORS - No CSS variables (Shadow DOM safe) */

/* =================================
   CARD STYLES
   ================================= */

/* Base Card */
.ies-card,
article.slds-card {
  border: 1px solid #dbdbdb !important;
  border-radius: 0.125rem !important;
  background-color: #fff !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

/* Card Header - Grey (Default) */
.ies-card-header,
.slds-card__header {
  background-color: #f4f4f4 !important;
  padding: 1.25rem !important;
  border-bottom: 1px solid #dbdbdb !important;
}

.ies-card-header h1,
.ies-card-header h2,
.ies-card-header h3,
.ies-card-header h4,
.slds-card__header h1,
.slds-card__header h2,
.slds-card__header h3,
.slds-card__header h4 {
  font-family: Roboto, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  color: #333 !important;
}

/* Card Body */
.ies-card-body,
.slds-card__body {
  padding: 1.25rem !important;
  background-color: #fff !important;
  color: #333 !important;
}

/* Card Footer */
.ies-card-footer,
.slds-card__footer {
  padding: 1.25rem !important;
  border-top: 1px solid #dbdbdb !important;
  background-color: #fff !important;
}

/* =================================
   CARD COLOR VARIANTS
   ================================= */

/* Teal Header Card */
.ies-card-teal .ies-card-header,
.ies-card-teal .slds-card__header {
  background-color: #00819e !important;
  color: #fff !important;
  border-bottom-color: #00819e !important;
}

.ies-card-teal .ies-card-header h1,
.ies-card-teal .ies-card-header h2,
.ies-card-teal .ies-card-header h3,
.ies-card-teal .ies-card-header h4,
.ies-card-teal .slds-card__header h1,
.ies-card-teal .slds-card__header h2,
.ies-card-teal .slds-card__header h3,
.ies-card-teal .slds-card__header h4 {
  color: #fff !important;
}

/* Yellow Header Card */
.ies-card-yellow .ies-card-header,
.ies-card-yellow .slds-card__header {
  background-color: #ffcd05 !important;
  color: #333 !important;
  border-bottom-color: #ffcd05 !important;
}

/* Grey/Dark Header Card */
.ies-card-grey .ies-card-header,
.ies-card-grey .slds-card__header {
  background-color: #333 !important;
  color: #fff !important;
  border-bottom-color: #333 !important;
}

.ies-card-grey .ies-card-header h1,
.ies-card-grey .ies-card-header h2,
.ies-card-grey .ies-card-header h3,
.ies-card-grey .slds-card__header h1,
.ies-card-grey .slds-card__header h2,
.ies-card-grey .slds-card__header h3 {
  color: #fff !important;
}

/* Pink Header Card */
.ies-card-pink .ies-card-header,
.ies-card-pink .slds-card__header {
  background-color: #e2185b !important;
  color: #fff !important;
  border-bottom-color: #e2185b !important;
}

.ies-card-pink .ies-card-header h1,
.ies-card-pink .ies-card-header h2,
.ies-card-pink .ies-card-header h3,
.ies-card-pink .slds-card__header h1,
.ies-card-pink .slds-card__header h2,
.ies-card-pink .slds-card__header h3 {
  color: #fff !important;
}

/* Green Header Card */
.ies-card-green .ies-card-header,
.ies-card-green .slds-card__header {
  background-color: #218000 !important;
  color: #fff !important;
  border-bottom-color: #218000 !important;
}

.ies-card-green .ies-card-header h1,
.ies-card-green .ies-card-header h2,
.ies-card-green .ies-card-header h3,
.ies-card-green .slds-card__header h1,
.ies-card-green .slds-card__header h2,
.ies-card-green .slds-card__header h3 {
  color: #fff !important;
}

/* =================================
   BUTTON STYLES
   ================================= */

/* Primary Button - Yellow */
.ies-btn-primary,
button.ies-btn-primary,
a.ies-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffcd05 !important;
  color: #333 !important;
  border-radius: 2.25rem !important;
  padding: 0.75rem 1.5rem !important;
  font-family: Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  min-height: 44px !important;
  transition: background-color 0.2s ease !important;
}

.ies-btn-primary:hover,
button.ies-btn-primary:hover,
a.ies-btn-primary:hover {
  background-color: #ecbf0d !important;
  color: #333 !important;
  text-decoration: none !important;
}

/* Secondary Button - Outlined */
.ies-btn-secondary,
button.ies-btn-secondary,
a.ies-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  color: #333 !important;
  border: 1px solid #333 !important;
  border-radius: 2.25rem !important;
  padding: 0.6875rem 1.4375rem !important;
  font-family: Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  min-height: 44px !important;
  transition: all 0.2s ease !important;
}

 .ies-btn-secondary:hover,
button.ies-btn-secondary:hover,
a.ies-btn-secondary:hover {
  background-color: #333 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Black Button */
.ies-btn-black,
button.ies-btn-black,
a.ies-btn-black {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #333 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2.25rem !important;
  padding: 0.75rem 1.5rem !important;
  font-family: Roboto, sans-serif !important;
  font-weight: 700 !important;
  min-height: 44px !important;
}

.ies-btn-black:hover,
button.ies-btn-black:hover,
a.ies-btn-black:hover {
  background-color: #1f1f1f !important;
  color: #fff !important;
}

/* Teal Button */
.ies-btn-teal,
button.ies-btn-teal,
a.ies-btn-teal {
  background-color: #00819e !important;
  color: #fff !important;
  border: none !important;
}

.ies-btn-teal:hover,
button.ies-btn-teal:hover,
a.ies-btn-teal:hover {
  background-color: #037792 !important;
  color: #fff !important;
}

/* Small Button */
.ies-btn-small {
  padding: 0.5rem 1.25rem !important;
  font-weight: 500 !important;
  min-height: 36px !important;
}

/* Wide Button */
.ies-btn-wide {
  width: 100% !important;
  max-width: 18.75rem !important;
}

/* Full Width Button */
.ies-btn-full {
  width: 100% !important;
}

/* =================================
   TYPOGRAPHY
   ================================= */

.ies-h1,
h1.ies-h1 {
  font-family: Roboto, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #333 !important;
  margin-bottom: 1.25rem !important;
}

.ies-h2,
h2.ies-h2 {
  font-family: Roboto, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #333 !important;
  margin-bottom: 1rem !important;
}

.ies-h3,
h3.ies-h3 {
  font-family: Roboto, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #333 !important;
  margin-bottom: 0.875rem !important;
}

.ies-h4,
h4.ies-h4 {
  font-family: Roboto, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  line-height: 1.375 !important;
  color: #333 !important;
  margin-bottom: 0.75rem !important;
}

.ies-text-body,
p.ies-text-body {
  font-family: Karla, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #333 !important;
  margin-bottom: 0.9375rem !important;
}

/* =================================
   BACKGROUND COLORS
   ================================= */

.ies-bg-yellow {
  background-color: #ffcd05 !important;
}
.ies-bg-yellow-light {
  background-color: #fff9e7 !important;
}
.ies-bg-teal {
  background-color: #00819e !important;
}
.ies-bg-teal-light {
  background-color: #e5f2f5 !important;
}
.ies-bg-pink {
  background-color: #e2185b !important;
}
.ies-bg-green {
  background-color: #218000 !important;
}
.ies-bg-purple {
  background-color: #682566 !important;
}
.ies-bg-grey {
  background-color: #333 !important;
}
.ies-bg-grey-light {
  background-color: #f4f4f4 !important;
}
.ies-bg-white {
  background-color: #fff !important;
}

/* =================================
   TEXT COLORS
   ================================= */

.ies-text-yellow {
  color: #ffcd05 !important;
}
.ies-text-teal {
  color: #00819e !important;
}
.ies-text-pink {
  color: #e2185b !important;
}
.ies-text-green {
  color: #218000 !important;
}
.ies-text-purple {
  color: #682566 !important;
}
.ies-text-grey {
  color: #333 !important;
}
.ies-text-grey-light {
  color: #757575 !important;
}
.ies-text-white {
  color: #fff !important;
}

/* =================================
   BORDERS
   ================================= */

.ies-border-yellow {
  border: 1px solid #ffcd05 !important;
}
.ies-border-teal {
  border: 1px solid #00819e !important;
}
.ies-border-grey {
  border: 1px solid #dbdbdb !important;
}
.ies-border-grey-dark {
  border: 1px solid #333 !important;
}

/* =================================
   SPACING UTILITIES
   ================================= */

/* Margins */
.ies-m-0 {
  margin: 0 !important;
}
.ies-mt-small {
  margin-top: 0.5rem !important;
}
.ies-mt-medium {
  margin-top: 1rem !important;
}
.ies-mt-large {
  margin-top: 1.5rem !important;
}
.ies-mb-small {
  margin-bottom: 0.5rem !important;
}
.ies-mb-medium {
  margin-bottom: 1rem !important;
}
.ies-mb-large {
  margin-bottom: 1.5rem !important;
}
.ies-ml-small {
  margin-left: 0.5rem !important;
}
.ies-ml-medium {
  margin-left: 1rem !important;
}
.ies-mr-small {
  margin-right: 0.5rem !important;
}
.ies-mr-medium {
  margin-right: 1rem !important;
}

/* Padding */
.ies-p-0 {
  padding: 0 !important;
}
.ies-p-small {
  padding: 0.5rem !important;
}
.ies-p-medium {
  padding: 1rem !important;
}
.ies-p-large {
  padding: 1.5rem !important;
}
.ies-p-xlarge {
  padding: 2rem !important;
}

.ies-pt-small {
  padding-top: 0.5rem !important;
}
.ies-pt-medium {
  padding-top: 1rem !important;
}
.ies-pb-small {
  padding-bottom: 0.5rem !important;
}
.ies-pb-medium {
  padding-bottom: 1rem !important;
}
.ies-pl-small {
  padding-left: 0.5rem !important;
}
.ies-pl-medium {
  padding-left: 1rem !important;
}
.ies-pr-small {
  padding-right: 0.5rem !important;
}
.ies-pr-medium {
  padding-right: 1rem !important;
}

/* =================================
   LAYOUT UTILITIES
   ================================= */

.ies-text-center {
  text-align: center !important;
}
.ies-text-left {
  text-align: left !important;
}
.ies-text-right {
  text-align: right !important;
}

.ies-flex {
  display: flex !important;
}
.ies-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ies-flex-between {
  display: flex !important;
  justify-content: space-between !important;
}
.ies-flex-column {
  flex-direction: column !important;
}

.ies-shadow {
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2) !important;
}
.ies-rounded {
  border-radius: 0.125rem !important;
}
.ies-rounded-full {
  border-radius: 9999px !important;
}

.ies-hidden {
  display: none !important;
}
.ies-visible {
  display: block !important;
}

/* =================================
   FORM STYLES
   ================================= */

.ies-form label {
  font-family: Roboto, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.ies-form input[type="text"],
.ies-form input[type="email"],
.ies-form input[type="tel"],
.ies-form input[type="number"],
.ies-form input[type="password"],
.ies-form textarea,
.ies-form select {
  width: 100% !important;
  padding: 0.75rem !important;
  border: 1px solid #dbdbdb !important;
  border-radius: 0.125rem !important;
  font-family: Karla, sans-serif !important;
  font-size: 1rem !important;
  color: #333 !important;
  background-color: #fff !important;
}
.slds-input-has-icon_right .slds-input {
  padding-right: 2rem !important;
}

.ies-form input:focus,
.ies-form textarea:focus,
.ies-form select:focus {
  outline: none !important;
  border-color: #00819e !important;
  box-shadow: 0 0 0 1px #00819e !important;
}

/* =================================
   LISTS
   ================================= */

.ies-list-disc {
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
}

.ies-list-decimal {
  list-style-type: decimal !important;
  padding-left: 1.5rem !important;
}

.ies-list-none {
  list-style: none !important;
  padding: 0 !important;
}

/* =================================
   IES BRAND COLORS REFERENCE
   ================================= */
/*
  Yellow: #ffcd05
  Yellow Hover: #ecbf0d
  Yellow Dark: #e8b800
  Teal: #00819e
  Teal Dark: #037792
  Pink: #e2185b
  Green: #218000
  Purple: #682566
  Grey Dark: #1f1f1f
  Grey: #333
  Grey Steel: #757575
  Grey Light: #f4f4f4
  Grey Very Light: #dbdbdb
  White: #fff
*/