* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    max-width: 1200px; 
    margin: 0 auto; 
    font-family: Ubuntu, OpenSans, sans-serif;
    font-weight: 300;
    line-height: 1.6; 
    color: #333; 
    margin-bottom:40px;
}
main{background-color: #E6E6E6;}
.header,.footer{
    width:100%;
    background: #333;
    color: white;
    padding: 0.25rem;
    text-align: center;
    font-size: 1.25rem;
   /* margin-bottom: 20px;*/
}
.footer{min-height:30px;font-size:0.85rem;}

.left {
    background: #F8F8F8;
    text-align: center;
}

.left h2 {
    margin-bottom: 1rem;
    color: #2a4d8e;
}

.form-contact {
    background: #F8F8F8;
    overflow: visible;
}

.form-container {
    padding:0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.form-header {
  width:100%;
  height:50px;
  display: flex;
  justify-content: space-between;
  align-items: center;  
  position: relative; 
  padding-left: 0.5rem;
  background-color: green;

}

.form-header h2 {
    display: flex;
    align-items: center;
    background: #2a4d8e;
    color: white;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    border-radius: 10px;
    overflow-y: visible;
}

.form-header .arrow {
  position: absolute;      /* 脱离 Flex 流独立定位 */
  right: 0;               /* 贴紧父容器右侧 */
  margin-right: 1.5rem;

}
.arrow {font-size:1.5rem;}

#mainForm {padding:0 0.75rem;}
/* 表单行和组样式 */
.form-row {
    display: flex;
    gap: 1rem; /* 表单字段之间的间距 */
    margin-bottom: 1rem;
}

.form-group {
    flex: 1;
    position: relative;
    margin-bottom:0.5rem;
}
.required-tag,.optional-tag{color: #006699;font-weight: 400;font-size: 0.9em;}
label {
    display: block;
    color: #4a5568;
    font-weight: 600;
    font-size: 0.9rem;
}

input, select, textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    color: #333;
}

input:focus, select:focus, textarea:focus {
    border-color: #4a90e2;
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    background: #f9fafb; 
}

textarea {
    height: 7.5rem;
    resize: vertical;
}

button {
    background: #2a4d8e;
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 1rem;
}

button:hover {
    background: #357abd;
    transform: translateY(-2px);
}

button:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
}

.error {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2);
}

.error-message {
    color: #e53e3e;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.error-message.show {
    opacity: 1;
    transform: translateY(0);
}

.char-counter {
    text-align: right;
    color: #718096;
    font-size: 0.85rem;
   /* margin-top: 0.5rem;*/
}

