/* ========================================
   Bootstrap 4 → 5 Compatibility Shim
   EC-CUBE 4.1テンプレートを4.3環境で動作させるための互換CSS
   ======================================== */

/* --- テキストアライメント --- */
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-end { text-align: right !important; }
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }

/* --- フロート --- */
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }
.float-end { float: right !important; }
.float-start { float: left !important; }
.float-none { float: none !important; }

/* --- スペーシングユーティリティ (BS4 → BS5) --- */
/* ml-* → ms-* (margin-left → margin-start) */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

/* mr-* → me-* (margin-right → margin-end) */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

/* pl-* → ps-* (padding-left → padding-start) */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

/* pr-* → pe-* (padding-right → padding-end) */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* ms-* / me-* (BS5ネイティブだが念のため) */
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

/* ps-* / pe-* */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

/* --- Badge (BS4 → BS5) --- */
.badge-primary,
.badge-secondary,
.badge-success,
.badge-danger,
.badge-warning,
.badge-info {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
}
.badge-primary { color: #fff; background-color: #0d6efd; }
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-success { color: #fff; background-color: #198754; }
.badge-danger { color: #fff; background-color: #dc3545; }
.badge-warning { color: #000; background-color: #ffc107; }
.badge-info { color: #000; background-color: #0dcaf0; }

/* --- Form (BS4 → BS5) --- */
.form-group { margin-bottom: 1rem; }
.control-label { margin-bottom: 0.5rem; display: inline-block; font-weight: 600; }
.radio-inline,
.checkbox-inline { display: inline-block; margin-right: 1rem; padding-left: 0; font-weight: 400; vertical-align: middle; }
.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] { margin-right: 0.25rem; }
.input-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; }
.input-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; }
.help-block { display: block; margin-top: 0.25rem; margin-bottom: 1rem; color: #6c757d; font-size: 0.875em; }
.has-error .form-control { border-color: #dc3545; }
.has-error .control-label { color: #dc3545; }
.has-error .help-block { color: #dc3545; }
.has-success .form-control { border-color: #198754; }
.has-success .control-label { color: #198754; }
.has-warning .form-control { border-color: #ffc107; }
.has-warning .control-label { color: #ffc107; }

/* --- Form Horizontal (BS4 → BS5) --- */
.form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-right: -0.75rem; margin-left: -0.75rem; }
.form-horizontal .control-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; line-height: 1.5; text-align: right; }

/* --- Hidden utilities (BS4 → BS5) --- */
.hidden { display: none !important; }
.hidden-xs { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md { display: none !important; }
.hidden-lg { display: none !important; }
@media (min-width: 576px) {
  .hidden-xs { display: block !important; }
}
@media (min-width: 768px) {
  .hidden-sm { display: block !important; }
}
@media (min-width: 992px) {
  .hidden-md { display: block !important; }
}
@media (min-width: 1200px) {
  .hidden-lg { display: block !important; }
}

/* --- Button (BS4 → BS5) --- */
.btn-default { color: #212529; background-color: #e9ecef; border-color: #ced4da; display: inline-block; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.375rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
.btn-default:hover { background-color: #d3d9df; border-color: #b1bbc4; }

/* --- Panel (BS4 → BS5 / Card) --- */
.panel { margin-bottom: 1.25rem; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.375rem; }
.panel-default { border-color: #dee2e6; }
.panel-default > .panel-heading { color: #333; background-color: #f8f9fa; border-color: #dee2e6; padding: 0.75rem 1.25rem; border-bottom: 1px solid #dee2e6; }
.panel-default > .panel-body { padding: 1.25rem; }
.panel-title { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; color: inherit; }
.panel-footer { padding: 0.75rem 1.25rem; background-color: #f8f9fa; border-top: 1px solid #dee2e6; }

/* --- Well (BS4 → BS5) --- */
.well { min-height: 1.25rem; padding: 1.25rem; margin-bottom: 1.25rem; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 0.375rem; }

/* --- Thumbnail (BS4 → BS5) --- */
.thumbnail { display: block; padding: 0.25rem; margin-bottom: 1.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.375rem; }
.thumbnail > img { max-width: 100%; height: auto; }

/* --- List Inline (BS4 → BS5) --- */
.list-inline { padding-left: 0; list-style: none; }
.list-inline > li { display: inline-block; padding-right: 0.5rem; padding-left: 0.5rem; }

/* --- Navbar (BS4 → BS5) --- */
.navbar-default { background-color: #f8f9fa; border-color: #e9ecef; }

/* --- Display utilities (念のため) --- */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
}
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
}

/* --- カスタマイズ用CSS --- */