/*  UserMenu */
.mod_user_menu .my_gifts a{ background:url(/images/gifts.gif) no-repeat 6px 6px; }
.mod_user_menu .my_gifts a.has_new { color:#FFE900; }

/* Кнопка "Отправить" */
.button_yes {
    margin: 3px;
    cursor: pointer;
    padding: 6px 14px;
    border: 1px solid #357abd;
    border-radius: 3px;
    color: #fff;
    background: #4a90e2; /* Тот же цвет, что у заголовка */
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s; /* Плавная смена цвета */
}

.button_yes:hover {
    background: #357abd; /* Чуть темнее при наведении */
}

/* Кнопка "Отмена" и "Закрыть" */
.button_no {
    margin: 3px;
    cursor: pointer;
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #555;
    background: #f0f0f0;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.button_no:hover {
    background: #e5e5e5;
    color: #333;
    border-color: #bbb;
}

/* Alert */
/* Основной контейнер */
#popup_container {  
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  text-align: left;
}

/* Убираем все старые табличные картинки и ячейки */
#popup_container .tl, #popup_container .tr, 
#popup_container .bl, #popup_container .br, 
#popup_container .b {
  display: none !important;
}

/* Настраиваем центральный блок как самодостаточное окно */
#popup_container .body {
  background: #ffffff;
  width: 400px;
  margin: auto; /* Центрируем */
  border: 1px solid #d1d1d1; /* Тонкая светлая рамка */
  box-shadow: 0 5px 20px rgba(0,0,0,0.2); /* Мягкая тень */
  border-radius: 6px; /* Скругление углов */
  overflow: hidden; /* Чтобы заголовок не вылезал за скругления */
}

/* Заголовок — делаем его современным и не "толстым" */
#popup_title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  background: #4a90e2; /*  был светлый серый фон */
  border-bottom: 1px solid #eeeeee;
  padding: 12px 15px;
}

/* Индикатор загрузки */
#popup_progress { 
  display: none; 
  text-align: center; 
  padding: 40px 0; 
}
#popup_progress span { 
  background: url(/components/present/image/win/progress.gif) no-repeat center; 
  display: inline-block;
  width: 150px; 
  height: 20px; 
}

/* Панель с кнопками внизу */
#popup_panel {
  background: #fcfcfc;
  border-top: 1px solid #eeeeee;
  padding: 10px 15px;
  text-align: right;
}

/* Тексты */
#popup_message { padding: 10px; }
#popup_message h6 { 
  color: #4a90e2; 
  font-size: 14px; 
  text-align: center; 
  padding: 20px 0; 
}

/* Other */

#presenList {
  padding: 10px;
  position: relative;
  overflow-y: auto;
  width: 100% !important; /* Для адаптивности */
  box-sizing: border-box;
  height: 210px; /* Немного увеличим высоту для рядов с ценами */
}

#presenList a {
  display: block;
  float: left;
  width: 80px;      /* 76px картинка + запас */
  height: 96px;     /* Уменьшили со 110px до 96px */
  margin: 2px 5px;  /* Уменьшили вертикальный отступ с 5px до 2px */
  padding: 2px;
  text-decoration: none;
  position: relative;
  border: 1px solid transparent;
}

#presenList a:hover {
  background: #f0f4f8;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
}

#presenList img {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border: none;
}

/* Сделали плашку видимой всегда и ровно по ширине картинки */
#presenList div {
  visibility: visible !important;
  opacity: 1 !important;
  background: #96d3ff;
  text-align: center;
  width: 76px !important; /* Строго по ширине картинки */
  margin: 0 !important; /* margin: 2px 0 0 0 !important; */
  position: relative !important; /* Убрали абсолют, чтобы не налезало */
  z-index: 10;
  border-radius: 0 0 4px 4px;
}

#presenList span {
  font-size: 10px;
  color: #000;
  display: block;
  padding: 1px 0;           /* Ужали высоту текста внутри плашки */
  line-height: 1.2;         /* Компактная высота строки */
}

/* Убираем старые графические скругления */
b.rbottom { display: none !important; }

/* Стиль для выбранного подарка, который останется над формой */
.selected_gift_wrapper {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    width: 80px;
    margin: 10px auto;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


/* Tabs */
.usr_present_entry{margin-bottom:45px;width:100%}
.usr_present_title{float:left;margin-bottom:5px;color:#5F98BF;}
.usr_present_links{float:right;font-size:10px;width:100%;padding-right:20px;padding-bottom:3px;border-bottom:dotted 1px #dae2e8;padding-top:0;}
.usr_present{padding-top:5px;overflow:hidden}
.usr_present_header{float:left;width:100%;font-size:13px;margin-bottom:6px;font-weight:bold;padding-left:10px;color:#45688e;background:#ebf0f4;border:solid 1px #d8dfea}
.usr_present_body{padding:2px}
.usr_present_addlink{float:right;font-size:11px;padding-right:25px;padding-top:2px;font-weight:normal}
.usr_present_delete { float:right; padding:5px; }


/* Стили для мобильных экранов меньше 500px */
@media screen and (max-width: 500px) {
    #popup_container .body {
        width: 95% !important;    /* Окно почти на всю ширину экрана */
        min-width: 280px;
        margin: 10px auto;        /* Небольшие отступы по краям */
    }

    #presenList {
        padding: 5px;
        text-align: center;
    }

    /* Уменьшаем размер подарков, чтобы их влезало больше в ряд на узком экране */
    #presenList a {
        width: 65px;             /* Чуть меньше картинка */
        height: 90px;
        margin: 4px;
    }

    #presenList a img {
        width: 65px;
        height: 65px;
    }

    #presenList a span {
        width: 65px !important;
        font-size: 9px;          /* Мельче шрифт цены */
    }

    #popup_title {
        font-size: 14px;
        padding: 10px;
    }

    #popup_panel {
        text-align: center;      /* Кнопки по центру, так удобнее нажимать пальцем */
    }
    
    .button_yes, .button_no {
        padding: 8px 12px;       /* Увеличиваем кнопки для пальца */
        margin: 5px 2px;
        display: inline-block;
    }
}