/**
 * WP-Members Styles CSS
 *
 * CSS for the WP-Members plugin
 *
 * This file is part of the WP-Members plugin by Chad Butler
 * You can find out more about this plugin at https://rocketgeek.com
 * Copyright (c) 2006-2022 Chad Butler
 * WP-Members(tm) is a trademark of butlerblog.com
 *
 * @package WP-Members
 * @author Chad Butler
 * @copyright 2006-2022
 */

/*
This stylesheet is designed to integrate WP-Members floated form elements
as simply as possible with most themes.  There are quite a few examples
in here of what you can do to style the forms.  You can build off of this
or start from scratch and set your own custom css for the plugin
(set the location in the admin panel).

See https://rocketgeek.com/tips-and-tricks/setting-up-a-custom-wp-members-stylesheet/
for information on how to set up the plugin with a custom stylesheet.

For information how to load custom stylesheets with wp_enqueue_style,
see https://rocketgeek.com/tips-and-tricks/load-a-custom-stylesheet/
*/

/* Error and Dialog Messages */

#wpmem_msg,
.wpmem_msg {
  text-align: center;
  background: #f9f9f9;
  border: 1px solid lightGrey;
  border-radius: 3px;
  padding: 20px 0;
  margin: 15px 0;
}

/* Messages and forms should (ideally) be the same width */
#wpmem_msg,
.wpmem_msg,
#wpmem_reg,
#wpmem_login {
  width: 75%;
}

/* Sidebar Login Widget */

#wp-members {
  width: 100%;
}
#wp-members fieldset {
  border: none;
  padding: 0px;
}
#wp-members input {
  font-family: inherit;
}
#wp-members input[type="text"],
#wp-members input[type="password"] {
  margin: 0 0 4px 0;
}
#wp-members input[type="submit"] {
  padding: 5px 6px 4px;
  margin: 0 4px 0 0;
}
#wp-members .button_div {
  margin-top: 4px;
}
#wp-members .err {
  width: 100%;
  padding: 5px;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Login Form and Registration Form */

#wpmem_reg,
#wpmem_login {
  color: rgb(43, 43, 43);
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

#wpmem_reg label,
#wpmem_login label {
  display: initial;
}

#wpmem_reg input[type="text"],
#wpmem_reg input[type="password"],
#wpmem_reg input[type="email"],
#wpmem_reg input[type="url"],
#wpmem_reg input[type="number"],
#wpmem_reg input[type="date"],
#wpmem_reg textarea,
#wpmem_login input[type="text"],
#wpmem_login input[type="password"] {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  color: rgb(43, 43, 43);
  padding: 8px 10px 8px;
  background: none repeat scroll 0% 0% #fff;
}

#wpmem_reg input,
#wpmem_reg button,
#wpmem_reg select,
#wpmem_reg textarea,
#wpmem_login input,
#wpmem_login button {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 100%;
  margin: 0px;
  max-width: 100%;
  vertical-align: baseline;
}

#wpmem_reg input:focus,
#wpmem_reg textarea:focus,
#wpmem_login input:focus {
  border: 1px solid rgba(0, 0, 0, 0.3);
  outline: 0px none;
}

#wpmem_reg select {
  width: 100%;
  padding: 8px 10px 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  color: rgb(43, 43, 43);
  margin: 5px 0;
  background: none repeat scroll 0% 0% #fff;
}

#wpmem_reg fieldset,
#wpmem_login fieldset {
  border: none;
  padding: 0;
  margin: 40px 0;
}
/* Container-like responsive layout for fieldsets */
#wpmem_reg fieldset,
#wpmem_login fieldset,
#wpmem_profile_form fieldset {
  max-width: 960px;
  margin: 40px auto;
  padding-left: 16px;
  padding-right: 16px;
}
#wpmem_reg legend,
#wpmem_login legend {
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 10px;
  width: 100%;
}
#wpmem_reg .form,
#wpmem_login .form {
  margin: 0;
  padding: 0;
}
#wpmem_reg .clear,
#wpmem_login .clear {
  clear: both;
}
#wpmem_reg .holder,
#wpmem_login .holder {
  background-color: #fff;
}

#wpmem_login .div_text,
#wpmem_reg .div_text,
#wpmem_reg .div_textarea,
#wpmem_reg .div_select,
#wpmem_reg .div_checkbox,
#wpmem_reg .div_multiselect,
#wpmem_reg .div_multicheckbox,
#wpmem_reg .div_radio,
#wpmem_reg .div_image,
#wpmem_reg .div_file,
#wpmem_reg .div_url,
#wpmem_reg .div_number,
#wpmem_reg .div_date,
#wpmem_reg .div_membership {
  margin: 0 0 14px 0;
}
#wpmem_login input[type="checkbox"] {
  margin: 12px 2px;
}
#wpmem_reg .div_textarea textarea,
#wpmem_reg .textbox,
#wpmem_login .textbox,
#wpmem_reg .username,
#wpmem_reg .password,
#wpmem_reg .file,
#wpmem_reg .image,
#wpmem_login .username,
#wpmem_login .password {
  width: 100%;
}

