/*
Theme Name: MasterLife Child
Theme URI: https://masterlife.jwsuperthemes.com
Template: masterlife
Author: the JWSThemes team
Author URI: https://themeforest.net/user/jwsthemes/portfolio
Description: MasterLife is a modern WordPress theme designed and built specifically for Education LMS and Online Training. It offers a comprehensive suite of tools to seamlessly set up your learning management system. With five distinct and visually appealing demos, MasterLife makes it easy to create professional websites for online education, instructors, academies, universities, and more. The intuitive demo importer simplifies the process, providing ready-made content to help you get started effortlessly. Empower your students and transform the learning experience with MasterLife.
Tags: one-column,flexible-header,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 1.1.4
Updated: 2024-11-12 09:32:50
*/

/* ─────────────────────────────────────────────────────────────────────────────
   Root Variables
───────────────────────────────────────────────────────────────────────────── */
:root {
  --main: #030f40;
  --secondary: #543cdf;
  --third: #fffaf5;
  --light: #ffffff;
  --dark: #000000;
  --heading: #0e1316;
  --body: #667085;
  --body2: #f4f7ff;
  --body3: #ebebeb;
  --body4: #f8f8f8;
  --bodybg: #ffffff;
  --btn-bgcolor: #09205c;
  --btn-color: #ffffff;
  --btn-bgcolor2: transparent;
  --btn-color2: #09205c;
  --font-size-sm: 14px;
  --line-height-sm: 22.5px;
  --font-size-md: 18px;
  --line-height-md: 25px;
  --input-background: #ffffff;
  --input-background2: #ffffff;
  --background-item: #fef8e6;
  --background-body: #ffffff;
  --border-color: #626262;
  --border-color2: #eff1f2;
  --border-color3: #b7b7b7;
  --full-fd: 70px;
  --link: #232323;
  --inscolor: var(--bodybg);
  --jws-sticky-header-height: 0px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Base Button Styles
───────────────────────────────────────────────────────────────────────────── */
.btn-theme {
  background: var(--main);
  color: #ffffff;
  height: 50px;
  padding: 0 40px;
  text-align: center;
  line-height: 50px;
}
button.btn-theme {
  border: 0;
}
/* ─────────────────────────────────────────────────────────────────────────────
   1) FORCE LOAD — hide old close, position new one
───────────────────────────────────────────────────────────────────────────── */
#travel-planner-modal .tp-dialog > button.tp-close { 
  display: block !important;
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  width: 2rem !important;
  height: 2rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 1.5rem !important;
  line-height: 2rem !important;
  color: #666 !important;
  cursor: pointer !important;
  z-index: 1001 !important;
}
/* hide any duplicate “×” inside the form footer */
#travel-planner-modal .tp-dialog form .tp-close {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2) FORM STACKING & ROWS
   Always stack three rows in this order: main → manual → submit
───────────────────────────────────────────────────────────────────────────── */
/* make form a normal block so rows flow vertically */
#travel-planner-modal .tp-dialog form {
  display: block !important;
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
}

/* all rows share bottom margin */
#travel-planner-modal .tp-dialog .tp-row {
  margin-bottom: 1rem !important;
}

/* Row 1: From / To / More options */
#travel-planner-modal .tp-dialog .tp-row-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Row 2: Manual panel (hidden by default) */
#travel-planner-modal .tp-dialog .tp-row.tp-manual {
  display: none !important;
  width: 100% !important;
  margin: 1rem 0 !important;
}
/* show when JS adds .active */
#travel-planner-modal .tp-dialog .tp-row.tp-manual.active {
  display: block !important;
}

/* Row 3: Plan Route / Cancel */
#travel-planner-modal .tp-dialog .tp-row-submit {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3) CONTROLS STYLING
───────────────────────────────────────────────────────────────────────────── */
/* labels and selects inline */
#travel-planner-modal .tp-dialog form label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

/* unify heights/padding for selects and buttons */
#travel-planner-modal .tp-dialog form select,
#travel-planner-modal .tp-dialog form button {
  min-height: 2.5em !important;
  line-height: 2.5em !important;
  padding: 0 1rem !important;
  font-size: 1rem !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

