/* ==========================================
   1. WEBFORM CARD - MODERN DECORATIVE THEME
========================================== */

.webform-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px;
  margin-bottom: 26px;

  background:
    radial-gradient(
      ellipse 340px 240px at 100% 0%,
      rgba(20, 184, 166, 0.32),
      transparent 75%
    ),
    radial-gradient(
      ellipse 320px 270px at 0% 100%,
      rgba(99, 102, 241, 0.24),
      transparent 75%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ecfdf5 48%,
      #eef2ff 100%
    );

  border: 1px solid #cbd5e1;
  border-radius: 20px;

  box-shadow:
    0 12px 35px rgba(30, 41, 59, 0.09),
    0 3px 10px rgba(13, 148, 136, 0.06);

  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}


/* ==========================================
   2. DECORATIVE CURVES - TOP RIGHT
========================================== */

.webform-card::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 260px;
  height: 260px;
  top: -130px;
  right: -65px;

  border: 3px solid rgba(13, 148, 136, 0.28);
  border-radius: 44% 56% 63% 37% / 40% 42% 58% 60%;

  box-shadow:
    0 0 0 18px rgba(20, 184, 166, 0.08),
    0 0 0 38px rgba(20, 184, 166, 0.05);

  transform: rotate(-25deg);
  pointer-events: none;
}


/* ==========================================
   3. DECORATIVE SHAPE - BOTTOM LEFT
========================================== */

.webform-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 180px;
  height: 180px;
  bottom: -100px;
  left: 12%;

  background: rgba(99, 102, 241, 0.12);
  border: 2px solid rgba(99, 102, 241, 0.20);

  border-radius:
    62% 38% 35% 65% /
    48% 45% 55% 52%;

  transform: rotate(35deg);
  pointer-events: none;
}


/* ==========================================
   4. ACTIVE CARD
========================================== */

.webform-card.webform-card--active {
  border-color: rgba(13, 148, 136, 0.55);

  box-shadow:
    0 14px 38px rgba(15, 118, 110, 0.12),
    0 3px 10px rgba(99, 102, 241, 0.05);
}


/* ==========================================
   5. CARD TITLE - MODERN GRADIENT
========================================== */

.webform-card .webform-card-title {
  position: relative;
  z-index: 1;

  padding: 17px 22px;
  margin-bottom: 24px;

  color: #ffffff;

  background:
    radial-gradient(
      ellipse at 100% 0%,
      rgba(255, 255, 255, 0.25),
      transparent 45%
    ),
    linear-gradient(
      120deg,
      #0f766e,
      #155e75,
      #3730a3
    );

  border: none;
  border-left: 5px solid #fbbf24;
  border-radius: 13px;

  box-shadow:
    0 7px 20px rgba(30, 58, 138, 0.18);

  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}


/* ==========================================
   6. FORM INPUTS - MODERN STYLE
========================================== */

.webform-submission-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="reset"]):not([type="file"]):not([type="image"]),
.webform-submission-form select,
.webform-submission-form textarea {
  box-sizing: border-box;
  max-width: 100%;

  padding: 11px 14px;

  color: #0f172a;
  background-color: rgba(255, 255, 255, 0.96);

  border: 1px solid #cbd5e1;
  border-radius: 9px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}


/* ==========================================
   7. INPUT FOCUS
========================================== */

.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  border-color: #0d9488;

  box-shadow:
    0 0 0 3px rgba(13, 148, 136, 0.14);

  outline: none;
}


/* ==========================================
   8. VALID REQUIRED INPUTS - GREEN
========================================== */

.webform-submission-form input[required]:valid:not(:placeholder-shown),
.webform-submission-form textarea[required]:valid:not(:placeholder-shown) {
  border-color: #22c55e;
  background-color: #f0fdf4;
}


/* Valid required dropdowns */
.webform-submission-form select[required]:valid {
  border-color: #22c55e;
  background-color: #f0fdf4;
}


/* ==========================================
   9. CHECKBOXES AND RADIO BUTTONS
========================================== */

.webform-submission-form input[type="checkbox"],
.webform-submission-form input[type="radio"] {
  accent-color: #0d9488;
}


/* ==========================================
   10. FORM LABELS
========================================== */

.webform-submission-form label {
  color: #334155;
  font-weight: 600;
}


/* ==========================================
   11. BUTTONS
========================================== */

.webform-submission-form button,
.webform-submission-form input[type="submit"] {
  padding: 12px 22px;

  color: #ffffff;
  background: linear-gradient(
    120deg,
    #0f766e,
    #2563eb
  );

  border: none;
  border-radius: 10px;

  font-weight: 600;
  cursor: pointer;

  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.16);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* Button hover */
.webform-submission-form button:hover,
.webform-submission-form input[type="submit"]:hover {
  box-shadow:
    0 7px 18px rgba(37, 99, 235, 0.24);

  transform: translateY(-1px);
}


/* Keyboard accessibility */
.webform-submission-form button:focus-visible,
.webform-submission-form input[type="submit"]:focus-visible {
  outline: 3px solid rgba(13, 148, 136, 0.4);
  outline-offset: 3px;
}


/* ==========================================
   12. RESPONSIVE - MOBILE
========================================== */

@media (max-width: 600px) {
  .webform-card {
    padding: 15px;
    margin-bottom: 18px;
    border-radius: 14px;
  }

  .webform-card .webform-card-title {
    padding: 13px 15px;
    margin-bottom: 18px;
    font-size: 18px;
  }

  .webform-submission-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .webform-submission-form select,
  .webform-submission-form textarea {
    width: 100%;
    padding: 10px 12px;
  }

  .webform-submission-form button,
  .webform-submission-form input[type="submit"] {
    max-width: 100%;
  }
}






/* =================================
   PREMIUM UPLOAD BUTTON
================================= */


.webform-submission-form
.button.button-action.webform-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 240px;
  min-height: 65px;
  padding: 20px 40px;

  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    #4338ca,
    #2563eb,
    #0891b2
  ) !important;

  border: none !important;
  border-radius: 16px;

  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;

  box-shadow:
    0 10px 25px rgba(67, 56, 202, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  cursor: pointer;

  transition: all 0.25s ease;
}

.webform-submission-form
.button.button-action.webform-file-button:hover {
  filter: brightness(1.1);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(67, 56, 202, 0.35);
}

.webform-submission-form
.button.button-action.webform-file-button:active {
  transform: scale(0.98);
}

@media (max-width: 600px) {
  .webform-submission-form
  .button.button-action.webform-file-button {
    min-width: 200px;
    min-height: 56px;
    padding: 16px 28px;
    font-size: 16px;
  }
}