/**
 * Amelia Service Radio Button - カード型スタイル
 * Version: 1.0.0
 */

/* ===================================
   元のドロップダウンを非表示
   =================================== */
/* Amelia v1 */
.amelia-app-booking .am-service-select .el-select,
.amelia-app-booking .am-service-select .am-select-wrapper {
    display: none !important;
}

/* Amelia v2 - より具体的なセレクタ */
.amelia-v2-booking .am-service-select .el-select,
.amelia-v2-booking .am-service-select .el-select__wrapper,
.amelia-v2-booking .am-service-select .am-select-wrapper,
.amelia-v2-booking .am-service-select .am-select,
.amelia-v2-booking .am-select-service .el-select,
.amelia-v2-booking .am-select-service .am-select-wrapper,
.amelia-v2-booking .am-fs__init-form__item.am-service-select .el-select,
.amelia-v2-booking .am-fs__init-form__item.am-service-select .am-select-wrapper,
.amelia-v2-booking .am-fs__init-form__item.am-service-select .am-select {
    display: none !important;
}

/* エラーメッセージも非表示（ラジオボタンで管理するため） */
.amelia-v2-booking .am-service-select .el-form-item__error,
.amelia-v2-booking .am-fs__init-form__item.am-service-select .el-form-item__error {
    display: none !important;
}

/* ラジオボタンが表示されているときのみドロップダウンを非表示 */
.asrb-radio-container ~ .el-select,
.asrb-radio-container ~ .am-select-wrapper {
    display: none !important;
}

/* ===================================
   カスタムラジオボタンコンテナ
   =================================== */
.asrb-radio-container {
    width: 100%;
    margin: 20px 0;
    padding: 0;
}

.asrb-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ===================================
   カード型ラジオボタン
   =================================== */
.asrb-radio-card {
    position: relative;
    border: 2px solid #B8BFC4 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    padding: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(26, 44, 55, 0.08) !important;
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
}

.asrb-radio-card:hover {
    border: 2px solid #1A84EE !important;
    box-shadow: 0 3px 8px rgba(26, 132, 238, 0.2) !important;
    transform: translateY(-2px) !important;
}

.asrb-radio-card.selected {
    border: 3px solid #1A84EE !important;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%) !important;
    box-shadow: 0 3px 10px rgba(26, 132, 238, 0.25) !important;
    padding: 15px !important; /* 太いボーダー分の調整 */
}

/* ===================================
   ラジオボタン入力
   =================================== */
.asrb-radio-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* ===================================
   カスタムラジオボタンのチェックマーク
   =================================== */
.asrb-radio-checkmark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border: 2px solid #B8BFC4;
    border-radius: 50%;
    background: #FFFFFF;
    transition: all 0.3s ease;
}

.asrb-radio-card:hover .asrb-radio-checkmark {
    border: 2px solid #1A84EE;
}

.asrb-radio-card.selected .asrb-radio-checkmark {
    border: 2px solid #1A84EE;
    background: #1A84EE;
}

.asrb-radio-checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform 0.2s ease;
}

.asrb-radio-card.selected .asrb-radio-checkmark::after {
    transform: translate(-50%, -50%) scale(1);
}

/* ===================================
   サービス情報
   =================================== */
.asrb-service-info {
    flex: 1;
    padding-right: 36px;
}

.asrb-service-name {
    font-size: 15px;
    font-weight: 600;
    color: #1A2C37;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.asrb-service-description {
    font-size: 13px;
    color: #808A90;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.asrb-service-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.asrb-service-price {
    font-size: 16px;
    font-weight: 700;
    color: #1A84EE;
}

.asrb-service-duration {
    font-size: 12px;
    color: #808A90;
    display: flex;
    align-items: center;
    gap: 4px;
}

.asrb-service-duration::before {
    content: '⏱';
    font-size: 14px;
}

/* ===================================
   カテゴリーバッジ（オプション）
   =================================== */
.asrb-service-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #1A84EE;
    background: rgba(26, 132, 238, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ===================================
   レスポンシブ対応
   =================================== */
@media screen and (max-width: 768px) {
    .asrb-radio-group {
        grid-template-columns: 1fr;
    }
    
    .asrb-radio-card {
        min-height: 90px;
        padding: 14px;
    }
    
    .asrb-service-name {
        font-size: 14px;
    }
    
    .asrb-service-price {
        font-size: 15px;
    }
}

@media screen and (max-width: 480px) {
    .asrb-radio-card {
        padding: 12px;
        min-height: 80px;
    }
    
    .asrb-radio-checkmark {
        top: 12px;
        right: 12px;
        width: 20px;
        height: 20px;
    }
    
    .asrb-radio-checkmark::after {
        width: 6px;
        height: 6px;
    }
    
    .asrb-service-info {
        padding-right: 28px;
    }
    
    .asrb-service-name {
        font-size: 13px;
    }
    
    .asrb-service-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .asrb-service-price {
        font-size: 14px;
    }
}

/* ===================================
   アニメーション
   =================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.asrb-radio-card {
    animation: fadeIn 0.3s ease;
}

/* ===================================
   アクセシビリティ対応
   =================================== */
.asrb-radio-input:focus + .asrb-radio-card {
    outline: 2px solid #1A84EE;
    outline-offset: 2px;
}

/* ===================================
   ローディング状態
   =================================== */
.asrb-loading {
    text-align: center;
    padding: 40px;
    color: #808A90;
    font-size: 14px;
}

.asrb-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #D1D5D7;
    border-top-color: #1A84EE;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===================================
   エラー状態
   =================================== */
.asrb-error {
    border: 2px solid #ff4444;
    background: #fff5f5;
    color: #cc0000;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
    font-size: 14px;
}