/* "New room" in the composer look shared by Create, Community, Shop, Booking,
   Calendar and App Access. Doubled id and !important: the page repaints any
   modal with "modal" in its id, so the fixer skips this one and the rules
   here still say everything twice. Ids and classes the script reads are
   untouched. */
#create-bloc-modal#create-bloc-modal {
    background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; color-scheme: light !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
#create-bloc-modal#create-bloc-modal * { box-sizing: border-box; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0; }
#create-bloc-modal#create-bloc-modal .fa, #create-bloc-modal#create-bloc-modal .fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
#create-bloc-modal#create-bloc-modal button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-shell { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ---- header ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 6px 0 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-kicker { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; margin: 0 0 4px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-heading { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; margin: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-close { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 0 !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.06) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; }

/* ---- preview card ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; margin: 0 0 6px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; border-radius: 14px !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-icon { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; font-size: 18px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-footer { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-title { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-desc { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; margin-top: 3px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-action { display: none !important; }

/* ---- fields ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-panel { display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field { display: block !important; margin: 0 !important; padding: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field > label:not(.bytes-bloc-create-media-label) { display: block !important; margin: 16px 6px 8px !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field input:not([type="file"]):not([type="hidden"]),
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field input:not([type="file"]):not([type="hidden"]):focus {
    width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important; -webkit-appearance: none !important; appearance: none !important;
}
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-row { margin: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-label { display: flex !important; align-items: center !important; gap: 10px !important; height: 46px !important; padding: 0 16px !important; margin: 0 !important; border: 1px dashed #EAEAE6 !important; border-radius: 14px !important; background: #FFFFFF !important; font-size: 13px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-label i { color: #0FBFA4 !important; -webkit-text-fill-color: #0FBFA4 !important; }
#create-bloc-modal#create-bloc-modal input[type="file"] { display: none !important; }

/* ---- access and billing: pills on one track ---- */
#create-bloc-modal#create-bloc-modal .room-access, #create-bloc-modal#create-bloc-modal .room-billing { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: 14px !important; background: #F1F1ED !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-access-opt, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-billing-opt {
    height: 40px !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    font-size: 12.5px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-access-opt i, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-billing-opt i { font-size: 11px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-access-opt.is-active, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-billing-opt.is-active { background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.08) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#create-bloc-modal#create-bloc-modal .text-bloc-paid-stripe-status { margin: 10px 6px 0 !important; font-size: 11.5px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

/* ---- submit ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-actions { margin: 18px 0 0 !important; padding: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
    background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; transform: none !important; opacity: 1 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer;
}
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary * { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary:disabled { background: #EDEDE8 !important; box-shadow: none !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary:disabled * { color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }

/* ---- the season sheet sits inside the Bytes surface; the backdrop is its page ---- */
#create-bloc-modal-backdrop#create-bloc-modal-backdrop { background: #FBFBF9 !important; padding: 0 !important; }
#create-bloc-modal#create-bloc-modal { padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; display: block !important; }
/* The native select, as a pill with the value on the left and a chevron drawn by the browser hidden. */
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field select,
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field select:focus {
    width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; background-image: none !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important;
}
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field select option { background: #FFFFFF !important; color: #111214 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-secondary { height: 44px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer; }

/* ---- what the old sheet still had a say in ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview { flex-direction: row !important; min-height: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview::before, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview::after { display: none !important; content: none !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb { min-height: 0 !important; aspect-ratio: auto !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-icon { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-label { flex-direction: row !important; justify-content: center !important; min-height: 0 !important; height: 46px !important; }
/* The script hides rows with an inline display; read that back off the attribute. */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field[style*="display:none"], #create-bloc-modal#create-bloc-modal .bytes-bloc-create-field[style*="display: none"] { display: none !important; }

#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview { display: flex !important; height: auto !important; aspect-ratio: auto !important; padding: 12px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-footer { position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb { width: 52px !important; height: 52px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-footer { width: auto !important; height: auto !important; }

#create-bloc-modal-backdrop#create-bloc-modal-backdrop { position: fixed !important; inset: 0 !important; z-index: 2147483002 !important; }
html body:has(#create-bloc-modal-backdrop[style*="display: flex"]) #bottom-nav,
html body:has(#create-bloc-modal-backdrop[style*="display:flex"]) #bottom-nav,
html body:has(#create-bloc-modal-backdrop[style*="display: flex"]) #mobile-bottom-nav-underlay,
html body:has(#create-bloc-modal-backdrop[style*="display:flex"]) #mobile-bottom-nav-underlay { display: none !important; }
