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

/* エディタ用のコントロールエリア */
.application-methods-controls {
    background: #f8f9fa!important;
    border: 1px solid #e9ecef!important;
    border-radius: 8px!important;
    padding: 20px!important;
    margin-bottom: 20px!important;
}

.application-methods-controls-title {
    margin: 0 0 15px 0!important;
    font-size: 14px!important;
    font-weight: 600!important;
    color: #333!important;
    text-align: center!important;
}

/* フロントエンド用のトグルコンテナ */
.application-methods-toggle-container {
    background: #f8f9fa!important;
    border: 1px solid #e9ecef!important;
    border-radius: 8px!important;
    padding: 20px!important;
    margin-bottom: 20px!important;
    text-align: center!important;
}

.application-methods-toggle-title {
    margin: 0 0 15px 0!important;
    font-size: 14px!important;
    font-weight: 600!important;
    color: #333!important;
}

.application-methods-toggle-buttons {
    display: flex!important;
    flex-wrap: wrap!important;
    gap: 10px!important;
    justify-content: center!important;
}

.application-method-toggle-btn {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 8px 12px!important;
    border-radius: 6px!important;
    font-size: 12px!important;
    font-weight: 500!important;
    transition: all 0.3s ease!important;
    min-width: 120px!important;
    justify-content: center!important;
    border: 1px solid #ddd!important;
    background-color: #fff!important;
    color: #666!important;
    cursor: pointer!important;
}

.application-method-toggle-btn .dashicons {
    font-size: 14px!important;
    width: 14px!important;
    height: 14px!important;
}

.application-method-toggle-btn.is-selected {
    background-color: #269d46!important;
    color: #fff!important;
    border-color: #269d46!important;
}

.application-method-toggle-btn.is-selected:hover {
    background-color: #1e7e34!important;
    border-color: #1e7e34!important;
}

.application-method-toggle-btn:not(.is-selected) {
    background-color: #fff!important;
    color: #666!important;
    border: 1px solid #ddd!important;
}

.application-method-toggle-btn:not(.is-selected):hover {
    background-color: #f8f9fa!important;
    border-color: #269d46!important;
    color: #269d46!important;
}

.toggle-btn-text {
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
}

.application-methods-container {
    background: #fff!important;
    overflow: hidden!important;
}

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

.application-methods-list {
    padding: 0!important;
}
/* 
.wp-singular .application-method-item {
    display: none!important;
} */
.application-method-item {
    transition: all 0.3s ease!important;
    margin-bottom: 10px!important;
    /* 初期状態は表示 */
    display: block!important;
    visibility: visible!important;
    opacity: 1!important;
}
.application-method-item.is-hidden {
    display: none!important;
    visibility: hidden!important;
    opacity: 0!important;
    height: 0!important;
    overflow: hidden!important;
}
.application-method-item.is-visible {
    display: block!important;
    visibility: visible!important;
    opacity: 1!important;
    height: auto!important;
    overflow: visible!important;
}

.application-method-item:last-child {
    border-bottom: none!important;
}

.application-method-header {
    display: flex!important;
    align-items: center!important;
    padding: 15px 30px!important;
    cursor: pointer!important;
    transition: all 0.3s ease!important;
    position: relative!important;
    text-align: center!important;
}

.application-method-header:before {
    content: '+';
    position: absolute!important;
    right: 30px!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
    font-size: 24px!important;
    font-weight: bold!important;
    color: #fff!important;
    transition: transform 0.3s ease!important;
    width: 24px!important;
    text-align: center!important;
    line-height: 1!important;
}

.application-method-header:hover {
    opacity: 0.8!important;
}

.application-method-icon {
    font-size: 20px!important;
    color: #fff!important;
    margin-right: 15px!important;
    width: 24px!important;
    text-align: center!important;
}

.application-method-title {
    flex: 1!important;
    font-size: 16px!important;
    font-weight: 600!important;
    color: #fff!important;
    margin: 0!important;
}

.application-method-item.is-active .application-method-header:before {
    transform: translateY(-50%) rotate(45deg)!important;
}

.application-method-content {
    /* max-height: 0; */
    display: none;
    overflow: hidden!important;
    transition: max-height 0.3s ease!important;
    background-color: #fff!important;
}

.editor-styles-wrapper .application-method-content {
    max-height: none!important;
    overflow: visible!important;
    display: block!important;
}

