/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Anton&display=swap');

@font-face {
    font-family: 'Rubik';
    src: local('Arial'), url('./../fonts/rubik/Rubik-Regular.ttf');
}


/* Font Family Override */
html, body {
  font-family: 'Lato', 'Helvetica Neue', sans-serif;
  color: #1B2C38;
  overflow-x: hidden;
  max-width: 100%;
}
/* Ensure the center block expands and centers between brand and end */
.navbar .navbar-start.is-flex-grow-1 {
  flex-grow: 1;
}
/* Headings */
h1, h2, h3, h4, h5 {
  /*font-family: 'Anton', sans-serif;*/
  color: #121e2c; /* primary dark */
}
.button1 {
  background-color: rgba(55, 119, 255, 1.0);
}
.button2 {
  background-color: #5784f5;
}
.button3 {
  background-color: #5c8ffb;
}

.button4 {
  background-color:#789bf3;
}
.sidebuttons{
  background-color: #dbe6ff;
	color: #040914!important;
	border: solid #c5cfe7 1px;	
}
.navbar-brand{
	flex: 0 0 230px;
}
.button1,.button2,.button3,.button4{
	padding: 1rem 2rem !important;
    transition: background 0.3s ease;
	margin-bottom:.5px;
}
.button1:hover,.button2:hover,.button3:hover,.button4:hover,.tall-button:hover {
	background-color: #1c2d3a !important;
    text-decoration: none !important;
}
  .tall-button {
    height: 100%;
    padding: 2rem 1rem;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
	border-radius: 0;
  }
.level-item.has-text-left{
	    justify-content: left;
}

.custom-gap .column {
  margin-right: 1px!important;
}

.custom-gap .column:last-child {
  margin-right: 0 !important;
}


  .goldtext {
    color: gold;
  }

  .gunmetal-overlay {
    background-color: #3777ff;
    color: white;
  }

  .tall-button img {
    margin-bottom: 0.5rem;
  }
/* ===== MakeArt Button Redesign (Overrides for Bulma-style names) ===== */
.tag:link{
	cursor:pointer;
}
/* Background colors here */
.body-background {
    background-color: white !important;
}

.has-background-banner1{
    background-color: #f06192 !important;
}

.has-background-banner2 {
    background-color: #e2d5d3 !important;
}


.goldtext {
	color:#fff !important;
}
.has-background-banner4 {
    background-color: #cbd6f8 !important;
}

.has-background-main {
color:#141e2a !important;
}


/* primary button scheme */
.has-background-button1{
    background-color: #87a0e7;
    color: white;
}

.has-background-honey {
    background-color: #F7B32B !important;
}
.formmax{
	max-width: 1000px !important;
}
/* black color for overlay */

.gunmetal {
    background-color: #84965D !important;
}

.gunmetal-overlay {
    background-color:#4f7fe3;
}

/* other bits of extra css that are needed for various page */

/* min height on body for consistancy */
.main-content{
    min-height: 50vh;
}

.quantity-max-width {
    max-width: 15rem;
}

.red-cross {
    background-color: rgba(250, 0, 0, 0.4);
}

