/**
 * Theme Name:     Good Morning Images Custom Theme
 * Author:         Good Morning Images Team
 * Template:       hello-elementor
 * Text Domain:	   good-morning-images-custom-theme
 * Description:    Good Morning Images Custom is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 * Theme URI:      https://goodmorningimages.live/
 * Author URI:     https://goodmorningimages.live/
 * Version:        1.0
 */
/* Compact inline styles for the toolbar and pickers (adjust to match theme styles) */
.comment-toolbar {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 6px
}

.comment-toolbar button {
	background: #f5f5f5;
	border: 1px solid #ddd;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center
}

.comment-toolbar button.active {
	background: #e9f5ff
}

.comment-toolbar .spacer {
	flex: 1
}

.emoji-picker,
.sticker-picker {
	position: absolute;
	background: #fff;
	border: 1px solid #ddd;
	padding: 8px;
	border-radius: 8px;
	display: none;
	z-index: 1000;
	max-width: 320px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08)
}

.emoji-picker button,
.sticker-picker button {
	border: 0;
	background: transparent;
	font-size: 20px;
	padding: 6px;
	cursor: pointer
}

.sticker-picker button {
	font-size: 30px
}

.comment-box-wrap {
	position: relative
}

#comment {
	min-height: 90px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	resize: vertical;
	width: 100%
}

.send-btn {
	background: #0073aa;
	color: #fff;
	border: 0;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	z-index: 20
}

.small-note {
	font-size: 12px;
	color: #666;
	margin-top: 6px
}

/* Dashicons sizing inside buttons and fallback */
.comment-toolbar .dashicons {
	font-size: 18px;
	line-height: 1
}

.send-btn .dashicons {
	font-size: 16px;
	display: inline-block
}

.send-fallback {
	font-size: 16px;
	line-height: 1;
	display: inline-block;
	margin-left: 2px
}

/* Ensure toolbar stays visible on small screens */
@media (max-width:480px) {
	.comment-toolbar {
		gap: 6px
	}

	.comment-toolbar button {
		padding: 6px
	}
}

/* New inline comment input styles to match the image */
.comment-input-wrap {
	position: relative;
	margin-top: 12px
}

.comment-input {
	width: 100%;
	border: 1px solid #e3e3e3;
	border-radius: 28px;
	padding: 12px 48px 12px 16px;
	font-size: 15px;
	outline: none;
	box-sizing: border-box
}

.comment-input:focus {
	border-color: #cfdff0;
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.06)
}

.comment-icons {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 8px;
	align-items: center
}

.comment-icons button {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 6px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center
}

.comment-icons .dashicons {
	font-size: 18px;
	color: #222
}

.send-inline {
	background: #0073aa;
	color: #fff;
	border-radius: 20px;
	padding: 6px 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0
}

/* Small adjustments so pickers show above other content */
.emoji-picker,
.sticker-picker {
	z-index: 2000
}

/* Collapsed comments: show only the first (newest) comment */
.comment-list.collapsed li {
	display: none;
}

.comment-list.collapsed li:first-child {
	display: flex;
}

/* Toggle button in comments header */
.comments-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px
}

.comments-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 6px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center
}

.comments-toggle .dashicons {
	font-size: 24px;
	transition: transform .18s ease
}

.comments-toggle[aria-expanded="true"] .dashicons {
	transform: rotate(180deg)
}

/* ---------- New comment item styles to match provided image ---------- */
/* Layout: avatar + content row */
.comment-list li.comment {
	list-style: none;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0
}

.comment-list li.comment>article {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 0;
	margin: 0
}

/* Avatar */
.comment-list .comment-author {
	flex: 0 0 auto
}

.comment-list .comment-author .avatar,
.comment-list .comment-avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	border: 1px solid #eee;
	display: block
}

/* Body column */
.comment-list .comment-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column
}

/* Top row: name + meta + reply button */
.comment-list .comment-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #8a8a8a;
	margin-bottom: 6px;
	width: 100%
}

/* Author name (purple) */
.comment-list .comment-author .fn {
	font-weight: 700;
	color: #5b2dbf;
	font-size: 14px;
	line-height: 1;
	display: inline-block
}

/* "says:" (WP often outputs .says) */
.comment-list .comment-author .says,
.comment-list .comment-meta .says {
	color: #9a9a9a;
	font-weight: 400;
	margin-left: 6px;
	font-size: 12px
}

/* Timestamp smaller and muted */
.comment-list .comment-metadata {
	font-size: 12px;
	color: #9a9a9a;
	margin-left: 8px
}

/* Place reply link to the right */
.comment-list .reply,
.comment-list .reply a,
.comment-list .comment-actions .reply-link {
	margin-left: auto;
	color: #1a5fe0;
	font-weight: 600;
	text-decoration: none;
	padding-left: 8px
}

/* Content */
.comment-list .comment-content {
	font-size: 15px;
	color: #222;
	line-height: 1.35;
	margin: 0
}

/* Minimal spacing and subtle hover color */
.comment-list li.comment:hover .comment-content {
	color: #111
}



/* Small screens: keep layout tidy */
@media (max-width:480px) {
	.comment-list li.comment>article {
		flex-direction: row
	}

	.comment-list .comment-actions {
		flex-direction: row;
		margin-left: 8px
	}

	.comment-list .reply {
		margin-left: 8px
	}
}

/* compact single-line name + comment, time on next line (no "says", no extra spacing) */
.compact-comment {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0
}

.compact-comment .avatar {
	flex: 0 0 auto
}

.compact-comment .avatar img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #eee
}

.compact-comment .body {
	flex: 1;
	min-width: 0;
	display: block
}

.compact-comment .author-line {
	white-space: normal;
	overflow-wrap: anywhere;
	font-weight: 700;
	color: #111;
	font-size: 14px;
	display: inline
}

.compact-comment .author-line .comment-text {
	font-weight: 400;
	margin-left: 6px
}

.compact-comment .time-line {
	font-size: 12px;
	color: #8a8a8a;
	margin-top: 4px;
	line-height: 1
}
ol.comment-list.collapsed , ol.comment-list{
    margin:0;
    padding:0px 10px;
}
h3.comments-title {
    font-szie:16px;
}
.download-btn {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 8px;            /* 8px border radius */
    border: 1px solid #fe8e0a;     /* 1px border with color */
    background-color: transparent;  /* transparent background */
    color: #fe8e0a;                /* text color same as border */
    text-decoration: none;
    transition: all 0.3s ease;     /* smooth hover transition */
}

.download-btn:hover {
    background-color: #fe8e0a;     /* hover background */
    color: #ffffff;                 /* hover text color */
}
.attachment-lightbox-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.attachment-lightbox-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.attachment-lightbox-img:hover {
    transform: scale(1.02);
}

.attachment-caption {
    margin-top: 8px;
    font-size: 16px;
    color: #555;
    font-style: italic;
    line-height: 1.4;
}