/**
 * GVA CTA BUTTON - CSS EXTERNE
 * 6 Styles Premium Glow
 */

/* ===================================
   VARIABLES
   =================================== */
.gva-cta-button {
   --agri-green: #2ecc71;
   --agri-dark: #27ae60;
   --agri-dark-blue: #0f172a;
   --agri-orange: #f97316;
   --glow-shadow: 0 10px 30px rgba(46, 204, 113, 0.3);
}

/* ===================================
   CONTAINER & ALIGNMENT
   =================================== */
.gva-cta-button {
   padding: 40px 0;
}

.gva-cta-button.align-left {
   text-align: left;
}

.gva-cta-button.align-center {
   text-align: center;
}

.gva-cta-button.align-right {
   text-align: right;
}

/* ===================================
   BASE BUTTON STYLE
   =================================== */
.gva-cta-button .btn-cta {
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-weight: 800;
   font-size: 1.15rem;
   padding: 16px 45px;
   border-radius: 14px;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   border: none;
   cursor: pointer;
   position: relative;
}

.gva-cta-button .btn-cta i {
   font-size: 1.1rem;
}

/* ===================================
   STYLE 1: NEON FLOATING GLOW
   =================================== */
.gva-cta-button.style-neon-float .btn-cta {
   background-color: var(--agri-dark-blue);
   color: white;
   box-shadow: 0 10px 25px rgba(27, 27, 27, 0.4);
}

.gva-cta-button.style-neon-float .btn-cta:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(27, 27, 27, 0.4);
   background-color: var(--agri-dark);
}

/* ===================================
   STYLE 2: GHOST BORDER GLOW
   =================================== */
.gva-cta-button.style-ghost-glow .btn-cta {
   background: white;
   color: var(--agri-green);
   border: 2px solid var(--agri-green);
   box-shadow: 0 0 0 rgba(46, 204, 113, 0);
}

.gva-cta-button.style-ghost-glow .btn-cta:hover {
   background: var(--agri-green);
   color: white;
   box-shadow: 0 10px 30px rgba(46, 204, 113, 0.4);
   transform: scale(1.05);
}

/* ===================================
   STYLE 3: AURORA GRADIENT GLOW
   =================================== */
.gva-cta-button.style-aurora .btn-cta {
   background: linear-gradient(135deg, var(--agri-green), var(--agri-dark-blue));
   color: white;
   box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
}

.gva-cta-button.style-aurora .btn-cta:hover {
   background: linear-gradient(135deg, var(--agri-dark-blue), var(--agri-green));
   box-shadow: 0 15px 35px rgba(46, 204, 113, 0.4);
   transform: translateY(-5px) rotate(-1deg);
}

/* ===================================
   STYLE 4: ORANGE ACCENT PULSE
   =================================== */
.gva-cta-button.style-orange-pulse .btn-cta {
   background-color: var(--agri-dark-blue);
   color: white;
}

.gva-cta-button.style-orange-pulse .btn-cta::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 14px;
   border: 2px solid var(--agri-orange);
   opacity: 0;
   transition: 0.4s;
   pointer-events: none;
}

.gva-cta-button.style-orange-pulse .btn-cta:hover {
   color: var(--agri-orange);
   background: transparent;
   box-shadow: 0 0 25px rgba(249, 115, 22, 0.3);
}

.gva-cta-button.style-orange-pulse .btn-cta:hover::after {
   opacity: 1;
   transform: scale(1.1);
}

/* ===================================
   STYLE 5: SOFT MESH GLOW
   =================================== */
.gva-cta-button.style-mesh .mesh-wrapper {
   position: relative;
   display: inline-block;
}

.gva-cta-button.style-mesh .mesh-bg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 120%;
   height: 150%;
   background: radial-gradient(circle, rgba(46, 204, 113, 0.4) 0%, transparent 70%);
   filter: blur(20px);
   opacity: 0;
   transition: 0.5s;
   z-index: -1;
   pointer-events: none;
}

.gva-cta-button.style-mesh .btn-cta {
   background: var(--agri-dark-blue);
   color: white;
}

.gva-cta-button.style-mesh .mesh-wrapper:hover .mesh-bg {
   opacity: 1;
}

.gva-cta-button.style-mesh .btn-cta:hover {
   transform: scale(1.05);
}

/* ===================================
   STYLE 6: GLASS REFLECTION
   =================================== */
.gva-cta-button.style-glass .btn-cta {
   background: linear-gradient(to bottom, #fff, #f8fafc);
   color: var(--agri-dark-blue);
   border: 1px solid #e2e8f0;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
   overflow: hidden;
}

.gva-cta-button.style-glass .btn-cta::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 50%;
   height: 100%;
   background: linear-gradient(to right, transparent, rgba(46, 204, 113, 0.2), transparent);
   transform: skewX(-25deg);
   transition: 0.5s;
   pointer-events: none;
}

.gva-cta-button.style-glass .btn-cta:hover::before {
   left: 150%;
}

.gva-cta-button.style-glass .btn-cta:hover {
   border-color: var(--agri-green);
   color: var(--agri-green);
   box-shadow: 0 10px 25px rgba(46, 204, 113, 0.15);
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 768px) {
   .gva-cta-button .btn-cta {
      font-size: 1rem;
      padding: 14px 35px;
      gap: 10px;
   }
   
   .gva-cta-button .btn-cta i {
      font-size: 1rem;
   }
}

@media (max-width: 576px) {
   .gva-cta-button .btn-cta {
      font-size: 0.9rem;
      padding: 12px 30px;
      gap: 8px;
   }
   
   .gva-cta-button .btn-cta i {
      font-size: 0.9rem;
   }
   
   .gva-cta-button.align-left,
   .gva-cta-button.align-right {
      text-align: center;
   }
}