/* ── Timepicker (analog clock) ─────────────────────────────────────────────── */
/* Calendar and Numpad use inline/injected styles matching Lextron 1 */

.cWidget-clock {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    padding:        8px 0 16px;
    user-select:    none;
    width:          100%;
}

.cWidget-clock-display {
    display:     flex;
    align-items: center;
    gap:         2px;
    width:       100%;
    padding:     0 4px;
}

.cWidget-clock-confirm {
    margin-left:   auto;
    padding:       6px 16px;
    font-size:     0.85rem;
    font-weight:   600;
    border:        none;
    border-radius: 20px;
    background:    var(--bs-primary, #0d6efd);
    color:         #fff;
    cursor:        pointer;
    transition:    opacity 0.15s;
}

.cWidget-clock-confirm:active { opacity: 0.8; }

.cWidget-clock-seg {
    font-size:     2.8rem;
    font-weight:   700;
    color:         var(--bs-secondary-color, #6b7280);
    cursor:        pointer;
    padding:       2px 8px;
    border-radius: 10px;
    line-height:   1;
    transition:    color 0.15s, background 0.15s;
}

.cWidget-clock-seg--active {
    color:      var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #cfe2ff);
}

.cWidget-clock-seg-sep {
    font-size:   2.8rem;
    font-weight: 700;
    color:       var(--bs-secondary-color, #6b7280);
    line-height: 1;
}

.cWidget-clock-face {
    width:        100%;
    height:       auto;
    aspect-ratio: 1;
    display:      block;
    cursor:       crosshair;
}

.cWidget-clock-bg { fill: #f3f4f6; }

.cWidget-clock-num {
    font-size: 13px;
    fill:      #374151;
}

.cWidget-clock-num--small  { font-size: 10px; }

.cWidget-clock-num--active {
    fill:        #fff;
    font-weight: 700;
}

.cWidget-clock-num-bg { fill: var(--bs-primary, #0d6efd); }

/* Часове/минути преди minTime (виж TimepickerConfig.minTime) — визуално disabled, мирор на Calendar isDisabled опацитета. */
.cWidget-clock-num--disabled  { fill: #d1d5db; }
.cWidget-clock-tick--disabled { fill: #e5e7eb; }

.cWidget-clock-center-btn {
    fill:   var(--bs-primary-bg-subtle, #cfe2ff);
    cursor: pointer;
}

.cWidget-clock-center-label {
    font-size:      11px;
    font-weight:    700;
    fill:           var(--bs-primary, #0d6efd);
    cursor:         pointer;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.cWidget-clock-tick {
    fill:       #cbd5e1;
    transition: fill 0.1s;
}

.cWidget-clock-tick--active { fill: var(--bs-primary, #0d6efd); }

.cWidget-clock-meta {
    width:       100%;
    border-top:  1.5px solid var(--bs-border-color, #dee2e6);
    padding-top: 8px;
    text-align:  center;
}

.cWidget-clock-mode {
    font-size:      0.75rem;
    font-weight:    500;
    color:          var(--bs-secondary-color, #6b7280);
    letter-spacing: 0.3px;
}

.cWidget-clock-range-label {
    font-size:      9px;
    font-weight:    600;
    fill:           var(--bs-primary, #0d6efd);
    pointer-events: none;
    letter-spacing: 0.5px;
}

/* -- Cropper ---------------------------------------------------------------- */

.widget-cropper {
    display:         flex;
    justify-content: center;
    user-select:     none;
}

.widget-cropper__canvas {
    display:       block;
    max-width:     100%;
    touch-action:  none;
    cursor:        grab;
    border-radius: 0.5rem;
    background:    #f1f5f9;
}

.widget-cropper__canvas:active {
    cursor: grabbing;
}

/* -- Camera ------------------------------------------------------------------ */

.widget-camera {
    display:         flex;
    justify-content: center;
}

.widget-camera__frame {
    position:  relative;
    width:     100%;
    max-width: 420px;
}

.widget-camera__video {
    display:       block;
    width:         100%;
    border-radius: 0.5rem;
    background:    #000;
}

/* Квадратен прозорец (аватар): рамката е 1:1, видеото я запълва и се реже по средата — не се опъва нагоре на телефон */
.widget-camera__frame--square {
    aspect-ratio: 1 / 1;
    overflow:     hidden;
    border-radius: 0.5rem;
}

.widget-camera__frame--square .widget-camera__video {
    height:     100%;
    object-fit: cover;
}

.widget-camera__torch {
    position:        absolute;
    top:             0.75rem;
    right:           0.75rem;
    z-index:         2;
    width:           36px;
    height:          36px;
    border:          none;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.45);
    color:           #fff;
    font-size:       1.05rem;
}

.widget-camera__torch--on {
    background: #ffc107;
    color:      #000;
}

/* Задраскана светкавица (изключено) — Bootstrap Icons няма lightning-off
   клас, диагонал през иконата чрез pseudo-element вместо втора икона. */
.widget-camera__torch--off::after {
    content:    '';
    position:   absolute;
    left:       18%;
    right:      18%;
    top:        50%;
    height:     2px;
    background: currentColor;
    transform:  translateY(-50%) rotate(-45deg);
}

/* -- Camera: fullscreen scan модал ------------------------------------------- */

.widget-camera__frame--fullscreen {
    max-width: none;
    width:     100%;
    height:    100%;
}

.widget-camera__frame--fullscreen .widget-camera__video {
    height:        100%;
    object-fit:    cover;
    border-radius: 0;
}

.widget-camera__close {
    position:        absolute;
    top:             0.75rem;
    left:            0.75rem;
    z-index:         2;
    width:           36px;
    height:          36px;
    border:          none;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.45);
    color:            #fff;
    font-size:       1.05rem;
}

/* Примигва докато CameraStabilityDetector не прецени картината за "тиха"
   (виж докблока там), после плътно зелено — потребителска заявка "рамка
   която примигва... докато не стане готова и светне в зелено". */
.widget-camera__focus-frame {
    position:      absolute;
    inset:         14px;
    border:        4px solid #fff;
    border-radius: 1rem;
    pointer-events: none;
    opacity:       0.45;
    transition:    border-color .25s ease, opacity .25s ease;
    animation:     widget-camera-focus-blink 1s ease-in-out infinite;
}

@keyframes widget-camera-focus-blink {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.85; }
}

.widget-camera__focus-frame--ready {
    border-color: #28a745;
    opacity:      1;
    animation:    none;
}

.widget-camera__shutter {
    position:  absolute;
    left:      50%;
    bottom:    1.5rem;
    transform: translateX(-50%);
    width:     64px;
    height:    64px;
    z-index:   2;
}