/*
Theme Name: MOBILEIV
Theme URI: 
Author: 
Description:
Version: 1.01

*/


/*FONTS*/

@font-face {font-family: 'Suisse Int'; src: url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.woff2') format('woff2'),url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.woff') format('woff'),url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.svg#Suisse-Int') format('svg');font-weight: 500; font-style: normal; font-display: swap;}


@font-face {font-family: 'GentlemensScript';src: url('/wp-content/themes/Divi-child/fonts/GentlemensScript.woff2') format('woff2'),url('/wp-content/themes/Divi-child/fonts/GentlemensScript.woff') format('woff'),url('/wp-content/themes/Divi-child/fonts/GentlemensScript.svg#GentlemensScript') format('svg');font-weight: normal;font-style: normal;font-display: swap;}


.sm-text {display: block; font-size: var(--xxsmall); line-height: 1.3; font-weight: normal;}
.med-text {display: block; font-size: var(--xxmedium); line-height: 1.4}
.lrg-text {display: block; font-size: var(--medium); line-height: 1.4}


h1, h2, h3, h4, h5, h6 { z-index: 2; margin: 0; line-height: 1}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none; color: var(--white) !important;}
h1 {  font-size: var(--xxlarge); font-family: 'freightbigcmp-pro', serif; letter-spacing: -2px; font-weight: normal }
h2{ font-size: var(--large); font-family: 'freightbigcmp-pro', serif;  letter-spacing: -1px; font-weight: normal }
h3{ font-size: var(--medium); font-family: 'freightbigcmp-pro', serif;  letter-spacing: -1px; font-weight: normal; }
h4{ font-size: var(--xmedium); font-family: 'freightbigcmp-pro';  letter-spacing: 0px; font-weight: normal;}
.h4-style {font-size: var(--xmedium); font-family: 'freightbigcmp-pro'; letter-spacing: 0px; font-weight: normal; line-height: 1;}
h5{ font-size: var(--small); font-family: 'freightbigcmp-pro';  letter-spacing: -0.5px; font-weight: normal}
h6{ font-size: var(--xxsmall); font-family: 'Suisse Int'; font-weight: normal}
body,p{ font-size: var(--xxsmall); font-family: 'Suisse Int'; font-weight: 300}
span {font-size: var(xx-small); font-family:'Suisse Int'; font-weight: 300}


/*GENERIC CSS*/

html {scroll-behavior: smooth; -webkit-font-smoothing: antialiased !important;}
body { margin:0; padding:0 }
::selection { background: var(--primary); color: var(--black) }

.container { position: relative; height: 100%; max-width: 100% !important; width: 100%;}
.row { height: 100%; position: relative;}
.row-width-70 { width: 70%;  margin: 0 auto;}
.row-width-80, .row-width { width: 80%;  margin: 0 auto;}
.row-width-90 { width: 90%; max-width: 90%; margin: 0 auto;}
.full-width { width: 100%;  margin: 0 auto;}

.col1{width: 8.33%;}
.col2{width: 16.66%;}
.col2-5{width: 20.00%}
.col3{ width: 25%;}
.col4{width: 33.33%;}
.col5{width: 41.33%;}
.col6{width: 50%; position: relative;}
.col7{width: 58.33%;}
.col8{width: 66.66%;}
.col9{width: 75%;}
.col10{width: 83.88%;}
.col11{width: 91.66%;}
.col12{width: 100%;}

.height-0 { height:0vh; box-sizing: border-box;}
.height-20 { height:20vh;box-sizing: border-box; }
.height-40 { height:40vh;box-sizing: border-box; }
.height-60 { height:60vh;box-sizing: border-box; }
.height-80 { height:80vh;box-sizing: border-box; }
.height-100 { height:100vh; box-sizing: border-box; }
.height-auto { height: auto; }

.flex-row {display: flex;flex-direction: row;}
.flex-column { display: flex; flex-direction: column;}
.justify-center { display: flex; align-items: center; justify-content: center; }
.justify-bottom { justify-content: flex-end;}

.flex-wrap {flex-wrap: wrap}
.align-center  {align-items: center; }
.justify-left {  justify-content: left }
.justify-right { justify-content: right }
.align-top { align-items: flex-start; }
.align-bottom { align-items: flex-end;}
.align-left {  align-items: flex-start }
.align-right {  align-items: flex-end;}
.justify-spaced { justify-content: space-between;}
.text-center { text-align:center;}
.text-right { text-align:right;}
.text-left { text-align:left;}

.overflow-hidden{overflow:hidden}

