/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

.blue-b4::before{
	width:50px;
	height:50px;
	background:var(--BabyBlue);
	content:"";
	position:absolute;
	border-radius:7px;
	top:-20px;
	left:-20px;
}


.green-b4::before{
	width:50px;
	height:50px;
	background:var(--Green);
	content:"";
	position:absolute;
	border-radius:7px;
	top:-20px;
	left:-20px;
}


.blue-aft::after{
	width:50px;
	height:50px;
	background:var(--BabyBlue);
	content:"";
	position:absolute;
	border-radius:7px;
	bottom:-20px;
	right:-20px;
}

.green-aft::after{
	width:50px;
	height:50px;
	background:var(--Green);
	content:"";
	border-radius:7px;
	position:absolute;
	bottom:-20px;
	right:-20px;
}


a{
	color:inherit;
}
/* ============================================================
   Smileworthy Orthodontics — Virtual Consult File Upload Styling
   Scoped entirely to: #virtual-consult-form
   Paste into: Elementor > Custom CSS (Page or Global)
   ============================================================ */

/* ── 1. Hide the default browser file input ── */
#virtual-consult-form .elementor-field-type-upload .elementor-upload-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* ── 2. Make the field-group a positioned container ── */
#virtual-consult-form .elementor-field-type-upload.elementor-field-group {
  position: relative;
  min-height: 100px;
}

/* ── 3. Style the label above each upload zone ── */
#virtual-consult-form .elementor-field-type-upload .elementor-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a8cdd8;
  margin-bottom: 6px;
}

/* ── 4. Build the visible upload zone via ::after ── */
#virtual-consult-form .elementor-field-type-upload.elementor-field-group::after {
  content: "📷  Tap to upload";
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  padding: 12px 10px;
  background: rgba(168, 205, 216, 0.10);
  border: 2px dashed rgba(168, 205, 216, 0.45);
  border-radius: 10px;
  color: #a8cdd8;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* ── 5. Hover state ── */
#virtual-consult-form .elementor-field-type-upload.elementor-field-group:hover::after {
  background: rgba(168, 205, 216, 0.18);
  border-color: rgba(168, 205, 216, 0.75);
  color: #ffffff;
}

/* ── 6. Focus state (keyboard navigation) ── */
#virtual-consult-form .elementor-field-type-upload.elementor-field-group:focus-within::after {
  border-color: #e6b2b8;
  background: rgba(230, 178, 184, 0.12);
  color: #e6b2b8;
}

/* ── 7. File selected state (.has-file added via JS snippet below) ── */
#virtual-consult-form .elementor-field-type-upload.elementor-field-group.has-file::after {
  content: "✓  Photo selected";
  background: rgba(54, 101, 96, 0.25);
  border-color: rgba(54, 101, 96, 0.7);
  border-style: solid;
  color: #7ecfc0;
}

/* ── 8. Error state (Elementor adds .elementor-error on failed submit) ── */
#virtual-consult-form .elementor-field-type-upload.elementor-field-group.elementor-error::after {
  border-color: rgba(230, 178, 184, 0.9);
  background: rgba(230, 178, 184, 0.12);
  color: #e6b2b8;
  content: "⚠  Photo required";
}

/* ── 9. Tighten column padding on the 3-up grid ── */
#virtual-consult-form .elementor-field-type-upload.elementor-col-33 {
  padding-left: 6px;
  padding-right: 6px;
}
/* =========================================
   Elementor Form Waiting Animation
   Smile Worthy Orthodontics
   ========================================= */

@keyframes spin {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(180deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Lock the form while waiting ---- */
.elementor-form-waiting {
  position: relative;
  pointer-events: none; /* disable all field interaction */
}

/* ---- Semi-transparent overlay to visually block fields ---- */
.elementor-form-waiting::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #244357BF;
  border-radius: inherit;
  z-index: 10;
  animation: overlay-in 0.3s ease both;
}

/* ---- Floating ring spinner centered over the form ---- */
.elementor-form-waiting::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  margin-left: -28px;
  border-radius: 50%;
  border: 5px solid rgba(205, 139, 146, 0.25);
  border-top-color: #cd8b92;
  border-right-color: #366560;
  z-index: 11; /* above the overlay */
  animation: spin 1s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(36, 67, 87, 0.15);
}