/*

Theme Name: LFMTE Default Theme

Theme URI: http://thetrafficexchangescript.com/

Description: The default theme for LFMTE traffic exchanges.

Version: 3.0

Author: Josh Abbott

*/


/* Desktop View Settings */
@media (min-width: 990px) {
    body {
        margin: 0;
        background-color: #FEFEFE; /* Sets the main background color */
        background-image: url(/images/bg12.png); /* Sets the header background image */
        background-repeat: repeat-x;
        padding: 0;
        background-position: center top; /* Centers the background image horizontally and aligns it to the top */
           }


    #headerwrapper {
        width: 1500px;
        height: 300px;
        margin: 0 auto; /* Center the header wrapper */
        clear: both;
        background-color: #035a59; /* New background color */
        background-image: url(/images/header1.png); /* Sets the header
    }

    #footer {
        background-image: url(/images/footer.jpg); /* Sets the footer image */
        background-repeat: no-repeat;
        
      
        /*background-color: #06a1f7;*/
    }

    #footerwrapper {
        background-image: url(/images/footer_bg.jpg);
        height: 200px;
        width: 1200px;
        background-repeat: repeat-x;
        /*background-color: #06a1f7;*/
    }

    #navbarcontainer {
        /* This sets the width of the navigation bar */
        width: 1000px;
    }
}

/* Main font settings */
body {
    font-size: 18px;
    font-weight: 400;
    color: #212529;
       background-color: #DADBDD;
}

#header {
    background-image: url(/images/header3.png); /* Sets the header image */
    background-color: #DADBDD;
    background-repeat: no-repeat;
    width: 1500px;
    height: 300px;
}

/* Main styles for the top level of the main menu */
.lfm_menu_bar {
    background: rgb(92,150,152);
    background: linear-gradient(180deg, rgba(92,150,152,1) 0%, rgba(30,30,30,1) 96%, rgba(255,255,255,1) 100%);
    padding: 0 0 45px;
    margin-bottom: 20px; /* If your menu bar is overlapping the page content, increase the margin here */
}

@media (max-width: 991.98px) {
    /* Mobile view settings for the top level navigation */
    .lfm_menu_bar {
        padding-bottom: 0;
        margin-bottom: 20px;
    }
}

/* Site logo styles */
.lfm_menu_logo {
    max-height: 40px;
    max-width: 238px;
}

@media (min-width: 992px) {
    .lfm_menu_logo {
        margin-right: 20px;
    }
}

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
    /* Sets the navigation tabs for the top level */
    font-size: 18px;
    color: #fee4d0;
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {
    /* Changes the colors when a tab is opened */
    color: #fee4d0;
}

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
    /* Hover style when a tab is not opened */
    background: rgb(233,212,207);
    background: linear-gradient(180deg, rgba(233,212,207,1) 2%, rgba(126,74,50,1) 5%, rgba(13,8,4,1) 100%);
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:hover {
    /* Hover style when a tab is opened */
    background: rgb(233,212,207);
    background: linear-gradient(180deg, rgba(233,212,207,1) 2%, rgba(126,74,50,1) 5%, rgba(13,8,4,1) 100%);
}

@media (min-width: 1200px) {
    /* Desktop view settings for the top level navigation tabs */
    .lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
        margin: 0px 3px;
        padding: 6px 15px;
        border: 1px solid rgba(255,255,255,0);
        border-radius: 5px;
        max-width: 1200px;
        position: relative;
    }

    .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link,
    .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
        border: 0px solid yellow;
    }

    .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
        /* Fills in the gap between an opened tab and the bottom of the bar */
        content: "";
        background-color: #3c595a;
        width: calc(100% + 2px);
        height: 14px;
        position: absolute;
        bottom: -10px;
        left: -1px;
        border: 0px solid #DDDDDD;
        border-top: none;
    }
}

@media (max-width: 991.98px) {
    /* Mobile view settings for the top level navigation tabs */
    .lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
        padding: 8px 15px;
        text-align: left;
    }

    .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link {
        /* Returns to the original colors when a tab is closed in mobile */
        color: #FFFFFF;
        background-color: #007bff;
    }

    .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:hover {
        /* Returns to the original hover effect when closed in mobile  */
        color: #FFFFFF;
        background-color: #089cff;
    }

    /* Adds an arrow in mobile view */
    .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:after {
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
        color: #FFFFFF;
        transform: rotate(-90deg);
        position: absolute;
        right: 1.25rem;
        transition: all 0.1s ease-out;
    }

    .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
        color: navy;
        transform: rotate(0deg);
    }

    .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:after {
        color: #FFFFFF;
        transform: rotate(-90deg);
    }
}

/* Main styles for the second level of the main menu */
.lfm_menu_tab {
    background: rgb(233,212,207);
    background: linear-gradient(180deg, rgba(233,212,207,1) 2%, rgba(126,74,50,1) 5%, rgba(13,8,4,1) 100%);
    border: 2px solid #FFFFFF;
    position: absolute;
    display: none;
    left: 0;
    top: 100%;
    z-index: 999;
    width: 100%;
}

