/* ---------------------------------------------------------------------------
   prettyPhoto control fix.

   prettyPhoto draws its close button and prev/next arrows from sprite sheets
   under /2_head/img/prettyPhoto/. Those files do not exist on the production
   server (they 404), which leaves the controls invisible — the gallery lightbox
   cannot be closed without reloading the page.

   The controls are drawn here in CSS instead. Nothing else is changed: the white
   panel, its padding and the "N/20" counter keep their original geometry, and
   the transparent click-halves over the image still page the gallery.
   --------------------------------------------------------------------------- */

/* --- close button --- */
div.light_square a.pp_close,
div.pp_pic_holder a.pp_close {
    width: 26px;
    height: 26px;
    background: none;
    text-indent: -10000px;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.2s linear;
}

div.pp_pic_holder a.pp_close:hover {
    opacity: 1;
}

div.pp_pic_holder a.pp_close::before,
div.pp_pic_holder a.pp_close::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 12px;
    width: 20px;
    height: 2px;
    background: #333;
    text-indent: 0;
}

div.pp_pic_holder a.pp_close::before {
    transform: rotate(45deg);
}

div.pp_pic_holder a.pp_close::after {
    transform: rotate(-45deg);
}

/* --- prev / next arrows in the details bar --- */
div.pp_pic_holder a.pp_arrow_previous,
div.pp_pic_holder a.pp_arrow_next {
    background: none;
    position: relative;
    opacity: 0.55;
    transition: opacity 0.2s linear;
}

div.pp_pic_holder a.pp_arrow_previous:hover,
div.pp_pic_holder a.pp_arrow_next:hover {
    opacity: 1;
}

div.pp_pic_holder a.pp_arrow_previous::before,
div.pp_pic_holder a.pp_arrow_next::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    text-indent: 0;
}

div.pp_pic_holder a.pp_arrow_previous::before {
    transform: rotate(-45deg);
}

div.pp_pic_holder a.pp_arrow_next::before {
    transform: rotate(135deg);
    left: 1px;
}

div.pp_pic_holder a.pp_arrow_previous.disabled,
div.pp_pic_holder a.pp_arrow_next.disabled {
    opacity: 0.15;
    cursor: default;
}

/* --- loading spinner (its animated gif is missing too) --- */
div.pp_pic_holder .pp_loaderIcon {
    background: none;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    animation: pp-spin 0.8s linear infinite;
}

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