/**
 * Main Page Scripts - Styles
 * Version: 1.0.0
 * Description: Styles for dynamic content, deals display, and user interactions

--- Change log ---
v1.0.0  ==>  File created - 2025-07-24
 */

/* ######## General & functionnal ######## */

/* Hide noDeals block by default */
.noDeals, .noDeals-inline, .hideThis {display:none;}

/* Hide the warning if haven't scrolled yet */
.tempHideMain{display:none!important;}

/* ######## Top featured deal ######## */
/* Image, title and date */
#todaysBestDeal img, #todaysTip img, #todaysRewards img, #todaysBestDealNoCA img{width:100%;}
#todaysBestDeal h3, #todaysTip h3, #todaysRewards h3, #todaysBestDealNoCA h3{margin-bottom:0px;}
#todaysBestDeal h3 a, #todaysTip h3 a, #todaysRewards h3 a, #todaysBestDealNoCA h3 a{color:#000000;}
#todaysBestDeal span, #todaysTip span, #todaysRewards span, #todaysBestDealNoCA span{color:#313131;font-size:12px;}

/* Overlay on image to select city */
.overlayMainImgContainer{position:relative;}
.overlayMainImg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;font-weight:bold;}
.overlayMainImgContainer img{opacity:0.4;}
.setAreaFromImage{cursor:pointer;text-decoration:underline;font-weight:300;}

/* Dropdown button */
.dropbtnCity {background-color: #0099FF;color: white;padding:10px;border:none;border-radius:3px;cursor:pointer;z-index:9999;}

/* The container div needed to position the dropdown content */
.selectCityDropdown {position:relative;display:inline-block;z-index:9999;}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-city {display:none;position:absolute;background-color:white;overflow-y:scroll;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index:9999;}

/* Links inside the dropdown */
.dropdown-content-city span {color: black;padding:10px 16px;text-decoration:none;display:block;}

/*Dropdow region titles*/
.custom-optionMP-ttl{background-color:lightgrey;}

/* Change color of dropdown links on hover */
.custom-optionMP:hover {background-color:#f1f1f1;cursor:pointer;}

/* Show the dropdown menu on click (toggle this class in js) */
.openMP{display:block;}

/*######## Top featured media ########*/
#mediaFtFirst_can, #mediaFtFirst_usa{display:none;}
#mediaFtFirst_can img, #mediaFtFirst_usa img{width:auto;height:auto;}

/* Title see all float right */
.section4Title a{float:right;padding-right:10px;color:#0099FF!important;}


/* Ensure all "See all" links have proper blue color */
.section4Title a, 
.section4Title a:visited,
.section4Title a:hover,
.section4Title a:active {
    color: #0099FF !important;
    text-decoration: none;
}

/* Make "I want deals from..." text darker and bolder */
.notfromp {
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    margin-bottom: 20px !important;
}

/* List of top 4 deals */
#todayBestDealMain table{margin-bottom:34px;}
#todayBestDealMain table, #todayBestDealMain table tr, #todayBestDealMain table tr td{border:none;/*1px solid red;*/}
#todayBestDealMain table tr img{width:150px;height:150px;}
.imgCol{width:170px;height:150px;object-fit:contain;padding:0px;padding-right:20px;}
.priceInTop4{color:#0099FF; font-weight:bold;font-size:50px;vertical-align:middle;width:140px;text-align:center;}
.priceInTop4 span{font-size:25px;vertical-align:middle;padding-right:3px;}
.pricePtsInTop4{color:#0099FF; font-weight:bold;font-size:15px!important;display:block;text-align:center;line-height:1.5em;}
.cityInTop4{text-align:left;margin:0px;padding:0px;}
.cityInTop4 h3{margin:0px;padding:0px;}
.cityInTop4 h3 span{font-size:0.8em;}
.dateInTop4{text-align:left;color:#313131;font-size:12px;margin-top:0px;padding:0px;}
.seeDeal{display:block;margin-top:13px;font-size:12px;font-weight:bold;padding: 0px;text-align:left;color:#0099FF;}

/* Social follow */
#facebookMPContainer, #twitterMPContainer{
    text-align:center;
    margin:auto;
}

/* Mailchimp box */
.mch_form_simplified input{color:white!important;}
.mch_form_simplified input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #f2f3f4;
    opacity: 1; /* Firefox */
}

/* Center the deal msg when no deal/area */
/*.dealMSG{text-align:center;margin:auto;font-size:35px;font-style:italic;font-weight:300;}*/

/* Temporarly hide the deal title */
.tempHideDealTitle{display:none;}

/* ######## Desktop Only (large enough to show the section & sidebar) ######## */
@media screen and (min-width: 1205px) {

/* ######## Top featured deal ######## */
/* Image, title and date */
#todaysBestDeal h3, #todaysTip h3, #todaysRewards h3, #todaysBestDealNoCA h3{font-size:18px;}
#todaysBestDeal img, #todaysTip img, #todaysRewards img, #todaysBestDealNoCA img{
    height:260px;
    margin-bottom:10px;
    width: 500px;
    object-fit: cover;
}

/* Dropdown button */
.dropbtnCity{width:200px;}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-city{width:200px;max-height:200px;}

/* Overlay on image to select city */
.setAreaFromImage{margin-top:20px;}

/* ######## Top featured media ######## */
/* Scale the media logo for first timer */
#mediaFtFirst_can img, #mediaFtFirst_usa img, #mediaFtFirst img{max-height:66px;max-width:100%;}

/* Scale the media logo for first timer */
#mediaFtFirst img{height:auto;}

}

/* ######## Mobile Only ######## */
@media screen and (max-width: 1205px) {

/* ######## Top featured deal ######## */
/* Image, title and date */
#todaysBestDeal img, #todaysTip img, #todaysRewards img, #todaysBestDealNoCA img{
    height:150px;
    margin-bottom:10px;
    width: 100%;
    max-width: 770px;
    object-fit: cover;
}
#todaysBestDeal h3, #todaysTip h3, #todaysRewards h3, #todaysBestDealNoCA h3{font-size:16px;margin-bottom:5px;}

/* Overlay on image to select city */
.overlayMainImgContainer img{height:225px!important;}
.notfromp{margin-bottom:20px;}
.setAreaFromImage{margin-top:20px;}
.overlayMainImg{width:100%;}

/* Dropdown button */
.dropbtnCity{width:300px;}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-city{width:100%;max-height:400px;}

/* Navigation in mobile */
.navJumpMobile{background-color:#0099FF;padding:10px 30px;width:300px;text-align:center;margin:auto;border:none;}
.navJumpMobile a{color:white;font-weight:bold;}

/* ######## Top featured media ######## */
/* Scale the media logo for first timer */
#mediaFtFirst_can img, #mediaFtFirst_usa img, #mediaFtFirst img{width:150px;max-height:100%;}

/* Scale the media logo for first timer */
#mediaFtFirst img{height:auto;}

}