/* =============================================
   Signup Page Styles - CoinShot Biz Design System
   ============================================= */

/* Color Variables */
:root {
    --color-primary: #0F2B44;
    --color-primary-light: #1A3A5C;
    --color-brand: #00CC4C;
    --color-brand-dark: #00B343;
    --color-error: #FF5B5B;
    --color-error-light: #FFF0F0;
    --color-success: #00CC4C;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #E8E8E8;
    --color-gray-300: #DEDEDE;
    --color-gray-400: #CCCCCC;
    --color-gray-500: #999999;
    --color-gray-600: #666666;
    --color-gray-700: #333333;
    --color-white: #FFFFFF;
    --color-black: #000000;
}

/* =============================================
   Step 1 - 기업유형 선택
   ============================================= */

/* Layout */
.signup-wrapper {
    min-height: calc(100vh - 80px - 220px);
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 100px 20px 60px;
}

.signup-container {
    width: 100%;
    max-width: 486px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Header */
.signup-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.signup-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    color: #3a3a3a;
    text-align: center;
}

.signup-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #4e4e4e;
    text-align: center;
}

/* Step Progress */
.step-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-progress .step-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #00CC4C;
}

.step-bars {
    display: flex;
    gap: 4px;
    align-items: center;
}

.step-bar {
    height: 6px;
    width: 16px;
    border-radius: 5px;
    background-color: #e6e6e6;
}

.step-bar.active {
    width: 24px;
    background-color: #00CC4C;
}

/* Form */
.signup-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-label {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #3a3a3a;
}

/* Custom Select */
.custom-select {
    position: relative;
}

.select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    background-color: #f6f6f6;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    border: 1px solid transparent;
}

.select-display:hover {
    background-color: #f0f0f0;
}

.custom-select.open .select-display {
    border-color: #1a1a1a;
    background-color: #fff;
}

.select-placeholder {
    font-size: 16px;
    color: #999;
    line-height: 24px;
}

.select-value {
    font-size: 16px;
    color: #3a3a3a;
    line-height: 24px;
}

.select-arrow {
    color: #999;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.custom-select.open .select-arrow {
    transform: rotate(180deg);
}

.select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    z-index: 10;
    max-height: 440px;
    overflow-y: auto;
    padding: 10px 12px;
}

.custom-select.open .select-dropdown {
    display: block;
}

.select-option {
    padding: 8px 16px;
    font-size: 14px;
    color: #4F5968;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s;
}

.select-option:hover {
    background-color: #F3F5F9;
    font-weight: 500;
}

.select-option.selected {
    background-color: #F3F5F9;
    font-weight: 500;
}

/* Business Type Cards */
.biz-type-cards {
    display: flex;
    gap: 16px;
}

.biz-type-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 220px;
    padding: 20px 12px;
    background-color: #f6f6f6;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

.biz-type-card:hover {
    background-color: #f0f0f0;
}

.biz-type-card.selected {
    border-color: #00CC4C;
    background-color: #E8FFEE;
}

.card-img {
    width: 140px;
    height: 140px;
    position: relative;
    overflow: hidden;
}

.card-img img {
    position: absolute;
    width: 228%;
    height: 152%;
    max-width: none;
}

.card-img img.sprite-individual {
    left: -16%;
    top: -25%;
}

.card-img img.sprite-corporate {
    left: -125%;
    top: -25%;
}

.card-label {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #3a3a3a;
    text-align: center;
}

/* Next Button */
.btn-next {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-next:disabled {
    background-color: #d3d3d3;
    color: #fff;
    cursor: not-allowed;
}

.btn-next:not(:disabled) {
    background-color: #0F2A44;
    color: #fff;
}

.btn-next:not(:disabled):hover {
    background-color: #1A3A5C;
}

/* =============================================
   Common Signup Form Styles (Step 2~4)
   ============================================= */

/* Main Content */
.signup-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    background: var(--color-white);
}

/* Form Section */
.form-group {
    position: relative;
}

.form-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 12px;
}

.form-label .required {
    color: var(--color-error);
    margin-left: 2px;
}