li.lfm_tab_opened .lfm_menu_tab {
    display: flex;
}

@media (max-width: 991.98px) {
    /* Mobile view settings for the second level navigation */
    .lfm_menu_tab {
        background-color: #EEEEEE;
        position: relative;
        flex-direction: column;
        top: 0;
        padding: 5px 0;
    }

    li.lfm_tab_closed .lfm_menu_tab {
        display: none;
    }
}

.lfm_menu_tab > li > a {
    /* Sets the navigation links for the second level */
    font-size: 20px;
    padding: 0 20px;
    line-height: 45px;
    color: white;
    text-decoration: none;
    display: block;
}

.lfm_menu_tab > li > a:hover {
    color: #fee4d0;
    background: #75452e;
}

.lfm_menu_tab .dropdown-menu a {
    /* Sets the navigation links for the third level */
    font-size: 19px;
    padding: 0 20px;
    line-height: 32px;
    color: black;
    text-decoration: none;
    white-space: nowrap;
    display: block;
}

.lfm_menu_tab .dropdown-menu li:hover {
    background: yellow;
    color: yellow;
}

@media (max-width: 991.98px) {
    /* Mobile view settings for the second level navigation links */
    .lfm_menu_tab > li > a {
        padding-left: 40px;
        line-height: 36px;
        width: 100%;
    }

    /* Mobile view settings for the third level navigation links */
    .lfm_menu_tab .dropdown-menu a {
        padding-left: 50px;
    }
}

/* Styles for the footer */
.lfm_footer {
    background: rgb(233,212,207);
    background: linear-gradient(180deg, rgba(233,212,207,1) 2%, rgba(126,74,50,1) 5%, rgba(13,8,4,1) 100%);
}

/* Icon settings */
.far, .fas {
    margin-right: 3px;
}

.feedicon {
    color: #3097D1;
    font-size: 20px;
    margin-right: 5px;
}

/* Profile picture sizes */
.profilepic_small {
    width: 40px;
    height: 40px;
}

.profilepic_med {
    width: 75px;
    height: 75px;
}

.profilepic_large {
    width: 200px;
    height: 200px;
}

/* Various styles */
.buttonlink {
    /* This class defines <a> tag links that look like buttons */
    cursor: pointer;
    background-color: black;
    border-radius: 2px;
    border: 6px solid green;
    display: inline-block;
    color: white;
    font-family: arial;
    font-size: 18px;
    font-weight: 500;
    padding: 4px 7px;
    margin: 2px 1px 2px 1px;
    text-decoration: none;
}

.buttonlink:hover {
    /* This controls the button links when you hover over them */
    color: #FFFFFF;
    background-color: black;
    text-decoration: none;
}

.infobar {
    /* This class defines sections that span the entire page width */
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #FFFFFF;
    background-color: #555555;
}

.infobar h2 {
    color: #FFFFFF;
}

.vcenter {
    /* This is a class that can be used in Bootstrap rows to vertically center the content */
    display: flex;
    align-items: center;
}

/* The next 3 sections control various text styles used throughout the LFM Members Area */
.lfm_title {
    font-family: "Arial";
    color: #333333;
    font-size: 32px;
}

.lfm_descr {
    font-family: "Arial";
    color: #111111;
    font-size: 16px;
}

.lfm_descr_bold {
    font-family: "Arial";
    color: #000000;
    font-size: 16px;
    font-weight: 700;
}

.yellow-button {
  background: linear-gradient(145deg, #fffbc2, #ffeb7a);  /* Softer yellow gradient */
  color: #2a2a2a;                                         /* Neutral dark text */
  font-size: 20px;
  font-weight: bold;
  padding: 10px 16px;
  border: 2px solid black;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

a .yellow-button {
  font-weight: bold;
  text-decoration: none;
}

.yellow-button:hover {
  color: white;
  background: linear-gradient(145deg, #339933, #228b22); /* Deep green hover */
  box-shadow: 0 5px 10px rgba(34, 139, 34, 0.7);
  transform: scale(1.05);
}


.crosspromo-button {
    
    background: linear-gradient(145deg, #f9e79f, #f7dc6f);
    color: #4a4a4a;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 20px;
    border: 2px solid #d4ac0d;
    border-radius: 12px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(212, 172, 13, 0.4);
    transition: 
        background 0.3s ease, 
        color 0.3s ease, 
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.crosspromo-button:hover {
    background: linear-gradient(145deg, #d4ac0d, #b7950b);
    color: #fff;
    border-color: #b7950b;
    box-shadow: 0 6px 12px rgba(183, 149, 11, 0.7);
}

.crosspromo-button span {
    display: block;
    font-size: 12px;
    color: #7d6608;
    text-align: center;
    margin-top: 3px;
    transition: color 0.3s ease, font-size 0.3s ease;
}

.crosspromo-button:hover span {
    color: #fff;
    font-size: 15px;
}

.signup-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.signup-row img {
  max-width: 400px;
  height: auto;
  border-radius: 1px;
  border: 2px solid #ffd633;
}

.signup-row .yellow-button {
  white-space: nowrap;
}