/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
  /*margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2a3439;
  font-family: system-ui, sans-serif;*/
}


.corpus {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a3439;/*lightgrey;*/
      font-family: system-ui, sans-serif;
    }

h1, h2, h3 {
  position: absolute;
  left: -9999px;
} 



    .card-logo-top-right {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 60px;/*120px;*/
      height: auto;
      z-index: 10;
      pointer-events: none;
    }
    .bottom-right {
      position: fixed;
      bottom: 20px;
      right: 20px;
      color: lightgrey;
    }
    .bottom-left {
      position: fixed;
      bottom: 20px;
      left: 20px;
      color: lightgrey;
    }

    /* CARD CONTAINER — FRONT SIZE */
    .card-container {
      width: 532px;/* 691;/*380px;*/
      height: 364px; /*260px;*/
      perspective: 1000px;
      transition: width .5s ease, height .5s ease;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* EXPANDED SIZE WHEN FLIPPED (BACK) */
    .card-container.expanded {
      width: 540px;/*702px;540px; /*756; 540px;*/
      height: 560px;/*728px;560px;  748 560px;*/
    }

    /* CARD */
    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform .8s;
      transform-origin: center center;
    }

    .card.flipped {
      transform: rotateY(180deg);
    }

    .divider {
      height: 1px;
      background: #e5e7eb;
      margin: 12px 0 16px;
    }

    /* CARD SIDES */
    .side {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.15);
      padding: 32px;
      box-sizing: border-box;
      overflow-y: auto;
    }

    /* FRONT SIDE */
    .front {
      background: linear-gradient(135deg, #f59e0b 0%, #2563eb 100%);
      color: white;
      cursor: pointer;
      display: flex;
      flex-direction: column;
    }

    .logo {
      width: 30px;
      height: auto;
      margin-bottom: 10px;
    }

    .name {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .consult {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 4px;
      color: #0f4c6b;   /*  #1f6b8c -> pulled from your logo’s blue #4a6d9a; /* #5a7dab; cornflowerblue; steelblue; lightsteelblue;*/
    }

    .atlaw {
      font-size: .8rem;
    }

    .title {
      font-size: .85rem;
      opacity: 0.9;
      margin-bottom: 12px;
    }

    .contact {
      font-size: .9rem;
      margin-bottom: 6px;
    }

    /* BACK SIDE */
    .back {
      background: #ffffff;
      border: 2px solid #2563eb;
      transform: rotateY(180deg);
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: rgba(0, 0, 0, 0.35); /* lower alpha = more transparent */
    }


    .case-form {
      display: flex;
      flex-direction: column;
    }

    .form-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: #111827;
    }

    .form-label {
      font-size: .9rem;
      font-weight: 600;
      margin-bottom: 4px;
      color: #374151;
    }

    .form-input,
    .form-textarea {
      width: 100%;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #d1d5db;
      margin-bottom: 14px;
      font-size: .95rem;
      background: #f9fafb;
    }

    .form-input:focus,
    .form-textarea:focus {
      outline: none;
      border-color: #2563eb;
      background: #ffffff;
    }

    .submit-btn {
      background: #2563eb;
      color: white;
      padding: 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
      margin-top: 4px;
    }

    .submit-btn:hover {
      background: #1e3a8a;
    }

    .form-status {
      margin-top: 10px;
      font-size: .9rem;
      color: #2563eb;
    }

.button {
  border-radius: 9px;
  color: yellow;
}