/* commissions.css */
.card-header h1 { letter-spacing: 0.2px; }
.list-group-item { border-radius: 12px; margin-bottom: .5rem; }
.list-group-item .form-check-input { transform: scale(1.2); }
.btn-outline-primary { border-radius: 999px; }
.sticky-top { z-index: 2; }
/* submit overlay */
.busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050; /* above cards/nav */
  }
  .busy-content {
    padding: 24px 28px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  }
  
/* turn borders green/red for selected card groups */
#portraitGroup.group-invalid .option-card,
#varnishGroup.group-invalid .option-card { border-color: var(--bs-danger); }
#portraitGroup.group-valid .option-card,
#varnishGroup.group-valid .option-card { border-color: var(--bs-success); }

/* show green 'valid-feedback' when we mark fields/group valid */
.is-valid ~ .valid-feedback,
.show-valid + .valid-feedback,
.show-valid ~ .valid-feedback { display: block !important; }

/* shake the first invalid field we scroll to */
.flash-invalid { animation: shake .35s linear 1; }
@keyframes shake { 20%{transform:translateX(-4px)}40%{translate:4px}60%{translate:-3px}80%{translate:3px} }
.field-feedback { margin-top: .25rem; }

/* Keep feedback BELOW fields even inside .form-floating */
.form-floating > .valid-feedback,
.form-floating > .invalid-feedback {
  position: static !important;   /* leave normal flow */
  display: block;                /* we'll still toggle via .d-none */
  margin-top: .375rem;
  z-index: auto;
  pointer-events: none;          /* don't steal clicks */
}

/* Make sure the floating label stays above the input, not above feedback */
.form-floating > label { z-index: 1; }

/* If you moved feedback outside .form-floating for some fields */
.field-feedback { margin-top: .25rem; }

/* ======= CLEAR SELECTED STATES FOR RADIO UI ======= */

/* 1) New/Existing button radios */
.btn-check + .btn {
    transition: all .15s ease;
  }
  .btn-check:checked + .btn,
  .btn-check:active + .btn {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }
  .btn-check:focus + .btn,
  .btn:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
  }
  
  /* 2) Card-style radios (Portrait & Varnish) */
  .option-card {
    position: relative;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s, transform .05s;
    cursor: pointer;
  }
  .option-card:hover {
    border-color: var(--bs-primary);
  }
  .btn-check:focus + .option-card {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
  }
  /* Selected look */
  .btn-check:checked + .option-card,
  .option-card.active {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .05);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
  }
  .btn-check:checked + .option-card .price,
  .option-card.active .price {
    color: var(--bs-primary);
    font-weight: 700;
  }
  
  /* (optional) give the selected card a subtle scale so it's super obvious */
  .btn-check:checked + .option-card {
    transform: translateZ(0) scale(1.01);
  }
  /* Prevent preview distortion: cap height, keep aspect ratio */
#photoPreview {
    max-width: 100%;
  }
  
  #photoPreview .photo-preview {
    display: block;
    /* Let the browser preserve the intrinsic aspect ratio */
    width: auto;
    height: auto;
  
    /* Cap by container & by a reasonable max height */
    max-width: 100%;
    max-height: 320px;
  
    /* If any parent forces both width & height, this keeps the image contained */
    object-fit: contain;
  
    /* Respect EXIF rotation from phones */
    image-orientation: from-image;
  }
  
  /* 9:16 vertical video ratio for Shorts */
.ratio-9x16 { --bs-aspect-ratio: 177.78%; } /* 16/9 * 100% */