/**
 * Gravity Forms R2 영상 업로드 필드 스타일
 */

/* -----------------------------------------------------------------------
컨테이너
----------------------------------------------------------------------- */
.gfield-r2-uploader {
	--error-1: #ffebeb;
    --error-2: #da2800;
	--success-1: #13A658;
	--notice-1: #fff8e1;
	--notice-2: #A97E00;
	--progress-2: #468AFF;
}

.gfield-r2-uploader * {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.gfield-r2-uploader {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	background: #FBFBFB;
	border: 1px dotted #cdcdcd;
	padding: 20px 20px !important;
	min-height: 190px;
}

.gfield-r2-uploader * {
	box-sizing: border-box;
}

.gfield-r2-file-label-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

/* hidden 어트리뷰트가 display: flex/grid 등에 덮이지 않도록 강제 */
.gfield-r2-uploader [hidden] {
	display: none !important;
}

/* 폼 편집기 프리뷰 */
.gfield-r2-editor-preview {
	background: #f0f4ff;
	border-color: #a0b0e0;
	cursor: default;
}

/* 안내 텍스트 */
.gfield-r2-guide {
	text-align: center;
	color: #7e7e7e;
	font-size: 13px;
	font-weight: 500;
	line-height: 150%;
}

/* -----------------------------------------------------------------------
파일 선택
----------------------------------------------------------------------- */

.gfield-r2-file-label {
	background: #55555e;
    color: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-appearance: button;
    padding: 10px 20px;
	transition: background 0.2s;
}

.gfield-r2-file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
파일 정보 (progress 헤더 내 파일명)
----------------------------------------------------------------------- */

.gfield-r2-filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	min-width: 0;
}

/* -----------------------------------------------------------------------
이어 올리기 프롬프트
----------------------------------------------------------------------- */
.gfield-r2-resume-prompt {
	width: 100%;
	background: var(--notice-1);
	border: none;
	border-radius: 0;
	margin: 0;
}

.gfield-r2-resume-message {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 150%;
	color: var(--notice-2);
}

/* -----------------------------------------------------------------------
업로드 중 / 완료 / 오류 / 이어올리기 — 컨테이너 레이아웃
----------------------------------------------------------------------- */

.gfield-r2-uploader.is-uploading,
.gfield-r2-uploader.is-complete {
	align-items: stretch;
	justify-content: flex-start;
	gap: 16px;
}

.gfield-r2-uploader.is-error,
.gfield-r2-uploader.is-resume {
	align-items: stretch;
	justify-content: space-between;
	gap: 16px;
}

.gfield-r2-uploader.is-error .gfield-r2-error,
.gfield-r2-uploader.is-resume .gfield-r2-resume-prompt {
	padding: 14px 14px;
}

.gfield-r2-uploader.is-error .gfield-r2-actions,
.gfield-r2-uploader.is-resume .gfield-r2-actions {
	margin-top: auto;
}

/* -----------------------------------------------------------------------
   진행률 표시
----------------------------------------------------------------------- */

.gfield-r2-progress {
	width: 100%;
}

.gfield-r2-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.gfield-r2-progress-track {
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.gfield-r2-progress-bar {
	height: 100%;
	background: var(--progress-2);
	border-radius: 3px;
	transition: width 0.3s ease;
	min-width: 0;
}

.gfield-r2-uploader.is-complete .gfield-r2-progress-bar {
	background: var(--success-1);
}

@keyframes ep-gf-sub-progress-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.7; }
}

.gfield-r2-uploader.is-uploading .gfield-r2-progress-bar[aria-valuenow="0"] {
	animation: ep-gf-sub-progress-pulse 1.5s infinite;
}

.gfield-r2-progress-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.gfield-r2-progress-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #7e7e7e;
	min-width: 0;
}

.gfield-r2-progress-meta > span:empty {
	display: none;
}

.gfield-r2-progress-text {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 14px;
	color: var(--progress-2);
	line-height: 1;
}

.gfield-r2-uploader.is-complete .gfield-r2-progress-text {
	color: var(--success-1);
}

.gfield-r2-chunks,
.gfield-r2-speed,
.gfield-r2-eta {
	color: inherit;
}

.gfield-r2-status {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: #7e7e7e;
	white-space: nowrap;
}

.gfield-r2-uploader.is-complete .gfield-r2-status {
	color: var(--success-1);
}

/* -----------------------------------------------------------------------
   액션 버튼
----------------------------------------------------------------------- */

.gfield-r2-actions {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: auto;
}

.gfield-r2-cancel,
.gfield-r2-retry,
.gfield-r2-reupload,
.gfield-r2-resume-yes,
.gfield-r2-resume-no {
	padding: 6px 10px !important;
	border-radius: 2px;
	border: 1px solid #666666;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
	color: #333333;
	transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.gfield-r2-cancel,
.gfield-r2-cancel:hover,
.gfield-r2-retry,
.gfield-r2-retry:hover,
.gfield-r2-reupload,
.gfield-r2-reupload:hover,
.gfield-r2-resume-yes,
.gfield-r2-resume-yes:hover,
.gfield-r2-resume-no,
.gfield-r2-resume-no:hover {
	border-color: #666666;
	color: #333333;
}

.gfield-r2-cancel:hover,
.gfield-r2-retry:hover,
.gfield-r2-reupload:hover,
.gfield-r2-resume-yes:hover,
.gfield-r2-resume-no:hover {
	border-color: #a6a6a6;
	color: #a6a6a6;
	background: #fff !important;
}

/* -----------------------------------------------------------------------
오류 상태
----------------------------------------------------------------------- */

.gfield-r2-error {
	width: 100%;
	background: var(--error-1);
	border: none;
	border-radius: 0;
	margin: 0 !important;
}

.gfield-r2-error-message {
	font-size: 14px;
    font-weight: 500;
    line-height: 150%;
	color: var(--error-2) !important;
}

/* -----------------------------------------------------------------------
반응형
----------------------------------------------------------------------- */

@media (max-width: 767px) {
	.gfield-r2-uploader {
		padding: 10px 10px !important;
		min-height: 160px;
	}
}