/* アクティブ状態でのコンテンツ表示 */
.application-method-item.is-active .application-method-content {
    /* max-height: 1000px!important; */
}

.application-method-inner {
    padding: 20px 30px!important;
    background-color: #fff!important;
}

.application-method-inner > * {
    margin-top: 0!important;
    margin-bottom: 1em!important;
}

.application-method-inner > *:last-child {
    margin-bottom: 0!important;
}

.application-method-link {
    padding: 0 30px 20px 30px!important;
    border-top: 1px solid #e9ecef!important;
}

.application-method-button {
    display: inline-block!important;
    background: #269d46!important;
    color: #fff!important;
    padding: 10px 20px!important;
    border-radius: 6px!important;
    text-decoration: none!important;
    font-weight: 600!important;
    transition: all 0.3s ease!important;
    margin-top: 15px!important;
}

.application-method-button:hover {
    background: #1e7e34!important;
    color: #fff!important;
    text-decoration: none!important;
    transform: translateY(-2px)!important;
    box-shadow: 0 4px 8px rgba(38, 157, 70, 0.3)!important;
}

/* エディタ用のスタイル */
.wp-block-my-theme-application-methods .application-methods-controls {
    display: block!important;
}

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

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

/* ブロックエディタ内のスタイル */
.wp-block-my-theme-application-methods .block-editor-inner-blocks {
    width: 100%!important;
}

.wp-block-my-theme-application-methods .block-editor-block-list__layout {
    margin: 0!important;
}

.wp-block-my-theme-application-methods .block-editor-block-list__block {
    margin: 0!important;
}

.wp-block-my-theme-application-methods .block-editor-block-list__block:last-child {
    margin-bottom: 0!important;
}

.wp-block-my-theme-application-methods .block-editor-button-block-appender {
    margin: 10px 0!important;
    width: 100%!important;
    border: 2px dashed #ddd!important;
    background: transparent!important;
    color: #666!important;
}

.wp-block-my-theme-application-methods .block-editor-button-block-appender:hover {
    border-color: #269d46!important;
    color: #269d46!important;
}

/* 項目設定パネルのスタイル */
.method-settings {
    margin-top: 15px!important;
}

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

.method-setting-item:last-child {
    margin-bottom: 0!important;
}

.method-setting-item h4 {
    margin: 0 0 15px 0!important;
    font-size: 14px!important;
    font-weight: 600!important;
    color: #333!important;
    padding-bottom: 8px!important;
    border-bottom: 1px solid #e9ecef!important;
}

.method-setting-item .components-base-control {
    margin-bottom: 15px!important;
}

.method-setting-item .components-base-control:last-child {
    margin-bottom: 0!important;
}

.method-setting-item .components-base-control__label {
    font-size: 12px!important;
    font-weight: 500!important;
    color: #666!important;
    margin-bottom: 5px!important;
}

.method-setting-item .components-text-control__input,
.method-setting-item .components-select-control__input {
    border: 1px solid #ddd!important;
    border-radius: 4px!important;
    padding: 8px 12px!important;
    font-size: 13px!important;
    width: 100%!important;
    box-sizing: border-box!important;
}

.method-setting-item .components-text-control__input:focus,
.method-setting-item .components-select-control__input:focus {
    border-color: #269d46!important;
    box-shadow: 0 0 0 1px #269d46!important;
    outline: none!important;
}

/* ブロック設定パネルのスタイル */
.wp-block-my-theme-application-methods .components-panel__body {
    border-bottom: 1px solid #e9ecef!important;
}

.wp-block-my-theme-application-methods .components-panel__body:last-child {
    border-bottom: none!important;
}

/* レスポンシブデザイン */
@media screen and (max-width: 768px) {
    .wp-block-my-theme-application-methods {
        margin: 1.5em 0!important;
    }

    .application-methods-controls,
    .application-methods-toggle-container {
        padding: 15px!important;
    }

    .application-methods-toggle-buttons {
        flex-direction: column!important;
        align-items: center!important;
    }

    .application-method-toggle-btn {
        width: 100%!important;
        max-width: 200px!important;
    }

    .application-methods-title {
        font-size: 18px!important;
        padding: 15px 20px!important;
    }

    .application-method-header {
        padding: 15px 20px!important;
    }

    .application-method-icon {
        font-size: 18px!important;
        margin-right: 12px!important;
    }

    .application-method-title {
        font-size: 15px!important;
    }

    .application-method-inner,
    .application-method-link {
        padding: 15px 20px!important;
    }
}

