/*
Theme Name: ProTalks Child
Theme URI: https://protalks.qodeinteractive.com
Description: A child theme of ProTalks
Author: Mikado Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: protalks
Template: protalks
*/

/* ==========================================================================
   WP-Members 회원가입 폼 커스텀 스타일
   Contact Us 페이지와 통일된 디자인 적용
   ========================================================================== */

/* 회원가입 페이지 전용 여백 조정 - 다른 페이지에 영향 없도록 */
body.page-id-4664 .qodef-page-content-section {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
}

/* 회원가입 페이지 전용 컨테이너 최대 너비 확장 */
body.page-id-4664 .qodef-page-content-section .qodef-grid {
    max-width: 1200px !important;
}

/* 메인 폼 컨테이너 - 더 넓고 현대적인 디자인 */
.wpmem_reg,
#wpmem_register_form,
.cosmosfarm-members-form.signup-form {
    background: #fff;
    padding: 35px 45px;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    margin: 20px auto;
    max-width: 800px;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
}

/* 폼 제목 스타일 - 더 모던하고 간결하게 */
.wpmem_reg .div_text h3,
.wpmem_reg h3,
#wpmem_register_form h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 26px;
    font-weight: 600;
    color: #2c3e50;
    position: relative;
}

.wpmem_reg h3:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007cba, #0056b3);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* 입력 필드 스타일 - 더 현대적이고 세련된 디자인 */
.wpmem_reg input[type="text"],
.wpmem_reg input[type="email"],
.wpmem_reg input[type="password"],
.wpmem_reg input[type="url"],
.wpmem_reg input[type="tel"],
.wpmem_reg textarea,
.wpmem_reg select,
.cosmosfarm-members-form input.textbox,
.cosmosfarm-members-form select.dropdown {
    width: 100% !important;
    padding: 16px 18px;
    border: 2px solid #f1f3f4;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background-color: #fafbfc;
    font-family: inherit;
}

/* 포커스 효과 - 더 부드럽고 현대적인 효과 */
.wpmem_reg input[type="text"]:focus,
.wpmem_reg input[type="email"]:focus,
.wpmem_reg input[type="password"]:focus,
.wpmem_reg input[type="url"]:focus,
.wpmem_reg input[type="tel"]:focus,
.wpmem_reg textarea:focus,
.wpmem_reg select:focus,
.cosmosfarm-members-form input.textbox:focus,
.cosmosfarm-members-form select.dropdown:focus {
    border-color: #007cba;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
    outline: none;
    transform: translateY(-1px);
}

/* 라벨 스타일 */
.wpmem_reg label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* 필수 필드 표시 */
.wpmem_reg .req {
    color: #dc3545;
    font-weight: bold;
}