img[name="teaser_image_preview"] {
  max-width: 300px;
  max-height: 200px;
  border: 1px solid #ccc;
  margin-top: 10px;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-loader {
  position: absolute;
  top: 0;
  left: 0;
  background: #f0f0f0;
  color: #999;
  padding: 0.5em;
  font-size: 0.9em;
}
.inline-img {
  max-width: 100%;
  display: block;
}
.navbar-link:not(.is-arrowless)::after {
    border-color: #3777ff;
}
.teaser-preview-img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.navbar-item img {
    /* max-height: 100px; */
}
item.has-dropdown:hover .navbar-link {
        background-color: red !important;
    }
/* Base modern button style */
.button {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  font-family: 'Lato', sans-serif;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-decoration: none;
}

/* Primary (Dark Navy) */
.button.is-primary {
  background-color: #121e2c;
  color: white;
}
.button.is-primary:hover {
  background-color: #1b2e40;
  transform: translateY(-1px);
}

/* Link (Deep Blue) */
.button.is-link {
  background-color: #0e1e2b;
  color: #fff;
}
.button.is-link:hover {
  background-color: #1c2e3b;
  transform: translateY(-1px);
}

/* Info (Mid Gray) */
.button.is-info {
  background-color: #dddddb;
  color: #121e2c;
}
.button.is-info:hover {
  background-color: #c5c5c3;
}

/* Success (Warm Green Accent) */
.button.is-success {
  /*background-color: #788854;*/
	background-color:#3777ff;
  color: #fff;
}
.button.is-success:hover {
  background-color: #78aa88;
}

/* Warning (Golden Sand) */
.button.is-warning {
  background-color: #ff7e37;
  color: #ffffff;
}
.button.is-warning:hover {
  background-color: #c3b79f;
}

/* Danger (Rich Red) */
.button.is-danger {
  background-color: #ff3777;
  color: #fff;
}
.button.is-danger:hover {
  background-color: #a63126;
}

/* Light (Off-White Gray) */
.button.is-light {
  background-color: #f4f4f4;
  color: #121e2c;
}
.button.is-light:hover {
  background-color: #e0e0e0;
}

/* Dark (Muted Navy) */
.button.is-dark {
  background-color: #0f1f2c;
  color: #fff;
}
.button.is-dark:hover {
  background-color: #1a2a37;
}

/* Navbar */
.navbar {
  background-color: #121e2c;
}
.navbar-item,
.navbar-link {
  color: white;
}

.navbar-dropdown {
   background-color: #1B2C38 !important;
}


.navbar-item, .navbar-link {
	color: #eaeaea !important;
}
.navbar-item:hover, .navbar-link:hover {
	color: #fff !important;
}
/* Hero Section */
.hero.is-primary {
  background-color: #121e2c;
  color: white;
}

/* Cards */
.card {
  background-color: #dddddb;
}
.card-header,
.card-footer {
  background-color: #121e2c;
  color: white;
}

/* Background helpers */
.has-background-primary {
  background-color: #121e2c !important;
  color: white !important;
}
.has-background-light {
  background-color: #dddddb !important;
}
.has-background-dark {
  background-color: #0e1e2b !important;
  color: white !important;
}

/* Text color helpers */

.has-text-primary {
    color: #3777ff !important;
}
.has-text-light {
  color: #dddddb !important;
}
.has-text-dark {
  color: #0e1e2b !important;
}
.footer {
 background-color: #EAEAEA !important;
	color:#141e2a;
}
  
.iconhome{
	margin-bottom:-10px;
	margin-right:5px;
}
body {
      font-family: 'Lato', sans-serif;
      background-color: #f5f5f5;
    }
.tag:not(body).is-rounded {
    cursor: pointer;
}
/* home logo size */

.tag:not(body).is-primary {
    background-color: #af883a;
}

a {
    color: #141e2a;
    cursor: pointer;
}

a:hover {
	text-decoration:underline;
}
.navbar-link:hover{
	text-decoration:none;
}
.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
    background-color: #141e2a;
}

.is-info{
	background-color:#35b6f2 !important;	
	color:#fff !important;
}

.has-background-banner3 {
   background-color:#eaeaea!important;
	color:#141e2a !important;
}
.notification.is-info.is-light {
	color:#fff !important;
}

.button{
	text-decoration:none !important;
}

.greentext{
	color:#121e2c !important;
}
.bluetext{
	color:#3777ff;
}

