/**
 * Theme Name:     Ridda Child
 * Author:         WebTend
 * Template:       ridda
 * Text Domain:	   ridda-child
 * Description:    Webtend team presents absolutely fresh and powerful WordPress theme. It combines new technologies and functional design that helps to showcase your content in better way. This WordPress theme is developed with attention to details, so you can create effective presentation of a website easily. Enjoy building web pages with our product!
 */


/**
 * SNIPPET 2: CSS STYLES
 * Order Form - Complete CSS Styling
 * 
 * Code Snippets Pro Settings:
 * - Title: "Order Form - CSS Styles"
 * - Code Type: CSS Stylesheet
 * - Run: Site Front-end
 * - Priority: 10
 */

/* Main Wrapper */
.pph-wrapper {
    background: #f5f7fa;
    padding: 40px 20px;
    min-height: 100vh;
}

.pph-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Progress Steps */
.pph-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: .4;
    transition: all .3s;
    flex: 1;
}

.step.active,
.step.done {
    opacity: 1;
}

.step .num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.step.active .num {
    background: #007bff;
    color: #fff;
}

.step.done .num {
    background: #28a745;
    color: #fff;
}

.step .label {
    font-size: 12px;
    color: #666;
}

/* Main Grid */
.pph-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

/* Content Box */
.pph-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.pph-box h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

/* Service Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.service-card {
    padding: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}

.service-card:hover,
.service-card.selected {
    border-color: #007bff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,123,255,.2);
}

.service-card .icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.service-card h4 {
    font-size: 14px;
    margin: 10px 0 5px;
}

.service-card p {
    color: #007bff;
    font-weight: bold;
    margin: 0;
}

/* Package Grid */
.package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.pkg-card {
    padding: 30px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all .3s;
    position: relative;
}

.pkg-card:hover,
.pkg-card.selected {
    border-color: #007bff;
    box-shadow: 0 5px 15px rgba(0,123,255,.2);
}

.pkg-card .badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #ffc107;
    color: #000;
    padding: 3px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
}

.pkg-card h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

.pkg-card .price {
    font-size: 32px;
    font-weight: bold;
    color: #007bff;
    margin: 15px 0;
}

.pkg-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pkg-card li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Pages & Delivery Section */
.pages-section,
.delivery-section {
    margin: 20px 0;
}

.pages-section h4,
.delivery-section h4 {
    margin-bottom: 15px;
    font-size: 16px;
}

.qty-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #007bff;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: all .3s;
}

.qty-btn:hover {
    background: #007bff;
    color: #fff;
}

.qty-control input {
    width: 60px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    padding: 5px;
}

#pages-text {
    text-align: center;
    color: #666;
    margin: 10px 0;
}

/* Delivery Cards */
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.del-card {
    padding: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
    position: relative;
}

.del-card:hover,
.del-card.selected {
    border-color: #007bff;
    box-shadow: 0 5px 15px rgba(0,123,255,.2);
}

.del-card .badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ffc107;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
}

.del-card .icon {
    font-size: 30px;
    margin-bottom: 10px;
}

.del-card h5 {
    font-size: 16px;
    margin: 5px 0;
}

.del-card p {
    color: #666;
    margin: 5px 0;
}

/* Form Inputs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

input[type=text],
input[type=email],
input[type=tel],
textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 15px;
    font-family: inherit;
}

input:focus,
textarea:focus {
    border-color: #007bff;
    outline: none;
}

textarea {
    resize: vertical;
}

/* File Upload */
.file-upload {
    margin: 15px 0;
}

.file-upload input[type="file"] {
    display: none;
}

.file-upload label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 2px dashed #007bff;
    border-radius: 8px;
    cursor: pointer;
    background: #f8f9fa;
    transition: all .3s;
}

.file-upload label:hover {
    background: #e3f2fd;
}

.file-upload .icon {
    font-size: 30px;
    margin-right: 10px;
}

.file-list {
    margin-top: 10px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    margin-bottom: 5px;
    border-radius: 5px;
}

.file-item button {
    border: none;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all .3s;
}

.file-item button:hover {
    background: #c82333;
}

/* Checkbox */
.checkbox {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 5px;
    margin: 15px 0;
    cursor: pointer;
}

.checkbox input {
    margin-right: 10px;
    cursor: pointer;
}

.checkbox span {
    font-size: 14px;
}

.checkbox a {
    color: #007bff;
    text-decoration: underline;
}

/* Coupon Box */
.coupon-box {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.coupon-box input {
    flex: 1;
    margin: 0;
}

.coupon-box button {
    padding: 12px 20px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all .3s;
}

.coupon-box button:hover {
    background: #0056b3;
}

.coupon-box button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

#coupon-msg {
    display: block;
    margin: 5px 0 15px;
    font-size: 13px;
}

#coupon-msg.error {
    color: #dc3545;
}

#coupon-msg.success {
    color: #28a745;
}

/* Buttons */
.btn-group {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-primary,
.btn-secondary,
.btn-success {
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s;
}

.btn-primary {
    background: #007bff;
    color: #fff;
    flex: 1;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-primary:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-secondary {
    background: #fff;
    color: #666;
    border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
    background: #f8f9fa;
}

.btn-success {
    background: #28a745;
    color: #fff;
    width: 100%;
    padding: 15px;
}

.btn-success:hover {
    background: #218838;
}

.btn-success:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-lg {
    font-size: 18px;
    padding: 15px;
}

/* Review Box */
.review {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
}

.review p {
    margin: 10px 0;
    font-size: 14px;
}

.review strong {
    color: #333;
}

/* Summary Sidebar */
.summary {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    position: sticky;
    top: 20px;
}

.summary h3 {
    margin-bottom: 15px;
    font-size: 20px;
}

.summary .row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.summary .row span:first-child {
    color: #666;
}

.summary .row span:last-child {
    font-weight: 600;
    color: #333;
}

.summary .row.green {
    color: #28a745;
}

.summary .row.green span {
    color: #28a745;
}

.summary hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 10px 0;
}

.summary .total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
    border-top: 2px solid #007bff;
    margin-top: 10px;
}

/* Trust Badges */
.trust {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.trust div {
    padding: 5px 0;
    color: #28a745;
    font-size: 13px;
}

/* Animations */
.fade-in {
    animation: fadeIn .3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .pph-wrapper {
        padding: 20px 10px;
    }
    
    .pph-main {
        grid-template-columns: 1fr;
    }
    
    .pph-right {
        order: -1;
    }
    
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .service-card {
        padding: 15px;
    }
    
    .service-card .icon {
        font-size: 30px;
    }
    
    .service-card h4 {
        font-size: 12px;
    }
    
    .package-grid,
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .pph-box {
        padding: 20px;
    }
    
    .summary {
        position: static;
    }
    
    .pph-steps {
        padding: 15px 10px;
    }
    
    .step .label {
        font-size: 10px;
    }
    
    .step .num {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
}