/* PMD_SETTINGS_POLISH_R7
 * Final visual authority for:
 * - PayMyDine landing tile
 * - Restaurant logo preview/remove geometry
 */

/* =========================================================
   SETTINGS: PAYMYDINE LANDING TILE
   Match the Side Menu 2 dark green surface.
   Show only the real PayMyDine mark + name.
   ========================================================= */
html body #pmd-settings-center #pmd-settings-brand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 110px !important;
  padding: 18px !important;
  border: 1px solid rgba(123, 232, 163, .18) !important;
  border-radius: 16px !important;
  background: #0b2f2a !important;
  color: #fff !important;
  box-shadow:
    0 16px 40px rgba(10, 35, 31, .22),
    0 0 0 1px rgba(93, 220, 133, .05) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card:hover,
html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(145, 244, 180, .34) !important;
  background: #0d3831 !important;
  box-shadow:
    0 20px 46px rgba(10, 35, 31, .30),
    0 0 24px rgba(74, 222, 128, .10) !important;
  outline: none !important;
}

html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__icon {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 14px !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: url('/app/admin/assets/images/pmd-brand-mark.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 46px 46px !important;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .03) !important;
  color: #fff !important;
}

html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__icon svg {
  display: none !important;
  visibility: hidden !important;
}

html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__body {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__title-row {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Force final name from FIRST PAINT even if the server-side legacy item still
 * says Brand & communication before the stable Settings runtime normalizes it. */
html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__title-row strong {
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
  letter-spacing: -.015em !important;
}

html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__title-row strong::after {
  content: "PayMyDine" !important;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
  letter-spacing: -.015em !important;
}

/* User-facing tile is intentionally logo + name only. */
html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__description,
html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__arrow,
html body #pmd-settings-center #pmd-settings-brand .pmd-settings-card__badge {
  display: none !important;
  visibility: hidden !important;
}

/* =========================================================
   RESTAURANT DETAILS: LARGE RIGHT-SIDE LOGO PANEL

   Desktop authority:
   left  = Restaurant name + file chooser + helper
   right = one larger logo preview + remove button

   Preview owns the full height beside BOTH left-side fields instead
   of sitting only beside the file input row.
   ========================================================= */
@media (min-width: 901px) {
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-card__body {
    position: relative !important;
    min-height: 232px !important;
    padding-right: 0 !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-grid--2 {
    display: block !important;
    position: static !important;
    min-height: 200px !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-field--wide {
    display: block !important;
    width: calc(100% - 264px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 264px) !important;
    margin: 0 0 20px !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-field-r19,
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-uploader-r19,
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-input-r19 {
    position: static !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-uploader-r19 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-input-r19 {
    display: block !important;
    width: 100% !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-input-r19 input[type="file"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-help-r19 {
    display: block !important;
    margin: 10px 0 0 !important;
  }

  /* Direct server-rendered state: preview and remove are separate nodes. */
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue
  .pmd-profile-logo-uploader-r19 > .pmd-profile-logo-preview-r19 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue
  .pmd-profile-logo-input-r19 > .pmd-profile-logo-remove-r20 {
    position: absolute !important;
    top: 178px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Compatibility if an older in-page navigation already created the R3 stack. */
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-preview-stack-r3 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 166px 40px !important;
    gap: 12px !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue
  .pmd-profile-logo-preview-stack-r3 .pmd-profile-logo-preview-r19 {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue
  .pmd-profile-logo-preview-stack-r3 .pmd-profile-logo-remove-r20 {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-preview-r19 img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
}

/* Mobile/tablet: keep the logo controls in normal document flow. */
@media (max-width: 900px) {
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-field--wide {
    width: 100% !important;
    max-width: none !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-uploader-r19 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
  }

  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-uploader-r19 > .pmd-profile-logo-preview-r19,
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-preview-stack-r3,
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-preview-stack-r3 .pmd-profile-logo-preview-r19,
  html body #pmd-restaurant-profile
  .pmd-profile-section--blue .pmd-profile-logo-remove-r20 {
    position: static !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    transform: none !important;
  }
}