/* This CSS file will be loaded at last. Any CSS customization should be placed here */

/* Keep your existing mobile buttons rules */
@media screen and (max-width: 580px) {
  .car_buttons_box .booknow,
  .car_buttons_box .vrc-goback-block {
    float: none;
    width: 100%;
  }
  .car_buttons_box .goback a {
    width: 100%;
  }
}

/* --------------------------------------------
   Vik Rent Car — Search module wrapper tweaks
   Target: .vrc-searchmod-wrap-hybrid (plus full class stack)
   Goal: smaller module + transparent background
   -------------------------------------------- */

/* Kill the form panel inside the wrapper (this is where the grey bg/border come from) */
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid > form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* Wrapper panel */
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.75rem !important;
  max-width: 900px;
  margin: 0 auto;
}


/* Slightly reduce overall typography inside the module */
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid,
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid * {
  font-size: 14px;
}

/* Inputs/selects height & padding */
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="text"],
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="search"],
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="number"],
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="date"],
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="time"],
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="email"],
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid select,
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid .select2-selection--single {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 10px !important;
}

/* Submit button */
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid button[type="submit"],
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="submit"] {
  height: 44px !important;
  line-height: 44px !important;
  font-size: 14px !important;
  letter-spacing: .03em;
}

/* Remove inner row/panel backgrounds if any */
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid .vrc-searchmod-content,
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid .vrc-searchmod-row,
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid fieldset {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Kill any decorative pseudo-elements */
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid::before,
body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid::after { display: none !important; }

/* Mobile: keep readable */
@media (max-width: 768px) {
  body .widget_mod_vikrentcar_search { max-width: 100%; }
  body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid {
    max-width: 100%;
    padding: 0.5rem !important;
  }
  body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid button[type="submit"],
  body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="submit"] {
    height: 48px !important; /* why: easier to tap */
  }
}

  body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid button[type="submit"],
  body .vrcdivsearch.vrcdivsearchmodule.vrc-searchmod-wrap-hybrid input[type="submit"] {
    height: 48px !important; /* why: easier to tap */
  }
}
/* --------------------------------------------
   HARD OVERRIDES for your specific widget & block
   (ID and UAGB block class from your screenshot)
   -------------------------------------------- */

/* 0) Diagnostic: outline the widget to confirm this CSS loads. Remove after test. */
#mod_vikrentcar_search_1 { outline: 3px dashed magenta; }

/* 1) Kill the inner form panel (bg/border/padding) */
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid > form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) Wrapper tweaks (size + transparency) */
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.75rem !important;
  max-width: 900px;
  margin: 0 auto;
}

/* 3) Inputs and button sizing inside this widget only */
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid input[type="text"],
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid input[type="search"],
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid input[type="number"],
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid input[type="date"],
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid input[type="time"],
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid input[type="email"],
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid select,
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid .select2-selection--single {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 10px !important;
}
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid button[type="submit"],
#mod_vikrentcar_search_1 .vrc-searchmod-wrap-hybrid input[type="submit"] {
  height: 44px !important;
  line-height: 44px !important;
  font-size: 14px !important;
}

/* 4) Remove outer dark frame from the UAGB container block around the widget */
.uagb-block-a4b4b000 { /* from your screenshot */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --------------------------------------------
   FALLBACK SELECTORS (in case the widget ID changes)
   -------------------------------------------- */

/* Any Vik Rent Car search widget */
body .widget_mod_vikrentcar_search .vrc-searchmod-wrap-hybrid > form,
body [id^="mod_vikrentcar_search_"] .vrc-searchmod-wrap-hybrid > form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body .widget_mod_vikrentcar_search .vrc-searchmod-wrap-hybrid,
body [id^="mod_vikrentcar_search_"] .vrc-searchmod-wrap-hybrid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.75rem !important;
  max-width: 900px;
  margin: 0 auto;
}