/* select appearance */
#travel-planner-modal .tp-dialog form select {
  border: 1px solid #ccc !important;
  background: #fff !important;
  color: #333 !important;
}

/* “More options” button */
#travel-planner-modal .tp-dialog form .toggle-manual {
  background: #f0f0f0 !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
  cursor: pointer !important;
}

/* Plan Route button */
#travel-planner-modal .tp-dialog form .plan-route {
  background: #2a9d8f !important;
  width: 100% !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
#travel-planner-modal .tp-dialog form .plan-route:hover {
  background: #23867f !important;
}

/* Cancel button (inline but hidden by close rule above) */
#travel-planner-modal .tp-dialog form .tp-close {
  background: transparent !important;
  border: 1px solid #ccc !important;
  color: #666 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4) MANUAL PANEL INPUT
───────────────────────────────────────────────────────────────────────────── */
#travel-planner-modal .tp-dialog .tp-row.tp-manual input[type="text"] {
  width: 100% !important;
  padding: 0.5rem !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5) MAP & RESULTS SPACING
───────────────────────────────────────────────────────────────────────────── */
#tp-map {
  width: 100% !important;
  height: 300px !important;
  margin-bottom: 1rem !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
}
#tp-results {
  margin-top: 1.5rem !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6) MOBILE (≤600px) — stack controls full-width
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #travel-planner-modal .tp-dialog .tp-row-main,
  #travel-planner-modal .tp-dialog .tp-row-submit {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #travel-planner-modal .tp-dialog form label,
  #travel-planner-modal .tp-dialog form button {
    width: 100% !important;
  }
}
/* Only prevent modal overflow on narrow screens */
@media (max-width: 600px) {
  /* Stop the page itself from scrolling horizontally */
  html, body {
    overflow-x: hidden;
  }

  /* Make the dialog full‐width but inset slightly */
  #travel-planner-modal .tp-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 2% auto;       /* vertical centering on mobile */
    padding: 0.75rem;       /* comfortable padding */
    overflow-x: hidden;     /* no inner scroll */
    border-radius: 0;       /* optional: flush corners on mobile */
  }
}
/* First hide all tp-close buttons inside the modal */
#travel-planner-modal .tp-close {
  display: none !important;
}

