/* ============================================
   BIDHARBOUR MOBILE - layout_480.css
   Ajustes de layout e estrutura
   ============================================ */

/* ============================================
   PAGE STRUCTURE
   ============================================ */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    padding-bottom: 70px !important;
}

.page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#mainarea {
    width: 100%;
    padding: 0;
    margin-top: 20px;
}

main {
    width: 100%;
    padding: 0;
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* ============================================
   HEADER STRUCTURE
   ============================================ */
.top-header {
    display: none !important;
}

.main-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header .container {
    padding: 0 20px !important;
}

.header-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================
   NAVIGATION
   ============================================ */
.main-nav {
    display: none !important;
}

nav {
    display: none !important;
}

.nav-menu {
    display: none !important;
}

.auth-section .sign-in-btn {
    display: none !important;
}

/* ============================================
   HERO/DESTAQUES SECTION
   ============================================ */
.destaques {
    width: 100%;
    padding: 40px 20px !important;
    margin: 0 !important;
}

.destaques .container {
    padding: 0 !important;
}

/* ============================================
   CATEGORIES SECTION
   ============================================ */



/* ============================================
   SEARCH SECTION
   ============================================ */
.search-section {
    display: block !important;
    width: 100%;
    padding: 20px !important;
    background: #f5f5f5 !important;
    margin: 0 !important;
}

.search-form {
    width: 100%;
    display: block !important;
}

.category-select {
    width: 100% !important;
    display: block !important;
}

.search-input {
    display: none !important;
}

.search-btn {
    display: none !important;
}

/* ============================================
   AUCTIONS SECTION
   ============================================ */
.auctions {
    width: 100%;
    padding: 0 !important;
    background: #f5f5f5;
}

.auctions .container {
    width: 100% !important;
    padding: 0 !important;
}

.auction-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* ============================================
   AUCTION CARD LAYOUT
   ============================================ */
.auction-card {
    width: calc(100% - 40px) !important;
    margin: 0 20px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

.auction-image {
    width: 100% !important;
    flex-shrink: 0 !important;
}

.auction-info {
    width: 100% !important;
    flex: 1 !important;
}

/* ============================================
   FOOTER LAYOUT
   ============================================ */
footer {
    width: 100%;
    margin-top: 20px;
    padding-bottom: 80px !important;
}

footer .container {
    width: 100% !important;
    padding: 0 20px !important;
}

.footer-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
}

.footer-section {
    width: 100% !important;
}

.footer-middle,
.footer-bottom {
    width: 100% !important;
    padding: 20px !important;
}

.footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
}

/* ============================================
   MOBILE BOTTOM NAV LAYOUT
   ============================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}

.mobile-bottom-nav-container {
    display: flex;
    width: 100%;
    max-width: 100%;
}

/* ============================================
   GRID E FLEXBOX FIXES
   ============================================ */
.products-grid,
.news-grid {
    grid-template-columns: 1fr !important;
}

.category-card,
.product-card,
.news-card {
    /*width: 100% !important;*/
    /*max-width: 100% !important;*/
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    width: calc(100% - 20px);
}

/* ============================================
   FORMS LAYOUT
   ============================================ */
form {
    width: 100%;
}

input,
select,
textarea {
    width: 100% !important;
    max-width: 100% !important;
}

button,
.btn {
    width: auto;
}

/* ============================================
   MODAL LAYOUT
   ============================================ */
.modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.modal-content {
    width: 90% !important;
    max-width: 400px !important;
    margin: auto !important;
}

/* ============================================
   WIDTH CLASSES OVERRIDE
   ============================================ */
.w100p, .w90p, .w80p, .w70p, .w60p,
.w50p, .w40p, .w30p, .w20p, .w10p,
.w75p, .w25p, .w33p, .w66p, .w85p,
.w15p, .w35p, .w5p {
    width: 100% !important;
    margin: 10px 0 !important;
    float: none !important;
}

.total, .half, .third, .quarter,
.fifth, .sixth, .tenth, .fivesixths,
.fourfifths, .threequarters, .twothirds {
    width: 100% !important;
    margin: 10px 0 !important;
    display: block !important;
}

/* ============================================
   FLOAT CLEARING
   ============================================ */
.left,
.right {
    float: none !important;
    width: 100% !important;
}

.clr,
.clear {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
}

/* ============================================
   VISIBILITY HELPERS
   ============================================ */
.hidden,
.hide-mobile {
    display: none !important;
}

.show-mobile {
    display: block !important;
}

/* ============================================
   POSITIONING
   ============================================ */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */
.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.m-10 {
    margin: 10px !important;
}

.p-10 {
    padding: 10px !important;
}

