/* 
Main Style sheet
- home
- Cards
- StampCrd
- help-home
- faq-cards
- faq-order
- faq-shout
- faq-app


Updated 18th June 2024
*/

/*  Dev Build Framework  */
/* ********************************** */
/* Identify Background */
.toDEV {
  background-color: #000;
  opacity: 0.5;
}


/* Pre Style Overide */
/* ********************************** */
pre {
  padding-bottom: 0px;
  border: 0px solid #e1dbdb;
  margin: 0px;
}



/*  User Interactions  */
/* ********************************** */
/* Visual Feedback for User */
.scale:active {
  transform: scale(0.98);
}


/*  K Typography  */
/* ********************************** */
/* Body Title */
.K-btitle {
  font-size: 1.45em;
  font-weight: 400;
}

/* Body Caption */
.K-bcaption {
  font-size: 1.05em;
  font-weight: 400;
}

/* Body Font */
.K-bfont {
  font-size: 1.3em;
  font-weight: 400;
}

/* Button Heading */
.K-bhead {
  font-size: 2em;
  /* 32px */
  font-weight: 600;
}

/* Title Font */
.k-tfont {
  font-size: 1.6em;
  /*  */
  font-weight: 400;
}

/* Title Font Colour */
.k-tfont-c {
  color: #cf7d2e;
}


/*  io-card overrides  */
/* ********************************** */
/* io-card styles 05 06 24 */
.io-card-header {
  display: flow-root;
  padding: 10px !important;
  margin: 5px;
}

.io-card-body {
  display: flow-root;
  padding: 5px !important;
  margin: 5px;
  min-height: 100px;
}

.io-card-footer {
  display: flow-root;
  padding: 5px !important;
  margin: 5px;
  max-height: 50px;
}


.io-card {
  padding: 10px !important;
  margin: 8px;
}




