/* お申し込みボタンブロックのスタイル */
.wp-block-my-theme-application-buttons {
    margin: 2em 0!important;
    max-width: 800px!important;
    margin-left: auto!important;
    margin-right: auto!important;
}

.application-buttons-container {
    background: #fff!important;
    overflow: hidden!important;
    padding: 30px!important;
}

.application-buttons-title {
    background: linear-gradient(135deg, #269d46 0%, #1e7e34 100%)!important;
    color: #fff!important;
    margin: -30px -30px 30px -30px !important;
    padding: 20px 30px!important;
    font-size: 20px!important;
    font-weight: bold!important;
    text-align: center!important;
    border: none!important;
}

.application-buttons-list {
    display: flex!important;
    flex-wrap: wrap!important;
    gap: 20px!important;
    justify-content: center!important;
}

/* グリッドレイアウト */
.grid-layout .application-buttons-list {
    display: grid!important;
    grid-template-columns: repeat(4, 1fr)!important;
    gap: 20px!important;
}

/* リストレイアウト */
.list-layout .application-buttons-list {
    display: flex!important;
    flex-direction: column!important;
    gap: 15px!important;
}

.list-layout .application-button-item {
    width: 100%!important;
}

/* ボタンアイテム */
.application-button-item {
    flex: 1!important;
    min-width: 200px!important;
    max-width: 300px!important;
    grid-column: span 2!important;
}
.application-button-item.app-button {
    grid-column: 2 / 4!important;
    grid-row: 3 / 4!important;
}

/* テキストボタン */
.application-button.text-button {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    padding: 15px 20px!important;
    background: linear-gradient(135deg, #269d46 0%, #1e7e34 100%)!important;
    color: #fff!important;
    text-decoration: none!important;
    border-radius: 50px!important;
    font-weight: 600!important;
    font-size: 14px!important;
    transition: all 0.3s ease!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
    width: 100%!important;
    text-align: center!important;
    position: relative!important;
    grid-column: span 2!important;
}

.application-button.text-button:hover {
    transform: translateY(-2px)!important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)!important;
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%)!important;
    color: #fff!important;
    text-decoration: none!important;
}

.button-icon {
    font-size: 18px!important;
    margin-right: 10px!important;
    width: 20px!important;
    text-align: center!important;
}

.button-text {
    flex: 1!important;
}

/* アプリ画像ボタン */
.application-button.app-image-button {
    display: block!important;
    width: 100%!important;
    text-decoration: none!important;
    transition: all 0.3s ease!important;
}

.application-button.app-image-button:hover {
    transform: translateY(-2px)!important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)!important;
    text-decoration: none!important;
}

.app-button-image {
    width: 100%!important;
    height: auto!important;
    border-radius: 8px!important;
    display: block!important;
}

/* コープアプリ画像のパス修正 */
.wp-block-my-theme-application-buttons .app-button-image[src="images/coop_app_.png"] {
    content: url('../images/coop_app_.png')!important;
}

/* エディタ用のスタイル */
.wp-block-my-theme-application-buttons .application-buttons-controls {
    margin-bottom: 20px!important;
}

.wp-block-my-theme-application-buttons .application-buttons-controls .components-checkbox-control {
    margin-bottom: 10px!important;
}

.wp-block-my-theme-application-buttons .application-buttons-controls .components-checkbox-control:last-child {
    margin-bottom: 0!important;
}

/* 連動状態の表示 */
.wp-block-my-theme-application-buttons .sync-status {
    font-size: 12px !important;
    color: #666 !important;
    margin-bottom: 15px !important;
    padding: 8px !important;
    background-color: #f0f0f0 !important;
    border-radius: 4px !important;
    border-left: 3px solid #269d46 !important;
}

/* 連動状態のアイコン */
.wp-block-my-theme-application-buttons .sync-status::before {
    content: '🔄'!important;
    margin-right: 5px!important;
    font-size: 14px!important;
}