/* 버튼 스타일 - 더 현대적이고 매력적인 디자인 */
.wpmem_reg input[type="submit"],
.wpmem_reg .button_div input,
.cosmosfarm-members-form input.buttons {
    background: linear-gradient(135deg, #007cba 0%, #0056b3 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 18px 35px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 124, 186, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.wpmem_reg input[type="submit"]:hover,
.wpmem_reg .button_div input:hover,
.cosmosfarm-members-form input.buttons:hover {
    background: linear-gradient(135deg, #005a87 0%, #003d73 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 124, 186, 0.4) !important;
}

.wpmem_reg input[type="submit"]:active,
.wpmem_reg .button_div input:active,
.cosmosfarm-members-form input.buttons:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(0, 124, 186, 0.3) !important;
}

/* 체크박스와 라디오 버튼 스타일 */
.wpmem_reg input[type="checkbox"],
.wpmem_reg input[type="radio"] {
    width: auto !important;
    margin-right: 8px;
    accent-color: #007cba;
}

.wpmem_reg .div_text_checkbox label,
.wpmem_reg .div_text_radio label {
    display: inline-block;
    margin-left: 5px;
    font-weight: normal;
}

/* 드롭다운 선택 박스 */
.wpmem_reg select {
    background-color: #fff;
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px; */
    /* appearance: none; */ /* 이 속성이 테마 스크립트와 충돌하여 클릭을 막는 주된 원인입니다. */

    /* 충돌 해결: 브라우저 기본 드롭다운 스타일로 되돌려서 기능 정상화 */
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    background-image: none !important; /* 커스텀 화살표 제거 */
    padding-right: 18px !important; /* 기본 패딩으로 복원 */
    pointer-events: auto !important; /* 클릭 이벤트 활성화 보장 */
}

/* 텍스트 영역 */
.wpmem_reg textarea {
    min-height: 120px;
    resize: vertical;
}

/* 오류 메시지 스타일 */
.wpmem_reg .wpmem_msg,
.wpmem_reg .err {
    background-color: #f8d7da;
    color: #721c24;
    padding: 12px 16px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* 성공 메시지 스타일 */
.wpmem_reg .wpmem_success {
    background-color: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* 필드 그룹 스타일 */
.wpmem_reg .div_text {
    margin-bottom: 20px;
}

/* 필드 설명 텍스트 */
.wpmem_reg .description {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

/* 로그인 링크 스타일 */
.wpmem_reg .wpmem_login_link,
.wpmem_reg a {
    color: #007cba;
    text-decoration: none;
    transition: color 0.3s ease;
}

.wpmem_reg .wpmem_login_link:hover,
.wpmem_reg a:hover {
    color: #005a87;
    text-decoration: underline;
}

/* 반응형 디자인 - 더 세련된 모바일 최적화 */
@media (max-width: 768px) {
    .wpmem_reg,
    #wpmem_register_form,
    .cosmosfarm-members-form.signup-form {
        padding: 25px 20px;
        margin: 15px auto;
        max-width: 95%;
        border-radius: 10px;
    }
    
    .wpmem_reg h3,
    #wpmem_register_form h3 {
        font-size: 22px;
        margin-bottom: 25px;
    }
    
    .wpmem_reg input[type="text"],
    .wpmem_reg input[type="email"],
    .wpmem_reg input[type="password"],
    .wpmem_reg input[type="url"],
    .wpmem_reg input[type="tel"],
    .wpmem_reg textarea,
    .wpmem_reg select,
    .cosmosfarm-members-form input.textbox,
    .cosmosfarm-members-form select.dropdown {
        font-size: 16px; /* iOS에서 줌 방지 */
        padding: 14px 16px;
        margin-bottom: 18px;
    }
    
    .wpmem_reg input[type="submit"],
    .wpmem_reg .button_div input,
    .cosmosfarm-members-form input.buttons {
        padding: 16px 30px !important;
        font-size: 16px !important;
        margin-top: 20px !important;
    }
}

/* 파일 업로드 필드 */
.wpmem_reg input[type="file"] {
    width: 100% !important;
    padding: 10px;
    border: 2px dashed #e1e5e9;
    border-radius: 4px;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.wpmem_reg input[type="file"]:hover {
    border-color: #007cba;
}

/* 약관 동의 체크박스 영역 */
.wpmem_reg .wpmem_tos {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #007cba;
    margin: 20px 0;
}

.wpmem_reg .wpmem_tos label {
    font-size: 14px;
    line-height: 1.5;
}

/* 캡차 영역 */
.wpmem_reg .wpmem_captcha {
    text-align: center;
    margin: 20px 0;
}

.wpmem_reg .wpmem_captcha img {
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* ==========================================================================
   wp-members 영문 텍스트 한글화 (CSS 방식)
   ========================================================================== */

/* Register 버튼 텍스트 교체 - 가장 확실한 방법들 */

/* 방법 1: 정확한 HTML 구조에 맞는 셀렉터 */
.button_div input[name="submit"][value="Register"],
.button_div input.buttons[value="Register"],
input[value="Register"],
input[type="submit"][value="Register"],
.buttons[value="Register"],
.cosmosfarm-members-form input[value="Register"],
.cosmosfarm-members-form input[type="submit"][value="Register"],
.cosmosfarm-members-form input.buttons[value="Register"],
#wpmem_register_form input[value="Register"] {
    text-indent: -9999px !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #007cba !important;
    color: transparent !important;
}

/* 방법 2: :before로 텍스트 오버레이 */
.button_div input[name="submit"][value="Register"]:before,
.button_div input.buttons[value="Register"]:before,
input[value="Register"]:before,
input[type="submit"][value="Register"]:before,
.buttons[value="Register"]:before,
.cosmosfarm-members-form input[value="Register"]:before,
.cosmosfarm-members-form input[type="submit"][value="Register"]:before,
.cosmosfarm-members-form input.buttons[value="Register"]:before,
#wpmem_register_form input[value="Register"]:before {
    content: "회원가입" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-indent: 0 !important;
    color: #fff !important;
    background: transparent !important;
}

/* 방법 3: 강제 텍스트 교체 (백업) */
input[value="Register"]::after,
.cosmosfarm-members-form input[value="Register"]::after {
    content: "회원가입" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 16px !important;
    color: #fff !important;
    z-index: 10 !important;
}

/* Required 텍스트 교체 - 실제 HTML에서 "Required" 텍스트 */
.cosmosfarm-members-form .req-text {
    font-size: 0;
}

.cosmosfarm-members-form .req-text:after {
    content: "필수 항목";
    font-size: 12px;
    color: #666;
}

/* 필수 표시 별표는 그대로 유지 */
.cosmosfarm-members-form .req {
    color: #dc3545;
    font-weight: bold;
}

/* Phone 라벨 한글화 - 더 간단한 방법 */
.cosmosfarm-members-form label[for="billing_phone"] {
    font-size: 0;
}

.cosmosfarm-members-form label[for="billing_phone"]:before {
    content: "전화번호";
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.cosmosfarm-members-form label[for="billing_phone"] .req {
    font-size: 14px;
}

/* 기타 영문 텍스트 한글화 */
.wpmem_reg legend:contains("Register") {
    font-size: 0;
}

.wpmem_reg legend:contains("Register"):after {
    content: "회원가입";
    font-size: 28px;
    font-weight: 600;
    color: #333;
}

/* 폼 제목이 Register인 경우 */
.wpmem_reg h3:contains("Register") {
    font-size: 0;
}

.wpmem_reg h3:contains("Register"):after {
    content: "회원가입";
    font-size: 28px;
    font-weight: 600;
    color: #333;
    display: block;
}

/* 로그인 링크 텍스트 */
.wpmem_reg a[href*="login"]:contains("Login") {
    font-size: 0;
}

.wpmem_reg a[href*="login"]:contains("Login"):after {
    content: "로그인";
    font-size: 14px;
    color: #007cba;
}


/* ==========================================================================
   Select2 스크립트 충돌 해결 (회원가입 페이지 '가입구분' 필드)
   ========================================================================== */

/* WooCommerce의 Select2 스크립트가 생성하는 가짜 드롭다운을 강제로 숨깁니다. */
#wpmem_register_form #UserRegistrationType + .select2-container {
    display: none !important;
}

/* 원래의 <select> 드롭다운을 다시 보이게 하고, 클릭 가능하도록 만듭니다. */
#wpmem_register_form select#UserRegistrationType {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    -webkit-appearance: menulist !important; /* 브라우저 기본 스타일로 복원 */
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    background-image: none !important;
}




/* 모바일 메뉴 로그인/로그아웃 링크 제어 */
.logged-in .mobile-login-link { display: none !important; }
.logged-out .mobile-logout-link { display: none !important; }
.logged-in .mobile-logout-link { display: block !important; }
.logged-out .mobile-login-link { display: block !important; }

/* 로그인/로그아웃 버튼 스타일링 */
.mobile-auth-text {
    background: linear-gradient(135deg, #007cba 0%, #0056b3 100%) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-align: center !important;
    display: inline-block !important;
    margin: 10px 0 !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 124, 186, 0.3) !important;
    width: 100% !important;
    max-width: 200px !important;
}

/* 참석등록 버튼 스타일링 (로그인/로그아웃과 동일) */
.mobile-attend-text {
    background: linear-gradient(135deg, #007cba 0%, #0056b3 100%) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-align: center !important;
    display: inline-block !important;
    margin: 10px 0 !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 124, 186, 0.3) !important;
    width: 100% !important;
    max-width: 200px !important;
}

/* 버튼 호버 효과 */
.mobile-auth-link:hover .mobile-auth-text,
.mobile-attend-link:hover .mobile-attend-text {
    background: linear-gradient(135deg, #005a87 0%, #003d73 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 124, 186, 0.4) !important;
}

/* 버튼을 감싸는 li 스타일 */
.mobile-auth-button,
.mobile-attend-button {
    padding: 15px 30px !important;
    text-align: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 버튼 링크 스타일 조정 */
.mobile-auth-link,
.mobile-attend-link {
    display: block !important;
    text-align: center !important;
}

/* ==========================================================================
   영수증 다운로드 버튼 스타일
   ========================================================================== */

/* 주문 목록 페이지 버튼 간격 조정 */
.woocommerce-orders-table .woocommerce-orders-table__cell--actions .woocommerce-button {
    margin-right: 8px !important;
}

.woocommerce-orders-table .woocommerce-orders-table__cell--actions .woocommerce-button:last-child {
    margin-right: 0 !important;
}

/* 영수증 버튼과 다른 버튼들 사이 간격 */
.woocommerce-orders-table .woocommerce-orders-table__cell--actions .woocommerce-button + .woocommerce-button {
    margin-left: 4px !important;
}