/* ==========================================================================
   PHOTO GALLERY MOD - CodyChat 11
   Append this to the END of your css/custom.css.

   Goes with the vip_photo_slots-Cypher addon, the core edits in CORE-EDITS.txt
   and the two replacement files. Every rule below is scoped to the gallery, the
   photo tiles or the addon's own panels, so nothing here restyles the rest of
   your chat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [2026-07-27] MOD: vip_photo_slots-Cypher — drag-to-reorder profile photos
   -------------------------------------------------------------------------- */
/* touch-action:none is required — it stops the browser panning/scrolling from a
   touch that starts on a photo, which would otherwise cancel the drag. It is set
   only on the tiles, so the rest of the modal still scrolls normally.

   [2026-07-28] Now scoped to .vps_reorder. This rule used to apply whenever the
   manage view was open, which meant tiles showed a move cursor even though the
   gallery is paged and dragging is off — and, worse, touch-action:none on a
   non-draggable tile blocks scrolling the modal on a phone. The paired rules are
   in the gallery-paging block further down. */
#my_photo .photo_item .del_photo { cursor: pointer; touch-action: auto; }

/* stop the browser's native image drag (the translucent "ghost" image) from
   hijacking the gesture before our pointer handler sees it */
#my_photo .photo_item img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

/* the tile currently being dragged */
#my_photo .photo_item.vps_dragging {
	opacity: .55;
	transform: scale(.96);
	transition: transform .08s ease;
}

/* Show the WHOLE photo instead of cropping it.
   Stock main.css:1430-1431 gives each tile a 1:1 aspect-ratio with
   object-fit:cover, which fills the square by cutting off the long edge of any
   non-square image. `contain` scales the image to fit entirely inside the tile
   instead, letterboxing the leftover space. The soft background makes that
   space look deliberate rather than like a rendering gap, and works against
   both light and dark themes. Applies to the gallery and the profile view so
   what a user arranges is what visitors see.
   !important is used deliberately: main.css's rule has identical specificity
   (.photo_item img), so this would otherwise win only by load order — and any
   future change to the stylesheet order would silently undo it. */
.photo_item img,
#my_photo .photo_item img {
	object-fit: contain !important;
	object-position: center !important;
}
/*  [2026-07-28] Transparent, not grey.

    Thumbnails are FITTED rather than cropped, so a non-square photo leaves gaps
    inside its square tile. A grey fill made those gaps obvious, and members can
    set their own profile background — so any fixed colour is wrong on some
    profiles. Transparent lets whatever is behind show through.

    The matching half of this fix is in vpsFitThumb(): PNG/GIF/WebP thumbnails
    now keep their alpha channel instead of being matted onto white. */
.photo_item { background: transparent; }

/* ==========================================================================
   [2026-07-27] MOD: vip_photo_slots-Cypher — Manage-photos panel styling
   COLOURS ARE THE ONLY THING HERE YOU SHOULD EXPECT TO CHANGE. The purple is
   VIP, the gold is currency and the orange accent came from one site's logo.
   Swap them for your own brand — no layout depends on any of these values.
   ========================================================================== */

/* --- header row: Add button + slot counter -------------------------------- */
.vps_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 2px 12px;
	border-bottom: 1px solid rgba(128, 128, 128, .18);
}
.vps_head .brelative { margin: 0; }

/* counter as a pill so it reads as a status, not stray text */
.vps_count {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(128, 128, 128, .14);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}
.vps_count .vps_slash { opacity: .45; font-weight: 400; }
.vps_count_lbl {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	opacity: .55;
	margin-left: 3px;
}

/* --- VIP buy bar, sits under the gallery ---------------------------------- */
#vps_wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, #6B3FA8 0%, #8E52D6 52%, #6B3FA8 100%);
	box-shadow: 0 5px 16px rgba(107, 63, 168, .32);
}
/* accent edge — recolour this to your own brand, or delete the rule entirely */
#vps_wrap::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, #FF7A45, #F4542A);
}
/* soft sheen, keeps the flat purple from looking dead */
#vps_wrap::after {
	content: '';
	position: absolute;
	right: -30px; top: -60px;
	width: 150px; height: 150px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	pointer-events: none;
}