.m-20 {
    margin: 20px !important;
}

.p-20 {
    padding: 20px !important;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* ============================================
   DISPLAY UTILITIES
   ============================================ */
.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-none {
    display: none !important;
}

/* ============================================
   OVERFLOW
   ============================================ */
body {
    overflow-x: hidden !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

/* ============================================
   Z-INDEX LAYERS
   ============================================ */
.main-header {
    z-index: 1000 !important;
}

.mobile-bottom-nav {
    z-index: 9999 !important;
}

.modal {
    z-index: 10000 !important;
}

#cookieConsent {
    z-index: 9998 !important;
}

/* ============================================
   IMAGE RESPONSIVE
   ============================================ */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   TABLE RESPONSIVE
   ============================================ */
table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* ============================================
   VIDEO RESPONSIVE
   ============================================ */
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* ============================================
   SECTION SPACING
   ============================================ */
section {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   CARD SPACING
   ============================================ */
.card,
.box,
.panel {
    margin: 0px;
    padding: 0px 15px;
}

/* ============================================
   BUTTONS MOBILE
   ============================================ */
.btn,
button,
input[type="button"],
input[type="submit"] {
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* ============================================
   LINKS MOBILE
   ============================================ */
a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

a:active,
a:focus {
    outline: none;
}

/* LOGIN */

/**
 *  Login Form Styling
**/

#login_div_nota {
    text-align: center;
    border: none;
    font-weight: bold;
}

#login_div_wrapper {
    margin: 0 auto;
    padding: 15px 15px 0px 0px;
}

#login_div_wrong_login {
    margin: 0 auto;
    padding: 0;
    color: #FF0000;
    font-weight: bold;
    text-align: center;
}

#login_div_title {
    margin: 0 auto;
    margin-bottom: 0px;
    padding: 0;
    border: 0;
    line-height: 32px;
    margin-bottom: 5px;
    color: #000;
    font-size: 25px;
    font-family: 'Montserrat',Calibri, arial, sans-serif;
    text-align: center;
    font-weight: bold;
}

#login_div_footer_left{
    width:50%;
}

#login_div_footer_left #resend_password_link {
    padding: 10px;
    font-size: 100%;
    text-align: left;
    float: left;
    color: #000;
    _background-color: gold;
    border-radius: 3px;
    font-weight: bold;
}


#login_div_footer_right {
    width:26%;
    float: right;
    margin-right: 9%;
    text-align: right;
}
#login_div_footer_center{
    width:30%;
    display: inline-block;
    text-align: right;
}
#login_div_footer_center1{
    display:none;
}
#login_div_footer_center .login_btn_registo{
    margin-top: 0px !important;
}

#login_div {
    width: 98%;
    float: left;
    padding-left: 2%;
    margin: auto;
    margin-top:30px;
}
#recover_div{
    width: 98%;
    padding-left: 2%;
    margin: auto;
}

#login_texto_registo {
    color: #484848;
    font-size: 18px;
    margin-top: 45px;
    line-height: 1.5;
}

/* botao LOGIN */
.login_btn_submit {
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    border: none;
    margin: 0 0 5px;
    padding: 10px 20px;
    border-radius: 5px;
    _width: 120px;
    background-color: #004a72;
    color: #FFF !important;
    _height: 45px;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    float:right;
}

/* Efeito ao passar o mouse */
.login_btn_submit:hover {
    background-color: #006699;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Efeito ao clicar */
.login_btn_submit:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Efeito de foco (acessibilidade) */
.login_btn_submit:focus {
    outline: 2px solid #00aaff;
    outline-offset: 2px;
}

/* Efeito de disabled */
.login_btn_submit:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}
/* LOGIN FIM */
/* REGISTO */

/* botao Registo */
.login_btn_registo {
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    border: none;
    margin: 0 0 5px;
    padding: 10px 20px;
    border-radius: 5px;
    _width: 120px;
    background-color: #004a72;
    color: #FFF !important;
    _height: 45px;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

/* Efeito ao passar o mouse */
.login_btn_registo:hover {
    background-color: #006699;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Efeito ao clicar */
.login_btn_registo:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Efeito de foco (acessibilidade) */
.login_btn_registo:focus {
    outline: 2px solid #00aaff;
    outline-offset: 2px;
}

/* Efeito de disabled */
.login_btn_registo:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* botao registo fim */

#registo_btn{
    display: block;
    position: relative;
    margin-top: 40px;
}

#form_condgerais{
    width: 98%;
    margin: auto;
    text-align: center;
}
.aceito:hover {
    background-color: #0d6efd;

}

.naoaceito:hover {
    background-color: #0d6efd;

}