@media screen and (max-width: 480px) {
    .application-methods-title {
        font-size: 16px!important;
        padding: 12px 15px!important;
    }

    .application-method-header {
        padding: 12px 15px!important;
    }

    .application-method-icon {
        font-size: 16px!important;
        margin-right: 10px!important;
    }

    .application-method-title {
        font-size: 14px!important;
    }

    .application-method-inner,
    .application-method-link {
        padding: 12px 15px!important;
    }
}

/* アニメーション */
.application-method-item {
    animation: fadeInUp 0.3s ease-out!important;
}

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

/* フォーカス状態 */
.application-method-header:focus {
    outline: 2px solid #269d46!important;
    outline-offset: -2px!important;
}

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

/* 非表示項目のスタイル */
.application-method-item[style*="display: none"],
.application-method-item[style*="visibility: hidden"] {
    display: none!important;
    visibility: hidden!important;
    opacity: 0!important;
    height: 0!important;
    overflow: hidden!important;
    margin: 0!important;
    padding: 0!important;
    border: none!important;
}

/* フロントエンド用のトグルボタンスタイル */
.application-methods-toggle-container .application-method-toggle-btn {
    position: relative!important;
    overflow: hidden!important;
}

.application-methods-toggle-container .application-method-toggle-btn::before {
    content: ''!important;
    position: absolute!important;
    top: 0!important;
    left: -100%!important;
    width: 100%!important;
    height: 100%!important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)!important;
    transition: left 0.5s!important;
}

.application-methods-toggle-container .application-method-toggle-btn:hover::before {
    left: 100%!important;
}

/* エディタ内での非表示 */
.editor-styles-wrapper .application-methods-toggle-container {
    display: none!important;
}

.wp-block-my-theme-application-methods:not(.editor-styles-wrapper *) .application-methods-controls {
    display: none!important;
} 

.application-method-header {
    background-color: #00A0E9!important;
}

.application-method-a-button a {
    border-radius: 50px!important;
}

.application-method-a-image {
    display: flex!important;
    justify-content: center!important;
}
/* 画像ボタンのスタイル */
.line-image-button,
.app-image-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease!important;
    border-radius: 8px!important;
    cursor: pointer!important;
    display: block!important;
    margin: 0 auto!important;
}

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

.js-image-link {
    cursor: pointer!important;
}

/* 従来の画像スタイル（他の用途で使用される場合） */
.application-method-a-image img {
    max-width: 300px!important;
    height: auto!important;
    margin: auto!important;
}


.application-method-a-contact .contact-button-link {
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
}
.application-method-a-contact .wp-element-button {
    background: none!important;
    padding: 0!important;
}

.app-button-link a,
.line-button-link a {
    color: transparent!important;
    padding: 0;
    font-size: 0;
    background: none !important;
}
.app-button-link a:before {
    content: '';
    background-image: url(../../images/coop_app_.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 286px;
    height: 105px;
    display: block;
    margin: 0 auto;
}
.line-button-link a:before {
    content: '';
    background-image: url(../../images/line.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 400px;
    width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto;
}
.line-button .wp-block-button {
    width: 100%;
}
.application-method-item .application-method-a-contact {
    background: none!important;
    padding: 0!important;
}
.wp-singular .application-method-item {
    display: none!important;
}
.wp-block-my-theme-application-methods[data-selected-methods*="contact-app"] .application-method-item[data-method="contact-app"] {
    display: block!important;
}
.wp-block-my-theme-application-methods[data-selected-methods*="contact-line"] .application-method-item[data-method="contact-line"] {
    display: block!important;
}
.wp-block-my-theme-application-methods[data-selected-methods*="contact-web"] .application-method-item[data-method="contact-web"] {
    display: block!important;
}
.wp-block-my-theme-application-methods[data-selected-methods*="contact-phone"] .application-method-item[data-method="contact-phone"] {
    display: block!important;
}
.wp-block-my-theme-application-methods[data-selected-methods*="contact-ocr"] .application-method-item[data-method="contact-ocr"] {
    display: block!important;
}