/* Optional: remove outer container bg around widget blocks */
body [class*="uagb-block-"] .widget_mod_vikrentcar_search,
body [class*="uagb-block-"] [id^="mod_vikrentcar_search_"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --------------------------------------------
   (For quick verification) Inline <style> block you can drop into the page
   -------------------------------------------- */
/*
In the Block Editor: add a "Custom HTML" block after the widget and paste:

<style id="vrc-home-overrides">
  [id^="mod_vikrentcar_search_"] .vrc-searchmod-wrap-hybrid > form{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
  [id^="mod_vikrentcar_search_"] .vrc-searchmod-wrap-hybrid{background:transparent!important;border:0!important;box-shadow:none!important;padding:12px!important;max-width:900px;margin:0 auto}
  .uagb-block-a4b4b000{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
</style>

This loads after most styles and should override immediately.
*/

/* --------------------------------------------
   (DevTools Console) JS injector for live test
   -------------------------------------------- */
/*
Paste in the browser console on the page:

(()=>{const css=`
[id^="mod_vikrentcar_search_"] .vrc-searchmod-wrap-hybrid>form{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
[id^="mod_vikrentcar_search_"] .vrc-searchmod-wrap-hybrid{background:transparent!important;border:0!important;box-shadow:none!important;padding:12px!important;max-width:900px;margin:0 auto}
.uagb-block-a4b4b000{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
`;let s=document.getElementById('vrc-test-style');if(!s){s=document.createElement('style');s.id='vrc-test-style';document.head.appendChild(s);}s.textContent=css;})();
*/

/* --------------------------------------------
   FINAL OVERRIDES (based on your working DevTools edit)
   Paste into Appearance → Customize → Additional CSS
   -------------------------------------------- */

/* Remove panel bg, border, padding (the grey box) */
.vrc-searchmod-wrap-hybrid > form{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Make the module a bit smaller and centered */
.vrc-searchmod-wrap-hybrid{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 900px;     /* adjust as needed */
  margin: 0 auto;
  padding: 12px 12px 0; /* lighter chrome */
}

/* Slightly reduce field & button heights */
.vrc-searchmod-wrap-hybrid input[type="text"],
.vrc-searchmod-wrap-hybrid input[type="search"],
.vrc-searchmod-wrap-hybrid input[type="number"],
.vrc-searchmod-wrap-hybrid input[type="date"],
.vrc-searchmod-wrap-hybrid input[type="time"],
.vrc-searchmod-wrap-hybrid input[type="email"],
.vrc-searchmod-wrap-hybrid select,
.vrc-searchmod-wrap-hybrid .select2-selection--single{
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 10px !important;
}
.vrc-searchmod-wrap-hybrid button[type="submit"],
.vrc-searchmod-wrap-hybrid input[type="submit"]{
  height: 44px !important;
  line-height: 44px !important;
  font-size: 14px !important;
}

/* --------------------------------------------
   SIZE + LAYOUT: smaller width + time under date
   -------------------------------------------- */

/* Adjust the overall module width */
.vrc-searchmod-wrap-hybrid{
  max-width: 860px !important; /* set your preferred width */
}

/* DATETIME SECTION: make two columns (Pickup / Drop-off) */
.vrc-searchmod-wrap-hybrid .vrc-searchmod-section-datetimes{
  display: grid !important;              /* override plugin flex */
  grid-template-columns: 1fr 1fr;        /* two columns */
  gap: 14px 18px;                        /* row/col spacing */
}

/* Inside each column, stack fields so TIME is under DATE */
.vrc-searchmod-wrap-hybrid .vrc-searchmod-section-datetimes > div{
  display: flex !important;              /* override any row layout */
  flex-direction: column !important;     /* stack vertically */
  gap: 10px;                             /* space between date and time */
}

/* Ensure inputs/selects fill the column width */
.vrc-searchmod-wrap-hybrid .vrc-searchmod-section-datetimes input,
.vrc-searchmod-wrap-hybrid .vrc-searchmod-section-datetimes select{
  width: 100% !important;
}

/* Mobile: single column for everything */
@media (max-width: 768px){
  .vrc-searchmod-wrap-hybrid{max-width: 100% !important;}
  .vrc-searchmod-wrap-hybrid .vrc-searchmod-section-datetimes{grid-template-columns: 1fr !important;}
}

/* --------------------------------------------
   CENTER the search module horizontally
   -------------------------------------------- */

/* Ensure the wrapper itself is centered when it has a max-width */
.vrc-searchmod-wrap-hybrid{ margin-left:auto !important; margin-right:auto !important; }

/* Center via parent flex containers (covers widget + UAGB container) */
#mod_vikrentcar_search_1,
.widget_mod_vikrentcar_search,
.uagb-block-a4b4b000{
  display: flex !important;
  justify-content: center !important;
}