/* Select Input */
.form-select {
    width: 100%;
    height: 56px;
    padding: 0 48px 0 20px;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    font-size: 16px;
    color: var(--color-gray-700);
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center;
    background-size: 20px;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-select.placeholder {
    color: var(--color-gray-500);
}

/* Text Input */
.form-input {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    font-size: 16px;
    color: var(--color-gray-700);
    background: var(--color-white);
    transition: border-color 0.2s;
}

.form-input::placeholder {
    color: var(--color-gray-500);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-input.error {
    border-color: var(--color-error);
    background: var(--color-error-light);
}

.form-input.success {
    border-color: var(--color-success);
}

.form-input:disabled {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

/* Input with Button */
.input-with-button {
    display: flex;
    gap: 8px;
}

.input-with-button .form-input {
    flex: 1;
}

.input-with-button .btn-verify {
    flex-shrink: 0;
    min-width: 80px;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    background: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.input-with-button .btn-verify:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.input-with-button .btn-verify.verified {
    border-color: var(--color-success);
    color: var(--color-success);
    background: #F0FFF4;
}

.input-with-button .btn-verify:disabled {
    border-color: var(--color-gray-300);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

/* Validation Message */
.validation-msg {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.validation-msg.error {
    color: var(--color-error);
}

.validation-msg.success {
    color: var(--color-success);
}

.validation-msg.info {
    color: var(--color-gray-600);
}

/* Password Conditions */
.password-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.condition-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: 4px;
    font-size: 13px;
    color: var(--color-gray-600);
    background: var(--color-white);
}

.condition-tag.valid {
    border-color: var(--color-success);
    color: var(--color-success);
    background: #F0FFF4;
}

.condition-tag .check-icon {
    width: 14px;
    height: 14px;
}

/* Business Type Cards (Legacy) */
.business-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.business-type-card {
    padding: 40px 24px;
    border: 2px solid var(--color-gray-200);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.business-type-card:hover {
    border-color: var(--color-primary);
    background: #F8FAFC;
}

.business-type-card.selected {
    border-color: var(--color-primary);
    background: #F0F4F8;
}

.business-type-card .card-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.business-type-card .card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.business-type-card .card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray-700);
}

/* Terms Agreement */
.terms-section {
    border-top: 1px solid var(--color-gray-200);
    padding-top: 24px;
}

.terms-all {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 16px;
}

.terms-all .checkbox-custom {
    width: 24px;
    height: 24px;
}

.terms-all .terms-all-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-700);
    cursor: pointer;
}

.terms-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.terms-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.terms-item .checkbox-custom {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.terms-item .terms-label {
    flex: 1;
    font-size: 14px;
    color: var(--color-gray-600);
    cursor: pointer;
}

.terms-item .terms-label .badge {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 4px;
}

.terms-item .terms-label .badge.required {
    background: var(--color-error);
    color: var(--color-white);
}

.terms-item .terms-label .badge.optional {
    background: var(--color-gray-500);
    color: var(--color-white);
}

.terms-item .view-link {
    font-size: 13px;
    color: var(--color-gray-500);
    text-decoration: underline;
    cursor: pointer;
}

/* Custom Checkbox */
.checkbox-custom {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.checkbox-custom:checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.checkbox-custom:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 16px;
}

.btn-submit.disabled,
.btn-submit:disabled {
    background: var(--color-gray-300);
    color: var(--color-white);
    cursor: not-allowed;
}

.btn-submit.active {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-submit.active:hover {
    background: var(--color-primary-light);
}

/* Button Group Horizontal */
.btn-group-horizontal {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.btn-group-horizontal .btn-prev {
    flex: 1;
    height: 56px;
    border: 1px solid var(--color-gray-300);
    border-radius: 12px;
    background: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-group-horizontal .btn-prev:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-group-horizontal .btn-submit {
    flex: 1;
    margin-top: 0;
}

/* Email Verification Modal */
.email-verify-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.email-verify-modal.show {
    opacity: 1;
    visibility: visible;
}

.email-verify-content {
    width: 90%;
    max-width: 480px;
    background: var(--color-white);
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
}

.email-verify-content .logo {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
}

.email-verify-content .logo .biz {
    color: var(--color-primary);
}

.email-verify-content .logo .shot {
    color: var(--color-brand);
}

.email-verify-content h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 8px;
    line-height: 1.4;
}

.email-verify-content .verify-icon {
    width: 200px;
    height: 200px;
    margin: 32px auto;
}

.email-verify-content .verify-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Modal: common.css의 .modal-* 스타일을 공통 사용 */

/* =============================================
   Step 2 - 계정 정보 입력
   ============================================= */

/* Input Fields */
.signup-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: #f6f6f6;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    color: #3a3a3a;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}

.signup-input::placeholder {
    color: #999;
}

.signup-input:focus {
    outline: none;
    border-color: #1a1a1a;
    background-color: #fff;
}

.signup-input.error {
    border-color: #FF5B5B;
}

.signup-input:disabled {
    color: #999;
}


/* Password Condition Tags → common.css의 cs-pw-conditions / cs-pw-tag 사용 */

/* Input + Button Row */
.input-row {
    display: flex;
    gap: 8px;
}

.input-row .signup-input {
    flex: 1;
    min-width: 0;
}

/* 휴대폰 입력 앞 국가 국기 + 전화코드 prefix */
.phone-prefix {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 14px;
    background-color: #f6f6f6;
    border: 1px solid transparent;
    border-radius: 12px;
    white-space: nowrap;
    font-size: 15px;
    color: #1a1a1a;
}

.phone-prefix .flag {
    width: 20px;
    height: 20px;
}

.phone-prefix-code {
    font-weight: 500;
}

.signup-btn-sub {
    flex-shrink: 0;
    height: 48px;
    padding: 0 16px;
    background-color: #f6f6f6;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.signup-btn-sub:hover {
    background-color: #eee;
}

.signup-btn-sub.active {
    background-color: #0F2A44;
    color: #fff;
}

.signup-btn-sub.active:hover {
    background-color: #1A3A5C;
}

.signup-btn-sub.verified {
    background-color: #f6f6f6;
    color: #999;
    cursor: default;
    pointer-events: none;
}

/* Field Message */
.field-msg {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    min-height: 0;
}

.field-msg:empty {
    display: none;
}

.field-msg.error {
    color: #FF6262;
}

.field-msg.success {
    color: #00CC4C;
}

.field-msg.info {
    color: #3a3a3a;
}

/* Terms Agreement */
.terms-agree {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.terms-agree-all {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.terms-agree-all-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #3a3a3a;
}

.terms-agree-divider {
    height: 1px;
    background-color: #e6e6e6;
}

.terms-agree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.terms-agree-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #999;
}

/* 약관 상세 보기 버튼 (항목 토글과 분리) */
.terms-view-btn {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 2px;
    font-size: 13px;
    color: #999;
    text-decoration: underline;
    cursor: pointer;
}

.terms-view-btn:hover {
    color: #3a3a3a;
}

.terms-icon {
    flex-shrink: 0;
}

/* Terms checked state */
.terms-agree-all.checked .terms-icon circle,
.terms-agree-item.checked .terms-icon circle {
    stroke: #00CC4C;
    fill: #00CC4C;
}

.terms-agree-all.checked .terms-icon polyline,
.terms-agree-item.checked .terms-icon polyline {
    stroke: #fff;
}

.terms-agree-item.checked .terms-agree-text {
    color: #3a3a3a;
}

/* =============================================
   Step 3 - 기업 정보 입력
   ============================================= */

/* Step3 Form Layout (60px between groups, 24px within groups) */
.step3-form {
    gap: 60px;
}

.form-group-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Industry Fields Group (1차, 2차, 3차 통합) */
.industry-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Readonly Input Display */
.signup-input.readonly {
    display: flex;
    align-items: center;
    cursor: default;
    font-weight: 500;
}

/* Input Error Message (Step 3) */
.input-error-msg {
    display: none;
    font-size: 14px;
    line-height: 20px;
    color: #FF6262;
}

.input-error-msg.show {
    display: block;
}

/* Date Input */
.input-date-wrap {
    position: relative;
}

.input-date-wrap .signup-input {
    padding-right: 48px;
    cursor: pointer;
    font-weight: 500;
}

.date-picker-native {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.date-picker-native::-webkit-calendar-picker-indicator {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Double Button Layout (이전 + 다음) */
.btn-double {
    display: flex;
    gap: 8px;
}

.btn-prev-outline {
    flex: 1;
    height: 48px;
    border: 1px solid #0F2A44;
    border-radius: 12px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 600;
    color: #0F2A44;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-prev-outline:hover {
    background-color: #f6f6f6;
}

.btn-double .btn-next {
    flex: 0 0 60%;
}

/* Multi-Select Display */
.multi-select .select-display {
    padding: 6px 16px;
    min-height: 48px;
    height: auto;
}

.select-tags-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.select-tags-area .select-placeholder {
    line-height: 36px;
}

/* Country Tag Chip */
.country-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 12px;
    background-color: #E6E6E6;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #3A3A3A;
    line-height: 24px;
    white-space: nowrap;
}

.country-tag .tag-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.country-tag .tag-close svg {
    width: 16px;
    height: 16px;
}

/* Country Select Dropdown */
.country-dropdown {
    padding: 10px 12px;
}

.country-search-wrap {
    position: relative;
    margin-bottom: 4px;
}

.country-search-input {
    width: 100%;
    height: 36px;
    padding: 8px 40px 8px 16px;
    border: 1px solid #D3D3D3;
    border-radius: 6px;
    font-size: 14px;
    color: #3A3A3A;
    background: #fff;
    box-sizing: border-box;
    line-height: 20px;
}

.country-search-input::placeholder {
    color: #999;
}

.country-search-input:focus {
    outline: none;
    border-color: #999;
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.country-options {
    max-height: 288px; /* 8 items × 36px (padding 8+8 + line-height 20) */
    overflow-y: auto;
}

.country-name-match {
    font-weight: 700;
    color: inherit;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #4F5968;
    line-height: 20px;
}

.country-option:hover {
    background-color: #F3F5F9;
    font-weight: 500;
}

.country-option.selected {
    background-color: #F3F5F9;
    font-weight: 500;
}

.country-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    background-color: #F6F6F6;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

.country-option.selected .country-checkbox {
    background-color: #E8FFEE;
    border-color: #00CC4C;
}

.country-option.selected .country-checkbox::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 8px;
    height: 5px;
    border-left: 1.5px solid #00CC4C;
    border-bottom: 1.5px solid #00CC4C;
    transform: rotate(-45deg);
}

/* =============================================
   Step 4 - 대표자 정보 입력
   ============================================= */

/* Step4 Form Layout (24px between all sections) */
.step4-form {
    gap: 24px;
}

/* Address Fields Group */
.address-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Address Search Button */
.btn-address-search {
    flex-shrink: 0;
    height: 48px;
    padding: 0 20px;
    background-color: #0F2A44;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.btn-address-search:hover {
    background-color: #1A3A5C;
}

/* Nationality Single-Select Option (no checkbox) */
.nationality-option {
    gap: 0;
}

/* =============================================
   Signup Complete Page
   ============================================= */

.complete-container {
    align-items: center;
    gap: 40px;
    max-width: 660px;
}

.complete-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.complete-logo-coinshot {
    height: 32px;
    width: auto;
}

.complete-logo-biz {
    height: 24px;
    width: auto;
}

.complete-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.complete-illustration {
    position: relative;
    width: 100%;
    max-width: 657px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.complete-globe {
    width: 320px;
    height: 320px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.complete-confetti {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.btn-start {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #0F2A44;
    color: #fff;
    max-width: 486px;
}

.btn-start:hover {
    background-color: #1A3A5C;
    text-decoration: none;
}

/* =============================================
   Email Verified Page
   ============================================= */

.email-verified-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.email-verified-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.verified-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 32px;
}

.verified-logo-coinshot {
    height: 32px;
    width: auto;
}

.verified-logo-biz {
    height: 24px;
    width: auto;
}

.verified-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    color: #3a3a3a;
    margin: 0 0 60px;
}

.verified-error {
    color: #e53e3e;
}

.verified-img {
    max-width: 320px;
}

.verified-img img {
    width: 100%;
    height: auto;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 540px) {
    .signup-wrapper {
        padding: 60px 16px 40px;
    }

    .signup-container {
        gap: 40px;
    }

    .signup-title {
        font-size: 24px;
        line-height: 32px;
    }

    .signup-desc {
        font-size: 14px;
        line-height: 22px;
    }

    .signup-desc br {
        display: none;
    }

    .section-label {
        font-size: 16px;
    }

    .biz-type-cards {
        flex-direction: column;
    }

    .biz-type-card {
        height: auto;
        flex-direction: row;
        padding: 16px;
        gap: 12px;
    }

    .card-img {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .business-type-grid {
        grid-template-columns: 1fr;
    }

    .email-verify-content {
        padding: 32px 24px;
    }
}

@media (max-width: 480px) {
    .form-input,
    .form-select,
    .input-with-button .btn-verify {
        height: 48px;
    }

    .btn-submit {
        height: 52px;
        font-size: 16px;
    }
}