/*css/enrollment-responsive.css:
/* AL-IRFAN ACADEMY
   Responsive enrollment design
   Phone layout remains unchanged.
   Tablet and laptop improvements only. */

/* Keep the existing phone layout unchanged. */

@media (min-width: 760px) {

  /* ===== PUBLIC ENROLLMENT FORM ===== */

  #fbApp .fbap {
    max-width: 960px !important;
    padding: 32px 28px 56px !important;
  }

  #fbApp .fb-h1 {
    font-size: 34px !important;
    line-height: 1.3;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
  }

  #fbApp .fbp {
    height: 9px !important;
    margin: 20px 0 !important;
  }

  #fbApp .fbap section.card {
    padding: 28px !important;
    border-radius: 18px !important;
    margin-top: 20px !important;
  }

  #fbApp .fbap .fld {
    padding: 18px !important;
    margin: 0 !important;
    min-width: 0;
    box-sizing: border-box;
  }

  #fbApp .fbap .fld > div:first-child {
    line-height: 1.6;
  }

  #fbApp .fbap .input,
  #fbApp .fbap .select {
    min-height: 46px;
    box-sizing: border-box;
  }

  #fbApp .fbap textarea.input {
    min-height: 110px;
  }

  #fbApp .fbap .fo {
    min-height: 46px;
  }

  #fbApp .fbap .row {
    flex-wrap: wrap;
    gap: 12px;
  }

  #fbApp .fbap .row > button {
    min-height: 44px;
  }

  /* ===== ADMIN ENROLLMENT BUILDER ===== */

  .ad.fbx {
    gap: 22px;
    min-width: 0;
  }

  .ad.fbx > .fbtabs {
    align-self: flex-start;
    margin-bottom: 4px !important;
  }

  .ad.fbx .fb-hd,
  .ad.fbx .fb-dash {
    padding: 28px !important;
    border-radius: 18px !important;
  }

  .ad.fbx .fb-hd {
    margin-bottom: 8px;
  }

  .ad.fbx .fb-dash h3 {
    font-size: 30px !important;
    line-height: 1.35;
  }

  .ad.fbx .fbs {
    padding: 26px !important;
    margin-top: 20px !important;
    border-radius: 18px !important;
  }

  .ad.fbx .fb-no {
    gap: 12px;
  }

  .ad.fbx .fb-n {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .ad.fbx .fbq {
    padding: 22px !important;
    margin: 16px 0 !important;
    border-radius: 16px !important;
  }

  .ad.fbx .fbi,
  .ad.fbx .input,
  .ad.fbx .select {
    box-sizing: border-box;
    max-width: 100%;
  }

  .ad.fbx .fbo-r {
    gap: 10px;
  }

  .ad.fbx .fbo-r .fbi {
    flex: 1 1 180px;
    min-width: 0;
  }

  .ad.fbx .row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .ad.fbx button {
    min-height: 40px;
  }

  .ad.fbx .fbtabs button {
    min-height: 44px;
  }

  /* Keep long questions and bilingual text inside cards. */

  .ad.fbx h1,
  .ad.fbx h2,
  .ad.fbx h3,
  .ad.fbx p,
  .ad.fbx label,
  #fbApp .fbap h1,
  #fbApp .fbap h2,
  #fbApp .fbap p {
    overflow-wrap: anywhere;
  }

  /* Comfortable spacing for iPad and laptop screens. */

  #fbApp .fbap .fbg th,
  #fbApp .fbap .fbg td {
    padding: 12px;
  }
}

/* Extra-wide laptop and desktop screens. */

@media (min-width: 1100px) {

  #fbApp .fbap {
    max-width: 1040px !important;
    padding: 36px 32px 64px !important;
  }

  #fbApp .fbap section.card {
    padding: 32px !important;
  }

  .ad.fbx .fb-hd,
  .ad.fbx .fb-dash {
    padding: 32px !important;
  }

  .ad.fbx .fbs {
    padding: 30px !important;
  }

  .ad.fbx .fbq {
    padding: 24px !important;
  }
}