
<style>
    .form-control-hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .input-custom {
        font-family: 'Open Sans Regular', sans-serif;
        color: var(--azul-primario);
        transition: all 0.3s ease;
        background: rgba(234, 242, 250, 0.3);
    }

    .input-custom:focus {
        border-color: var(--azul-destacado) !important;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25) !important;
        background: white;
    }

    .input-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(42, 78, 109, 0.1);
    }

    .btn-00416A {
        background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
        color: white !important;
        border: none !important;
        position: relative;
        overflow: hidden;
    }

    .btn-00416A:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(42, 78, 109, 0.3);
    }

    .btn-00416A::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(45deg);
        transition: all 0.5s ease;
    }

    .btn-00416A:hover::after {
        left: 120%;
    }

    @media (max-width: 768px) {
        .input-custom {
            font-size: 0.9rem;
            padding: 0.75rem 1rem;
        }
        
        .btn-00416A {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }
    }
</style>

<div class="shadow-lg rounded-3 p-4 mb-5" style="background: var(--azul-suave); border-left: 4px solid var(--azul-primario);">
    <form name="{{$name}}" id="{{$id}}" class="form-control-hover" action="{{URL::route($action)}}" method="POST">
        <div class="row g-3 align-items-center">
            <div class="col-12 col-lg-10 col-md-9">
                <input type="text" 
                       name="name" 
                       class="form-control input-custom"
                       placeholder="{{__("com-form-area.name")}}"
                       style="border-radius: 8px; border: 2px solid var(--azul-secundario);">
            </div>
            <div class="col-12 col-lg-2 col-md-3">
                <button type="submit" 
                        class="btn btn-00416A w-100 py-2"
                        style="border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
                    <span class="fw-semibold">
                        {{($new === true) ? __('com-form-area.btnSubmit') : __('com-form-area.btnSubmitUpdate') }}
                    </span>
                </button>
                @csrf
            </div>
        </div>
    </form>
</div>