/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "@ionic/angular/css/normalize.css";
@import "@ionic/angular/css/structure.css";
@import "@ionic/angular/css/typography.css";
@import "@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "@ionic/angular/css/padding.css";
@import "@ionic/angular/css/float-elements.css";
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";

.custom-modal {
    --width: 100%; /* 宽度占满屏幕 */
    --height: 50%; /* 高度占据屏幕下半部分 */
    --border-radius: 20px 20px 0 0; /* 顶部圆角 */
    --margin-top: auto; /* 将模态框置于底部 */
    --box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2); /* 添加顶部阴影 */
    --background: white; /* 背景色 */
  
    position: fixed; /* 使用固定定位 */
    bottom: 0; /* 固定在屏幕底部 */
    left: 0; /* 水平居中 */
    animation: slide-up 0.8s ease-in-out; /* 滑动动画 */
  }
  
  /* 动画：模态框从底部滑入 */
  @keyframes slide-up {
    from {
      transform: translateY(100%); /* 初始位置在屏幕下方 */
    }
    to {
      transform: translateY(0); /* 滑动到原始位置 */
    }
  }