.vps_crown {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, #FFD764, #F0A825);
	color: #6B3FA8;
	font-size: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.vps_txt { flex: 1 1 auto; min-width: 0; }
.vps_title {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
}
.vps_sub {
	font-size: 12px;
	opacity: .88;
	line-height: 1.35;
}
.vps_sub b { color: #FFD764; }
.vps_dot { opacity: .5; margin: 0 3px; }

.vps_btn {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	padding: 9px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	color: #fff;
	background: linear-gradient(135deg, #FF7A45, #F4542A);
	box-shadow: 0 3px 10px rgba(244, 84, 42, .40);
	transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.vps_btn:hover  { filter: brightness(1.07); box-shadow: 0 4px 14px rgba(244, 84, 42, .55); }
.vps_btn:active { transform: translateY(1px); }
.vps_btn:disabled { opacity: .6; cursor: default; filter: none; }

/* narrow screens: let the button drop onto its own line */
@media (max-width: 420px) {
	#vps_wrap { flex-wrap: wrap; }
	.vps_btn  { width: 100%; margin-top: 4px; }
}

/* gold balance chip inside the VIP bar */
.vps_bal {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .22);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	color: #FFD764;
}
.vps_bal img { width: 15px; height: 15px; display: block; }
/* not enough gold for the next slot — informational only, the button still works
   so the server can return the proper "not enough gold" message */
.vps_bal.vps_short { color: #FFB4A2; background: rgba(180, 30, 30, .30); }

@media (max-width: 420px) {
	.vps_bal { order: 3; }
	.vps_btn { order: 4; }
}

/* keep short phrases like "max 50" from splitting across lines */
.vps_nowrap { white-space: nowrap; }

/* ==========================================================================
   [2026-07-28] MOD: vip_photo_slots-Cypher — gallery paging, 3 rows of 4
   Stock is 5 across and unpaginated, so a 50-photo VIP gallery was one long
   scroll. Paged client-side by loadPhoto(); switching pages costs no request.
   ========================================================================== */

/* 4 across instead of stock's 5, so a page is exactly 3 rows of 4.
   Applies to the manage view too, which stays unpaged but should match. */
.photo_gallery .photo_item {
	width: calc((100% / 4) - 10px);
}

/* tiles on a page other than the current one. display:none also means a
   browser will not fetch their loading="lazy" images at all, so a 50-photo
   gallery still downloads only the 12 thumbnails actually on screen. */
.photo_item.vps_pg_hide { display: none; }

.vps_pager {
	clear: both;                 /* .photo_item floats — without this the pager
	                                would sit alongside the last row */
	text-align: center;
	padding: 12px 0 4px;
}
.vps_pg_btn {
	display: inline-block;
	min-width: 26px;
	margin: 0 2px;
	padding: 4px 7px;
	border-radius: 5px;
	font-size: 12px;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	background: rgba(128, 128, 128, .12);
	transition: background .15s ease, opacity .15s ease;
}
.vps_pg_btn:hover { background: rgba(128, 128, 128, .22); }
.vps_pg_btn.vps_pg_on {
	background: rgba(60, 140, 220, .85);
	color: #fff;
	cursor: default;
}
/* prev/next at the ends of the range — visible but inert */
.vps_pg_btn.vps_pg_off {
	opacity: .35;
	cursor: default;
	background: rgba(128, 128, 128, .08);
}

/* narrow screens: 3 across keeps the tiles a usable size */
@media (max-width: 480px) {
	.photo_gallery .photo_item {
		width: calc((100% / 3) - 10px);
	}
}

/* --- pager: hide page numbers outside the current window ----------------
   loadPhoto() and vpsGo() both apply .vps_pg_far using the same rule. Without
   this a gallery of 1700 photos renders 142 page buttons across the modal. */
.vps_pg_far { display: none; }

/* --- gallery self-service [2026-07-29] --------------------------------------
   Buttons that are shown but cannot act. Deliberately NOT greyed out to look
   disabled: a disabled-looking control invites no click, and the whole point is
   that clicking explains why. It stays a normal button and answers when pressed. */
.pv_blocked {
	cursor: pointer;
}
.pv_blocked:hover {
	/* a touch dimmer on hover, hinting it behaves differently without
	   announcing itself as broken */
	opacity: .85;
}

/* The upsell line that occupies the buy bar's place for members who cannot buy.
   Same vertical rhythm as #vps_wrap so the layout does not jump between a VIP
   and a non-VIP viewing their own gallery. */
.vps_upsell {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
	background: rgba(128, 128, 128, .12);
	border: 1px solid rgba(128, 128, 128, .18);
}
.vps_upsell .fa-crown {
	flex: 0 0 auto;
	color: #F0A825;
	font-size: 15px;
}

/* --- gift slots to another member ------------------------------------- */
.vps_gift_bar {
	clear: both;              /* tiles float — needed even with no pager above */
	text-align: center;
	margin-top: 14px;
	padding: 14px 10px 4px;
	/* a hairline separates it from the grid so it reads as a footer action
	   rather than another item floating among the photos */
	border-top: 1px solid rgba(128, 128, 128, .18);
}
.vps_gift_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 190px;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .2px;
	cursor: pointer;
	user-select: none;
	color: #fff;
	background: linear-gradient(180deg, #3E9BE8 0%, #2C7FC7 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
	transition: filter .15s ease, transform .08s ease;
}
.vps_gift_btn:hover  { filter: brightness(1.08); }
.vps_gift_btn:active { transform: translateY(1px); }
.vps_gift_btn i { font-size: 14px; }

/* narrow screens: full width reads better than a floating pill */
@media (max-width: 480px) {
	.vps_gift_btn { display: flex; width: 100%; min-width: 0; }
}

/* --- reorder mode, own manage view only ------------------------------- */
#vps_reorder_bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 4px 0 0;
}
.vps_reorder_btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
	user-select: none;
	background: rgba(128, 128, 128, .14);
	transition: background .15s ease;
}
.vps_reorder_btn:hover { background: rgba(128, 128, 128, .24); }
#vps_reorder_bar.vps_reorder_active .vps_reorder_btn {
	background: rgba(60, 140, 220, .85);
	color: #fff;
}
/* the hint only means anything once reordering is switched on */
.vps_reorder_hint { font-size: 11px; opacity: .65; display: none; }
#vps_reorder_bar.vps_reorder_active .vps_reorder_hint { display: inline; }

/*  The move cursor and touch-action live here rather than on .photo_item
    generally, so tiles behave like normal links until reorder mode is on —
    touch-action:none on a non-draggable tile would block scrolling. */
#my_photo.vps_reorder .photo_item { cursor: move; touch-action: none; }
#my_photo.vps_reorder .photo_item .del_photo { touch-action: auto; }

/* ==========================================================================
   [2026-11-06] gay-chat-rooms.com login page: darker background + soft effects
   The photo comes from control/login/Default/login.css (stock, untouched). This
   layers a plum tint over it so the white text reads, adds slowly drifting
   pride-colored glows, and puts a frosted panel behind the text and buttons.
   #intro_top is display:table, so the effect layer hangs off .bcell_mid.
   ========================================================================== */
#intro_top {
	background-color: #1a0f24;
	background-image: linear-gradient(180deg, rgba(26,15,36,.70) 0%, rgba(26,15,36,.58) 45%, rgba(26,15,36,.78) 100%), url('../control/login/Default/images/background.webp');
}
#intro_top > .bcell_mid { position: relative; overflow: hidden; }
#intro_top > .bcell_mid::before {
	content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(28% 22% at 18% 30%, rgba(255,61,139,.35), transparent 70%),
		radial-gradient(24% 20% at 82% 24%, rgba(124,77,255,.32), transparent 70%),
		radial-gradient(26% 22% at 70% 78%, rgba(255,140,0,.26), transparent 70%),
		radial-gradient(22% 18% at 28% 82%, rgba(43,108,240,.26), transparent 70%),
		radial-gradient(18% 16% at 50% 50%, rgba(0,161,75,.16), transparent 70%);
	filter: blur(30px);
	animation: gcrGlow 38s ease-in-out infinite alternate;
}
#intro_top > .bcell_mid::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 45%, rgba(10,5,16,.55) 100%);
}
@keyframes gcrGlow {
	0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
	50%  { transform: translate3d(3%,-2%,0) rotate(8deg) scale(1.06); }
	100% { transform: translate3d(-3%,2%,0) rotate(-6deg) scale(1.02); }
}
#login_all {
	position: relative; z-index: 1;
	width: 620px;
	background: rgba(30,16,44,.42);
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-radius: 28px;
}
#login_all .login_text p,
#login_all .tpad20 p { text-shadow: 0 2px 10px rgba(0,0,0,.55); }
#login_all .login_text .text_med { color: rgba(255,255,255,.92); }
#intro_lang { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
	#intro_top > .bcell_mid::before { animation: none; }
}

/* [2026-11-07] Room list icons: rounded tiles (pride-flag icons for Gay/Lesbian/Bi/Trans rooms) */
.room_cicon { border-radius:12px; box-shadow:0 2px 6px rgba(35,23,47,.18); object-fit:cover; }