/* ===== ProductConfigurator — self-contained styles (BS3 + BS4 kompatibilní) ===== */
/* Všechny vizuální třídy mají prefix .pc-* a žijí pod #productConfiguratorApp,
   takže nesahají do okolního DOM ani na něj nespoléhají.
   Modal/popover obal (.modal, data-toggle="modal", data-toggle="popover")
   zůstává Bootstrap (BS3 i BS4 sdílí stejné JS API). */

#productConfiguratorApp,
#productConfiguratorApp *,
#productConfiguratorApp *::before,
#productConfiguratorApp *::after {
    box-sizing: border-box;
}

[v-cloak] { display: none; }

/* ---------- grid ---------- */
.pc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}
.pc-col-6, .pc-col-12,
.pc-col-md-5, .pc-col-md-7,
.pc-col-lg-4, .pc-col-lg-8 {
    padding: 0;
}
.pc-col-6  { flex: 0 0 50%;  max-width: 50%; }
.pc-col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .pc-col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .pc-col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
}
@media (min-width: 992px) {
    .pc-col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .pc-col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

/* ---------- alerty ---------- */
.pc-alert {
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.pc-alert--success { color: #155724; background: #d4edda; border-color: #c3e6cb; }
.pc-alert--danger  { color: #721c24; background: #f8d7da; border-color: #f5c6cb; }

/* ---------- tlačítka ---------- */
.pc-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    user-select: none;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}
.pc-btn:hover    { background: #e6e6e6; border-color: #adadad; color: #333; text-decoration: none; }
.pc-btn--xs      { padding: 1px 5px; font-size: 12px; border-radius: 3px; }
.pc-btn--danger  { color: #fff; background: #d9534f; border-color: #d43f3a; }
.pc-btn--danger:hover  { color: #fff; background: #c9302c; border-color: #ac2925; }
.pc-btn--success { color: #fff; background: #5cb85c; border-color: #4cae4c; }
.pc-btn--success:hover { color: #fff; background: #449d44; border-color: #398439; }
.pc-btn--primary { color: #fff; background: #337ab7; border-color: #2e6da4; }
.pc-btn--primary:hover { color: #fff; background: #286090; border-color: #204d74; }

/* ---------- helpers ---------- */
.pc-text-center { text-align: center; }
.pc-bg-warning  { background-color: #fcf8e3; }

/* ---------- ikony ---------- */
.pc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}
@media (max-width: 767.98px) {
    .pc-icon-hide-xs { display: none; }
}

/* ---------- vlastní komponentní styly ---------- */
.selections {
    margin: 0;
    padding: 8px;
    border: 2px solid #ffffff;
    display: none;
}

.fetchedParamsMessage {
    color: mediumorchid;
    display: none;
    padding: 4px 0;
}

.itemChosenParam {
    border: 1px solid #337ab7;
    border-radius: 15px;
    margin: 4px 0;
    padding: 4px 6px;
    display: inline-block;
    color: #337ab7;
}

.paramChosen {
    border: 2px solid #5cb85c;
    color: #5cb85c;
}

.itemChosenParamName  { padding: 0 4px; }
.itemChosenParamPrice { display: inline; color: #555; font-weight: bold; }
.itemChosenParamPriceVisible { display: inline !important; }

.paramSpecificImageAvailableIcoBg {
    background: #3983B2;
    position: absolute;
    padding: 6px 6px 3px 6px;
    text-align: left;
    font-size: 85%;
    color: #fff;
}

.optionHolderWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.optionHolder {
    padding: 3px;
    margin: 3px;
    cursor: pointer;
    border: 2px solid transparent;
    width: 210px;
    position: relative;
}
.optionHolder:hover { border: 2px solid #555; }
.optionHolder > img { width: 200px; height: 200px; margin: 0; }

.param-row-locked { cursor: default !important; opacity: 0.85; }
.param-row-locked .itemChosenParam { cursor: default; }

.param-lock-ico {
    margin-left: 6px;
    color: #5cb85c;
    width: 1em;
    height: 1em;
}

.inline-options-panel {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    margin: 4px 0 12px;
    padding: 8px;
}
.inline-options-panel .pc-alert { margin-bottom: 8px; }