@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

#capture {
    display: inline-block;
    cursor: text;
    background-color: #fff;
    padding: 0;
    margin: 0;
}

.paytm_back {
    width: 1000px;
    height: 1294px;
    background: url("../images/paytm_template.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}

/* Amount Styles */
.amount_text {
    position: absolute;
    top: 333px; /* Moved up to match Figure 1 and make space for Header */
    left: 65%; /* Keeping the gap with the green checkmark */
    transform: translateX(-100%); 
    font-size: 130px; /* Increased from 90px to match Figure 1 */
    font-weight: 400 !important;
    color: #1d252d;
    display: inline-flex;
    align-items: flex-end; 
    letter-spacing: -3px; /* Slightly tighter for larger font */
    font-family: 'Roboto', sans-serif !important;
    line-height: 0.9;
}

.rupee_symbol {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
    margin-right: 6px; 
    font-size: 110px; /* Increased from 78px to match Figure 1 */
    display: inline-block;
    padding-bottom: 8px; /* Offset for larger flex-end */
    line-height: 1;
}

.comma {
    font-family: Verdana, sans-serif !important;
    font-weight: 700 !important;
    font-size: 80px; /* Increased from 55px to match larger font */
    padding: 0;
    margin-right: -6px; 
    display: inline-block;
    padding-bottom: 8px; 
    line-height: 1;
}

/* Receiver Info Styles */
.receiver_container {
    position: absolute;
    top: 572px; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}

.to_label {
    font-size: 40px;
    font-weight: 500;
    color: #1d252d;
    margin-bottom: 15px; 
    line-height: 1.2;
}

/* Sender Info Styles */
.sender_container {
    position: absolute;
    top: 910px; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}

.from_label {
    font-size: 40px;
    font-weight: 500; /* Medium weight for labels */
    color: #1d252d;
    margin-bottom: 15px; /* Perfect breathing room as per Fig 1 */
    line-height: 1.2;
}

.upi_id_container, .bank_info_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.upi_id, .bank_info {
    font-size: 30px;
    font-weight: 400;
    color: #1d252d;
    letter-spacing: 0.1px;
}

.bank_logo {
    height: 35px; 
    margin-left: 10px;
    cursor: pointer;
    transform: translateY(1px); /* Moved up from 5px to align better with text center */
}

/* Footer Info Styles */
.footer_info {
    position: absolute;
    bottom: 215px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    font-weight: 400;
    color: #6c757d;
    text-align: center;
    width: 100%;
    letter-spacing: 0.1px;
}

.footer_info .comma {
    font-family: Verdana, sans-serif !important;
    font-weight: 400 !important;
    font-size: 26px; /* Reduced from 32px to match Figure 2 */
    margin: 0;
    padding: 0;
}

/* Save Button Styles (from project pattern) */
.css-1xamfmm {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #00BAF2;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.css-1bgbwga {
    width: 24px;
    height: 24px;
}

#output {
    display: none;
}

.paid_in_text_overlay {
    position: absolute;
    top: 774px; /* 调整这个值以使其与背景图片中的火箭图标对齐 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px; /* 调整字体大小 */
    font-weight: 400;
    color: #555; /* 调整颜色 */
    letter-spacing: 0.1px;
    white-space: nowrap; /* 防止文本换行 */
    padding-left: 40px; /* 调整这个值以使其与背景图片中的火箭图标对齐 */
}