/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import CreateOrderFooter from "./CreateOrderFooter";
import SelectOptions, { OptionType } from "../../../TextField/SelectOptions";
import InternationalPhoneInput from "../../../TextField/InternationalPhoneInput";
import { useAppSelector } from "@/Redux/Hooks";
import {
  getMasterList,
  getInternationalCities,
} from "../../../../Api/MastersApi";
import { initiateInternationalDraftOrder } from "../../../../Api/InternationalOrderApi";
import { resolveCountryCode } from "../../../../lib/Helper";

type Step3Props = {
  onSave: (data: any) => void;
  step: number;
  setStep: React.Dispatch<React.SetStateAction<number>>;
  defaultOrderDetails: any;
  isEditMode?: boolean;
};

const Step3: React.FC<Step3Props> = ({
  onSave,
  step,
  setStep,
  defaultOrderDetails,
  isEditMode,
}) => {
  const createOrderData: any = useAppSelector((state) => state.createOrder);
  const step1Data = createOrderData?.step1;
  const step3Data = createOrderData?.step3;
  console.log(createOrderData?.step1, 'createOrderData?.step1')
  const [isLoading, setIsLoading] = useState<boolean>(false);

  // --- Sender State ---
  const [senderName, setSenderName] = useState<string>(
    step3Data?.senderName || ""
  );
  const [senderTaxId, setSenderTaxId] = useState<string>(
    step3Data?.senderTaxId || ""
  );
  const [senderCountry, setSenderCountry] = useState<OptionType | null>(
    step3Data?.senderCountry || step1Data?.fromCountry || null
  );
  const [senderCity, setSenderCity] = useState<OptionType | null>(
    step3Data?.senderCity || step1Data?.fromCity || null
  );
  const [senderState, setSenderState] = useState<string>(
    step3Data?.senderState || ""
  );
  const [senderPostalCode, setSenderPostalCode] = useState<string>(
    step3Data?.senderPostalCode || ""
  );
  const [senderPhone, setSenderPhone] = useState<string>(
    step3Data?.senderPhone || ""
  );
  const [senderAltPhone, setSenderAltPhone] = useState<string>(
    step3Data?.senderAltPhone || ""
  );
  const [senderEmail, setSenderEmail] = useState<string>(
    step3Data?.senderEmail || ""
  );
  const [senderAddress, setSenderAddress] = useState<string>(
    step3Data?.senderAddress || ""
  );
  const [senderAddress2, setSenderAddress2] = useState<string>(
    step3Data?.senderAddress2 || ""
  );
  const [saveSender, setSaveSender] = useState<boolean>(
    step3Data?.saveSender ?? false
  );

  // --- Receiver State ---
  const [receiverName, setReceiverName] = useState<string>(
    step3Data?.receiverName || ""
  );
  const [receiverTaxId, setReceiverTaxId] = useState<string>(
    step3Data?.receiverTaxId || ""
  );
  const [receiverCountry, setReceiverCountry] = useState<OptionType | null>(
    step3Data?.receiverCountry || step1Data?.toCountry || null
  );
  const [receiverCity, setReceiverCity] = useState<OptionType | null>(
    step3Data?.receiverCity || step1Data?.toCity || null
  );
  const [receiverState, setReceiverState] = useState<string>(
    step3Data?.receiverState || ""
  );
  const [receiverPostalCode, setReceiverPostalCode] = useState<string>(
    step3Data?.receiverPostalCode || ""
  );
  const [receiverPhone, setReceiverPhone] = useState<string>(
    step3Data?.receiverPhone || ""
  );
  const [receiverAltPhone, setReceiverAltPhone] = useState<string>(
    step3Data?.receiverAltPhone || ""
  );
  const [receiverEmail, setReceiverEmail] = useState<string>(
    step3Data?.receiverEmail || ""
  );
  const [receiverAddress, setReceiverAddress] = useState<string>(
    step3Data?.receiverAddress || ""
  );
  const [receiverAddress2, setReceiverAddress2] = useState<string>(
    step3Data?.receiverAddress2 || ""
  );
  const [saveReceiver, setSaveReceiver] = useState<boolean>(
    step3Data?.saveReceiver ?? false
  );

  // --- Lists ---
  const [countries, setCountries] = useState<OptionType[]>([]);
  const [senderCities, setSenderCities] = useState<OptionType[]>([]);
  const [receiverCities, setReceiverCities] = useState<OptionType[]>([]);

  // --- Effects ---
  useEffect(() => {
    const fetchCountries = async () => {
      try {
        const response = await getMasterList("country");
        if (response?.status) {
          const countryOptions = response.data.map((c: any) => ({
            value: c.id,
            label: c.name,
            code: c.code ?? c.shortCode,
            name: c.name,
            id: c.id,
          }));
          setCountries(countryOptions);
        }
      } catch (err) {
        console.error("Error fetching countries:", err);
      }
    };
    fetchCountries();
  }, []);

  // helper to fetch cities
  const fetchCitiesFor = async (
    country: OptionType | null,
    setCities: React.Dispatch<React.SetStateAction<OptionType[]>>
  ) => {
    if (!country) {
      setCities([]);
      return;
    }
    try {
      const response = await getInternationalCities({
        country_id: country.value,
      });
      if (response?.status) {
        setCities(
          response.data.map((c: any) => ({
            value: c.id,
            label: c.name,
            name: c.name,
            id: c.id,
          }))
        );
      } else {
        setCities([]);
      }
    } catch (err) {
      console.error("Error fetching cities:", err);
      setCities([]);
    }
  };

  useEffect(() => {
    fetchCitiesFor(senderCountry, setSenderCities);
  }, [senderCountry]);

  useEffect(() => {
    fetchCitiesFor(receiverCountry, setReceiverCities);
  }, [receiverCountry]);

  // --- Handlers ---
  const handleClearSender = () => {
    setSenderName("");
    setSenderTaxId("");
    // Keep country/city as they are likely correct from Step 1
    setSenderState("");
    setSenderPostalCode("");
    setSenderPhone("");
    setSenderAltPhone("");
    setSenderEmail("");
    setSenderAddress("");
    setSenderAddress2("");
  };

  const handleClearReceiver = () => {
    setReceiverName("");
    setReceiverTaxId("");
    // Keep country/city as they are likely correct from Step 1
    setReceiverState("");
    setReceiverPostalCode("");
    setReceiverPhone("");
    setReceiverAltPhone("");
    setReceiverEmail("");
    setReceiverAddress("");
    setReceiverAddress2("");
  };

  const validateStep3 = async () => {
    if (isLoading) return false; // prevent duplicate submissions

    // ensure step1 exists
    if (!step1Data) {
      window.alert("Please complete Step 1 before proceeding.");
      return false;
    }

    // Basic validation
    if (
      !senderName ||
      !senderPhone ||
      !senderAddress ||
      !senderCountry ||
      !senderCity ||
      !receiverName ||
      !receiverPhone ||
      !receiverAddress ||
      !receiverCountry ||
      !receiverCity
    ) {
      window.alert("Please fill all required fields in From and To sections.");
      return false;
    }

    const payload = {
      id: step1Data?.draft_order_id,
      from_country_id: senderCountry?.value || step1Data?.fromCountry?.value,
      to_country_id: receiverCountry?.value || step1Data?.toCountry?.value,
      from_city_id: senderCity?.value || step1Data?.fromCity?.value,
      to_city_id: receiverCity?.value || step1Data?.toCity?.value,
      shipment_content: step1Data?.shipmentContent,
      no_of_packages: step1Data?.noOfPackages,
      total_weight: step1Data?.totalWeight,
      total_value: step1Data?.totalValue,
      package_details: (step1Data?.packageDetails || []).map((pkg: any) => ({
        weight: parseFloat(pkg.weight || 0),
        length: parseFloat(pkg.length || 0),
        width: parseFloat(pkg.width || 0),
        height: parseFloat(pkg.height || 0),
        package_description: pkg.package_description,
        customer_input_package_value: parseFloat(
          pkg.customer_input_package_value || 0
        ),
      })),
      // Step 2 Data (Service/Carrier) - guard values
      carrier: createOrderData.step2?.selectedCarrierDetails?.name || null,
      service_code: createOrderData.step2?.selectedServiceDetails?.id || null,
      service_name: createOrderData.step2?.selectedServiceDetails?.name || null,
      shipping_charge:
        createOrderData.step2?.selectedServiceDetails?.price ?? null,
      currency:
        createOrderData.step2?.selectedServiceDetails?.currency ?? null,

      // Step 3 Data (Sender/Receiver)
      sender_name: senderName,
      sender_company_name: "", // Add field if needed
      sender_email: senderEmail,
      sender_phone: senderPhone,
      sender_alt_phone: senderAltPhone,
      sender_address: senderAddress,
      sender_address_2: senderAddress2,
      sender_city_id: senderCity?.value,
      sender_postal_code: senderPostalCode,
      sender_state: senderState,

      receiver_name: receiverName,
      receiver_company_name: "", // Add field if needed
      receiver_email: receiverEmail,
      receiver_phone: receiverPhone,
      receiver_alt_phone: receiverAltPhone,
      receiver_address: receiverAddress,
      receiver_address_2: receiverAddress2,
      receiver_city_id: receiverCity?.value,
      receiver_postal_code: receiverPostalCode,
      receiver_state: receiverState,
    };

    try {
      setIsLoading(true);
      const response = await initiateInternationalDraftOrder(payload);
      if (response?.status) {
        // pass saved values back (include API response if useful)
        onSave({
          senderName,
          senderTaxId,
          senderCountry,
          senderCity,
          senderState,
          senderPostalCode,
          senderPhone,
          senderAltPhone,
          senderEmail,
          senderAddress,
          senderAddress2,
          saveSender,
          receiverName,
          receiverTaxId,
          receiverCountry,
          receiverCity,
          receiverState,
          receiverPostalCode,
          receiverPhone,
          receiverAltPhone,
          receiverEmail,
          receiverAddress,
          receiverAddress2,
          saveReceiver,
          apiResponse: response.data ?? null,
        });
        return true;
      } else {
        console.error("Failed to update draft:", response?.message);
        window.alert(response?.message || "Failed to update draft order.");
        return false;
      }
    } catch (error) {
      console.error("Error updating draft:", error);
      window.alert("An error occurred while updating draft. Please try again.");
      return false;
    } finally {
      setIsLoading(false);
    }
  };

  console.log({senderCountry, receiverCountry})
  return (
    <>
      <div className="scrollWrap step3-international p-4">
        <div className="row g-4">
          {/* Sender Section (From) */}
          <div className="col-lg-6 border-end-lg">
            <div className="d-flex justify-content-between align-items-center mb-4">
              <h5 className="font-16 font-700 mb-0">From</h5>
              <button
                className="btn btn-link text-danger text-decoration-none font-12 font-600 p-0"
                onClick={handleClearSender}
                type="button"
              >
                <i className="ri-refresh-line me-1"></i> Clear Address
              </button>
            </div>

            <div className="row g-3">
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Name *</label>
                  <div className="input-with-icon">
                    <i className="ri-user-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={senderName}
                      onChange={(e) => setSenderName(e.target.value)}
                      placeholder="Name"
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">
                    Tax ID/VAT/EIN Number
                  </label>
                  <div className="input-with-icon">
                    <i className="ri-file-list-3-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={senderTaxId}
                      onChange={(e) => setSenderTaxId(e.target.value)}
                      placeholder="Tax ID/VAT/EIN Number"
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Country *</label>
                  <div className="input-with-icon">
                    <i className="ri-global-fill text-dark-blue font-18"></i>
                    <SelectOptions
                      name="senderCountry"
                      optionsData={countries}
                      value={senderCountry}
                      onChange={(val: any) => setSenderCountry(val)}
                      placeholder="Select Country"
                      divClassName="mb-0"
                      style={{
                        control: (base: any) => ({
                          ...base,
                          borderRadius: "10px",
                          height: "45px",
                          paddingLeft: "35px",
                          border: "1px solid #dee2e6",
                          boxShadow: "none",
                          "&:hover": { borderColor: "#dee2e6" },
                        }),
                      }}
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">City *</label>
                  <div className="input-with-icon">
                    <i className="ri-building-fill text-dark-blue font-18"></i>
                    <SelectOptions
                      name="senderCity"
                      optionsData={senderCities}
                      value={senderCity}
                      onChange={(val: any) => setSenderCity(val)}
                      placeholder="Select City"
                      divClassName="mb-0"
                      style={{
                        control: (base: any) => ({
                          ...base,
                          borderRadius: "10px",
                          height: "45px",
                          paddingLeft: "35px",
                          border: "1px solid #dee2e6",
                          boxShadow: "none",
                          "&:hover": { borderColor: "#dee2e6" },
                        }),
                      }}
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Postal Code *</label>
                  <div className="input-with-icon">
                    <i className="ri-mailbox-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={senderPostalCode}
                      onChange={(e) => setSenderPostalCode(e.target.value)}
                      placeholder="Postal Code"
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">State *</label>
                  <div className="input-with-icon">
                    <i className="ri-map-pin-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={senderState}
                      onChange={(e) => setSenderState(e.target.value)}
                      placeholder="State"
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Mobile Number *</label>
                  <InternationalPhoneInput
                    value={senderPhone}
                    onChange={(val: string) => setSenderPhone(val)}
                    placeholder="Mobile Number"
                    country={resolveCountryCode(senderCountry, countries)}    
                  />
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">
                    Alternative Mobile Number
                  </label>
                  <InternationalPhoneInput
                    value={senderAltPhone}
                    onChange={(val: string) => setSenderAltPhone(val)}
                    placeholder="Alternative Mobile Number"
                    country={resolveCountryCode(senderCountry, countries)}
                  />
                </div>
              </div>

              <div className="col-md-12">
                <div className="floating-label-group">
                  <label className="floating-label">Email Address</label>
                  <div className="input-with-icon">
                    <i className="ri-mail-fill text-dark-blue font-18"></i>
                    <input
                      type="email"
                      className="form-control custom-input-rounded"
                      value={senderEmail}
                      onChange={(e) => setSenderEmail(e.target.value)}
                      placeholder="Email Address"
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Address Line 1 *</label>
                  <div className="input-with-icon">
                    <i className="ri-home-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={senderAddress}
                      onChange={(e) => setSenderAddress(e.target.value)}
                      placeholder="Address Line 1"
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Address Line 2</label>
                  <div className="input-with-icon">
                    <i className="ri-home-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={senderAddress2}
                      onChange={(e) => setSenderAddress2(e.target.value)}
                      placeholder="Address Line 2"
                    />
                  </div>
                </div>
              </div>

              <div className="col-12 mt-2">
                <div className="form-check">
                  <input
                    className="form-check-input"
                    type="checkbox"
                    id="saveSender"
                    checked={saveSender}
                    onChange={(e) => setSaveSender(e.target.checked)}
                  />
                  <label
                    className="form-check-label font-13 text-muted"
                    htmlFor="saveSender"
                  >
                    Save this to my address book.
                  </label>
                </div>
              </div>
            </div>
          </div>

          {/* Receiver Section (To) */}
          <div className="col-lg-6">
            <div className="d-flex justify-content-between align-items-center mb-4">
              <h5 className="font-16 font-700 mb-0">To</h5>
              <button
                className="btn btn-link text-danger text-decoration-none font-12 font-600 p-0"
                onClick={handleClearReceiver}
                type="button"
              >
                <i className="ri-refresh-line me-1"></i> Clear Address
              </button>
            </div>

            <div className="row g-3">
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Name *</label>
                  <div className="input-with-icon">
                    <i className="ri-user-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={receiverName}
                      onChange={(e) => setReceiverName(e.target.value)}
                      placeholder="Name"
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">
                    Tax ID/VAT/EIN Number
                  </label>
                  <div className="input-with-icon">
                    <i className="ri-file-list-3-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={receiverTaxId}
                      onChange={(e) => setReceiverTaxId(e.target.value)}
                      placeholder="Tax ID/VAT/EIN Number"
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Country *</label>
                  <div className="input-with-icon">
                    <i className="ri-global-fill text-dark-blue font-18"></i>
                    <SelectOptions
                      name="receiverCountry"
                      optionsData={countries}
                      value={receiverCountry}
                      onChange={(val: any) => setReceiverCountry(val)}
                      placeholder="Select Country"
                      divClassName="mb-0"
                      style={{
                        control: (base: any) => ({
                          ...base,
                          borderRadius: "10px",
                          height: "45px",
                          paddingLeft: "35px",
                          border: "1px solid #dee2e6",
                          boxShadow: "none",
                          "&:hover": { borderColor: "#dee2e6" },
                        }),
                      }}
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">City *</label>
                  <div className="input-with-icon">
                    <i className="ri-building-fill text-dark-blue font-18"></i>
                    <SelectOptions
                      name="receiverCity"
                      optionsData={receiverCities}
                      value={receiverCity}
                      onChange={(val: any) => setReceiverCity(val)}
                      placeholder="Select City"
                      divClassName="mb-0"
                      style={{
                        control: (base: any) => ({
                          ...base,
                          borderRadius: "10px",
                          height: "45px",
                          paddingLeft: "35px",
                          border: "1px solid #dee2e6",
                          boxShadow: "none",
                          "&:hover": { borderColor: "#dee2e6" },
                        }),
                      }}
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Postal Code *</label>
                  <div className="input-with-icon">
                    <i className="ri-mailbox-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={receiverPostalCode}
                      onChange={(e) => setReceiverPostalCode(e.target.value)}
                      placeholder="Postal Code"
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">State *</label>
                  <div className="input-with-icon">
                    <i className="ri-map-pin-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={receiverState}
                      onChange={(e) => setReceiverState(e.target.value)}
                      placeholder="State"
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Mobile Number *</label>
                  <InternationalPhoneInput
                    value={receiverPhone}
                    onChange={(val: string) => setReceiverPhone(val)}
                    placeholder="Mobile Number"
  country={resolveCountryCode(receiverCountry, countries)}
                  />
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">
                    Alternative Mobile Number
                  </label>
                  <InternationalPhoneInput
                    value={receiverAltPhone}
                    onChange={(val: string) => setReceiverAltPhone(val)}
                    placeholder="Alternative Mobile Number"
  country={resolveCountryCode(receiverCountry, countries)}
                  />
                </div>
              </div>

              <div className="col-md-12">
                <div className="floating-label-group">
                  <label className="floating-label">Email Address</label>
                  <div className="input-with-icon">
                    <i className="ri-mail-fill text-dark-blue font-18"></i>
                    <input
                      type="email"
                      className="form-control custom-input-rounded"
                      value={receiverEmail}
                      onChange={(e) => setReceiverEmail(e.target.value)}
                      placeholder="Email Address"
                    />
                  </div>
                </div>
              </div>

              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Address Line 1 *</label>
                  <div className="input-with-icon">
                    <i className="ri-home-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={receiverAddress}
                      onChange={(e) => setReceiverAddress(e.target.value)}
                      placeholder="Address Line 1"
                    />
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="floating-label-group">
                  <label className="floating-label">Address Line 2</label>
                  <div className="input-with-icon">
                    <i className="ri-home-fill text-dark-blue font-18"></i>
                    <input
                      type="text"
                      className="form-control custom-input-rounded"
                      value={receiverAddress2}
                      onChange={(e) => setReceiverAddress2(e.target.value)}
                      placeholder="Address Line 2"
                    />
                  </div>
                </div>
              </div>

              <div className="col-12 mt-2">
                <div className="form-check">
                  <input
                    className="form-check-input"
                    type="checkbox"
                    id="saveReceiver"
                    checked={saveReceiver}
                    onChange={(e) => setSaveReceiver(e.target.checked)}
                  />
                  <label
                    className="form-check-label font-13 text-muted"
                    htmlFor="saveReceiver"
                  >
                    Save this to my address book.
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <CreateOrderFooter
        step={step}
        setStep={async (nextStep) => {
          if (await validateStep3()) setStep(nextStep);
        }}
        validation={validateStep3}
        backButton={true}
        backButtonFn={() => setStep(2)}
        defaultOrderDetails={defaultOrderDetails}
        isEditMode={isEditMode}
      />

      <style jsx>{`
        .font-12 {
          font-size: 12px;
        }
        .font-13 {
          font-size: 13px;
        }
        .font-16 {
          font-size: 16px;
        }
        .font-18 {
          font-size: 18px;
        }
        .font-600 {
          font-weight: 600;
        }
        .font-700 {
          font-weight: 700;
        }
        .text-dark-blue {
          color: #000080 !important;
        }
        .floating-label-group {
          position: relative;
          margin-top: 5px;
        }
        .floating-label {
          position: absolute;
          top: -10px;
          left: 15px;
          background: white;
          padding: 0 8px;
          font-size: 10px;
          font-weight: 700;
          color: #adb5bd;
          z-index: 10;
          pointer-events: none;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        .input-with-icon {
          position: relative;
        }
        .input-with-icon i {
          position: absolute;
          left: 15px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 5;
          color: #000080;
        }
        .custom-input-rounded {
          padding-left: 40px !important;
          border-radius: 10px !important;
          height: 45px !important;
          border: 1px solid #dee2e6 !important;
        }
        .custom-input-rounded:focus {
          border-color: #000080 !important;
          box-shadow: 0 0 0 0.25rem rgba(0, 0, 128, 0.1) !important;
        }
        .border-end-lg {
          border-right: 1px solid #dee2e6;
        }
        @media (max-width: 991px) {
          .border-end-lg {
            border-right: none;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;
          }
        }
      `}</style>
    </>
  );
};

export default Step3;