.aceito {
    background-color:#006699;
    width:200px;
}
.naoaceito {
    background-color: #006699;
    width:200px;
}


.login_text_box_login {
    float: left;
    width: 90%;
    border: 1px solid #828282;
    height: 20px;
    margin-bottom: 20px;
}

.login_div_label {
    float: left;
    _width: 80%;
    color: #484848;
    font-size: 18px;
    margin-top: 15px;
}

.login_div_input {
    float: left;
    width: 90%;
    border: 1px solid #828282;
    height: 50px;
    background-color: #F7F8FA !important;;
    border-radius:5px !important;
}

.login_checkbox {
    width: 18px;
    padding: 0px;
    height: 26px;
    margin-top: 15px;
    margin-right: 1%;
    float: left;
}


/**
 *  Register Form Styling
**/

#registo_div_wrapper_default {
    margin: 0 auto;
    padding: 5px 10px;
    _border: 1px solid #333;
    color: #444;
}

#registo_div {
    width: 98%;
    float: left;
    padding-left: 2%;
    margin-top: 30px;

}

#registo_div_title {
    _height: 32px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    line-height: 32px;
    margin-bottom: 5px;
    color: #000;
    font-size: 24px;
    font-family: 'Montserrat',Calibri, arial, sans-serif;
    font-weight:bold;
    text-align:center;
}

.registo_div_label {
    float: left;
    width: 80%;
    color: #484848;
    font-size: 18px;
    margin-top: 20px;
}

.registo_div_input {
    float: left;
    width: 90%;
    border: 1px solid #828282;
    height: 50px;
    background-color: #F7F8FA !important;;
    border-radius:5px !important;
    padding-left: 10px !important;
    font-size: large !important;
    line-height:40px;
    color:#555555;
}

.registo_small {
    width: 97px;
}

.registo_btn_submit {
    width: 210px;
    height: 36px;
    line-height: 36px;
    margin: 0;
    padding: 0;
    border: 0px;
    background: url('../../../css/images/colorbox_register/btn_register.png') no-repeat;
    color: #333;
    font-weight: bold;
}

.registo_btn_submit:hover {
    background: url('../../../css/images/colorbox_register/btn_register_hover.png') no-repeat;
    cursor: pointer;
}

.registo_div_info {
    color: #333;
    text-align:center;
}

.registo_div_division {
    height: 12px;
    line-height: 12px;
    clear: both;
}

.registo_div_btn_registar {
    margin-top: 20px;
    float: left;
    width: 100%;
    text-align: center;
}
/* botao Registo */
.registo_btn_enviarmail {
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    border: none;
    margin: 0 0 5px;
    padding: 15px 30px;
    border-radius: 0px;
    _width: 120px;
    background-color: #004a72;
    color: #FFF !important;
    _height: 45px;
    font-size: 16px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: auto;
}

/* Efeito ao passar o mouse */
.registo_btn_enviarmail:hover {
    background-color: #006699;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Efeito ao clicar */
.registo_btn_enviarmail:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Efeito de foco (acessibilidade) */
.registo_btn_enviarmail:focus {
    outline: 2px solid #00aaff;
    outline-offset: 2px;
}

/* Efeito de disabled */
.registo_btn_enviarmail:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* botao registo fim */

#txtLocalidade {
    width: 67% !important;
    margin-left: 1%;
}

#lblLocalidade {
    width: 70%;
}

#txtCodPostal {
    width: 30% !important;

}

#lblCodPostal {
    width: 30%;
}

#lblPass1 {
    width: 47%;
}

#lblPass2 {
    width: 44%;
}

#txtPass1 {
    width: 100%;
}

#txtPass2 {
    width: 100%;
    margin-left: 1%;
}

/* REGISTO FIM */

/* RECOVER */
.recover_btn_submit {
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    border: none;
    margin: 0 0 5px;
    padding: 10px 10px;
    border-radius: 5px;
    _width: 120px;
    _background-color: #EAAA00;
    color: #666 !important;
    _height: 45px;
    font-size: 16px;
    _text-transform: uppercase;
    transition: all 0.3s ease;
    _box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    float: left;
}

/* Efeito ao passar o mouse */
.recover_btn_submit:hover {
    background-color: #006699;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Efeito ao clicar */
.recover_btn_submit:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Efeito de foco (acessibilidade) */
.recover_btn_submit:focus {
    outline: 2px solid #00aaff;
    outline-offset: 2px;
}

/* Efeito de disabled */
.recover_btn_submit:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}
/* RECOVER FIM */

.hide{
    display: none !important;
}

.barra_topo .voltarleilao{
    display: none !important;
}

.barra_topo .title{
    font-size: 20px;
}

.modal, .tipoinvalido {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}