/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.woocommerce-form {
  font-size: 15px;
  font-family: "Arial";
}

.account-wrapper {
  	display: flex;
  	justify-content: center;
  	padding: 135px 15px 45px 15px;
  	height: auto;
  	align-items: center;
  	background: url(https://thmtea.com.tw/wp-content/uploads/2025/08/about_img-6.webp);
  	background-size: cover;
  	background-position: center center;
	position: relative;
}

.account-wrapper::before {
	background: #ffffff47;
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.account-box {
  	padding: 20px;
  	border-radius: 8px;
  	max-width: 500px;
  	width: 100%;
  	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	z-index: 9;
    background: #fff;
}

.account-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.woocommerce-form-login {
	display:grid;
	gap:10px;
}

.form-wrapper {
    display:grid;
	gap:10px;
}

.modern-form label {
  display: block;
  font-weight: 500;
}

.modern-form input[type="text"],
.modern-form input[type="password"],
.modern-form input[type="tel"],
.modern-form input[type="date"],
.modern-form input[type="email"]{
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-section-wrapper {
	display:grid;
	gap:10px;
}

.password-field {
	position:relative;
}

.password-input-wrapper {
    position: relative;
    display: block;
}

.show-password-input {
	display:none;
}

.woocommerce-form-register {
  display:grid;
  gap:5px;
}

.form-section {
  display:grid;
  gap:5px;
}

.form-row {
  display:grid;
  gap:5px;
}

.toggle-password {
	position:absolute;
	right:15px;
	top:50%;
	transform: translateY(-50%);
	cursor: pointer;
    user-select: none; 
    z-index: 10; 
}

.gender-wrapper {
	display: flex;
    gap: 8px;
}

.passowd-wrapper {
	position: relative;
}

.register-button,.login-button {
	width:100%;
	text-align:center;
}

@media screen and (max-width:992px) {
	
.account-wrapper {
  	padding: 125px 15px 45px 15px;
}
}