.padding-0 {padding:0 !important}
.padding-b-0 {padding-bottom: 0px}
.padding-t-0 {padding-top: 0px}
.padding-10 {padding:10px 0}
.padding-b-10 {padding-bottom: 10px}
.padding-t-10 {padding-top: 10px}
.padding-20 {padding:20px 0}
.padding-b-20 {padding-bottom: 20px}
.padding-t-20 {padding-top: 20px}
.padding-40 {padding:40px 0}
.padding-b-40 {padding-bottom: 40px}
.padding-t-40 {padding-top: 40px}
.padding-60 {padding:60px 0}
.padding-b-60 {padding-bottom: 60px}
.padding-t-60 {padding-top: 60px}
.padding-80 {padding:80px 0}
.padding-b-80 {padding-bottom: 80px}
.padding-t-80 {padding-top: 80px}
.padding-100 {padding:100px 0}
.padding-b-100 {padding-bottom: 100px}
.padding-t-100 {padding-top: 100px}
.padding-120 {padding:120px 0}
.padding-b-120 {padding-bottom: 120px}
.padding-t-120 {padding-top: 120px}
.padding-140 {padding:140px 0}
.padding-t-140 {padding-top:140px}
.padding-b-140 {padding-bottom:140px}
.mobile { display:none; }

.gap-0 {gap:0 !important}
.gap-1 {gap:8.33%}
.gap-5 {gap:5px}
.gap-10 {gap:10px}
.gap-20 {gap:20px}
.gap-40 {gap:40px}
.gap-60 {gap:60px}
.gap-80 {gap:80px}
.gap-100 {gap:100px}
.gap-120 {gap:120px}
.gap-140 {gap:140px}

.margin-auto { margin:0 auto; }
.margin-0 {margin:0 !important}
.margin-b-0 { margin-bottom: 0; }
.margin-t-0 { margin-top: 0; }
.margin-10 {margin:10px !important}
.margin-b-10 { margin-bottom: 10px; }
.margin-t-10 { margin-top: 10px; }
.margin-20 {margin:20px 0}
.margin-b-20 { margin-bottom: 20px; }
.margin-t-20 { margin-top: 20px; }
.margin-40 {margin:40px 0}
.margin-b-40 { margin-bottom: 40px; }
.margin-t-40 { margin-top: 40px; }
.margin-60 {margin:60px 0}
.margin-b-60 { margin-bottom: 60px; }
.margin-t-60 { margin-top: 60px; }
.margin-80 {margin:80px 0}
.margin-b-80 { margin-bottom: 80px; }
.margin-t-80 { margin-top: 80px; }
.margin-100 {margin:100px 0}
.margin-b-100{ margin-bottom: 100px; }
.margin-t-100 { margin-top: 100px; }
.margin-120 {margin:120px 0}
.margin-b-120  { margin-bottom: 120px; }
.margin-t-120  { margin-top: 120px; }

.hide { display:none; transition: opacity 0.7s ease-in; opacity: 0;}

.image-fill {object-fit: cover; object-position: center;}

a, button, .text-link { cursor: pointer;}
a:hover { text-decoration: none}
a:visited {color:var(--white)}
footer a:visited {color:lightblue !important}

iframe {border: 0;  display: block;}

img {width: 100%;}
li, ul {list-style: none; padding: 0;}




/* COLOURS */
:root {
  --white: #ffffff; 
  --black: #1E1E1E;
  --primary: #F1F9FC;
  --secondary: var(--black);
  --tertiary: #282828;
  --quartiary:#EEEDED; 
  --xxlarge: 95px; 
  --xlarge: 65px; 
  --large: 55px; 
  --medium: 42px; 
  --xmedium: 32px;
  --xxmedium: 26px; 
  --small: 16px; 
  --xsmall: 14px;
  --xxsmall: 12px; 
  --micro: 10px; 
}
.white, .white p { color: var(--white);}
.whitebg { background: var(--white);}
.black, .black p { color: var(--black);}
.blackbg { background: var(--black);}
.primary, .primary p { color: var(--primary);}
.primarybg { background: var(--primary);}
.secondary, .secondary p { color: var(--secondary);}
.secondarybg { background: var(--secondary);}
.tertiary, .tertiary p { color: var(--tertiary);}
.tertiarybg { background: var(--tertiary);}
.quartiary, .quartiary p { color: var(--quartiary);}
.quartiarybg { background: var(--quartiary);}

a, a:visited, a:hover, a:active {
    color: lightblue !important;
    text-decoration: none !important;
}


/* Location Page Accordion */
.accordion {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: none !important;
    border-radius: 5px;
    overflow: hidden;
}
/* Input */

input.text, input.title, input[type=email], input[type=password],input[type=number], input[type=tel], input[type=text], select, textarea {background-color: var(--white); ;padding: 15px 20px !important; border-radius: 0; -webkit-appearance: none; box-sizing: border-box;  border:0; letter-spacing: 0px; font-size: 12px;  width: -webkit-fill-available;}
input:focus-visible, input:focus, input:active {outline: none; border: 1px solid var(--primary) important; border-style: none none solid;}


/*ACCORDION*/

.accordion-item {
    border: none !important; /* Remove borders */
    background: transparent !important; /* Make it blend */
    padding: 10px 0; /* Adjust spacing */
    text-align: center; /* Keep the natural flow */
}

