.irp-image-wrapper {
position: relative;
display: block;
width: 100%;
max-width: 100%;
pointer-events: auto;
}
.irp-image-wrapper img {
display: block;
max-width: 100%;
height: auto; } .irp-report-btn {
position: absolute;
color: #fff;
border: none;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
} .irp-report-btn.irp-btn-size-small {
padding: 5px 10px;
font-size: 11px;
}
.irp-report-btn.irp-btn-size-medium {
padding: 8px 16px;
font-size: 13px;
}
.irp-report-btn.irp-btn-size-large {
padding: 12px 24px;
font-size: 16px;
} .irp-report-btn.irp-btn-color-red {
background-color: rgba(220, 53, 69, 0.9);
}
.irp-report-btn.irp-btn-color-red:hover {
background-color: rgba(220, 53, 69, 1);
}
.irp-report-btn.irp-btn-color-blue {
background-color: rgba(0, 123, 255, 0.9);
}
.irp-report-btn.irp-btn-color-blue:hover {
background-color: rgba(0, 123, 255, 1);
}
.irp-report-btn.irp-btn-color-green {
background-color: rgba(40, 167, 69, 0.9);
}
.irp-report-btn.irp-btn-color-green:hover {
background-color: rgba(40, 167, 69, 1);
}
.irp-report-btn.irp-btn-color-orange {
background-color: rgba(255, 140, 0, 0.9);
}
.irp-report-btn.irp-btn-color-orange:hover {
background-color: rgba(255, 140, 0, 1);
}
.irp-report-btn.irp-btn-color-custom { }
.irp-report-btn.irp-btn-color-custom:hover { } .irp-report-btn.irp-btn-top-left {
top: 10px;
left: 10px;
right: auto;
bottom: auto;
}
.irp-report-btn.irp-btn-top-right {
top: 10px;
right: 10px;
left: auto;
bottom: auto;
}
.irp-report-btn.irp-btn-bottom-left {
bottom: 10px;
left: 10px;
top: auto;
right: auto;
}
.irp-report-btn.irp-btn-bottom-right {
bottom: 10px;
right: 10px;
top: auto;
left: auto;
}
.irp-report-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.irp-report-btn:active {
transform: translateY(0);
} .irp-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999998;
overflow-y: auto;
}
body.irp-modal-open {
overflow: hidden;
} .irp-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
}
.irp-modal-content {
position: relative;
background: #fff;
margin: 50px auto;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: irp-modal-fade-in 0.3s ease;
}
@keyframes irp-modal-fade-in {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.irp-modal-header {
padding: 20px 25px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
transition: border-color 0.3s ease;
}
.irp-modal-title {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.irp-modal-close {
background: none;
border: none;
font-size: 28px;
color: #999;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
transition: color 0.3s ease;
}
.irp-modal-close:hover {
color: #333;
}
.irp-modal-body {
padding: 25px;
} .irp-report-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.irp-report-option {
padding: 20px;
border: 2px solid #e0e0e0;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
background: #f9f9f9;
}
.irp-report-option:hover {
background: #fff;
transform: translateX(5px);
}
.irp-report-option.active {
background: #fff5f5;
} .irp-modal-color-red .irp-modal-header {
border-bottom-color: rgba(220, 53, 69, 0.2);
}
.irp-modal-color-red .irp-report-option:hover {
border-color: #dc3545;
}
.irp-modal-color-red .irp-report-option.active {
border-color: #dc3545;
background: #fff5f5;
}
.irp-modal-color-red .irp-form-title {
border-bottom-color: #dc3545;
}
.irp-modal-color-red .irp-form-input:focus,
.irp-modal-color-red .irp-form-textarea:focus {
border-color: #dc3545;
}
.irp-modal-color-red .irp-file-upload-label:hover {
border-color: #dc3545;
}
.irp-modal-color-red .irp-form-submit {
background: #dc3545;
}
.irp-modal-color-red .irp-form-submit:hover:not(:disabled) {
background: #c82333;
}
.irp-modal-color-red .irp-form-label .required {
color: #dc3545;
}
.irp-modal-color-red .irp-checkbox {
accent-color: #dc3545;
}
.irp-modal-color-blue .irp-modal-header {
border-bottom-color: rgba(0, 123, 255, 0.2);
}
.irp-modal-color-blue .irp-report-option:hover {
border-color: #007bff;
}
.irp-modal-color-blue .irp-report-option.active {
border-color: #007bff;
background: #f0f8ff;
}
.irp-modal-color-blue .irp-form-title {
border-bottom-color: #007bff;
}
.irp-modal-color-blue .irp-form-input:focus,
.irp-modal-color-blue .irp-form-textarea:focus {
border-color: #007bff;
}
.irp-modal-color-blue .irp-file-upload-label:hover {
border-color: #007bff;
}
.irp-modal-color-blue .irp-form-submit {
background: #007bff;
}
.irp-modal-color-blue .irp-form-submit:hover:not(:disabled) {
background: #0056b3;
}
.irp-modal-color-blue .irp-form-label .required {
color: #007bff;
}
.irp-modal-color-blue .irp-checkbox {
accent-color: #007bff;
}
.irp-modal-color-green .irp-modal-header {
border-bottom-color: rgba(40, 167, 69, 0.2);
}
.irp-modal-color-green .irp-report-option:hover {
border-color: #28a745;
}
.irp-modal-color-green .irp-report-option.active {
border-color: #28a745;
background: #f0fff4;
}
.irp-modal-color-green .irp-form-title {
border-bottom-color: #28a745;
}
.irp-modal-color-green .irp-form-input:focus,
.irp-modal-color-green .irp-form-textarea:focus {
border-color: #28a745;
}
.irp-modal-color-green .irp-file-upload-label:hover {
border-color: #28a745;
}
.irp-modal-color-green .irp-form-submit {
background: #28a745;
}
.irp-modal-color-green .irp-form-submit:hover:not(:disabled) {
background: #218838;
}
.irp-modal-color-green .irp-form-label .required {
color: #28a745;
}
.irp-modal-color-green .irp-checkbox {
accent-color: #28a745;
}
.irp-modal-color-orange .irp-modal-header {
border-bottom-color: rgba(255, 140, 0, 0.2);
}
.irp-modal-color-orange .irp-report-option:hover {
border-color: #ff8c00;
}
.irp-modal-color-orange .irp-report-option.active {
border-color: #ff8c00;
background: #fff8f0;
}
.irp-modal-color-orange .irp-form-title {
border-bottom-color: #ff8c00;
}
.irp-modal-color-orange .irp-form-input:focus,
.irp-modal-color-orange .irp-form-textarea:focus {
border-color: #ff8c00;
}
.irp-modal-color-orange .irp-file-upload-label:hover {
border-color: #ff8c00;
}
.irp-modal-color-orange .irp-form-submit {
background: #ff8c00;
}
.irp-modal-color-orange .irp-form-submit:hover:not(:disabled) {
background: #e67e00;
}
.irp-modal-color-orange .irp-form-label .required {
color: #ff8c00;
}
.irp-modal-color-orange .irp-checkbox {
accent-color: #ff8c00;
} .irp-modal-color-custom {
--irp-custom-color: #dc3545; --irp-custom-color-rgba-20: rgba(220, 53, 69, 0.2); --irp-custom-color-hover: rgba(220, 53, 69, 1); }
.irp-modal-color-custom .irp-modal-header {
border-bottom-color: var(--irp-custom-color-rgba-20);
}
.irp-modal-color-custom .irp-report-option:hover {
border-color: var(--irp-custom-color);
}
.irp-modal-color-custom .irp-report-option.active {
border-color: var(--irp-custom-color);
background: rgba(220, 53, 69, 0.05); }
.irp-modal-color-custom .irp-form-title {
border-bottom-color: var(--irp-custom-color);
}
.irp-modal-color-custom .irp-form-input:focus,
.irp-modal-color-custom .irp-form-textarea:focus {
border-color: var(--irp-custom-color);
}
.irp-modal-color-custom .irp-file-upload-label:hover {
border-color: var(--irp-custom-color);
}
.irp-modal-color-custom .irp-form-submit {
background: var(--irp-custom-color);
}
.irp-modal-color-custom .irp-form-submit:hover:not(:disabled) {
background: var(--irp-custom-color-hover, var(--irp-custom-color));
}
.irp-modal-color-custom .irp-form-label .required {
color: var(--irp-custom-color);
}
.irp-modal-color-custom .irp-checkbox {
accent-color: var(--irp-custom-color);
}
.irp-modal-color-custom .irp-thankyou-icon {
background: var(--irp-custom-color);
}
.irp-report-option-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.irp-report-option-desc {
font-size: 14px;
color: #666;
margin: 0;
} .irp-report-form-container {
display: none;
}
.irp-form-title {
font-size: 22px;
font-weight: 700;
color: #333;
margin: 0 0 25px 0;
padding-bottom: 15px;
border-bottom: 2px solid #dc3545;
}
.irp-report-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.irp-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.irp-form-label {
font-size: 14px;
font-weight: 600;
color: #333;
}
.irp-form-label .required {
color: #dc3545; }
.irp-form-input,
.irp-form-textarea {
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.3s ease;
}
.irp-form-input:focus,
.irp-form-textarea:focus {
outline: none;
border-color: #dc3545; }
.irp-form-textarea {
resize: vertical;
min-height: 100px;
}
.irp-form-description {
font-size: 13px;
color: #666;
margin-bottom: 10px;
}
.irp-content-categories-field {
display: none;
}
.irp-removal-categories-field {
display: none;
}
.irp-checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 300px;
overflow-y: auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fafafa;
}
.irp-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s ease;
font-size: 14px;
color: #333;
}
.irp-checkbox-label:hover {
background: #f0f0f0;
}
.irp-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #dc3545; flex-shrink: 0;
}
.irp-checkbox-label span {
flex: 1;
line-height: 1.4;
}
.irp-file-upload-field {
display: none;
}
.irp-file-upload-label {
display: inline-block;
padding: 12px 20px;
background: #f0f0f0;
border: 2px dashed #ddd;
border-radius: 4px;
cursor: pointer;
text-align: center;
transition: all 0.3s ease;
}
.irp-file-upload-label:hover {
background: #e8e8e8;
border-color: #dc3545; }
.irp-file-upload-input {
display: none;
}
.irp-file-name {
margin-top: 8px;
font-size: 13px;
color: #666;
}
.irp-form-submit {
padding: 14px 30px;
background: #dc3545; color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.irp-form-submit:hover:not(:disabled) {
background: #c82333;
}
.irp-form-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.irp-form-error {
padding: 12px;
background: #fee;
border: 1px solid #fcc;
border-radius: 4px;
color: #c33;
margin-bottom: 15px;
}
.irp-form-success {
padding: 12px;
background: #efe;
border: 1px solid #cfc;
border-radius: 4px;
color: #3c3;
margin-bottom: 15px;
} .irp-thankyou-message {
text-align: center;
padding: 40px 20px;
}
.irp-thankyou-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: #28a745; border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #fff;
font-weight: bold;
animation: irp-checkmark 0.5s ease;
}
.irp-modal-color-red .irp-thankyou-icon {
background: #dc3545;
}
.irp-modal-color-blue .irp-thankyou-icon {
background: #007bff;
}
.irp-modal-color-green .irp-thankyou-icon {
background: #28a745;
}
.irp-modal-color-orange .irp-thankyou-icon {
background: #ff8c00;
}
@keyframes irp-checkmark {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.irp-thankyou-text {
font-size: 18px;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0 20px;
} @media (max-width: 768px) {
.irp-modal {
padding: 10px;
}
.irp-modal-content {
margin: 20px auto;
}
.irp-modal-header {
padding: 15px 20px;
}
.irp-modal-title {
font-size: 20px;
}
.irp-modal-body {
padding: 20px;
}
.irp-report-btn.irp-btn-size-small {
padding: 4px 8px;
font-size: 10px;
}
.irp-report-btn.irp-btn-size-medium {
padding: 6px 12px;
font-size: 11px;
}
.irp-report-btn.irp-btn-size-large {
padding: 8px 16px;
font-size: 13px;
}
.irp-report-btn.irp-btn-top-left {
top: 5px;
left: 5px;
}
.irp-report-btn.irp-btn-top-right {
top: 5px;
right: 5px;
}
.irp-report-btn.irp-btn-bottom-left {
bottom: 5px;
left: 5px;
}
.irp-report-btn.irp-btn-bottom-right {
bottom: 5px;
right: 5px;
}
}
.irp-report-btn {
pointer-events: auto;
}