/* Then immediately re-show only the top-corner one */
#travel-planner-modal .tp-dialog > .tp-close {
  display: block !important;
}
@media (max-width: 768px) {
  /* 1) Hide the real header */
  .gw-firearms-card table thead {
    display: none !important;
  }

  /* 2) Stack into cards */
  .gw-firearms-card table,
  .gw-firearms-card table tbody,
  .gw-firearms-card table tbody tr {
    display: block !important;
    width: 100% !important;
  }

  /* 3) Each cell is its own row */
  .gw-firearms-card table tbody tr td {
    display: block !important;
    padding: 0.75em 0 !important;
    border-bottom: 1px solid #eee !important;
    position: relative !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .gw-firearms-card table tbody tr:last-child td {
    border-bottom: none !important;
  }

  /* 4) Inject your labels in the right order */
  .gw-firearms-card table tbody tr td:nth-child(1):before { content: "Name";          font-weight:600; width:30%; display:inline-block; }
  .gw-firearms-card table tbody tr td:nth-child(2):before { content: "UPC";           font-weight:600; width:30%; display:inline-block; }
  .gw-firearms-card table tbody tr td:nth-child(3):before { content: "MPN";           font-weight:600; width:30%; display:inline-block; }
  .gw-firearms-card table tbody tr td:nth-child(4):before { content: "Manufacturer";  font-weight:600; width:30%; display:inline-block; }
  .gw-firearms-card table tbody tr td:nth-child(5):before { content: "Importer";      font-weight:600; width:30%; display:inline-block; }
  .gw-firearms-card table tbody tr td:nth-child(6):before { content: "Status";        font-weight:600; width:30%; display:inline-block; }
  .gw-firearms-card table tbody tr td:nth-child(7):before { content: "Reason";        font-weight:600; width:30%; display:inline-block; }
  .gw-firearms-card table tbody tr td:nth-child(8):before { content: "Actions";       font-weight:600; width:30%; display:inline-block; }

  /* 5) Push the values over so they don’t overlap the labels */
  .gw-firearms-card table tbody tr td {
    text-indent: 30% !important;
    padding-left: 1em !important;    /* optional breathing room */
    text-align: left !important;
  }

  /* 6) Restore your status colors */
  .gw-firearms-card table tbody tr td.status-banned  { color: #c00 !important; }
  .gw-firearms-card table tbody tr td.status-allowed { color: #090 !important; }
}

@media (max-width: 768px) {
  /* 1) Make sure every card cell is left‑aligned */
  .gw-firearms-card table tbody tr td {
    text-align: left !important;
    padding-left: 1em !important;    /* optional: give a little breathing room */
    text-indent: 0 !important;        /* remove any inherited indent */
  }

  /* 2) And make our injected labels sit flush left too */
  .gw-firearms-card table tbody tr td:before {
    display: inline-block !important;
    width: 30% !important;            /* your label‑column width */
    text-align: left !important;
    margin-right: 0.5em !important;    /* space between label and value */
  }
}
@media (max-width: 768px) {
  /* Add space between each card on mobile */
  .gw-firearms-card table tbody tr {
    margin-bottom: 1.5em !important;
  }
}
@media only screen and (max-width: 768px) {
  /* 1st column in your vault table: override its pseudo‑label */
  .firearm-lookup-vault tbody td:nth-of-type(1)::before {
    content: "Brand / Model" !important;
  }
}
/* Make sure the file + URL inputs are displayed cleanly */
.profile-avatar-upload,
.profile-cover-upload {
  margin-bottom: 1em;
}

.profile-avatar-upload input,
.profile-cover-upload input {
  display: block;
  width: 100%;
  max-width: 300px;
}
/* clear out any rounding on both dashboard & profile avatars */
.ld-dashboard-profile-form-field .profile-avatar img.ld-dashboard-user-avatar,
.profile-avatar img,
img.avatar {
  border-radius: 0 !important;
}
@media (min-width: 769px) {

  /* 1) Force the vault table to fixed layout & full width */
  table.widefat.firearm-lookup-vault {
    width:      100%   !important;
    table-layout: fixed !important;   /* override the inline auto */
  }

  /* 2) Optional: assign some rough percentage widths to prevent
        one column from gobbling all the space */
  table.widefat.firearm-lookup-vault th:nth-child(1),
  table.widefat.firearm-lookup-vault td:nth-child(1) {
    /* Brand / Model */
    width: 30%;
  }
  table.widefat.firearm-lookup-vault th:nth-child(2),
  table.widefat.firearm-lookup-vault td:nth-child(2),
  table.widefat.firearm-lookup-vault th:nth-child(3),
  table.widefat.firearm-lookup-vault td:nth-child(3),
  table.widefat.firearm-lookup-vault th:nth-child(4),
  table.widefat.firearm-lookup-vault td:nth-child(4),
  table.widefat.firearm-lookup-vault th:nth-child(5),
  table.widefat.firearm-lookup-vault td:nth-child(5),
  table.widefat.firearm-lookup-vault th:nth-child(6),
  table.widefat.firearm-lookup-vault td:nth-child(6) {
    /* UPC, MPN, Manufacturer, Importer, Status */
    width: 10%;
  }
  table.widefat.firearm-lookup-vault th:nth-child(7),
  table.widefat.firearm-lookup-vault td:nth-child(7) {
    /* Reason */
    width: 15%;
  }
  table.widefat.firearm-lookup-vault th:nth-child(8),
  table.widefat.firearm-lookup-vault td:nth-child(8) {
    /* Actions */
    width:  5%;
  }

  /* 3) Truncate anything that still overflows */
  table.widefat.firearm-lookup-vault th,
  table.widefat.firearm-lookup-vault td {
    white-space:    nowrap   !important;
    overflow:       hidden   !important;
    text-overflow:  ellipsis !important;
    padding:        0.5rem   !important;  /* shrink/grow as you like */
    font-size:      0.9rem   !important;
  }
}