.accordion-header {
    font-size: var(--large); /* Match other section titles */
    letter-spacing: 1px; /* Subtle spacing for elegance */
    font-weight: 400; /* Softer weight */
    background: transparent !important; /* Remove button-like background */
    border: none !important; /* Hide borders */
    padding: 20px 20px; /* More whitespace */
    text-align: center; /* Align it like a headline */
}
.accordion-header:hover {
    cursor: pointer;
}

.accordion-content {
    display: none; /* Hides content by default */
    font-size: var(--small); /* Keeps it subtle */
    color: var(--quartiary); /* Make it blend */
}

.accordion-header.active + .accordion-content {
    display: block;
}
.accordion-module {
    margin-bottom: -160px !important; /* Pull it up closer */
    padding-bottom: 0 !important; /* Remove extra padding */
}

.accordion {
    padding-bottom: 50px !important;
}


/* BUTTONS */

.button-wrapper {z-index: 9;position: relative;}

.primary-button { cursor: pointer; background: var(--black); border-color: lightblue !important; text-decoration: none; color: lightblue !important; padding: 11px 20px;  border-radius: 20px; box-sizing: border-box; transition: 0.3s ease all; }
.primary-button:hover {transition: 0.3s ease all; text-decoration: none; color: var(--black)!important; color:lightblue !important;}
.primary-button a {}
.primary-button:before {content: "";position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius:20px;box-shadow: 0 0 10px #abd6e4; opacity: 0.1;transition: opacity 0.3s ease-in-out;pointer-events: none;}

.book-trigger { border: 1; border-color: lightblue !important; color: lightblue !important; padding:11px 50px;}
.book-trigger:focus, 
.book-trigger:hover {background-color: #abd6e420; color:lightblue !important;}
.book-trigger:active {border: 1px lightblue !important ;box-shadow: none!important;outline: none !important; padding:11px 50px;}

.secondary-button { cursor: pointer; }
.secondary-button:hover {}
.secondary-button a {}

.tertiary-button { cursor: pointer; }
.tertiary-button:hover {}
.tertiary-button a {}

.vip-trigger { border: 1; border-color: lightblue !important; color: lightblue !important; padding:11px 50px;}
.vip-trigger:focus, 
.vip-trigger:hover {background-color: #abd6e420; color:lightblue !important;}
.vip-trigger:active {border: 1px lightblue !important ;box-shadow: none!important;outline: none !important; padding:11px 50px;}


/* MENU */

header {width: 100vw;margin: 0 auto;padding: 0;z-index: 100;position: fixed;top: 0;left: 0;right: 0;background: transparent;box-sizing: border-box;overflow: hidden; height: auto;}
header .row {padding: 15px 0 ; justify-content: space-between;}
header.scroll {top: -200px !important;transition: 0.3s ease all;}
.scroll .hamburger-inner, .scroll .hamburger-inner::before, .scroll .hamburger-inner::after {background: var(--primary)!important;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background: lightblue !important;}
.hero {position: relative;}
.menu { display: flex;padding: 15px 0;margin: 0;justify-content: center; align-items: center;}
.menu-item {margin: 0 7px; position: relative;}
.menu-item:hover {text-decoration: underline;}
.current-menu-item a {text-decoration: underline;}
.menu-item a {color: var(--black);padding: 10px 0; text-decoration: none;font-size: var(--xxsmall);}
.menu-item .active:after {display:none;}
.menu-item-has-children {margin-right: 20px;} 
.menu-item-has-children::after {content: '';position: absolute;right: -12px;  width: 0; height: 0; top: 0;bottom: 0;border-right: transparent 4px solid; border-left: 4px solid transparent; border-top: 4px solid var(--darkblue); margin: auto;}
.menu-item-has-children:hover::after {border-top: 0px solid transparent; border-bottom: 4px solid var(--primary);}

.sub-menu {display: none;}
.sub-menu.active { position: absolute;top: 25px; display: block; z-index: 9999; background: var(--white); padding: 5px 0;}
.sub-menu .menu-item { width: max-content; padding: 10px;}
.sub-menu .menu-item:hover {text-decoration: underline;}

.logocontainer { width: 250px;  position: absolute; left: 0; right: 0; margin: auto; top: 60px; z-index: 99;}
.sitelogo {transition: opacity 0.7s ease-in;}
.sitelogo svg {width: auto; height: 60px;}

.secondary-menu {width: auto;align-items: center;}
.mobilemenu {position: relative; display: flex;flex-direction: row-reverse; padding: 10px;box-sizing: border-box;border-radius: 10px;right: 0 !important;}

.menuslide { display: none; align-items: baseline;justify-content: center;}
.menuslide.active {  background: #ffffffb3;backdrop-filter: blur(4px); padding: 0px 40px 100px; position: fixed;top: 0; right: 0; width: 25vw; height: 100vh;z-index: -1; display: flex;flex-direction: column;justify-content: flex-end;}
.menuslide .feature a { color: var(--black) !important;}
.menuslide .menu { display: flex; flex-direction: column;align-items: flex-start;}
.menuslide .menu-item { margin: 0;position: relative; border-top: 1px solid var(--black);border-radius: 0;  width: 100%; background: transparent !important; padding: 0 !important}
.menuslide .menu a {display: flex;font-family: 'freightbigcmp-pro';font-size: var(--large);color: var(--black) !important;box-sizing: border-box; line-height: 1;}

.menu-item a { font-size: var(--xxsmall);}

.menuslide .feature:nth-child(1) a { color: var(--black) !important }



.main-navigation { background: #ffffff8c; border-radius: 5px;padding: 0 20px; backdrop-filter: blur(2px);}

/* Password */
.protected header {display: none;}
.password {width: 500px;height: fit-content; position: absolute; left: 0; right: 0; top: 0;bottom: 0; margin: auto;}
.password .row {padding: 20px; border-radius: 4px;}
.post-password-form { margin:0 }
.post-password-form p { margin:0 }
.post-password-form p:first-of-type {display: none;}
.post-password-form label input { margin-top:10px; }
.post-password-form input[type="submit"] {  margin-bottom: 0px;padding: 10px 20px; width: 100%; border-radius: 20px; border: 0;}
.post-password-form input { margin-bottom: 10px; border-radius: 20px;height: 40px;}
.password h5 { margin-bottom:10px }
.password h6 { margin-bottom:20px }


/* Announcement */
.announcement-title a { color: var(--black); }


/* Home Page */
.hero-module {
  position: relative;
  min-height: 100vh;
  overflow: visible;
}
.hero-module:before {
  content: '';
  background: linear-gradient(0deg, var(--secondary), transparent);
  width: 100%;
  height: 100%; /* Full height */
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}


.page-container {
  position: relative;
  max-width: 100vw;
  overflow: visible;
}
.page-container:after {content: none;}
.hero-content {padding-top:100px !important;}
.hero-content-wrapper { position: relative; z-index: 9;}
.hero-content-wrapper h1 { text-shadow: 0px 0 27px #000; line-height: 0.9;}
.hero-underlay {position: absolute;width: 100%;height: 100%;padding: 20px;top: 0;left: 0;}

.intro-module {position: relative;}
.booking-module { position: relative; }
.booking-module .full-width { height: fit-content;display: flex;}
.sbi_item {border-radius: 10px; pointer-events: none}


/* Introduction */
.introduction-content .med-text {font-family: 'freightbigcmp-pro'; font-size: var(--xxmedium); line-height: 1;}


/* Booking Module */
.booking-module {min-height: auto !important}
.booking-toggles, .booking-form, .booking-actions-wrapper {width: 100%;}
.booking-actions-wrapper.hidden {display: none;}
.booking-actions-wrapper.active {display: flex;}
.booking-action-wrapper { display: none;}
.booking-action-wrapper.active {display: flex; width:100%}
.booking-module-container {background: #282828ad; height: auto; min-height: auto !important; backdrop-filter: blur(4px); padding: 20px !important; border-radius: 10px;}
.booking-actions select {background: transparent !important;border: 1px solid lightblue !important; padding: 10px !important;}
.booking-actions select.active { display: block;}
.booking-actions select.hidden { display: none;}
button.tab {padding: 10px 20px; width: 100%;color: var(--quartiary); border: 1px solid var(--quartiary);border-radius: 20px;letter-spacing: 0;transition: 0.3s ease all;background-color:#282828ad;}
button.tab.active { background: transparent; color: lightblue; border: 1px solid lightblue; transition: 0.3s ease all }
button.tab:hover {background: var(--primary);color: #282828; border-color: #282828; transition: 0.3s ease all;}
.booking-actions {position: relative;display: flex;flex: 1 0 0; max-width: 60%;}
.action-title {min-width: 100px;color: var(--primary); border-color: var(--primary);text-align: left;}
.input.text {color: var(--white)!important}
.booking-actions {position: relative;display: flex;flex: 1 0 0; max-width: 60%;}
.action-title {min-width: 100px;color: var(--primary); border-color: var(--primary);text-align: left;}
.input.text {color: var(--white)!important}

/* Estimator */
.estimator-row-one {width: 100%; padding-bottom: 20px;border-bottom: 1px solid var(--quartiary);}
.estimator-row-two {width: 100%; padding-bottom: 20px;border-bottom: 1px solid var(--quartiary);flex-wrap: wrap;}
.estimator-row-three {flex-wrap: wrap;}
.estimator-content-description, .estimator-content-description * { font-size: 14px; line-height: 14px; color: #000000;}
.estimator-types {display: none;}
.estimator-types.active { display: flex;}
.choice {background: #282828ad;border: 1px solid #EEEDED; text-align: center; transition: 0.3s ease all; border-radius: 20px; color: #EEEDED;padding: 6px 10px !important; min-width: 140px;}
.choice.active {background-color: #282828; border-color: lightblue; color: lightblue; transition: 0.3s ease all;}
.choice:hover {background: var(--primary);color: #282828; border-color: #282828; transition: 0.3s ease all;}
.estimator-quote {background: #282828; height: auto; min-height: auto !important; backdrop-filter: blur(4px); padding: 20px !important; border-radius: 10px; width:-webkit-fill-available;}
.estimator-label {  white-space: nowrap; font-family: 'freightbigcmp-pro';font-size: var(--xxmedium); width: fit-content; color: var(--white); margin-bottom:10px;}
.estimator-addons {}
.estimator-content .xsm-text {color: #EEEDED;line-height: 1.5;width: 75%;}
.estimator-row-total {width: 100%;margin: 20px 0 0;border-top: 1px solid lightblue;padding: 20px 0 0;}
.totals-wrapper { flex: 1;}
.total-cost {font-size: var(--large); color: lightblue; font-family: 'freightbigcmp-pro';margin: -28px 0 0 0;background: transparent;}
.estimator-summary {width: 100%; color:lightblue !important}


/* Popup styling */
#booking-popup-overlay {display: none;position: fixed !important;top: 50%!important;left: 50%!important;transform: translate(-50%, -50%)!important;z-index: 9999 !important;background: white;border-radius: 8px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);width: 80%;max-width: 400px;padding: 5px;}
#booking-popup { position: relative;}
#booking-popup iframe {width: 100%;height: 600px; border: none;}
#booking-popup .close-popup {top: 10px;right: 10px;cursor: pointer;font-size: 20px; color: #333; background: none; border: none;}


/* Cursor */
.custom-cursor {position: fixed; width: 100px;height: 100px;border-radius: 50%; background-color: var(--primary); color: var(--black); text-transform: uppercase; display: flex;justify-content: center;align-items: center; font-size: var(--xsmall);pointer-events: none;  z-index: 9999; opacity: 0;  transition: transform 0.1s ease, opacity 0.2s ease;}
.carousel-item:hover ~ .custom-cursor,
.carousel-item:hover + .custom-cursor {opacity: 1; transform: scale(1) rotate(15deg) }
.carousel-item {cursor: none; }

/* Postcode Checker */
.pchecker-wrapper {background: #f9f9f9; padding: 40px; margin-top: 100px; border-radius: 20px; min-height: 600px;}
form#postcode-form {background: transparent; position: relative;flex-direction: column; display: flex; align-items: center;}
.suburb-checker { height: auto; min-height: 80vh; display: flex; align-items: center; justify-content: center;}
.suburb-checker .row {text-align: center; padding: 60px 0; display: flex;  flex-direction: column; gap: 20px; width: 80%; margin: 0 auto;}
.suburb-checker h2 { width: 100%; font-size: 32px; text-center: center;text-transform: uppercase; margin: 0 auto;}
.select2-selection__rendered {text-align: left;}
.ui-widget.ui-widget-content {max-height: 400px; overflow: scroll;}
.media-wrapper {background: white; min-height: 340px; border-radius: 10px;}
#booking-container:empty {height: 0 !important;min-height: 0;transition: 0.5s ease all;}
#booking-container {background: transparent; min-height: 600px; border-radius: 10px; transition: 0.5s ease all; }
.booking-container {display: none; opacity: none; transition: 0.5s ease all; width: 100%; height: 40px; border-radius: 2px; color: #202020; background: #eee; display: flex; align-items: center; justify-content: center;}

.iframe-results{  z-index: 4;}
#postcode-status {display: none;height: 30px;opacity: 0;transition: 0.5s ease all;right: 60px;top: 0;position: sticky; bottom: 0; margin: auto;}
#postcode-status.show-status {display: flex;height: fit-content;opacity: 0.4;transition: 0.5s ease all;right: 60px;top: 0;position: sticky;bottom: 0; margin: auto;}
#postcode-status.deny-status {display: flex;height: fit-content;background: #f17878 !important;color: darkred !important;opacity: 1;transition: 0.5s ease all;right: 60px;top: 0;position: sticky;bottom: 0;margin: auto;padding: 3px 10px; border-radius: 20px;}
input.postcode_check_input { flex: 1;  color: var(--tertiary); border: 0; border-radius: 30px; margin-bottom: 0 !important;width: 100%;   position: relative; background: var(--white); letter-spacing: 0;}
input.postcode_check_input:placeholder { color: #282828!important }
.select2-selection--single {border: 0 !important; min-height: 36px; padding: 5px; height: auto !important;}
button#submit-postcode {background: lightgrey;color: grey; cursor: default; opacity: 0; padding: 0;border: 0;border-radius: 21px;right: 8px;top: 0;bottom: 0;display: flex;width: 35px;height: 35px;position: sticky;margin: auto;align-items: center;justify-content: center;padding: 8px;box-sizing: border-box;transition: 0.3s ease all}
button#submit-postcode:hover {background: var(--black); opacity: 0; transition: 0.3s ease all;}
button#submit-postcode svg path {stroke: var(--primary); opacity: 0; transition: 0.3s ease all;  stroke-width: 1.5px;}
button#submit-postcode:hover svg path  {stroke: lightblue; opacity: 0; transition: 0.3s ease all}

.submit { opacity:1; visibility: visible; transition:0.3s ease all;width: auto;height: auto;display: flex}
.submit svg {width: 100%;height: fit-content;}
.submit.hidden { opacity:0; visibility: hidden; transition:0.3s ease all;  width: 0;height: 0;}
.success { opacity:1; visibility: visible; transition:0.3s ease all;width: auto;height: auto;display: flex}
.success svg { width: auto; height: 100%;}
.success.hidden { opacity:0; visibility: hidden; transition:0.3s ease all; width: 0;height: 0;}

#postcode-status.show-status {height: 23px;text-align: center;font-size: 12px;}

#postcode-error-message {display: none;width: 100% !important;text-align: center;padding: 12px 15px;font-size: 14px;font-weight: 500;border-radius: 8px;box-sizing: border-box;}

#postcode-error-message.deny-status {background-color: #FFCCCC !important; color: #D8000C !important;border: 1px solid #D8000C !important;margin-top: 10px;}

#postcode-error-message.show-status {background-color: var(--primary) !important;color: #333333 !important;border: 1px solid #C0C0C0 !important;margin-top: 10px;}


/* Image Banner */
.image-banner img {display: block;}

/* Menu Page */
.page-template-page-menu .page-container:after { display:none }

/* FAQ Page */
.page-template-page-faq .page-container:after { display:none }

/* Cities */
.page-template-page-cities .page-container:after { display:none }
.city-item {width: calc(25% - 10px); transition: 0.3s ease all; background: var(--white); border-radius: 10px; padding: 20px;}
.city-item:hover { box-shadow: 0 4px 8px #d0d0d0; transition: 0.3s ease all;}
.city-item a{cursor: pointer}
.city-item h2 a, .city-item h2 {cursor: pointer;font-size: 34px !important;line-height: 1;}
.city-title, .city-title a { font-family: 'freightbigcmp-pro', serif; letter-spacing: -1px;font-weight: normal; font-size: 34px !important;color: var(--black) !important;line-height: 1;padding-bottom: 10px;}
.city-item.coming-soon {pointer-events:none; opacity:0.3;order:2}

/* Modals */
.mfp-content { }
.mfp-close {background: white !important;color: var(--primary) !important; opacity: 1; box-sizing: border-box !important;  top: 20px; right: 20px; border-radius: 26px;}
.mfp-content .gform_wrapper input,
.mfp-content .gform_wrapper textarea,
.mfp-content .gform_wrapper select {
    padding: 12px 15px !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
}
.mfp-content form { }



@media (max-width: 1199px) {
form#postcode-form {flex-direction: column;}
.suburb-checker .row { width: 100%;}
}

/* Menu Module */
.menu-wrapper { width: 100%;}
.menu-line .sm-text {color: var(--quartiary);}

/* Afterpay Banner */
.afterpay-logo {height: 20px;}
.afterpay-logo svg {height: 20px;width: auto;}
.afterpay-logo img {max-width: 150px;max-height: 20px;height: 20px;}

/* FAQ */
.faq-module .container { position: relative; }
.faq-module .container:before {content: ''; background: linear-gradient(0deg, var(--black), transparent); width: 100%; height: 300px; position: absolute; top: 0; left: 0; z-index: 1;}
.faq-row { position: relative; z-index:2; }
.faq-group {display: flex;flex-direction: row; flex-wrap: wrap; gap: 10px 60px; z-index: 9;}
.faq-line { margin-bottom: 20px; width: calc(50% - 30px); z-index:1;display: flex;flex-direction: column; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--quartiary);}
.faq-line h4 {position: relative;font-size: var(--xxmedium);padding-right: 10%;}
.faq-line h4:after { content: '';background: url(https://mobileivdrip.com.au/wp-content/themes/Divi-child/images/next.svg);width: 26px; height: 14px; transform: rotate(0deg); transition: 0.3s ease all;background-size: contain; position: absolute; right: 0; top: 0; bottom: 0; margin: auto;}
.faq-line h4.active:after {content: '';transform: rotate(180deg); transition: 0.3s ease all;}

.faq-line .sm-text { height: 1px; transition: 0.3s ease all; color: transparent; visibility: hidden;}
.faq-line .sm-text.active { height: auto; transition: 1s ease all; color: var(--quartiary); visibility: visible; text-align: justify;}



a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}
.gmnoprint a, .gmnoprint span, .gm-style-cc {display:none;}
.gmnoprint div { background:none !important;}


/* thankyou */
/* Ensure the section container uses flexbox */
.thankyou {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* Centers the text */
.thankyou-wrapper {
    text-align: center;
    width: 100%;
    max-width: 80%;
}

@media (min-width: 728px) and (max-width: 1200px) {
    .page-container:after {
    height: 80vh;
    background-size: 100% !important;
    background-position: center;
    width: 80vw;
    margin: 0 10vw;}
}
@media (max-width: 1200px) {

:root {
    --xxlarge: 55px;
	--large: 50px;
	--medium: 32px;
	--xmedium: 22px;
	--xxmedium: 18px;
	--small: 15px;
	--xsmall: 10px;
	--xxsmall: 10px;
}

.mobile { display:block; }
.desktop { display:none; }

.main-navigation {display: none;}
.menuslide.active {left: 0; width: 100%;}

.hero-content-wrapper h1 {width: 87%;}
.hero-module .fullwidth {height: fit-content; padding: 0px 0;}
.booking-module {min-height: auto !important;width: 100%;}
.booking-toggles {gap: 5px !important;}
.booking-actions {width: 100%;max-width: 100%;gap: 5px !important;}
#booking-popup-overlay {width: 95%;top: 200px;position: fixed;}
.booking-module .flex-row {flex-direction: column; width: 100%; gap: 40px;}
.booking-module .half {background: #202020; padding: 100px 0 0;}
.booking-header {width: 80% !important; margin: 0 auto !important;}
.booking-header .col9 { width: 100%;}
.iframe-results iframe { padding-top: 40px;}


.hero-content {width: 90%;}
.hero-content {padding-top:0px !important;}
.hero-module, .intro-module {height: fit-content;}
.introduction-header {width: 100%;}
.introduction-row {padding: 40px 0;}
.intro-module .half { width: 100%;padding: 0;}
.col6.blank {display: none;}


.introduction-content {width: 90%;}
.estimator-module-row {width: 90%;}
.estimator-row-one, .estimator-row-two, .estimator-row-three {flex-direction: column; gap:10px}
.estimator-parent {width: 100%;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;}
.estimator-types {flex-direction: row;flex-wrap: wrap;justify-content: flex-start;width: 100%;}
.estimator-content .xsm-text {width: 100%;}
.estimator-content-description, .estimator-content-description * { width: 100%;text-align: justify !important;}
.estimator-addons {width: 100%;flex-wrap: wrap;flex-direction: row;}
.choice {min-width: calc(50% - 5px);}
.choice1 {min-width: calc(50% - 5px);}
.estimator-label{ text-align: center; margin: 0 auto 10px;}
.estimator-totals {flex-direction: column;gap: 33px;}
.totals-wrapper {flex-direction: column;gap: 10px;}

#postcode-status.show-status {  height: fit-content; text-align: center; font-size: 9px; position: sticky; top: -66px; background: var(--white); opacity: 1;padding: 10px; width: 100%; right: 0; border-radius: 11px;z-index: 9; margin: 0 !important;}
    #postcode-status.deny-status {height: fit-content;text-align: center;font-size: 9px; position: sticky; top: -45px; background: #f17878 !important;opacity: 1;padding: 10px; text-align: center;width: 100%; right: 0; border-radius: 6px;  z-index: 9;margin: 0 !important;  color: var(--white); display: flex; justify-content: center;}
.location-title:before {font-size: var(--large);right: 0;}
.introduction-row h6 {width: 100%;text-align: center;font-size: var(--small);line-height: 1.2;}
.city-item {width: calc(100%); }

.afterpay-row {flex-direction: column;gap: 0px;}

.faq-line { width: 100%;}
.faq-module .sm-text.black {text-align: center;}
.faq-module h2 { text-align: center }
.membership {order: 1;}
.action {order: 2;}

footer .row-width.flex-row {flex-direction: column;}
footer .col6 { width: 100%;}
footer .col9 { width: 100%;}
.copyright * {font-size: 8px;margin: 3px 0;}
}

.vip-form-container {
    background: #f7f7f7; 
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
}

/* Text Content */
.nad-plus-content {
    flex: 1;
    max-width: 1200px; /* Align with FAQ section width */
}

/* Image Styling */
.nad-plus-image {
    flex-shrink: 0;
    width: 300px;
}

.nad-plus-image img {
    width: 100%;
    height: auto;
}

/* Mobile & Tablet Styles */
@media (max-width: 1024px) {
    .nad-plus-wrapper {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }
	.nad-plus-container {
		flex-direction: column;
        align-items: center;
		text-align: center !important;
        max-width: 100%;
}
	.nad-plus-headline {
		text-align: center !important;
	}
    .nad-plus-content {
        max-width: 100%;
        text-align: center;
    }
    
    .nad-plus-image {
        max-width: 100%;
        margin-top: 20px;
    }
}

.hero-gif-wrapper {
	    background-image: none !important;
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #1E1E1E; /* Fallback */
padding-bottom:100px !important;
  overflow: hidden;
  z-index: 1;
}

/* Add fixed-size gif that doesn't scale */
.hero-gif-wrapper::before {
	    background-image: none !important;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2000px; 
  background: url() center top no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
	padding-bottom:100px !important;

  z-index: 0;
  pointer-events: none;
}

/* Fade effect over the bottom */
.hero-gif-wrapper::after {
	    background-image: none !important;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
	padding-bottom:100px !important;

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1E1E1E);
  z-index: 1;
  pointer-events: none;
}



@media (max-width: 768px) {
  .hero-gif-wrapper {
    background-image: none !important;
    background-color: var(--black); /* Fallback so it doesn’t go white */
  }
}


/* 🔹 FORM CONTAINER - Match Site Styling */
.portal-container {
    max-width: 600px;
    margin: 60px auto;
    padding: 40px;
    background: #252525ad;
	backdrop-filter: blur(4px);
    border-radius: 25px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

/* 🔹 FORM TITLE */
.portal-title {
    text-align: center;
    font-family: 'freightbigcmp-pro', serif;
    font-size: var(--large);
    color: var(--white);
    margin-bottom: 20px;
}

/* 🔹 FORM STYLING */
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 🔹 LABEL STYLING */
form label {
    font-weight: normal;
    font-size: var(--xsmall);
	margin-bottom:2px;
    color: var(--primary);
}

/* 🔹 INPUT FIELDS */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
    width: 100%;
    padding: 10px 15px;
    font-size: var(--xsmall);
    color: var(--white)!important;
    background: var(--tertiary);
    border: 1px solid var(--quartiary);
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus {
    border-color: lightblue;
    outline: none;
}

/* 🔹 SUBMIT BUTTON */
form input[type="submit"] {
    display: block;
    margin: 20px auto; /* Centers the button horizontally */
    text-align: center;
	background: #282828ad;
    color: lightblue;
    border: 1px solid lightblue;
    padding: 10px 15px;
	width: 50%;
	justify-items: center !important;
    font-size: var(--xsmall);
    font-weight: 300;
    text-transform: uppercase;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s ease all;
}

form input[type="submit"]:hover {
    background: #abd6e420;
}

/* Wrap the checkbox & text */
.terms-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between checkbox and text */
}

/* Style the checkbox */
.terms-wrapper input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid lightblue;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Checked state */
.terms-wrapper input[type="checkbox"]:checked {
    background-color: lightblue;
    border-color: lightblue;
    position: relative;
}

/* Custom "X" inside checked box */
.terms-wrapper input[type="checkbox"]:checked:after {
    content: 'x';
    color: var(--black);
    font-size: 10px;
    font-weight: 300;
    display: block;
    text-align: center;
    line-height: 16px;
}

/* Style the checkbox text */
.terms-wrapper label {
    color: white !important;
    font-size: var(--small);
    cursor: pointer;
}

body.page-template-page-exclusiv-registration,
body.page-template-page-exclusiv-login,
body.page-template-page-exclusiv-account {
    background-color: var(--black) !important;
}

/* Apply portal container styling to all pages */
.page-template-page-exclusiv-registration .portal-container,
.page-template-page-exclusiv-login .portal-container,
.page-template-page-exclusiv-account .portal-container {
    background: var(--secondary) !important;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

/* Apply disclaimer text styling to all */
.page-template-page-exclusiv-registration .disclaimer-text,
.page-template-page-exclusiv-login .disclaimer-text,
.page-template-page-exclusiv-account .disclaimer-text {
    text-align: justify !important;
    color: white !important;
    display: block;
    line-height: 1.6;
}

/* Apply checkbox styling to all */
.page-template-page-exclusiv-registration .terms-wrapper label,
.page-template-page-exclusiv-login .terms-wrapper label,
.page-template-page-exclusiv-account .terms-wrapper label {
    color: white !important;
    font-size: var(--small);
    cursor: pointer;
}

/* Center the button across all pages */
.page-template-page-exclusiv-registration form input[type="submit"],
.page-template-page-exclusiv-login form input[type="submit"],
.page-template-page-exclusiv-account form input[type="submit"] {
    display: block;
    margin: 20px auto 0; /* Centers horizontally */
    text-align: center;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    background-color: #282828 !important;
    box-shadow: 0 0 0px 1000px #282828 inset !important;
    -webkit-box-shadow: 0 0 0px 1000px #282828 inset !important;
    -webkit-text-fill-color: white !important;
    caret-color: white !important;
    filter: brightness(1) !important; /* Forces Safari to repaint */
    transition: background-color 9999s ease-in-out 0s !important;
}



.footer-meta {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100%;
}

.footer-meta h3 {
    font-size: 1.5rem; /* Adjust for size */
    text-align: center !important;
    margin-bottom: 10px;
}

.footer-meta .contact {
    text-align: center !important;
    justify-content: center !important;
    display: flex;
    flex-direction: column;
}

.footer-meta a {
    text-align: center!important;
    display: block;
}

input.postcode_check_input::placeholder {
        color: var(--primary) !important;
        opacity: 1 !important;
    }
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
    }
}

select, 
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="tel"], 
textarea {
    color: #ffffff !important;
    background-color: #282828 !important;
    -webkit-text-fill-color: #ffffff !important; 
}

.registration-error-message {
    color: var(--quartiary);
    font-size: 16px;
    text-align: center;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.1); /* Light transparent background */
    padding: 10px;
    border-radius: 5px;
}