/* Background Images */
/* ********************************** */
/* sets coffee background image for Home screen */
.coffeebkgrnd00 {
  background-image: url("/media/assets/images/kawhi-main-01-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  /* Fallback */
  height: 100dvh;
  /* Will override if supported */
  width: 100vw;
}

/* sets coffee background image for Cards screen */
.coffeebkgrnd01 {
  background-image: url("/media/assets/images/kawhi-kwallet-01-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  /* Fallback */
  height: 100dvh;
  /* Will override if supported */
  width: 100vw;
}

.coffeebkgrnd03 {
  background-image: url("/media/assets/images/kawhi-kwallet-03-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  /* Fallback */
  height: 100dvh;
  /* Will override if supported */
  width: 100vw;
}


/* sets coffee border image for Home screen */
.coffeeborder {
  width: calc(100vw - 12px) !important;
  height: calc(100vh - 12px) !important;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 45px;
  border: 3px solid #FAF9F6;
  color: #F0F8FF;
  /* Alice Blue */
}



/* Home Page Navigation Cards | Order | Shout */
/* ********************************** */
/* sets main navigation cards style Portrait*/
.kcards-p {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border: 2px solid #F0F8FF;
  /* Alice Blue */
  box-shadow: 0px 0px 9px #b3b1b1;
  color: #FAF9F6;
  background: rgb(57, 37, 22);
  background: linear-gradient(90deg, rgba(57, 37, 22, 1) 9%, rgba(240, 248, 255, 0.8309698879551821) 81%, rgba(249, 249, 246, 0.4640231092436975) 95%);
  /* #392516, #F0F8FF, #F0F9F6 */
}

/* Transform when clicked */
a.k-butt:active {
  transform: scale(0.95);
}

/* Transform Gradient when hovered */
a.k-butt:hover {
  background: linear-gradient(to right, #d0d1d3, #ffffff);
  background-color: #d0d1d3;
}

/* sets main navigation cards style Landscape*/
.kcards-l {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border: 4px solid #F0F8FF;
  /* Alice Blue */
  box-shadow: 0px 0px 9px #b3b1b1;
  color: #FAF9F6;

  background: rgb(57, 37, 22);
  background: linear-gradient(90deg, rgba(57, 37, 22, 1) 0%, rgba(240, 248, 255, 0.6601015406162465) 94%, rgba(250, 249, 246, 0.021446078431372584) 100%);
  =
}




/* Header and Footer Fixed Icons */
/* ********************************** */
/* sets main nav icons border background style */
div.kicon-l {
  display: block;
  width: 60px;
  height: 60px;
  background-color: rgb(202, 185, 185, 0.1);
  /* is Hex #CAB9B9 */
  text-align: center;
  align-content: center;
  align-items: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

div.kicon-l>img {
  max-height: 60%;
  max-width: 60%;
}

/* sets main nav icons border background style for Go Back*/
div.kicon-gb {
  display: block;
  width: 60px;
  height: 60px;
  background-color: rgb(202, 185, 185, 0.9);
  /* is Hex #CAB9B9 */
  text-align: center;
  align-content: center;
  align-items: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

div.kicon-gb>img {
  max-height: 60%;
  max-width: 60%;
}



/* sets main nav icons border background style RHS is more opacity due to lighter background */
div.kicon-r {
  display: block;
  width: 60px;
  height: 60px;
  background-color: rgb(202, 185, 185, 0.25);
  /* is Hex #CAB9B9 */
  text-align: center;
  align-content: center;
  align-items: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

div.kicon-r>img {
  max-height: 60%;
  max-width: 60%;
}

div.kicon-r-b {
  display: block;
  width: 60px;
  height: 60px;
  background-color: rgb(202, 185, 185, 0.25);
  /* is Hex #CAB9B9 */
  text-align: center;
  align-content: center;
  align-items: center;
  border: 1px solid #FAF9F6;/ *Off White */ border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

div.kicon-r-b>img {
  max-height: 60%;
  max-width: 60%;
}

/* Creates the Kawhi Circle */
.kawhi-logo {
  display: block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border: 2px solid #606D5D;
  border-radius: 50%;
  color: #606D5D;
  text-align: center;
  text-decoration: none;
  background: #ffffff;
  box-shadow: 0px 0px 20px #b3b1b1;
  font-size: 18px;
  font-weight: bold;
}


/* Cards Loyalty Card Styling */
/* ********************************** */
/* the following creates the borders for the Loyalty Cards */
.kwad {
  border-radius: 17px;
  border: 1px solid #ffffff;
  color: white;
  /*
    background-color: #ffffff70;
    */
}

.kwadbase {
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
  text-align: center;
  color: white;
}

/* controls kwallet card text width to ensure text truncates */
.kwad .io-text-truncate {
  padding: 8px 5px !important;
}

/* the following creates the borders for sorting icons */
.ksort {
  border-radius: 5px;
  border: 1px solid #ffffff79;
  padding: 3px;
}

.ksortactive {
  border-radius: 5px;
  border: 2px solid #ffffff;
  color: white;
  padding: 3px;
}


/* the following creates the borders for the full loyalty stamp cards */
.kloyalty {
  border: 3px solid #ffffffc5;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-right: 2px solid transparent;
}


/* the following is the background styling for each Vendors Card */
.crdbkgrnd01 {
  background-color: #ffa600;
  opacity: 90%;
}

.crdbkgrnd02 {
  background-color: #CC0863;
  opacity: 85%;
}

.crdbkgrnd03 {
  background-color: #c1ceac;
  opacity: 85%;
}

.crdbkgrnd04 {
  background-color: #D09259;
  opacity: 85%;
}

.crdbkgrnd05 {
  background-color: #001233;
  opacity: 75%;
}

.crdbkgrnd06 {
  background-color: #B29B00;
  opacity: 75%;
}




/* the following creates the borders and background for Info cards */
.io-info-card {
  border-top-left-radius: 17px;
  border-bottom-left-radius: 17px;
  border-top: 1px solid #fffafa;
  /* Snow */
  border-right: 0px solid #fffafa;
  /* Snow */
  border-bottom: 1px solid #fffafa;
  /* Snow */
  border-left: 1px solid #fffafa;
  /* Snow */
  color: #fffafa;
  /* Snow */
  background-color: rgba(0, 0, 0, 0.85);
  /* #00000 */
}

.io-more-tab {
  border-left: 1px solid #fffafa;
  /* Snow */
}

.io-tips {

  padding: 5px !important;
  margin-left: 0px;
  margin-right: 8px;
  margin-top: 8px;
  margin-bottom: 8px;

}


/* Stamp Cards Styling */
/* ********************************** */
/* Stamp Card and Stamps Theme */

/* the following creates the borders for the full loyalty stamp cards */
.stampCrd {
  border: 3px solid #ffffffc5;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-right: 2px solid transparent;
  background-color: rgba(208, 146, 89, 0.85);
  /* Hex: #D09259  http://hex2rgba.devoth.com/ */
}


.stamped {
  border-radius: 17px;
  border: 2px solid #78380C;
  background-color: #C8691C;

}

.unstamped {
  border-radius: 17px;
  border: 2px solid #E4CEAF;
  color: #fffff3;
  background-color: rgba(200, 105, 28, 0.15);
  /* Hex: #C8691C  http://hex2rgba.devoth.com/ */

}

.io-vendor {
  color: #F0F8FF;
  /* Alice Blue */
  text-transform: uppercase;
  font-size: 20px;
  text-overflow: ellipsis;
  max-width: 100ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.io-stat {
  color: #F8F8FF;
  /* Ghost White */
  font-size: 0.9em;
}

.io-instruction {
  color: #F0F8FF;
  font-size: 1.1em;
}


.io-option {
  color: #F0F8FF;
  font-size: 1.1em;
}






/* Pop up and Modal Headers  */
/* ********************************** */
/* sets background circle for close button in popup or modal info screens */
div.close-x {
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgb(246, 147, 51, 0.5);
  /* is Hex f69333 */
  color: #fff;
  /* white */
  text-align: center;
  align-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #FAF9F6;/ *Off Wite */ -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

div.close-x-r>img {
  max-height: 40%;
  max-width: 40%;
}

/* Styling for Pop Up Header - Help Screen*/
.mod-k-header {
  background: #f69333;
  /* Pin Palette Orange*/
  color: #FCF2EC;
  /* Random Shades */
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border: 3px solid #FAF9F6;
  color: #F0F8FF;
  /* Alice Blue */
}

/* Styling for Pop Up - FAQ Screen */
.mod-f-header {
  background: #B5ACA6;
  /* Shades Grey*/
  color: #FCF2EC;
  /* Random Shades */
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border: 3px solid #FAF9F6;
  color: #F0F8FF;
  /* Alice Blue */

}

.mod-f-sections {
  border-bottom: 0px solid #859ca5;


}



.mod-f-title {

  background: #B5ACA6;
  /* Shades */

  color: #FFFFFF;
  /* Pure White */

}

.mod-f-close {
  color: #FFF6EA;
  /* Discreet Palette */
  background: #8E8680;
  /* Discreet Palette */

  margin-right: 10px;
  margin-top: 5px;
}