#wpmem_reg textarea {
  height: 185px;
}
#wpmem_reg .req {
  color: #bd3500;
  font-size: 22px;
  line-height: 50%;
}

#wpmem_reg .req-text {
  margin: 20px 0px 0px 5px;
}

#wpmem_reg .noinput {
  width: 93%;
  padding: 8px 10px 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  color: rgb(43, 43, 43);
  margin: 5px 0;
}

#wpmem_reg .captcha {
  margin: 5px 0px;
}
#wpmem_reg .captcha table {
  line-height: 0px;
}
#wpmem_login .link-text {
  padding: 4px 0;
  text-align: right;
}

#tos {
  margin-right: 5px;
}

/* Buttons */

#wpmem_reg .button_div,
#wpmem_login .button_div {
  /* height:55px; */
  padding: 6px 0;
  text-align: right;
}

/** for smaller screens */

@media screen and (max-width: 720px) {
  /* Make fieldsets full-width with comfortable padding on small screens */
  #wpmem_reg fieldset,
  #wpmem_login fieldset,
  #wpmem_profile_form fieldset {
    max-width: 100%;
    margin: 20px auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  #wpmem_reg label.text,
  #wpmem_reg label.checkbox,
  #wpmem_reg label.textarea,
  #wpmem_reg label.select,
  #wpmem_login label,
  #wpmem_reg .div_text,
  #wpmem_reg .div_textarea,
  #wpmem_reg .div_select,
  #wpmem_login .div_text,
  #wpmem_reg .div_checkbox,
  #wpmem_reg .button_div,
  #wpmem_login .button_div {
    float: none;
  }

  #wpmem_reg label.text,
  #wpmem_reg label.checkbox,
  #wpmem_reg label.textarea,
  #wpmem_reg label.select {
    width: 90%;
    padding: 5px 0 0 0;
  }
  #wpmem_reg label.textarea {
    height: 26px;
  }
  #wpmem_reg .div_text,
  #wpmem_reg .div_textarea,
  #wpmem_reg .div_select,
  #wpmem_login .div_text,
  #wpmem_reg .div_checkbox {
    width: 98%;
  }
  #wpmem_msg,
  .wpmem_msg {
    width: 100%;
  }

  #wpmem_reg .button_div,
  #wpmem_login .button_div,
  #wpmem_login .link-text {
    width: 98%;
  }
}

/* WPMembersフォーム全体のスタイル調整 */
#wpmem_profile_form fieldset {
  border: none; /* fieldsetの枠線を消す */
  padding: 0;
}

#wpmem_profile_form legend {
  display: none; /* 「登録情報の編集」のタイトルを非表示 */
}

/* ラベルと入力欄のレイアウト調整 */
#wpmem_profile_form label.text,
#wpmem_profile_form div.div_text {
  display: inline-block; /* 横並びにする */
  vertical-align: middle; /* 上下中央揃え */
  box-sizing: border-box; /* paddingとborderを幅に含める */
}

/* ラベル（項目名）のスタイル */
#wpmem_profile_form label.text {
  width: 20%; /* ラベルの幅を20%に設定 */
  padding-right: 20px;
  text-align: right;
}

/* 必須マーク（*）のスタイル */
#wpmem_profile_form label.text span.req {
  color: #c00;
  font-size: 14px;
  padding: 2px 6px;
  margin-right: 8px;
  font-weight: bold;
}

/* 入力欄（テキストボックス）のスタイル */
#wpmem_profile_form div.div_text {
  width: 80%; /* 入力欄の幅を80%に設定 */
  margin-bottom: 20px; /* 各行の間の余白 */
}

#wpmem_profile_form .textbox {
  width: 100%;
  padding: 10px 15px; /* 内側の余白 */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

/* 更新ボタンのスタイル */
#wpmem_profile_form .button_div {
  text-align: center; /* ボタンを中央寄せ */
  margin-top: 40px;
}

#wpmem_profile_form .buttons {
  background-color: #f7a639; /* ボタンの背景色（オレンジ系） */
  color: #fff; /* ボタンの文字色 */
  border: none;
  padding: 12px 60px;
  cursor: pointer;
}

#wpmem_profile_form .buttons:hover {
  opacity: 0.8; /* ホバー時に少し透明にする */
}

/* 「*必須項目」のテキストを非表示にする */
#wpmem_profile_form .req-text {
  display: none;
}

/* スマートフォン向けの調整（レスポンシブ対応） */
@media (max-width: 768px) {
  #wpmem_profile_form label.text,
  #wpmem_profile_form div.div_text {
    display: block; /* 縦並びに戻す */
    width: 100%;
    text-align: left; /* 左揃えにする */
  }

  #wpmem_profile_form div.div_text {
    margin-bottom: 20px;
  }

  #wpmem_profile_form label.text {
    margin-bottom: 8px;
  }
}

/* Messages and forms should (ideally) be the same width */
#wpmem_msg,
.wpmem_msg,
#wpmem_reg,
#wpmem_login {
  width: 75%;
  margin: 0 auto;
}