/*
 * Bricx Register & Profile CSS
 * Handles styling for My Account 'Edit Account' and the Profile Completion page.
 *
 * @package Bricx
 */

/* Date of Birth */
.woocommerce-account .woocommerce-EditAccountForm fieldset { order: 999; border-width: 0; margin: 0; padding: 0; }
.dob-wrapper { display: flex; gap: 0px; }
.dob-wrapper select { flex: 1; }

/* ------------------------------------------- */
/* 1. My Account (Edit Account) Layout Fixes */
/* ------------------------------------------- */

.bricx-policy{
  margin: 2em auto 1em;
  font-size: 10px;
  text-align: center;
}
.bricx-policy a{
  color: #999
}
/* Desktop: force new line */
@media (min-width: 768px) {
  .policy-break{
    display: block;
  }
}

/* Mobile: keep it inline */
@media (max-width: 767px) {
  .policy-break{
    display: inline;
  }
  .bricx-policy{
    max-width: 300px;
  }
}

/* Hide the default WooCommerce display name field */
.woocommerce-account .woocommerce-EditAccountForm p:has(#account_display_name) {
    display: none !important;
}

/* Force Edit Account form to use Flexbox to allow custom ordering (pushing password to the bottom) */
.woocommerce-account .woocommerce-EditAccountForm {
    display: flex;
    flex-direction: column;
}

/* Ensure the password fields (fieldset) and submit button are pushed to the bottom */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
    order: 999; /* Push fieldset (password) to the bottom */
    border-width: 0;
    margin: 0;
    padding: 0;
}

/* Ensure the submit button is below the password fieldset */
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
    order: 1000;
}

/* ------------------------------------------- */
/* 2. Profile Completion Form (Welcome Page) */
/* ------------------------------------------- */

.bricx-complete-profile-wrapper {
    max-width: 500px;
    margin: auto;
}

.bricx-complete-profile-wrapper button{
    width: 100%;
}

.bricx-complete-profile-intro{
    text-align: center;
    padding-bottom: 1.5em;
    border-bottom: solid 1px #ff4d9e;
    margin-bottom: 2.5em;
}

.bricx-complete-profile-intro h2{
	margin-bottom: .25em
}

.bricx-complete-profile-wrapper .woocommerce-info{
	color: #d8ff64
}

.bricx-dob-container { display: flex; gap: 2%; }
.bricx-dob-field { width: 33.33% !important; float: left; margin-right: 0 !important; }
.bricx-dob-day { clear: both; } /* Start new line */

/* Hide labels for Month and Year on frontend to look cleaner, keep Day label as main */
#bricx_dob_month_field label, #bricx_dob_year_field label { visibility: hidden;opacity: 0; }

/* Mobile fix */
@media (max-width: 600px) {
    .bricx-dob-field { width: 33.33% !important; }
}

.wp_google_login{clear:both;margin:40px auto 0}
.wp_google_login.hidden{display:none}
.wp_google_login__divider{position:relative;text-align:center}
.wp_google_login__divider:before{background-color:#e1e2e2;content:"";height:1px;left:0;position:absolute;top:8px;width:100%}
.wp_google_login__divider span{background-color:#fff;color:#e1e2e2;font-size:14px;padding-left:8px;padding-right:8px;position:relative;text-transform:uppercase;z-index:2}
.wp_google_login__button-container{margin-top:10px}
.wp_google_login__button{background-color:#fff;border:solid #ccced0;border-radius:4px;border-width:1px 1px 2px;box-sizing:border-box;color:#3d4145;cursor:pointer;display:block;font-size:14px;font-weight:500;line-height:25px;margin:0;outline:0;overflow:hidden;padding:10px 15px;text-align:center;text-decoration:none;text-overflow:ellipsis;width:100%}
.wp_google_login__button:hover{color:#3d4145}
.wp_google_login__google-icon{background:url(../../images/google_light.png) no-repeat 50%;background-size:contain;display:inline-block;height:25px;margin-right:10px;vertical-align:middle;width:25px}