.char-counter.warning {
    color: #e53e3e;
}
        /* 交易类型样式 */
        .transaction-type-group {
            display: flex;
            gap: 30px;
            padding: 5px;
        }

        .transaction-type-radio {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .transaction-type-radio input[type="radio"] {
            width: 18px;
            height: 18px;
        }
        .locked-field {
            cursor: not-allowed;
            font-weight:600;
            color:#DD0000 !important;
        }

/* 货币组容器 */
.currency-group {
    display: flex;
    gap: 0; /*  原0.5rem*/
    align-items: center; 
    border :  2px solid    #e2e8f0;        
    border-radius :  8px;
}

.currency-input {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    flex: 3; /* 占用更多空间 */
}

.currency-symbol {
    padding : 0.2rem;        
    font-size : 1.5em;        
    color : #DD0000;        
    font-weight :  600;        
    border :  none;        
    pointer-events :  none;        
    text-align :  center;        
    width :  1.5em;        
    line-height :  1.5;        
    background : white;
}

/* 输入框样式 */
.currency-input input {
    font-weight:600;
    padding:0.75rem;
    flex: 1; /* 输入框占用剩余空间 */
    /*padding-left: 20px; /* 为符号留出空间 */
    border: 2px solid #e2e8f0;
    border-radius: 0;/*0 8px 8px 0; */
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    color: #333;
}

/* 输入框聚焦时的样式 */
.currency-input input:focus {
    border-color: #4a90e2;
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* 货币选择框样式 */
.currency-select select {
    max-width:6em; /* 人民币最多占用6个字宽度 */
    font-weight:600;
    flex: 1; /* 选择框占用剩余空间 */
    padding: 0.75rem 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 0 8px 8px 0; /*原8px */
    font-size: 1rem;
    background: lightblue;
    color: #333;
    transition: all 0.3s ease;
}

/* 货币选择框聚焦时的样式 */
.currency-select select:focus {
    border-color: #4a90e2;
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}
.description {
    overflow-wrap: break-word;
    width:100%;
    min-height:200px;
    font-size:1.25rem;
    align-items:center;
    text-align:left;
    padding:0 0.5rem;
    line-height:1.5;}
.left h1 {font-size: 2.5rem;padding:0.75rem;}
.gif {text-align:center;display:block;margin:0 auto;}
.big {font-size:1.5rem;font-weight: 400;}
.red {color:#dd0000;}
.quote {background-color: #D8D8D8;
            padding: 0; /* Adjusted padding */
            border-radius: 5px;
            margin: 0; /* Adjusted margin */
            font-style: italic;
}
#logo {display:block;margin:0 auto;max-width:100%;
    image-rendering: -webkit-optimize-contrast; /* 锐化缩小后的图片 */
    image-rendering: crisp-edges;
    aspect-ratio: 640/130;
    object-fit: cover; /* 可选: 裁剪模式保持比例 */
}
#contactEmail {font-weight:300;color:#abc;white-space:nowrap;  font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-style: normal;}
#Glovo {font-family: "Glovo",Outfit,sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal !important;letter-spacing: 1px;}

/* 始终固定 300x300 尺寸 */
  .universal-image {
    display: block;
    margin:0 auto;
  }

/* 桌面端强制预加载 */
  .desktop-img {width: 300px;height: 300px;display: block; }
  .mobile-img { display: none; }

@media (max-width: 768px) {
    body {font-family: Outfit;}
    .desktop-img { display: none; }
    .mobile-img { display: block;max-width:100%; }
    .content-container {display: flex;align-items: center;justify-content: center;
    min-height: calc(100vh - 112px);}
    .cont {font-size:1.125rem;line-height:1.4;}
    .form-contact {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 60px;
        transition: max-height 0.3s ease, transform 0.3s ease;
        z-index: 1000;
        margin: 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        touch-action: none;

    }

    .form-contact.expanded {
        /*max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))  !important; */
        max-height: 100vh;
        top: auto;
        bottom: 0;
        touch-action: auto;
        overflow-y:auto;
        /*margin-top:0.75rem;*/
    }
    .former-header h2.expanded {margin-bottom: 0;}
    .form-contact.expanding {max-height: 100vh;}
    .form-contact.collapsing {
        max-height: 60px; /* 其他收起时的高度 */
    }
    .form-container {
        height: calc(100vh - 60px);
        overflow-y: auto;
        border-radius: 0 !important;
    }

    body.form-expanded {
        overflow: hidden;
    }
    .header {
        margin-bottom:0;
        padding:0.25rem;
        line-height:1.2;
    }
    .footer {padding:0.25rem;margin-bottom:10px;}
    #mainForm {display:none;}
    .form-contact.expanded #mainForm {
        display: block; /* 展开时显示 */
        animation: fadeIn 0.3s ease;
    }
    .left {
 /*       height: calc(100vh - 112px);
        height: calc(100dvh - 112px);
 */
        overflow-y: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
     /*   align-items: center; */
        justify-content: center;
        margin-bottom: 0;
        
    }
    .form-contact.expanded .arrow {transform: rotate(180deg);}
    .big {font-size:1.25rem;line-height:1.3;}
}

@media (max-width:467px)
{
.desktop-img { display: none; }
.mobile-img { display: block;max-width:100%; height:auto;}
.content-container {display: flex;align-items: center;justify-content: center;
    min-height: calc(100vh - 136px);}
  .header {width:100%;height:56px;}
/*  .left {
        height: calc(100vh - 136px);
        height: calc(100dvh - 136px); 
  } */

  #LOGO {max-width: 300px;}
}

@media (min-width: 769px) {
    .content-container {
        justify-content: center; /* 确保分栏居中 */
        padding: 0;
        display: flex;
        gap: 20px; /* 增加左右内容的间距 */
        align-items: center;
    }
    .left{display:flex;flex-direction:column;flex: 2;margin-left:20px;border-radius:30% 3%;}
    .form-contact{flex:1;background: #F8F8F8;border-radius:10px;margin-bottom:20px;max-width:350px;min-width: 285px;padding-top:20px;}
    .form-header{border-radius:10px 10px 0 0;}
    button{border-radius: 0 0 10px 10px;}
    .header{height:40px;border-radius: 10px 10px 0 0;}
    .footer{height:30px;border-radius: 0 0 10px 10px;}
    main{border-radius: 10px;}

}

/* 表单容器的动态显示效果 */
.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}