/* Stronger styles for FAB and overlay to avoid theme overrides */

/* Wrapper FAB: fixed position, high z-index */
.custom-fab-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 5; /* very high but not extreme */
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  pointer-events: none; /* container doesn't block, inner items enable pointer-events */
}

/* ensure inner items accept pointer events */
.custom-fab-wrapper * { pointer-events: auto !important; }

/* Main FAB */
.fab-main {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background-color: #C00A27 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
  transition: transform 0.25s ease, background-color 0.25s ease !important;
  font-size: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

/* icon colors */
.fab-main i { color: #fff !important; line-height:1; }

/* rotate when active */
.fab-main.active { transform: rotate(45deg) !important; }

/* FAB Menu container (hidden by default) */
.fab-menu {
  display: none !important;
  flex-direction: column !important;
  margin-bottom: 10px !important;
  align-items: center !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

/* Show the menu container when .show present */
.fab-menu.show {
  display: flex !important;
}

/* items hidden by default (animated) */
.fab-item {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background-color: #C00A27 !important;
  color: #FF9401 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  opacity: 0 !important;
  transform: translateY(12px) scale(0.95) !important;
  pointer-events: none !important;
  margin-bottom: 8px !important;
  transition: transform 0.22s ease, opacity 0.22s ease, background 0.22s ease !important;
}

/* When parent has show, reveal items */
.fab-menu.show .fab-item {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Hover */
.fab-item:hover { background-color: #005353 !important; color: #ffffff !important; }
.fab-item i { color: #fff !important; }
.fab-item:hover i { color: #fff !important; }

/* Always show call button (if you want it visible even when menu closed, change here) */
.fab-call { display: flex !important; }

/* Form overlay */
.custom-form-wrapper {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100000 !important;
}
.custom-form {
  background: #fff !important;
  padding: 25px !important;
  border-radius: 16px !important;
  max-width: 420px !important;
  width: 92% !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
  text-align: center !important;
}
.custom-form h3 { margin-bottom: 18px !important; color: #333 !important; }
.custom-form input, .custom-form textarea {
  width: 100% !important;
  margin-bottom: 12px !important;
  padding: 10px !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}
.form-actions { display: flex !important; }
.form-actions button {
  flex: 1 !important;
  padding: 12px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  background: #C00A27 !important;
  color: #fff !important;
  transition: background 0.25s !important;
}
.form-actions button:hover { background: #005353 !important; }
#formMessage { font-size: 14px !important; color: #000 !important; margin-top:10px !important; }

input[name="phone"] {
    text-align: right;   /* متن وارد شده راست‌چین */
    direction: rtl;      /* جهت متن راست به چپ */
}

input[name="phone"]::placeholder {
    text-align: right;   /* راست‌چین کردن placeholder */
    direction: rtl;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .custom-fab-wrapper { right: 12px !important; bottom: 70px !important; }
  .fab-item, .fab-main { width:44px !important; height:44px !important; font-size:18px !important; }
  .custom-form { max-width: 95% !important; padding:16px !important; }
}