/**
 * HJ Login - Phone Number Display Styles
 */

/* Admin User Profile Phone Section */
.form-table .hj-phone-status {
    padding: 10px;
    background: #f0f8ff;
    border-left: 4px solid #2271b1;
    margin-top: 10px;
}

/* My Account Phone Display */
.hj-phone-display-box {
    background: #f7f7f7;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 3px;
}

.hj-phone-display-box strong {
    color: #333;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

.hj-phone-display-box .phone-number {
    font-size: 16px;
    color: #2271b1;
    font-weight: 500;
}

.hj-phone-display-box .phone-note {
    color: #666;
    font-size: 12px;
    margin-top: 8px;
    font-style: italic;
}

/* Read-only phone field styling */
input[readonly].hj-phone-readonly {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
    color: #555;
}

/* Admin Users List Phone Column */
.column-hj_phone {
    width: 120px;
}

/* Registration Form */
.woocommerce-form-register .phone-or-email-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 3px;
    color: #856404;
}

/* Dynamic field requirement indicators */
.field-requirement-dynamic .required {
    transition: opacity 0.3s ease;
}

.field-requirement-dynamic .required.hidden {
    opacity: 0;
    display: none;
}

/* Checkout form phone priority */
.woocommerce-billing-fields .form-row.phone-priority {
    order: -1;
}

/* Account details phone display */
.woocommerce-account .phone-info-readonly {
    position: relative;
}

.woocommerce-account .phone-info-readonly::after {
    content: '\f023';
    font-family: dashicons;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* Validation messages */
.phone-validation-error {
    color: #e2401c;
    font-size: 0.9em;
    margin-top: 5px;
}

.phone-validation-success {
    color: #0f834d;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Phone icon */
.hj-phone-icon::before {
    content: '\f525';
    font-family: dashicons;
    margin-right: 5px;
    vertical-align: middle;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    .hj-phone-display-box {
        padding: 10px;
    }
    
    .column-hj_phone {
        width: 100px;
    }
}