/* ボタン設定パネル */
.button-settings {
    margin-top: 15px!important;
}

.button-setting-item {
    margin-bottom: 20px!important;
    padding: 15px!important;
    background: #f8f9fa!important;
    border-radius: 6px!important;
    border: 1px solid #e9ecef!important;
}

.button-setting-item h4 {
    margin: 0 0 10px 0!important;
    font-size: 14px!important;
    font-weight: 600!important;
    color: #333!important;
}

.button-setting-item .components-text-control__input {
    margin-bottom: 10px!important;
}

/* レイアウト設定 */
.layout-settings {
    margin-top: 15px!important;
}

.layout-option {
    display: flex!important;
    align-items: center!important;
    margin-bottom: 10px!important;
    cursor: pointer!important;
    font-size: 14px!important;
}

.layout-option input[type="radio"] {
    margin-right: 8px!important;
}

.layout-option span {
    color: #333!important;
}

/* レスポンシブデザイン */
@media screen and (max-width: 768px) {
    .wp-block-my-theme-application-buttons {
        margin: 1em 0!important;
    }
    
    .application-buttons-container {
        padding: 20px!important;
    }
    
    .application-buttons-title {
        margin: -20px -20px 20px -20px !important;
        padding: 15px 20px!important;
        font-size: 18px!important;
    }
    
    .application-buttons-list {
        gap: 15px!important;
    }
    
    .grid-layout .application-buttons-list {
        grid-template-columns: 1fr!important;
        gap: 15px!important;
    }
    
    .application-button-item {
        min-width: auto!important;
        max-width: none!important;
    }
    
    .application-button.text-button {
        padding: 12px 16px!important;
        font-size: 13px!important;
    }
    
    .button-icon {
        font-size: 16px!important;
        margin-right: 8px!important;
    }
    .grid-layout .application-buttons-list {
        grid-template-columns: 1fr!important;
    }
    .application-button-item.app-button {
        grid-column: 1 / 2!important;
        grid-row: auto!important;
    }
}

@media screen and (max-width: 480px) {
    .application-buttons-container {
        padding: 15px!important;
    }
    
    .application-buttons-title {
        margin: -15px -15px 15px -15px !important;
        padding: 12px 15px!important;
        font-size: 16px!important;
    }
    
    .application-buttons-list {
        gap: 12px!important;
    }
    
    .application-button.text-button {
        padding: 10px 14px!important;
        font-size: 12px!important;
    }
    
    .button-icon {
        font-size: 14px!important;
        margin-right: 6px!important;
    }
}

/* アニメーション効果 */
.application-button-item {
    animation: fadeInUp 0.5s ease!important;
}

@keyframes fadeInUp {
    from {
        opacity: 0!important;
        transform: translateY(20px)!important;
    }
    to {
        opacity: 1!important;
        transform: translateY(0)!important;
    }
}

/* アクセシビリティの向上 */
.application-button:focus {
    outline: 2px solid #269d46!important;
    outline-offset: 2px!important;
}

.application-button:focus:not(:focus-visible) {
    outline: none!important;
}

.wp-block-my-theme-application-buttons .application-button:hover {
    transform: none!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
}

/* 画像の最適化 */
.app-button-image {
    max-width: 100%!important;
    height: auto!important;
    object-fit: contain!important;
}

/* ボタンのホバー効果を強化 */
.application-button.text-button::before {
    content: ''!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    background: rgba(255, 255, 255, 0.1)!important;
    border-radius: 8px!important;
    opacity: 0!important;
    transition: opacity 0.3s ease!important;
}

.application-button.text-button:hover::before {
    opacity: 1!important;
}

/* リストレイアウトでのボタン幅調整 */
.list-layout .application-button.text-button {
    justify-content: flex-start!important;
    text-align: left!important;
}

.list-layout .button-text {
    flex: 1!important;
    text-align: left!important;
}