/* 全体的なフォントと背景色 */
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f4f7f6;
        display: flex;
        justify-content: center;
        align-items: center;
/*        min-height: 100vh;*/
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
    }

    #logo {
        height: 55px;
        background: url(../pic/Srshop-SmallLogo.jpg);
        position: absolute;
        top: 0px;
        width: 100%;
    }
    .main{
        top: 52px;
        position: relative;
    }

    /* フォームコンテナ */
    form {
        background-color: #ffffff;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 480px;
        box-sizing: border-box;
    }

    /* ラベルのスタイル */
    label {
        display: block;
        margin-bottom: 8px;
        color: #555;
        font-size: 0.95em;
        font-weight: 600;
    }

    /* 金額入力フィールドのスタイル */
    input[type="number"] {
        width: calc(100% - 20px);
        padding: 12px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 1em;
        color: #333;
        box-sizing: border-box;
        transition: border-color 0.3s ease;
        margin-bottom: 20px;
    }

    input[type="number"]:focus {
        outline: none;
        border-color: #635bff;
        box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.2);
    }

    /* 個別のStripe Elementsのコンテナスタイル */
    .StripeElementContainer {
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #fdfdfd;
        /* Stripe Elementの内部にpaddingは含めない（appearanceで制御するため） */
        /* min-heightもStripe Elementが自動調整するため、必須ではないが残す */
        min-height: 44px;
        margin-bottom: 20px; /* 各入力項目間に余白 */
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        /* display, align-items, line-height は不要（Iframe内部の制御のため） */
        /* -webkit-font-smoothing, -moz-osx-font-smoothing も不要 */
    }

    /* フォーカス時のスタイル */
    /* Stripe Elements自身がフォーカス時のスタイルを持つため、
       親要素に適用するこのスタイルは視覚的なフィードバックを補強する目的 */
    .StripeElementContainer.StripeElement--focus {
        border-color: #635bff;
        box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.2);
    }

    /* 有効期限とCVCを横並びにするためのFlexコンテナ */
    .card-details-row {
        display: flex;
        gap: 20px; /* 要素間のスペース */
        margin-bottom: 20px;
    }

    .card-details-row .form-group {
        flex: 1; /* 等幅で並べる */
        margin-bottom: 0; /* 親で余白を設定するため、ここでは0 */
    }

    /* 支払いボタンのスタイル */
    #submit {
        background-color: #635bff;
        color: white;
        padding: 15px 25px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1.1em;
        font-weight: 600;
        width: 100%;
        transition: background-color 0.3s ease, transform 0.2s ease;
        margin-top: 25px;
    }

    #submit:hover {
        background-color: #524ac9;
        transform: translateY(-2px);
    }

    #submit:active {
        transform: translateY(0);
    }

    /* エラーメッセージのスタイル */
    #error-message {
        color: #e03131;
        margin-top: 15px;
        text-align: center;
        font-size: 0.9em;
        font-weight: 600;
    }

    #card-expiry-element{
        margin-top: 30px;
    }

      /* 既存の styles.css に追加する、またはstyles.cssに移動 */

    /* ローディングオーバーレイのスタイル */
    #loading-overlay {
        position: fixed; /* 画面全体に固定 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
        display: flex; /* 中央寄せのため */
        justify-content: center; /* 水平中央寄せ */
        align-items: center; /* 垂直中央寄せ */
        z-index: 9999; /* 他の要素より手前に表示 */
        color: white;
        font-size: 1.2em;
        flex-direction: column; /* テキストとスピナーを縦に並べる */
        gap: 15px; /* 要素間のスペース */
        visibility: hidden; /* 最初は非表示 */
        opacity: 0; /* 最初は透明 */
        transition: visibility 0s, opacity 0.3s linear; /* フェードイン/アウト */
    }

    #loading-overlay.active {
        visibility: visible;
        opacity: 1;
    }

    /* ローディングスピナー（CSSのみで作成） */
    .spinner {
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-top: 4px solid #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* 金額表示のスタイル調整 */
    .amount-display {
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px; /* 他のフォームグループとの間にスペース */
        display: block; /* labelと合わせるためにブロック要素に */
    }
    .amount-display span {
        font-size: 1.5em; /* 金額を少し大きく */
        color: #635bff; /* 目立つ色に */
    }

    /* レスポンシブ対応 */
    @media (max-width: 600px) {
        form {
            padding: 30px 20px;
            border-radius: 0;
            box-shadow: none;
        }
        .card-details-row {
            flex-direction: column; /* スマホでは縦並び */
            gap: 0; /* 縦並びなのでギャップは不要 */
        }
        .card-details-row .form-group {
            margin-bottom: 20px; /* 縦並びになったときに余白 */
        }
        .card-details-row .form-group:last-child {
            margin-bottom: 0; /* 最後の要素の余白はなし */
        }
    }