:root {
--grcop-primary: hsl(220, 90%, 56%);
--grcop-primary-hover: hsl(220, 90%, 46%);
--grcop-success: hsl(142, 76%, 36%);
--grcop-warning: hsl(38, 92%, 50%);
--grcop-danger: hsl(350, 89%, 60%);
--grcop-danger-hover: hsl(350, 89%, 48%);
--grcop-background: hsl(0, 0%, 100%);
--grcop-surface: hsl(210, 20%, 98%);
--grcop-border: hsl(210, 14%, 89%);
--grcop-text: hsl(210, 24%, 16%);
--grcop-text-light: hsl(210, 10%, 46%);
--grcop-radius-sm: 6px;
--grcop-radius-md: 12px;
--grcop-radius-lg: 20px;
--grcop-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
--grcop-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
} .grcop-form-container {
max-width: 500px;
margin: 2rem auto;
padding: 2.5rem;
background: var(--grcop-background);
border: 1px solid var(--grcop-border);
border-radius: var(--grcop-radius-lg);
box-shadow: var(--grcop-shadow);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.grcop-form-header {
text-align: center;
margin-bottom: 2rem;
}
.grcop-form-header h2 {
margin: 0 0 0.5rem 0;
font-weight: 700;
font-size: 1.75rem;
color: var(--grcop-text);
}
.grcop-form-header p {
color: var(--grcop-text-light);
margin: 0;
font-size: 0.95rem;
} .grcop-form-box {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.grcop-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.grcop-input-group label {
font-weight: 600;
font-size: 0.9rem;
color: var(--grcop-text);
}
.grcop-input-group label .required {
color: var(--grcop-danger);
}
.grcop-form-box input[type="text"],
.grcop-form-box input[type="email"],
.grcop-form-box input[type="number"],
.grcop-form-box textarea,
.grcop-form-box select {
width: 100%;
padding: 0.75rem 1rem;
border: 1.5px solid var(--grcop-border);
border-radius: var(--grcop-radius-sm);
background: var(--grcop-background);
color: var(--grcop-text);
font-size: 0.95rem;
transition: var(--grcop-transition);
}
.grcop-form-box input:focus,
.grcop-form-box textarea:focus,
.grcop-form-box select:focus {
border-color: var(--grcop-primary);
outline: none;
box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.15);
} .grcop-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.5rem;
font-weight: 600;
font-size: 0.95rem;
border-radius: var(--grcop-radius-sm);
border: none;
cursor: pointer;
transition: var(--grcop-transition);
text-decoration: none;
}
.grcop-btn-primary {
background: var(--grcop-primary);
color: var(--grcop-btn-text, #fff);
}
.grcop-btn-primary:hover {
background: var(--grcop-primary-hover);
filter: brightness(90%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.grcop-btn-primary:active {
transform: translateY(0);
} .grcop-items-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1.5rem 0;
}
.grcop-item-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--grcop-surface);
border: 1px solid var(--grcop-border);
border-radius: var(--grcop-radius-sm);
transition: var(--grcop-transition);
}
.grcop-item-row:hover {
border-color: var(--grcop-primary);
background: #fff;
}
.grcop-item-row.grcop-item-excluded {
opacity: 0.65;
background: hsl(0, 0%, 95%);
cursor: not-allowed;
}
.grcop-item-row.grcop-item-excluded:hover {
border-color: var(--grcop-border);
}
.grcop-item-check input[type="checkbox"] {
width: 20px;
height: 20px;
border-radius: 4px;
cursor: pointer;
}
.grcop-item-details {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grcop-item-price {
font-size: 0.85em;
color: var(--grcop-text-light);
}
.grcop-item-qty-select {
display: flex;
align-items: center;
gap: 0.5rem;
}
.grcop-item-qty-select select {
padding: 0.25rem 0.5rem;
width: auto;
} .grcop-refund-section {
border-top: 1px solid var(--grcop-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
}
.grcop-refund-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 0.75rem;
}
.grcop-radio-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-weight: 500;
}
.grcop-radio-label input[type="radio"] {
margin: 0;
} .grcop-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 4px;
text-transform: uppercase;
}
.grcop-badge-danger {
background: hsl(350, 89%, 95%);
color: var(--grcop-danger);
} .grcop-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
opacity: 0;
animation: grcop-fade-in 0.3s forwards ease;
}
.grcop-modal-content {
background: #fff;
width: 90%;
max-width: 550px;
max-height: 85vh;
overflow-y: auto;
border-radius: var(--grcop-radius-md);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
position: relative;
padding: 2rem;
transform: translateY(20px);
animation: grcop-slide-up 0.3s 0.1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
.grcop-modal-close {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 2rem;
font-weight: 300;
color: var(--grcop-text-light);
cursor: pointer;
transition: var(--grcop-transition);
}
.grcop-modal-close:hover {
color: var(--grcop-text);
} .grcop-loader, .grcop-submit-loader {
border: 3px solid var(--grcop-border);
border-top: 3px solid var(--grcop-primary);
border-radius: 50%;
width: 28px;
height: 28px;
animation: grcop-spin 0.8s linear infinite;
margin: 10px auto;
} .grcop-status-badge {
display: inline-block;
padding: 0.35em 0.8em;
font-size: 11px;
font-weight: 700;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.grcop-status-pending {
background-color: hsl(38, 92%, 95%);
color: var(--grcop-warning);
}
.grcop-status-approved {
background-color: hsl(220, 90%, 95%);
color: var(--grcop-primary);
}
.grcop-status-refunded {
background-color: hsl(142, 76%, 95%);
color: var(--grcop-success);
}
.grcop-status-rejected {
background-color: hsl(350, 89%, 95%);
color: var(--grcop-danger);
}
.grcop-button-danger {
background: transparent !important;
border: 1px solid var(--grcop-danger) !important;
color: var(--grcop-danger) !important;
transition: var(--grcop-transition);
}
.grcop-button-danger:hover {
background: var(--grcop-danger) !important;
color: #fff !important;
} @keyframes grcop-fade-in {
to { opacity: 1; }
}
@keyframes grcop-slide-up {
to { transform: translateY(0); }
}
@keyframes grcop-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}