:root {{ --vet-teal: #008080; --vet-teal-dark: #006666; --vet-green: #27ae60; --vet-border: #ddd; }} body.vet-template {{ background-color: #f0f2f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }} .vet-card-container * {{ box-sizing: border-box; margin: 0; padding: 0; }} .vet-card-container {{ max-width: 450px; margin: 0 auto; background-color: #fff; padding-bottom: 150px; min-height: 100vh; position: relative; }} .vet-card-header {{ height: 180px; background: linear-gradient(135deg, var(--vet-teal), #00a1a1); }} .vet-card-body {{ padding: 0 25px 25px; text-align: center; margin-top: -75px; position: relative; }} .vet-profile-picture {{ width: 150px; height: 150px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); object-fit: cover; background-color: #e0e0e0; margin: 0 auto; display: block; z-index: 2; }} .vet-main-info {{ padding-top: 20px; }} .vet-main-info h1 {{ font-size: 26px; color: #333; }} .vet-main-info .vet-specialty {{ font-size: 18px; color: var(--vet-teal); margin: 4px 0 10px; }} .vet-main-info .vet-location {{ display: flex; justify-content: center; align-items: center; gap: 6px; color: #777; }} .vet-description {{ margin: 25px 0; color: #555; line-height: 1.6; text-align: left; }} .vet-contact-actions {{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0; }} .vet-contact-actions a {{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 10px; border-radius: 12px; text-decoration: none; color: #fff; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.2s ease; font-size: 14px; }} .vet-contact-actions a i {{ font-size: 22px; margin-bottom: 8px; }} .btn-whatsapp {{ background-color: #25D366; }} .btn-phone {{ background-color: #3498DB; }} .btn-email {{ background-color: #E74C3C; }} .vet-socials h2, .vet-registration-form h2 {{ font-size: 14px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }} .vet-socials ul {{ list-style: none; }} .vet-socials a {{ display: flex; align-items: center; padding: 15px; background-color: #f8f8f8; border-radius: 10px; text-decoration: none; color: #333; font-weight: 500; margin-bottom: 12px; }} .vet-socials a i:first-child {{ font-size: 22px; margin-right: 15px; width: 25px; text-align: center; }} .vet-socials a span {{ flex-grow: 1; }} .vet-socials a .fa-chevron-right {{ color: #ccc; }} .vet-save-contact-wrapper {{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 25px; }} .vet-save-contact-wrapper a {{ display: block; width: 100%; padding: 15px; background-color: var(--vet-teal); color: #fff; text-align: center; text-decoration: none; font-weight: 700; font-size: 16px; border-radius: 12px; }} .vet-card-footer {{ text-align: center; padding: 20px 0 10px; font-size: 14px; color: #aaa; }} .vet-card-footer a {{ color: var(--vet-teal); text-decoration: none; font-weight: 600; }} .vet-registration-form {{ max-width: 600px; margin: 2em auto; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }} .vet-form-field {{ margin-bottom: 20px; }} .vet-form-field label {{ font-weight: 600; color: #444; }} .vet-form-field input, .vet-form-field textarea {{ width: 100%; padding: 12px; border: 1px solid var(--vet-border); border-radius: 6px; margin-top: 8px; }} .vet-form-field input:focus {{ border-color: var(--vet-green); }} .vet-form-submit {{ background: var(--vet-green); color: #fff; padding: 12px 25px; border: none; border-radius: 6px; font-size: 1.1em; cursor: pointer; }} .vet-form-message {{ padding: 15px; border-radius: 6px; margin-bottom: 20px; border-left: 5px solid; }} .vet-form-message.success {{ background-color: #eaf8f1; border-color: var(--vet-green); color: #229954; }} .vet-form-message.error {{ background-color: #fbeae5; border-color: #d9534f; color: #d9534f; }}