.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
    background-color: #334d6c;
	color:#fff;
		text-decoration:none;;
    }
	  .menu-list,
	  .menu-list li {
		list-style: none !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
    	font-family: 'Lato', sans-serif;
   		 font-weight: 400;
	  }

	  .menu-list li::marker {
		display: none;
	  }

	  .menu-list a {
		display: block;
		padding: 8px 12px;
	  }
	  .menu-list a {
		font-family: 'Lato', sans-serif;
		font-weight: 400;
  	}

	 .menu-list li.is-active > a {
		color: #000000 !important;
		background-color: transparent;
		font-weight: 700 !important;
	  }

	#couponPreview {
      padding: 20px;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      overflow: hidden;
      background-color: transparent;
      transition: all 0.3s ease;
    }
    #couponPreview * { color: inherit !important; }
    .placeholder { color: #999 !important; }
    .editing-box { outline: 2px dashed #3273dc; outline-offset: 4px; border-radius: 4px; }
    .coupon-container { display: flex; align-items: center; justify-content: flex-start; height: 80vh; flex-wrap: wrap; }
    #dateDisplay { padding-left: 0.5rem; text-decoration: underline dotted; cursor: pointer; }
    #editableDate { display: none; }

    .bg-bg1 { background-image: url('https://www.makeart.au/deb/coupons/assets/burntback.jpg'); color: #fff !important; }
    .bg-bg11 { background-image: url('https://www.makeart.au/deb/coupons/assets/back1.jpg'); color: #fff !important; }
    .bg-bg2 { background-image: url('https://www.makeart.au/deb/coupons/assets/back2.jpg'); color: #fff !important; }
    .bg-bg3 { background-image: url('https://www.makeart.au/deb/coupons/assets/back3.jpg'); color: #fff !important; }
    .bg-bg4 { background-image: url('https://www.makeart.au/deb/coupons/assets/saleback.jpg'); color: #fff !important; }
    .bg-bg5 { background-image: url('https://www.makeart.au/deb/coupons/assets/10offback.jpg'); color: #fff !important; }
    .bg-bg6 { background-image: url('https://www.makeart.au/deb/coupons/assets/20offback.jpg'); color: #fff !important; }
    .bg-bg7 { background-image: url('https://www.makeart.au/deb/coupons/assets/30offback.jpg'); color: #fff !important; }
    .bg-bg8 { background-image: url('https://www.makeart.au/deb/coupons/assets/50offback.jpg'); color: #fff !important; }
    .bg-bg9 { background-image: url('https://www.makeart.au/deb/coupons/assets/freeback.jpg'); color: #fff !important; }
    .bg-light { background-color: #f8f8f8; color: #333 !important; }

.borderit{
			background:white;
			padding:5%;
			box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
			max-width: 1100px !important;
			border:  solid 1px #999;
		}

.onboarding-tooltip {
  position: absolute;
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  max-width: 300px;
  font-family: system-ui, sans-serif;
}

.onboarding-tooltip .onboarding-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.onboarding-tooltip .onboarding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.onboarding-tooltip button {
  padding: 0.4rem 0.75rem;
  margin-left: 0.5rem;
  border: none;
  background: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.onboarding-tooltip button.onboarding-skip {
  background: #6c757d;
}

.onboarding-tooltip button:hover {
  opacity: 0.9;
}


.onboarding-tooltip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}


.onboarding-tooltip[data-placement^='top']::after {
  bottom: -10px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #fff;
}

.onboarding-tooltip[data-placement^='bottom']::after {
  top: -10px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #fff;
}

.onboarding-tooltip[data-placement^='left']::after {
  right: -10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #fff;
}

.onboarding-tooltip[data-placement^='right']::after {
  left: -10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #fff;
}


.onboarding-tooltip[data-placement^='top']::after,
.onboarding-tooltip[data-placement^='bottom']::after {
  left: 50%;
  transform: translateX(-50%);
}

.onboarding-tooltip[data-arrow-align='left'][data-placement^='top']::after,
.onboarding-tooltip[data-arrow-align='left'][data-placement^='bottom']::after {
  left: 1rem;
  transform: none;
}

.onboarding-tooltip[data-arrow-align='right'][data-placement^='top']::after,
.onboarding-tooltip[data-arrow-align='right'][data-placement^='bottom']::after {
  left: auto;
  right: 1rem;
  transform: none;
}


.onboarding-tooltip[data-placement^='left']::after,
.onboarding-tooltip[data-placement^='right']::after {
  top: 50%;
  transform: translateY(-50%);
}

.onboarding-tooltip[data-arrow-align='top'][data-placement^='left']::after,
.onboarding-tooltip[data-arrow-align='top'][data-placement^='right']::after {
  top: 1rem;
  transform: none;
}

.onboarding-tooltip[data-arrow-align='bottom'][data-placement^='left']::after,
.onboarding-tooltip[data-arrow-align='bottom'][data-placement^='right']::after {
  top: auto;
  bottom: 1rem;
  transform: none;
}



/* for smaller device will use this rule instead */
@media (max-width: 800px) {
}

    @media screen and (max-width: 768px) {
      #couponPreview { width: 100% !important; height: auto !important; }
    }
/* for bigger device will use this rule instead */
@media (min-width: 1700px) {   
}

@media screen and (min-width: 1024px) {
    .navbar-item.has-dropdown.is-active .navbar-link, .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link {
       background-color:#141e2a;
    }
	 .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
        background-color: #141e2a;
        color: #fff;
    }
	 .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
        background-color: #334d6c;
		text-decoration:none;;
    }
	
	.overlap-desktop {
		margin-top: -40px !important;
		position: relative;
		z-index: 10;
  	}
	.navbar.is-spaced {
        padding: 0 2rem !important;
    }
	.navbar-item {
        font-size: .8em !important;
    }
}


@media screen and (min-width: 769px), print {
    .hero.is-medium .hero-body {
       padding: 5em !important;
    }
}

@media print {
  .noprint{
    display: none !important;
  }
}