/*
 Theme Name: Blocksy Child
 Theme URI: https://coachtrang.com/blocksy-child/
 Template: blocksy
 Author: Coach Trang
 Author URI: https://coachtrang.com
 Description: A child theme for Blocksy, customized for specific functionality like numerology calculator on coachtrang.com.
 Version: 1.0.0
 Text Domain: blocksy-child
*/

/* ==== Numerology Form Styling ==== */
.numerology-calculator {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.wpcf7-form p {
    margin: 0;
}

.wpcf7-form label {
    font-weight: bold;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
    padding: 8px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

.wpcf7-form input[type="submit"] {
    padding: 12px;
    font-size: 16px;
    background-color: #951ABE;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #005177;
}

#numerology-results {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

#numerology-results h4 {
    margin: 10px 0 5px;
    font-size: 1.2em;
}

#numerology-results p {
    margin: 5px 0;
}
/* ==== Căn giữa kết quả trên desktop ==== */
#numerology-results {
    max-width: 700px;
    margin: 30px auto; /* Căn giữa */
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* ==== Responsive Enhancements ==== */
@media (max-width: 768px) {
    .numerology-calculator {
        padding: 15px;
    }

    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="submit"] {
        font-size: 15px;
        padding: 10px;
    }

    #numerology-results h4 {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .numerology-calculator {
        padding: 10px;
    }

    .wpcf7-form input[type="submit"] {
        font-size: 14px;
        padding: 10px 14px;
    }

    #numerology-results {
        font-size: 15px;
    }
}